6 Tried and Tested Starting Points For Any Web Page Design

by 5 11/20/2012

While the creative process can not be rushed, there’s a lot you can do to accelerate the process.

One effective way is to work systematically.  Find a tried and tested starting point.

One way to quickly run through options and ideas for designing a great landing page is to try out and play with some tried and tested approaches.

That way you can quickly make up your mind about whether or not you have a conventional but workable plan to fall back on- and whether you need to innovate or invent.

The next time you’re staring at the blank canvas and cursing designer’s block, here are 6 trusty ways to get started.

1.  Start with the call-to-action

As Brian Massey outlines here, it makes a lot of sense to design a web page starting with the action you would like visitors to take.

For example, the designers of the landing page for payment solution Square might begin with this call-to-action:

And then design the rest of the page around this call-to-action,

2.  Start with an image

Some of the best landing pages often have nothing on them except for a single visual accompanied by brief gripping copy.  The strategy is remarkably diverse in its application and can produce great results for any industry.

Start by thinking of visuals related to the business you’re designing for and ask yourself the following questions: Are you trying to sell something tangible and concrete like toothpaste or an MP3 player? A service like massage therapy or tax preparation?  Or is it an idea like the support of a piece of legislation?

Images could range from a seductive up-close product shot of a designer purse to an abstract image of an outcome that people desire. Find an image that fits your product and use that as your guide to designing the rest of the page and website.

Colors, copy, buttons and typography can all draw from that image for a well designed whole.

Ovi Store uses a carefully created image to convey its purpose which allows it to keep everything else really simple.

Apple has always used its beautiful product images to engage visitors.

3. Start with blocks

If the revamped Facebook timeline and Pinterest weren’t indication enough, Microsoft’s highly well received Metro interface has proven that tiles and blocks work in a big way.

If you have a lot of content that you need to design a framework around, use a masonry approach to grouping them in their own blocks. Find out the elements- such as links and images- that can work best as closely placed tiles. Use blocks for content that update dynamically. And feel free to use plentiful solid blocking.

The best part about going ‘Metro’ is that the design can easily be made responsive – as in it can adapt well to different screen devices. Since the futuristic and authentically digital experience of metro comes without the need for excessive ornamentation, a simple and clean organization might be all you need to come up with a highly effective landing page.

Pepsi’s latest design incarnation is youthful, dynamic and modern. It’s a perfect fit for their overall brand strategy and even looks great splashed across billboards in Times Square.

Dynamit also uses solid blocking and tiles for a great looking landing page that changes dynamically (by shifting the tiles) in response to the sliders accessed by clicking the icon at the bottom right of the title tile at the top left.

4. Start with text

Designers usually become so wrapped up in the visual aspect of it all that they tend to forget one of the most important tools they can use in their design: the copy.

Rather than leaving the copy forgotten until its time to insert it in a pre-designed layout, use it to guide and direct your entire design strategy.

Using Lorem ipsum as placeholder text is a great way to look at how copy would look like in whatever you’re designing but it isn’t as useful as the actual copy in directing the visual narrative.

Psych & Psych draws directly from its copy to create illustrations that constitute the bulk of the website’s interface.

5. Start with color

Colors are a very powerful force.

They can add life, inspire ideas and stimulate creativity. One of the biggest reasons why you should put your content on the canvas and start working right away is because you need something- anything- on there before you can play around with it. Once you have a barebones layout, start experimenting with different colors. You’re allowed to go completely crazy here- don’t hold back.

See what pops out, what looks good with what and what needs to be completely avoided. Colors have a way of leading us into the design we want. So listen to them.

Color theory is a vast science but, as a general guideline, you might want to look at some colors and their associated connotations in this infographic by Kissmetrics which also includes a useful checklist for making sure your landing page has all the money making essentials.

Level uses a simple color scheme – white, gray and green- to develop the look and feel for its entire website. It’s easy to imagine how quickly and easily any of these basic colors can be switched to completely change the look of the website. Would the Level landing page work just as well with, say, orange, blue and yellow? Clearly, color choice plays a huge role in your design strategy.

6. Start with a 3-column layout

Despite being done to death, there’s still something distinctly professional and impressive about a 3-column or 2-column layout topped with a header image or navigational slider. As long as you do a nice, clean job there is no reason why this classic look can not look reasonably good. And as with the rest of the techniques discussed in the article, it’s a useful starting point for further experimentation.

Haus uses a soft color palette and clean organization to give its 3-column layout an elegant- but not archaic- look.

Remember, all 6 of these tips are meant as starters.

Treat them as the first couple of steps in brainstorming your final design.

Sometimes you might end up being reasonably happy with what you get in your first go. But mostly, you will want to tweak the original composition again and again until it ends up looking completely different from how you started.

Luckily for us, that’s exactly the point of the creative process.

About 

Babar Suleman is a visual storyteller and a communication planner. He is interested in the interplay of words and visuals in the communication process and uses his diverse experience as a writer and designer in creating meaningful user experiences and effective branding strategies.

You can contact Babar at his official website or on the social media channels below.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

5 COMMENTS

Designer Rob Russo

Excellent tips on some design basics. I love starting with color and images but I’m going to start with the call-to-action now. That’s a great point!

April 9, 2013 Reply

Kathryn Aragon

Way to go, Rob! I find that the entire creative process goes smoother when I start with the call to action.

April 9, 2013 Reply

Jacqueline Fairbrass

Loads of useful tips here. As I work on a re-design in the next few months, this is well worth a bookmark to come back to. Thank you for sharing.

January 11, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization, design and copywriting articles FREE >>>