The Design & Development Process
A documented outline of steps required in order to complete a typical Web design project
The following outlines the work required, & breaks these high-level tasks into sub-tasks & provides helpful resources. This can be used as a road map for your project
This is a typical process, it may vary slightly depending on the scope of the project.
The first step in designing a successful web site is to gather information. A number of factors need to be taken into consideration when designing the look & feel of your site, & it’s required functionality. I have created the Website Project Enquiry form to gather this information.
Questions you can expect to be asked
What is the purpose of the site? Do you want to provide information, promote a service or sell a product?
What do you hope to achieve by building this site? Two of the more common goals are either to make money or share information.
Consider their age, sex or interests – this will help determine the design for your site & its content structure, flow & SEO.
What kind of information will your target market be looking for? Are they looking for specific information, a particular product or service?
What does this look like to you, & how do we measure it?
The planning stage is arguably the most important, because what’s decided here sets the stage for the entire project. This is also the stage that requires the most interaction (on your part) and attention to detail.
- Requirements analysis
This includes your goals, target market, detailed functionality requirements & as much relevant information as you can provide.
- Project scope
The project scope (or equivalent document) sums up the information that has been gathered & agreed upon in the previous point. The documents produced at this stage are typically concise and not overly technical, & they serve as a reference throughout the project.
- Site map
A site map guides end users or helps them to find a piece of information quickly. I’ll provide you with this – based on the information you provide.
- Provide access to servers
Typical information to provide includes FTP host, username and password; control panel log-in information; database configuration; WordPress login details; & any languages or frameworks currently installed.*
* This assumes you’ll be providing the hosting environment, if you require this service then I will provide you with these details for your reference.
The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables here are a documented site structure &, more importantly, a visual representation of the site. Upon completion of the design phase, the website will more or less have taken shape, but for the absence of the content and special features or functionality.
- Wire-frame and design elements planning
This is where the visual layout of the website begins to take shape. Using information gathered from you in the planning phase, I’ll begin designing the layout using a wire-frame
- Review and approval cycle
A cycle of reviewing, tweaking and approving design mock-ups will often take place until we are both satisfied with the design. This is the easiest time to make changes, not after the design has been coded.
Development involves the bulk of the programming work, as well as loading content. I always keep code organised and commented, & refer constantly to the planning details as the full website takes shape.
- Install/set up development framework
At this stage I’ll create a staging site using WordPress & install any plugin’s or theme frameworks required for the build. You will access to this site during development.
- Develop and test special features & functionality
I like to take care of this before adding the static content because the website now provides a relatively clean and uncluttered workspace. I also like to get forms and validation up and running at this stage as well.
- Fill with content
All of the content provided by you will now be uploaded to the site.
- Test & verify links & functionality
This is a good time for a full website review, so that we can make sure everything is in working order & that nothing has been missed either visually or functionally.
The purpose of the launch phase is to prepare the website for public viewing. This requires final polishing of design elements, deep testing of interactivity & features &, most of all, a consideration of the user experience.
Once I receive your approval I’ll migrate the staging site to it’s live state. This marks the official launch of your site, as it is now view-able to the general public.
If we’re not scrambling to meet a deadline, polishing a completed build can make a big difference. Here, you can identify parts of the website that could be improved in small ways.
- Migrate to live server
This basically means transferring the site to a live Web server – from the staging environment.
I’ll run the website through final diagnostics using the following available tools: code validators, broken-link checkers, website health checks, spell-checker and the like.
- Final cross-browser check (IE, Firefox, Chrome, Safari, Opera, iOS, Android)
I’ll check the website in multiple browsers one last time.
I’ll now take care of all the little tasks related to closing the project. Packaging source files, providing instructions for use & any required training occurs at this point. I’m always available for future maintenance & are committed to ongoing support.
- Hand off
I’ll make sure you are satisfied with the site.
- Provide documentation & source files
I’ll provide documentation for the site, such as details on the framework & plugins used.
- Project close, final documentation
I’ll check in a month down the road to make sure everything is going smoothly.