BWP 2.0

Week Four Big Lesson: Blog Design Boot Camp

June 1, 2015

This week’s lesson is all about getting the look and feel of your blog right. While we covered this a little in Blog With Pip and Inspiration Information For Bloggers, this is a deeper dive into blog good looks…

purpose layout

What’s your blog’s purpose?
Does the look of your blog match this?

Food bloggers, for instance benefit from a clean blog, with plenty of white space and room to showcase delicious images. Make sure that images load at a decent size to ensure they are the ‘hero’ of the page and invite readers to click through.

Personal bloggers can have a bit more fun with layouts, but it’s still really important to lead with quality images that make readers want to read more. If you’re using a magazine template (which tends to result in LOWER page views, in my experience) make sure that it forms a neat grid and readers can see the chronology of posts easily.

Health and wellbeing bloggers again should be leading with a design that showcases lovely images and keeps things nice and clean. Clean blog, clean life and all.

Have a think about your blog’s focus and intention. Who are you hoping to attract? What would their ideal blog look like? How can you combine that with what YOUR ideal blog would look like?

whats on

Load your blog in a variety of browsers – Chrome, Safari (if possible) and Firefox. Also give it a whirl on mobile and iPad. Note how it displays on screen, what is visible without scrolling, how it works from a reader perspective.

(You can also try the BrowserShots tool to see how your blog is loading).

The portion of your home page that loads first, without scrolling? That’s your prime real estate right there.

It’s ideal if readers can see your social media buttons and an image of you linking to an About Me page on this ‘prime real estate’ top part of the screen. If you can’t see much, consider reducing your header size or shuffling menus to create better visibility/navigation.

mobile friendly

Google’s latest update means that mobile friendliness is more important than ever to SEO.  Check your blog’s mobile functionality (according to Google) here. If you’re not mobile friendly, have you thought about updating your theme or template to something that is?

Mobile friendly or responsive themes are super important now, not only because they keep you in Google’s good books, but also because a huge number of readers are now choosing to view your blog from a mobile device.

user experience

Can people find what they need?

  • Subscribe?
  • Search?
  • Contact you?
  • More info about you?
  • Neat menus?
  • Something to buy from you? (optional)
  • Media Kit (optional)
  • Links to hi-res images of you/your work (optional)

 

navigation

I’ve been reading a lot of blogs recently as part of Voices of 2015. One thing I have noticed is that there are a lot of blogs with dodgy navigation. By this, I mean it’s hard for a reader to find there way around, spot fresh posts or click from one post to the next. Sometimes the simplest things – basic navigation – are forgotten in the push to fancy things up! So let’s look at that.

On your blog, ask yourself these questions:

  • Can readers see the date of the most recent posts on the home page?
  • Can readers move to the next page easily from the bottom of your home page?
  • Now, what about the second page (the one you click through to from your home page, the next oldest)? Is it easy to work out how to go backwards and forward chronologically from the second page?
  • If you click into a post, is it easy to get to a) the next more recent post? b) the next older post? c) the home page d) similar posts?
  • If you have the words NEXT and PREVIOUS as a way of clicking to older/newer posts, consider changing the language to OLDER and NEWER instead (much more user friendly!)
  • If you have arrows (rather than text) as the navigation from one post to the next, consider changing that to OLDER and NEWER (there are WP.org plugins that help with this – or it might require some coding – or a theme/template freshen up, if you prefer).

Don’t underestimate the importance of checking this stuff. I’ve encountered popular blogs where the only way to get to another post (once you’ve finished reading the current one) is to click the HOME tab. That’s just not logical or pleasurable experience for readers. Make sure this stuff works nicely and make it easy for your readers to hit more than one page. Make them want to come back!

overall look

Is your blog’s look cohesive?

  • Does the header match the theme?
  • Are the widgets in your sidebar neat and do they have similar look?
  • Are your blog images consistently placed and sized?
  • Are your social media buttons matched nicely to your theme?

images

  • Do your images have a consistent look and feel?
  • Do they work well next to each other as the reader scrolls through your blog?
  • Are you proud of them?

These are all important points to consider as images are a huge part of blogging (with many people more likely to be skimming images on blogs than actually reading, ugh!)

There are lots of variables you can consider when it comes to your images, for instance:

  • How big should they be?
  • Portrait or landscape or square (or a mixture?)
  • Do you want to use filters or Photoshop actions (or similar) to create a consistent look?
  • Will your images have borders on them?
  • Will your images have captions (and what style should they be?)
  • Are your featured images working on RSS (loading on sites like Bloglovin’ and Feedly?)
  • Do you want to create optimally sized image graphics for social media to promote your posts as part of your bloggy work flow?

text over images

While this is such an ubiquitous trend in blogging, my feeling is that it’s starting to look a bit dated and samey same (sorry!) I’d advise you to use images and titles that really represent your post compellingly – and lose the text over image thing.

Because people are using the same apps, sites and layouts to create those text-over-image graphics, they become generic and readers are less inclined to click through. If you want to add text to your image – try separating the image and text neatly so that each speaks for itself and it loses that generic look.

improving

Extra design features within your posts
There are lots of ways to personalize your blog posts, adding elements within each post to cute things up and make it more reader friendly. You could consider creating (or getting a designer to create) image files for:

  • A personalized signature
  • Some cute borders to insert and break up text and images
  • A ‘more reading’ graphic to pop in above any manually inserted links at the end of your post
  • A cute image border to end your posts with
  • If you have regular features, image headings to illustrate those within the post.
  • If you use Photoshop – a few templates to drop your images into to create cute/cohesive looks
  • If you use Photoshop – consider buying or commissioning some Photoshop Actions to run over your images to create a cohesive ‘filtered’ look on each photo.

style guide

  • Choose colours
  • Choose any patterns and textures
  • Choose fonts and font sizes
  • Settle on a consistent layout
  • Settle on a consistent ‘feel’

Here’s an example…

style tile pip

I made the above image with a Photoshop template via Style Tiles but you could make this in any program – or cut and paste lo-fi style, with paper and glue stick, even! I made you a printable template for just that! Click the image below to enlarge and save!

 

style sheet for bloggers

 

mood board for bloggers
back end
For some bloggers, there is simply not enough time to write and manage the back end/design of their blog. Not only that, the whole technical vs creative struggle between the two can really side-track their creativity (put a damper on it, dare I say?) If this is you, PLEASE don’t hesitate to outsource the bits of blogging that you are finding too time consuming. It’s okay to leave stuff to the experts. Ask. For. Help.

That said, some experts charge a stupid premium and create blogs that are nearly impossible for bloggers to work on themselves. They build in future work for themselves by making the CMS (content management system) bespoke to them. I’ve heard of many bloggers ending up with CMS that they don’t understand and having to pay hundreds or thousands of dollars to update or customize their site. Don’t let this happen to you! If you decide to get someone else to design your blog, insist that they use WordPress.org to build it.

multimedia

Videos

You can create video on your phone or on a DSLR with a video option. There’s a ton of editing software out there, depending on the device you are using. I use iMovie on my Mac because it came out of the box with that installed. Your computer will usually have its own movie making program – or you can use an app on your iPad (if you have one!)

Tahnee from Milk Please Mum’s guide to making videos : here
Hailey’s from 365Grateful’s video making course : here
I recommend Vimeo as the prettiest video hosting platform, but YouTube is also great and definitely worth considering too.

What’s good about YouTube?

Better search capability as it’s owned by Google
It’s free
It’s the internet’s ‘native’ platform

What’s good about Vimeo?

Gorgeous interface
High quality videos
No ads
Free or paid (PRO) options

If you’re creating videos to share on your blog (rather than growing a YouTube channel and relying on ‘search’) then Vimeo is my recommendation. Your videos will look so much nicer and they’re easily customized to suit you, too.

(You can always upload a copy to YouTube AS WELL – but use the prettier, better quality Vimeo embed on your blog)

Podcasts

Do you remember that we learnt to make podcasts using Soundcloud back in BWP 1.0? You can revisit that lesson here (note that the Soundcloud app no longer allows you to record. You need to use another recording app and THEN upload to Soundcloud!)

The beauty of Soundcloud is that it’s really easy to embed and share your podcast directly onto your blog. It’s not just bloggers doing it – radio stations and the like are making the most of Soundcloud’s ace functionality.

 

Give your blog an all-over, once-over –> Pip’s DIY Blog Checkup CRITIQUE AND TWEAK

 

Further learning

And finally, it’s super important to continue learning and improving your skills, especially when the blogging landscape changes so quickly. You don’t have to stick to blogging, anything that encourages you creatively is a great idea. I recommend the following online learning portals:

Creativebug – for arts focused skills like drawing or watercolours or calligraphy
Skillshare – for a whole host of topics under the enterpreneur, design and photography umbrellas (to name but a few!)
Adobe – for free classes on Photoshop, InDesign and more
Lynda – for a really broad range of classes in all kinds of things

No Comments

Leave a Reply