Menu

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. I’m mostly happy with my theme, but there is one change I’d like to make. I have search boxes on the side and at the top. I added the one on the side, and I want to keep that there. I think the one at the top came with my theme and it crowds the title. I’ve tried figuring out how to get rid of it via the widgets control on the dashboard, but so far I can’t. Any advice?

    Like

    1. i think the fonts are perfect, but maybe less images since you have multiple images in the posts themselves. 🙂

      Like

    2. Personally, I liked all the pictures. But what really caught my eye was the widgets (okay, I am looking at it through the lens of Blogging 201.) I really like your “Search this Blog.” I will have to add that widget to my blog. Thanks for the idea.

      Like

    3. I just took a look at your site and I like it very much. In answer to your question, I agree, the header is too busy. A single image, or even just 2, might be better. Something crisp and clear that shows the beauty and relaxation of afternoon tea would be nice. Best of luck. D

      Like

  2. Hi, i do not have the upgrade and am having trouble figuring out how i can change fonts in my header, pages, and posts. Please assist. Anything would be helpful

    Like

    1. I found your post on downsizing very interesting. We are downsizing. Not quite to that extreme, but from a 4 bedroom house with a basement to a 3 bedroom house on a slab. I am older than you (with grown kids), so I have accumulated stuff for more years. I liked the colors of your header, but I wasn’t a big fan of the font. It was hard to read and felt like the captcha words you have to decipher for so many websites. Welcome to the blogosphere and keep blogging!

      Like

      1. Thanks Debbie! And I was thinking that a bit too about the font – I’m wanting something somewhat bohemian so I’ll continue to play around! My fiance and I, mostly my fiance, have been getting rid of stuff for about a year now – I can’t stand clutter and I feel that if we have a big house someday we’ll just want to fill it with stuff, no bueno! We’ll see once we venture into the world of home buying – I just want a big kitchen 🙂

        Like

    2. Love the blog! I couldn’t find a place to comment, however, I did want to answer your question about whether I could see myself in a tiny house. The answer for me is no although I’m all about anyone who can. Good luck and let us know how it goes, if you decide to go for it.

      Like

  3. I’ve set up a map here http://bit.ly/1eMqxeS for people who are participating in this course. It is just nice sometimes to see how spread out everyone is across the world. Sometimes it is easy to forget we are in different time zones and different cultures when the Internet makes connecting so easy.

    Like

  4. I’m not completely sold on the theme I chose, but changing it seems to be too much work. Also making decisions is hard for me and I’m very much a critic of what I do so I might just leave my theme as is. LOL. Also I’m not sure my header portrays what I’m blogging about??

    Like

  5. I spent ALL afternoon upgrading to custom design and creating a header for my blog– which I cannot use because my theme doesn’t support a header! Ugh! I love my theme, but I also love the header I’ve created. Now I don’t know what to do. But I do know, I cannot spend anymore time on it today… tomorrow is a new day 🙂

    Like

      1. I want it to be very simple and focused on the content. I love the simplicity of the Spacious template; I only wish it allowed the images that I put at the top of each entry to show up.

        Like

    1. i like the header font (im big on font).
      i think maybe a lined journal background or something that incorporates the pics from the post? it’s a little bland/light on colour. good luck!

      Like

      1. Yeah, I was just saying that I wish the images from each post showed up in that little excerpt on the main page. I need to figure out how to make that happen without changing layouts.

        Like

  6. I’m trying to change my font, but Google fonts is just a blank page. I just randomly picked a font and tried it. I also changed my background to a more subtle texture and I like it. But has anyone else had troubles accessing Google fonts? I couldn’t find any way to report the problem. I tried on two different computers using different browsers.

    http:/www.pghlesbian.com

    I hope the subtle background pattern spiffs up the page.

    Like

  7. Hiya. I’m having a bit of trouble accessing The Commons. For some reason, I have access to 101 instead of 201. I’m sure I signed up for 201 as someone commented saying that’s how they found my blog. Please help?

    Like

      1. thanks, having a play now. I’m finding I have to just practice experimenting a little more. I like the look but any others I like and try all seem to have something I don’t like, like a small heading. I just need to get on and try a few different things. I like a wordpress theme from site but think I need to get someone to install it.

        Like

  8. thank you so much for the tips and hints on how to customize themes (esp for those that cant/dont want to make the investment)

    Like

  9. I’ve changed a lot of different things around-had a good time, making a big mess as well LOL
    Since it’s my blog tagline that’s been giving me fits-I posted a poll and asked my readers for help with it. I know that it doesn’t count as a trial blog-but the answers I’ve gotten are pretty funny.
    Partial credit, maybe? 🙂

    Like

    1. Hi Lana, You have to make a child page under the parent page, or a grand child page under the child page. Chose the “Parent” in the “Page Attributes” Widget if you like to make a child page.

      In the arrange the pages with drag and drop in the “Menu Structure” the way you like it. You can do this without making child pages, but children are helping with the structure.

      Like

  10. I really like the way my blog looks right now. I have thought about adding an elevator pitch in a text widget on the side of my blog, but I like the simplicity of what I have now. Perhaps some additional tabs at the top to organize posts about places I have traveled to would be nice.

    -Amanda

    Like

    1. Hi there — I sent you an invitation to the Blogging 201 Commons a couple of days ago. I’ve just resent the invitation. Did it land in your spam filter?

      Like

      1. Hi Krista,
        The problem is that I need not an invitation to the Blogging 201 Commons. I need an invitation to the Blogging 101 Commons instead. Sorry for the confusion. It appears I was placed in the wrong group from the get-go.

        Thanks!

        Like

      2. Actually, never mind! It appears you sent me invitations to both over the course of this week, so I just went ahead and accepted the invite for Blogging 101 a moment ago. Thank you and please disregard my previous reply.

        Thanks so much, Krista!

        Like

  11. Question: I’ve used several different themes over my 3+ years of blogging. I change themes to give the blog a fresh look…how does this mesh with the concept of branding? I like the idea of having a consistent look, but I also think the freshness of a different theme a couple of times a year has value. Thoughts? Would appreciate a professional perspective. Granted, I’m not a national brand so maybe I’m making too much of this! ~ Sheila

    Like

  12. I played around with my themes and colors. Getting the blog to look a little more personable while sticking to the core content. Thanks for the hints on today’s lesson. Looking forward to tomorrows lesson. I am having a blast with this and I hope everyone else is. Always looking for feedback from this community. Check my blog out and let me know http://www.thatfinancechic.com. Thanks guys

    Like

    1. Great topic, one that I could use some tips on…I just started following you. Oh and I really like your header and that your photo is up front and center. Looks great to me!

      Like

  13. I find trying new themes in WordPress really frustrating. For example i like Oxygen but when I preview it, it looks nothing like the demo. So it doesn’t have the feature panel or any of the homepage design, it just looks like my old site theme – twenty eleven – but with different fonts and placement of page elements 😦

    Like

  14. Is there a way of importing content from one blog to another (test) blog? I’ve found when trying out templates and other style issues you really need to have a number of posts with the kind of content you post to properly see what it is like and copy and paste is long winded.

    Like

  15. Great ideas and I have spent the afternoon playing around as a result. I have given my blog a complete makeover and feel much better about it. What do you think? Anybody want to check it out and make a comment? http://www.debz2653.wordpress.com.
    Have enjoyed checking out quite a few others and am very impressed. I’m sure I left comments on a few but can’t seem to find them again.

    Like

    1. Click on link. Want a jam filled biscuit. 🙂

      Love the look of your baking blog! One suggestion, I’d add a tag/category cloud widget to the side bar so readers could select a tag/category and see additional similar post.

      Otherwise, keep baking and blogging! Also, followed.

      Like