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...
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.
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.
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
10 - CMS: use it or not?
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
Ruby Frameworks
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)
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)
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.
Precious Twitter Checklist - How Twitter works for you!
18 - Checking...
Read Webdesign checklist to check your work