Practice Making UI Website Design – We will discuss some designs that can be used as references or examples when starting to learn to create UI Design. And also discusses why such a design is suitable as a starting point for learning to make UI Design.
To start the exercise, you can perform an ATM process (Observe, Imitate, Modify) from some of the designs below
This exercise aims to familiarize you with the elements of the website starting from the smallest things such as determining the text size.
1. Homepage of the Article Website
From this design, you will learn:
- How to lay out the layout
- How to combine images with text
- How to choose text size
- How to determine spacing between letters in text
- How to determine line spacing in a sentence or paragraph
2. Property search website
The layout in this second design is more complex than the first design. And there are also some elements that were not found in the first design, such as forms and icons.
From this design, you will learn:
- How to organize a compact layout
- How to place content to make it look neat and clean by adjusting the spacing between the content
Some Best Practices that I use frequently
- Use a modern font. Currently I always use Nunito Sans (found in Google Fonts)
- Text Size, for small text I usually use 12px or 13px. For normal text sizes or those located in paragraphs, I usually use 14px or 15px.
- Spacing between letters I usually give 0.5 spaces
- Spacing between lines in paragraphs I usually use the formula (Text size + 10), so if the text size is 17px I usually use 27px as the distance between the lines
- I usually use multiples of 5px between the elements. So… if 5px is too close, I’ll use 10px. If it’s still too close, I’ll use 15px.
Feedback
One of the things that makes our abilities improve is feedback. Ask for feedback from friends, from there we will know which parts of our design can be improved.