TOP 10 DESIGN MISTAKES

Size: px

Start display at page:

Download "TOP 10 DESIGN MISTAKES"

Homer Walton
5 years ago
Views:

4 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.

5 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

7 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.

8 STEP TWO: LIST NEEDS AND WANTS YOUR LINKS LINKS TO OTHERS RSS / Social Media Icons sub. / Newsletter Categories / Navigation Highlighted Posts Search Your shop or product Facebook Interaction Paid Ads Ambassador Badges Blog Badges Conference Badges Blog Rolls Charities

9 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.

10 SHOW THEM THE CONTENT Popular posts Related posts Categories Search box Featured pages Archives?

11 NAVIGATION SAMPLES

12 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.

13 COLOR SAMPLES

14 COLOR SAMPLES

15 COLOR SAMPLES

16 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.

17 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.

18 CHOOSING FONTS

19 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.

20 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.

21 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.

22 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

23 STEP SIX: DETERMINE YOUR LAYOUT

24 LAYOUT: THE LEFTY

25 LAYOUT: THE LEFTY

26 LAYOUT: THE RIGHTY

27 LAYOUT: THE RIGHTY

28 LAYOUT: THE HUG

29 LAYOUT: THE HUG

30 LAYOUT: THE LANDING

31 LAYOUT: THE LANDING

32 LAYOUT: THE LANDING

33 LAYOUT: THE LANDING

34 DRUMROLL YOU HAVE A PLAN! Organized Boom! Color Wow! Fonts Oooh! Layout Ta Da!

36 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.

37 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.

Strong signs your website needs a professional redesign

Strong signs your website needs a professional redesign Think - when was the last time that your business website was updated? Better yet, when was the last time you looked at your website? When the Internet