October 4th, 2018

From Meh to Pretty Good in an hour

Web Design: Going from Good to Great is hard. Let's find a quick win.

Designing from a blank slate can be tough, especially if you're not a full time designer. Not everybody has a design school background full of techniques and patterns to fall back on. It's all too common to simply follow a common layout trend for lack of a better idea. This pattern usually involves a big hero header with a background image from Unsplash, followed by a grid of content blocks and matching icons picked from a free icon pack.

/assets/generic-grid.png

Looks familiar, doesn't it?

It's okay. I've done this too. A lot of times, more times than I care to mention. Everything needs to start somewhere though! Having something online is infinitely better than not. I've grown to love redesigning this particular layout because it works extremely well as an "outline" for a more long-form design style I've grown fond of.

Just follow this simple design pattern:

1. Drop the icons and rewrite each content block in a direct, conversational voice, as longer headlines.

2. Move these headlines into tall, full-width panels, stacking them one above the other

3. Add some supporting imagery and secondary paragraphical content.

4. That's it.

Want to see it in practice?

I recorded a video of these steps as I redesign merched.com by Josh Manders in under an hour. I'm not going to say it's the best design ever, but it's significantly more memorable and has a much higher chance of getting attention and converting while the startup is bootstrapping their way into existence.

Let me know what you think in the YouTube comments. If you like it, please do the thumbs up and subscribe thing. I hope this helps somebody level up their site without having to hire a designer until the point in time when it has the biggest return – when you understand your product and audience better.

If you want to check out the Sketch project file (as messy as it is), go right ahead and download it below. 

download-arrow-1 merched.sketch