When it comes to good design there are som key concepts that you can use to make your design look more professional and that has a great impact on the overall composition.
In this article I'm going to walk you through some of these concepts and show you how you can implement them.
ALIGMENT
Just a simple adjustment like aligning your content properly can make something look professionally designed. Not thinking about position and adjustment to make your work look sloppy and less professional.
In the video below I'll show you the difference between aligning elements properly and poorly.
As you can see, just some small adjustments can make big difference to overall composition of your design.
Try to stick to one style per page. For example if you have two headings, a paragraph and a button on your Home Page place them either in the middle or left/right. Do not mix and match!
GRID
If we take a page and divide it into equally wide columns, we get a grid. Then we can customize the elements in these columns to create a balanced and structured page.
Commonly used grids consist of 12 columns and have about 20-40px gutter.
It's ok to break the grid. But you should do this on purpose and it should be obvious that you will get a better result.
If you are setting gutter at 30px in your grid, try using the same
distance for other vertical slots as well.
VISUAL HIERARCHY
Visual hierarchy helps users too process information easier. We can only focus on one thing at a time and when everything is equally important we do not know where to put our focus. Users get confused by the chaos of information. But good design guides the audience.
Establishing a hierarchy is quite simple. Larger is more visible hence it's higher in the hierarchy. Less and less visible elements will be lower in the hierarchy. Look at the image below:
It is obvious how I used visual hierarchy to draw attention to the most important elements on the page. But let's have a look what I actually did.
I use a bright accent color and a slightly larger button width for the element that is most important on the page - the sign up button.
The second most important element is also a sign up button in the top right corner. If the user did not already decide to sign up maybe I can grab the users attention again?
Third important element is the Read more button. I use the bright accent color but in a more subtle way.
The page look clean, modern and very easy to navigate. And the main goal is get the user to click the button and sign up. Establishing a hierarchy is quite simple. Larger is more visible hence it's higher in the hierarchy. Less and less visible elements will be lower in the hierarchy.
That's it for this article but make sure you don't miss the second part where I will walk you through step by step how to implement visual hierarchy and also talk about the importance of distance.
תגובות