Introduction
While there are many ways to plan, design, and develop a website, we will be learning a tried and true process that makes good use of time and helps avoid common pitfalls.
Discovery
You will begin with the Discovery phase, where you will do a decent amount research and thought on the follow questions:
- What is the purpose of my site?
- Who is my audience?
- What are their wants and needs?
- Who is my competition and what is their site like?
Simply answering these questions can help guide your project to completion.
Concept
Once you have an idea for your website, its time to put it on paper. In the Concept phase, you will document low fidelity representations of your final product. This can involve making sketches of your design, brainstorming potential use cases, and experimenting with simple layouts.
It is important to keep these concepts simple – paper and notebook simple. You want to save your time and effort for the steps to come.
Flow
This phase is all about refining the organization of information and features of your website. I like to ask myself two questions when designing a site:
- Can my content be organized into categories, and if so, how?
- What is the primary feature and how would someone utilize it?
There are handy graphical representations you can use to answer each of these questions.
Sitemap
The first is a Sitemap – a visual representation of how content is organized on your site. Sitemaps are organized like a family tree. The home page is the oldest ancestor, the extra pages are the descendants. The descendants can have their own descendants and so on. Here is what a sitemap can look like.
Want to make your own sitemap? Check out this free tool called GlooMaps.
Flow Chart
The second graph we can use is a Flow Chart – a visual representation of how a user traverses a website or application. You can use a flow chart to optimize a user’s path to the important aspects of your site.
For example, it could help you prioritize a one step checkout for your online store. Making this change can have a serious affect on the user’s experience and the website’s bottom line.
Want to make your own flow chart? Check out this free tool called draw.io.
Wireframes
We use Wireframes to demonstrate the essential User Interface of our website. This includes:
- Navigation
- Layout
- Interactivity
Wireframes do not include visual elements such as color schemes, typography, images, etc. When any element of the user interface is not obvious when viewing the wireframe alone, we include an annotation that details that element’s purpose or function.
To save time, use dummy text whenever you need to show text within the wireframe. You can use actual words for elements that are key to understanding navigation, layout, or a call to action.
Style Tiles
A Style Tile is a succinct representation of the style for your website. It should includes things like:
- Colors
- Fonts
- Logo
- Buttons
By creating and deliberating over a style tile, you can efficiently communicate the website’s style to stakeholders, without having to redesign an entire site.
Prototype
Once you have a finalized style tile, it is time to make a Prototype – the closest approximation to your website before it is actually built.
A prototype is like a wireframe, but with all of the colors, images, and text filled in. Additionally, your prototypes should be responsive – meaning they should work on laptops, tablets, and mobile phones.
Prototypes used to be just static PDFs – until now! Using Adobe XD, we can also simulate interactivity like:
- Responses to clicks, swipes, and other gestures
- Navigation and Transitions between pages
- Animation of page elements
Your prototype will be key when writing the code for your website. It allows you to get everything looking just right so that when its time to develop, you aren’t split between making design decisions and troubleshooting your code.
When beginners try to design as they develop, they are typically dissapointed and frustrated with the result. Perfect the design first and use it as your North Star when writing your code.
Conclusion
To spend your time wisely, it is best to follow the Web Design Process detailed above. By completing each phase in this order, you can validate your ideas, catch mistakes, and refine your design without too much work.