Why We Redesigned Our Weblog (And How You Can Too)

You might have observed issues look a little bit completely different round right here. Right here’s how we redesigned our weblog (and how one can redesign yours too).

Why Did We Redesign Our Weblog?

A weblog is your house on the Web. Like all properties, they ultimately have to be tidied up. That was actually the case for this very weblog you’re studying proper now. Whereas we have been busy engaged on our product and different priorities, we realized it was time to present our weblog a refresh.

We’re running a blog and design nerds, so a weblog redesign is one thing we might do for enjoyable. Relaxation assured there have been rather more necessary causes to revamp our weblog although. Running a blog is what we do, so our weblog ought to be distinctive, proper? With this thought in thoughts, our advertising, design, and engineering groups collaborated to create the perfect weblog expertise potential. 

Now, you may assume you possibly can be taught all the pieces there may be to find out about this redesign simply by it. Nevertheless, there are some refined particulars and enhancements that could be simple to overlook. Let’s take a look at some redesign particulars we’re notably happy with and share some easy suggestions you need to use to enhance your individual weblog (with recommendation straight from our personal design workforce).

What’s Improved on the WordPress.com Weblog

We all know what you’re considering: “Okay, however what does all this imply for me?” If we have been you, we’d be asking the identical query. Listed here are some enhancements made to our weblog that make your expertise higher.

A Extra Partaking Look

The WordPress.com Weblog was visually outdated and now not matched the branding of the remainder of our web site. We modernized our design and put up layouts to deliver them as much as our 2025 design requirements.

Right here’s a snapshot of our previous single-column homepage design:

It was clear and easy however bland. The article description font for textual content beneath headlines was tough to learn, and the small picture thumbnails didn’t do justice to our sharp header designs that had already been utilizing a few of our refreshed design requirements. There was room for enchancment right here. 

In case you haven’t seen it, right here’s what our new and improved weblog homepage seems like:

The clear header part locations our most up-to-date posts entrance and heart, whereas the multi-column structure makes it simpler to seek out extra content material you could be concerned with. You’ll additionally discover a constant method to visible styling, making certain design components and pictures look their greatest.

Ideas for planning your individual weblog redesign: – Set up constant colours you utilize throughout your weblog. This helps create a extra cohesive look that’s extra instantly recognizable as “you.” – Select header photos that can catch your reader’s consideration utilizing or complimenting your established colours.

A Extra Helpful Navigation Construction

Our earlier weblog homepage design featured a single column with a easy search bar. The brand new design implements a streamlined menu for higher group and simpler navigation:

This may occasionally seem like a easy design, however that simplicity is intentional. Every class has been strategically thought of to successfully group content material collectively into the fewest buckets potential.

On the backside of the weblog house web page, we additionally embody a bit for common content material. This ensures that posts receiving excessive engagement get additional visibility:

Tip for establishing your weblog classes: – Choose weblog classes thoughtfully. A smaller variety of rigorously thought of classes targeted on core topical areas could also be higher than having numerous classes as a result of it presents fewer, extra intentional choices in your readers. For extra detailed steering on selecting classes, learn this information.

An Simpler Studying Expertise

Redesigning the WordPress.com Weblog wasn’t nearly appearances although. We made a number of enhancements that make content material (like this put up) extra comfy to learn:

1. Making our font choice in line with the remainder of our web site
2. Making certain these fonts are web-friendly
3. Selecting colours that aren’t solely constant however assist simple readability

Ideas for selecting colours and fonts in your weblog: – Use constant font types throughout your web site. See tips on how to edit fonts on WordPress.com right here. – Use AccessibilityChecker.org, a free accessibility evaluation instrument, to make sure everybody can simply take pleasure in your web site. – Moreover, learn our article on coloration accessibility to make sure your fashion selections are suited to all. – For WordPress.com customers, keep in mind that our themes are constructed with cautious consideration for optimum coloration and font utilization.

Extra Clear Calls to Motion 

We work onerous to create content material that makes you say, “This weblog put up was so good, I would like extra of it in my inbox.” Now, each put up has a transparent subscription banner throughout the underside. We’ve additionally made it simpler for readers to seek out the place they’ll begin a brand new web site or weblog of their very own (for readers who’re simply getting began).

Ideas for including CTAs to your weblog: – Make it simple for readers to seek out extra of your content material. – Add clear calls to motion that encourage customers to take your required motion (comparable to subscribing to your weblog, signing up in your service, or shopping for a product).

Six Tricks to Enhance Your Subsequent Redesign Undertaking 

Should you’re fascinated about redesigning your individual weblog or web site (or for a consumer), we have now some extra recommendation to share. 

1. Set Clear Expectations with Shoppers

Our weblog redesign venture required a excessive degree of collaboration between groups and stakeholders. If you’re redesigning a weblog for a consumer, be certain that each side perceive the targets of the venture. Listed here are some objects it is best to remember to doc:

• Your purchasers’ targets and priorities
• All high-level duties to implement the redesign
• Anticipated preliminary launch date
• Timeline for enhancements and iterations after launch 

Then, all through the venture, recurrently evaluation and replace this doc to make sure alignment and monitor progress successfully. This can assist hold the venture on monitor and keep away from disappointment.

2. Create a Guidelines of Design Duties

Earlier than you begin working, create a extra detailed guidelines of all of the steps it is advisable observe. Escape this record into two sections:

1. Steps that have to be accomplished earlier than launch
2. Steps that may be accomplished after launch

This can allow you to prioritize the work that must be achieved at a granular degree.

3. Optimize for the Proper Issues

Even the best-looking design is wasted if a web site doesn’t perform nicely. Prioritize efficiency: optimize belongings, use lazy loading, decrease JavaScript and CSS, and implement caching the place potential. This can assist make certain your consumer’s web site works in addition to it seems.

To get some WordPress and site-specific efficiency suggestions, remember to use our free Pace Take a look at instrument.

4. Take a look at, Take a look at, Take a look at

Throughout improvement, begin and keep a report of pre-launch and post-launch testing objects. This can guarantee clean deployment (and allow you to catch bugs earlier than your consumer or their customers do).

5. Decide How A lot Present Code and Content material Might be Reused

Redesign initiatives may be a variety of work. Luckily, you won’t have to revamp all the pieces in your web site or weblog. Clearly outline what components have to be totally redesigned and what may be stored or inherited from different merchandise for widespread patterns. For instance, with our personal weblog redesign, we have been in a position to hold the prevailing sample for feedback.

6. Implement a Clear Suggestions Course of

We imagine suggestions is a present. When somebody calls consideration to one thing you possibly can enhance on, they’re attempting that will help you be higher. Set up a simple course of in your consumer to evaluation designs and supply constructive suggestions all through the method (and never simply on the finish). This manner, your consumer will really feel valued, and the top product will likely be extra prone to meet their expectations.

Able to Redesign Your Personal Weblog?

Should you’re impressed to revamp your individual weblog, observe our detailed information (it’s geared towards full web site redesigns, however a lot of the recommendation continues to be relevant). Or, if you happen to’d like to begin a weblog (or assist a pal begin certainly one of their very own), we have now one other information that may allow you to try this too. Right here’s to creating the Web a extra stunning and helpful place, one weblog at a time.