ICONS

An area I felt needed to be changed to allow me to add in my Dice Shuffle was the side navigation. I had to include a completely new section for the dice and one for the preferences. I reorganised it and simplified it by removing some sections. I explored what I wanted the icons to look like on the side column, coming up with multiple options to see what would work best on the user interface. I felt icons could also be used on the dice faces when the user has to pick between what type of content, although I’m not sure they’re successful and if they would be any more effective than just using text.

As the two week project was based on icon generation, I already had an idea of what was needed to create an icon. I decided to carry out a small bit of research to help me remember.

Icons are an essential part of any user interface. They visually express objects, ideas and actions while communicating the core idea/intent of a product or action. They’re designed to be simple, modern and friendly. Each icon is reduced to its minimal form and often consist of bold, geometric shapes that are symmetrical and consistent. This ensures readability and clarity to the user no matter the size.

FIRST ATTEMPTS ON ILLUSTRATOR

These screens are some of my initial ideas which I drew up on Illustrator. It took me a while to get the hang of the software, so going forward I am going to come back and make sure all the thickness and sizes are accurate.

 

DICE SHAPES & LAYOUTS IN PHOTOSHOP

After finishing my wireframes, I went straight into illustrator but I found when it came to the dice shuffle section I was getting confused and struggling to come up with ideas. So I when back to my wireframes and created rough sketches of ideas, specifically for how the dice would look as I found it difficult to make it fit in with the Prime Video aesthetic.

                           

I then went onto photoshop and created digital versions which I will then add to my screens on illustrator to work out which design works best.

1st Choice: I started off by trying out a lot of different layouts for the 1st choice dice between Random, Movies and TV Shows and this allowed me to see what layouts worked and what ones didn’t. Then, I was able to narrow down the designs to focus on with the other dices.

 

2nd Choice: picking between what type of quiz, either multiple choice, questions or this/that. This is an option in preferences to choose at the time, but the user can skip this step by picking one in preferences.

 

Multiple Choice: this is the dice that will appear beside a grid of film/tv shows and each side is a different category. I felt keeping it plain and just block colours might be the best way as the grid is very image heavy.

 

 

Questions: I found for this dice I couldn’t incorporate any images into the dice, so I kept to the colour scheme of blue, navy and white, experimenting with opacity and placement of colours to create the 3D effect.

 

This/That: the dice doesn’t play a main role in this part of the function, so I struggled to come up with ideas for it. I came to the conclusion that the best thing would be to give a quick explanation on the top face as it wouldn’t be as clear to the user what they need to do as the questions/multiple choice.

  

 

Multiple Choice/Questions Grid Layout:  the main thing I had to try and decide for this aspect was if I wanted gaps in-between the squares or whether they should all be connected. Also, if there should be a drop shadow, which I feel adds depth to match the dice.

 

Random Roll: if the user chooses random, the dice will roll without any quiz so I wanted to create a simple layout but one that also showed what was included, i.e. the collage of content on the bottom faces.

 

End Process Layout: I tried designs for this area that included the dice, but I felt it wasn’t need so I just kept to the rectangles and flowchart look.

 

Final Suggestions: at first I wanted to have the information on the side of the dice, but I felt this could be quite difficult to read, so I decided to go with a tile beside the dice as it was clearer.

 

By trying out lots of different options for each step, my plan was to see what design was the most consistent and what variations would blend well together. I felt this would help me to create a consistent and fluid user interface. If any parts were different or didn’t match, this allowed me to put them all side by side and see what needed changed.