How to Redesign a Webpage

Redesign a Webpage: Before and After of Karressinc.com website thumbnail - http://DeniseJones.me

When revising the look of a website, you want to plan out the steps needed in order to make it better. Below is an overview of a website I had the pleasure to redesign for a voice-over artist, Yvette Jones. I’ll walk you through the steps that I took (and didn’t take) when I began working on it so you can get an idea of what’s expected when redesigning a webpage.

Case Study – Karressinc: Voice Over Artist – Redesign a Webpage

Here is how karressinc.com looked when I first viewed it:

Photo of Karressinc before its redesign - http://DeniseJones.me

Screenshot of Karressinc before redesign

Taking a quick view of the page, the copy was very small and undistinguishable. The section headers were the same size as the main copy and even with the varying pink colors throughout and the designs for the header and background, nothing stood out to hold my interest.

What Changes Are Needed? – Redesign a Webpage

Even though I could tell what needed fixed, I didn’t specifically highlight the changes that were needed. Doing this would have allowed me to show my client what the problems were and why. I was able to verbally explain what I was thinking but it’s always best to show your client what you’re planning on doing. Here is what I should have shown her:

Notes on changes to the Redesign Webpage of Karressinc - http://DeniseJones.me

Notes on changes to the Karressinc Webpage

1.) The navigation was a bit small and after viewing the content for those pages, we decided to remove and rename some so that it would include:

  • Home
  • My Profile
  • Portrait Page
  • Contact Me

2.) Borders really do make a picture, column, paragraph, or any HTML Element stand out on the screen, so I suggested that I add one to hers.

3.) There’s nothing wrong with white or empty space. Many websites are built around minimalist design but in this case, repositioning her quote, located at the bottom of the page, would fit quite nicely next to her photo.

4.) The copy for this page is very small and we need to provide visual typography hierarchy to let our visitors know what they’re about to read.

5.) The sidebar design should distinguish itself from the rest of the body content so your visitors can see other content you have to offer. This can be done by having a different color background, well defined headers, descriptive copy, colorful images, and anything else that will grab their attention.

6.) I didn’t feel the need to do a lot with the footer design except change the background color and update the navigation.

Web Coding – Redesign a Webpage

Now that we know what needs to be changed, let’s go through the code that I used to make those changes.

The Navigation

I mentioned earlier that the navigation was too small to read and the pages needed to be revised. Below is a screenshot of the before and after. You can see that the updated navigation is bigger, has been reduced from 6 links to 4. After doing a run through of what Yvette wanted, we decided to merge some of the information and/or remove them completely from the page.

Old versus New Navigation comparison of Redesigned Webpage of Karressinc.com - http://DeniseJones.me

Old versus New Navigation comparison of Karressinc.com

Now that the menu is readable, I wanted to make it a little more active when visitors click through them. There were two main things I wanted to accomplish:

  • Place an underline for the link of the current page
  • Change the background color and link color when rolled over

Here is the code that I wrote to make these changes and a few other amendments:

CSS Navigation Code for Karressinc.com - http://DeniseJones.me

CSS Navigation Code for Karressinc.com

Photo and Quote

Depending on the design of a page, you can decide as to whether you should add a border around your image or leave it bare. Since this was the only picture on the page, I wanted to give it a border to make it stand out from the background. What I did was create a feathered, pink border in Photoshop and expanded it.

The other task I wanted to achieve was adding something the right of her picture since having nothing didn’t didn’t feel right. I place the quote she had at the bottom of the page, increased the line height, italicized it and add pink quotation marks.

Photo and Quote Comparison for Karressinc - http://DeniseJones.me

Photo and Quote Comparison for Karressinc

Normally when you add copy next to a photo, it automatically sits below and my goal was to have it directly to the right of it but not up against it where there is no space between them. The code below will show you what I did.

CSS Code for the Photo and Quote section of the Redesign Webpage of Karressinc - http://DeniseJones.me

CSS Code for the Photo and Quote section of Karressinc

Yvette didn’t want to use her real name for the site so adding it to her picture wasn’t an option, but I think I should have at least added her website name underneath her photo so people would know immediately that she’s Karress.

Body Copy and Section Headers

It doesn’t matter if you have perfect vision or not, trying to read small copy is very annoying and could cause people to click away from your site. Besides making the copy readable, I needed to add some distinction with the services Yvette was offering and that included adding an <h2> element and bolding and emphasizing copy.

Body and Copy Before and After Comparison for Karressinc - http://DeniseJones.me

Body and Copy Before and After Comparison for Karressinc

Sans-serif fonts (fonts that have smooth edges) tend be easier to read on the web while serif fonts (fonts with dashes and hooks on the edges of the letters) are easier to read in print form. The font used for Yvette’s site was Times/Times New Roman and I changed it to Verdana or whichever sans-serif font is available on a person’s computer.

CSS Code for the Body Copy and Headers of Karressinc - http://DeniseJones.me

CSS Code for the Body Copy and Headers of Karressinc

Looking back, increasing the size of the font to 14px instead of keeping it at 12px would make it a lot easier to read. It’s not difficult the way it is but I’m thinking that I could have bumped it up a bit.

At the time, my knowledge of em’s and percentages used for font’s was very little and something that I would do now would be to change the values so that the copy would increase and decrease without being too difficult to read.

Sidebar

The contents of the sidebar contains mp3 files of Yvette’s work and is present on all the pages of the site. This is the heart of what she wants to present to her visitors and it was easily looked over since there was nothing to catch a person’s attention. My goal in this section was to add a background color, create headers to define what people would be listening to when they clicked on the link, and make it look…pretty. 😀

Sidebar Before and After Comparison - Redesign a Webpage for Karressinc - http://DeniseJones.me

Sidebar Before and After Comparison for Karressinc

One of the great things that I like about CSS is the ability to add your own image for your listed items and to make the demo links stand out, I created a pink petal as the image for the list.

CSS Code for the Sidebar - Redesign a Webpage for Karressinc -http://DeniseJones.me

CSS Code for the Sidebar for Karressinc

As I was redesigning the layout in Photoshop, I thought it would be nice to have a abstract design at the bottom. This isn’t something that’s required but you can add some colorful elements to a design.

The Footer

Footers can contain a lot of information that you can share with your audience. Many of them will have:

  • main navigation
  • contact form
  • subscriber form/link
  • social media
  • latest/popular posts
  • and more
Footer Before and After Comparison for Karressinc - http://DeniseJones.me

Footer Before and After Comparison for Karressinc

The contents of Yvette’s site is minimal and so adding the navigation, copyright info, who was responsible for the design and coding was all I felt the need to do.

CSS Code for the Footer for Karressinc - http://DeniseJones.me

CSS Code for the Footer for Karressinc

Case Study – Karressinc: The Results

Photo of Karressinc.com after its redesign - http://DeniseJones.me

Photo of Karressinc.com after its redesign

Yvette was pretty pleased with the overall look of the site and I’m happy with it myself. Of course there are always some changes that can be made but at the time I thought it was pretty good.

Case Study – Karressinc: Conclusion

Redesigning a webpage takes just as much thought and planning as creating one from scratch. The main thing to remember is to take your time to figure out all the changes that are needed and test your work as you make updates.

Tell me what you think…

What other techniques would you have implemented in this design?  Let me know what you would have done to improve the layout of this site in the comments below.

Liked This Article?

Share this article with your friends by clicking the links below.

This entry was posted in CSS Tutorial, Web Design, Web Development. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

did you enjoy this article image

If you did, submit your first name and email address below to get the latest posts on coding, designing, and other web related information. PLUS, get my FREE EBOOK entitled
“10 Steps Towards Creating a Website”...INSTANTLY!

One Comment

  1. ClickPoint says:

    Thanks for detailed article on website redesign, it is very helpful for website redesign services for the client. Article clearly explained what all are the key points needs to be considered while redesigning the website.

    One more important point would like to add to the topic that, we should be very careful while redesigning the website related to content, where we shouldnt change the content drasticly, which may loose the SERP of the website.

    Thnx

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>