Design thinking methods & outputs
Part of the joy in web design is thinking through design processes. Most of the time it starts with a sketch.
This process helps me align design and strategy in a new website / design project. I use to design tools to communicate the design ideas. These can be; prototypes, wire frames, high resolution layouts, style guides and personas.
Design proposals convey a look & feel of the site without being too constrained. A proposal will offer a clear model of the appearance of the site and label typography and colour themes. Good designs give the web developer a clear runway to build the site without having to solve design problems.
1.Sitemap
Functional schemas of all the pages in the site.
Cementa Site Maps 2022
2.Wireframes
A bare schematic of page content. No design –yet they express all the elements of a page. Very similar to architects blueprints, critical schematics. |
“Wireframing is a language for communicating user interface ideas which helps developers, designers, product managers, and stakeholders think about and understand the big picture structure of a website or app without being distracted by the details” — Angeles, Barnard, & Carlson, “Wireframing is For Everyone”
Bandicoot Press wireframes
3. Style guides
They come in all shapes and sizes. Importantly the can help identify scales and character elements.
Cementa Style Guide by Huy Nguyen. @huy____
4. Full resolution designs & prototypes
Full resolution prototypes with functional behaviors.
Full resolution style and functional prototype for Clear Control