Design Process for a Website
Here are the six steps in designing a website.
Here are the six steps for a thoughtful design process:
- Make a wall of sticky notes
- Color-code the sticky notes
- Reorganize the sticky notes into a hierarchy
- Sketch your Grids
- Make Wireframes
- Draw Composites
1. Make a wall of sticky notes
Survey all your ideas about the website. Your emails, your text messages, your notes, your scribbles, your conversations, your hopes, your dreams.
Every time you find some function or need or goal or whatnot, no matter how small, write that one thing on a single sticky note with a magic marker.
And stick it on the wall.
Eventually, those individual sticky notes will become a whole wall of sticky notes.
It will be an inventory of everything you want for your website.
2. Color-code the sticky notes
Evolve your sticky notes into a color-code. It may take several iterations.
How will you decide your color-code? What will you base it on? Here are a few idea-starters:
Maybe you will restrict access to some content. Some pages might only be for subscribers. Or paying members.
Your site might have different sections, such as a Blog, FAQ, a Landing Page, a homepage.
As you iterate through the color-coding of your sticky notes, a pattern will probably emerge.
3. Reorganize the sticky notes into a hierarchy
Based on the color-coding, rearrange your sticky notes into an hierarchy.
Lo and behold, you now have your sitemap!
4. Sketch your Grids
Your color-coded hierarchical sticky notes have formed your sitemap.
For each major section of your sitemap, the pages will share a common layout.
On each of the common page layouts, what links should there be? Where are they on the page?
Draw the layout for each major section of your sitemap. Those layouts are called grids.
5. Make Wireframes
From those grids, you will create wireframes.
The wireframes are blueprints that govern the construction of the actual website. They are elegantly simple. But they incorporate everything thus far.
A wireframe is like a pencil sketch of a page. It includes everything on the page, except for color and images.
This is where you really start to bring your design to life.
6. Draw Composites
From those wireframes, the only thing left is adding color and images.
When you select a color palette and apply it to your wireframes, you have created composites. These are prototypes.
You can hand your Composites to a web developer. From your Composites, a web developer can build your site!
Originally published on February 12, 2022
Last updated on October 28, 2022
TOPICS: Apple, Design, Website,