Advertisement

Blogging

12 Blog Layout Examples (and Best Practices) in 2022: Blog Designs

That will help you land on the fitting weblog format (that’ll entice and retain extra readers), we’re going to interrupt down essentially the most essential weblog format finest practices and spotlight 12 of essentially the most spectacular weblog format examples from real-life web sites, blogs and publications—so that you could take inspiration from one of the best when designing your personal weblog format.

By now, you’ve most likely already began a weblog of your personal. You’re right here for some inspiration (and recommendation) on developing with the absolute best weblog format that’ll create an awesome expertise to your readers. And whereas writing nice content material and driving in site visitors are two of the highest concerns for bloggers, one facet you could not have put as a lot thought into (but) is the general design and format of your weblog.

Those that’ve already began running a blog most likely selected a WordPress theme initially and allowed the final format of that theme decide your weblog’s format… which is comprehensible (and what I did for a number of years right here on my weblog). Selecting an awesome theme is one option to guarantee that your weblog appears nice, but it surely shouldn’t be the one issue in figuring out your weblog format.

Whether or not you’re simply beginning a weblog—or occupied with redesigning your web site, I’m going to indicate you many of one of the best weblog format examples, in addition to important weblog format finest practices you must comply with in designing your weblog.

12 Blog Layout Examples (and Best Practices to Observe) in 2022

Table of Contents

  • Fonts You Can Read
  • Organize Your Blog Layout for Easier Access
  • Design Your Blog Posts to Be Easily Scannable
  • Utilize High-Quality Images (or Graphics)
  • Consider Page Load Time
  • Include Compelling CTAs (Calls to Action)
  • The Fine Line Between Creative and Cluttered
  • Encourage Engagement
  • Brand Your Blog Layout
  • Make Your Blog Layout Relate to Your Audience
  • Blog Layout Examples to Learn From When Designing Your Blog
  • Disclosure: Please be aware that a number of the hyperlinks beneath are affiliate hyperlinks and at no further price to you, I’ll earn a fee. Know that I solely advocate services I’ve personally used and stand behind. While you use one in every of my affiliate hyperlinks, the corporate compensates me, which helps me run this weblog and hold all of my in-depth content material freed from cost for readers (such as you).

    Why Does Your Blog Layout Matter?

    Why achieve this many stress about their weblog format and design? Why does it actually matter what your weblog appears like—or the way it’s designed?

    Advertisement

    Properly for one, individuals are very visible in nature. With out giving it a lot thought, the overwhelming majority of your readers are going to immediately make judgements about your weblog the second they land on it.

    In case your weblog format appears unprofessional, outdated, complicated, or unappealing—there’s likelihood they’re going to query your credibility (or just depart).

    Listed here are three essential explanation why you must care about your weblog format and general web site design.

    • Excessive Bounce Fee: A high bounce rate is when readers come to your weblog and depart in a short time. They don’t spend any actual time in your weblog, they usually don’t click on any of your inner hyperlinks. Whereas a excessive bounce fee shouldn’t be solely dependent in your weblog format, it’s undoubtedly an element. Have you ever ever come throughout a weblog publish that regarded prefer it was from the early 90s? Did you belief the content material? Have you ever opened a weblog publish solely to find the textual content was nearly unattainable to learn and there was an awesome quantity of adverts and popups? What do you do with these websites? Likelihood is, you press the again button and attempt to discover a higher supply. Chances are you’ll even marvel why Google ranked that web site effectively in the primary place. For this reason your weblog format issues. You need your weblog to be welcoming to your guests.
    • Low Fee of Return Readers: Let’s say somebody clicks a hyperlink to your weblog publish. Your article has good content material and solutions their questions. Nevertheless, they felt that your weblog was poorly designed and tough to truly devour data on. They most likely gained’t be returning to your weblog in the longer term. That’s an issue, since you need returning guests. Individuals who come again to your weblog will start to really feel a loyalty to you and your content material. This loyal group of followers is extra more likely to promote your weblog content material to their networks—and join your e-mail e-newsletter. That is essentially the most engaged group of individuals you can hope to have as a blogger.
    • Bother Navigating Your Blog: Your weblog format ought to be straightforward to navigate. Your guests gained’t spend lots of time decoding your web site, simply to seek out out who you’re or what your web site is all about. They need to have the ability to simply find essential hyperlinks and develop a primary understanding of what your weblog has to supply with little or no effort.

    Now that we’ve outlined three compelling explanation why you must create a really considerate weblog format, let’s dive in and break down which weblog format components are most essential.

    Advertisement

    10 Blog Layout Best Practices (to Retain Extra Readers) in 2022

    Although you’ll need your personal weblog to have a novel look inside your area of interest, there are undoubtedly some frequent finest practices that every one nice weblog layouts and designs share in frequent.

    (*12*)

    Listed here are ten finest practices you need to use in making a profitable weblog format in the present day.

    1. Fonts You Can Learn

    Selecting the best fonts to make use of throughout your weblog sounds comparatively easy, but it surely’s crucial to your general weblog format.

    Your font decisions shouldn’t detract out of your content material—and must be straightforward to learn to your viewers.

    What Font Measurement Ought to You Use?

    • Font sizes which can be too small might be tough to learn
    • Medium to bigger font sizes are preferable for on-line studying
    • That is much more essential for individuals who have a tough time seeing smaller fonts

    Usually, you need to have your physique textual content font measurement set at a minimal of 16px.

    Chances are you’ll be utilizing a font that’s naturally somewhat bit larger, and subsequently you don’t must go bigger than 16px. Use your finest judgment on this determination (primarily based on who your readers are), however don’t be afraid to solicit some suggestions from actual folks in making this determination.

    Which Fonts Ought to You Use?

    I like to recommend sticking to comparatively primary fonts, not less than for the physique textual content (which individuals might be studying most). Easy fonts aren’t as visually thrilling as some, however using a easy font might be infinitely higher to your readers—and can encourage them to maintain progressing by your content material, relatively than flip round and run for the hills.

    A very good rule of thumb, is to keep away from any font that looks like a novelty. Strive to decide on fonts which can be straightforward to learn and can age effectively. Clear, easy and legible is the objective. Listed here are some examples of fonts that’d work effectively for almost any good weblog format.

    Arial is a really reliable font that gained’t steer you flawed. There’s nothing that actually stands out about this font, however that may be a bonus with regards to legibility in your weblog format.

    Arial Font Screenshot (Good Fonts to Use in Your Blog Layout)

    EB Garamond is one other easy and straightforward to learn font that I’ve used many occasions.

    EB Garabond Font Screenshot (Good Fonts to Use in Your Blog Design)

    Josefin Slab is a barely extra stylized different to Arial, however nonetheless retains an easy-to-read contact. My weblog’s physique textual content now makes use of a customized font lately, but it surely’s most much like Josefin Slab.

    Josefin Slab Font Screenshot (Good Fonts to Use in Your Blog Design)

    Georgia is likely one of the most generally used fonts for bloggers.

    Georgia Font Screenshot (Good Fonts to Use in Your Blog Design)

    Helvetica Neue has been round for the reason that early Eighties and comes in nearly 100 totally different types.

    Helvetica Neue Font Screenshot (Good Fonts to Use in Your Blog Design)

    In case you go together with one in every of these 5 font sorts to your physique textual content, you’ll be in nice form (and your readers will thanks for it).

    Which Fonts Ought to You Keep away from?

    Now, to ensure you don’t select a font that’ll scare your readers, let’s take a look at a number of examples of fonts you shouldn’t use in your weblog format.

    Zapfino may look cool, however it might be very tough to learn as a major font.

    Zapfino Font Screenshot (Bad Fonts to Use in Your Blog Design)

    At one time, Comedian Sans MS was a very fashionable font. Within the Nineteen Nineties this font was in every single place. In case you had been to make use of this font in the present day as your weblog’s textual content you would definitely risk losing credibility. The hatred for Comedian Sans is so actual that individuals have written whole weblog posts specifically talking about why people hate it so much.

    Comic Sans Font Screenshot (Bad Fonts to Use in Your Blog Design)

    Papyrus is one other font that will get a foul rep. Like Comedian Sans, this font was a taking pictures star. It was well-liked for a time, however wouldn’t be thought-about a reputable weblog font in the present day.

    Papyrus Font Screenshot (Bad Fonts to Use in Your Blog Design)

    Whilst you don’t want to decide on one of many three fonts I really helpful above to be used in your weblog format, I extremely advocate attempting to choose a font that’s legible each for desktop readers and cellular machine customers—as a result of if readers can’t really learn your weblog posts, they’ll be gone in no time.

    2. Manage Your Blog Layout for Simpler Entry

    Organize Your Blog Content for Easier Accessibility (Image of Design Layout)

    In case you’ve already spent a while writing useful blog content, then you may have realized it can be hard to keep everything organized within an individual article (which is why I always start with a blog post outline), let alone from the macro perspective of your blog as a whole.

    From the broader organizational standpoint, you may have written blog posts in a variety of different categories—and you need a way to separate them. Another issue, is that if you’ve written some really great posts in the past, they’re now naturally sitting at the bottom of your blog feed… where nobody will ever find them.

    Someone visiting your blog for the first time today, may not know the easiest way to navigate through your posts. And that’s a shame, because you don’t want readers to miss out on finding your best content.

    There are a lot of different ways to organize your blog content, but I’m going to give you a few ideas to help you start the process now. You can mix and match to find the best solution for your blog.

    Tip #1: Pick a Defined Niche For Your Blog

    One of the first things I recommend to both new and experienced bloggers alike, is to try and follow a somewhat narrow niche for your blog. That doesn’t mean that you have to write about the same thing every day, but there should be an overarching theme that you’re covering on your blog. An umbrella under which everything nicely sits within.

    Sometimes bloggers want to write about what’s on their mind that day. And this can work in small doses—or if you’re running a more personal story that you don’t intend on ever monetizing. But for those who are hoping to make money blogging in a consistent manner, it’s a good idea to pick a clear focus that your blog can eventually become known for. Why?

    • For one, it’s a lot easier to rank your content in Google search results when your blog has a clear direction
    • Another reason to pick a defined niche, is so you can present a clear, consistent message to your blog readers
    • A niche also makes it easier for people to search your site.

    If your site tries to cover too many topics at ones, it’s difficult to create a blog layout that connects all the main themes of your content together in any cohesive manner. Your visitors won’t know what to expect, and you’ll struggle to come up with a feasible way to direct them where they want to be.

    Here’s an example of a blogger that’s chosen a very clear niche for her content. Strength and Sunshine is a weblog that shares recipes and details about vegan, gluten and allergy-free meals (her description sits proper in beneath the emblem).

    Strength and Sunshine Blog Homepage (Categories Screenshot) and Example

    Each hyperlink in the highest menu of her weblog format, is said to this particular weight loss program—and her readers can anticipate that each recipe shared (and each weblog publish written) can have one thing to do with gluten-free and allergy-friendly cooking.

    Tip #2: Use a “Begin Right here” Hyperlink

    Many bloggers like to make use of a hyperlink in their predominant navigation menu titled one thing like “Begin Right here.” It’s usually much like writing an About Me web page, but it surely goes into better element and normally gives clear directions about what readers ought to do subsequent. It’s a great way to introduce new guests to your weblog and share what your content material is all about.

    Right here’s a listing of some issues you must contemplate including to your “Begin Right here” web page:

    • An introduction concerning the blogger (or weblog)
    • Glossary of frequent phrases used on the weblog
    • Hyperlinks to your finest and hottest content material
    • Buying hyperlinks in case your weblog sells digital or bodily merchandise
    • Name to motion like signing up to your weblog’s e-newsletter

    Now, let’s take a look at an awesome instance of this in motion. Clean Mama is a blogger who teaches folks learn how to hold their houses clear (and is a really intelligent weblog identify concept, too).

    Clean Mama Homepage Screenshot (Menu Example)

    She has a “Begin Right here” part on her weblog that does job of figuring out a few of her weblog’s most central concepts.

    Clean Mama About the Author Screenshot

    First, she welcomes her readers and explains 3 ways her weblog goes to assist them proper off the bat:

    • She’ll enable you to make your own home prepared for friends
    • She’ll enable you to discover some grace even in the issues you need to do daily
    • She’ll enable you to not really feel so overwhelmed by your own home chores

    That’s expanded upon in somewhat mini-manifesto proper right here:

    Clean Mama Compelling Essay to New Readers (Screenshot)

    The following part she consists of, elaborates on the thought of feeling overwhelmed—and affirms that she has options to assist. Anybody studying this far will doubtless be fairly hooked into her methodologies.

    She then goes on to clarify a few of her methods for protecting your own home clear with out spending hours doing it (providing up tons of free worth to new readers).

    Clean Mama Content Organization Example (Screenshot of Categories)

    Lastly, she consists of some useful hyperlinks (and clear subsequent steps for guests), like a procuring hyperlink and a round-up of her finest cleansing ideas.

    Utilizing a “Begin Right here” web page is usually a very useful gizmo for organizing your content material and simply directing your readers the place you need them to go.

    Tip #3: Create a Studying Middle

    In case you’ve already created a good quantity of content material, a studying middle—or detailed useful resource web page like my “All the pieces about running a blog” web page—is one other option to hold your content material organized.

    A studying middle is a set of classes organized in one part (or drop-down menu). The concept is for readers to have the ability to rapidly discover solutions to frequent questions in your weblog. Studying facilities are sometimes organized by media sorts like movies, weblog posts and podcasts, in addition to by normal matters.

    Sensible Passive Earnings is a weblog run by private finance blogger, Pat Flynn, for aspiring on-line entrepreneurs. They use a really well-designed drop-down menu that includes a studying middle for simpler entry to frequent matters they cowl on the weblog. A number of the matters they listing embody:

    All of those matters match beneath the umbrella of on-line entrepreneurship, however every one is a little more particular. You will have landed on their weblog to be taught extra about affiliate internet marketing, they usually’ve made it simpler so that you can entry that data.

    Smart Passive Income Homepage Layout Screenshot (Learning Center Menu)

    In case you click on on the affiliate internet marketing menu merchandise, it navigates you to a curated touchdown web page that breaks down all of their high sources on the topic:

    Smart Passive Income Learning Center (Affiliate Marketing) Screenshot Landing Page

    Right here you’re capable of finding a wide range of useful details about affiliate internet marketing, together with learn how to go about discovering and becoming a member of one of the best affiliate packages for bloggers. Right here, they hyperlink to their finest guides to affiliate internet marketing, programs they’ve created, further articles, instruments and podcast episodes associated to topic. All of that is placed on one single web page for straightforward entry to readers.

    SPI Landing Page (Blog Layout Example) for Affiliate Marketing Topics

    A studying middle is finest suited to a weblog that already gives lots of data, however desires to offer fast, easy accessibility to particular classes that readers are already coming to your web site for. And in that context, it actually provides lots of worth to your weblog format in phrases of making a extra reader-friendly expertise.

    3. Design Your Blog Posts to be Simply Scannable

    Prefer it or not, writing for the Web could be very totally different than most different types of writing.

    Design Your Blog Posts to Be Easily Scannable (Computer Image)

    It’s very totally different when in comparison with verbose tutorial writing or revealed books. When folks learn on the Web, they (most frequently) need weblog posts which can be straightforward to scan and rapidly digest the important thing factors they’re looking for solutions about.

    That’s to not say individuals are unwilling to learn lengthy weblog posts. Most individuals will learn long-form articles from begin to end in the event that they’re extremely engaged in the subject material. Nevertheless, many individuals need to scan blog headlines to first determine if they want to read the article (or think they’ll be able to find answers to specific questions they have)—and often extend that scanning practice into how they read the content too.

    I go into this in much greater depth in my guide about how to write a blog post outline, but here are some quick tips for formatting your blog posts:

    • Write short sections
    • Avoid big blocks of text
    • Break up text with images and headers
    • Organize sections by headers and sub-headers
    • Use bullet points or numbers to break up long sections of text

    Let’s use this blog post right here as an example. Suppose I have a reader who came to my blog, looking for a very specific answer. Maybe they wanted to know what size font that I would recommend for their blog layout.

    My headers should make it very easy for that reader to scan the blog post, in order to find the answer quickly—plus there’s a navigational table of content running along the right side of this article (when viewing on desktop).

    For long blog posts, you can make it even easier by including a table of contents at the beginning of your blog post layouts—as I’ve done at the top here (and have a more stylized version for my guide about starting a blog too).

    Using a Table of Contents to Enhance Your Blog Layout and Make Content Scannable (Screenshot of Menu)

    Navigation is more important, the longer your blog content gets—so if you’re creating long-form content (like I do here on my blog), then you’ll want to go out of your way to make sure readers can quickly jump around throughout an article to more easily find what they’re looking for.

    4. Utilize High-Quality Images (or Graphics)

    Another mark of a great blog layout and design, is the use of high-quality images and graphics.

    Use High Quality Images and Graphics to Enhance Your Blog Design (Screenshot of Computer with Design Elements)

    If you’ve visited a site that has low-resolution images, or poorly made graphics, you know this can be a turn-off (or can lead you not to trust the site).

    If you’re not already convinced of the benefit to using quality images on your blog, here are some blogging statistics that might persuade you:

    • A blog post with an image gets 94% more views.
    • According to online marketing influencer Jeff Bullas, “In a web based retailer, prospects assume that the standard of a merchandise picture is extra essential than product-specific data (63%), an extended description (54%) and rankings and critiques (53%).” Take for instance, my roundup of Bluehost critiques.
    • When folks hear data, they often bear in mind 10% of the knowledge when requested three days later. If a picture is paired with the identical data, individuals are in a position to retain 65% of the knowledge after three days.
    • Simply 3% of bloggers add 10+ photos per article, however they’re 2.5x extra more likely to report “robust outcomes” than the common blogger. This statistic is somewhat more durable to decode, but it surely’s primarily saying that bloggers who publish 10+ photos per publish see higher outcomes than those that embody fewer photos. It is probably not pure to suit 10 photos into a brief weblog publish, but it surely’s suggesting that extra photos make your general weblog format extra interesting.

    This isn’t to say that top high quality textual content (written content material) is meaningless… as a result of that’s removed from true. Running a blog remains to be largely about what it’s all the time been—and that’s nonetheless primarily the written phrase, as a result of search engines like google like Google nonetheless “learn” content material by textual content.

    What these statistics do imply nonetheless, is that your photos matter as effectively—and high-quality photos & graphics will make your weblog format that rather more interesting, extra shareable and extra memorable to your readers.

    Let’s take a look at the well-known weblog Humans of New York. The tales that HONY shares are compelling each due to the written textual content and the visible photos. One with out the opposite wouldn’t have the identical lasting influence.

    Humans of New York Blog Layout Screenshot (Stories Using Images Example)

    Consider your photos and graphics as an integral a part of the story that you just’re telling. The upper the standard, the higher impression they’ll make in your weblog readers.

    5. Contemplate Web page Load Time

    Load time is one other crucial consideration with regards to your general weblog format.

    Page Load Speed (Screenshot of Load Test) in Blog Design

    As we simply talked about, together with visuals in your weblog format is extraordinarily essential. Nevertheless, in case your photos, clunky WordPress plugins or different slow-loading content material are clogging up your load time, then that’s a doubtlessly large downside.

    The reality is we’re fairly impatient—folks gained’t wait very lengthy for a web page to load. They could assume your web site isn’t working correctly, or they could simply not care sufficient to attend greater than a few seconds. Listed here are some statistics that present the actual want for quick web page load occasions:

    • 53% of your guests will depart your web site if it takes greater than 3 seconds to load
    • A one-second web page response delay reduces conversion by 7% (learn this information for extra on designing your web site with conversion rates in mind)
    • Web sites with a 1-3 second load time have a a lot decrease bounce fee likelihood than these with an extended load time

    One other good motive to maintain your load time in verify is your weblog’s general search engine optimisation profile. Load time is likely one of the key components that Google uses to determine its search engine results rankings. The sooner load time your weblog has, the higher likelihood it has of rating excessive in natural search outcomes.

    So how do you guarantee that your pages are loading rapidly? Listed here are some straightforward methods to assist optimize your load time.

    Check Your Web page Load Pace

    Step one in figuring out which modifications should be made along with your weblog format, is discovering what your present load velocity is. You need to use a free testing device like Google’s PageSpeed Insights to collect these figures:

    Google Page Speed Insights Tool (Screenshot) to See Page Load Time

    After working a take a look at with the Google PageSpeed Insights device, you’ll get a listing of actionable solutions on the place you’ll be able to trim down your web page load velocity.

    Take away Pointless Plugins

    Removing Unnecessary Plugins (to Increase Your Blog Speed) Screenshot of WordPress plugins

    In case you’re utilizing WordPress to your self-hosted weblog then you definitely’re most likely conversant in plugins.

    Plugins are extraordinarily helpful instruments that enable you to do extra along with your weblog—and there are a lot of plugins I couldn’t dwell with out. The draw back of (some) plugins although, is that they will contribute to slower load occasions in the event that they inject lots of code into your web site, in order to carry out the extra performance you need.

    One option to fight this, is to eliminate plugins which can be redundant or now not helpful to the core capabilities of your weblog. You will have put in a number of plugins that do the identical job with out realizing it, too. If there are plugins that now not assist develop your weblog or higher monetize your content material, then take a while to think about which plugins you will get by with out.

    Select a Quicker Internet hosting Plan

    Dreamhost Fast Web Hosting to Power Your Blog Quicker

    Your weblog’s internet hosting plan could make an enormous distinction with regards to the load time of your pages and posts. It might be tempting to choose from absolutely the most cost-effective internet hosting plans once you’re simply getting began on a good price range—and that’s okay for a short time—however they usually aren’t your best option as your weblog grows in time. You’ll need to improve to one thing like one in every of these managed WordPress internet hosting plans as soon as your price range permits.

    You possibly can be taught much more about internet hosting from my information to shared internet hosting and in my Q&A about how a lot does hosting price?—however with regards to internet hosting suggestions, my high three are:

    • Dreamhost (and their quick $2.59/mo plan)
    • Bluehost (and their fast $5.45/mo alternative plus plan)
    • SiteGround (and their speedy $5.95/mo plan)

    All three of those suggestions carry out effectively on impartial velocity checks, however Dreamhost normally checks the quickest in phrases of common web page load velocity (they usually’re essentially the most budget-friendly too). Every of those internet hosting corporations provide inexpensive plans for bloggers, full of lots of options so you’ll be able to’t go flawed when signing up with one—and I’ve used all three over time.

    Select a Extra Minimalist Blog Layout (or WordPress Theme)

    One of many causes I hold my very own weblog format and design so easy, is to scale back the web page load time it takes for readers to load my content material.

    Chances are you’ll not need to hold issues fairly as minimalist as I do right here, however you’ll be able to assist your weblog format so much in phrases of load velocity by selecting a WordPress theme that gained’t sluggish your web site down a lot.

    The three WordPress themes I like to recommend that run in a short time and have solely a lightweight quantity of code loading in their default settings embody:

    • GeneratePress Pro WordPress Theme: I now use a custom-made model of this extremely quick, light-weight theme right here on my weblog in the present day (it’s what I redesigned my website with) they usually provide a free model to begin with.
    • Astra WordPress Theme: This nice (additionally free) theme is nearly as minimalist and fast as GeneratePress, and in addition has a Professional model you’ll be able to ultimately improve to when you want further performance.
    • Elementor Web page Builder: If you would like a WordPress theme with a visible web page builder (which I used for a few years), the one one value contemplating in the present day—from a web page load velocity perspective—is Elementor and their Hello Theme which pairs very properly with it.

    Putting in the Best WordPress Efficiency Plugins

    Even after selecting a light-weight WordPress theme to energy your weblog, you will get lots of further velocity and optimization features out of putting in the fitting efficiency plugins. Sadly, you’ll have to purchase a efficiency plugin to your weblog, as there simply aren’t any actually useful free choices on the market (that don’t have drawbacks outweighing their advantages).

    I exploit each of those efficiency plugins on my weblog in the present day, they usually’re all you’ll want:

    • Perfmatters ($24.95/yr): That is by far my favourite efficiency plugin, as a result of it’s been constructed particularly with the overarching objective of being as light-weight, quick and intuitive as potential. To that finish, they’ve completed a superb job. After putting in it right here on my weblog and utilizing their default configurations, I noticed a right away velocity enhance in my web page load occasions—and there’s so much you’ll be able to tinker with to get extra features . Plus, they provide a 30 day a reimbursement assure in the occasion you resolve the plugin isn’t impacting your velocity as a lot as you’d hoped for.
    • WP Rocket ($49/yr): As a pleasant complement to Perfmatters, WP Rocket comes into play as an awesome caching device (which creates a lot sooner load occasions) and does a incredible job of optimizing and decreasing the burden of the HTML, CSS and JS information your weblog masses every time a reader hits a web page. WP Rocket additionally gives a no questions requested a reimbursement assure—simply you’ll want to attain out inside 14 days of your buy if issues aren’t going based on plan they usually’ll refund you.

    There are much more issues you are able to do to slim down your weblog format’s web page load time (the topic for a later date), however placing these easy finest practices and instruments into place—is a superb basis. Hold these varieties of things in thoughts too, for those who’re contemplating shopping for a weblog that’s already been across the block.

    6. Embody Compelling CTAs (Calls to Motion)

    You’ve most likely heard it earlier than, however for those who’re not completely conversant in the time period, let me take a second to clarify what a name to motion actually is.

    See this large header and kind close to the highest of my homepage? That’s a call to action—and it’s asking readers to join my email list (if they’re interested in learning how to start a blog and grow a side business):

    Call to Action Example (ryrob Homepage Screenshot)

    Suppose you’ve started a blog about protecting marine life. We’ll imagine you’ve written a stellar blog post about the beauty of whales, their importance in the ecosystem and the dangers they face today.

    As people read that blog post, what do you want them to do? What action are you hoping they’ll take next?

    Here are some potential actions you’ll likely hope your reader will take:

    • Donate money to save the whales
    • Sign up for your newsletter
    • Go to other important articles on your blog for further reading

    So how do you drive more readers toward an intended outcome with your blog layout? To help direct people, you need to frequently employ what’s known as a “Call to Action.” If you haven’t included a call to action within your blog post yet, many people will read it, leave your page and give it very little thought later.

    It’s not that readers don’t care about whales, it’s that they weren’t given anything tangible to do next. You’ve alerted them to a problem, but you haven’t offered them any solutions.

    It’s your job to make it super simple to help whales. Your first step as a blogger, is to expose an issue and the next is to offer really easy solutions to help with that problem.

    Here’s how you can include CTAs that help further your cause:

    • Solution 1: Donate to organizations that help whales. Include links to several organizations that you support. Showing people exactly which organizations you recommend cuts down on their research time. They don’t have to spend additional time searching for reputable places to donate when you’ve presented them with organizations right on your page.
    • Solution 2: Join your email list. Tell your blog’s visitors that they can learn more about helping sea creatures by signing up for your email newsletter. The more they hear about sea animals, the more likely they will want to help—plus, you can give more clear directions on how to support the right organizations over email too.
    • Solution 3: Include links to other blog posts you’ve written. Another way you can use a CTA, is to include links to other blog posts you’ve written. Maybe one of the things you mentioned in your article about whales is the danger of plastic pollution. You can include a link to another article you’ve written about how to reduce plastic waste.

    Now let’s look at a real-life example. The Wilderness Society is a corporation that strives to guard public wildernesses in the USA. Take a look at this huge name to motion (to learn a message from their president) proper on the homepage:

    The Wilderness Society Call to Action Example (Homepage) CTA Screenshot

    Right here’s how they’ve included CTAs inside their top-level menu that’s loaded throughout all of the pages on their web site:

    Wilderness Society Screenshot (Menu Call to Action Button Example)

    On the high of their pages inside their menu, they embody a number of methods to become involved with the safety of untamed lands:

    • Key Points
    • Information
    • Get Concerned
    • Be a part of
    • Donate

    These hyperlinks are straightforward to entry and reply essentially the most basic questions behind their mission. The “be a part of” and “donate” buttons are straightforward to establish and perceive.

    In addition they embody CTAs immediately inside their weblog posts. In the course of one weblog publish, they included a hyperlink to an article with extra data on an identical, carefully associated subject.

    Blog Layout with Inline Call to Action (Example Screenshot)

    On the finish of the article, they embody hyperlinks to further articles associated to caring for wild lands, adopted by a straightforward manner to join their e-newsletter:

    Email Newsletter Sign Up Call to Action (Screenshot)

    Every one in every of these CTAs helps additional their running a blog targets—and makes it a lot simpler for readers to truly do one thing with the knowledge they’re studying.

    7. The High quality Line Between Artistic and Cluttered

    Not each weblog format or design must be as minimalist as mine. Right here, we’re going to evaluation a number of different weblog layouts which can be very various in their design selections—illustrating you can be extraordinarily inventive with out forfeiting ease of use and performance.

    Creative vs Cluttered Blog Design (Example)

    Nevertheless, it ought to be identified that there’s a really advantageous line between creativity and chaos. In case your weblog readers can’t discover your content material simply (or really feel immediately overwhelmed by the quantity of issues which can be occurring along with your weblog format), then your web site isn’t performing at its highest potential.

    Listed here are a number of particular components that may distract your readers from consuming your content material:

    Too Many Advertisements

    Having well-placed commercials in your weblog might be an effective way to increase your blog revenue. On the other hand, a blog that’s lit up with ads blinking in the header, footer, sidebar and in the middle of your content—can be extremely distracting. I can tell you that I’ve personally left many blogs without reading a word of content for this exact reason, and it’s a major reason why I removed ads from my own blog this year.

    People are coming to your blog primarily to solve a problem they have, by searching for answers in your content. If there are too many ads muddling up your articles, you run the risk of looking like a spam site that’s hiding answers from readers for just long enough to get some extra ad impressions, instead of being a genuinely useful, reputable source of information.

    A Messy Sidebar

    There are certainly pros and cons when it comes to using your blog sidebar. Some people recommend not having one at all, while others say that it can be very helpful for navigation and tastefully promoting your blog content.

    I tend to fall on the side of not utilizing much of a sidebar (aside from a table of contents with particularly lengthy articles), and I intentionally left it out of my new blog’s recent redesign. If you do choose to include a sidebar though, try to keep it as clean, simple and useful as possible.

    Try to include only the most vital information that you want readers to know about and take action on. For everything else, put it in the footer.

    No Use of Negative Space

    Earlier, we talked about about the ways in which I thoughtfully utilize white space on my blog layout. Some bloggers feel the need to have text or images covering every inch of real estate on their blogs. My advice is not to be afraid of leaving some comfortable spacing throughout your blog layout, as it can often be more calming to readers than a design that’s jam-packed with elements.

    Negative space also allows people to more easily locate important information on your blog. It gives you an opportunity to highlight the most essential features (or articles) on your blog.

    What a Clean Blog Layout Looks Like

    Now let’s look at a few real examples of blog layouts that have done an amazing job designing a look that’s unique, yet also very clean and easy to use.

    Maptia is a journey and storytelling weblog with a mission to assist folks be taught extra concerning the world and develop in empathy for folks in different locations and cultures. Right here’s a take a look at their weblog format immediately on the homepage:

    Maptia Blog Layout Homepage Example (Clean and Minimalist)

    On the high of their pages, they’ve a number of key hyperlinks adopted by a visually fascinating and well-designed header with three further CTAs which can be all related to their goal readers.

    Beneath that they’ve a featured story. Discover all of the destructive house round this stuff? I’d additionally level out their use of straightforward to learn font and enormous high-quality photos.

    In case you can’t inform, I actually love their weblog format, particularly for the journey running a blog and storytelling area of interest.

    Right here’s one other stunning, inventive and easy weblog format instance from a journey weblog known as Rojo Cangrejo. On the high of their weblog, there’s an enormous sliding picture with hyperlinks. Despite the fact that the entire high of the web page is roofed, the textual content remains to be straightforward to learn (the white textual content on the big picture is simple to see too):

    Rojo Cangrejo Simple, Minimalist Layout Example (Screenshot)

    In case you scroll down, you’ll be able to see that they use quite a lot of white house, too.

    The Use of Negative Space in Crafting a Smart Layout for Your Blog (Screenshot and Example)

    They proceed with using destructive house for added story hyperlinks towards the underside of their pages too, which makes for a really good and cohesive expertise for readers.

    Each of those weblog layouts are distinctive to themselves, however they do a incredible job of protecting their content material accessible and really visually interesting on the identical time—which isn’t any straightforward feat.

    8. Encourage Engagement

    Engagement is king with regards to Web content material. That is true each on social media and with running a blog. As you’ll be able to see throughout my weblog right here, I’ve many articles which have a number of hundred feedback (and some with over 1,000+ feedback like my roundup of the best business ideas to pursue this year):

    Encourage Engagement on Your Blog (for Better Interaction)

    There are tons of guides about achieving greater engagement in order to better promote your blog, but in this post we’re examining this from a blog layout perspective. What can you do to encourage engagement as part of your own blog layout?

    Here are a few ideas for ways to make your target audience feel like they’re interacting with your content (and a part of the journey with you).

    Show the Comment Count at the Top of Your Blog Post Layout

    One of the best types of engagement for bloggers, is when readers comment on your blog posts. This is a perfect window into the thoughts your visitors are having, and an easy way to build a relationship with many of them. Plus, it helps establish more trust from readers who can also read your genuine replies in the comments section.

    A great way to help readers become more interested in commenting, is by showcasing a comment count at the beginning of your blog posts. The more comments people have left, the more others will want to read the comments and potentially submit one themselves. I use this method on my own blog which you can see here on a recent blog income report:

    Comment Count in Your Blog Post Layout (to Encourage Engagement)

    Display a “Like” Button on Your Post

    Another way to increase engagement on your blog posts, is to display a like button—whether or not it’s actually connected to a social media platform like Facebook.

    This is very reminiscent of social media, and it gives people a quick way to show that they like what you’ve written.

    Include Social Media Share Buttons

    Make it easy for your visitors to share your content by including social media share buttons. I like to use the Click to Tweet hyperlink generator, so readers can carry particular quotes straight from my weblog posts and share them proper on their Twitter profiles (a social community the place I uncover and join with plenty of my readers).

    Click to Tweet Twitter Share Button to Increase Blog Engagement (Screenshot)

    Ask Readers if the Content material You’re Sharing Has Helped Them

    A standard option to improve engagement along with your readers, is by asking questions immediately in your weblog posts. Asking easy questions or opening a chance for them to ask questions is an effective way to create conversations with extra of your readers.

    You possibly can take this one step additional and make it an integral a part of your weblog format, too. A variety of on-line assist facilities embody a button on the backside of their content material, asking if an article was useful.

    Right here’s an instance from a Google tutorial:

    Ask Questions to Engage Your Blog Readers (Screenshot of Helpful)

    In case you select the no response, they’ll immediate you to say what wasn’t useful concerning the expertise:

    Screenshot of Google Feedback Widget (Example)

    In case you’re creating weblog posts particularly designed to assist folks with a particular job, or reply a transparent query, this may very well be a really savvy option to get rapid suggestions in your content material.

    In the end, it begins a dialog that permits your readers to inform you if one thing is useful or not. People who take the time to offer you a solution will present you what could also be missing out of your tutorial—and also you’ll (hopefully) obtain some reward there too.

    9. Model Your Blog Layout

    Your advertising 101 class will inform you that branding is an important a part of creating lasting, long-term success. And it’s true, branding might help set you other than the competitors and makes you extra recognizable to your prospects (and prospects) throughout many mediums and metrics.

    Branding Your Blog (Laptop with Stickers) Example

    As you’re designing your personal weblog format, search for alternatives to model your web site as being in some way distinctive. Your whole weblog ought to be cohesive, and every web page (or publish) ought to match the feel and appear of remainder of your weblog. For instance, you wouldn’t need your homepage to be bland after which different pages to be in vibrant technicolor. Persist with a theme that is smart for you.

    Now, let’s undergo a number of the ways in which you need to use branding to make your weblog format that a lot better.

    Outline Your Message (and Character)

    You have got a definite character and so ought to your weblog.

    • What components of you do you need to come out in your weblog format?
    • Are you drawn to vivid colours or monochromatic themes?
    • Are you a photographer that desires to make use of lots of photos in your design?
    • Perhaps you’re a designer that would use your weblog format as a chance to showcase your graphics?
    • In case you’re a author, take your format as a option to spotlight your model and tone.

    Take into consideration what components of it’s essential to be included as a core characteristic of your weblog format, and carry that concept all through your web site’s design.

    Select Your Branding Colours

    Shade is a really tangible option to model your weblog and select a particular temper for the location. For my weblog, I exploit a number of particular shades of blue right here. This colour scheme is carried all through my weblog and in the graphics that I exploit for my weblog publish header photos, too.

    Ryan Robinson Blog Homepage (Colors for Branding) Example and Screenshot

    There are lots of theories about using colour and the way folks work together with it, however I selected to lean on shares of blue largely out of private choice for the colour—and the very cool, calm, relatable sense that I really feel it conveys to my readers.

    • Some folks ascribe emotions to after they view sure colours.
    • Some colours could put folks comfy, whereas others could make them uncomfortable.

    You possibly can even search for color charts to find out what sort of vibe you need your weblog’s model to exhibit. For instance, inexperienced is commonly related to progress and prosperity, whereas purple is typically linked to vitality and keenness.

    Greater than the colour you select, the way in which you implement it, is what issues most. Select colours that complement one another and attempt to keep a constant colour scheme all through your weblog format, as to not confuse your common readers. It will enable you to develop your branding technique and develop into way more memorable over the long-haul.

    Ignyte is a advertising agency primarily based out of San Diego, California. Whereas the core perform of their web site is to drive new enterprise (as all good small business website designs ought to), additionally they have a weblog element to their web site. They use a shade of purple in a really distinctive manner all through their web site. The outcomes are fairly visually charming:

    Ignyte Blog Color Scheme Example (Screenshot)

    Although it’s an uncommon alternative on the floor, their use of purple for textual content and pictures is memorable and visually interesting.

    Example of Branding with Colors on Your Blog (Ignyte Screenshot)

    Design a Fascinating Emblem for Your Blog

    Logos are part of our day by day life with out us even actually noticing it. See mine in the highest left nook of my weblog menu?

    With out wanting it up, strive to think about the emblem for Nike. Now take into consideration Apple merchandise, Coca Cola and Disney. All of us roughly know what these logos seem like, and might think about them immediately in our minds. Nike can model a black t-shirt with nothing greater than a tiny swoosh and nearly everybody who sees that shirt will know who made it.

    You see the golden arches and also you’re already craving french fries and a burger. Although the me in the present day, would a lot relatively channel that vitality towards one of many best vegan burgers in LA.

    That’s why a brand is so useful as part of your branding technique. You possibly can place your brand throughout your content material and over time, readers will routinely establish it as yours.

    Select a Typography

    We already mentioned the significance of legible fonts to your weblog, however when you’ve chosen your typography, use it persistently all through your weblog format.

    That is one other manner to make sure that you’re making a model and character to your weblog. There’s additionally the technique of pairing fonts that work effectively collectively. In case you use totally different fonts to your navigation menu, you need them to look good with the typography throughout the physique textual content of your weblog posts.

    For an introduction to pairing fonts, you’ll be able to take a look at Google’s font page. Each time you choose a font, it reveals you all of the types the font comes in—in addition to the fonts it pairs finest with. That is what it appears like:

    Google Fonts Screenshot (and Pairings Example)

    A few of your branding methods might be influenced by the viewers you’re attempting to achieve.

    And since that is such an enormous a part of your weblog format, I’ve devoted my whole subsequent finest follow to creating your weblog format particularly designed to enchantment effectively to your target market.

    10. Make Your Blog Layout Relate to Your Viewers

    My closing finest follow for designing a profitable weblog format, is to make format selections along with your viewers in thoughts—as a result of what appeals to 1 group of individuals, is probably not as relatable to a different.

    How to Design a Blog Structure for Your Audience (Computer Screenshot)

    In case you’re asking your self… do people still read blogs? Well, the answer is a resounding yes. Now, let’s run through a couple of layout examples that show how you’d make design decisions based on the distinctly different audiences you want to attract.

    The Blog Layout of a Fashion Site

    The best way to explain the difference in layout structures, is to show you real-life successful blog examples. Let’s look at a fashion blog first, which is a space that’s intensely visual. While the style and feel of your text is important, the primary reason most people visit fashion blogs is to see fashion. That’s why it makes sense that fashion blogs are very image-dominant.

    Not Jess Fashion is a style weblog created by NYC digital influencer Jessica Wang. Her weblog format consists of lots of full-size photos and shop-able posts. Her writing remains to be an essential facet of her running a blog, however the photos are what actually inform the story.

    Right here’s one in every of her current weblog posts, that includes a big right-aligned picture and clear “store the publish” hyperlinks subsequent to the picture, and close to the highest of her article.

    Not Jess Fashion Example (of Images and Text Posts)

    In her particular person weblog posts, she continues the development of charming, high-quality photos intermixed with shorter areas of textual content.

    For instance, in her weblog publish How to Celebrate International Women’s Day she consists of beautiful pictures of her daughters to specific the story of what it means to rejoice girls and to assist increase consciousness of a worldwide water scarcity downside. This mix of options works very effectively for the varieties of readers Jessica desires to achieve.

    Now that we’ve talked a few style weblog, how does it evaluate to a different weblog area of interest?

    Let’s take a look at a dramatically totally different instance to essentially showcase how various your weblog format might be—relying on the viewers you need to entice (and retain).

    The Blog Layout of a Finance Website

    Veering far-off from style, let’s take a look at one other well-liked running a blog area of interest: finance and enterprise. This time we’ll discover the distinguished publication, Forbes. Like the style weblog we highlighted above, Forbes usually leans closely on utilizing massive high-quality photos on the tops of their characteristic tales—giving it a really magazine-esque look.

    Forbes Feature Story Header Image (Screenshot) Example

    Along with top quality photos, additionally they often embody graphs (like this one concerning the improve of day by day customers on Zoom this yr):

    Graph of Zoom User Numbers Going Up (Screenshot)

    One main distinction between the style weblog and this text on Forbes, is that this piece has for much longer blocks of textual content. The pictures are additionally entrance loaded, with heavier picture use initially of the article and fewer as you actually dig into the core of the story.

    In each examples although, the textual content is centered on the web page—however in Forbes, the textual content blocks are a bit extra slim. It appears extra like a print journal, and is a format I comply with in some methods right here by myself weblog format.

    It’s also possible to discover an enormous distinction in colour schemes. The place Not Jess Trend tends to make use of vivid pastels and lotions, Forbes usually makes use of a darker colour scheme with a number of pops of daring colours when they need one thing to be emphasised.

    Which Blog Layout Fashion Ought to You Use?

    In case you’re model new to running a blog, you is probably not completely conversant in the likes and dislikes of your viewers. Chances are you’ll not even know who your preferrred viewers is but (and that’s okay).

    A great way to determine this out, is to take a look at different blogs inside your area of interest. Look by a dozen or so websites in your area of interest and see what stands out about their blogs.

    • Have they got an thrilling colour scheme?
    • Do you’re keen on their graphics or imagery?
    • Have they got an exceptionally user-friendly navigation menu?
    • Does their weblog format really feel daring or conservative?

    To assist jump-start your analysis, we’re going to dive into twelve weblog format examples beneath right here now—showcasing a number of of my favourite blogs which have outstanding designs and intelligent layouts to offer you some actual inspiration. We’re going to stroll by some very various weblog layouts and types that’ll present you it’s potential to tailor your weblog to any viewers.

    Keep in mind although… this isn’t a one-size-fits-all advice, as a result of there are a lot of alternative ways to create a profitable weblog format, primarily based on variables like who your viewers is and any design statements you personally need to make.

    12 Blog Layout Examples to Study From When Designing Your Blog

    Now that we’ve laid down one of the best practices for designing a profitable weblog format, let’s see them in motion by a number of the finest weblog layouts on the Web.

    1. The Intercept: Daring Blog Layout

    The Intercept Homepage (Blog Layout Examples)

    The Intercept is a web based information supply that gives investigations and analyses of matters like politics, warfare, nationwide safety, expertise and the atmosphere.

    From a design standpoint, there are lots of issues you’ll be able to be taught from them. Their font decisions are massive, daring and straightforward to learn. In addition they hold their weblog format very clear and reap the benefits of destructive house to make their featured tales pop clearly.

    The Intercept Screenshot of Top Stories

    The highest menu is damaged down into the highest information tales that they cowl, and for those who scroll down you’ll see massive high-quality photos that entice readers to maintain studying.

    2. Detailed: Conversion-Optimized, Minimalist Blog Layout

    Detailed SEO Website Homepage Screenshot (Blog Layout Examples)

    Detailed is an search engine optimisation insights weblog, operated by famed search engine optimisation Glen Allsop, the place he additionally gives search engine optimisation consulting & programs. What’s so particular concerning the weblog format of Detailed?

    We’ll begin with their homepage. From the very high, Detailed is able to develop their e-mail listing with a transparent name to motion above the fold. They’ve made it a high precedence by inserting it initially of their web page. Fast apart—for those who haven’t already began doing so, I extremely advocate ramping up your e-mail advertising plan to your weblog.

    The following factor that Detailed does very effectively, is to ascertain their authority. They’ve constructive critiques from numerous well-known publications and types that they spotlight clearly. Individuals will acknowledge these manufacturers and immediately start to belief Detailed as a supply of details about search engine optimisation. If Bloomberg and Forbes are providing their endorsement, this have to be one thing good.

    Now take take a look at the weblog format they’ve used on their weblog feed web page:

    Detailed Blog Layout (Screenshot of Posts Page) and CTA

    As soon as once more, they’ve positioned an e-mail opt-in kind on the very high of the web page—additionally making it extra engaging by together with the names “Amazon” “IBM” and “Cisco” as subscribers on his listing.

    Detailed Blog Post Layout Example (Screenshot of a Post Example)

    Scrolling down, we will analyze the design of their weblog publish. Detailed’s weblog format could be very minimalist with lots of white house round their photos and textual content. On the sidebar, they present the businesses who’ve endorsed them, in addition to a ticker displaying what number of e-mail subscribers they’ve—and the way many individuals comply with them on Fb and Twitter. All nice social proof.

    Detailed does two issues very effectively. The primary is constructing belief with their readers and potential readers. They deal with displaying guests what makes them particular and precisely what they provide. The second, is making their content material fascinating and fascinating sufficient to entice readers to maintain going.

    Listed here are a number of of the weather they use to make you need to proceed studying their content material:

    • Feedback counter (encourages engagement)
    • An fascinating snippet of textual content that leads into the weblog publish
    • A really clear “View Submit” name to motion button

    Detailed’s weblog format is straightforward however very efficient at changing their readers—and directing folks to the place they need to go.

    3. Ahrefs: Visually Interesting and Simply Navigated Blog Layout

    Ahrefs Homepage Screenshot (Blog Layout Examples)

    Ahrefs is likely one of the high running a blog instruments that I can advocate to bloggers—and I exploit for all of my key phrase analysis, competitor evaluation, monitoring backlinks and for fast on-page search engine optimisation suggestions.

    Along with their premium options, Ahrefs additionally has a really strong (free) library of weblog content material that gives useful insights into search engine optimisation and digital advertising. We’ve already coated weblog format design factors like minimalism and utilization of white house, so I’ll shift my focus somewhat with what makes the Ahrefs weblog format so interesting to me.

    One factor that noticeably stands out concerning the Ahrefs weblog format, is its colour scheme. They selected three predominant (complementary) colours for his or her design: blue, white, with small pops of a lightweight orange. This colour sample is repeated in varied kinds all through their web site, in their brand and different visible components.

    Right here’s a snapshot of the Ahrefs weblog homepage:

    The Ahrefs Blog Homepage (for Posts) and Example - Screenshot

    You possibly can see that they’ve alternated between their core colours of white and blue all through their weblog homepage. The highest of the web page has a blue graphic with white writing, whereas the weblog posts characteristic blue headlines on a web page of plan white with somewhat orange accent.

    Their weblog format design is straightforward, but additionally very straightforward to navigate. At a look, you’ll be able to uncover the entire data you’re in search of to seek out (and simply navigate proper to it).

    4. The New York Occasions: Organized Chaos Blog Layout

    The New York Times Homepage Screenshot (Blog Layout Examples)

    The New York Times has taken a really good running a blog technique in crafting their weblog format, by mixing its print picture with its digital one. As you’ll be able to see, their web site appears similar to their print newspaper. Ordinarily, this weblog format could look manner too overcrowded to a brand new customer. Nevertheless, most individuals who land right here will already be conversant in this format from the newspaper’s bodily kind. That makes this weblog format a lot simpler to decode—and offers you a better stage of appreciation for the choice to steer with this design alternative.

    One other constructive facet about this model, is it means that you can see lots of fascinating content material all of sudden. Some folks will take a look at this entrance web page and go on to one of many high hyperlinks—for instance in the event that they visited the NYT to take a look at actual property, they’ll head straight there. Others might be immediately drawn to the map of the USA and click on into that story.

    Even if there are lots of issues taking place on this web page, it’s nonetheless very organized with distinct sections and high-quality photos.

    5. Medium: Minimalist Publication-Fashion Blog Layout

    Medium Homepage Screenshot (Blog Layout Examples)

    Medium is likely one of the high free running a blog platforms in the marketplace, they usually let you publish new content material (or repost content material from an current weblog). It may be an awesome device for selling your current weblog content material and getting extra publicity with a brand new viewers—however will also be used as a stand-alone running a blog platform for those who’re on a price range.

    One thing that immediately stands out about Medium’s weblog format, is its use of typography. They use massive and straightforward to learn fonts all through the platform.

    Medium Example of Bold Fonts and Easy to See Images

    In contrast to The New York Occasions, the general design of Medium could be very clear, straightforward to navigate and free from pointless muddle.

    6. Adobe Create: Inventive and Artistic Blog Layout

    Lots of the weblog layouts I’ve highlighted up to now have been somewhat extra conventional & minimalist—however for those who lean extra inventive, you’ll just like the Adobe Create weblog.

    Adobe Create Homepage Screenshot (Blog Layout Examples)

    Adobe has given folks the power to specific their creativity with revolutionary instruments like Photoshop, Illustrator, Lightroom, Audition and plenty of extra. Adobe Create is an accompanying weblog devoted to artists and creatives. Their weblog shares inspiration and how-tos for images, graphic design, illustration, UX and video. So what’s fascinating about Adobe Create’s weblog format?

    One component that stands out about this weblog, is the inventive imagery that leads the way in which. Every part of the Adobe Create weblog begins with a putting picture:

    Adobe Create Blog Imagery Examples (Screenshot)

    This inventive aptitude continues as you scroll down the web page. It’s clear that the featured photos for every of their weblog posts are chosen to be fascinating, distinctive and exquisite.

    Adobe Create Recent Stories (and Featured Images) Screenshot

    This weblog format by Adobe depends very closely on photos to entertain their readers and encourage them to click on by to learn tales—way more than headlines historically do.

    7. The Dowse Artwork Museum: Non-Conventional Gallery-Fashion Blog Layout

    I needed to incorporate the Dowse Artwork Museum right here for instance, as a result of their weblog format is so utterly totally different from nearly another web site you’ll end up on in the present day.

    The Dowse Art Museum Homepage Screenshot (Blog Layout Examples)

    Whereas every weblog publish does definitely stand out from each other, they’re additionally positioned in particular spots to look extra like an artwork gallery show.

    The Dowse Art Museum Gallery Blog Display (Unique Example) Screenshot

    Whereas most likely not one of the best design alternative for many bloggers, this can be a very enjoyable, distinctive and artistic option to show posts and set them other than extra conventional blogs. And as an added bonus, the museum has gotten lots of press and a focus for his or her distinctive weblog format over time.

    8. WePresent: Daring, Picture-Heavy Blog Layout

    WePresent is a inventive weblog that showcases artwork, images, music with a highlight on range. This weblog format design permits the artwork to attract in readers, with little or no textual content and has a constant emphasis on imagery. Their weblog homepage begins with one massive cowl story picture and really minimal textual content:

    WePresent Homepage Screenshot (Blog Layout Examples)

    Beneath the duvet story, it’s adopted by a number of photos—with every picture resulting in a novel story on their weblog.

    WePresent Example of Images Used to Tell Stories (Screenshot)

    It might appear to be a dangerous transfer to publish photos with no rationalization and anticipate folks to proceed studying. Nevertheless, for this weblog, they’re taking part in to their viewers. They doubtless entice readers who might be in the photographs for his or her inventive high quality. The impact is a weblog format that appears very very like an artwork show. It’s aesthetically charming.

    Additional down, WePresent begins to introduce snippets of tales, however the taglines are simply as fascinating as their corresponding photos.

    WePresent Blog Design Example (Images Next to Content) Screenshot

    WePresent is a superb instance of not solely designing a novel weblog format that you just don’t discover a lot of on-line, however of additionally creating an expertise that appeals to their target market.

    9. The Home That Lars Constructed: Playful and Mild Blog Layout

    One other inventive weblog format with a totally totally different really feel, is The House That Lars Built. This weblog covers an array of matters from crafts, inside design, decor and elegance. The very first thing that stands out instantly about this weblog format, is their colour scheme. They use pastel colours that really feel joyful and lightweight:

    The House That Lars Built Homepage Screenshot (Blog Layout Examples)

    The Home that Lars Constructed, takes on the tough job of together with lots of content material with out crossing over into a very cluttered design. It’s a advantageous line to stroll. Every part is visually fascinating sufficient to make them distinct from different components.

    The House That Lars Built Individual Article Layout (Screenshot)

    As with WePresent, this weblog goes far out of its option to enchantment to very specific viewers—readers which can be in search of vivid, blissful and uplifting photos, inventive concepts and inspiration.

    The House That Lars Built Example of Blog Design for Your Audience

    10. Magnum Images: Pictures-First Blog Layout

    Magnum Photos Homepage Screenshot (Blog Layout Examples)

    Magnum Photos is a images weblog with a deep curiosity in storytelling. As with a number of the different inventive blogs, Magnum Images makes use of images as the first weblog format car to drive the story. Magnum Images makes use of fascinating photos and high-quality images to show their posts.

    Lots of the tales are additionally shared from historical past, so a number of the photos are in black and white. Using black and white is a novel option to make photos stand out, particularly when the attention is accustomed to seeing photos in colour.

    11. The New Yorker: Minimalist, Graphic-Pushed Publication Blog Layout

    The New Yorker Homepage Screenshot (Blog Layout Examples)

    The New Yorker is understood for utilizing sarcasm and intelligent writing all through their publication. This vibe continues with their alternative of art work and even their general weblog format. They’ve an actual character that appeals very strongly to their viewers.

    Like The New York Occasions, The New Yorker has a web based format that’s paying homage to the (authentic) print publication. As you peruse their web site, you’ll really feel such as you’re a bodily journal.

    Right here’s a sampling of current tales from The New Yorker. The typography they use for his or her headings is simple to learn, however somewhat extra fascinating than your primary Arial.

    The New Yorker Story Examples and Typography Choices

    In addition they use photos which can be uncommon and generally even somewhat absurd, with the objective of catching the eye of a reader immediately. Why is somebody holding a smoking piece of glass that resembles a cellular phone?

    The New Yorker is ready to depend on its historical past of well-written publications, to entice readers to take a leap even when the snippets and pictures are ambiguous. They tease out simply sufficient a narrative to make their readers need to be taught extra.

    The New Yorker Story Headlines That Entice Readers to Click

    12. The Verge: Futuristic, Daring, Tech-Pushed Blog Layout

    The Verge Homepage Screenshot (Blog Layout Examples)

    The Verge is a multimedia weblog that examines how expertise modifications the lives of individuals world wide. They predict which technological developments are going to have an effect on the common individual down the highway.

    So what stands out about their weblog format? For one factor, their alternative of design appears like a technicolor dream straight out of the Eighties. However as an alternative of constructing the weblog seem outdated, it makes guests nostalgic for the 80s, when expertise and the rise of computer systems began to vary the panorama of our tradition.

    The Verge Blog Homepage Design (Screenshot)

    The Verge doesn’t use lots of destructive house on their weblog, however the way in which they use photos and enormous daring fonts, retains every part distinct and straightforward to seek out. The weblog posts don’t simply mix in with one another. One other factor to level out about this weblog format, is the way in which they break down sections. Within the navigation menu, they listing all of their high classes.

    The Verge Drop Down Menu for Easy Navigation (Screenshot)

    Each has a hover drop-down menu that additional breaks classes into extra particular subcategories. This capabilities as a model of a studying middle for readers to dive deeper into the topic they care about.

    The Verge Menu of Navigation Items (Screenshot)

    This type of straightforward navigation is a staple of weblog format finest practices, in phrases of delivering an awesome user-experience to your readers.

    My Personal (Minimalist) Blog Layout and Design Right here at ryrob.com

    Because you’re on my weblog proper now, I need to wrap this information up by showcasing my very own weblog format, since I went by an entire redesign in early 2020.

    The first motive why I made a decision to revamp my weblog format, was as a result of I’d been utilizing the identical theme & general design format for greater than 5 years. The expertise was including lots of bloat to the pages on my web site, making them load a lot slower than they wanted to, and the visible components didn’t really feel consultant of the individual I’d develop into since I began my weblog.

    This new redesign simplified lots of issues, translated my very daring messaging model into visible components throughout my web site—and gave me a serious efficiency enhance too. So let’s dig into a number of of those new format components.

    Very Easy Design

    One factor that stands out about my weblog format is how extremely easy the design is. In my header menu, there are only some straightforward to see hyperlinks, my brand and a search bar.

    Blog Post Layout Example (on ryrob) Screenshot

    I omit a high header picture on the weblog homepage, and as an alternative deal with my weblog posts and featured photos because the driving forces. This model of weblog may very well be described as clear and minimalist.

    The good thing about a minimalist design, is how straightforward it’s for readers to navigate. Guests on my weblog gained’t have to spend so much of time finding essential details about my weblog. All the pieces is seen at a look and the attention isn’t distracted by lots of textual content and pictures.

    Centered Article Assortment (in Order of Publication Date)

    In my current web site redesign, my weblog posts went from a grid-style show, right down to a listing show. Now, as an alternative of seeing a number of weblog posts directly (which is usually a little overwhelming), readers see one massive featured picture and the corresponding weblog publish at a time. These posts are in order of publication date:

     Blog Posts in Order of Publish Date in My Design (Screenshot)

    Utilization of White Area

    We already coated that my weblog format is deliberately minimalist, however one component of that is the utilization of white house. White house, generally known as destructive house, is the a part of your weblog format that doesn’t have any form of imagery, adverts or textual content represented—nothing else is occurring there.

    As we talked about earlier, the aim of destructive house is to attract extra consideration to the important thing options you need to spotlight in your weblog.

    In case you’ve ever seen a weblog stuffed with blinking adverts, sidebars and cluttered headers & footers, you recognize what I’m speaking about. White house isn’t fully needed if the location nonetheless manages to look clear {and professional}. Nevertheless, that destructive house trains the reader’s eyes on the place you need them to go.

    Layout of My Blog Homepage (Screenshot)

    Font Kind and Sizing

    Selecting a font measurement and sort is comparatively straightforward. The primary factor right here is to choose one thing that’s straightforward to learn. Textual content that’s too small or arduous to decipher will make your bounce fee increased.

    And as we talked about earlier, I exploit a customized font that’s much like Josefin Slab with a physique textual content font measurement of 16px.

    Engaging Descriptions and “Proceed Studying” CTA Button

    Whether or not they use a listing or grid model to show your weblog posts, most bloggers embody a brief description of their weblog publish to be sampled for readers. Your weblog guests are going to resolve whether or not or to not proceed studying primarily based on the featured picture and the outline you’ve offered, so make it good.

    Don’t squander this description. Attempt to write one thing that’ll entice them to maintain studying, and embody a “Proceed Studying” name to motion button:

    Descriptions and Calls to Action in Your Blog Design (Screenshot)

    Pagination on the Backside

    One other option to get folks to proceed studying your content material is to place clear pagination on the backside of your listing of weblog posts. This reveals readers that you’ve extra content material and encourages them to find extra in your web site.

    Use of Pagination at the Bottom of Your Blog Homepage (Screenshot)

    This characteristic additionally retains your weblog homepage from changing into overloaded with content material that runs on a steady scroll.

    Taking Benefit of the Footer

    The ultimate factor I’d prefer to level out about my weblog format, is the footer. The footer of your weblog can be utilized for a wide range of key hyperlinks, pages and calls to motion. I reap the benefits of my footer part each on particular person weblog posts and on all of the pages throughout my web site, to encourage additional engagement with my readers.

    Blog Layout and Footer Screenshot Example of ryrob

    In my footer part, I embody numerous essential hyperlinks and I’ve them damaged down into related sections.

    I share further weblog posts folks may be in, a few of my hottest posts and my most up-to-date podcast episodes. I additionally embody a piece known as “Work With Me” that shares hyperlinks to details about who I’m, learn how to rent me, my finest content material and my contact data.

    And although that is technically above the precise footer of my weblog, I take full benefit of the tip of every weblog publish by incorporating a transparent, single name to motion for my readers to take:

    Call to Action Example from ryrob Blog (Screenshot)

    This name to motion lives on the backside of nearly each publish on my weblog—it’s in massive textual content, asks a query and makes use of a novel button that readers can click on on. The introduction of those components makes it simpler for folks to seek out extra related data (and to direct them to content material items like my listing of one of the best running a blog jobs websites or high WordPress developer jobs websites—one thing I do know most of my readers have an interest in).

    On the backside of every weblog publish, I additionally share some details about myself and my weblog (because the writer), and I’ve a straightforward to find remark widget.

    Blog Comments Widget and Author Bio Screenshot

    That’s a wrap on the methods my very own weblog format has been deliberately (re)designed earlier this yr.

    Every part of my weblog is rigorously thought out and deliberate to encourage folks to remain on my weblog and discover all that it has to supply (take a look at my free weblog planner for extra).

    The very minimalist model is supposed to make it straightforward to seek out data—and really feel extraordinarily free from distraction once you’re studying one in every of my long-form guides (like this right here).

    Your weblog format could not look something like mine… and that’s completely advantageous!

    Variety is a energy in the running a blog world, so it’s higher when our blogs aren’t simply copies of one another. Even so, these weblog format and design finest practices will make your personal weblog stand out.

    What Are You Going to Do With Your Personal Blog Layout?

    How to Choose a Layout for Your Blog (Computer Photo)

    Now that we’ve coated the entire most vital weblog format finest practices, and have analyzed a ton of weblog format examples, how will you construction the design of your personal weblog?

    Now it’s time so that you can take what you’ve realized—and apply it to your personal weblog format and general web site design.

    • How are you going to take these weblog format concepts and tailor them to suit your imaginative and prescient?
    • What do you want (and dislike) concerning the weblog format examples you’ve seen right here?
    • Did you discover any weblog format errors you’ve made, that you just’re now prepared to repair?

    Keep in mind… no one ought to ever create a carbon copy clone of one other individual’s weblog format. That’s a type of plagiarism. However you’ll be able to nonetheless take lots of inspiration from the weblog layouts you’ve seen right here in this information, as a result of they’ve been deliberately designed to draw (and retain) readers over the course of a few years.

    Seize the fitting WordPress theme that may set you down the trail to perfecting your weblog’s design (and increase it with key WordPress plugins) in the present day.

    And hold in thoughts that these weblog layouts you’ve seen right here, comply with confirmed finest practices which can be designed to maintain your bounce fee low—and encourage folks to return to your weblog for extra.

    Need to Begin Your Blog (the Proper Manner)?

    Learn my final information to beginning a weblog, which has been featured on Forbes, Entrepreneur and Enterprise Insider.

    Advertisement

    Related Articles

    Leave a Reply

    Back to top button