Design

Tips, tutorials, and resources about design including web design, branding, graphic design, typography, image sharing and any other crafted visual media.

  • 3 Design Elements That Will Make People Fall In Love with Your Blog

    There are three aspects to creating a reading experience on your blog that your readers will love. That’s it, three.

    It’s one thing to create great content for your blog, it’s an entirely different thing to create a reading experience that keeps people coming back for more. Building a blog starts with great content, but if your readers are not given an enjoyable reading experience then you’re doing your content and your readers a disservice.

    There are 3 factors that make up the reading experience on your blog. Typography, white space, and sizing. If all of these factors are working in harmony, your readers will love reading your content all the more. So let’s break it down bite-by-bite!

    This is part of the Blog Design Essentials series. Be sure to catch the rest of the posts in this series to take your blog design to the next level!

    Also, be sure you sign up for my Insiders list below to get the latest resources and advice for making this stuff easier for you.

     

    Typography

    Starting with the fonts you use, simplicity is key, but don’t be afraid to be unique. Your goal should be to have no more than 3 different fonts throughout your design. Each font should be assigned to one of three purposes. One font for Headlines, one font for Quotes, and one font for everything else.

    1. Headline Font

    This will be used only for the headlines and sub-headings for your blog posts and pages. Find a font that is bold, easy to read, and eye-catching.

    The font I use throughout my site is called Open Sans and I use it for both headlines and paragraph font (which I’ll talk about next). Although they are the same font, you’ll notice that the headlines are always either bolder or darker making them feel more important. This is the first part of establishing a visual heirarchy.

    2. Paragraph Font

    Since your paragraph font will be the dominant font on your site, this is the most important of them all. Take careful consideration in choosing which font will be the dominant typeface throughout your blog.

    If you were around for my 2013Ā new design unveiling then you saw how I totally botched this one! Live and learn– then teach what you learned so others can avoid the same mistakes!

    The safest way to go is to select something that is commonly used– a web standard font. These include:

    Serif fonts

    • Georgia
    • Palatino Linotype / Book Antiqua
    • Times New Roman

    Sans-serif fonts

    • Arial
    • Helvetica
    • Comic Sans MS
    • Impact / Charcoal
    • Lucida Sans Unicode / Lucida Grande
    • Tahoma / Geneva
    • Trebuchet MS
    • Verdana

    Monospace fonts

    • Courier
    • Lucida Console / Monaco

    Whichever one you choose, the goal is optimum readability. Since people will spend the majority of their time reading this font, it should be the easiest to read of all your fonts.

    After my little font mishap, I decided to go with the designer favorite, Helvetica. However, I added a little spice to it by using a lesser known trick that calls out an even prettier Helvetica, Helvetica Neue. Most computers will render this prettier version, however some will instead revert to standard Helvetica.

    As earlier stated though, my current design now uses Open Sans font throughout the site.

    3. Quote Font

    I also like to incorporate a different font for quotes. I just think it helps make them stand out from the rest of the text, giving the reader a visual distinction between your words, and the words of someone you are quoting.

    Historically I’ve used a sans-serif font for all paragraph and headline text and for any quotes I would use a serif font. My go-to serif font of choice is usually Georgia. Not just because there is a song written after it, I simply just love the way it reads!

    Currently the font I use for quotes is called Playfair Display and seems to work beautifully.

    Finding the right font

    If you’re not satisfied with the standard web safe fonts, I suggest using Google Web Fonts (like you see I have). There is a huge selection of great fonts and once you pick them out, there is instructions on how to implement them.

    Use caution though, because not all of the fonts are cross-browser or cross-OS compatible (learned that the hard way). Be sure you test them on all browsers and both Windows and Mac machines.

    White space

    One of the biggest mistakes I see in web design is a lack of whitespace. Some people feel the need to fill the screen with as much as humanly possible or else their readers will miss something. This is a mistake.

    This fits right into my simplicity philosophy, which I hope to share soon. Until then, I’ll just say that the less crowded your content is, the more your readers will be able to focus on it. Give plenty of breathing room.

    For example, I’ve given lots of space on the left and right of paragraph text. I’ve also allowed for a good amount before and after paragraphs. Plenty of breathing room.

    Take a deep breath. Doesn’t that feel good?

    Sizing

    The last piece is to decide on font sizes and line spacing. Did you know that there is actually a such thing as ‘Optimal Characters Per Line‘? Well there is!

    Various studies have shown that the optimal characters per line is between 50 to 75.

    To articulate this concept further, the Baymard Institute says it this way:

    Too long ā€“ if a line of text is too long the visitorā€™s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.

    Too short ā€“ if a line is too short the eye will have to travel back too often, breaking the readerā€™s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words).

    A post by Mikey Anderson really convinced me of this. If you don’t know who he is, he’s the guy responsible for the beautiful design of theResurgence.com and PastorMark.tv as well as many others. He’s a truly brilliant web designer and I hope to be half as cool as him some day. You can read his thoughts on optimal characters per line here.

    To help you find the optimum characters per line, I’ve discovered this gem of a web app developed by Chris Pearson. He calls it the Golden Ratio Calculator. It is an essential tool in finding your perfect font size and line spacing.

    With my font and white space determined, I decided that the optimum size for me was a size 24 font with 34px for line-height for good line rhythm.

    If you incorporate all of these principles, you will undoubtedly have created a stunning reading experience that people will always return to.

    If you want a dead-simple and super fast way to give your blog a stunning makeover, I recommend starting with a theme from Studio Press [affiliate link]. Their themes are what I use to build all my web properties.

    Where have you seen these principles executed or not executed well?

  • Choose Your Brand Colors Like A Pro

    If you’re not a designer, all the color psychology and strategy in the world might not help you narrow down a solid color combo to create your personal branding.

    Once you answer the question, “what colors do I want to use,” you then have to answer, “what hues of which colors should I use?” Then you will probably have to narrow it down with, “how many colors should I use?”

    I’m going to attempt to give you a simple, practical guide to choose your brand colors like a pro.

    This is part of the Blog Design Essentials series. Check out the rest of the posts by clicking here.

    How many colors should I use?

    If you were to go and visit the top blogs in the world, specifically looking at the colors they incorporate, you would start to see a trend. Most big brands are using two or three colors in their design. The most well executed brands will have two primary colors and one accent color that pops against the other two. So here’s the formula:

    2 + 1 = optimal color palette

    When it comes to blog design and creating your personal brand colors, it’s best to use a maximum of three colors. Two primary colors and one accent color should be the basis for your color palette. You can use as few as 2 colors, but never exceed 4-5 colors in your design. Keep it simple, keep it specific.

    Take my site for example: when you look at dustinstout.com (or even dustn.co) you’ll notice 3 primary colors– red, black, and grey. I chose to stick with two neutral colors and one accent color. I kept it super simple for my personal brand because it’s easier to stay consistent, and simplicity makes a longer lasting brand impression.

    Now, if I’m being honest, technically I have 6 colors in my palette. I know– what a hypocrite! But hang on before you throw me to the lions! When I come up with the primary colors in a design, I will choose either a slightly lighter version, or a slightly darker version to use as highlights/lowlights within elements. This makes for great gradients so that the colors aren’t always flat– they have some depth to them. I know that sounds really confusing, so let me show you exactly what I mean:

    Base color palette:

    base-color-pallet

    Color palette with highlights/lowlights:

    base-color-pallet-extended

    The “dustn” part of my logo is red to emphasize and draw attention. I needed to do this because I wanted to make sure people remembered the unique spelling. It’s d-u-s-t-n; dustin without the ‘i’. Using a bold, attention-getting color makes it more likely for a visitor to see that it is spelled differently. At least that’s the hope. Plus, red is just my favorite color– so of course I had to use it in my logo.

    To give the logo a bit of depth, I used 2 shades of red to create a gradient (one color transitioning into another). I also use red for the color of links throughout the site. Aside from navigation links, any text links on this site are red to draw your attention. I use a slightly lighter black color for my navigation elements, and post titles. It has the highest contrast and plays nicely against my background color. It’s a bit lighter pure black to, again, add a bit more visual depth.

    For my background color I use a very light grey. It is only a smidgen (technical measurement) darker than white. I did this because grey gives a slick, modern feel and can be partnered with white as a hue without complicating the palette too much. So you see, there are two primary colors plus one accent color that I stick to, with a variation of each that will allow me to add a bit more depth to the design elements.

    Make sense? Good. Now how in the world do you make your own palette? Good question, I’m glad you asked it.

    Tools to Help You Choose Colors Like a Pro

    I wish it was as easy as just thinking up your favorite colors and putting them together. Unfortunately, good design takes a bit of an eye for color coordination. Luckily there are tools out there that will help you find the perfect color palette for your blog design project. Here are the two I use regularly:

    ColourLovers.com

    colour-lovers

    This is my first choice when I’m looking for color combo ideas. This is a user curated database of all sorts of beautiful color palettes.

    Using what I’ve outlined in this post, you should be able to search through ColourLovers.com and find a palette that fits exactly what you’re trying to do. With ColourLovers.com you can search through the thousands of palettes by keyword, hue, hex code, and a few other specifications. You can even search through popular brand colors!

    Kuler.Adobe.com

    kuler

    This is also a great tool for looking up user created color palettes. It’s not quite as user-friendly, but still a great tool to use.

    Let’s recap

    Since bullet points are highly effective and more actionable, here’s the three sentence, bullet-point version that would have probably saved you 4 minutes of reading time:

    • Decide on two primary colors and one accent color.
    • Find a perfect color palette using one of the two websites mentioned above.
    • Stick to these colors only when designing your blog.

    Once you find the palette that works for you, save the values somewhere they’ll be safe and easily accessible. Now you can really begin your blog design implementation. Use your new branding colors, and only these colors, throughout your blog design and you will have created a professional grade branding palette.

    So what two or three colors are you working into your personal branding palette? You can leave a comment by clicking here.

  • The Essential Guide To What Colors Communicate

    Did you know that colors communicate? The use of color in design can be an essential part of how your visual aesthetic perceived.

    Color usage can either make or break your designs, and I will show you how to choose your colors wisely by understanding what they communicate.

    When new visitors land on your blog, the first things they interpret are colors. Before they read a single character, their brain is registering colors which are subconsciously (or consciously) tied to emotions, states of mind, or preconceived ideas.

    If you do a poor job at putting together the colors in your blog design, it can be detrimental to the growth of your brand.

    I’ve come up with an essential guide to what colors communicate, as well as a quick infographic to reference that is free to download!

    This is part of the Blog Design Essentials series. Check out the rest of the posts here!

    And don’t forget to get on my Insiders list to get exclusive content (even better than this post!) and access to a growing resource page of downloadable Goodies. Get access by adding your email below:

    What do colors communicate?

    You may not know this, but colors have a very significant effect on us both psychologically, and even physiologically! Certain colors can change our state of mind, or even affect our physical state. Is that crazy or what?

    Lucky for you, I’ve gathered the research and put it all in one place for your reference. I’ve even put together an infographic at the end for you to download and share! First, let’s break these colors down one-by-one:

    Red

    red-communicates
    This happens to be my favorite color– as if you couldn’t tell. Red is the most eye-catching and exciting color in the entire spectrum. It’s eye-catching, exciting, and demands attention. But did you know that the color red actually increases your heart rate?

    It is perfect for accent colors, calls to action, or anywhere you want to draw people’s attention. Be careful though, because overuse of this color can cause a negative emotional response.

    Orange

    orange-communicates
    Probably my second favorite color. Orange is also an attention getter. Distinct from red, orange is a color that is mostly associated with fun, ambition, and youthfulness.

    It is also a great color to use for accents and calls to action. Unlike red, it is not as easily overused.

    Yellow

    yellow-communicates
    This is the official color of optimism and happiness. Maybe that’s why smiley faces are always this color. Studies have shown that the color yellow actually causes the release of serotonin in the brain, which is a chemical that positively stimulates your brain. Basically, it produces “happy” chemicals!

    This color is also best used in small amounts. Too much yellow can be overpowering and shouldn’t be used as a dominant color in a scheme.

    Green

    green-communicates
    This is the easiest color for the human eye to process. It’s easy to look at and is associated with growth, nature, and money. It can also be a very relaxing color for some, which is why you’ll see it used in a lot of leisure and “zen-like” design.

    If your goal is to communicate growth this is the color you want to use.

    Blue

    blue-communicates
    The color of trust and loyalty. Blue is associated with calmness and security. Most people would say that blue is their favorite color. It has been documented to lower heart-rate, foster relaxation, and increase productivity. Maybe this has something to do with why a billion people trust Facebook with all their most valuable information? Just a thought. šŸ˜‰

    This is a very safe color to incorporate into your design. Since it’s most people’s favorite color, you’ll immediately appeal to a wider audience.

    Violet

    violet-communicates
    A color that has traditionally been associated with royalty and prosperity. Studies have shown that the color purple actually stimulates problem solving in the human brain. That’s interesting.

    Caution though, studies have also shown that overuse of this color can give people the impression of falsehood, or being fake. Use this color as an accent, and sparingly.

    Grey

    grey-communicates
    A solid, timeless color that communicates strength, sturdiness, and longevity. Likely because things that are grey have these same attributes: steel, concrete, stone, Apple products, etc..

    You can never go wrong when incorporating this color into your design project. It can be a great alternative to white, and give things a modern, yet timeless, look.

    Brown

    brown-communicates
    Earthy and organic is what best describes this color. Dirt, trees, potatoes– all things found in the earth. It’s also the color of my favorite beverage– coffee! When used properly, it can be a soothing element and give an organic feel to your design.

    White

    white-communicates
    The lightest color both visually and in psychological weight. It gives a light feel to your design, and is best used to give your design breathing room. Associated with purity, cleanliness and clarity I think white is a great color to incorporate into any design.

    Black

    black-communicates
    The color of elegance, power, and authority; boldly stated and seemingly unshakeable. If you’re trying to communicate strength be sure to incorporate black into your design.

    I am of course talking about all these colors in their most basic form. Surely a neon-green will be more attention-getting than a dull red any day of the week. So these are merely a starting point and general guide to what colors communicate.

    Quick Reference Infographic

    I’ve created this simple chart for you to download and reference for your current or future projects. Please feel free to share!

    visual guide to what colors communicate

    [Click on image for full size.]

    Unfortunately I have way to much to say about picking the right colors, so instead of making this post the size of a small novel, I decided to break it up over 2-3 different posts. In my next installment of the Blog Design Essentials I’ll address how many colors to incorporate, and helpful tools to put together the perfect color palette.

    Has any of this caused you to re-think the colors you are currently using in your blog design? You can leave a comment by clicking here.

  • Blog Design Starts With A Solid Theme

    Killer blog design always begins with your foundation. It is essential that you get firmly planted in a theme foundation that is flexable, cutting edge, and built for the long term success.

    Assuming you’re using WordPress, I’m going to give you 8 core elements to look for when choosing your blogging theme. With so many options out there, you’ll want to know they key things to look for to make the right choice.

    On top of that, I’ll tell you why I believe I have found the ultimate blogging theme.

    This is part of the Blog Design Essentials series. Check out the rest of the posts in the series to get the most out of it.

    Content Focused

    The first thing you want to look for in a great blogging theme is that it is focused on the most important part of your blog– the content.

    When you read through the feature sets of any theme, you want to get a sense that they made your content the primary focus of their design. If the theme doesn’t focus on your content as the most important part of the equation, then you’re not going to see a long term gain for your investment.

    SEO Friendly

    You want a theme that is SEO optimized so that search engines will love your site. Better SEO (Search Engine Optimization) means that people are more likely to discover your site through a search engine like Google. This will ensure that you blog will reap long term, continuous growth.

    Be careful though– there are a lot of themes out there that claim their theme is SEO optimized when it’s really not. If they don’t back up their claims with sufficient proof of optimization, then I would steer clear.

    Mobile Ready (a.k.a. Responsive)

    I will be writing about this later in the series, but in brief– a responsive theme is crucial. In today’s mobile world, you’re blog must be ready to cater to mobile devices such as smartphones and tablets. A theme that isn’t responsive or mobile-ready is not even a candidate.

    Responsive is a term that means the site will automatically adjust to the user’s browser size. For example, if you’re on my site right now on a computer screen, just pull the side of the browser in and see what happens. The site automatically resizes in real time to fit your browser.

    If you’re reading this on a mobile device right now, you’re already seeing that the site has formatted itself for your screen. You’re welcome. šŸ™‚

    As fast as technology is advancing, there is no excuse for a theme to be un-responsive. Not responsive = deal breaker.

    Child Theme Ready

    If you don’t know what a child theme is, let me give you the short explaination:

    A child theme is a way of customizing your theme without the risk of screwing up the original theme files.

    You may not utilize this right away, but in the long run it’s good to have. When you do have the resources to hire a designer or developer, this will allow them more freedom and less risk when developing your blog further.

    This is also good for the up-and-coming designer/developer who wants to dabble in CSS, or maybe tweak some of their sites functions. It will allow you to experiment with things without worrying about breaking something.

    Simple And Elegant Out Of The Box

    You’ll want to look for something that looks good out of the box. Simplicity is key. The less clutter there is, the more people can focus, again, on your content.

    You shouldn’t have to ruffle through too many options to get your site up and looking good. Some themes are so “feature rich” that it will take you an hour of tinkering with settings, color toggles, and other adjustment functions just to get it running.

    Having too many options is definitely a bad thing. It wastes time, makes life more complicated (who needs that?), and in most cases will slow your site down making it less user and search engine friendly. It is also a sign that it doesn’t live up to the next thing to look forā€¦

    Tight Integration With WordPress Core

    You want a theme that was well thought out enough to leave the core WordPress functions in tact. These could be things such as background color, header image, sidebar widgets, navigation menus, or post formats.

    Any function that bypasses WordPress’ native functions is potentially going to cause unneccesary clutter. And again, we don’t like clutter. We especially don’t like redundant clutter that slows down and bloats our site for search engines.

    Themes with comprehensive admin panels usually miss the mark here. In an attempt to make things “simpler” for the user, they actually handicap them because they never learn to use what WordPress already has in place.

    On top of that, if the user ever ditches the theme for a better one, they will not be able to find the WordPress functions because they’re used to everything being in their “all in one place” admin panel.

    In a nut shell, find a theme that lets WordPress do what it is already built to do.

    A Solid Support Forum

    Probably the most essential of all of these items is a solid support forum. A place where you can go to ask questions, get help, and engage in an active community of people using your same theme.

    This can be an absolute nightmare if you don’t have a proper support system to troubleshoot problems, or ask questions.

    Ongoing Updates

    You’ll want a theme that is constantly evolving as technology, WordPress, and the digital world is evolving. You don’t want a stagnant theme that isn’t constantly being improved and upgraded with the latest standards.

    The main reason for this is security. Having a theme that is out of date with current security standards is dangerous. You don’t want to wake up one day and find that your site has been hijacked or flagged by Google for malware.

    So What Is The Ultimate Theme?

    After searching through thousands of themes, experimenting and building more than a dozen different frameworks I am 100% confident I’ve found the ultimate blogging theme. If you’re a long-time reader here, you know what I’m going to say next:

    Genesis Theme by StudioPressĀ [aff link].

    Not only does Genesis Theme meet all the essential criteria, it blows them away with flying colors. Here’s how it measures up:

    • Content focused – Putting your content as the primary visual focus is clearly StudioPress’ goal.
    • SEO friendly – Optimized and refined over the years to be an SEO powerhouse.
    • Responsive/Mobile ready – Seamlessly, beautifully, awesomely elegant, and highly functional using HTML 5 responsive frameworks.
    • Child theme ready – You bet’cha. StudioPress has created tons of child themes that are ready to plug and play.
    • Simple and elegant out of the box – Brilliantly.
    • Tightly integrated with WordPress core – You wont find any conflicts here.
    • Solid support forum – The best in the industry today. Period.
    • Ongoing Updates – Like a boss! These guys are on top of it!

    Needless to say, I’m a huge fan of StudioPress. It took me a while to recover from the heartbreak of saying goodbye to my previous favorite, Standard Theme, but I’ve found Studio Press to be more than a worthy replacement.Ā They are a team of powerhouse bloggers, business owners, and digital entrepreneurs who are at the top of their game.

    I now recommend GenesisĀ to all my clients who desire to build a significant online platform for themselves or their brand.

    Browse Studio Press Themes

    Conclusion

    I hope you will take all these factors into consideration when looking for a solid foundation to build your blog upon. If you can find a theme that fits all the criteria I’ve outlined above, you will surely be successful in the longrun.

    Are there any questions you have about what to look for in a theme? You can leave a comment by clicking here.


    Disclosure: Some of the links above are affiliate links meaning if you make a purchase of the recommended product(s) from those links, I will get a small commission. I only recommend things I use myself, and would never profit from anything that I’m not 100% convinced it is worthy of your attention.