Dos And Don't Flashcards
Take a mobile-first approach—design for mobile devices (i.e. smaller screens) first and then work your way up to the desktop version.
Consider all the most common screen resolutions for mobile, tablet, and desktop devices.
Use responsive grids. You can learn how to create responsive grids in this guide.
DO design for all screen types and sizes
Dos:
Make users zoom or scroll horizontally to view important content on their mobile.
Include overly large images that take up the entire screen.
Place controls too close together (for e.g. two buttons next to each other which can easily be tapped by mistake).
DO design for all screen types and sizes
Don’t:
Use relevant images that help tell the right story.
Use high quality, high resolution images.
Ensure plenty of contrast between images and text (more on that later!)
DON’T underestimate the importance of good imagery
Dos:
Rely solely on stock images.
Use confusing imagery—you’re better off having no imagery at all.
DON’T underestimate the importance of good imagery
Don’t:
Learn about the different types of alignment (left, right, center, justified, horizontal, and vertical) and when to use them.
Consider how your users are likely to consume your content (based on the four most common reading patterns).
Use grids to make the process easier (and adhere to these 5 golden rules of using grids in web design).
DO use alignment to create neat, user-friendly designs
Dos:
Leave alignment to chance.
Be inconsistent.
DO use alignment to create neat, user-friendly designs
Don’t:
Prioritize usability and accessibility when making design decisions.
Make icons and navigation clear and easy.
Find a balance.
DON’T let aesthetics compromise usability
Dos:
Be so minimal with your aesthetic that your users can’t find the information they need.
Forget about the user’s end goal when designing your UI.
DON’T let aesthetics compromise usability
Don’t:
Make the ‘top lip’ of the object/element the brightest, as if it’s catching the most light.
Make the bottom section of the object/element the darkest, as though it’s angled away from the light.
Cast the shadow below the object/element.
DO imitate real-world light
Dos:
Overdo it on opacity—subtle shadows work great.
Create unnatural shadows that go against how light falls in the real world.
DO imitate real-world light
Don’t:
Use whitespace to separate different elements or sections on the page.
Use whitespace to help important call-to-action buttons stand out.
Treat whitespace like any other design element—use it strategically and intentionally.
DON’T forget about whitespace
Dos:
Think that whitespace can only be white.
Leave whitespace as an afterthought or an accident.
DON’T forget about whitespace
Don’t:
Ensure sufficient contrast between text and the background for optimal readability.
Use color contrast to highlight where new elements and sections begin.
Play around with dark and light, different color temperatures, and textures to create varying degrees of contrast.
DO use sufficient contrast
Dos:
Use light colored text on light backgrounds.
Place text on overly busy backgrounds or images (as in the House of Small Wonder example).
DO use sufficient contrast
Don’t:
Design with your user’s expectations and mental models in mind.
Make the most of UI component libraries and follow these user interface guidelines.
Take inspiration from similar and competing products.
DON’T reinvent the wheel
Dos:
