Lecture Notes

UI Visual Design Patterns

  • Interface design isn’t just about the colours and shapes, but rather, about presenting to the user the right tools to accomplish their goals.
  • Good UI design should balance between aesthetics and effortless interactivity. They should guide users through the experience.
  • The UX (user experience) is the abstract feeling people get from using a website, the UI is what people interact with as part of that experience. You want your UX to be as positive as possible.
  • Common navigation patterns:
    • Tabs (navigation, module): They replicate real life filing cabinets, and is an example of skeuomorphism, which is the design concept of making items represented resemble their real world counterparts. You would use tabs to separate content, and accessed with a flat navigation structure.
    • Menus (horizontal dropdown, vertical dropdown, accordion): Good for subsections of navigation, and save space, however they’re not an example of easy interface as they require more travel and can be difficult to use.
    • Jumping in hierarchy (shortcut dropdown, fat footer, home link, breadcrumbs): By adding a shortcut to commonly used pages, it lessens the path for the users. Breadcrumbs describe the current location of the page within the hierarchy of the site.
    • Content (carousel, event calendar, article list, tags).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s