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.
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...
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)
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.
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)
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.
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.
9 - The Footer
Into the footer you can insert link list and info about the corporate (addresses, phone, email, google maps, etc...).
10 - CMS: use it or not?
11 - Using Frameworks
Use the frameworks to be more flexible and do the work in less time.
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)
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).
17 - Connecting the corporate to the Social Network
Open a window on social networks to stay in contact with the users through news and updates of the corporate activity.
18 - Checking...
Read Webdesign checklist to check your work