This week’s class focused on sketching as well as the different ways we could use sketches and paper-based techniques in our design process. We discussed the advantages of paper-based techniques and how we could improve our sketching as well as some tips on how to present sketches for assessment or interview. We completed a number of exercises during the day (more information below) culminating in a team challenge to design a UI for a smart plant pot.
The first exercise we completed was a warm-up exercise, we were given a list of items and had to draw them in the time allotted, firstly 20 seconds then dropping to 10 seconds and finally 5 seconds. There were six items we had to draw:
You can see my efforts below:
While none of these items are hugely difficult to draw and with a maximum time of 20 seconds there was never time for hugely detailed drawings, it is interesting to see how by reducing the amount of time allowed for each drawing, how you distill each item to its key components leaving out anything unnecessary. I also find it interesting to note how the drawings completed in 5 seconds still resemble the items to allow easy identification. This might seem an exercise that is only a bit of fun but a lot of these basic shapes are very similar to icons you will see used in UIs and realising how simply you can represent some of these items as icons is very useful.
Wireframes are a specific type of sketch used to show the layout of a UI before any visual elements are added. They are a very powerful tool that allows you to work on layout and information architecture and get that right before adding the visual style to an interface. Wireframes use shapes and symbols to indicate certain elements for example squares/rectangles with a cross through them for images.
To practice our wireframing skills we sketched the UIs of the Instagram mobile app, three screens from the Apple Watch and the Desktop UI of Twitter or X as it is now known.
Here are my results:
I always create wireframes when I am working on a product, the fact that they are simple and relatively fast to create allow you to try lots of different layouts and iterate quickly to dismiss bad and drill down to the best ideas you have that you can then make digital and develop further. With the more fidelity you add the cost and time spent rises so being able to get to the ideas with the most potential quickly is a huge plus and saves a lot of resources.