WEB105 » Visual Design, Producing & Building
Your website is a product and is unarguably about accessibility and the user.
Creating the Visual Design
Let’s remember that your visual design is something that will actually get used. Therefore, achieving a balance between the limitations of the web and brilliant creativity is more challenging than ever.
Let’s also remember that:
- Concepts need to interact with technology
- Finding out that your design won’t work after sign-off of the design is not acceptable
- By this time in the process, the clients are dying to see something
Developing concepts can be tricky at best. When developing our visual design concepts we must:
- Pull out the creative brief and use it as a springboard for the creative process
- Take a look again at the Technical Specifications sheet
- Follow the overall site objectives while creating something functional
- Serve the user’s environment and capabilities
- Create a design that will be (HTML) producible
- Review competitive sites and see what they are doing
- Let the clients’ directions direct you.
- Pull all of the specifications together and paint around it
Following these guidelines will aid in helping us through this stressful process.
Before we present our concepts, the designs should go through an internal review:
- Post (usually) three comps on the client staging area for review
- Plan on two to three rounds of discussions and revisions
- Meriweather Visual Design Studies | Premium Design Works
- Merriweather Brand Strategy, Website Design & Development | Premium Design Works
- RIW Visual Design Studies | Premium Design Works
- Visual Designs for Sound Vocational Services, Inc. | Premium Design Works
- Visual Designs for Jet City Improv | Premium Design Works
Master Art & Graphic Templates
This is where the approved look and feel needs to be translated and applied across multiple pages.
- Remember that the approved look and feel is just an approved direction and will need refinement along the way
- A Master Art file should be constructed as a master AI/PSD file with all of the appropriate specs and layers to be prepped for slicing, optimization and HTML production.
- RIW Master Art | Premium Design Works
- Final Jet City Improv Visual Design | Premium Design Works
- RIW Templates | Premium Design Works
Producing & Building the Design (Protosite)
A protosite is an HTML/CSS build of your design that is used to confirm the flow of the pages, the navigation and the content. A protosite does also contain light scripting—rollover buttons, drop-down menus, forms, etc.
A protosite will help:
- put all of the pieces together that you have designed, planned and gathered
- to see if your site is shaping up as planned.
- to expose content and information-flow design issues as well as navigational issues
- find holes in your content via the protosite
- the client reevaluate some of their decision making
- How to Convert a Photoshop Mockup to XHTML/CSS | Line25
- Building an HTML Template from Master Art | Premium Design Works
- Building an HTML Protosite Using PHP | Premium Design Works
Slicing & Optimization
- At this point in the production phase the graphic templates are ready to be sliced and optimized for HTML production
- The production team needs to assess the best method for slicing up graphics to put them in the HTML templates
- Teaching Web Design To New Students In Higher Education | Smashing Magazine
Creating HTML Templates & Pages
- Slice out the headers and navigational items
- You can create separate tables of the separate items and place them in one HTML template page
- You should make one template page for each section of the website; index page, main pages, secondary pages, etc.
Implementing Light Scripting
- Implement your light scripting to each template page before you move on to populating your pages
- Test and look for errors
- With your HTML template pages built you are now ready to save these templates as the rest of the pages and bring in your content
- Your project manager should have been tracking the content
- He or She should hand off the content and let the producer know where it goes; what page has what content
- Invisible content should also be placed at this point; meta tags, alt tags, title tags, etc.
Integrating Backend Development
- The logical place in the workflow for the backend and front-end to integrate is during or right after all of the HTML pages are complete
- However, at the beginning of the production phase, gather all of the production and backend engineers together to make a plan