Blog Design Presentation • Define Your Design BritMums Live 2015

When I started putting this session together with Teri I spent hours researching better blog design presentations, how to improve your blog design posts and how to DIY your web design articles! And they all became a variation on a theme.

There are fundamental principles that aren't to do with personal taste or style they are the basic foundation to a more efficient, user friendly website, with the ultimate aim of giving your reader a better experience. Because a better experience will communicate your content more effectively and make them feel like they want to come back and read again.

This is a mammoth post. But one to bookmark for when you have time and if you really want to define your design.

If you missed the session I hope these notes and slides will help you find a clear direction for your blog design or perhaps challenge your current thinking. I found myself analysing my site in a whole new way, things I knew that needed changing months ago but have been lazy, things that should have been glaringly obvious and Teri's experience as a designer has absolutely made me redefine both my objectives for my blog and its aesthetic. 

Sometimes it's easy to know you want to change something but you don't know how. 

So start at the beginning. Your Audience. It might not immediately feel like it has an effect on design, but it’s the first thing to think about. Do you know who reads your blog, could you profile them? Do you know their rough ages, whether they are male or female, are they predominantly bloggers themselves or outside the blogging community?

Knowing who your audience is will help you tailor your design. We all follow people for the same reason, that we like what they post. We all have our favourites for writing, favourites for photos, blogs we check first thing in the morning on our phones before we’ve even brushed our teeth! We get to know how their site looks and feels, and how it makes us feel.

I have quite a varied readership across the different social platforms. Remember people find your blog or website in different ways. I have the very loyal, incredibly supportive parent bloggers who have followed my blogging journey over the last few years, friends on Facebook who use it as a way to keep up with our hectic lives and friends of friends on Facebook who might just be nosy! Fantastic, the nosier the better in my book! Then I have this relatively new Instagram following, who I want to slowly convert to blog readers. My more styled photography is more popular on that platform whereas my more "real" everyday snaps have a greater engagement on Facebook. It's about balancing your overall aesthetic to appeal to your audience.

And that’s where “what do you want them to see” plays a big part. I want readers to see a professional looking blog, a mini digital magazine. It’s grown from a personal diary to something I hope people can use as a resource one day. I want my design to reflect a positive, happy, wholesome but aspirational feeling. Whatever the content might be your design creates an atmosphere. Bar the odd personal outpouring of course I want to create a site that will be cheerful to read. Bright and fun photography with my voice.

I’ve been stuck in a design rut for about 9 months. Too scared to make big changes, not quite sure what I wanted to convey. Am I a photographer, am I a mummy blogger, am I a lifestyle blogger, am I none of those and completely lost?!!! 

You need a plan of action. Back in March I went on a fabulous course about colour theory, which I will touch on later. And after that course I had several epiphany moments. All I could do at the time was write them down, store them away for a rainy day when life calmed down and slowly it’s becoming the right time. And those ideas are formulating into real plans, a strategy for a product line, a definite path to follow that feels right for me.

Your design can help you set your goals. What do you want to do in the next three months, in the next six, in a year? Think about how your design can achieve them. Do you want to increase your email subscribers? Have you thought about where you encourage those subscribers on your page? Take blog awards as an example. Putting a badge way down in your sidebar is not telling the readers who LOVE your blog that you would be so happy for their vote!

Setting specific goals are a great way to see how effective your blog design is.

So if you set yourself a goal to increase your subscribers by 20% how are you going to adapt your design to achieve it? Are you going to add a pop up box when someone lands on your site, have a sign up form at the end of each post? Look at your analytics, is there a particular older popular post that people re read? Add a sign up form at the bottom of it! I did a cocktail post well over a year ago, and because it was so well shared on Pinterest it’s still one of my most popular posts each month. Now what should I do that I haven’t?!!! YES amend the layout of that post to include a sign up form, perhaps add photo links to my other cocktails. I am missing an opportunity!

Write down somewhere what is the one thing you’d like to achieve after reading this post. a measurable goal. More twitter followers, more IG followers, more comments? Then look at your design, what could you do to help achieve it.

Your layout is how every piece of content on your blog visually fits together with each other. It's what people get used to but as much as we want to encourage habitual readers we also want to grab their eye and encourage them to read the important bits!

ALIGNMENT

So often I see blogs with beautiful words and photos but nothing is aligned. This is the first thing that is the easiest to change! It's not a styling choice it's ineffective design. Your text and photos should all be the same width so they span the container. If I stretched some of my phone photos they would be horribly blurry, so the way I deal with that is to arrange them in a collage and that way I can still stretch the whole image to the same width as the container. 

I see so many blogs with centered text and immediately want to align it! It makes it so much harder to read, especially on a phone or in long paragraphs and is one of the very basic principles of good web design.

COHESION

Same goes for your sidebar. So who will admit to loving the Daily Mail sidebar of shame?! So now who will admit that maybe their sidebar is a sidebar of shame too?! Mine is! Different logos that don’t compliment each other, all different sizes, different fonts. It's a muddle and it's not effective. It’s not clear what is the thing I really want you to concentrate on. Be brave, have a side bar spring clean in June! Approach your sponsors or brands you promote and look at how you can uniform your sidebar. 

Creating a cohesive design is tricky, you might have linkys you join in with that you love, or adverts you have to feature but think about how they fit together. do they compliment the logo below? Is there any cohesion between them?

REPETITION

We humans love routine we are not designed to process large amounts of data we think visually. And change often scares us or we feel disconnected at first with something new, so creating a recognisable repetitive layout is a good thing! We want readers to know how to find things on our sites, get familiar with our layout and navigation. 

Remember so many view blogs on their phones, they scan rather than read. Does your layout make that easy?! Are your posts like mine and photo heavy and can take forever to load? New readers might not be inclined to stick around! Would your readers benefit from a “Read more” button instead of scrolling endlessly? Would that mean they could view a few posts on your homepage and could re read those they missed or just scanned briefly? Think about the number of posts per page. Look at how the A Beautiful Mess sisters have a round up of posts at the bottom of their landing page and categories in their footer, clever right! Designed to make you stick around longer!

NAVIGATION

Look at your navigation - your categories, are you giving people too much information? What do you want them to see? If you want more commissions, more sponsored posts or reviews, make that more prominent in your navigation. A work with me category, make it easy for brands to find a contact form. Use drop down menus if you want to share lots of content without overloading people! You want people to feel like they are on a special journey of discovery, draw them in and make them delve around and lose an hour without realising!

 

When you analyse your layout which pattern are you following? There are 3 main principles in web design which all emphasise the importance of layout and how your content is read.

Some of your blogs might naturally fit into the Z or F pattern layout, or you may have a homepage as your landing page which you want to analyse against the Gutenberg Diagram. Assess your blog layout against these diagrams, what have you got in the strong optical area? Are you leaving important info in the weak area? 

We all scan, we all scroll madly on phones, how often do you look at how your blog reads on a phone?

It’s too easy when you have been blogging for a number of years to get complacent. To see your numbers steadily rise. Organic growth is fantastic but it also makes us lazy with design. As bloggers we are masters of our own design destinies. 

We love our sites like they are our babies, like you are in this secret society of bloggers which “normal people” don’t fully understand yet! But those normal people are an audience just waiting to be found. Very quickly our blogs can go stale in terms of their aesthetic, look outdated and unprofessional. It’s not about whether you blog as your profession it’s about conveying a professional image. It’s tempting when you have been blogging for a number of years to overload your navigation, show horning everything you’ve ever written, but look at your analytics! I have side bar links that never get read! I need to change it up! Think about how we are all inspiring the next generation of bloggers. We want people to land on our sites and think WOW! 

I went on a course in March and was blown away by how little I knew about colour theory. I hadn’t thought properly at what the colours all represent, how I should think about how a colour looks when it is printed and how different colours work together in different ways. The colours you use for your blog send a message and how you use colour within your blog can communicate different messages to your audience

Colour theory is based around the colour wheel. A simple wheel showing the spectrum of every colour you can imagine. Here’s a simple version which is used regularly across the web.

You can see there are 6 different ways of working with different colours. These ways all show which colours compliment each other. Look at the colours you use on your site and compare them against these colour wheels. Are you using complementary colours to highlight important information like links? How do the colours in your header or logo work together?

Different colours have different subconscious messages. This is why you will find high end hotels use black in their palettes to exude luxury and airlines feature blue to convey a trustworthy element to their branding. Choosing a palette of THREE complementary colours will help to hone the aesthetic of your blog

When you write a personal blog it should reflect you or you can make a conscious decision for your design to reflect a different you, just remember it's much harder work keeping that up!. And the more you can communicate YOU through colour the easier it is for a reader to appreciate your unique style. I read so often “just be you” “do your own thing” but I’ve struggled over the last year to really define what I am. Assessing myself in terms of colour has been so helpful. Metallics may be fashionable but gold doesn’t work as a strong leading element. It can appear greeny or browny on different screens and in print! Before I had really taken the time to analyse the colour palette for my blog I had just blindly thought well gold is fun and bright and reminds me of a party, which is what I want people to feel when they read my blog! But I can communicate that message far better using gold sparingly or not at all! Watch this space….

Different colours and patterns shape our seasonal personalities. When I looked at the different seasons in the theory of colour psychology I immediately thought I must be a spring person! But no! The way colour influences the seasons isn’t the basic "oh if you like brown and orange you must be an Autumn personality, it’s about looking at whether you feel muted tones represent you, warm tones, cool tones, vibrant colours, colours with depth or colours with light. 

So I am an Autumn personality because I favour vibrant tones of the warmer colours. I am not a candy pop or pastel girl like my Spring and Summer peers. Summer personalities favour light cooler tones. Think of wedding blogs and the romantic content and then look at their colour palettes. Most often than not they will be within the Summer personality or intentionally not. Whereas I like a natural richness in the colours in my photos. I like strong warm tones together, block illustrations, bold prints with depth. 

You can learn more about the seasonal personalities from the Queen of colour psychology The Brand Stylist

Think about warm vs cool so cooler tones will recede and warmer tones will pop out more. Think about link colours and text colours. I’ve realised I have the same colour for headings and links! What a mistake! How is a reader meant to determine what to click on?! And think about what type of information you are trying to get over with your copy. As a general rule use grey text which is softer on the eye and black should be saved for when you need to communicate a specific, more serious message. 

what-font-should-I-use-for-my-blog.jpg

The very very basic principle of good typography is readability. We want to make it as easy as possible for our readers to actually read. Remember they scan!

Using a professional looking font makes the reader have a better experience. The basics of good typography make you evaluate the fonts you use. So it’s not boring to use a standard web font for your copy like Helvetica it’s good practise! Steer clear of italic or script fonts for your main copy font, it’s no much harder to read! 

Consider the size of the font and be consistent. Use the same font size for headers and create a hierarchy of font sizes. 

Have you analysed the line space you use, the line length you use? Good practise in line length is around 80 characters. After 80 that scanning eye will have been drawn back to the start of the next line!

The way you order your fonts, your headers, your links, your main body text font, all these things communicate a message to your reader. Information can equally be lost in large blocks of text and small snippets. I'm guilty of using 3 lines of text to break up an endless stream of photos. But, often questions asked in the comments have been answered in the post, they've just got lost in a photo sandwich!

Good typography creates a distinction and contrast between different pieces of information, not just putting text in bold or capitals but the way you design the post to order and classify your information. What are the must read bits of info, think where they should be in the post!

It’s good when you have your established style to delve deeper.

If we look at this example of type hierarchy you can see how applying an element of considered design helps to establish what information is key. I am guilty of sitting somewhere between the second and possibly third image at a push!

Think about: 

  • alignment
  • contrast
  • proximity
  • repetition
  • density
  • white space around your copy
  • colour
  • style
  • texture as well as the font itself and the size of it.

It’s very rare especially in the parent community to find a blog that doesn’t feature photos no one would knowingly publish a post full of spelling mistakes would they?! If you spot a typo you go back and correct it right?! Apply the same rules for your photos!

Spelling mistakes in your copy = blurry/badly light or composed photos.

Use collages for less sharp phone photos, don’t be afraid to go back to popular posts and retake the photos! If its a recipe or craft for example, share it again with photos that don't make you cringe. I can't be the only one who loved a vintage filter or five 3 years ago...!

Always look for the best natural light, and if not cheat! I use the phone app FADED which has great subtle filters that help with brightness, a dull Winter's day can suddenly seem Spring like. 

EMBRACE PINTEREST

Look at how your photos complement your text. Do captions help tell a story? Do you have an obvious Pin it button?! Pinterest is one of the leading visual resource sites on the web, think more Google images less "my photos aren't really for Pinterest". It has a massive, massive sharing potential no matter how many followers you have or whether you even use it yourself. Consider that “hero shot” portrait composition, lifestyle image that you can pin!

You might not pin regularly from your site but others do! If you want to see what images have been pinned from your blog go to www.pinterest.com/source/www. then your blog url and you can see what is most popular! It may shape and influence your photography going forward for the better...

Remember your photography style is just as important as your writing style, people are coming back to your blog because they like the way you take photos and speak to them in your writing. And then translate that across your other platforms. Keep your quality consistent. Top quality isn't just for your blog. I use my personal Facebook for snapshots, the ones that don't represent my more professional image. But I curate the content on my social media feeds. Sometimes a "real life" messy house shot is right for a particular audience at a particular time, but if I consistently posted those I would see an immediate effect on my Instagram following for example.

Snap and share with intention. It's not about being calculated or manipulative, it's being considered. 

It was such an honour to have Teri from The Lovely Drawer host the session with me. She was very clear, there is no such thing as unbranded. Whether you like it or realise it or not, creating and developing a blog is creating your own brand. But what you choose to do with it is different for everyone.

Teri stressed the need to be deliberate about the process. You are in control of the message you communicate to your social media followings and blog readers and that needs to be the right message. What story are you telling what do you make them feel?

Your branding translates through to your packaging and products and whilst you may not have any physical product as a blogger just yet or ever, you need to think of yourself as the product! 

Things to consider

COMMUNICATING YOU

Type of blog, genre, focus of content. Do you have a focus? I know I don't have a particular focus in my content but I have a clear goal of communicating my content through lifestyle photography. 

Be clear and don’t confuse people.

You want to give someone a sense of what you’re about instantly. Think of how you view someone's Instagram feed when you decide whether to follow them or not. I always scroll back a couple of times and in 5 seconds I get a feel for them and whether I want to follow them or not. 

RECOGNISABILITY IS CRUCIAL

The mark of great branding is an recognisable style that can translate from any digital form to surface. So think about your biggest dream for your blog, would it involve a product line, a book, particular brand collaborations. I work from big dream backwards! I know I need to invest my time in developing a distinctive logo which would communicate my message onto any future idea I have. And this filters down through everything. The style of my photos, the way the blog is laid out etc. 

You want there to be an instant association for your readers.

SIMPLICITY IS SUPERIOR

Teri talked through one of the hardest skills to learn - what to leave out rather than what to put in. I am terribly guilty of filling gaps and spaces, both digitally and physically! Teri is currently designing my logo and branding and she has to reign me back in when I want to overload it with detail.

There is a place for detail but it's learning when to strip it back and when additional content enhances your blog. Your logo is almost your base layer, the very definite, uncluttered, streamlined statement of your intent.

Think about your profile information on Twitter and Instagram or your bio on your website. What are the things you choose to say that give people an instant overview of what they can expect? If you were to write a summary statement for a stranger what would it say? Think of the words you would use, how would you describe your blog, not necessarily yourself, your blog?

ROOM TO BREATHE

You may think there is a current trend for blogs and websites which emphasises white space but it's not a trend it's good design. 

Teri was very clear that it's not fashionable to embrace white space it's essential! 

Negative space support and doesn't detract. It let's your content breathe. 

Take art galleries as an example they are often very sparse in terms of interior style, white walls, simple decor, because your focus needs to be on the art displayed.

You don't want your content to be in competition with the rest of your site!

CONSISTENCY ACROSS THE BOARD

Branding is not just an avatar, a logo or a header, it's a seamless projection of everything you create.

The fonts, colour, type spacing, photo aesthetic, even your voice all contribute to your brand. 

And your brand translates from your blog to business cards to social media pages to Instagram feed. If you use filters on your photos stick to 1 or 2 maximum. If you like cropping your photos in a certain way or using borders, keep it consistent. 

QUALITY IS KEY

Teri spoke about the importance of striving for high quality content and that nothing says ‘I mean business’ more than conveying a sense of professionalism in everything you do. 

The more professional your blog appears the better the experience for your readers. Clear type faces are easier to read, navigation that allows readers to find information from your site and if you are looking to work with brands, a professional aesthetic will be noticed. 

Teri shared my feelings about poor quality images. I loved that she was so honest about how important the imagery is on your blog. Out of focus, poorly light and composed photos are not for your blog! And that goes for all your platforms. 

DON'T BE A COMMITMENT PHOBE

Carefully consider & commit. Make a plan, set a course of action of how you are going to get there and go for it.

Teri herself has re-branded her website for her design business and blog 4 times and knows how re-branding too often is destructive. Even more than once a year is too much! You need to show you have a clear message to communicate. 

Tweak & refresh but give your reader recognisability. It's tempting when a new template comes out or a new design trend hurtles around the internet but don't feel the need to tick every current trend box. Take patterns for example there was a huge chevron trend last year and as much as I love them and was sorely tempted to incorporate them into my site I knew that geometric print does not represent me. The structured lines and uniform repetition do not encapsulate my personality. I know any patterns or prints I use need to be more fluid, more romantic, feminine but not whimsical. Teri's advice really made me think about how branding is not something you can rush and how your brand can evolve but needs to have a base starting point that you stick to.

Creating a set of branding guidelines can help you story board your vision. A virtual mood board. 

Start by pinning anything that you like to a secret pin board. Pin interiors you like, food styling you love, clothes, places, colours, patterns, anything!

Pin without having a strategy because you will see an overall pattern emerge naturally. Which if you choose to commission a designer to help you with your logo design and branding process will help them no end! 

During the session we used physical mood boarding and everyone had the opportunity to walk around the room and collect props, colour cards, scarp book papers, flowers, fabric, photos all sorts to help them create a mood board for their blogs. I am collating all the photos and will add them! It's a fantastic way to challenge your own perceptions. I found it a really hard task back on the course in March, because suddenly I wasn't comfortable with what I thought I wanted!

As bloggers there is always something new to get to grips with! A new app, a current trend of blogging be it suddenly feeling the pressure to vlog, or travel or apply for ambassadorships. There is always something else to respond to. And your design needs to be responsive. Our sites need the best functionality possible to adapt to change and embrace it! 

Recognising what you want to communicate, establishing a design for how you communicate it and then sharing that content in the best way for you will result in a happy, effective blog. I find blogging feels hard work when I try to force it. Find the platforms that suit you, you can't be all things to all people.

Say it aloud when you are crying over a video edit or googling what on earth is Pippet or Periscope?

I can't be all things to all people but I can be me. 

Now you have the principles of read and understood the principles and good practises to follow for web design you can choose to make changes or break the rules.

No one says you HAVE to do any of these things, but go against them with intention, knowing they effect your reader's overall experience. As much as I adore gold, every time I see my logo it makes me wince. Something that felt so right without my new found knowledge of colour theory now feels so wrong.

Time for a change!

 

I am off with all my boys, big, small and furry (and Mabel of course) this weekend to Woolley Grange Hotel as part of my Summer Good Times experience with Boots. I was proud to be sponsored at BritMums Live by the Boots team and will be sharing some eye popping information with you after the weekend about being safe in the sun. Not only do I look at my logo and cringe but I look at some of my old holiday snaps where I look like a piece of old brown leather and cringe even more! But I just love having some colour on my body so I have some safe tanning tips to share. More of that and some embarrassing old photos next week!