thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• font...
TRANSCRIPT
![Page 1: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/1.jpg)
![Page 2: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/2.jpg)
![Page 3: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/3.jpg)
![Page 4: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/4.jpg)
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.
![Page 5: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/5.jpg)
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
![Page 6: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/6.jpg)
![Page 7: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/7.jpg)
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.
![Page 8: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/8.jpg)
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
![Page 9: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/9.jpg)
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.
![Page 10: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/10.jpg)
SHOW THEM THE CONTENT
§ Popular posts
§ Related posts
§ Categories
§ Search box
§ Featured pages
§ Archives?
![Page 11: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/11.jpg)
NAVIGATION SAMPLES
![Page 12: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/12.jpg)
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.
![Page 13: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/13.jpg)
COLOR SAMPLES
![Page 14: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/14.jpg)
COLOR SAMPLES
![Page 15: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/15.jpg)
COLOR SAMPLES
![Page 16: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/16.jpg)
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.
![Page 17: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/17.jpg)
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.
![Page 18: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/18.jpg)
…CHOOSING FONTS
![Page 19: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/19.jpg)
…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.
![Page 20: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/20.jpg)
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.
![Page 21: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/21.jpg)
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.
![Page 22: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/22.jpg)
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
![Page 23: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/23.jpg)
STEP SIX: DETERMINE YOUR LAYOUT
![Page 24: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/24.jpg)
LAYOUT: THE LEFTY
![Page 25: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/25.jpg)
LAYOUT: THE LEFTY
![Page 26: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/26.jpg)
LAYOUT: THE RIGHTY
![Page 27: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/27.jpg)
LAYOUT: THE RIGHTY
![Page 28: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/28.jpg)
LAYOUT: THE HUG
![Page 29: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/29.jpg)
LAYOUT: THE HUG
![Page 30: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/30.jpg)
LAYOUT: THE LANDING
![Page 31: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/31.jpg)
LAYOUT: THE LANDING
![Page 32: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/32.jpg)
LAYOUT: THE LANDING
![Page 33: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/33.jpg)
LAYOUT: THE LANDING
![Page 34: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/34.jpg)
DRUMROLL – YOU HAVE A PLAN!
Organized – Boom! Color – Wow! Fonts – Oooh! Layout – Ta Da!
![Page 35: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/35.jpg)
![Page 36: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/36.jpg)
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.
![Page 37: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/37.jpg)
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.
![Page 38: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/38.jpg)
![Page 39: thatsvandypull.thatsvandy.netdna-cdn.comthatsvandypull.thatsvandy.netdna-cdn.com/wp...• Font Squirrel – free and they have font face kits • Google Fonts – easy to use on your](https://reader034.vdocuments.net/reader034/viewer/2022051321/600171435b7f3424c75545e8/html5/thumbnails/39.jpg)