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:
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:
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:
- 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.
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.
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:
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.
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.
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.
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.
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.
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. 😀
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.
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.
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
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.
Case Study – Karressinc: The Results
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.