The first impression of a website is very important. Good visual information from the website will please user. As I often go to FreePeople, I choose it as a good example of visual design.
A Clear Viewing Order
Alignment is the first principle of visual design. Visual elements on FreePeople are not placed arbitrarily. Elements are aligned and connected to each other which create a clear and beautiful look. In the following figure, we can see that all the items in navigation bar behave consistently with same type, font and color. Even the layout of advertisements below are ordered and placed with corresponding importance. For the vertical categories-by style and by shops, everything is aligned on the left side with strong visual hierarchy without cluttered or confusing. The clear viewing order is very simple and strengthens the design.
Good Contrast, No Conflict
If you want to attract user’ eyes and guide direction, just make a contrast. If everything is clean and neat, nothing is important. Avoid making elements on the page merely similar by adding contrast such as creating bold fonts, different colors, shapes, spaces, etc. Belowing is the item description page of FreePeople. The options of price, color and size are bold. These are very important information for users to make a choice. Moreover, the link of Q&A and review writing are marked with red color and thereby users are very easy to find and click them.
Group Related Items Together
Group items that have close relationship together and make the page not only organized but have a nice look! The website of FreePeople use cohesive, consistent, and contextually appropriate imagery to integrate style. For example, in the following picture, we can see that the organization is very clear because the related text and links are grouped together and thereby reduced cognitive load on the user.
Smart White Space
It is crucial to learn how to design for the white space. Instead of a waste of valuable screen real estate, white space is one of the most valuable parts of the design. You can not overlook zero state because it can direct users’ eyes and strengthen usability. Look at the following figure which is a comparison of FreePeople website and ASOS website, you can notice that with plenty of whitespace, FreePeople looks more elegance and beautiful while the layout of the ASOS page is a bit more crowded and cluttered.