Ideas That Rock – A Collection of Fresh Design
and Content Concepts to Get Your Motor Running
Helping you visualize what a few cosmetic tweaks can accomplish.
“There are three responses to a piece of design –
yes, no, and WOW! Wow is the one to aim for.”
— Milton Glaser
“Thinking about design is hard,
but not thinking about it can be disastrous.”
—Ralph Caplan
Research shows that most website visitors make a decision within 1/20th of a second whether they like your website or not.
Research data from Dr. Gitte Lindgaard of Carleton University in Ontario, mentions that before your customers even have time to read your unique value proposition or browse the content on your site, their subconscious is making prompt assessments about your brand based on its visual appeal.
1. Good First Impression
A) Header Basics
- Your header is your first impression. It’s important to set the tone for your blog here. Are you creative, funny, serious, or witty? Let people know with your banner.
- If it’s a choice between a blurry graphic, unreadable text or nothing… choose nothing.
- Accentuate the positive. Highlight your strong points here. If you are a photographer, showcase it. If you are a great writer, use a witty tagline.
- Keep your tagline short and readable.
Resources: Online Photo Editors:
Super easy for all social media and blogs:
- www.MyBannerMaker.com
- www.Picmonkey.com
- www.Ribbet.com More advanced features such as animated gifs and Cosmetic Surgery filters!
B) Text as Headers:
Simple text can be very effective.
- Make sure the font is legible.
- If you use a fancy font for your title use a simple font for your tagline.
- Use high contrasting colors between text and background
Resources: Fonts for Headers
Free Fonts:
- www.dafont.com
- www.fontsquirrel.com
- www.acidfonts.com
- www.losttype.com
- www.fontfabric.com
- www.1-free-fonts.com
If you want to stand out from the crowd, buy unique fonts.
- www.myfonts.com
Not sure what fonts to use? Try Font Suggester to help you decide your look.
- www.fontsuggester.com
Like a font but don’t know what it is? Try What the Font Is to upload an image or a URL of a font you like.
- www.whatfontis.com
C) No Header
A growing trend is not to use a traditional header.
- Use a logo in the sidebar for branding
Examples: CasaYellow.com, TheVanillaBeanBlog.com - Use a photo of yourself instead of logo
2. Good Readability
A) Blog Colors
Your colors set a tone for your blog.
- Make sure the background and foreground colors you choose have sufficient contrast to make your text easy to read
- One main color and two complementary colors max
- Colors are a backdrop, not the feature.
Resources:
- Basic techniques for combining colors CLICK HERE
- True Colors: What Your Brand Colors Say About Your Business CLICK HERE
- How do colors affect purchases? CLICK HERE
- What Does Your Website Say About You? CLICK HERE
B) Fonts for Blog Content
- Choose a readable font that’s color is contrasting with the background.
- Keep it simple. Two fonts work well.
- Combine a Sans Serif with a Serif
- If using one font, create clear differences in font weights, styles, colors and/or sizes to help guide the reader’s eye around your blog.
- Don’t use uppercase for body text. Uppercase can be used for headers or navigation text.
Resources:
- What fonts should I mix together chart: CLICK HERE
- Test out combinations of fonts: CLICK HERE
3. Good Visuals
A) Photos
- Resize your images so your blog will read quickly.
- A bad photo of food will reflect on your recipe.
- Change, enhance and color correct your photos with online editors and phone apps.
Resources:
- Resize your images with www.Image Optimizer.com
Free online photo editing programs
- www.canva.com/create/photo-collages (this is a powerful program that you will want to check out.)
- www.Pixlr.com (Closest I have seen to Photoshop in a free online editor)
- If you are bored with www.PicMonkey.com try www.Fotor.com
- Want to have some fun? Try www.BeFunky.com
B) Backgrounds
- A background should compliment your content, not compete with it.
- Repeat/tile backgrounds should be used in moderation. Make sure they are seamless.
C) Advertisements
- Use a moderate number of ads.
- Organize advertisements to look clean on your page.
- Sell ad space with pages similar content to attract targeted visitors.
- Serve your readers first; the money will come.
D) Test your blog on a cross-browser testing tool
- 5 major browsers: Mozilla FireFox, Internet Explorer, Opera, Google Chrome & Safari
- Other media to test: iPad, iPhone, Android, Samsung
Resources:
Websites that will screen capture your site:
- www.BrowserStack.com
- www.BrowserShots.coms
- www.BrowserSandbox.com
Review of Cross-Browser Testing Tools – CLICK HERE
Other miscellaneous things that will make your blog rock:
- Turn of all autoplay audio and video clips.
- Do not overwhelm your design (and readers) with buttons, ads, and widgets. They should not draw more attention than your content.
- Have a HOME button.
- Align your content with your graphics and be consistent. If your photos are centered and your content is flush left, keep it that way through your whole post.
- Use good line-spacing and padding to spread out your content. Cluttered content is hard to read.
A Collection of Fresh Content Concepts from Dorothy Reinhold
To see her notes on ShockinglyDelicious, please CLICK HERE.
Hope this was helpful! It is always great to meet up with everyone at Camp Blogaway.
Looking forward to more fun next year.
…and then, she paused for thought.