The designing stage is arguably one of the most important stages of a web project. It typically involves giving shape to all the information defined in the planning stage. The main deliverables upon completion of the design phase are documented site structure and visual representation of the website.
All web designers have a different creative process that allows them to achieve their designing objectives. But at its very core, the creative process for every successful designer remains the same.
1. Sketching / Brainstorming Ideas
Sketching is a great way to start any design. Using pencil and paper (or tablet) for sketching gives you the distinct ability to jump from one idea to another easily.
Whether you are a website design agency or a freelancer, being able to communicate ideas to clients with a sketch is really vital, especially during the early stages of a project. The best practice is to sketch out a bunch of rough designs for your ideas, narrow them down to a few and let the client provide feedback on whether you are on the right track or not.
2. Define Content & Create A Workflow
When your client green signals an idea or two, the next step of the creative process is to create a workflow. Creating a workflow includes creating a list of each section to be included on the site, with brief information on what type of content will be shown on each page.
3. Low-fidelity Wireframe
Low-fidelity wireframes provide a framework for your creative designs. These wireframes are simple line drawings of website layouts that focus on placement of elements rather than color and type. They describe in detail what features will be on the site, such as user accounts, social networking functions or a newsletter sign-up. Low-fidelity wireframes are presented as a rough sketch to the client without graphics.
4. High-fidelity Wireframe
Post low-fidelity wireframes, high-fidelity wireframes play a crucial role in providing a more realistic experience of the actual product, in this case your website. These wireframes provide a better outline of the product; filling in the details missing in low-fidelity wireframes. These wireframes define the visual hierarchy of the page, actual form and interaction elements, and often labels, instructional text and some copy.
They are extremely helpful as they determine what content deserves the most focus and the percentage of space they can occupy on a page. They can be used in sequence to show how a specific task can be accomplished in a sequence of screens. These wireframes highlight how user friendly and intuitive the product is going to be.
5. Visual Mockups
A web designer brings life to the wireframe by coming up with a visual representation of the website. The mockup is meant to provide your web client with visuals of what the completed site will look like in a browser window before the web developer spends any time building the web pages.
A graphic mockup is the best way to show the client what the finished website will look like because it can demonstrate near-precise color, accurate representation of font sizes, and precise placement of all the navigation and content elements on the site relative to one another.
To achieve that awesome look and feel in the design, a website designer should be creative and play with the design elements and overall user experience.
