How to Create Useful Layouts in Web Design
How to Create Useful Layouts in Web Design π€³π»
Courtesy of @bymarkgerkules
β
1. Stay stuck to the 1st 2nd 3rd rule I mentioned β
β
2. Decide on the most important thing you want to showcase π―
β
3. Keep it simple π
β
4. Keep consistency β
β
5. Mobile 2nd β start with designing the desktop version of the website π»
1st 2nd 3rd Rule
I like to call my layouts to rule the 1st 2nd 3rd because it is a self described already. simply what it means is that you will have on your website, one big first thing that will bring peopleβs attention, the second thing that will maybe be your headline text or whatever, and third thing that maybe can be your call to action button.
Deside
To make a great layout, you simply need to decide. what to decide? great question, you need to decide what is the most important thing you want to showcase on your website design, whether itβs that awesome image\product, or maybe itβs that awesome illustration, of the headline, or whatever. that adjust this decision on your design with the 1st 2nd 3rd rule.
Make it simple
Great layout doesnβt need to be full of mess or things that you just want to put on to make it more beautiful, most of the time you just destroy your design with this, so consider to place as fewer things you can. that way you will also keep your design clean and minimal.
Consistency
What makes good layout to great layout is consistency, you must keep consistency all across your website in term of layout, if you did one main layout in the hero section of your home page, make sure to keep the same basic structure you made overall and do not make a drastic layout change on your design.
Mobile 2nd
Today, there are many opinions that you should first design for mobile, my approach to design the website is firstly start with the desktop version, then move to the mobile version, that way you are not limited with the small size of mobile device compared to the desktop size, and it will give you more room to design your layout and be more creative.
Get 50+ Marketing Tools we use in Tegra π€
Follow the link π tegra.co/tools to get a list of ππ+ ππ«ππ (π¨π« ππ‘πππ©) π π«π¨π°ππ‘ π¦ππ«π€πππ’π§π ππ¨π¨π₯π¬ that we and other growth agencies use to scale businesses like yours + growth hacking insights.
