Updating a Website: Design and Layout

devon — Sat, 19 Sep 2009 15:05:03 +0000

By now most people have realized how vital websites are for creating a successful business. It is the perfect place to keep customers informed about what you have to offer; the content is what people need to see. However, many people still overlook the importance of a websites design. This is what separates uninteresting, plain, and amateur sites from clean, sleek, and professional ones. This is the first of three posts taking a look at our recent redesign of i2iwebmedia.com, and giving some insight into how the design of a website truly enhances the user’s experience and perception of a company. Let’s compare some screenshots from the old site and the redesigned one to get a better understanding of exactly what I mean.

These are the before and after screenshots of homepage. Although they both contain the same elements, the updated version on the bottom is much more professional. But why exactly? One simple reason is the shape of the boxes. Yes, we all love the use of curved boxes in our websites. I do too. People are attracted to their organic quality. However, we felt that a better way to create a sleek corporate design was to use rigid boxes. The pages become much more solid and structured.

These two examples allow us to take a better look at the top and bottom navigation. The original design used a main navigation at the top of the page, with a vertical sub navigation on the side. Placing the main navigation in the header space that the logo lives in takes away from the presence of the logo itself. By separating the navigation from the logo, our identity pops off the page. The use of a vertical navigation cuts into the content area, causing more clutter where the information should be clearly displayed. Also, using two navs can make it difficult for the user to find their way around the site. When we redesigned the site, we wanted to consolidate the navigation to a single horizontal navigation making it easier for a user find what they are looking for. The bottom navigation was another area we felt needed some tweaking. In the original design, the bot nav felt very squished and stood out too much. We wanted it to be much more subtle, yet feel just as sleek as the rest of the site. Left aligning the bottom navigation and using a faded grey transforms it to a secondary element that isn’t jumping in your face.

The before and after examples of the custom design page will help show what color and imagery can do to enhance a site. Color is an integral tool in branding as well as enhancing information, however our original design actually used too much color. The overlapping colored boxes, white space, and grey side navigation create a very chaotic page. In the new design we simplified our use of color, creating a system that placed any primary information into a grey text box, and highlighting any sub information in blue and orange boxes below. This not only separates the type of information but also makes the site less visually cluttered. Imagery along with color is a vital way in creating a specific look and feel of a website. The original design use images without thought into what they should mean or how they should relate to the information. We finally sat down and found images that said something about each page. This can also be seen on the Web Design pages above.

The portfolio page is the last major change we felt our site needed. The original one used a scrolling bar of images that could be clicked on to open that website. This made it difficult for users to quickly find what they wanted, as they had to wait for the bar to scroll. In the updated design we broke down the portfolio into 3 testimonials and a “more clients” section with a grid of the remaining client sites, adding more usability for the user.

Once our site had been redesigned using these ideas our image became much more sleek, clean, and professional. The important things to remember when designing a site are navigation, color, imagery, and usability. Paying close attention to these areas can transform an amateur site into a professional site that brings in lots of business. Don’t forget that design is what a user will see first, and many times influence their decision to explore the site or not.

Welcome to the i2i Blog!

rick — Mon, 31 Aug 2009 04:59:51 +0000

Welcome to the i2i webmedia blog!

Devon, Vin, and I would all like to introduce ourselves and hope that everyone who stops by will either learn, or contribute, new ways to design, develop, and drive sites to succeed.

We all have a few ideas for near-future posts, including a small mini series Devon and I plan on creating, discussing the why’s and how’s of redesigning the i2i webmedia site to its current form.

Until then, stay tuned, comment on our blog and be sure to let us know about anything interesting that pops up in the world of web development.

-rick