Implementing A Good Redesign: Advice And Examples

Posted on 31. Mar, 2010 by Sara Presenti in Web Design

Redesigning a website can be very satisfying and very stimulating for a web designer. A redesign consists of objectively improving the aesthetics or the structure of a website and, with the use of new elements or content, giving a new form or a new identity to the site.

Getting our hands on an out-of-date and roughly-done website, with the complete freedom to modify, add to, subtract from, and overhaul what we please, is extremely exciting. Unfortunately, this enthusiasm can often result in an incorrect work process, with a negative impact on the end result and on the eventual success of the redesign.

Before we open Photoshop and start racking our brains for the new connotations our website should have, let’s clear up some key points.

Redesigner Or Realigner?

It would be impossible not to cite Cameron Moll’s article “Good Designers Redesign, Great Designers Realign” for A List Apart, from the distant past of 2005 (yet the article content remains quite pertinent): Cameron brilliantly divided webdesigners into “redesigners” and “realigners”.

Redesigners work on the aesthetics of redesign and justify its necessity with phrases like “the website’s old, it’s been online for two years”. This approach is obviously quite superficial, since, as we’ll later examine in detail, it’s always recommended to look at the over-all functionality of a website, without limiting oneself to design or aesthetic efficiency.

Realigners, on the other hand, strategically plan the goals to be reached, the target audience, the client’s desires and many other factors to be considered before touching the actual website.

In synthesis: the redesigner focuses on the site’s aesthetic, while the realigner focuses on its purpose.

Now that we’ve looked at the difference between the two, let’s get into the details.

How To Plan And Design A Good Website Redesign?

The first questions to ask are: what changes need to be made to the website in consideration? What improvements does the client expect from me? What short and long-term goals do I need to consider?

Content Structure

Too much information and poorly arranged. Filling a website’s pages with content, placing text elements, images and links everywhere with no logical sense, assures one result: the redundancy of data eliminates any useful information present and disorients the user, who will prefer looking elsewhere rather than trying to figure out if what he needs is hidden somewhere on the page.

Tip: Let’s start by thinning out the content. A website’s information must be immediately available, clear, and as simple as possible. The user isn’t flipping through an encyclopedia, but rather is looking for a quick solution to his problem. Long text passages aren’t enticing, especially if they’re not visually “lightened-up” with graphic elements. Write a summary of the inserted text, then when you’ve finished, write a summary of the summary. Make sure that the resulting text is neither verbose nor exhausting for the reader, and that it communicates the essential.

It’s important to plan the website’s structure in detail:

• How many pages does it contain?
• What are the main pages and what are the internal pages?
• How to link the pages together to facilitate site navigation? (anchors, action buttons, banners, etc…)

The content redesign must also include good copy-writing and, from an aesthetic point of view, a good eye for the typeset. It’s useless to improve the graphics if the text is poorly spaced and illegible due to a miniscule font size. This article isn’t about typeset, so I’ll limit myself to suggesting this exceptional article by Robert Bowen of PelFusion, if you’d like to read more on the subject.

Element Organization

I’ve noticed that many websites have a serious defect: a lack of communicative coherence. Irrelevant images, elements that appear placed by chance or that change from page to page and disorient the user.

A small example? I gave up on navigating a blog I was interested in because I couldn’t locate the search field. It was only on my second visit to the blog (I’m a bit stubborn) that I discovered how to search the blog: I had to go to the bottom of the page and in the footer click on a microscopically small lens icon, which opened a panel with a search form.

Unfortunately (for the blog’s author) users are accustomed to finding the search field at the top of the page, and if possible on the right side. The author’s subversive choice will definitely cause them to loose potential readers. These kinds of errors even happen with elements vital to a website’s success, like the navigation bar or the contact form.

Tip: once the website’s structure has been determined (how many pages and which ones to include, etc.), it’s time to decide where to position the various graphic elements. A vertical or a horizontal navigation bar? The logo on the right or left side? Is it better to put the contact form on the home page or is the classic “contact” page sufficient? These choices aren’t just the client’s or designer’s aesthetic preferences, but rather are based on the need to provide usability and structural efficacy of the website.

Design And Aesthetic

The most exciting part of a redesign (in my opinion, as it’s the graphic part) is creating the new design of the layout. Choosing the style, the colors, the images, the graphic embellishments (paintbrushes, textures, patterns, etc.) and giving a dated and – let’s just say it – ugly website a new look, a new life, is of great satisfaction to every designer. Even in this case, before we jump head over heels into Photoshop, it’s necessary to analyze a few details.

• Colors: Should the colors used on the old website be considered “institutional colors” and therefore should they be kept in the new design?
• Style: We all know that the style to adopt depends on the target audience, the client’s desires and the type of business. Nonetheless, even if the business were flexible enough to handle a drastic switch from a minimalist style to an all-black grunge layout, such a radical change of the client’s web-based appearance could turn out the be a double-edged sword.

Tip: Whether we’re dealing with the design of a new website or the redesign of an existing one, it’s necessary to create a good brief before designing the layout in Photoshop.

In synthesis: what kind of users will navigate the website and, therefore, what could be the most effective style for this target? What is the image that the client wants to project, and consequently what are the most appropriate colors and images to use? Conceptual images? Photos of the company and their products? In this phase it’s important to not work “blind”, at the mercy of creativity and imagination, without guidelines to follow. The risk is to create a product that not only doesn’t effectively represent your client, but can actually damage their established image.

What Should Be Left As-Is And Why?

There are some elements, not necessarily present in all websites, which during the redesign phase should be considered “untouchable”.

• The logo: even if it’s a real eyesore and looks terrible in the new layout, modifying this distinctive element is recommended only after having completed a careful analysis and having taken all necessary steps. In the event of modifications to the company’s branding – especially if they’re extremely evident changes – the end client could have difficulty associating the product they already know with the new brand.
  Before suggesting a logo restyling based simply on our aesthetic desires (but it’s so ugly! it ruins the new design!), think of all the work behind it and of the probable consequences that will result from such a radical change. And, as long as this is neither your job nor your task, my sincere suggestion is: leave it alone.
• Institutional colors: if they’re part of the company’s identity, before changing them it’s necessary to evaluate the risk of confusing users that are accustomed to associating the company with the color blue (for example) and, seeing a green layout instead, end up disoriented.
• Useful and functional elements: The search field (as mentioned in the example above), the contact form, the navigation bar…sometimes it’s better to not completely overhaul the layout by avoiding position changes of the most frequently used elements. This is the main reason for which, even after numerous redesigns and various updates, most websites of large companies (for example, banks) always maintain a minimum of continuity and, especially on the home page, leave the main sections intact and visible. The user should notice the aesthetic improvements yet still feel “at home”.

Practical Examples: Let’s Redesign

After numerous theoretical concepts, now it’s time for a practical example. We’ll use this entertaining (and terrifying) collection from Noupe to help us with our project.  We’ll randomly choose a government website:  India, a country that has always fascinated me.

It’s clear that the website of the Indian government needs a good redesign: the graphics are practically in-existent and, most importantly, the information is presented in a chaotic and confused manner. The resulting website is difficult to use and, aesthetically speaking, definitely has room for improvement.

The challenge consists in creating a new layout that’s aesthetically pleasing, with a clearer and more consistent content structure, without completely redoing the current design.

To understand how the present content is subdivided and visualized, let’s start by creating a sort of “mental map” of the original website. In this manner we can discover how best to re-elaborate the content.

The top portion of the layout has red shading and the logo is on the left side, next to the phrase “the National portal of India”.

In our redesign, the header color remains reddish-orange. The logo remains unmodified and present on the left side, next to the same phrase used on the current on-line website. The new typeface is already more interesting and catches the user’s attention.

In the actual website, the search field and the LOGIN are on the right side. To avoid disorienting users, we’ll leave these two sections at the top right in the new layout as well.

In the actual site, the login and search field aren’t very noticeable and can easily pass unnoticed. In the new design, we’ve highlighted these two sections with color. The “contact us” link has also been made more visible.

The main content of the actual home page is subdivided in three sections.

We’ll recall this division by creating graphic containers that will enhance the aesthetic of the page and, at the same time, will give a clear and organized sense to the content. We’ll use the grid to help organize the spaces evenly and harmoniously:

Even though this redesign is created without a brief, and the end result could be more or less appreciated (I’m not here to dictate rules, and tastes are personal) the content is much more legible. The three sections are intuitive; the text is simpler to understand and is better organized. Sometimes providing too much information contemporarily can be a poor choice and can confuse the user.

Other elements of the page, like the (graphically terrible) links inserted in the menu at the bottom right and the banners that link to other content, don’t attract the user’s attention

In the redesign, the links have been inserted at the top, together with the other elements of the navigation bar (it’s useless to scatter links around the entire homepage: navigating a website shouldn’t turn into a treasure hunt!) and the banners have been redesigned as call-to-action buttons with colors, shapes, and typeface more appropriate to the layout.

Now that the content has been reworked in a more organized manner, there’s a bit more space to insert a link to a possible photo gallery “visit India”. This new graphic element adds vitality to the design and is a way to attract the user’s attention toward tourism in India. I’ll bet there would be a drastic increase in the number of visits to the “visit India” page.

Ok, after this long-winded article you must be tired, so let’s take a final look at our completed layout:

Now the site, in addition to its simplified content exposition, has a better design and a few key modifications have greatly improved its visibility and usability. All of this has been made possible by a specific redesign, not only by its new aesthetic (which still serves to give an identity to the site), but above all else by the strategic restructuring of its content.

Share With Your Friends

Tags: Design, Resources, Tips, Tutorials, Web Design