13/07/2010 - susana

Useful tips when redesign your website, iconshock case study

As you may have seen, in recent days, Iconshock decided to launch the new version of its website, hoping to meet all of our customers needs by offering a pleasant and organized site to them. In this article we will be reviewing the different elements that were improved from the original to the new version of the site, including design and navigability aspects, so you can get an idea of the process we did and also be able to see how the process of revamping a website should be executed. We will be exploring the different steps that must be considered while revamping a website.

newiconshock78

1. The decision of start revamping

Usually people like to change their look once in a while to project a renewal feeling and stay updated through the pass of the years. The same happens in web design, what yesterday was a beautiful design could become one of the rest on this days. For that reason, we recommend you to permanently review your competitors websites so you can be aware of the moment when a revamping becomes necessary. Sometimes you need a full redesign, and some others is enough with just a good revamping exercise.

To put an example, our website was doing fine with the first version that we made, but after several years we started to see how other websites were investing on their interfaces and that people in general were starting to pay more attention to the web aesthetic. In that moment we knew that it was time to bring Iconshock to the new era of the internet through the revamping of its entire website.

Before starting the design process, you must check what are the weaknesses of your current design to start working on them. We witnessed that our previous site was presenting an excess of white spaces, plain fonts and seemed too simple in general . Then we decided to give some texture and volume to the site by generating an original background that helps to reinforce the identity of the site, we also considered that the use of gradients and shadows will be a good choice to suggest the volume sensation.

Another thing to think about before starting the process is the images’ size. It’s important to give importance to the images, because thanks to this element the people may stay or leave our website. During the revamping of our website, mostly all the images have been resized in this new version to show a bigger previews that will help to captivate our costumers in a faster way than before without getting them suffocated. The other consideration regarding the images is the resolution, do not use images above 100 dpi, which is even too much. Procure generate every single image at 72 dpi.

Don’t forget that every website is always a working process, because every day new tools and ideas are coming out, so what you are doing with a revamping is just upgrading your website to the next version. Our team is developing new designs and implementations day after day to improve your experience while visiting Iconshock. If you had an idea of something that in our page is currently missing, please let us know and we will think about it.

2. Choose your new color palette

One of the most important things in web design is color. Even the minimalistic sites have a conscious use of the black and white palette; take a look to other websites and how they manage the color. Remember that every color produces different feelings, for example, green symbolizes peace and hope, blue represents calm and seriousness and red evocates energy and youth.

The first choice we made was to generate a color palette around blue, which we consider to be a neutral color that brings life and severity to the design without going to the extremes. You must be careful with using too much color and turn your color palette into a zoo, we recommend to use a basic 2 – 3 color palette and its tone variations. Thing also in terms of temperature, maybe your site goes better with a cold palette than with a warm one. Also remember that every time that you are working with web designs, you must use the RGB color mode.

newiconshock40

Sites such as ColorScheme Designer offers free services that can assist you on finding the fittest color palette to your website in a professional way.

3. Renewing the logo

For start, one of the most important things of every website is its identity, which usually is supported by the logo. When you begin the renewing process you can select two main roads, change completely the logo and generate a new identity or try to improve the previous logo and bring it to the current world expectations.

There are certain elements that will determine the transformation of a logo, such as the typography, the color, the effects and the icons. Usually what designers try when revamping a logo is to modernize it. In our designers' words, the difference between the original Iconshock logo and the new one is based on the modernity.  Try not to use more than 3 fonts on your logo, do not use photos, because they don’t resize as well as vector graphics, procure not to follow the trends, because they always come and go, finally, try to make sure that your logo maintains the same identity from any direction.

newiconshock44

newiconshock42

The original logo was written using the Micrograma font, which is elegant and clear. The new logo was created using the Aharoni font with a space reduction between letters and a preset effect to preserve the elegance and clarity while taking the logo to a better look.

newiconshock34

The designers decided to remove the .com text of the previous logo to distinguish the importance of the company’s name and leave a cleaner version of the logo.

newiconshock35

By cleaning the .com text, we move the importance to the company’s name.

newiconshock36

On the original logo, we used a total of 8 words to describe our company.

This days, people pay less attention to text and focuses more on the image, this have forced the designers and advertisers to provide all the important information using the less  possible words. Make sure that if you are using a phrase to reinforce your logo, use no more than 5 words.

newiconshock37

This is how managed to reduce the amount of words on the new logo. It’s always possible to shorten a phrase by using only its key words.

newiconshock38

newiconshock45

newiconshock46

Using effects to improve the text is usually a nice choice, unless you’re working on a minimalistic site and the effects won’t look good. Don’t exceed the use of effects because you can ruin your design.

newiconshock39

Another tip is to add graphic elements to the text, so it stops seeing as a simple series of words and becomes a design element. Depending on your website’s theme, you can think of something that indicates this theme and incorporates it into your logo. Because most of our work is done with graphic software, the vector tool element fits perfectly with the general idea of the company.

It’s true that by changing the text is possible to generate considerable changes to your logo, but there is also important to think about the color and the symbol. We have defined a blue palette, now we must play with the tones. There is another thing to take into account which is the fact that black and white can always play inside a color palette without affecting it severely. Another tip is that you can, for example, use more than just one color in one single text.

 newiconshock41

Make use of the grid to ensure the legibility of your logo, also explore color contrast between the text and the background.

newiconshock43

Try not to change drastically the logo’s symbol, because you will need to start promoting your brand from zero. Play with what you got and try to improve it without losing the idea. The Iconshock character remain the same, we just updated its look by improving the details of its clothes and switching the blue Frisbee for our thunder icon. The character was done completely on pixel art, none vector tools were used. We also decided to add some blue tones at the text to provide some textures to it. As you can see, we switched from a white interface to a blue one, as we explained on the introduction.

newiconshock01

You can appreciate the original logo (on top) and the new logo (on the bottom) to compare them. To resume, when you think about renewing a logo, you must consider a series of aspects that will improve the logo without losing its essence.

newiconshock29 

Another example of a modern logo can be found at designbump. They have a similar proposal with an elegant font complemented with subtle effects. They also placed their icon at the left side of the logo.

100sites248

The Pando’s logo uses a sans serif font with a basic 3 color's palette, represented on the logo which is a simple cube with great design level.

100sites249

This logo possesses just the necessary to be good. Well font selection, great color palette and a very subtle logo.

100sites250

A great example of a web 2.0 logo, beautiful icon and font work.

4. The menu

The menu is one of the vital parts of any website, because is the start point to navigate through the different parts of the site. Most of the web menus are made with hyperlinks with 0 design but full functionality, and that’s not bad at all, because for the costumers will be easy to do the navigation process. But if you are thinking about revamping your site, you need to start thinking in terms of design; not all the websites are appropriate to place an artistic menu, with illustrations and everything, but it doesn’t mean that you cannot put some design crumbs to your website. Working with opacity values, color gradients and effects can generate a beautiful menu that shares the same identity than the rest of the website.

The first thing you need to do is to evaluate the functionality and design of your current menu to determine the weak points. In our case, we found that our menu was saturated with information and almost heaped. We also noticed that our menu wasn’t outstanding about other menus.

newiconshock02

Our original menu was just a series of links connecting to the different parts of the site and were written with a default HTML font (Tahoma, Arial, sans-serif). Yes, it worked, but it did not seem attractive, which was one of the main reasons that led us to begin renewing our website.

newiconshock04

Give some dynamics to your menu, people want to feel that they are being part of the experience and not just a foreigner passing by. You don’t need to be a programming genius to create simple animated menus.

As you can see, our original menu had a lack of design, while the new interacts with the background thanks to the fact that is located inside a translucent box. We also modified the menu from being a series of links to a well distributed area of buttons. Hyperlinks are simple elements that allow you to access to different parts of a site; the buttons meet the same function with an aggregated value, which is the design. Buttons can possess great interactivity, such as color changes while rolling over them. You will find across the new website a decent amount of great buttons.

newiconshock03

Another aspect to consider is if all the information should be placed at the main menu. What you can do is to select the main links and maintain them at the main menu and then, create some sort of submenu which is smaller and where you can place the missing  links, this will help you to save space and organize your diagramming in a better way. Because of what we just said, we understood that it was necessary to reorganize the menu elements. The original menu had 10 elements across it, which in some cases tended to difficult the navigation. Now we reduced the menu down to 7 elements and placed another 4 on the top of the header. That way we ensure that you will have a more pleasant navigation experience.

newiconshock30

The menu of AnimHut makes use of a translucent box similar to the one we used on our redesign, although the highlighted items lose their translucent properties.

100sites251

An example of elegant menu can also be found at okb. Implementation of translucent colors and a nice font selection.

100sites252

Cosmicsoda integrates the menu without using effects, they just managed to integrate the menu through the same graphic style.

5. The header

We all know that the header is probably the first thing that everybody will look for when accessing a website for the first time, because there they will find the company’s logo, main information, menu and probably the search bar.

The header along with the footer represents what people can do in small spaces. Many people tend to the overuse of this two areas, saturating them with such an amount of information that will produce the opposite effect, which is that people will feel dizzy and decide to leave the place immediately. Another mistake is to not define the hierarchies, the logo cannot be as important as the contact link or the social icons bigger than the search bar. We advise you to dedicate some time to the diagramming of your header, do not fill it with information, try to place just the important things and make use of the empty areas. Also try to customize everything for nobody can have the exactly same design of your website. Elements such as the social icons can be easily placed on a different area outside the header and provide them the importance that they deserve.

As you can see, there is a lot of differences between the original header and the new. The original was saturated with information and the diagramming wasn’t the best, which caused problems to the users while they were trying to explore the site. Now our design team has made a great redesign of the header, creating a more elegant and organized design. We reduce the amount of elements without sacrificing the navigability.

newiconshock47 

Procure to always work with a base grid. In our case a simple grid was used to work on the new header, and now at simple view you will realize that the information is now easier to find. We removed a series of elements that became unnecessary, due to the fact that the current browsers provide them, such as translate and add to favorites. We believe that the new header allows to rest the eyes for a while, preventing you of being strafed with information from the start. The use of colors is also an important topic, because of the lack of a background on the previous site, many elements seemed to be placed without any conscience across the site, but now, the use of colors and different opacity values, have helped to generate a unity across the whole site, including the header, of course.

newiconshock05

newiconshock06

This is not a radical change, but it was a pretty cool improvement towards a better use of spaces and hierarchies. You don’t need to change everything about a previous idea to finish with something good, many times there are a lot of elements that can be used over the new design.

100sites253

The CSS Tricks’ header tends to get saturated but manages to maintain the perfect balance between design and information.

100sites254

Another example of great header is found at notified, organized and complete.

6. The footer

Many web designers use to forget about the footer and utilize it to simply place the information that was left once the header and the content were completed. But the footer is more than just a trash can, it’s a special area as important as the header, where you can place important information and show your designing skills. When you're revamping a website, one of the important things is to improve the footer, taking it far away from the regulars, it’s not necessary to insert amazing illustrations and artworks, with just a nice using of the diagramming, a thoughtful color palette and a few details, your footer can become a very important part of your website.

newiconshock48

Try to use a similar grid to the one you used on the header to keep the identity, we recommend the three columns structure to generate great footers. Also make sure that the footer stands in front of the content and not mixes with it. It’s very important to consider the information that is going to be placed on the footer, we suggest you place information regarding your latest posts, community comments and important information regarding your achievements and social network accounts.

It was difficult to determine the difference between the content and the footer on the first version of our website. The footer used to contain information regarding the latest blog and community posts and also the company information regarding the copyright.

newiconshock16

newiconshock17

The new footer traces a clear difference with the content but maintaining the identity through the color and the shapes. The footer is distributed in three main columns, with the first two keeping the same information fields and the last one of these containing something new. We decided to incorporate a big preview box of the latest free icons. At the bottom of the footer, we placed a window showing testimonials and another displaying our latest tweets. You will identify this two sections thanks to the characters that we included. As you may have noticed, we are working with fine gradients and shadows to generate a smooth volume sensation across the website, leaving behind the flat structure that we had before.

We recommend you to check our “200 best footers on the web” article to find some beautiful design examples.

7. Search bar (finder)

When people don’t want to navigate throughout each and every single one of the menu's links, they decide to recur to the search bar. Most of the search bars are composed of a text field to enter the search parameters and a small icon to give some identity to the object, which is usually a zoom icon. Browsers like Google have their own search bar, ready to be installed on the different web browsers such as Firefox and Safari, this element reduces the search times by providing an instant access to the browser without needing to access from the browser’s main website.

newiconshock49

newiconshock51

newiconshock50

The Google search bar uses a text field to enter the search parameters, a zoom icon to the right to indicate the function of the object and a Google icon to the left so you can change between different browsers such as Yahoo. To revamp a search bar, the importance lies on the details. Using the same structure of text field – zoom icon you can design a design element that outstands from the rest but can still be recognized as a search bar.

After considering all this aspects, we managed to achieve that our new search bar maintains the efficiency of the original with an improved design that will make your searches more pleasant.

newiconshock52

There is not a size standard for the search bar’s text fields, we recommend you to allow the people to see around 8 words when covering the full horizontal area of the bar, and a decent vertical area to let people feel that they have enough space to enter their searches. You can make a pretty design piece and still be following the previous suggestions.

newiconshock53

Many times the people waste the potential of a search bar by entering inaccurate search parameters. It is a nice idea to place some key word examples to guide the user towards a better use of the search bar.

newiconshock54

The zoom icon is probably the element that gives you the more freedom in terms of design. You can create a lovely icon to display your design skills and provide more identity to your search bar.

newiconshock07

newiconshock08

The original search bar was very simple, with no graphic design on it. The new search bar object has been customized with the help of our design crew to make it more attractive and also to reinforce the company’s identity. We pay a lot of attention to the color management, the shapes and the zoom icon so we can provide you a high quality design even in the smaller things.

newiconshock31

The Toronto’s search bar is  also customized, minimal and beautiful design with full functionality. As you can see, there is a lot of potential for designers even in a search bar.

100sites255

Another beautiful example can be found at Carbonica, the search bar merges perfectly on the website.

100sites256

David Torondel created a beautiful search bar that respects the original search bar structure that we taught you about.

8. Image slideshow

When making business through a website, you must always show your work in your home page, because that’s what seals the deal at the end. Starting with the search bar, everything must be talking about yourself. There is an element known as the slideshow, which is an animated gallery that scrolls permanently or mouse over and shows different examples of your work. By using a slideshow, you can display a lot of work without needing to fill all your area with static galleries, that will help you to display a lot information in an organized and compact way. According to the experts, slideshows are becoming more and more popular every day in modern design.

Between the things that you need to consider when making a slideshow. First, use thumbnails so the user can know at all time where they are, second, make the slideshow both automatic and manual to give your visitors more than one choice, also make a correct use of the diagramming, do not place an excessive number of elements, remember that the importance of a slideshow relies on the content. It’s important to always place a “previous” and “next” buttons, the slider is a design piece, not just a series of pictures placed next to each other, you should take that into account. Finally, try to integrate the slideshow to the rest of your website by the use of transitions or translucent colors.

newiconshock55

The first type of slideshow works by mouse interaction. The person needs to press a button or roll over an element to make the slideshow starts moving. An example can be found at Mint.

newiconshock56

The second type of slideshow works by its own, so meanwhile you can be looking at other parts of the site. The problem with this slideshow is that you have no control to see what you want. We found a slideshow that mixes the two styles at Visual Slideshow. The slideshow works by its own but also have buttons to navigate manually if you want to.

newiconshock09

Our original website didn’t have an icon slideshow. There was just some random icons inside a static gallery with hyperlinks on each image.

newiconshock10

Now we added some dynamic by turning this so called gallery into a beautiful icon slideshow that will let the visitors to see immediately more of our work.

Try to feature only your best work on the slider, so your customers can see what you’re capable of. Our icon slider was made by our programming and design team that features some of our greatest works. We also made it bigger than the previous gallery to increase the importance of showing our work. The translucent box was used as with the menu to stand out the slider without covering the customized background entirely. This is one of the nicest and dynamic implementations of our renewed website.

9. Social Icons

A few years ago, websites were able to succeed with just a great design and functionality, but now, that is not enough and website requires begin a permanent social interaction with their visitors. In web terms, the social interaction means that everybody shares works, ideas  and opinions with people from all over the world. Because of that, the websites now need to provide ways to let the users to interact with them. A lot of people realized of that fact and started to create websites specialized in social interaction, then websites like BlogSpot and Facebook emerged on top of the social networks.

Social websites are very important to stay in touch with your clients without the requirement of completely adjust your website to the social needs. The websites that use social bookmarking, ensure an increase of the visitors traffic, because they can subscribe to their social networks and publish opinions with other people that indeed will end visiting the website. On the past years, we worked with BlogSpot and Twitter, achieving great results on promoting ourselves. We placed social icons at the header of our website for all to see, but this affected the website’s appearance.

newiconshock11

As the previous image shows, we used to have our RSS feeder and social bookmarks located at the top of our header. In terms of effectiveness, it worked, because people found the buttons easily and started subscribing, but we were having some design issues.

newiconshock57

When the revamping of our website begun, we figured that our current social icons where identical to mostly all the social icons around, and that’s why we decided to create our own customized social icons as it always should have been.

newiconshock58

With the increase of the subscribers to social networks, we decided to upgrade our services and now we have a brand new Facebook account. It’s true that you can personalize the social media icons to your concern, but you must always keep the essence of the icon so the people will still understand it. You can make the icons with the pixel art technique or using a vectorial graphic software, remember to work everything at 72 dpi.

newiconshock59

We also worked on our Twitter icon, the new design maintains the essence of Twitter’s icon with a modern design look.

newiconshock60

With the RSS icons, we worked with gradients, leaving a final result not just similar to the original but also to the two other icons.

newiconshock32

Site Sketch uses a lovely aesthetics surrounding the whole site, even with the social icons, you can integrate this icons to the page by just graduating the colors to the same of the site. The social icons can be integrated to the page simply by changing the colors and adjust them to the same tonal scale of the website.

100sites257

Hand drawn social icons, beautifully done, check them out at http://motogpix.com/.

100sites258

Jazzsequence has also a great series of social icons that integrates to the website by having the same grunge style that the main logo.

newiconshock12 

We moved the three icons from the header and now they are next to the icons slider, occupying less space but still being easy to find. We decided to leave them at the right side of the slider to generate a tension point that will eventually guide the user to discover the three elements. Although the icons are customized, we made sure that they went along with the general look of the website. By the way, check out our social icons gallery to find some great designs that may fit into your website’s style.

10. Buttons instead of links

When making a website’s navigation, there are a series of elements that are in charge of the connectivity between different areas of the page or in different words, to link everything inside or outside a website. By default, the elements used to fulfill this task are the hyperlinks, which are simple words that after entering a code they become elements with linking functions. On the previous version of our site, almost everything was working through hyperlinks, which is not bad, but it doesn’t leave a range of possibilities in terms of design, which means that is designed to fulfill its mission only, nothing more.

newiconshock61

To distinguish a hyperlink of a simple word, you must check that the mouse's cursor modifies when you place over the link, also the hyperlinks are usually underlined color texts.

newiconshock62

Buttons are much more than just a text. They have an "on press" appearance and can be adjusted to adapt to the word’s extensions. They can do the same things that a hyperlink but with graphic design on them.

newiconshock63

The fact that this two are made to do similar things doesn’t mean that they cancel each other. Sometimes hyperlink works better in a design and sometimes the button does. You just need to learn when to use buttons and when to use hyperlinks.

newiconshock64

So, what you need to know is that both hyperlinks and buttons are useful resources inside a web project. Sometimes hyperlinks works better, for example when making lists or placing small links. Buttons are useful to improve the site’s appearance but cannot be used in excess, so we recommend you not to use them a lot. Now we have replaced several hyperlinks by buttons, which are customizable elements that can fulfill a function similar to the hyperlinks. We are using dynamic buttons, which means that they will be adjusting depending on the words extensions. Our crew generated an elegant button style that plays along with the whole design of the site. The fact of changing from hyperlinks to buttons will provide a nicer look to our website without losing functionality.

newiconshock14

11. Background

The background of a website can determine its whole identity. There are sites that leave a blank space in the back which is nothing more than a different type of background. When renewing your website, you need to consider if it’s better to have a dark background with light letters or a light background with dark letters, it all depends on your website’s theme. Usually we recommend to use any color but black, because that color tends to overcome the rest of the elements and doesn’t leave much freedom in terms of design. We suggest you check the different screen resolutions before making the background, it’s recommendable to make it near a size of 1600 x 1200 pixels.

newiconshock27

As we all know, the original version of our website was blank, with no background at all.

newiconshock15

Now we have developed a beautiful background with our design team’s assistance and adjusted by the programming team to reach our expectations. There is something very interesting about our background. It’s a dynamic element with determined parameters. While you move along the website, you will notice that the background will always remain at the same coordinates, besides, when you reach the footer, the background will not continue scrolling, which means that the footer will never be covered by the background, it will also remain with a high quality level no matter the resolution.

newiconshock65

newiconshock66

newiconshock67

newiconshock68

newiconshock69

We suggest you create the greatest background that you can, but nothing more, because that will be a lie regarding your design skills. It’s a beautiful background image that complements the blue sensation implemented all over the site. The designers have used a blue color palette to create the background that ranges from green blue to purple toned blue.

12. Bigger titles, new fonts

On web design, it’s important to have a conscious font selection process. Regarding the font size, you can make headings and other elements stand out by specifying that headings of level 1 should be about 30% larger than the body text, the level 2 should be 25% larger and so on. Previously all of the text fields were written with similar font sizes, differing only in terms of color. We noticed that and decided to improve it in the new version of our website.

newiconshock70

We suggest not to use exclusive fonts, instead try to explode the benefits of the common ones, among which are Microsoft Sans Serif and Arial. It’s also important to use clear fonts, easy to read for anyone. Try not to embed your fonts inside graphics or rasterize them, because they will not scale properly. Use this resource only with elements such as logos.

newiconshock18

The original font management of our site was good, the words were easy to read but, as with the hyperlinks, they did not have a design process on them.

newiconshock19

We changed the font towards a more modern one, we inclined for Tahoma, because it’s elegant, easy to read and attractive, although we adjusted a little the spacing values. Now you can recognize where are the titles and where are the regular paragraphs. The color we have chosen contrasts perfectly with the background and it’s easy to read.

13. A static banner

As we did with the background. The use of dynamic images is a great implementation for any website. You can use this technique to make things like the static background or to create elements that will stay permanently with the user due to its importance.

newiconshock21

We created a character that acts as a static banner. During all the navigation process at specific sections of the site, the character will maintain its position, so the user can access to the help sections without the need of scrolling up to the header and the contact link.

newiconshock71

The banner has the same ability of the background to remain static once it has reached the footer, so not to spoil it.

newiconshock22

This is a recommendable aspect to consider when you are revamping your website. The use of this static banner elements will facilitate the navigation process and enhance the design of the website.

14. Progressive loading while scrolling

Everyday people are uploading bigger and bigger images to their websites, sometimes making the mistake of uploading them at 300 dpi (print quality) and others with 72 dpi but huge dimensions above the 3000 pixels in one of its sides.

newiconshock72

This effect has been happening in part due to the increase on the megapixels capacity of the newest digital cameras. The webmasters have developed a series of tools to prevent the problems that are presented while loading bigger images, which causes troubles while accessing a website, this loading problems are also presented when you have a large amount of items, that together represent a similar size to a larger image.

One of the tools that prevents the loading problems is the progressive loading. This works in the following way: When you access a scrolling section of a website, only the images that are being seen on the screen will be loaded, then, when the user starts scrolling down, the following images will be loading while the person is scrolling up or down, this saves a lot of loading time and also helps to organize in an effective way the image galleries.

newiconshock23

Our previous website used to load the latest images that we were posting, it wasn't dynamic to easily navigate across our designs.

newiconshock73

If you used to have static galleries on your original website, we suggest you change it to a dynamic and random one, that improves the user’s experience. With the following screenshots we will try to show you how the progressive loading works.

newiconshock74

As you see, the images will begin loading only when you reach the limit, otherwise, only the images featured on the screen will be loaded.

newiconshock75

The system loads the next row of images once you pass the limit, this saves a lot of loading time.

newiconshock76

Now that the images are loaded, the process starts again, that’s why is called progressive loading system.

Before we launch the new website, contents such as the Custom Design consisted on a preview followed by a large list so people started browsing what they were looking for. If you needed to find a specific design in those days, it would take you a lot of time because you should have browsed over 500 galleries.

On the new version, you don’t need to scroll down the whole list and check one by one all the galleries. With the new progressive scrolling bar, you just need to scroll down until you find what you’re looking for. The icons will be loading while you are scrolling down, saving a lot of transference times and improving the speed at finding results.

15. Some sections should not be redesigned

When you make a revamping, there are certain sections that are already functional, so it’s not recommendable to remake them, you just need to adjust it towards the new website's look. During our revamping process we found a section that didn’t need a redesign, and that section was the Free Icon Set. This is probably one of our most visited sections, because people can download a lot of high quality icons at no cost. Due the fact that this is a highly visited section, it must be very organized and attractive. Our customers will be happy to find that we decided to leave this section untouched in terms of diagramming. The only thing we did was adjust it to the website’s style.

newiconshock25

Since the original website, this section had a nice diagramming and hierarchy management.

newiconshock26

After the revamping, the section’s structure remain the same, we just integrated to the new background and color palette.

16. Contact form

The contact form of any website it’s usually one of the most serious parts of a website, because is where the customers leave their questions and suggestions. We suggest to modify your contact section so it complements with the rest of the web’s identity. It’s very important to provide a complete contact form, that allows the user to leave or his doubts and opinions, remember that beyond the social networks, this is the most direct way to stay in touch with your visitors.

newiconshock23

Our past contact form was functional, but it didn’t have much graphic design

newiconshock77

As long as the information remains easy to read and the text fields are still functional and easy to find, you can go crazy in what design concerns.

newiconshock24

Our previous contact form worked perfectly, it helped us to provide a better service throughout this past few years, so what it needed was a new look, a new design intervention, which is exactly what our designers did. The new look of our contact form displays a beautiful tag cloud to the left, reporting what our strong points are and a vectorial illustration to show what we are capable of. To the right side we find the new contact form, which conserves the same information than before but with a fresh design, all custom made. We expect to be suggesting with this new design that our customers are the priority number one.

newiconshock33

An example of custom contact form can be find at kevadamson.com, where the contact form resemblances a nice hand made design.

100sites259

CreativeSwitch has some of the nicest contact forms around, organized, complete and pretty

100sites260

There is one more contact form we recommend at pixelounge, sober but beautiful design.

17. Final conclusions

Revamp a website is not always to start from zero, it’s a long process where you need to evaluate the pros and contras of your previous version, see the changes that other people are making and decide how to battle this digital battle. You need to elaborate a thoughtful color palette, determine the fonts that are going to be used as well as the sizes. Remember to work everything at 72 dpi and RGB color mode to optimize the performance of your website. Take your time, do not rush the process, your customers will appreciate the results if they’re are prove of a conscious upgrading process. Take advantage of the grids to make a great diagramming that helps your visitors to easy navigate the entire website. Besides all this topics, you must always think about your customers, what they want, how do they wanted to be, etc. In 2010, everything is about interaction, you must always provide communication tools to your users and be aware of their thoughts all the time.

As a service based on creativity, in Iconshock we're working all the time to provide an excellent browsing experience, with all the necessary assistance to our costumers. The color palette is planned to provide a relaxing experience, along with the selection of new fonts and styles. Also remember that we are uploading new icons every day waiting for you to download. We hope you find this new version of our website as a good step in the Iconshock experience, see you next time.

newiconshock27

newiconshock28

ThemeShock

13 Responses to “Useful tips when redesign your website, iconshock case study”

  1. fatahNo Gravatar
    July 14th

    great tips. this really useful. btw thanks yah. 😀

  2. adminNo Gravatar
    July 15th

    Great you like it, hope can result useful too.

  3. WebtreatsEtcNo Gravatar
    July 15th

    Very useful info, thanks for sharing. Your site looks amazing and the new logo is terrific!!!

  4. Sue BrettellNo Gravatar
    July 16th

    Wow, this is one of the most comprehensive descriptions of a rebrand and website redesign I’ve seen. Every detail carefully explained and illustrated with before and after images. Superb!

    I’m researching sliders for my own site redesign which is how I landed up on this page. I’ve already decided on a bokeh background so I’m pleased to see you using one so effectively.

  5. adminNo Gravatar
    July 22nd

    thanks :)

  6. adminNo Gravatar
    July 22nd

    Great you like it :)

  7. martinNo Gravatar
    July 22nd

    what happens with the new design? i only se the old site…

  8. deeNo Gravatar
    July 26th

    great tips! thanks!

    BTW: “Thing also in terms of temperature” (sic!) 😉

  9. RobertNo Gravatar
    August 26th

    What a great exposition of site re-design! It’s helped me to think about elements that have not previously had much attention.

    The note about watching competitor sites to determine if a revamp is needed is an essential one – indeed, that’s the impetus for me being here!

    Thanks!

  10. ArianaNo Gravatar
    September 9th

    Great tips and very useful illustrations

    Thanks

    Ariana

  11. DanielleNo Gravatar
    May 10th

    Useful as always, many thanx.

Leave a Reply