Restyling a Corporate Website… Do you know how to start?

06th maggio 2009 by WebAir

Restyling a Corporate Website: do you know how to start?

Oggi vogliamo parlarvi di come procedere nel caso in cui dobbiate effettuare un restyling di un sito aziendale. Abbiamo creato un lista che parte dalla semplice osservazione del vecchio design e finisce ad un scheck del lavoro svolto.

Noterete quanto siano importanti alcune operazioni (all’apparenza banali) durante la realizzazione di siti web per aziende.

Buona lettura!

Today we talk about how to realize the restyling of a corporate website.

Step by step…

1 – Observe the old design

Watch the old design, and remember, the new design will be different not similar.

The customer must see the difference between the old and new. Remember to write what are the parts of the site or the styles that the client considers important.

2 – Visit the Company

Can be useful visit the offices of the company to understand how the company works. How the products (or the services) are prepared, the corporate philosophy, his style and how the company communicates with customers. The new design will reflect the values and ways of working of the company.

3 – Choose the New Style

You can choose the new style in relation to the area of the company. If hi-tech, you can choose a dark design or a design with cold colors. If a green corporate, choose the green and hot colors. If a portfolio, well… in this case you can choose differents style, dark, minimal, clean, hand-made, with paper background etc…

50+ Dark Website Design

Green Design Showcase – Nature Inspired

Hand-made modern Design Style Showcases

40 Fresh, Elegant and Clean Design

Minimalistic Design = Efficient Comunication?

What you can do with the Paper in Webdesign: Examples and Best Practices

4 – Choose the New Layout

Fluid layout? Fixed layout? 2 columns? 3 columns? Choose it after you post a question: what the device in which the website will be seen? Desktop, netbook, smartphone? You can choose to make different versions for different devices or one versione compatible with all devices (hard but not impossible).

jQTouch (jQuery for mobile device)

Table Layouts vs. Div Layouts: From Hell to… Hell?

Creative Print Typography Layouts

Free CSS Layouts And Templates

5 – Logo Restyling (if necessary)

Not change drastically the logo because it’s the symbol of the corporate, people it’s accustomed to recognize it. Change it only if the client want it.

60+ Beautiful Logo Design Tutorials And Resources

Drawing Inspiration From Creative Logos

6 – Choose the Typography

One of the current trend it’s to choose amazing typeset to attract the user, but dont’t forget: only few are standard font, the others not. For Ex: you can choose a not standard font for banner or header images and a standard font for the rest of the text.

CSS Font properties (W3 School)

Fonts (W3C)

Corporate Design – Showcases and Typographic Resources

Web Typography – Tips, Tools and Tutorials

7 – Designing the Header

Some suggestions for awesome header: big, with the icons of the internals link or with the image of the last product/service and the link to watch his page. It’s not important if you aling it to left or right or to the center of the page.

Top 15 Headers

Blog Headers For Free Download

8 – Realize the Sidebar (if necessary)

In many cases a sidebar can be useful for the users. It can contains menu of the website, widgets (calendar, photo gallery) and other elements as the search box. Don’t insert many menu or much text because this may confuse the user.

10 Beautiful Sidebars

Can a Stylish Search Box helps users?

25 Innovative and Creative Navigation Menu

Innovative and Creative Navigation Menu Part 2

9 – The Footer

Into the footer you can insert link list and info about the corporate (addresses, phone, email, google maps, etc…).

Absolutely Uniques, Creative and Useful Footers

Footers In Modern Web Design: Creative Examples and Ideas

40 Footers creativi

10 – CMS: use it or not?

Depends on customer requirements; for small companies that do not have big needs, you can choose to use CMS but for big corporate is not advisable. Realize an automatic engine (in php, ruby, or other…) to enable the publication of news, photos or other.

20+ Trend WordPress Themes

100 Excellent Free WordPress Themes

Ultimate Guide To Using WordPress For A Portfolio

11 – Using Frameworks

Use the frameworks to be more flexible and do the work in less time.

JavaScript Frameworks

PHP Frameworks

The Zend Framework

CodeIgniter

CakePHP

Ruby Frameworks

Ramaze

Nitro

Camping

CSS Frameworks

Yet Another Multicolumn Layout (YAML)

12 – Use the CSS Tools

Grid, typeset, layout and muche more > 40+ “Must see” CSS Tools

13 – …and also CSS Techniques

don’t forget to read 16+ Easy CSS Techniques that Simplify the Webdesigner’s Life

14 – Realize the 404 Page (if necessary)

Very useful for users and spiders. An impressive 404 page can convince the user to visit the website.

How to Seo friendly and Creative 404 Page with WordPress

10 Creative 404 Pages

Wanted: Your 404 Error Pages

15 – Don’t forget the Sitemap!

Don’t forget to realize the sitemap page (html) with all the link of the corporate website! Eextremely useful for users that are lost and the spider. Do the same in XML (it enable the spider to read all the pages of the website).

16 – SEO Tips

Don’t forget to use: heading elements in correct way (for ex: not abusing H1, use it only for website title), link title (a href=”…” title=”title-of-link”), alt attribute for images and right name for the page of the website (ex: …/contact.html, …/netbook.html, …/realizzazione-siti-web-bologna.html, …/siti-web-bologna.html, not mail.html, web.html or similars) and analytics tools (like google analytics).

6 Tips for Really Useful Headings

Use the alt attribute to describe the function of each visual (W3C)

SEO Tools List