UI / UX and Design Sytems
Lo-Fidility UX Map
Exploring and mapping out the clients content and organising the content into categories. Then trying to assemble all these into a usable and informative manner. It’s always good to see a diagram when you are building a site, so you don’t lose sight of the big picture.
It’s never easy approaching a blank ‘canvass’, and a ‘Design Sytem’ lets you start experimenting with design components and page layouts quickly.
The ‘Design System’ is an evolution of the ‘Brand Book’, but built for web and app developers. Adding and iterating components is all part of the process.
I usually develop the ‘Design System’ alongside a high fidelity mock-up of some of the pages this workflow allows me to explore different; typography, colour and components and see how they then work on the page layouts.ts
Wood By Design – Design System – Typography.
Wood By Design – Design System – Colour.
Wood By Design – Design System – Components.
A high-fidelity mock-up is a code-free way in which to design web pages or smartphone apps. I present these prototypes to the client before we transfer the designs into code. It also allows the client to walk through the website to make sure all the decisions made during the UI/UX mapping ‘work’. And we can apply any style changes at this point.
Wood By Design – High Fidilty Prototype – Home Page.
Wood By Design – High Fidilty Prototype – Project Gallery.
Wood By Design – High Fidilty Prototype – Services.
First Kingshill Scouts – High fidilty desktop view prototype.
First Kingshill Scouts – High fidilty mobile view prototype.
The next step from creating these UI and UX prototypes is to recreate these into working websites. In the next section are a few examples of “live” websites that I manage.