Usability Week 2010

Visual Web Design 2: Putting Graphics Elements Together to Form a Whole

  • Chicago: Wednesday, April 21
  • San Francisco: Wednesday, June 16
  • Toronto: Tuesday, August 10

Tammy Liran Guy
Full-Day Tutorial

For an effective UI design, you must choose and organize elements such as typography, images and colors combined with usability guidelines to communicate ideas and/or messages effectively. An interface that is both engaging and easy to follow and navigate through is one that will gain brand trust, successfully convey a message and/or contribute to revenue growth.

The key to success is collaboration among marketing groups, designers, business analysts, and programmers to reduce rework and costs, shorten time to market, and improve the product.

In this session, you’ll learn how to create successful layouts and bridge the natural gaps created by bringing various professions together. We’ll discuss visual design and usability best practices, as well as what you can expect various team members to contribute to a successful website design.

What You’ll Learn

In this session, you’ll learn how to:

  • Understand design concepts such as typography, balance, visual path, color, design processes and most common terms used.
  • Talk about visual design, with colleagues and/or external consultants. Get better design by understanding what you're being told and asking for what you want in the right terms.
  • Apply design concepts to web layouts – learn how to tackle redesign projects.
  • Make the connection between visual design, communication and usability. Evaluate each site design in terms of its functionality and target audience.
  • Develop ability to critique design and identify what works and what doesn’t, and how to fix it.
  • Appreciate collaborative efforts and phased projects. Plan ahead and learn what your team members need from you.

Course Outline

  • Recap Graphic Design Fundamentals and Concepts from Visual Web Design 1
    • What is Graphic Design
    • Brainstorming and creative thinking
    • Concept development
    • Typography
    • Balance and weight
    • Grids and layouts
    • Color theory
    • Space
    • Consistency
    • Visual path
    • Most common terms used
  • Design concepts applied to the web
    • Application of the above graphic design fundamentals
      • Navigation design
      • Form design
      • Product display
      • Content
      • Banners
    • Grids and Screen resolution
      • Fixed layouts versus liquid design
    • Design for worse case scenario
      • Global sites and multiple languages
      • Personalized design
      • Phased in projects
  • Web site redesign step by step
    • Redesign creative pages
    • Redesign forms and text layouts
  • Designers and cross functional teams
    • Marketing brief
    • Collaborative meetings
    • Focus group and testing
    • Phasing in approach
    • Style guide

Format

This full-day tutorial includes lectures, exercises, and discussion.

Handouts

Copies of all presentation slides

Who Should Attend?

Non-designers (marketing, programmers, business analysts and web architects) who wish to acquire basic design skills and understand how to communicate with visual design professionals. May also be useful for entry-level designers who are new to the web design world.

See Also:

The first seminar in this two-part series is Visual Web Design 1: Graphic Design Fundamentals and Concepts, which will help you think more like a designer, develop your design sense, train your eye and bridge some natural gaps caused by bringing various professions together for successful web site design.

While it is not required to have attended Day 1, it is helpful, because the Day 2 material builds upon and extends the concepts introduced in the first seminar.

Instructor

photo of Tammy Liran Guy Tammy Liran Guy is a graphic designer working primarily on diffusing user experience problems by applying design theory and usability best practices in a rapidly changing Web environment. She previously worked as the Creative Director at LivePerson, Inc., which humanizes the online experience by providing a real-time chat platform and provides an online community and marketplace where individuals can chat live with experts in a broad range of categories. Prior to LivePerson, Tammy was the Graphic Design Group Manager at the Hertz Corporation, where she art-directed all aspects of graphical application development for all of Hertz’s customer facing websites, including hertz.com. Liran Guy holds a BS in Art with concentration on Computer Graphic Design from Northeastern University and a Masters of Package Design from Pratt Institute. Her Master thesis titled Internet Packaging: Rethinking Package Design for the World Wide Web examined current issues with package presentation on the Internet and suggested new guidelines for package design in order to optimize web display.