A few sketches highlighting key areas in the app. Here I’m figuring out the general shape, location of elements and some ideas of behavior. From the sketch about 90% remained in the final build while some other ideas shifted around as the development started to flesh out.
Once the sketches are at a good point, it’s time to wireframe. Most is retained from the sketch, adding some additional elements and overall crystalizing the form of the app.
visual design mockups
Once the wireframes are locked in, time to go to color. From here, again, most is retained with some visual tweaks here and there. Also continuing to keep in mind the user flow, how things move and land etc.