Apr 17, 2014

Blogging 201, Day Three: You’ve Got the Look

Good design affects your content and credibility, and visuals play a big role in a reader’s decision to stay…or go. Make sure yours are helping, not hurting.

Welcome to Blogging U! This course isn't currently active, but you can learn more about what we offer and register for upcoming courses on the BU home page.

Your houseguests will be here in two hours. Does that send a mild wave of panic over you, too?

Today, make sure your new branding shines — give your online home a cleaning spree to make sure it’s ready for visitors, and focus on easy modifications that make a quick (and big) impact: themes, fonts, colors, headers, and backgrounds. A lot of you started that yesterday — let’s keep going.

Today’s assignment: experiment with visual changes and see whether you can refine your brand further and add more dimension to your posts.

Bonus points: make a test blog to use as your personal playground for testing changes.

Why do this?

  • Because good design affects your blog’s credibility, and can play a big role in a reader’s decision to stay…or go.
  • Because your design choices aren’t just about appearances — the colors, fonts, and layouts you choose have a big impact on your words and photos. Good design makes good content even better.

Even if you’re happy with your look, we encourage you to experiment and preview new themes, colors, and fonts. They can drastically alter the feeling of your text and photos, and you may discover that a design tweak is just what you needed to make your posts pop. Pick at least one of these, and give it a try.

(By the way: if you think customizing means spending money, think again. Lots of modifications don’t require an upgrade; you can use a free site with a free theme, make your own header image or custom widgets with free images and fonts, and upload a free background image. If you do purchase Custom Design, more design options become accessible.)

Try on Themes

Tip: When you’re looking at your site, your blog name, top left, includes a dropdown menu. From that menu, your dashboard, the Customizer, and your theme’s support page are a click away.

Every theme can be used for websites, blogs, or both. Choose one that has the structure you’re looking for, and make it your own with images and widgets. Try a theme you hate, too — just to see what it does to your content. You might not use Vertigo for a daycare center or Lens if you don’t have a lot of photos…but you might.

For inspiration, check out this series of posts on how some of our most popular themes have been completely transformed with custom touches. When you’re inspired, head to the Appearance → Themes section of your dashboard and click Preview under a theme to see your blog wearing some new duds. Click Cancel to drop it, and Purchase or Activate to switch to the new theme.

Be a Type Nerd

Fonts say a great deal — they can scream, whisper, or purr. They can be elegant or punchy, playful or stern, modern or ornate. They add color and depth to your words and set a mood.

Whether or not you have Custom Design, you can experiment with fonts in your header image. Try choosing and pairing typefaces, matching them to your brand’s personality, like these sites have:

http://photofocus.com/ chose a background image, logo, site title, and color palette all fitting of their content.

http://photofocus.com/ chose a background image, logo, site title, and color palette fitting their modern, photography-focused site.

http://hobbybotics.com/ chose a font, site title, and header background image that all fit the content you'll find on their site.

http://hobbybotics.com/ uses a technology-oriented font to immediately set the stage for a blog about robotics.

http://bigalittlea.com/ plays with fonts and color, showing with the images of the mixer and the sewing machine that they cover making many things.

http://bigalittlea.com/ plays with fonts and color in a header that evokes the fun, crafty feeling of the blog.

If you have Custom Design, head to the Customizer to try different fonts for your post and page titles and regular text. (You can preview these even if you don’t have the upgrade, to see what you like.)

Paint the Picture with a Palette

If you have Custom Design, you can also change the colors of your theme beyond the background, or enter custom CSS to go beyond that.

Create a pleasing color palette that matches your brand’s intent. Colors can be warm (reds, yellows, oranges) or cool (blues, greens). Some colors, like purple or gray, can go either way. Colors can also be saturated and bold (a deep crimson, a rich midnight blue) or soft and washed-out (a pale pink, a barely-there yellow). Think about yesterday’s assignment, and figure out which colors complement the brand you’re trying to build.

The need for color also varies with your content. If you’re an artist or photographer, consider a neutral palette to let your work stand out. Longer-form posts need a simpler palette to keep from distracting the eye; shorter posts can handle bolder color.

http://isabellescurlycakes.com/ dives in with chocolate and cherries for this cupcake shop.

http://isabellescurlycakes.com/ uses a sweet pink background and icons to reinforce her sweet creations.

http://buildingblockslanguage.com/ uses pastel colors that match the books the baby is reading.

http://buildingblockslanguage.com/ uses pastel colors that match baby books and create a playful yet soothing mood.

Brand your Header from the Beginning

What does your header say about you? Is it legible? Can visitors tell what your site is about just from looking?

http://gamemoir.com/ worked a joystick into their header image.

http://gamemoir.com/ worked a joystick into their header image.

A great header doesn’t require a graphic design degree and expensive image editing software. You can create a custom header completely free using images you already have and easy-to-use online tools like PicMonkey — here’s how.

Background Wins for Best Supporting Role

Think your background is just that — in the background? Take a look at how different the same site feels just by varying the background color.

Choose a background that doesn’t overwhelm your content, whether a solid color or a small repeating image. You can find free patterns and images perfect for backgrounds at sites like Subtle Patterns, Background Labs, and bgpatterns.

Although a subtle background is recommended, don't let that deter you from trying something fun like stacks of paint swatches on the http://jandlpaintingpros.com/ site. If it fits your content, try it out.

Although a subtle background is recommended, don’t let that deter you from trying something fun, like the stacks of paint swatches on the http://jandlpaintingpros.com/ site. If it fits your content, try it out.

A few background caveats:

  • Beware of using photos where the most important part of the image ends up hidden behind your posts — it looks messy, and doesn’t allow the image to communicate anything about your blog.
  • If you’re not sure where to start, pull a color or two out of your header or another image on your home page.
  • Animated GIFs: just say no.

If you want to try all of this on a test site, so your blog’s appearance isn’t constantly changing, here’s a tutorial to get you started.

Chat more over on The Commons.

Now, go play!

Editor’s note: We know there’s a lot here! We don’t expect you to try all of these, nor do we expect you to finalize every element of your brand, theme, and design in one afternoon. We do want you to start exploring how each element of your theme influences your brand and the perception of your blog, so that by the end of this challenge you’ll be able to make some design choices with confidence.

Show Comments

172 Comments

Comments are closed.

Close Comments

Comments

      1. Hi @trentpmcd, I wasn’t able to reply to your comment on my comment down below. (lol) Thanks for swinging by and taking a look. I appreciate it!

        Like

    1. Have you thought about using a mirror image or reflection of yourself from a mirror or a still water image that shows a reflection of sorts. “From hiding to Blogging” title reminds me of someone no longer afraid to show who she is. DO you have a part of yourself (a tattoo maybe) that you usually keep hidden that could be the image focus?

      Liked by 1 person

      1. Thanks for your reply.

        I am someone who is no longer afraid to show who I am. But I don’t have a good understanding on the concept of “mirror image”. Are there any examples from internet, which I can use as a reference to create my own?

        Thanks again for your kind suggestions.

        Yan

        Like

    3. Picmonkey will DEFINITELY help you! I played around with it and used a pic of me leaning on my laptop and turned it into something unique AND CUTE!!

      Give it a go! I do like the mirror idea.

      Like

  5. I’ve used a painting of my own on my home page. I deliberately have chosen a quiet theme as I am blogging to showcase my poems and other writings. Feedback would be welcome as to how to improve anything. 😉

    Like

    1. I really like the painting against the deep background — a very different feeling that say, a plain white background. It’s very grounding and calming.

      Like

    2. I like the painting as the header. I think putting a picture at the top of your posts would help draw people into them. Some have pictures at the top, some at other places in the post and some no image at all. It’s not a must but helps. I agree with Michelle but will add i like how the background reflects the colors of the painting.

      Like

  9. Well, I should have just waited for you to answer my yesterday’s question today. I was wondering how to go about trying some new things without “upsetting the apple cart”. Thanks so much for explaining how to try out new themes with my content and just canceling when done.
    There is a lot of good information here that will definitely take more than one day to follow up on. This will keep me busy for quite some time, thanks again for all this great and free information. http://www.sowhoegrowandknow.wordpress.com and http://www.croneing.wordpress.com
    I definitely have a lot of work to do.

    Like

    1. If you’re up for it, I highly recommend a test blog. Often, the way a theme looks when you activate it needs tweaking. It’s nice to be able to save your changes, rather than working in preview mode and/or worrying about what your readers are seeing.

      Like

  10. I have experimented with different headers in the past. In the end I settled on the yoko theme since it offered a decent layout and good functional galleries for displaying photos.

    I haven’t tried to customize the theme too much, I am not terribly good at graphic design, but I do like to do small and subtle changes here and there.

    check it out and let me know what you think

    http://conedogers.wordpress.com

    Like

    1. Looks good and the image works well. I would, however, like to see an about page – the first thing i do when i go to a new blog is look at the about page. You can pretty much copy most of your “Why I’m Here” post for the About.

      Like

      1. interesting. I have an about page up there, but according to the traffic I see, no one ever visits it.
        I am glad you didn’t find it, 🙂 it has not been updated in a while. I like your idea of using the why I am here for content, but I still have to figure out where I want to take this blog.

        Like

  12. I was wanting to try out some different themes. I’m not seeing a preview button. I have a demo button and then the activate button. The demo button shows the new theme but without my stuff on it. Am I doing something wrong to preview it with my stuff before activating it? Thanks!

    Like

    1. Hi. If you go to your Dashboard, then click on Appearance and then Themes, the options that show up on each theme include the Preview option, and then once you’re actually previewing the bar at the right includes a Cancel option! 🙂 Hope that helps!

      Like

      1. sometimes I think my computer (or maybe the internet) are messing with me. I just went to my current theme to see what I could customize and then pressed the close button at the bottom. It took me to a completely different page with theme choices and that page has the preview button. I’m just sorry it doesn’t have a way to sort on this page. Thanks for your help 🙂

        Like

  13. I do have a little additional blog to play around with appearance/theme changes so as not to disrupt the main one. (sometimes stuff gets jumbled and has to be sorted out – so you can predict how much you’ll have to do when you switch themes)
    It’s fun. It took a while but found a theme that worked better than the one I originally started out with. Sometimes I like the theme background designs, but when tried it out, it just was too distracting from the post. So much to consider. The “practice” blog is a great idea so there are no surprises.
    The brain loves novelty, so sometimes change is good – may spark post/writing creativity. Everyone likes a nice place to be and think!
    (and thanks for the UGH for animate GIFs – those drive me crazy)

    Like

  14. I have given in and changed my theme! I wanted to stay with something simple and fairly minimalist, but with a greater amount of flexibility before having to pay for the Custom Design upgrade. Consequently I have altered from Piano Black to Suits, and chosen a non-default colour palette. Any thoughts or comments would be great!

    I’m also thinking about changing the name but currently no ideas are coming!

    http://ashkej.wordpress.com/

    Like

    1. Hi, I like your choice of theme. It is very calm and as you say minimalist. I am not sure about the name, though, maybe it is a not-being-native-speaker-thing, that I don’t understand it? The blog gives a very honest impression. I miss pictures from your garden, though, if it is about your garden. It would look lovely in the calm environment of your theme. All the best from a co-learner!

      Like

      1. Ahhhh. Yes. Well, both words are nonsense words – totally made up in the context of where I stole them from!

        As for photos – I’ve been a bit bad in posting any specific photos, but if you either search for the tag ‘my garden’ or go to the Gardening page at the top there is a list of the most recent garden-related posts!

        I really do appreciate you taking a look and commenting!

        Like

    1. Good point. The same is true for those of us with the custom design upgrade. It would be easier to test new themes (not that I’m eager to do a full redesign) if we could have an unpublished test blog that would let us fiddle with the options available in our paid extras.

      Like

    2. It’s true, those make things more difficult. Depending on where you are with your blog, one option is to buy them for the test blog, figure out how you want everything to work/look, and then have the upgrades transferred to your public blog.

      Like

  16. Now that I’m looking for a logo of sorts to represent me and my blog, I realize maybe the goals and focus that I worked out at the start of this workshop may not be valid. Sigh. Back to the drawing board. If I knew what my focus was, it would be way easier than it is now to create a logo. 😦

    Like

    1. Having said that, I went to Picmonkey and created an image that I LOVE!! Instead of trying to be too literal, I just went with something that represents me! How can I go wrong?!

      Like

      1. I like the image. It fits the title very well. And that’s a great title, by the way. I think the picture looks better than having a maze that looks like a brain or something similar.

        Like

    2. I just took a look at your site and I like it very much. Having read just your most recent posts, it seem like the theme, and perhaps the focus, is on connection and honesty. Do I have that correct? Lovely posts. I hope you’ll keep writing. And I hope this comment helps you find your focus (and create your new logo!). Dena

      I offer these recent posts from my site….hopefully they will help….:

      http://denatestabray.net/2014/04/09/5-tips-to-make-your-website-shine/

      http://denatestabray.net/2014/03/19/take-the-fear-out-of-website-building-answer-these-7-questions-before-you-begin/

      D.

      Like

      1. Thanks D! I checked out your posts and I think I’m on the right track!

        I started off trying to create a logo of sorts, but in the end opted to use an image of myself – why not? I think I’m on my way to where it’s going to be…..and we’re only on Day Three!

        Like

  17. It’s difficult finding things I wanna change about my blog, it’s not coz it’s perfect by any means, it’s just that I look at it and I don’t know what I would do different! Help?? http://trfeather.com

    Like

    1. If you open the Customizer, you can preview all kinds of changes without actually activating any of them on your blog. Start there — just click around, and see what happens when you change a font or a color. It’ll spark more ideas.

      Like

  18. Thanks for all the ideas!
    Does it matter if I get behind (because doing this properly might take me a few days)? Or should I try to keep up and “play” after the end of the course?

    Like

  20. Hello, there was a post on my reader this morning that talked about custom headers and gave a site to make them. Something with the word monkey in it. And the example was a header with brightly colored eggs. The post has disappeared from my reader and I can’t find it anywhere. How do I get back to it?!

    Like

  21. I enjoy playing around with the theme options. It renders surprising results and I had no idea you could do it.
    Also, I would like to adjust the size of the sidebar-container of my outspoken-theme and its font size, but I am not experienced with css code.
    Any suggestions from the community? the blog I would need help with is the participatory arts blog what-ifblog.net.
    Thank you everyone and enjoy the challenge (it’s a lot to digest, but really valuable hints!).

    Like

  23. I am enjoying today’s exercise very much. Question: As part of the look, where is the best place to put copyright information? I put mine at the bottom of each site (www.gathering-flavors.com and http://www.denatestabray.net ) and have copyright info. embedded in my photographs…Is that enough, or should I do more? What do others do?

    Like

  24. To think the whole thing could have been pink and green all along and I had no idea! These ideas are fabulous. I’m getting absolutely nothing else accomplished. Blogging U. should come with a meal plan. And a laundry service.

    Like

  25. My plan for today is to work on a custom header for my page.. I love my layout & color scheme – but it is lacking a *POP*. Has anyone ever tried out Fiverr.com? They offer a plethora of services for $5 and up – anyone can offer anything basically. There are a lot of people who will create a custom header if you lack creative design skills, like myself… for only $5.00. Just curious if anyone has used that website & if it worked well for them.

    Like

  27. Great post Michelle. Having been through this during Z2H its good to revisit. Couldn’t agree more about the Test Blog, although I think it’s worth emphasizing that people need to make this Private in the dashboard setting. You can then experiment to your hearts content, as I did, without fear of public humiliation. I’m having fun with the fonts at the moment but don’t plan to change much more…yet 🙂

    Like

    1. If you’re using The Commons, there’s a sticky post at the top of the site specifically for support requests, and a Happiness Engineer can help you get things sorted.

      Like