Design for non-designer
HocVT - Hanoi 05/2019
Content
1. Reduce clutter
2. Make sure your design works as well as it looks 3. Intuition and Inspiration
4. Refactoring UI: Hierarchy is Everything 5. Refactoring UI: Layout and Spacing 6. References
1. Reduce clutter
If you want your design to feel more beautiful, reduce visual clutter
1. Reduce clutter
Reduce clutter by adding a grid to line things up.
1. Reduce clutter
Small misalignments might be hard to see, but contribute to a feel of
“clutter” within a design
1. Reduce clutter
In short, reduce the clutter-y feeling by lining things up.
1. Reduce clutter
Reduce clutter by limiting the colors in your design.
Reduce clutter by reducing the number of fonts you use Reduce the feeling of clutter by adding whitespace
In conclusion, remember to reduce clutter for a
better looking and feeling
design
2. Make sure your design works as well as it looks
1. Think about the purpose of your design, whether it’s getting someone to fill out a form, to find information, or something use.
2. Make sure your designs support that purpose and improve the user experience with that in mind.
3. Don’t forget about your content — simplify your words and write content and headlines that talk benefits, not details.
4. Show your designs to others and get feedback to find where user experience issues might be hiding.
3. Intuition and Inspiration
Steal like an artist.
Think of inspiration like visual debugging. Looking at great design and inspiration will help you figure out solutions to problems you may run into when creating your own designs.
Do not rip off designs
3. Intuition and Inspiration
3. Intuition and Inspiration
Train your design eye and intuition
Refactoring UI
4. Refactoring UI: Hierarchy is Everything
Not all elements are equal
Visual hierarchy refers to how important the elements in an interface appear in relation to one another, and it’s the most effective tool you have for making something feel “designed”.
4. Refactoring UI: Hierarchy is Everything
Size isn’t everything
Size isn’t everything
4. Refactoring UI: Hierarchy is Everything
Try and stick to two or three colors:
● A dark color for primary content (like the headline of an article)
● A grey for secondary content (like the date an article was published)
● A lighter grey for tertiary content (maybe the copyright notice in a footer)
Similarly, two font weights are usually enough for UI work:
● A normal font weight (400 or 500 depending on the font) for most text
● A heavier font weight (600 or 700) for text you want to emphasize
4. Refactoring UI: Hierarchy is Everything
Labels are a last resort
4. Refactoring UI: Hierarchy is Everything
Combine labels and values
4. Refactoring UI: Hierarchy is Everything
Labels are secondary
5. Refactoring UI: Layout and Spacing
White space
5. Refactoring UI: Layout and Spacing
5. Refactoring UI: Layout and Spacing
Dense UIs have their place
5. Refactoring UI: Layout and Spacing
Establish a spacing and sizing system
5. Refactoring UI: Layout and Spacing
A linear scale won’t work
5. Refactoring UI: Layout and Spacing
If you want your system to make sizing decisions easy, make sure no two values in your scale are ever closer than about 25%.
5. Refactoring UI: Layout and Spacing
Defining the system
5. Refactoring UI: Layout and Spacing
Using the system
6. References
1. Hello web design 2. Refactoring UI 3. Some free books
Workshop
- Mở 1 trang thuộc dự án đang làm - Chụp lại thành phần muốn chỉnh sửa
- Sử dụng 1 trong các gợi ý trong bài để thay đổi giao diện, sử dụng dev tool của trình duyệt
- Chụp lại thành phần đó sau khi chỉnh sửa - Show hàng!!!