One of our deliverable’s was to create a poster that showcased our idea. We decided to create a storyboard to represent the user’s story with icons. This is how we went about it:
- I decided to keep it simple with ready-made icons from The Noun Project where you can download icons for free with Public Domain and Creative Commons licences.
- Then we edited the images using Photoshop, adding a Color Overlay to them.
- The first icon was ‘new city’, which needed to convey wandering around a city and discovering places. Alex suggested a map based approach as seen below.
- The next one to be created was ‘share your story’. Alex chose to overlay text on a building.
- Then a ‘connect and explore’ icon which represented the user being able to read other people’s stories about the place which they had just written their story for.
Learning how to make curved lines in Photoshop turned out to be very challenging. In the end we settled for creating curves in Keynote and placing them as images in Photoshop.
- Next up was a ‘favorites’ icon where users can choose 6 places they have previously connected to, to re-populate their home page.
- A ‘see your connections’ icon which demonstrates the home page functionality of the app.
- Finally there was a ‘discover places’ icon. At this point I spoke up and voiced my design ideas and came up with this:
This icon was very different to the other 5. Having looked at them I thought the background blue hexagon was acting as a frame, rather than being part of the icon. I didn’t think this looked right, the little hexagons inside looked lost, so for the last icon, I scaled up the white hexagons and had them bleed.
- This then prompted Alex to ask for my help re-designing all the other icons so they matched this new style, including adding captions.
- For the ‘new city’ icon I decided to mimic a street view, depicting perspective with positioning and re-sizing of the white hexagons into an arrow.
- For the ‘share your story’ icon, Alex opted for a quick fix of just adding the caption, however, I still don’t like this one. It doesn’t ‘fit’ with the others because the inner hexagon is too uniform. By that I mean it makes the outer blue hexagon look like a border, rather than being part of the icon. Also, the text of the story doesn’t have an equivalent in any of the others, so again, looks odd.
If I was to re-do this one I think it would look something like this:
Here the inner hexagons bleed, filling the outer hexagon making it look all part of the same icon. Then I’ve opted for 3 images – the user, the building and a story being written. Hopefully this conveys the message and fits with the other designs. What do you think? How would you redesign it?
- This one reminds me of a football, but hey, I think it works a lot better! By re-sizing and re-positioning, the content now fills the outer hexagon rather than being dwarfed by it.
- This ‘favorites’ one just needed to be bigger to fill the space and have its overlay and caption added. The 50% blue overlay really helps to tone down the white, and once again make the content feel like it belongs to the outer blue hexagon. Also tweaked the rotation to stop it from becoming too uniform (hexagon inside hexagon), so now the content benefits from irregular spacing around the outer edge.
- This one I decided to re-arrange the positions of the hexagons to give a more organic feel which is more representative of the app’s home page.
- Since we added captions to the others we changed the action ‘buzz’ to ‘discover places’ so it fitted with the collection.
Here are the collections in full so you can see the transformations!
These were then used on our first draft poster which was changed many times so unfortunately these icons don’t appear on the end storyboard. However, I hope this post showed you how a little re-sizing and re-positioning can transform your designs in a matter of minutes! Let me know what you would have done differently 🙂
til next time