You may have noticed things look a little different around here. Here's how we redesigned our blog (and how you can redesign yours too). Why Did We Redesign Our Blog? A blog is your home on the Internet. Like all homes, they eventually need to b…
You may have noticed things look a little different around here. Here's how we redesigned our blog (and how you can redesign yours too).
Why Did We Redesign Our Blog?
A blog is your home on the Internet. Like all homes, they eventually need to be tidied up. That was certainly the case for this very blog you're reading right now. While we were busy working on our product and other priorities, we realized it was time to give our blog a refresh.
They say the classics never go out of style, but they do.
We're blogging and design nerds, so a blog redesign is something we would do for fun. Rest assured there were much more important reasons to redesign our blog though. Blogging is what we do, so our blog should be exceptional, right? With this thought in mind, our marketing, design, and engineering teams collaborated to create the best blog experience possible.
The new and improved WordPress.com Blog design.
Now, you might think you can learn everything there is to know about this redesign just by looking at it. However, there are some subtle details and improvements that may be easy to miss. Let's look at some redesign details we're particularly proud of and share some simple tips you can use to improve your own blog (with advice straight from our own design team).
What's Improved on the WordPress.com Blog
We know what you're thinking: "Okay, but what does all this mean for me?" If we were you, we'd be asking the same question. Here are some enhancements made to our blog that make your experience better.
A More Engaging Appearance
The WordPress.com Blog was visually outdated and no longer matched the branding of the rest of our site. We modernized our design and post layouts to bring them up to our 2025 design standards.
Here's a snapshot of our old single-column homepage design:
It was clean and simple but bland. The article description font for text below headlines was difficult to read, and the small image thumbnails didn't do justice to our sharp header designs that had already been using some of our refreshed design standards. There was room for improvement here.
In case you haven't seen it, here's what our new and improved blog homepage looks like:
The clear header section places our most recent posts front and center, while the multi-column layout makes it easier to find more content you might be interested in. You'll also notice a consistent approach to visual styling, ensuring design elements and images look their best.
Tips for planning your own blog redesign:
- Establish consistent colors you use across your blog. This helps create a more cohesive appearance that is more immediately recognizable as "you." - Choose header images that will catch your reader's attention using or complimenting your established colors.
A More Useful Navigation Structure
Our previous blog homepage design featured a single column with a simple search bar. The new design implements a streamlined menu for better organization and easier navigation:
This may look like a simple design, but that simplicity is intentional. Each category has been strategically considered to effectively group content together into the fewest buckets possible.
At the bottom of the blog home page, we also include a section for popular content. This ensures that posts receiving high engagement get extra visibility:
Tip for establishing your blog categories:
- Select blog categories thoughtfully. A smaller number of carefully considered categories focused on core topical areas may be better than having lots of categories because it presents fewer, more intentional options for your readers. For more detailed guidance on choosing categories, read this guide.
An Easier Reading Experience
Redesigning the WordPress.com Blog wasn't just about appearances though. We made several improvements that make content (like this post) more comfortable to read:
Making our font selection consistent with the rest of our website
Ensuring those fonts are web-friendly
Choosing colors that are not only consistent but support easy readability
We work hard to create content that makes you say, "This blog post was so good, I need more of it in my inbox." Now, every post has a clear subscription banner across the bottom. We've also made it easier for readers to find where they can start a new website or blog of their own (for readers who are just getting started).
How could you not enter your email address in this form? Who could resist building a new website or starting a new blog? Couldn't be us.
Tips for adding CTAs to your blog:
- Make it easy for readers to find more of your content. - Add clear calls to action that encourage users to take your desired action (such as subscribing to your blog, signing up for your service, or buying a product).
Six Tips to Improve Your Next Redesign Project
If you're thinking about redesigning your own blog or website (or for a client), we have some additional advice to share.
1. Set Clear Expectations with Clients
Our blog redesign project required a high level of collaboration between teams and stakeholders. If you are redesigning a blog for a client, ensure that both sides understand the goals of the project. Here are some items you should be sure to document:
Your clients' goals and priorities
All high-level tasks to implement the redesign
Expected initial launch date
Timeline for improvements and iterations after launch
Then, throughout the project, regularly review and update this document to ensure alignment and track progress effectively. This will help keep the project on track and avoid disappointment.
2. Create a Checklist of Design Tasks
Before you start working, create a more detailed checklist of all the steps you need to follow. Break out this list into two sections:
Steps that need to be completed before launch
Steps that can be completed after launch
This will help you prioritize the work that needs to be done at a granular level.
3. Optimize for the Right Things
Even the best-looking design is wasted if a site doesn't function well. Prioritize performance: optimize assets, use lazy loading, minimize JavaScript and CSS, and implement caching where possible. This will help make sure your client's site works as well as it looks.
To get some WordPress and site-specific performance recommendations, be sure to use our free Speed Test tool.
4. Test, Test, Test
During development, start and maintain a record of pre-launch and post-launch testing items. This will ensure smooth deployment (and help you catch bugs before your client or their users do).
5. Determine How Much Existing Code and Content Can be Reused
Redesign projects can be a lot of work. Fortunately, you might not have to redesign everything on your site or blog. Clearly define what parts need to be fully redesigned and what can be kept or inherited from other products for common patterns. For example, with our own blog redesign, we were able to keep the existing pattern for comments.
6. Implement a Clear Feedback Process
We believe feedback is a gift. When someone calls attention to something you can improve on, they are trying to help you be better. Establish an easy process for your client to review designs and provide constructive feedback throughout the process (and not just at the end). This way, your client will feel valued, and the end product will be more likely to meet their expectations.
Ready to Redesign Your Own Blog?
If you're inspired to redesign your own blog, follow our detailed guide (it's geared toward full website redesigns, but much of the advice is still applicable). Or, if you'd like to start a blog (or help a friend start one of their own), we have another guide that can help you do that too. Here's to making the Internet a more beautiful and useful place, one blog at a time.
![[New post] Level Up Your Author HQ With GoCreate.Me](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t6Qn9SeQyA9yLPGLQv8jiFtMOCqjvsxSsTRJFP9p9UXAGHgsWPDiNlZGAKcDtdMf_Hg9HLRr4RSPlfiiz2dPnEjirufjuMV_d6yivVTQf1maZvp9VD8yBFA-GLTX6SUUNsXYVEQymwoZl_L_PMMZc9UgkaHAcg5xHp7jwYuB-Hpmf7RDrQbeO39e98zSJxlA=w72-h72-p-k-no-nu)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.