Paula B

Aspiring to be a noteworthy designer that will leave an impression! Im a nice person but suffer from RBF.  Feel free to help me out🤙🏻

[paulab1799]

Submission links

Designing User Experiences- IXD303

Narrative and Storytelling- IXD304

[paulab1799]

Next steps..

Moving forward there are many things I would like to do to my product to improve the overall design and performance. 

Animations

I would like to learn and add animations to my product, to allow the opening of my cabinet, folders and turning of the pages to transition more smoothly and visually better. 

Cabinet refinement

I would also like to spend a bit of time refining the design of my cabinet. I loved the look of the cabinet originally but after designing the rest of the screens I feel the cabinet should look a bit more rustic and vintage to match the other screens.

Add tabs in each folder

When in an open folder there are pages the user can ‘flick’ through, but this isn't made obvious to the user. So I would like to add tabs to not only make it obvious to the user that there are more than one page in that folder but to also allow the user to see exactly how many pages there are and to enable the ability for them to quickly skip to the page they want. 

[paulab1799]

sherlock prototype

20 Screens, Published on Apr 05, 2020 16:42 GMT

Updated prototype

After making those changes to my product I updated my prototype with the changed screens.

[paulab1799]

Changes

After gathering my feedback I decided to make some of these changes to my product.

Making button smaller

After making this button smaller and comparing it to my original button, I can see how much better it looks smaller. Grateful for that piece of feedback!

Swapping emphasis

Again after changing this and comparing the two I can see how it 1) looks better and 2) adds more emphasis on whats important.

Breaking up first page

I firstly tried spacing out each paragraph more and adding quotation marks to the quote. I feel this helped but I could possibly do more.

I then tried breaking the information up into two pages rather than one, as well as adding an image of Sherlock. I felt adding a image would help break the text up a bit and add a bit more visual aid to the page. I used the same image of Sherlock that I used on the cast of characters page as I felt it would have been unconventional to display to different Sherlocks.

[paulab1799]

Feedback

I showed my prototype to my class and lecturer and received some helpful feedback!

The main points I gathered from this feedback were to make my back button smaller, swap the emphasis from ‘director’ to directors names and spread/ break up the first page.

[paulab1799]

sherlock prototype

19 Screens, Last modified on Mar 05, 2020 12:07 GMT

Prototype

I made a prototype in XD. I hope to animate the drawer and folder opening, as well as the pages turning over but for now I have just included mid screens of how this would look:)

[paulab1799]

High res mock ups

[paulab1799]

Adding background

For the cabinet background I knew I wanted a dark wooden flooring and some kind of plain yet slightly old looking wall. I didn't want to add too much detail as I want the background to be subtle and well.. in the background! 

So I opted for a plain off cream wall (almost like my pages, for consistency) and added a slight gradient to the bottom to add to that old look. The flooring is just simply different gradients of brown rectangles organised properly to look like wooden floor:)

Again for the background of the pages I wanted something subtle, not too flashy and to match the theme I have built so far. Originally I tried the colour of the wall in the cabinet background, but it blended in too much with the pages. So I tried the wooden flooring and it actually worked really well! Still subtle but contrasts well with the folder and paper. I also like the fact that it now looks like the user has taken the folder out of the cabinet and set it on the floor to read:)

[paulab1799]

Buttons

I needed a back button to allow my users to get back to the open file drawer from the open folder. From my previous research I knew I wanted a rounded square with a simple back arrow, I also wanted it to almost look like wood? So I played around with different effects, textures and layers and came up with this:

After trying my favourites with the mock ups I decided the best suited button was this one:

I really like the texture of this button and I feel the layer works really well!

[paulab1799]

Adding images

I chose my images and then edited them by changing them to black and white, adding a rigid edge and texturising the photo, all to help make the photo look old.

I also varied between tape and a paperclip for how each photo was ‘stuck’ to the paper. I love little details like this as I feel they are what really makes a good design!

I did this for all the images included on every page.

[paulab1799]

Adding text

With my layout basically done and my typefaces chosen, it was time to put it all together.

The life and times of Sherlock Holmes

I simply broke up the text into paragraphs and distingushed the quote with an indent. As discussed previously I used ‘travelling typewriter’ as my body text font but actually decided on using a different font for the heading, to help break up the text better. I decided on ‘telegraphem’ as it still portrays a typewriter but is bolder and capitalised which is perfect for a heading. For the sub heading I simply used the same font as the body text but 7pts larger!

The cast of characters

I looked at a few different layout ideas for this page, sticking to the same format I had with the first page in terms of font type and size etc. However I broke the text up by taking out key points like the characters name and occupation (I also researched and added there date of births) to help portray the page more form like. I also decided on adding an image for each character!

221b Baker Street

I really liked the format and layout that I decided on for the cast of characters pages, so I decided to take this throughout the rest of my pages as well.

The Sherlock Holmes museum 

Using the same format as previous pages I simply looked at two different layouts for this page. One with text beside the image and one without. I felt the layout with the text beside the image looked best.

On the silver screen

I liked having the text beside the image, so I continued that with these pages. I also broke the text up a bit with capitalising specific words.

The small print

[paulab1799]

The paper

I spent a lot of time on this paper, trying to get the perfect edges and stains that I had imagined. I am really happy with the result!

[paulab1799]

Redesigning the cabinet

I looked at a different colour palette to help grasp the steel look that I wanted. I added a gradient to help capture the highlights that would bounce of a steel cabinet. At this point I was happy with the colours but felt it needed more texture?

I looked at different effects on illustrator and photoshop and played around with the densities trying to find a texture that I liked. My favourite four were:

After trying them all out on the cabinet, I opted for the last texture. For me it complied the perfect density that allowed that grainy look but also portrayed the highlights in the steel.

[paulab1799]

Initial cabinet high res mock ups

I liked the layout and shape of the cabinet but I wasn’t actually happy with the design and colour. I felt like it needed more detail, or something to make it look more like the steel cabinet I had envisioned. 

[paulab1799]

Deciding on my fonts

From the fonts I found and liked the look of, I downloaded and then compared one and other.

Typewriter fonts- for pages

I want a font that resembles the look of a typewriter of course but is also easy to read! After comparing these fonts, looking at the pros and cons of each, I decided my favourite were ‘special elite’, ‘rm typerighter old regular’ and ‘traveling typewriter’. I compared these three side by side, analysing each font in detail!

After looking at each of these fonts in detail, the letter sizing and spacing, the consistency, the alignment, the smudges on each letter.. I decided the best font for my digital product was ‘Special Elite. 

The font is fun and characterful, resembling a typewriter well. But is also easy to read with a nice spacing between each letter!

Stamp fonts

I found three fonts that resemble a stamp marking that I really liked.

I liked ‘top secret’ and ‘top secret stamp’ the best. I felt ‘Lino stamp bold’ was too smudgy? 

I decided I was actually going to use both of these fonts. ‘Top secret stamp’ for the actual stamp on the front of the folders as it resembles a stamp most, and  ‘top secret’ for the cabinet name tag!

[paulab1799]

Looking at fonts

I knew the type of font I wanted/needed for my digital product. A stamp like font for the folders, a typewriter font for the pages and a serif font for the folder name tags, but finding the perfect font for each of these was the issue.

https://www.1001fonts.com/detective-fonts

I found this website that had a category of fonts called ‘detective fonts’.

I liked ‘top secret regular’ and ‘top secret stamp regular’ from this site, I felt they could possibly work for the stamps on the folders.

https://www.creativebloq.com/typography/best-typewriter-fonts

This article was a great find for me as it’s on 17 best typewriter fonts which is exactly what I need for my pages.

My favourite from the 17 were,

After getting really excited over these fonts, I tried to download some but was faced with numerous issues that resulted in me being unable to use any from this site:(

However I found the ‘traveling typewriter’ font on another website (https://www.1001fonts.com/traveling-typewriter-font.html) where I was able to download it :D

https://www.creativebloq.com/typography/free-typewriter-fonts

After my frustration with the last article I was wary of the sites and articles that I looked at after, but I knew this article titled ‘24 free typewriter fonts’ was going to be helpful!

 I found a bunch of fonts that I liked from this site, here are some examples:

https://fonts.google.com/?query=typewriter

I also had a browsed through oul google fonts. I searched ‘typewriter’ to help focus my search on a font for my pages. 

[paulab1799]

Submission links

Designing User Experiences- IXD303

Narrative and Storytelling- IXD304