Create a mood board
The visual style for the Interface will involve researching imagery. This is to be in the form of two A2 mood boards, each should be a collage consisting of images that evoke the feel and look of the interface, include your name in each moodboard.
This moodboard shows a student accommodation bedroom. I chose to use an image of a room which was gender neutral and would suit a majority of tenants. There is an image of a train and train tickets. This is to show that the student may travel to uni or between their dorm and home. They may use the app at home or on the go while commuting. I included an abstract pattern i liked and a desk space that shows how the student may personalise their space.
Below is my second mood board. It shows apps and devices which a student will likely use frequently. I have included 4 different icons from top apps, they are all instantly recognisable but all very different. A bedroom and desk space has been included again to show how a student may use these spaces and personalise their room. Several geometric patterns have been included as these are very "on trend" in modern spaces. They are gender neutral and would work well in the app for a background.
Create a style tile
The next step is to develop two A3 Style Tiles. Each in response to your mood boards. Your style tile should show consideration of colour palette, textures, fonts, interface elements and a logo. Developed for use in the completed app. Include your name in each style tile.
Style Tile 1
This is my first style tile which shows a logo concept for my app along with various other identifying features. I chose strong but muted colours that are not too hard on the eye and have used a lot of rounded buttons and icons in this design to make it more friendly and inviting. This is in contrast to the logo which uses angular and sharp lines, however i have made the mobile app icon round as it may appear on the phone.
Style tile 2
This is my second style tile, which is the style i went with for my app. I chose a reduced colour palette but with a bold mustard/yellow which makes it stand out. I used a dark grey instead of black in the design to make it easier on the eye and less high contrast but it is still striking. This design is more industrial than the previous one using a distinctive, striking font and featuring heavier and sharper icons. There is also a smaller icon which will show what the app looks like on the device before opening. This features the yellow and grey colours that will hopefully stand out on a phone, reminding the user to open the app more frequently.
Two different visual mock-ups
Below are the two apps visualised on real phones. This shows what the final product will look like and helped me decide which design to chose. After seeing both i decided to use the yellow and grey theme from the second style tile as i feel it looks more relevant to design trends now and what users expect from this type of app.
These are the final, coloured artboards of my app design in illustrator.
The final, working app.
This is my final, working app. The design was made using adobe illustrator and the working version was made using InVision. The final app can be found at the following link: https://invis.io/729DRS1XY