FIVE EASY DESIGN
S T N E CEM
N A H N E
TO MAKE YOUR
SITE IC T E N AG
M E R O M
BROUGHT TO YOU BY
AND
BRAND SYSTEM
TM
Grow your business with great design & marketing
FIVE EASY DESIGN ENHANCEMENTS TO MAKE YOUR SITE MORE MAGNET I
C
2
You know your website is one in a million
The reality, though, is that your site is one in 350 million — and counting. What can you do to make your site stand out from the others? How can you take full advantage of the split second you have to make a good impression when someone lands on your pages? The first opinion people form when they hit your site is based on visuals. They take in the colors, white space and images you use before they start reading your words. If your site looks like it was put together by an amateur, you lose points. If it’s hard to read, cluttered or difficult to navigate through, you might lose your visitors altogether. You’re about to find out five ways to engage visitors from the moment they hit your pages. Read on to learn easy design enhancements to make a magnetic site that draws people in and keeps them reading.
BRAND SYSTEM
TM
Grow your business with great design & marketing
FIVE EASY DESIGN ENHANCEMENTS TO MAKE YOUR SITE MORE MAGNET I
C
3
1. Color: brand your site with 2+1 Colors : The Rule of Two 2 MAIN COLORS
ACCENT
+ 2 MAIN COLORS
ACCENT
ACCENT
+
But if it’s not used correctly, your site can look messy. What’s the rule for choosing and using colors on your site? I like to start with my “Rule of Two.” Pick two colors — not including black text or your white content area — and use them throughout your site. If you use these two colors consistently, the “+1” part of this equation will be even more effective.
+ 2 MAIN COLORS
To establish a “look” for your site, there’s nothing more effective than color.
Find an accent color that’s different than your two main colors. It should be brighter and bolder, and stand out. This accent color is perfect to use wherever you want to direct people’s eyes. If you have an optin form or an ad, use this color there. If there’s a headline you want to emphasize, run it in this color.
BRAND SYSTEM
TM
Grow your business with great design & marketing
FIVE EASY DESIGN ENHANCEMENTS TO MAKE YOUR SITE MORE MAGNET I
C
4
2. White space: breathing room draws people in Want to make your first-time visitor want to click away fast? Fill your site with text and images right up to the edges. It works every time! Ample white space invites your visitor in and gives their eyes a place to rest as they absorb your words. They’ll want to kick off their shoes and stay a while! Try adding it here: Museums set off their
1. Around your content area. Don’t cram your text right up to the edge of your content area: more space means it is more inviting to read.
2. I n between lines. You should add line space of anywhere from 20–50% over the pixel size of your font, so a 16 px font would have line spacing of anywhere from 19–24 px, for example.
3. A round important text like headlines or calls to action. White space around text says “look at me: I’m important!” (See page 7 for more on designing an effective call to action).
most valuable art by
placing it in the middle
of white space. You can
do the same on your
site: add white space
around your content
area, between lines and
around important text.
White space makes text more readable, and so does the right font. Read on for more about fonts on the web.
BRAND SYSTEM
TM
Grow your business with great design & marketing
FIVE EASY DESIGN ENHANCEMENTS TO MAKE YOUR SITE MORE MAGNET I
C
5
3. Typography: add personality and readability Fonts: The Rule of Two HEADLINE
Lato Black TEXT
Unique fonts are a great way to make your site more magnetic. But choosing and combining them isn’t easy! Pick no more than two (not including the font in your site header or logo) and use the guides below to make the most of them:
1. Think about your audience. Take your typical readers’ age into account. Make sure your font looks good on mobile devices.
2. Aim for compatibility and contrast. Combine fonts with similar letter forms: look especially at the shapes of the lower case “a,” “g” and “e.” Make your headlines larger and bolder, and your body text smaller and lighter.
3. Serve up the good stuff. Font services like typekit.com and Google Font API (which is free) will serve up custom fonts for a unique style.
Lato Regular
HEADLINE
Tahoma Bold TEXT
Georgia Regular
Found the ‘perfect’ font but it’s a little hard to read? Ditch it. Typefaces exist to facilitate communication, and if the one you like isn’t clear, look for a different one.
BRAND SYSTEM
TM
Grow your business with great design & marketing
FIVE EASY DESIGN ENHANCEMENTS TO MAKE YOUR SITE MORE MAGNET I
C
6
4. Images: invite, provoke and make ’em smile When you choose them right and position them carefully, images will help make your reader want to dive right into your site’s content. Use them to add shades of meaning to your words, to provoke curiosity and add a touch of humor. Most images “point” in one direction or another. Use
this to your advantage when
placing them on your page. Use picnik.com or other
To find great images, try using online stock photography sites like istockphoto.com, shutterstock.com and bigstockphoto.com. You can find free images by searching the Creative Commons archives on Flickr: just click Advanced Search, then choose Creative Commons at the bottom of the page.
photo retouching sites to
crop and flip photos so they emphasize your text.
BRAND SYSTEM
TM
Grow your business with great design & marketing
FIVE EASY DESIGN ENHANCEMENTS TO MAKE YOUR SITE MORE MAGNET I
C
7
5. Call to action: use design to get commitment Effective web pages start with a plan, and that plan hinges on what you’d like your site visitor to do after they’ve visited each page. This is where your call to action comes into play.
TextingTimes TEXTING NEWS
READERS’ STORIES
SUBMIT YOUR BEST TEXT
4 Tips for Better Texting Daniendis eiur repernam eaquatus alitibustrum il in nonsequatum, nim nat que ped et quam, quodignis conet atet et pratur moloribus eumquo cusci corem vollupt atemquae. Ro et quam eritis sime vit veni-
Get top-secret texting tips in your inbox. Type your email address below:
mod min et rera pliscilit officiamet ex ea as
Your call to action may be an optin form, or some text asking your visitor to contact you, request a quote, get your white paper or buy your product.
maio officia ectatia vent esequat emquam sinvel eaquibus rerias am sum etur? Andipsam eatatiu mquatius eossi ad ex enis maxim nus autem veliberia qui aspe es as et harchil iaection cor sum et escillam aut doluptia adistectest, quodit, odit reptatem eatas quaecto mos dolupit facium, sum aut facia dio. Tem quas praepre nos ex et digent di corepernat iment exerum si offic te nia consequ idipiendae nimaionsed quidis volessequi doluptas eum ut quias pel intibusam iuntus ma volor accaborent quae net unt aut offictus
YOUR GUIDE Daniendis eiur repernam eaquatus alitibustrum il in nonsequatum, nim. Nat que ped et quam, quodignis conet atet et pratur moloribus Eumquo cusci corem vollupt. Atemquae. Ro et quam eritis sime.
FIND ME ON
iniscium qui utet est ut millore nonseque inus.
Save time: learn these shortcuts Ces ducient, im volut et, non poratur ibearup taspell iciam, que estis ent
POPULAR POSTS
dolor sinctet occum que volori tem sit harit voluptas aut eos aut rescietur
Daniendis eiur repernam eaquatus alitibustrum il in nonsequatum, nim
aciis di consequi as int faccuptates a sitaspisquam dest, sunt qui beruntibus etum, ut voluptiorum nitatus ea con nis eatis etum et et qui doluptas
This call to action works
repro beroribusdae dis sum asi ommoles utaepedi con repudia nis maxi-
1. Use your accent color, and surround it with white space. Both techniques will draw attention to your call to action.
2. Use your headline font. Get your call to action seen with a bold headline.
3. Add a compelling image. Show the free report they’ll get when they opt in, feature a beautiful product shot, add an image of a phone if you want them to call.
Nat que ped et quam, quodignis conet atet et pratur moloribus
mol orruntur? Ceptat atia dis moluptat etur sapis ex evel ipitiscium sin-
verum hariasped moloremodit harionserro ex eic tet, eum id utat esent
To make your call to action impossible to miss, use all the design enhancements outlined in this report.
Eumquo cusci corem vollupt
because the accent color,
white space, font and image draw attention.
BRAND SYSTEM
TM
Grow your business with great design & marketing
FIVE EASY DESIGN ENHANCEMENTS TO MAKE YOUR SITE MORE MAGNET I
C
8
Keep learning Click here to learn more about color. Get a free downloadable guide to choosing your two main colors. It’s easy once you know how! Click here to learn more about fonts. Download a free resource with 28 font combinations you can use right now. Want to know more about how good design and strategic marketing will grow your business? Click here to get the free Marketing Toolkit, which includes the Design 101 series. You’ll learn more about using design to attract and keep the attention of your site visitors, and improve your business marketing.
About the author: Pamela Wilson is an award-winning graphic designer and marketing consultant who believes your business might be small, but your brand can be BIG. Find her at BigBrandSystem.com
BRAND SYSTEM
TM
Grow your business with great design & marketing