Rachel Sproule @rachelcatherinesproule - Tumblr Blog

My Finished product... for now

IXD304- Narrative and Storytelling Sketchbook

Sherlock Holmes- Heroes and Villains project (screens)

Sherlock Holmes- Heroes and Villains immersive prototype (there are a lot of screens so is subject to lagging)

Here is the updated version of the grey area, designed for iPad.

changes made:

mild tweaking to colour scheme

better/ more noticeable navigation

iPad screens now scrollable

bookmark icon

#ixd304

Here is the inspiration i gathered for my aesthetic and typography for my sherlock holmes project. I really liked the graphic posters of sherlock that used very simple colour schemes with a flat, silhouette- like design as it was simple yet very vibrant/ effective

#ixd304

Here is the first version of my Sherlock Holmes heroes and villains project. This was originally an ebook for iPhone but as shown in feedback, it was not a popular idea and perhaps suited iPad better. It also is missing key icons like bookmarks and could do with some clearer navigation and less pages- by making the prototype scrollable

#ixd304

The Finished product... For Now

I wish i could have taken this further and developed it into a fully immersive prototype- but due to the COVID 19 outbreak, our deadline has been cut short by 2 months. Obviously I want to continue working on this (and I will!) but I have to come to some kind of conclusion for marking.

Here are my links for my final(ish) product

The Digest- Light mode

The Digest- Dark Mode

IXD303 User Experiences- Sketchbook

#ixd303

updates to dark mode of The Digest

After looking at The digest on my mobile, I couldn’t help but notice that the light grey used in some places were too light and looked quite garish against a black background. As my main goal is to have a news app with a subtle and minimal colour scheme, I turned the transparency down 50% so that it fitted in better. I did the same with the thin lines separating the top and bottom toolbar from the background of the app. The only area that I treated differently was the search bar, as I changed the transparency down 25% so that it stood out more and communicated to the user that it was interactive.

#ixd303

Here is the updated dark mode version of The Digest

#ixd303

Here is the light mode updated version of the digest- the colour has been changed to orange and all icons have been decreased to 90% size

#ixd303

Changes to The Digest

After some feedback, it was made apparent to me that the pink used was too feminine and overpowering to use for The digest. I have therefore began looking at warmer colours like orange instead. I was also made aware of the fact that some icons were too big for the screen and needed to be scaled down a bit. I will apply these changes to my design and compare the difference.

#ixd303

Here is my dark mode version of The Digest

Again, Im really happy with the way this turned out as I believe it has the right balance of colour and reduces from eye strain for the user.

#ixd303

light mode screens

Here are my versions of the light mode screens for The digest. I am really happy with how this turned out, although i found it really challenging to add colour in a way that wasn’t overpowering. I think Im pretty successful In scaling and use of colour here, but I would really like to create a dark mode as I personally like apps with that user option.

#ixd303

Style guide- The digest.

For The digest, I wanted a colour scheme that was simplistic yet impactful, with one highlighting colour to challenge me as a designer to implement colour in a way that is eye catching without being overpowering. I liked the idea of adding vibrant pink as I felt that it would bring life to my UI design.

#IXD303

My icons- deactivated vs activated

Here are the designs for my icon set for “The Digest”. I wanted to make the icons come to life when activated like on twitter, so I tried to use colour in a more interesting way with the home and interests icon as they aren’t line based. I went for sharp/ square ends to my icon as with this app I’m aiming to create something that looks a little different from the rest. Most apps design icons with rounded edges (facebook/ instagram) but I liked how sharp and crisp the icons look with squared ends.

#ixd303

Drawing out my UI

When it came to the drawing stage, I drew out multiple different potential layouts for my news app in order to give myself plenty of options with my app design. I tried to keep layouts as simple as possible, making the icons as self explanatory as possible. In order to make my icons recognisable, I looked at other versions of the icons that other apps utilise to further inform my design. I also brainstormed potential ideas for my app and settled on "the digest" as I thought it was interesting and impactful. The icon i created for that section was a minimalist version of the intestine, as my app "digests" the user's data over time. I am hoping to implement this icon idea into my brand/ loading page.

#ixd303

Looking at use of colour in apps- Twitter

When creating my news app, I was considering the possibility of a night mode. This causes less eye strain for the user and also gives the user more options with regards to colour scheme. I always loved Twitter's dark mode design. I especially love the way the icons on the toolbar change colour and highlight different parts when activated/ selected. This is something i might consider when making my own app.

#ixd303

Use of colour- facebook

When designing an app, its important for me as a designer to see how other apps use colour. Facebook uses a light mode for their UI, and in order to avoid the app looking flat or boring, the use of light greys for background colours and blues to highlight key icons and features. The use of thin grey lines to separate the white toolbar from the rest of the app. When it comes to creating apps with a light colour scheme, subtly seems to be key. On a side note, i like the use of the blue line above the activated sections on the toolbar. I think its a really effective way of communicating what section the user is on.

#ixd303

As i began to come to the final stage of my idea generation, I decided to modify my idea into an app that personalises the users news experience and allows them to view how they consume data through weekly breakdowns. It was then that I thought of the Feltron report- a report created by Nicholas Felton that quanified data in his daily life. I wanted the data breakdown to work similarly to the apple weekly screen time breakdown feature that tracks the user's time spent on phones and shows how that changes over time.

#ixd303

Trending Blogs

Recently Viewed Blogs

Rachel Sproule