Transcript Introduction to Web Development

Trends in Web Design,
Standard Website Elements,
Basic Web Design Principles
8/18/2016
Web Development and Interactive Media
Trends in Web Design
• http://www.creativebloq.com/web-design/layout-trends-2015-sofar-71515699
• https://www.uxpin.com/web-design-trends-2016-definitiveguide?section=cards
• AWARD WINNING DESIGN:
http://www.cssdesignawards.com/wotd-award-winners
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)
•
•
•
•
•
Consistent design and location on every page within a website
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
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
Basic Web Design Principles
• Create Visual Hierarchy
• Intentionally guide viewers through the page’s content from mostimportant 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
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
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