Ch-Ch-Ch-Changesss
Change is inevitable. In life. In the world. And in your app design. Sometimes it’s a little more change than you expect.
For the past three years of my degree we’ve had one thing above all drilled into us: always start on paper. Wether it’s icons, a logo, a presentation or wireframes, starting on paper allows you to iterate faster without getting attached to your designs. It took me a while to get into doing this but this year I’ve gotten into the habit of sketching even one or two things out before jumping into Sketch or Illustrator.
From these initial paper wireframes I move into Sketch. At this stage it’s still very lofi, usually just boxes and lines of different thicknesses to indicate written content. I try to create a few of these before starting to add content because it allows me to quickly duplicate and try different screen layouts without much effort.
However I don’t spend too much time on the lofi’s, I think it’s important to start getting content on your screens as soon as possible. It helps you get a better feel for what the end product will look like. And importantly what it might look like with content that doesn’t exactly fit your design.
From here I started adding the brand colours. Unfortunately I choose an obnoxious shade of mustard as my main colour. I tried so many iterations of text colour and background colour and accent colours to try and 1. make sure it didn’t look too abrasive and 2. that it met AA accessibility standards. This is important to me because accessibility on the web is currently a major problem.
I carried out two short usability tests which indicated some areas which needed clarification. Such as what was editable and what wasn’t. It also gave me positive feedback to reassure me I was going in the right direction with my apps feature set.
Once I had it in a shape I liked I decided to show it to my other half. Who just so happens to be an iOS developer. I’ve already written a post about how that went so I won’t go into detail but suffice to say there were a lot of changes to be made from that interaction.
So thus came the fourth and final iteration of the design. I liaised with my other half through the final iteration to produce a more idiomatic design.
At this point I also started thinking about the interaction between screens and what the animations and micro interactions might be.
The final design still has the general feel of the initial wireframes but has developed into a more thoroughly thought out design. That I know if given to a developer tomorrow could be developed with only minimal discomfort to the person doing it.
Designs change. Sometimes a little bit and sometimes a lot. But hopefully always for the better.
Kelsey. x
