Basic UIUX Web Design Principles Standard Website Elements

Basic UI/UX (Web Design) Principles, Standard Website Elements, Trends in UI/UX M Ahmed Web Development and Interactive Media

UI + UX (aka Web Design) UI ≠ UX: UI creates UX User Interface • designer/developer end; technical • Content: info/data/imagery, etc • Design: how a website looks: colors, fonts, sizes (element dimensions and bandwidth), etc User Experience • user end; physical and emotional • Response: what the UI makes the user do (engage with content, heed calls to action, leave the site, etc) • Feel: how the UI makes the user feel (seamless, intuitive, frustrated, etc)

4 Standard Website Elements = Good UI • 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

4 Standard Website Elements = Good UI • 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

8 Basic UI Design Principles • 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

8 Basic UI Design Principles • 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

8 Basic UI 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 H 1 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

8 Basic UI Design Principles • Bias • Use design principles to emphasize and prompt • the most likely response (what the user wants) • the favored response (what the client wants; ethical issues) Agree and Allow Cookies? No Yes

8 Basic UI Design Principles • Provide what users want • Hunters: actively searching for something • Gatherers: passively browsing • Firefighters: in a hurry • Gardeners: take their time (Source: Brave UX)

Trends in Web Design • https: //www. creativebloq. com/features/the-top-design-trends-for 2020 • https: //www. uxpin. com/studio/ebooks/ • AWARD WINNING DESIGN: http: //www. cssdesignawards. com/wotd-award-winners