A carefully-crafted and well-strategized website can be a deciding factor of the success of a company or entity. Websites communicate the personality of a brand, showcase it's products and services, and finally, persuade audiences to perform a critical action.
Clearly defining and communicating design process is empowering. It enables me to align expectations, work collaboratively, think creatively, focus on deadlines, and produce the highest quality deliverable for every client, every project. Here's the process I follow when designing a new website for a client:
We'll start by walking through a series of questions to make clear the intended outcomes of the project. This includes the thorough collection of style preferences, pre-conceived visions of the designs, hard project requirements, deadlines, etc. We'll align expectations at the beginning so there aren't any surprises down the road.
It's important to define who the website will be targeting. Knowing who we are targeting with the website will help us know how to approach the website's design style and content strategy.
Central to producing an effective marketing tool, such as a website, is having a solid understanding of what your customers are thinking when looking for a product or service like yours. A survey will give us enough data to make educated decisions on what to do with the designs - from both a visual design perspective and content perspective.
A content strategy helps establish a baseline for the overall tone, message and goal of the new website. These decisions stem from business goals and customer insights. Everything conveyed on the website should support and convey a common message - one that resonates with the needs and interests of customers while focusing on the business goals of the website.
Using the content strategy as a foundation, we then move into each page of the website and establish a content hierarchy and layout. Each page and the contents of the page should clearly and explicitly support the overall content strategy.
Now that each page has a rough architecture, we can refine and consolidate the page's layout into a low-fidelity wireframe. This is the first step in establishing a usable interface that stakeholders can interact with. We'll begin establishing conventions on how content is structured and create basic rules for navigation.
Next, we want to consider the visual treatments of the website. The first step in doing this is to review any existing branding and identity guidelines established previously for the brand. This will help us in deciding the colors, textures, visual treatments and feel of the website to compliment the existing brand.
With a solid pulse on the visual direction the website should take, we can now move each wireframe component into a visual design. We'll start by creating a final visual sample of the most commonly used components and patterns. From there we'll iterate to find the perfect design.
After deciding on the overall visual styles from the panel-based visuals, we'll consider the broader range of website patterns and consider each edge case. This will ensure each pattern and component introduced in the wireframes has an associated visual style that matches the brand guidelines and other components and patterns.
With a well established visual language, we can now apply these UI styling rules to each page of the wireframes. This will transform each wireframe into a beautiful final design. Minor adjustments may be needed when the visual language meets edge cases in the interface.
As the world becomes more and more mobile, it's essential to make sure the newly designed webpages are not only pleasant on desktop devices, but mobile devices as well. We'll review each page and recreate the page in a design that accomodates mobile users.
The final designs are now ready to be coded. We'll begin by assessing any technical requirements behind the code, such as if a framework like Wordpress is required. The code will be compatible with all modern browsers. It will also be fully responsive (mobile friendly).
We'll go page-by-page, and section-by-section to all placeholder text with custom copy. Copy will compliment digital assets, and vice versa. The copy will also compliment the content strategy established earlier in the project.
Now it's time to replace those filler images, icons and graphics with the real thing. While referencing the branding guidelines and content strategy, we'll produce prescribed graphics, icons and photography for the appropriate parts of the website.
The time has come to launch your website. We'll orchestrate hosting the content and code on the servers of your choice. After some final reviews and testing of the new site, we'll launch the site for the world to enjoy.