Process of Design
Achieving optimal design solutions requires an effective design process that provides a framework within which web designers can consistently deliver high-quality work.
Processes of design can differ based on the nature of the product. A sample process:
The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.
Client goals, target audience, detailed feature requests and as much information as we can possibly gather.
The project charter (or equivalent document) sums up the information that has been gathered and agreed upon in the previous point. These documents are typically concise and not overly technical, and they serve as a reference throughout the project.
A site map guides end users who are lost in the structure or need to find a piece of information quickly.
Contracts that define roles, copyright and financial points
Payment terms, project closure clauses, termination clauses, copyright ownership and timelines.
Gain access to servers and build folder structure
Typical information to obtain and validate includes FTP host, username and password; control panel log-in information; database configuration; and any languages or frameworks currently installed.
Determine required software and resources (stock photography, fonts, etc.)
Any additional software we may require.
The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverable will be a documented site structure and, more importantly, a visual representation. Upon completion of the design phase, the website should more or less have taken shape.
Wireframe and design elements planning
This is where the visual layout of the website begins to take shape. Using information gathered from the client in the planning phase, begin designing the layout using a wireframe.
Mock-ups based on requirements analysis
Designing mock-ups in Photoshop allows for relatively easy modification, it keeps the design elements organized in layers, and it primes for slicing and coding when the time later on.
Review and approval cycle
A cycle of reviewing, tweaking and approving the mock-ups often takes place until (ideally) both client and designer are satisfied with the design. This is the easiest time to make changes, not after the design has been coded.
Slice and code valid XHTML/CSS
Slice the final Photoshop mock-up, and writing the HTML and CSS code for the basic design.
Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). Keep code organized and commented, and refer constantly to the planning details as the full website takes shape. Take a strategic approach, and avoid future hassles by constantly testing as you go.
- Build development framework.
- Code templates for each page type.
- Develop and test special features and interactivity.
- Fill with content.
- Test and verify links and functionality.
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 and features and, most of all, a consideration of the user experience. An important early step in this phase is to move the website, if need be, to its permanent Web server. Testing in the production environment is important because different servers can have different features and unexpected behavior (e.g. different database host addresses).
Polishing a basically completed design can make a big difference. Identifying parts of the website that could be improved in small ways.
Transfer to live server
Last-minute review of the live website happens now.
Run the website through the final diagnostics using the available tools: code validators, broken-link checkers, website health checks, spell-checker and the like. Finding all the mistakes. Final cross-browser check (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry).
Business re-enters the picture at this point as you take care of all the little tasks related to closing the project. Packaging source files, providing instructions for use and any required training occurs at this time. Communicating future maintenance and commitment to ongoing support.
- Hand off to client
- Providing documentation and source files
- Project close, final documentation
- Officially closing the project.