TOP 10 DESIGN MISTAKES

1.  Sizing Issues: This part is too big, that part is too small

2.  Lack of Sharing Buttons: We want to share but how or where?

3.  Mismatched Purpose: Site doesn't fit your goals

4.  Lack of Images: All words and no pics makes ye a dull blog

5.  Clutter: My eyes are on overload.

TOP 10 DESIGN MISTAKES

6.  Formatting: The never ending paragraph

7.  Lack of YOU: We are not sure you are human

8.  Bad Fonts: Is that tiny Comic Sans I see?

9.  Poor Images: Low quality or overused images

10.  Old Stuff: I don’t care where you went last year

STEP ONE: IDENTIFY TROUBLE SPOTS

This is simple. If you have made any of the ultimate design mistakes go ahead and fix them or delete the offenders.

If you can, make a little list of things you love and don’t love about

your site. The big one: get yourself organized. Slim down categories. Try for

under 10 main ones and if possible, select only one main category for each post.

STEP TWO: LIST NEEDS AND WANTS

Y O U R L I N K S

§  RSS / Social Media Icons §  Email sub. / Newsletter §  Categories / Navigation §  Highlighted Posts §  Search §  Your shop or product §  Facebook Interaction

L I N K S T O O T H E R S

§  Paid Ads §  Ambassador Badges §  Blog Badges §  Conference Badges §  Blog Rolls §  Charities

STEP THREE: PLAN NAVIGATION

§  Make it easy to get around your site §  Keep people within three clicks §  Means extra work on the backend (but it’s worth it!)

Show me

how to get

there, yo.

SHOW THEM THE CONTENT

§  Popular posts

§  Related posts

§  Categories

§  Search box

§  Featured pages

§  Archives?

NAVIGATION SAMPLES

STEP FOUR: CHOOSE YOUR COLORS

You may not use colors willy nilly. Sorry. Color tells a story! 1.  Choose your base color 2.  Choose your body or text color 3.  Choose 1-2 accent colors (there are a few sites that can pull off

more, but 1-2 works really well for most sites) 4.  Choose your color POP! Again 1-2 colors that you can use when

you really want to call attention to something or have a special design element.

COLOR SAMPLES

COLOR SAMPLES

COLOR SAMPLES

COOL COLOR TOOLS

1.  Design Seeds – Want to waste a few fun hours? This site is full of gorgeous color combinations with the photos they are made from.

2.  Adobe Kuler - A fun social sharing site for colors + a cool color picker tool.

3.  Color Scheme Designer – Pretty fun to play with, but a little complex.

4.  Pictaculous - Upload an image and they generate a color scheme for you.

5.  Colorzilla plugin for browsers – Allows you to see what the hex code of any color on a site is.

STEP FIVE: CHOOSE YOUR FONTS

1.  Your fonts are talking behind your back. Don’t you want them saying something nice?

2.  Keep the font list short. Like clashing colors, fonts can work with each other or against each other.

3.  Always choose a “standard” runner up for times when browsers don’t play nice or Google Font are not loading.

…CHOOSING FONTS

…CHOOSING FONTS

•  Choose a Main Font for your site or brand. This font will convey a feeling in combination with your color palette.

•  Choose a body font for your site that complements your main font.

•  Make the body font big enough to read. Depending on the font use at least 14 px for the body text.

•  You may also have an accent font, usually a script, for special things.

YOU’VE GOT FONT CHOICES

•  Serif – I’m Times New Roman. I shout professional, traditional and sophisticated.

•  Sans Serif – I’m Neutraface 2. I’m modern and friendly, very readable and highly versatile.

YOU’VE GOT FONT CHOICES

•  Slab Serif – I’m Bitter. I’m popular with the tech crowd and I too am very versatile and readable.

•  Script - I’m Pacifico. I’m very playful and usually appeal to the gals.

•  I’m Comic Sans and should never be used outside an internet joke.

FONTS GALORE

•  Font Squirrel – free and they have font face kits •  Google Fonts – easy to use on your website •  DaFont – best for handwriting and display fonts •  Font Shop – Great selection •  MyFonts – Many types but licensing can be pricey for

webfont use •  LostType – Beautiful fonts. Most not web fonts. Free

but donation is asked for

STEP SIX: DETERMINE YOUR LAYOUT

LAYOUT: THE LEFTY

LAYOUT: THE LEFTY

LAYOUT: THE RIGHTY

LAYOUT: THE RIGHTY

LAYOUT: THE HUG

LAYOUT: THE HUG

LAYOUT: THE LANDING

LAYOUT: THE LANDING

LAYOUT: THE LANDING

LAYOUT: THE LANDING

DRUMROLL – YOU HAVE A PLAN!

Organized – Boom! Color – Wow! Fonts – Oooh! Layout – Ta Da!

RULES AND SHOULDS

•  Be Consistently Consistent: Across the blog home page, landing pages and posts your choices should remain clear.

•  Don’t let your posts run away from your vision. Use full content width images or at least remain constant with a size.

•  Make sure that the size of your images fits in your content. •  When using pinnable images, include text on the image to

encourage views. If possible, use a font from your site. If not, find one you love on a free site like PicMonkey and always use that font on images.

•  Check everything on as many browsers and mobile devices as you can find! Use a website that can test for mobile responsive and show you what your site looks like.

RULES AND SHOULDS

•  Use whitespace. No one likes a crowded room or a crowded blog. •  Make sharing easy. Provide sharing option for the sites that

matter and not all 100 social networking sites. •  Consider size. Leave enough width for posts and keep the header

short enough that a reader can see the site. •  Please don’t stuff the whole world in your header. If people want

to find you, they will. Spend time making it good, not full. •  Keep it simple and stay focused on your choices.