Empty input
Last updated 2017-08-10

Web design fundamentals

Design & UI

Web design and UI encompasses a few broad areas. What does a page look like? How does it behave? How does it respond to different screen sizes, input types, and devices?

Responsive design

Web surfing on mobile is growing astronomically. Unfortunately, much of the web isn't optimized for mobile devices, which are often constrained by display size and require a different approach to content layout.

Basics of UX

A great user experience can be difficult to attain but is achievable if the design process is broken into smaller chunks. This article runs through the basics of UX design, based on Google's Design Sprint methodology.

User input

Information entry happens more often on mobile than on desktop these days. Mobile forms are hard to fill out. Learn how to make responses to entry and touch both intuitive and beautiful.

Icons & browser colors

Modern browsers make it easy to customize components like icons and address bar color, and even add things like custom tiles. Simple tweaks can increase engagement and bring users back to your site.

Animations

Users expect responsive and interactive interfaces. Animating them isn't straightforward. What should be animated, when, and what kind of feel should the animations have?

Color, data, process, accessibility — these are all essential to designing for today’s web users, but are you doing them right? Tune in to learn the best practices that make the difference between web design that just looks good and web design that connects.

  • Color

  • Illustrator Geri Coady offers her take on appropriate color choices for web design. Reaching far beyond aesthetics, Geri dives into how color affects accessibility and user experience (UX), and recommends tools for testing color decisions on the web.

  • Accessibility 101

  • Accessibility advocate and developer Greg Tarnoff breaks down the basics of accessibility.  He explains accessibility myths and benefits, and the consequences of neglect. We also talk about how accessibility affects the entire workflow, starting with design.
  •  
  • Data-Driven Design

  • UX expert Matthew Oliphant explains how data can (and should!) inform critical design decisions. We discuss testing assumptions before a project begins, as well as how UX research affects process and the project lifecycle. He also shares different ways to test a website or app, real-world scenarios of testing, and ways to make sense of it all to fulfill client and user goals.
  •  
  • Designer-Developer Collaboration

  • Viget’s Megan Zlock and Owen Shifflett share tips for a productive, collaborative and enjoyable designer-developer relationship. We discuss misconceptions from both perspectives, advice on how to communicate better, and what tools and resources help increase designer-developer harmony.
  •  
  • Demystifying Web Design for Clients

  • If you can’t effectively talk to your clients (or boss or even colleagues) about web design, then you will struggle to meet their goals and expectations. In the first of our series on how to talk about the web in non-techy terms, Lea and I share analogies and scenarios that more clearly explain the value of web design from a client perspective. With human-friendly explanations (complete with examples) we bridge the gap between what we do as web designers, and how it relates to client values and goals.

Learn more on https://developers.google.com/web/fundamentals/design-and-ui/