Elements of Clean Design
-
Upload
ariadne-rooney -
Category
Education
-
view
646 -
download
1
Transcript of Elements of Clean Design
![Page 1: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/1.jpg)
Elements of
Clean Design
![Page 2: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/2.jpg)
What is Clean Design?
![Page 3: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/3.jpg)
Definition
• A clean design is one that supports visual thinking so
people can meet their informational needs with a
minimum of conscious effort.
![Page 4: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/4.jpg)
Informational Needs
![Page 5: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/5.jpg)
Make it Easier to
Find Information
1. Deciding relevance. Do I even care?
2. Getting an overview. What are the main ideas? What's
most important?
3. Basic comprehension. What text explains this chart?
4. Retrieving buried details. I remember something
about an orangutan... where was that?
5. Finding actionable details. How do I get in touch?
![Page 6: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/6.jpg)
In the Real World…
1. What's this brochure about? Hm... looks like it's about phrenology. I need a phrenologist!
2. What services do they provide? Are they certified? Are they local? Huh. I dunno.
3. How do I get in touch? There’s no number. I’ll Google it later.
4. (Later, at home) Now what was I going to Google?
![Page 7: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/7.jpg)
Use Sizing
![Page 8: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/8.jpg)
What are the Size Differences?
![Page 9: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/9.jpg)
Use Size Consistently
Identify the roles of your
visual elements.
Size elements consistently.
Provide strong contrast
between elements with
different roles.
![Page 10: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/10.jpg)
Use Grid Structure
![Page 11: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/11.jpg)
Grids = Happy Reader
![Page 12: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/12.jpg)
Use Headings & Lists
![Page 13: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/13.jpg)
Headings
![Page 14: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/14.jpg)
Lists
Which one do you want to read?
![Page 15: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/15.jpg)
Proximity & Grouping
![Page 16: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/16.jpg)
Kitten Madness
![Page 17: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/17.jpg)
The Takeaway
Place related
items close to
each other.
Make sure the
grouping is
obvious.
Whitespace is
your friend.
![Page 18: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/18.jpg)
Alignment
![Page 19: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/19.jpg)
What’s the Difference?
Which is easiest and most attractive to read?
![Page 20: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/20.jpg)
Alignment is Awesome
• Avoid Slight
Misalignments
• Break Your Center
Alignment Habit
• Experiment With
Contrasting Alignments
![Page 21: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/21.jpg)
Eliminate!
![Page 22: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/22.jpg)
Get Rid of Junk
![Page 23: Elements of Clean Design](https://reader036.fdocuments.in/reader036/viewer/2022062320/55a4fb8a1a28ab7c2e8b4607/html5/thumbnails/23.jpg)
Now, Analyze Yours!
• What are the informational needs?
• Sizing
• Grid Structure
• Headings & Lists
• Proximity and Grouping
• Alignment
• Elimate!