8/18/2016 Web Development and Interactive Media 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-so- far-71515699 https://www.uxpin.com/web-design-trends-2016-definitive- guide?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) 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 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

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