Readings: 

Interactive Design:
chapter 10: branding the experience

function

Considering the form of a website, it is necessary to have most of the following elements to make it functional:

header

• The header identifies the site,
• is consistent from page to page,
• carries the brand of the site,
• but should not distract the user.

The navigation, or menu

• provides gateways to other pages,
• should stand apart from other elements on the page,
• should appear to be clickable,
• should be clear and legible.

The feature is the focal point on the home page.

• It may be a single message that delivers the main purpose of the site, or a carousel of several messages which lead to other areas of the site.
• The design of the feature should be quick and concise: 2-5 words in large type with eye-catching graphics.

Content is the detailed information that the user is looking for. Legibility, hierarchy, grouping all play an important role in the content, allowing the user to scan and read.

aside (sidebar)

• Information in the aside is secondary information
• Information in the aside supports main content, provides additional content, or used for advertising.
• The aside should not compete with the feature. Format it’s scale, color, font size and images to keep it secondary.
• Design elements of the aside should tie in with the header and footer, creating an overall feel for the page.

footer
Found at the bottom of the page, it can contain many things:

• copywrite and other legal,
• in larger sites, a simplified sitemap,
• and contact information :
• logo, phone & address.

background
Backgrounds should compliment overall design with depth, texture or color, but not compete with other content.

above the fold
The most important content in a site should appear above the fold. Above the fold is the area seen before scrolling. It’s a reference to newspaper.

branding

• branding with print includes design elements with an emotional connection.
• branding for interactive is that and more. The product offers promises and the user has expectations.
• branding has become user centered. branding for web includes the experience.

visual features of branding

color

• Color has the power to guide a user. Limiting the number of colors can create a strong visual direction to areas of importance.
• Color can create relationships. Users can then identify groups or function quickly by color.

texture

• Texture gives the user a tactile experience and allows them to connect to the content of the page.
• The texture should contribute  to the overall design adding emotion or distinct style.

imagery & iconography

• Imagery and iconography allow a user to get information quickly. A visual is replacings text.
• Imagery and icongraphy should serve a purpose or they become wasted downloads.
• Treatment of images throughout a site should be consistent, creating a style and reinforcing the brand.

white space
Use white space to group, create heirarchy, and guide the user.

• margins
• gutters
• padding
• line spacing
• paragraph spacing

containment
Uses borders, lines and boxes to define space and contain elements in sub-groups.

scale & perspective & depth & dimension

• spdd can add a lot of drama.
• Scale creates a sense of hierarchy.
• Perspective can add depth.
• Dimension adds a sense of realism and like texture, makes a site more tactile for the user.
• All can contribute to consistency and interest or uniqueness.

grids

• Grids are just as important in web as print in organizing elements and space.
• Select a grid system that suports the amount of text used and your design.
• Select column widths that support a good line-length for your fonts.
• Grids are formed by columns, gutters and  margins.

A column grid can have any number of columns. It accommodates long bodies of text and content of various length.

A modular grid works well when the amount of text is brief. Column width is equal to row height.

A hierarchical grid is neither column or modular, but based on hierarchy of design elements.

resources:

sample sites

https://kickpush.co/

http://www.amplify.com/tablet

http://www.ecodom.report/en/

https://www.awwwards.com/30-great-websites-with-parallax-scrolling.html

http://www.stojakovic.co/

http://www.sbs.com.au/theboat/

Understanding visual hierarchy in web design

exercise:

Continue developing your site plan for unit 2. Format your designs similar to pages 24-28 of this pdf.

1: Looking at your home page wireframe, make a list of elements in order of hierarchy. Create 15 sketches of possible layouts for the home page, focusing on hierarchy of all elements  (header, nav, feature, footer, content, aside). Using your best sketches, create 5-10 new sketches focusing on  vertical lines and spacial tension.

2: Sketch your three best layouts using a full 11×8.5 (horizontally – like a web page) for each design. Define each of the three layouts to include visual branding: color, texture, imagery & iconography, scale, perspective, depth and dimension. Where will you use white space and containment?

3: Looking at your favorite design, create a grid which will be used throughout the site. Determine if your grid should be columns, modular or hierarchical. Based on a 1024×786 window, give dimensions for margins, columns and gutters. This can be done with paper and pencil or in InDesign, but it helps to have the numbers written down for reference.

4: Using the grid, layout all the functional elements, design features and user experience features for the home page in InDesign.

If successful, layout designs for the rest of the pages. Note in the sample design study above, that if several pages are similar, only one design was created. Only the content is changing, so it’s not necessary to build several identical pages.