1. 8/18/2016 Web Development and Interactive Media
Trends in Web Design, Standard Website Elements, Basic Web Design Principles
8/18/ Web Development and Interactive Media

2. Trends in Web Design
far
guide?section=cards
AWARD WINNING DESIGN:

3. Standard Website Elements
Header
Consistent design and location on every page within a website
Usually found at top of page
Contains identifying information – corporate logo, title of website
Navigation (aka menu)
Provides a fast, easy, intuitive way for users to get where they want to go
Main menus are usually at top or left side of the page for best accessibility
Submenus can be anywhere
Footer menus (sitemaps) are trending

4. Standard Website Elements
Hero
A large section containing image or text, prominently placed on a web page, generally in the front and center
Usually the first visual a visitor encounters on the site
Purpose is to present an overview of the site's most important content
Comes before the main content of a webpage
Footer
Consistent design and location on every page within a website
Usually found at bottom of page
Must contain copyright notices, identifying information
Can contain contact info, submenus, social media icons

5. Basic Web Design Principles
Create Visual Hierarchy
Intentionally guide viewers through the page’s content from most- important to least-important using size, weight, color, emphasis, contrast and other design elements
Color Harmony
Use complementary, analogous or triadic schemes
Determine and use purposeful hues that reflect the goals of the website
Professional – dark blues/grays
Quirky – bright, saturated hues
Spa site – pastels or cool colors

6. Basic Web Design Principles
Create Contrast
Contrast can be used to create hierarchy, group similar items, or to differentiate content
Contrast size (big-small), colors (bright-dark), typefaces (serif-sans)
To maximize text legibility, set text in a color that highly contrasts the background color
Alignment
Like with any print design project, maintain consistent alignment (of text as well as elements) for all elements, on every page within a website
Consistent alignment is visually stabilizing, creates harmony, and is more professional

7. Basic Web Design Principles
Proximity
Close proximity is used to group similar items
Far proximity differentiates content
Embrace white space – it increases legibility, provides breathing room, and gives a contemporary feel to the design
Repetition
Create a style guide that gives your design a system – eg:
All H1 headings are blue, TNR, 25 points, etc
Body copy is black, Open Sans, 13 points, etc
Repetition creates consistency which increases user intuitiveness – eg:
Users instinctively know where to find the menu because it’s in the same place on every page