Before a community, there is blog design<\/strong>: if you intend to form a community, you should facilitate comments, readership, interactions. So, to create a community, basic conditions should be met. And these conditions concern blog design.<\/p>\n Jump to examples of blog designs for your inspiration.<\/p>\n <\/p>\n <\/p>\n Place yourself in a user\u2019s shoes and imagine how he experiences your blog. This is helpful to create a user-focused blog design. Reverse this reading process and see which best practices you should apply:<\/p>\n <\/p>\n There are plenty of patterns according to which you can design the header of your blog:<\/p>\n Make them unique<\/u><\/p>\n One of them is making the blog different from others. For this, a blog header should be unique, special for the respective blog, and appropriate for the blog identity.<\/p>\n This is true for Solopreneur, where the title and subtitle really shout out loud a condition there should be no argument against:<\/em><\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n <\/p>\n Make readers know what they have to expect <\/u><\/p>\n KnowTechie introduces a blog header that makes users know what to expect – a magazine style blog, where news is spread onto the page according to their importance:<\/em><\/p>\n <\/p>\n <\/p>\n <\/p>\n Ensure visual salience<\/u><\/p>\n Social Triggers runs a blog that adds value to the business, through some advice that makes all articles useful to their readers. The face in the header drives visitors\u2019 attention to the title of the blog.<\/em><\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n If you\u2019ve been blogging for some time, you\u2019ve probably got familiar with the 2 options for the blog homepage. WordPress, for instance, allows you to set:<\/p>\n <\/p>\n Blog homepage featuring latest posts<\/em><\/p>\n <\/p>\n <\/p>\n <\/p>\n Blog homepage set as static page<\/em><\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n Each of them has its advantages, the pros weighing more on the static page side<\/strong>\u00a0.<\/p>\n If the homepage is set to display a static page, chances are:<\/p>\n <\/p>\n <\/p>\n If the homepage is set to display posts in reverse chronological order, chances are:<\/p>\n <\/p>\n Organize your blog so users can scan it<\/span><\/p>\n <\/p>\n According to studies, most of a blog\u2019s content will not be read. Web surfers are used to scan blog articles and pages and spot the information that directly interests them.<\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n <\/p>\n This being said, you have to format your blog pages<\/strong>, so they should be adapted to scanning:<\/p>\n <\/p>\n <\/p>\n People are getting more and more visually inclined, so consider including images into the blog. Research demonstrated that articles with images had a 65% retention rate (they are longer remembered), as compared to articles that had no images and thus registered a 10% retention rate.<\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n <\/p>\n It was demonstrated<\/a> that faces heavily influence where visitors look in a blog page. Depending on where the face looks to, people manifest a tendency to direct their attention towards those particular elements in the page.<\/p>\n The website below gives you the chance to play more with these effects and gauge their power for your own blog design:<\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n <\/p>\n It\u2019s up to you whether to add a background image to your blog pages or not. However, a background image has some drawbacks, in terms of blog design:<\/p>\n It\u2019s safest to use a white background, that\u2019ll emphasize your content and drive attention to your articles.<\/p>\n <\/p>\n Example from Sidehustlenation.com<\/a> :<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n A progress bar has the role of showing users how much they have until they complete reading the article. So, this blog design element is more than recommended for usability<\/strong> purposes.<\/p>\n Going through all the article is a given task that readers should complete<\/strong>. A reading time estimate or else, a progress bar, gives them a measure of what it\u2019ll take to complete the reading process, and at what point in the reading process they are at a certain time.<\/p>\n So, consider adding a reading time estimate to every article page in the blog. A more elegant solution, the progress bar can give them an intuitive feel of exploring the article and getting the most out of it.<\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n <\/p>\n If the blog articles are destined to a high number of users, so are font dimensions for the regular text. You\u2019ll have to be sure your blog has a high readability score.<\/p>\n It\u2019s recommended that text should not be smaller than 14 pixels. In fact, 16 pixels should be the optimal font size. Smaller font sizes would considerably affect text legibility, directly related to visual acuity (elder people need bigger text, but even the young prefer larger text values<\/a>). There\u2019s also another option to set font dimensions to percentages, instead of fixed values. Thus, text dimensions adapt to different screen resolutions and different browser displays.<\/p>\n <\/p>\n <\/p>\n Depending on the typography style you choose for the text (be it for title, subtitle or simple text in the page), you should carefully choose values for the distance between letters. There are WordPress themes that make it easy to adjust character spacing, based on how it looks on the page and readability criteria.<\/p>\n To test appropriate letter spacing (also known as kerning in web design), you might want to try this tool<\/a>.<\/p>\n <\/p>\n Bad kerning vs. good kerning<\/a><\/p>\n <\/p>\n <\/p>\n <\/p>\n The golden ratio typography is a simple system helping you maintain perfect proportionality for all the text elements you use in the blog pages. With this tool<\/a>, you can view how the text is displayed to users, both in title and in paragraphs.<\/p>\n Enter the font family, preferred font size and the content width, and you\u2019ll have a sample of how your text looks like:<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n Still for readability purposes, consider adjusting the length of paragraphs so it should be easy for users to go through them.<\/p>\n The optimal paragraph length in the design of a blog is considered to be somewhere between 17 and 20 words.<\/p>\n In the sample text above (displayed with the Golden Ratio Typography Calculator), the paragraph length has a value of 700 px \u2013 that is about 16 words.<\/p>\n <\/p>\n <\/p>\n The use of justified text in a blog pages is not recommended. This is because, sometimes, unattractive gaps appear in justified text. Hence, readability decreases, and the page will not look so good.<\/p>\n Instead, align text to the left. This alignment type follows the natural language flow and gives text better chances to be scanned or read entirely.<\/p>\n <\/p>\n <\/p>\n White space (aka negative space) plays a major role in a blog\u2019s design. It serves to driving attention to certain parts of the blog pages and supports the principle of proximity in that blog\u2019s design (in that it reinforces elements\u2019 proximity to one another).<\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n This is an example of negative space at work (where negative space is not white).<\/p>\n <\/p>\n In terms of negative space, use it generously. Just think a blog design needs both active white space and passive white space:<\/p>\n The active white space<\/u> is used to draw users\u2019 attention towards certain elements of the blog.<\/p>\n The passive white space<\/u> is used for creating balance, harmony, and comfort for users scanning the blog pages.<\/p>\n <\/p>\n <\/p>\n Social buttons placement deserves some little extra consideration, when it comes to integrating them in your blog design.<\/p>\n Placing them at the beginning of an article might be a bit too early for readers to take action and start sharing your content. Likewise, placing social buttons at the end of an article might prove a bit too late for readers to take action and share, once their reading task has been completed.<\/p>\n <\/p>\n Instead, place them:<\/p>\n Below is an example for the first recommended placement:<\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n <\/p>\n This is where design meets functionality. Be sure you catch readers who\u2019ll want to see more of your blog posts. Make sure you put a subscription form in a visible place and make it easy for them to follow your blog activity.<\/p>\n Here\u2019s an example of how Lilistravelplans.com encourages readers to subscribe for more articles:<\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n <\/p>\n <\/p>\n An overall principle you should observe in defining your blog design is to make it clean, and avoid embarrassing elements such as: banners, popups, crowded sidebars, etc. Keep the blog design as simple as possible, including only needed elements.<\/p>\n A nice example of clean blog design:<\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n <\/p>\n If blog design is chosen to be minimalist, so should be the navigation menu. The menu should contain categories you are blogging about, and it should help readers navigate simply within the blog pages.<\/p>\n As a general rule, don\u2019t go overboard and make the menu original. Keep things simple, sticking to a classic design wholly meeting functional criteria.<\/p>\n Here\u2019s an example of a blog menu you will surely like:<\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n <\/p>\n One of the latest trends, also promoted through newest templates, is the grid-based layout. It helps you give a clean design to your blog. Also, it\u2019s easy to scan in search for the topic that best interests your readers. The featured images offer a nice visual presentation of the articles.<\/p>\n Here\u2019s how Brit.co<\/a> uses such a layout:<\/p>\n <\/p>\n <\/p>\n <\/p>\n Unique header image for every blog post<\/strong><\/p>\n The option that\u2019s available for adding specific header images to every blog post is to set a featured image. If you\u2019re using WordPress, you\u2019ll find this option in the editor interface.<\/p>\n A unique header image for every post page will clearly signal the unique content in that blog article. It adds specific color and design to the page, and it serves as a branding element for that very article.<\/p>\n Bio section for the blog author\/authors<\/strong><\/p>\n It\u2019s important to create a dedicated bio section for the blog author.<\/p>\n Telling a few words about the author of the blog posts will add credibility and authenticity to the blog content. In this section, you can be as innovative as you like, and you can transmit, through design, exactly how you want to be perceived by your readers.<\/p>\n For instance, Legalnomads.com<\/a> developed their About section into an entire blog post:<\/p>\n <\/p>\n <\/p>\n <\/p>\n Popular posts and pillar content<\/strong><\/p>\n You should showcase best content of the blog. For this, you should think of including sections for popular posts and pillar content in the blog home page. The blog design should bring the best content upfront.<\/p>\n This is how Cafedelites.com<\/a> invites readers to explore delicious recipes:<\/p>\n <\/p>\n <\/p>\n <\/p>\n No additional customization <\/strong><\/p>\n Instead of adding customizations to the blog design, you can focus on creating compelling content. Your blog will thus take its uniqueness from the content you produce. You\u2019ll have the possibility to better communicate with your readers, by getting them more involved with your content (text, images, videos) \u2013 no complicated design will result in sharper attention to the content.<\/p>\n <\/p>\n <\/p>\n Jungalow.com<\/a> is a blog that makes good use of visuals and color. The bio section is visible on the very front page, and it fits perfectly in the images mix, due to the photo.<\/p>\n <\/p>\n <\/p>\n <\/p>\n Witanddelight.com<\/a> is perfectly adapted to scanning behavior. White space spreads onto the blog pages, giving you \u2013 the reader \u2013 time to enjoy reading, wit and delight.<\/p>\n <\/p>\n <\/p>\n Quintessenceblog.com<\/a> is special. It\u2019s special in having a background image that makes the blog stand out. Moreover, the color scheme includes blue and orange, in a wise combination of complementary colors.<\/p>\n <\/p>\n <\/p>\n Camillestyles.com<\/a> has a top-notch design, in that it uses both a grid-style layout and beautiful fonts (Georgia, serif).<\/p>\n <\/p>\n <\/p>\n <\/p>\n Tipswithtykes.com<\/a> uses much active negative space that plays a major role in better emphasizing visuals (colourful images, in this case).<\/p>\n <\/p>\n <\/p>\n Mariakilliam.com<\/a> manages to bring images and color to the front. Visuals have the role to catch readers\u2019 attention and gain their engagement from the very first visit to the blog.<\/p>\n <\/p>\n <\/p>\n <\/p>\n Retouchist.net<\/a> is a blog that wonderfully uses the grid-style layout. Moreover, the social media icons \u201caccompany\u201d users all throughout articles, while they are reading them.<\/p>\n <\/p>\n <\/p>\n <\/p>\n Davidduchemin.com<\/a> has an unusual blog header, made up of images and links to other websites. This blog impresses through originality, both in design and in content.<\/p>\n <\/p>\n <\/p>\n <\/p>\n Contrastly.com<\/a> has a subscription form that\u2019s easy to find and fill in, once you\u2019ve decided to join the readers\u2019 community.<\/p>\n <\/p>\n <\/p>\nBest practices for blog design<\/h2>\n
Blog Design – Header<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/solopreneur.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/knowtechie.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/social-triggers.png\")
<\/p>\nStatic homepage\/homepage featuring latest posts<\/h3>\n
\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/latest-posts.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/static-page.png\")
<\/p>\n\n
\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/article-content-viewed.png\")
<\/p>\n\n
Sprinkle images throughout the blog, for slowing down the scanning effect<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/image-retention.png\")
<\/p>\nUse faces as visual cues<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/faces-visual-cues.png\")
<\/p>\nBlog design: to add a background image or not to add a background image<\/h3>\n
\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/sidehustlenation.png\")
<\/p>\nUseful for blog design: add a reading time estimate\/progress bar<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/progress-bar-blog.png\")
<\/p>\n<\/h3>\n
Recommended font dimensions for the regular text in blog design<\/h3>\n
Optimal character spacing in blog design<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/kerning.png\")
<\/p>\nGolden ratio typography<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/golden-ratio-typography.png\")
<\/p>\nOptimal paragraph length<\/h3>\n
Left-align text (Do not set text to justify)<\/h3>\n
How much white space to use in your blog design?<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/themealings.png\")
<\/p>\nSocial Buttons in blog design<\/h3>\n
\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/placement-social-buttons.png\")
<\/p>\nMake it easy to subscribe<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/lilistravelplans.png\")
<\/p>\nStick to clean design, avoid clutter<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/clean-blog-design.png\")
<\/p>\n<\/h3>\n
Navigation style \u2013 keep the menu simple<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/blog-navigation.png\")
<\/p>\nRecommended blog layout<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/recommended-blog-layout.png\")
<\/p>\n<\/h2>\n
Details to induce certain effects upon readers<\/h2>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/legalnomads.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/popular-pillar-content.png\")
<\/p>\n10 blogs to take as your models<\/h2>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/jungalow.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/witanddelight.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/quintessence.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/camillestyles.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/tipswithtykes.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/mariakillam.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/retouchist.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/davidduchemin.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/contrastly.png\")
<\/p>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/101cookbooks.png\")
<\/p>\n