Dos And Don't Flashcards

1
Q

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.

A

DO design for all screen types and sizes
Dos:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

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).

A

DO design for all screen types and sizes
Don’t:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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!)

A

DON’T underestimate the importance of good imagery
Dos:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Rely solely on stock images.
Use confusing imagery—you’re better off having no imagery at all.

A

DON’T underestimate the importance of good imagery
Don’t:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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).

A

DO use alignment to create neat, user-friendly designs
Dos:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Leave alignment to chance.
Be inconsistent.

A

DO use alignment to create neat, user-friendly designs
Don’t:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Prioritize usability and accessibility when making design decisions.
Make icons and navigation clear and easy.
Find a balance.

A

DON’T let aesthetics compromise usability
Dos:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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.

A

DON’T let aesthetics compromise usability
Don’t:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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.

A

DO imitate real-world light
Dos:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Overdo it on opacity—subtle shadows work great.
Create unnatural shadows that go against how light falls in the real world.

A

DO imitate real-world light
Don’t:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

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.

A

DON’T forget about whitespace
Dos:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Think that whitespace can only be white.
Leave whitespace as an afterthought or an accident.

A

DON’T forget about whitespace
Don’t:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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.

A

DO use sufficient contrast
Dos:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Use light colored text on light backgrounds.
Place text on overly busy backgrounds or images (as in the House of Small Wonder example).

A

DO use sufficient contrast
Don’t:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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.

A

DON’T reinvent the wheel
Dos:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Be creative for creativity’s sake. Ever heard the saying “If it assin’t broken, don’t fix it”? The same applies to UI design.
Design in a way that requires unnecessary learning for your users.

A

DON’T reinvent the wheel
Don’t: