Andrew Gordon - Open Designs

Initial Notes

If there is a design that needs to be updated or reworked, then my task Is to straight away print it out and start drawing and making notes on the design. This allows me to work out where things should go and dictate where the next steps should be.

this is an important part of the process, because it allows you to understand the product more and see where the challenges lie in the restructuring before you start work

Preliminary Sketches

Starting with preliminary sketches, I sketch out a concept or an already existing idea and get the ideas out on paper. This process allows me to start working out what kind of things will be needed in the final design and allow me to start conceptualising the important parts.

Additionally to this, some times I like to take each parts of a design, cut them out and start playing around with them physically on the desk and seeing how they should be positioned and work out their priority.

Research

Research is key for creating the next cutting edge system that tops the rest. This can be split into many different aspects of research.

Initially for a new project I would start with this, as you need to know the market. For an existing project, I would mock up the new designs and take aspects from the research that is gathered during the process of it being a functional system.

Research gleaned from Questionnaires, Sitting with Clients, or specific options such as heat maps can be invaluable for creating a system that excels

Wire Frameing

Wireframing comes next - Taking those preliminary sketches and turning them into something a lot more constructive.

During this process, its a good place to start piecing together the library of assets required and start creating the design system.

Colours are used sparingly at this stage, if at all to allow for less distractions of the final product.

Occasionally comic sans creeps in, just to force vision to function over style.

---note---
This is also where I would initially block at different artboards for responsive design, to show how it would look on different viewport sizes.

High Fidelity

Now starting to place all the colours and icons into the app, ready for review on style.

During this process, the finishing off of assets on the design system is also started, so you can then end up with a final product.

Prototyping

The prototyping is the next phase, though this often gets done along side the high fidelity stage.

Using Adobe XD, I work out all the different artboards and finalise how these can be transitioned and worked so that the prototype looks like a functioning product.

Any fancy micro-animations can be added here and speced out so that the developers have something to work with.

Build

Using fancy code and 'what not', I start to build the code straight into the system ready for the backend developers to take over and plug it all in.

Here is where I get to play with HTML & SCSS (or LESS) as a CSS pre-processor, jQuery and javascript. This is where I started shaping everything and getting all the designs taking shape.