NEW WEBSITE DESIGN/DEVELOPMENT GUIDE -STEPS
Successful new websites are when “less” is almost always “more”. Focus on your central message. Great websites are clean, crisp, focused, credible, responsive, approachable and in some cases can be a little unpredictable or surprising.
Below are the steps you will help you manage your new website project:
1. INITIAL INFORMATION GATHERING
This brief template will allow your creative and development team to understand your current brand position, objectives and budget. Be brutally honest when filling this brief so the outcomes you get are align to your brand needs.
The most important point is to decide and communicate clearly what you want users to do once they visit your website and prioritize the top three user actions.
You might already have decided your domain name and a robust and secure hosting company; if not your web development provider will be also able to do this for you.
One aspect that is becoming increasingly important is to decide at what extend your content needs to be social and what social plugins (facebook,twitter, yelp) are benefit the user experience and conversations with you. I would suggest to make your content as social as possible including all the facebook,twitter widgets (likes, comments, etc) which will not just make your content highly social but also personalized if your web developer can also add the Facebook Open Graph API (I will explain later what this is).
2. LOW FIDELITY PROTOTYPING
Successful prototyping and approval will save you time and money. Wireframes are used for prototyping. Wireframing is a crucial step as it helps to pinpoint potential problems early in the process.
Wireframes offer a visual representation of content, hierarchy (deepness - try to keep it as flat as possible), content theme (sections, subsections) and layout (visual arrangements).
Good example of website hierarchy is the Apple website where the website is as flat as possible and the user do not need more than three clicks to find specific information.
First create what I called “low fidelity wireframes” for key pages: homepage, editorial pages, product pages, main section pages, forms, thank you pages. Ensure that some visual real estate for social plugins are added in all pages.
The current and most advance social plugin is Facebook Open Graph API where website can customize information depending on what users interests and likes are. Great examples of the Facebook Open Graph API implmented on a site can be seen on CNN, TripAdvisor or the New York Times websites. (Note: you will have to be logged in Facebook and allow these websites to have access to your information and profile).
The objective of these “low fidelity wireframes” is to show and decide how user interface will work.
At this point, specific design elements will not be added.
A great tool to use for low fidelity wireframes is Go Mocking Bird.
Remember here is where you agree on the navigation, hierarchy and layout. No more than that. At this stage you can also have a visual clue on where the “call to actions” will be located and the internal linking boxes/links.
User friendly wireframes make it easier to communicate ideas, cut down on project costs (due to fewer design revisions later), and enable greater upfront usability and functionality testing.
3. HIGH FIDELITY PROTOTYPING
Once you are happy with the low fidelity wireframes, high fidelity wireframes are needed to be completed. Most web designers use Adobe Fireworks or Photoshop to complete them.
At this point logos, images, and some sort of text are needed.
Design elements (look) such as font type, colors, images will be added. An Art Director can be included to decide and approve the “feel” of the high fidelity wireframes.
Also, this is a great time to start optimizing the sections names, product pages names and titles. Search Engine Optimizers (like me) can suggest better names for sections, navigation titles, page titles, meta descriptions to help improve organic rankings in Google.
4. CODING IT
Once you are happy with the high fidelity wireframe, a web site developer can start coding the website on HTML or PHP or other web coding program. If you are building forms for users to fill in, you will need to decide where the information needs to go to (email address, CRM platform, email marketing provider, other).
If you have decided to install Facebook Open Graph API, your website developer will turn each of your web pages into graph objects by adding the Open Graph protocol <meta> tags and the Like button to your webpages.
If the website is going to collect sensitive information about users such as names, credit card details, etc…the website will need a SSL cetificate where the host encrypts the data and is safely sent to your business or store in your CRM, CMS or email marketing platform.
If the site is going to sell online, the site will need a shopping card platform where users can browse, select and buy products. The easy option for online payment is by having a Paypal account or you can set up a merchant account with your preferred bank and get a e-commerce gateway to manage your online transactions such as Eway.
5. TESTING IT
Once coded, the website can be tested with some content or data to find any problems, browser compatibility and others. At this point you might want to add your preferred web analytics code (Omniture, Google Analytics, Webtrends) to each of your website pages so you can track and measure the success of your site.
6. GO LIVE
At this point the website is ready to go live. send it to your co-workers to trial it and get feedback on any bugs the site might have (hopefully none if testing has been fully executed).
7. PROMOTE IT
You are now ready to promote your website by social media, search engine marketing, viral videos, display banner advertising, online affiliates or others.
8. IMPROVE IT
Successful websites are like houses..you have to mantain them, refresh the look and feel and improve its functionality. I would suggest to do a website revamp at least every two years.
I can project manage the whole process for you and find the right providers.
Cheers Mauricio +61423 388 930
