6 steps for creating a successful business web design solution

Competitiveness in any field asks for an efficient process that is also well planned and web design is no exception.

web designers are visual communicators and believe that to succeed online we need to be competitive and innovative. Simply having a website for the sake of having a website is a waste of money.

Having a suitable process for designing a website will help achieve the end goal more efficiently. 

A general website design process can be broken down into six distinct steps:

1. Strategy

It may sound like common sense but a strategic plan is essential for the development of any website project. It is a good idea to fully understand the goals of a project.

Goals may include:

• Rebranding of a business
• Improve rankings in the search engine
• Increase leads and sales
• Enhance a current website
• Modernise a website

Make sure a document is produced to ensure both the developers and client are on the "same page". Never start the development of a project if you are unsure of a specific aspect.

Like I always say to my staff "ask a million questions" and have a "million fewer problems".

2. Planning

Web development projects can be super simple or very complex. In either case, a good plan of action will lead to fewer time delays.

For complex projects, it is worth setting out a road map. This can be a simple spreadsheet that briefly states the task, duration of development and deadline for delivery. You can share this document with your staff and client to ensure the development of a project is kept to a strict time table.

Requirement analysis - it is extremely important that all requirements gathered during the consultation are researched and confirm are achievable. Always look for alternatives if you think there are better options, remember you are a consultant so find better solutions for your clients should be one of your main goals.

Project charter - all the information you and the customer have gathered during the requirement analysis should be fully documented. This will serve as the point of reference throughout the project.

Project contract - ensure a contract is agreed and signed before starting the development of a website. Fully document the technologies used, the processes required, copyright ownership, project timeline and payment terms.

Accessibility - ensure you request and validate details such as FTP login, control panel login, database configuration, coding languages used and framework installed on the website.

Resource requirement - if you are planning to use open-source development platforms like WordPress then don't forget to factor in costs for maintenance, third-party plugins and web server management.

3. Design

The look and feel of the website are developed as per the customer’s expectation and what they want their audience to experience on their website.

Wireframe and design elements planning – before starting any design work you should consult at minimum the following elements:

• Colour scheme
• Logo
• Artwork
• Visual elements
• Typography
• Rich media
• User experience
• Mobile device compatibility

I would recommend building a basic wireframe which can be a great tool for refining layouts before the design process starts. To give you some help check out this Website Wireframe Tutorial.

Mockup presentation - create a single mock-up design for the website home page. Host the page on a web server and use HTML/CSS to display the mock-up in desktop view. 

Assessment and approval cycle - Send mock-up design work link to the client and then refine artwork based on feedback. Make sure the home page is signed off before you start designing other pages.

HTML/CSS coding - once the customer and you have agreed on the mockups you will be free to move to the next stage. This is the stage where you will develop the design using the HTML and CSS code as the base of the website.

4. Development

At this point, you should have good documentation or the web project and a set of HTML/CSS files.

Framework - you need to pick and implement a development framework – Ruby or Rails, ASP/PHP or a content management system like WordPress.

Database - depending on the technology used you may be required to set up a database. Ensure the hosting company for the website can support the required technologies.

Page template - You can only take the CSS/HTML files for different page designs can code them into the website system. 

Features and interactions - for the special features of the website functionalities need to be developed. Always speak to the client and get clear instructions and expectations before agreeing on custom development work. Ensure you do a feasibility study to make sure you can deliver!

Content - in most cases the client will supply written content for the website, if you are working on SEO then you will need to advise the client on content writing or use an SEO copywriter. Images can be purchased or sourced from stock libraries.

Links and functionality testing- make sure all the pages that are created function properly. Test for 404 error pages and if you are re-building a website ensure you setup 301 re-directs for old URLs.

Security - need to apply security features to the website. Set up an SSL certificate and 301 redirect HTTP to HTTPS. Also, implement Google Recaptcha for all logins and form processing.

Mark up - the required elements for the social media and SEO purposes need to be implemented. Use tools like addthis.com to speed up development for social bookmarking.

5. Launch

It is here that you make the final touches of the website before transferring it to the customer’s server and it is ready for viewing by the public. The next step will be to hand over the documented style guide, site structure, and all other deliverables to the customer.

Refining- need to identify the parts of the website that can be further improved. Make an action plan and speak to the client about future development.

Transfer to live server- for public viewing and accessing it needs to be transferred to a live server. After transferring the website makes a full Cpanel backup.

Dry run- a final diagnosis of the website has to be done. Different tools like code ventilator, broken link checker, browser/device testing, and spelling and so on. Use tools like HTML validator, CSS validator, SEO quake to seed up analysis and find issues.

Documentation and training- a soft copy of the sitemap, details of the framework, and the languages used all need to be documented and provided to the customer/end-user. Along with that training also is given on how the content can be edited. I would advise making training videos using Open Broadcaster, you can transfer the videos to the client giving them a resource that can be referenced at any time.

6. Maintenance

Periodic maintenance is needed for all websites. You should aim to agree with the client to set up a quarterly maintenance review of the website. 

Following actions and updates are involved in this phase:

• Resolving technical issues
• Optimising website through A/B testing
• Updating the overall design of the website
• Updating and implementing new features
• Updating and loading new content

For more useful tips take a look at the info-graphic below created by Newt Labs.

(Click to enlarge infographic)

Article created by: DCP Web Developers London