Landing Page Design
1/ Use a motif
The #1 way to make a landing page look coherent and polished (besides the obvious – consistency, use the same font, color scheme, etc) is to use a motif: a repeating visual element that appears repeatedly, but with slight variations.
Here, we used the “organic lines + circle” motif from the logo wherever possible:
Logos are (in my opinion) the best place to get a motif from. Why? Because any visual concept that appears in your logo should be central to your brand – and repeating it throughout the site will make a ton of sense.
2/ Layer your effects
Landing pages are often flashier than the (generally more utilitarian) products they sell. And fine, I don’t want to read 150pt titles every time I e.g. create an invoice 🤷♂️
As a beginning designer, I didn’t realize how much power was in layering simple effects to make the design pop.
For instance, the header idea we used was basically a gradient + blurred shapes + a radial gradient mask.
No one step is complex, but in combination, it’s pretty slick!
3/ Generate more good ideas than you can use
A few folks at the webinar remarked on how good it was to see some real process – which is a nice euphemism, since “process” is all we had time for (the result is far from finished) 😉
Despite the slow progress, I was extremely excited by all of the different ideas we were coming up with:
- 8 sample colors for a color palette [relevant resource: Learn UI Design’s color palettes library 🎨]
- 7 gradients [relevant lesson: 3.9 Gradients in Learn UI Design)
- 8 relevant stock photos [relevant resource: list of good image asset libraries, 5.5 Photography & Imagery 🌆, Learn UI Design]
- 11 font options [relevant lesson: 4.2 The Good Fonts Table 🔡 in Learn UI Design]
Good inputs + rapid iteration/improvement = great output. It’s only a matter of time.
By the way, notice how basically ALL of this brainstorming was made quicker/easier by resources from Learn UI Design?