After confirming the requirements of my application I drew up some initial user interface designs. These early designs mostly consisted of sketches inspired by other interactive experiences I had found across the Internet.
From my research and inspiration, I found the use of minimal layouts with methodical options is proving a popular trend among interactive application designers. In turn, by designing interfaces that take up less user screen space there is more space for the user to successfully interact with the application uninterrupted.
Therefore when sketching and developing initial designs I kept the interface layout to a minimum and often implemented the use of off-canvas menus that would only slide into the user’s view when necessary, ensuring application screen space is maintained.
Whilst the majority of my sketch layouts where of a similar minimalistic nature, I appreciate that this stage of development is also an opportunity to form more creative and experimental solutions. I therefore produced a number of layouts that include alternative design styles especially in regards to menu positioning and behaviour.
Following the initial design sketches, I then developed the more prominent designs through using software named SketchApp.
SketchApp has been my design tool of choice in order to produce a wide selection of interface layout options. The software importantly enables the use of “art-boards” that essentially allow users to collate designs in order to actively collate and compare solutions from within the same document.
Through using SketchApp I generated a number of colour swatch samples in order to test potential colour schemes for use within the application. Please note whilst some of the colour schemes were unlikely to be used, they helped inspire the process and test the range of solutions available.
I created numerous digital designs for the application interface. I have iteratively altered different aspects in to experiment with alternative options.
For instance, when designing the information panel that is displayed when a user selects a building within the application I created many variations with minor differences. This enabled me to experiment with the “real-estate” space available on screen and allowed me to gain a better idea of what information needed to be prioritised and displayed through the user interface design.
- Font imports
- Responsive panels