Full day training course offered at Usability Week San Francisco

Web Page UX Design

Designing successful web pages based on priority, hierarchy, and balance

While people move fluidly across websites and the web in general, the foundation and basic unit of web design is the web page. Often we consider workflows and user journeys without ever evaluating the simple anatomy of successful web pages, such as what makes people stay on the page, read the content, scan the images, and move their eyes gracefully through the content. In this course we specifically dissect page design and the principles that influence the extent to which a page contributes to both the business objectives and user goals of a website or intranet.

"If you want to learn how to clean up your web pages to attract more viewers this course will help a lot! You do not want to overload consumers, clean and clear is key!"

Samantha Spacone, Graphic Designer
PromGirl, LLC

Please note: This course focuses on web page design, and does not cover interactive tools or web-based applications. If you are designing web applications, please consider our course on Application Design for Web and Desktop.

Topics covered

  • Understand how page elements can influence user behavior and meet your business objectives
    • Determining page goals
    • Concept to page design
    • Evaluating page design
  • Formatting and layout
    • Page density
    • Designing on a grid
    • Productive use of areas that generally attract less attention
    • Scrolling and the page fold
  • Priority and competition between page elements, what attracts users' attention
    • Visual design
    • Typography
    • Position
    • Size
    • Style and weight
    • Contrast
    • Color
    • Whitespace
    • Actionable parts (such as an applet)
    • Animations, auto-playing or rotating, and refreshing
  • Responsive design and mobile considerations
    • Tips for taking the Responsive Design approach
    • Layout patterns and uses
    • Prioritizing content across breakpoints
  • User behaviors with web pages
  • Eyetracking evidence of where people look
    • Residual fixations
    • Priority spots
    • Traditional page: navigation, content (the rest)
    • Columns, half-columns, and widgets
  • Navigation elements
    • Mega menus
    • Functional footers
    • Within-page navigation (such as tabs)
    • Sticky navigation and parallax scrolling
  • Visual and multimedia elements
    • Images
    • Carousels and hero graphics
    • Infographics
    • Tables
    • Modal windows

Free Material with Course Attendance

This 355-page report offers 83 recommendations for web writing and content layout, plus 102 detailed findings about how people read on the web, including scanning patterns revealed as we used eyetracking technology during usability tests.


The basis of the course is a lecture format with a couple of group exercises to reinforce the learned principles and guidelines.

The course also includes:

  • Findings from our own usability studies
  • Plenty of inspiring screenshots that we deconstruct to show why they work and where they fail
  • Opportunities to ask questions and get answers


Kara McCain

For more than 13 years, Kara McCain has been creating innovative brand and user experiences in the search, social media, luxury, hotel, travel, telecommunications, jewelry, professional sports, e-commerce, government and food service industries. Her expertise has allowed her to develop and implement highly successful Web and print design strategies for top Fortune 500 companies. Read more about Kara