Week 5 Outside of Class

Outside of class Megan and I made two responsive wireframes.

This is what our home page will look like.

This is what it would look like scaled down. It is still a work in progress. We struggled to find a way to have two of the navs next to each other at this point in the scaling.

This is what our Attractions & Food subpage will look like.

This is what it will look like scaled down. We had the same problem here that we did with the home page. We want to have two pictures next to each other at this point in the scaling.

Nicole also worked on more postcards for our site:

                                       

She said, "The first postcard is our final revised one. After getting feedback from the class there was only a couple of things that we needed to change from the original design. I created all 4 of these designs. We kept with the theme of what goes on during the festival so the second postcard that I made was reflecting the hayrides. I wanted to include the apples instead of having people riding on the back. The third design was just a series of different apples, and the fourth design is still a work in progress with the pie for a pie eating contest. I have a thought of just having a table with three pies all eaten or a stack of pies all eaten, but for now I am just going to play around with different ideas."

I also read pages 99-145 in the book. Here are my notes:

Design Styles

Super Clean:

• tends to contain a nice array of sites that vividly demonstrate an ability to be timeless
• extremely refined, content easy to consume, layout is free of all unneeded clutter

Flat Pixels:

• flat pixels is essentially the polar opposite of skeuomorph-based design
• flat pixels is a rejection of skeuomorphs and instead focuses on extremely simplified and flat designs
• lack the visual depths

Decorative:

• buck the trend toward flat pixels and lean toward more decorative or elaborate designs
• mean "decorative" by the sites relying on designs that contain lots of extra decoration that creates a distinct look and feel
• there are two reasons this approach is so seldom used
• with responsive design, it is really complicated to adapt a site to many different screen sizes
• as a result, designers have gravitated toward minimal, streamlined designs, as they are simply easier to adapt
• second, on mobile devices we tend to be more concerned with load speeds and therefore lean toward cleaner and simpler designs that load less decorative stuff

Minimal:

• if there is ever a default design to fall back on, it is definitely minimalism
• minimal sites tend to have smaller file sizes due to the streamlined design
• minimal sites can more easily adapt to various layouts via responsive techniques as there's less stuff to deal with
• a well-executed minimal site has the tendency to feel slick and is a timeless approach

Color Block:

• the use of solid color blocks as a design element makes perfect sense in the mobile world
• much like the minimal style, it is bandwidth-friendly and extremely flexible for responsive design

Atypical Layouts:

• it seems that no matter how often the industry agrees on ways of designing things, there are always designers our there that manage to bend and adapt the web to do extremely unique things
• the result is a set of sites that go together only because they are all so distinct and different
• if your site pushes the boundaries and doesn't adhere to the norms, you should carefully consider a streamlined interface that helps minimize confusion

Typography:

• on the mobile web, a lot of focus is placed on streamlining things so they load fast
• as a result it seems that custom typography is often overlooked
• though text in images is a bit out of style, it is still an extremely viable option
• given how users scan content, it makes sense to ensure that the key words stand out

Type as Design:

• with responsive and mobile web design, a lot of emphasis has been placed on streamlining things
• this means that on many websites, there is little in the way of decorative design
• this leaves the work of beautifying a design to the text in the page

A Big Button Array:

• when it comes to building a menu on a mobile site, it seems that many designers build a vertical list of text links
• there are many things to love about this style, but one of the most significant is the usability
• the buttons are easier to touch than thin rows of links

Light On Dark:

• white text pops better on mobile
• more dramatic

Dark On Light:

• most of the sites represented create a rather start contrast between the dark text and the light background
• this nearly black and white feel gives the site a crispness that is beautiful and easy to look at
• on the flip side, if you compare this to the light on dark sites, I think you will find that those sites have more of a pop to them, while these feel far more subdued and contained

Black and White:

• oftentimes, these were paired with an accent color, but still had a strong black and white base
• has a powerful aesthetic that speaks volumes about the content of the site
• it is amazing how much power a simple dash of color can have when you exercise such extreme control in the rest of the design
• if you try to emphasize everything, you end up emphasizing nothing