102265 Lecture Notes - Lecture 7: Skeuomorph, Accordion, Web Design
30 Jun 2018
School
Department
Course
Professor
102265 - Graphic Design: Interactive Digital Media
Lecture Notes – Student no. 18860519
Week 7
User Interface Visual Design Patterns.
“User Interface Design patterns are recurring solutions that solve
common design problems. Design patterns are standard reference
points for the experienced user interface designer. Dwell into
the patterns below to learn a common language of web design. Design
patterns provide a common language between designers.”(UI Patterns,
2018)
Common Navigation Patterns.
Tabs:
Navigation Tabs
Module Tabs
Menus:
Horizontal Dropdown Menu
Vertical Dropdown Menu
Accordion Menu
Jumping in Hierarchy:
Shortcut Dropdown
Fat Footer
Home Link
Breadcrumbs (for mobile devices)
Content:
Carousel
Event Calendar
Article List
Define:
noun.
Skeuomorphism .
The term skeuomorphism is derived from the Greek words “skeuos,”
which means “vessel or tool”, and “morphe,” which means
“shape.”(Techopedia, 2018) Skeuomorphism is the design concept /
principle of making items represent, resemble and mimic its real world
counterparts. Commonly used in many distinctive design fields, including
find more resources at oneclass.com
find more resources at oneclass.com
UI, web design, architecture, ceramics and interior design. ie. Tabs on a
website reflects the tabs within a filing cabinet.
TABS –
Used when content needs be separated into sections, accessed on a flat
navigation structure, that gives a clear indication of current locations. 2-9
sections of content. Section names are short. Fills width of the page.
Provide a list of the page’s highest sub section of a page.
DROP DOWNS-
Used when a user needs to search through sections when space is limited.
Saves space by organising and concealing information. sometimes difficult
to use. Flyout menus show only the title/top levels of the pages. ie.
drawers/trays. 2-9 sections that need a hierarchy structure.
find more resources at oneclass.com
find more resources at oneclass.com
Document Summary
User interface design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Dwell into the patterns below to learn a common language of web design. Design patterns provide a common language between designers. (ui patterns, The term skeuomorphism is derived from the greek words skeuos, which means vessel or tool , and morphe, which means. Shape. (techopedia, 2018) skeuomorphism is the design concept / principle of making items represent, resemble and mimic its real world counterparts. Commonly used in many distinctive design fields, including. Ui, web design, architecture, ceramics and interior design. ie. tabs on a website reflects the tabs within a filing cabinet. Used when content needs be separated into sections, accessed on a flat navigation structure, that gives a clear indication of current locations. Provide a list of the page"s highest sub section of a page.
