30+Top-Notch Website Redesign Examples

Ever thought of website redesign?  Here is why you should consider it.

The web is dynamic and very competitive. Trends come and go, but it’s also true that even the most successful, timeless designs need up-lifting. Users’ needs change, so naturally, the role of website design changes as well. Sooner or later, top businesses  opt for a striking website redesign to keep up their game in the digital world and to keep their audience engaged and satisfied. All good reasons why you should think about possible website redesign yourself!

To help you along the road, we’ve compared the pure visual aspects and usability of some great website redesign projects to their predecessors. We will  share 5 crucial elements to consider when redesigning, so you can quickly create an effective game strategy for your own company/project/business.

WordPress

It is obvious that WordPress removed the horizontal lines in their design and thought of more subtle ways to organize their information. The size relationship of fonts is also better. Good practice, as you will see also in the further examples is, that the logos take less space and don’t “scream” for attention.

YellowPages

Yellow pages reinvented their logo and scaled down their menus. The search boxes don’t have screaming headings, but subtle icons instead. The big photo is popular design choice for similar pages.

Skype

Skype also reduced the text on their homepage, use a large photo and decreased the logo size. They also use less saturated colors, which is more relaxing for the eye and more businesslike.

Whitehouse. gov

The old website of the White House is overloaded with text, menus and pictures. The new design relies on a much more simplified logo and menu, placed only at the top and a full screen photo. The design is also made somewhat user-centered, as the quick and obvious Sign Up box offers to keep you updated with the latest on goings. We can already see on this website a level of personalization. Smart!

Mozzila

At first glance, Mozilla haven’t changed much the design of their website, but even if the changes are subtle, there is contemporary feel to the new design. It simply looks fresher and more modern.

Smashing Magazine

The subcategories of the menus in the new design save clicks and are also more mobile friendly. We like how they replaced the darker colors with a lively color scheme and use some accent colors to highlight certain areas in text. The light background boxes are a nice way to organize their information.

Apple

Apple also pruned content and text in their new design. They even replaced text with infographics. As opposed to Smashing Magazine, they replaced their white background with a black one. Their website now looks more stylish, powerful and luxurious than its earlier version, where the store resembled more of an ordinary tech online shop.

Mashable

Not necessarily less information on their new site, but Mashable uses more photos and blocks of information, to keep everything organized. They moved all their social media buttons to the top and decreased the logo size. We love how they created rhythm with lighter and darker stripes of information.

CNN

The old website lacks contrast, or at least in the right places. The new site is a success because of hierarchy in the fonts used, different sized photos and the dark header, which immediately leads and directs the eye to the most important part of the design.

Microsoft

The giant used the same successful techniques in creating beautiful website as the rest of the corporate sites. It is clean, stylish and elegant.

Adobe

Adobe takes simplicity in their new design to the next level. The eye is drawn to the creative photo which portrays perfectly their main field of expertise.

PayPal

PayPal has chosen to blur their background photo and put emphasis on their headings. This is a good choice, considering they are service which aims at building trust in their customers. Other than that, they again use the same methods for creating a flawless website, as the rest of the giants.

LinkedIn

The old LinkedIn website is clean, straightforward, light, but it does not say much about what is going to happen on their website. Although LinkedIn is already hugely popular, it was a nice touch to put a background photo with people. Enhancing the feeling of community and connecting people, which is what they stand for. Great choice of darkening all the information, except the sign up box.

Bose

Bose’s website redesign is a beautiful example of applying good design principles, while keeping the marketing part in mind. (strong, emotive/action words in headings). Note, how the first version is more about selling the products and while the second one presents the product and shows the style. It leaves room for the customer to be curious and to explore more. No hard sell tactics!

Veerle’s Blog

Both websites are fresh and colorful, but in the second version they got rid of the menu tab and used a card design layout to organize their info. It looks like soft and fluffy, we think it’s nice. Also, the blog posts flow more naturally on the page and are easy to browse through.

NFL

NFL definitely has a lot of information to show, taking up a lot of space. That is why, they made the excellent choice of using a neutral, gray background in their new design. That leaves the focus on the photos and news.

Epic Reads

Notice that the older version of Epic Reads’ website is a lot busier. Simplifying the design and using stronger contrasts are not the only design changes. Have you noticed how they’ve moved their social media buttons to the top? That’s also connected with their goal of creating community. Note on last place, there is far less text, only large headings to spark interest and encourage you to explore more. We also like the logo redesign.

Girl Scout Cookies

What we love about the new design is the call to action button in the center of the homepage and that they included infographics and more colors in the design. It makes it more appealing, friendly and fun to explore.

PublishThis

As a Content Marketing and Digital Publishing Platform, Publish This made a great choice in showing results and showing numbers with big, bold typo on a dark background. They also rearranged their menus and logo and aligned them. We love that they use more white space in their website redesign, allowing it to breathe.

Iron Master

Ironmaster’s website redesign includes reworking their logo, removing the confusing glow of their fonts, and using simple visuals, better contrasting colors and symmetrical layout, which makes more sense that their previous website design.

 

 

 

 

 

Now you’ve got an overall idea of how giants do website redesign right, you might be wondering what they’ll come up with in the future?

Yes, it is possible to

Track website redesigns and updates of competitors and big companies

Browsing the web in hope of finding a recent redesign of a website and comparing it to its old version can be a daunting task. One of the best features that Crayon.co can offer, is to send you notifications when a website of your interest is updated/redesigned, as well as showing you the earlier version.

A free option allows you to follow the changes of several big companies, from a ready made Crayon set list. If you are very keen on tracking website redesigns, you might as well choose the paid option.

Ok. But what if your project is not of such scale? What other sources of inspiration can you use?

You might be surprised by the endless amount of beautiful website redesigns to be found on Dribble and Behance. Of course, not all of them are implemented in reality, but many talented designers have chosen to give a concept make-over of their favorite brands. It is fresh designer’s/ user perspective. Surely, an independent designer/user has many thoughtful observations on the interaction of the ordinary user with the brand’s websites. The designers also add short descriptions to their projects, telling us about their ideas behind the design decisions. That is why, we think the following gallery is particularly interesting. You can see the gallery we curated for you in our article.

Considering a website redesign yourself?

Then, here goes! Bearing in mind the inspiring examples shown, we’ve created a short checklist to help you when redesigning.

1. Look for clarity

You don’t have to necessarily go to extremes when redesigning. It is enough to freshen the design up and keep the clarity. The user should be able to immediately tell what is your website about. This point will also help you keep the attention of the users.

2. Readability is important

People will get frustrated and leave your website if it is not easy to read. We can actually safely use the verb “scan” here. Users often scan through your website, so leave all the unnecessary information out (prune it) and emphasize only on the most important points you want to make.

3. Don’t forget about the appearance

Sweet and simple – authentic imagery, visual hierarchy, colors and relationships between the different elements of the design can do a great deal of good and build trust and satisfaction in the user. Keep these in good shape and is quite possible that your conversions will increase.

4. Usability for users of all skill levels and devices

No matter the skill level or the device – users are busy and impatient. If you haven’t thought of the consumers’ needs, interaction and how they get on your site, you risk losing them fast.

5. Intuitive navigation

Rule of thumb is to keep the navigation of the landing page as minimal as possible and for the rest of the pages – to make it intuitive, flowing. If you make the user think and “wander”, then, there is still room for improvement in your navigation.

Taking it a step further – from redesign to whole rebranding…

Considering rebranding for your company/business? There are several steps to help you evaluate if you need take the leap.

In the first place, think if the brand is memorable or amplifiable.

Then, if you are thinking of changing the name, it would be less pain to do it sooner rather than later – with time the process will only get more complicated.

When you’ve made some decisions and you’ve made a decision on the direction, make sure to test your ideas on your target audience. Sometimes you’ll get surprised by the results and answers you get from them.

If you’d like to dig deeper into the topic we strongly recommend Rand Fishkin’s article – you can follow his checklist and well-laid out points, or watch the video, in which he talks about rebranding done right. You can read the article here.

Do you feel like adding anything to our notes?

We’d love to hear from you, or to answer a question you might have about the topic/article. You are more than welcome to take the center stage and drop us a line in the comment section below.

Cheers,

htmlBurger