Cathal Mathers

[cathal-mathers98]

My Glitch Project - IXD303

As part of my work for my VR digital product, I hand to create a small example of how my application was to look like in A-frame/Glitch. I made a previous blog post about the application A-frame. It uses Glitch in order to code the project. 

For a starters, I am not a fan of code and I find it very difficult to understand. So, while doing this project, this is without a doubt the hardest challenge I faced. This was the first time I used or even heard of Glitch. So being given the task to create a whole VR app with Glitch, (which uses its own code) within 2 months or less, would be an impossible task for me. This is an example of how glitch is laid out.

I was able to use a basic template and work off of that, by including my own images and buttons. This was the only task I was properly able to do. I would simply add my created buttons and images I collected on Pixexid.com to the assets tabs, then copy the link and add it to the main body. In the end, it worked better than I thought it would have. This is how it looked in VR:

I wanted to do so much more to this piece of work, but I simply hadn’t got the requirements or knowledge to be able to do it. Anyway, all that was required was to have a small example of how it was to look in Glitch. After this, I started using XD to begin crafting the overall design. For the images I used throughout my whole project, I used Pixexid.com to collect a large variety of different images from different locations. However, I was very restricted to what I could find on this and the internet in total as there are a real shortage of 360 degree images available online. So I had to make do with what I got and that is exactly what you will see in my project.

[cathal-mathers98]

Link to my IXD303 - Digital Project

https://xd.adobe.com/view/f15e86a3-acd8-4acf-9958-a84f79449a6c-a40d/

[cathal-mathers98]

IXD303 - Project Stages/Reflection

For my IXD303 digital project prototype, I decided to create a VR app for elderly people in care homes. At the beginning, I was thinking about creating an COVID app for teenagers and adults, that they could get an idea as to how long we have been in lockdown and a final countdown until the end of isolation, to give the person a goal to strive for and a moment in time to look forward to. And within this app, they could record their daily habits and routines, to keep them busy during lockdown. 

However, I had to scrap this idea because, when I was in groups with my peers, we all agreed to study elderly people in cares homes as our intended audience. This gave me the opportunity to use VR. The reason for this was because, I myself are a fan of VR and I’m really interested in how it works and is created. Furthermore, nobody else seemed to be going down this route, which would add to the uniqueness of the project. 

Research and Sketching

Research

The first thing I began doing once I decided to do VR, was to begin researching VR as a whole and for elderly people in particular, with and without disabilities. (I talked about my findings in a different blog post.) In the end, I decided my target audience wasn’t limited to one small group of elderly people, like the examples I researched, which was VR and dementia. This idea to design just for people with dementia was already taken. So, I decided to make mine for all elderly people, of course people who are unable to see (blind) or have any other limitations that they can’t use a headset, would be ruled out of this. 

Nevertheless, I wanted to create a meditative app with the sole purpose of targeting elderly peoples mental health and helping them to feel stress-free from all the horrors and fears of the affects of COVID19, especially in care homes that was hit badly than nearly any other institution. I couldn’t imagine the fear, stress and death elderly people in these care homes were experiencing. So to take their minds off this, I wanted to create this app. Once, I knew what was required of me, I began looking at possible VR apps to take influence from.

I found apps such as “relax VR”, which is a meditative app that people can use to do yoga or simply relax. This really helped with the foundation of my app. It had some great features to take influence from. I even watched a full 15min review on YouTube of the app, just to see what it was like to navigate it. Immediately after this, I started thinking of names to call my project. With situations like these, I find it quite difficult to think of a name there and then. In my experience, I have to go about my daily business and think about a name then, in my spare time. I did exactly this and I came up with a few names.

I was mindful not to spend too much time on this task, as a name can always be changed later on if not suited. You can see from the names above that they are quite similar in one way, being that they are other words for a paradise or a happy place. e.g. oasis and tropic. They are used to describe a beautiful paradise almost. Anyway, in the end I settled for Nova, named after a supernova which when researched it is described that a supernova (if were seen with the naked eye) is one or if not the most beautiful and extraordinary thing you will ever witness. Which is quite related to my app, as it involves looking at 360 degree images of the beautiful views this world has to offer. Hence why I named it Nova.

Sketching the Logo

With regards to the logo, I again took influence from relax VR’s logo. I really liked the simplicity of it and the fact it was all low case as well, made it appealing and relaxing to look at. So I then began brainstorming a few ideas on paper.

I liked having the idea of the app logo relate to outer space, after its name, as you can see in the sketches. But then I realised that the app isn’t about outer space, its about relaxing and mediating. So I scrapped the idea of using this design. Still, it was good to have done. In the end, I received feedback from my tutor stating that with this digital product, there is no need to create a logo or a fancy looking visual marque. Just to have it in a sans-serif font. So taking onboard this feedback, I did just that. And I concluded with this design:

Early Designs for Name and Logo

But nevertheless, here is a few designs I made for possible visual marques and a logo before I was told to keep it simple. These were my previous ideas: 

With regards to the slogan, I seen examples on Google that stated “Turning your dreams into reality”. I thought this was a very nice slogan and very relevant to my project. So I decided to change this around a bit and settle for, “Where Dreams Become Reality”. This would give the app a bit more professionality.   

Sketching the App

Not long after this, I started sketching out some possible layouts for the application. Keeping in mind that I am designing for elderly people, I was aware to keep the navigation buttons large and the amount of content minimal. So began sketching. Below you can see my first drawing:

Main Page and Music Page

Location Page

Settings Page

As you can see I kept the buttons pretty large and easy to read. I wanted to include a music page were the elderly person, with the assist of a carer, is able to change the background song for when they are navigating through the app. I took influence from an app called Jaunt VR which is also a full immersive app, that allows you see different settings, whether it be up on stage with Paul McCartney or base jumping off a cliff. I copied the layout and the design of the boxes and settings, as seen below.

Sketch 2

I then created a second sketch to see if I can make the design more straightforward and easier to understand. I thought the settings and music page were quite alright, so not much changes were needed to that.

These sketches depicted how the app was going to be navigated. There is a button for the city, one for beach and one for forests. This was the design I wanted to follow. I had to be sure to get the dimensions right also. In order for the person to access the link/next page, they simply have to move the cursor which is lined with and built into the headset, to the particular button they want to access for 3 seconds. This will then lead the user to that page.

Buttons

With regards to the buttons, I originally took influence from relax VR again. Within that app the navigating buttons are rounded and appear to be like a large translucent bubbles.

I thought this was a really cool design and I loved how the buttons looked like balls of water that animated too. And as water is a great mediator and gives off a calming feel, this was a good move. So the next stage, before I began making the app, was to create the buttons on Illustrator. I created three drafts of buttons in total.

These were my first designs for the buttons:

This is only a small snippet of the buttons I created. At the beginning, I liked this design for the buttons. I wanted to include the colours, blue, green and white, as they were found to be relaxing colours and most associated with mediation. The font however, came to be less appealing when added to an image. So, I turned for help from my tutor and again I received great feedback on what I should do instead, which was to leave it as a san-serif also. 

I once again took onboard this feedback and changed the buttons immediately. I research fonts to use and I came across the font that is used in Spotify. I am a user of Spotify and I really like their font. It really suits being in an app. So I decided to use this. Which resulted in me creating this:

This immediately looked better. The font really stuck out more professionally. But that wasn’t the last time I edited my buttons. As the time went past, I noticed that the buttons needed something else to help draw out the background. And this was when I came up with the idea of creating vector icons on Illustrator to add to the buttons. Of course, that meant that I had to make them square, but this however suited better for my Glitch work (see glitch blog post). I simply found small vector images and traced over them in Illustrator and pasted them in my buttons. These were the final design for my project.

 An example of what they looked like:

The background colour appears darker in the actual project. In Tumblr it is showing it as a very light blue. Anyway, these buttons I loved. It is mad how a bit of icons and shapes can give an image a bit of life. To see the rest of the buttons, access the link to my work which can be found on my other blog post.

In conclusion, I am quite happy with the work I completed in XD for my digital product. I decided to cut the length of the app down a bit as it was totalling to 65 pages, which was quite a lot and overwhelming. To do this, I only created pages for: Forests, Beaches, Cities and Night Sky. My original design included hotels and piers. In the end, I thought this was a good move. Nevertheless, I did the best I could to minimalize the app and make it as straightforward as I possibly could. I have learnt that creating a VR app is quite time consuming and involves a lot of planning and research. An example would be, collecting a variety of 360 degree images on the internet. This was very time consuming as there is very little amounts of free 360 images. Many of them are repetitive and share the same location, which I don’t want. 

If I had more time to learn about VR and was able to redo the project again, I would probably attempt to create the app as an actual VR project on the likes of A-frame or Unity 3D. I think the ability to create a full-blown VR website from scratch would be an unbelievable achievement. Which leads me to the question, what do I wish I learnt before doing this project? And again it would be, that I wish I learnt in depth what it takes to create a real VR app. However, this is always something I could learn for for the next time I decide to create a VR app or website. 

[cathal-mathers98]

IXD304 - Week 4 - Narratives and Print and in Film

In todays lecture, we discussed narratives and how they can be used within print and film. We started off with the topic, the blurring of lines. Within this we were shown the Netflix animated introduction and how effective this animation was in setting a scene. How it begins with letter ‘N’ and then how it zooms straight up to the letter displaying a variety of lines, all in many colours. 

Then we looked at the work of Simon Wild and Annie Atkins from the film the Grand Budapest Hotel. These asset followed an amazing design, from the typography straight through to the colour scheme of pink and blue. A very nice design to possibly use for my prototype.

Afterwards, we discussed the power of pause. In my opinion this was a very interesting topic and I really enjoyed discussing it. How by saying or doing nothing for a moment can add suspense or calmness in a design. An example we talked about was the soundtrack to the movie Jaws. How the song begins slow and steady, with long pauses to indicate the mood is calm. But then how the tempo and the paste speeds up and the pauses gets quicker and slowly fade, the mood completely changes to suspense and danger. This is the same with design. I really liked this comparison as it made it easier to understand.

Another movie we talked about was Schindler's list, but regards to the topic of colour and contrast. How the use of colour and contrast can divert the eye and stand out from other objects. In this case, the little girl with the red coat. She stood out from everything else in the scenes that she was in, because the film was displayed in black and white. The same concept can apply to design, which would be a great element to include in my projects.

[cathal-mathers98]

IXD304 - Week 3 - Art Direction

In week 3 of our lecture for IXD304, we were introduced to the concept of Art Direction. It was a really interesting topic to discuss. Art Direction is the process that happens before design. A visual designer has to implement the direction in which the art/design is heading. An example we used was travelling to Venice. There are many different ways of travelling to Venice, you can go by a Ryanair  aeroplane, which would take you one way without stopping. Or you can travel by the orient express which has many stops and locations to pass through. The point is that the destination is the same, but the journey isn’t. This is the also the case with art direction. It is all down to your decision. 

So within this art direction, I have to ask myself I few questions like:

What outcome to I want? 

Who are the (users) characters 

What are the backstories (personas)?

What do I want to happen on the website?

These are the things I need to decide for my own art direction. 

Then we discussed briefly style tiles/guides. Style Tiles are a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand for a website. Within them, they should involve the typography used within the project/design and the colours and fonts. An element collage would also be useful to create, to get an idea or a feel of what art direction you are going down. My element collage can be found within my sketches. I also created a visual grammar/ style guide which can be found in one of my previous blog posts.

And finally se discussed the importance of researching beyond the internet and not being restricted to the likes of Dribble. An article that was recommended to us was the Dribbblisation of Design to look at. Overall, it was a interesting lecture and it gave me some very good questions for me to ask myself, like what type of style is my design going to follow etc.

[cathal-mathers98]

Responsive Website Stages/Reflection

For my project IXD304, I decided to create a responsive website on Webflow. I already created a digital eBook, so I wanted to enhance my skills at creating websites. At the beginning, before I began researching websites, typography and Illustrations to draw, I already had an idea in my head as to what style I would like website to follow. And that was Art Deco. 

I always liked this kind of style, how rich and wealthy it looked. It was more than a style, it was a type of ideology if you like. Highlighting the status of wealth and upper-class. My initial idea/plan was to create an art deco style website surrounding Sherlock Holmes. The reason for this was, that whenever I would see a Sherlock Holmes movie poster or banner etc. they all appear to be quite dark and gritty, which is expected from Sherlock Holmes stories, because its about crime and murder. I have watched quite a lot of Sherlock Holmes movies and TV shows to know this. But during my time viewing these, I have never seen a poster of Sherlock Holmes be associated with the art deco style. To be honest, I wouldn’t expect there to be, but I used this opportunity to do this exact action. 

I wanted to combine the art deco style with Sherlock Holmes, as I thought it would be unique and interesting to see once completed. Anyway, the first stage of this was to collect some interesting art deco frames from Pinterest and Google, so I could conduct some Master/Apprentice tasks. As the content itslef was already provided, this saved me a lot of time working on the layout and typography. I was mindful not to collect too many frames, as I didn’t want to bombard my webpage with all these different types of art deco designs. The reason for this is that art deco can be overwhelming and too much to look at when included too many times.

Wireframes

Once my research was conducted and I had collected all the necessary assets needed for the website, I began drawing my design idea. The layout of the design came to me pretty quickly, as when I was researching websites, I’ve seen webpages laid out this way, in a two column layout. I thought this would be suitable for my design as it adds to the simplicity of the site. The bottom sketch is my first ever draft of my website, so there may be some elements which I have changed or improved on from then. I wanted to keep this wireframe quite simple, by mainly focusing on the layout and the illustrations etc. You can check the drawings out to see more detail on the layout.

Which then leads me to my second wireframe. For this one I decided to draw it as two columns to give me and the viewer an idea of what it would be like to scroll through the webpage. I made a few minor changes to this one, by adding extra border frames around images and icons. All the icons you see will be ( and is) created by myself so I can properly say the website is from my own creation. These sketches I thought were very helpful and vital to the organisation and presentation of my final design.

Frames

Once the sketches were complete, I then began using Webflow to make the foundations of my website. The first thing I did was add a frame, which will be the starting point of my banner. To cut it short, I had a few templates saved to my computer for me to trace in Illustrator. And one of these frames I used within my banner, which is shown above. It was nice design that didn’t take too long to create, as it only consists of shapes. I put it all together in Illustrator and added it as an image on Webflow. The links and the content I create in Webflow of course. This was an example of the frames I included in my websites. You will find more as you scroll through it. Each of these templates were created the exact same way in Illustrator, so there is no need to go into much detail about them all. The colours used in them were from examples I found online of posters and banners etc.

Typography 

With regards to the typography, I used two types of font throughout the whole website. These were:

 Andes 

GatsbyFLF Bold.

I obtained these fonts on my research stage at the very beginning. I collected them on dafont.com and Adobe fonts. I simply researched art deco fonts and these were the best I could find. I really liked these two fonts because in places they were similar, however one was thicker/bolder than the other, which was exactly what I was looking for, for headings.

An example of these two fonts (from my website) used together would be this image:

Illustrations

These are like icons, maps and portraits I created in Illustrator to use on my site. There are quite a few Illustrations I made that is evident in my project. The first icon I created was Sherlock Holmes head, which is found on the Life and Times section. And also the map of baker street, which is seen below. This version was actually the first draft. The final design has some animation to it, which I did in Photoshop animation and also the buildings are gold, to correspond with the text colour.

The process to add animation to this image, is probably the hardest challenge I had to face within the website. I was advised by my lecturer to add animation to the image, but this is something I haven’t properly done before. So I had to watch videos on YouTube to see how I can carry out this task. Eventually after quite a lot of attempts I was able to make it into an animation, successfully. The only downfall was that the quality reduced. This was because it changed from a PNG to a GIF. And as GIFs have less colours in them, it appears quite pixelated. This was the only downfall. If I was to create this project again, I would look more into animation and how I could create a better graphic without making it a GIF.

Another illustration I created, which took more time than the others and also is larger, is the 221B Baker Street icon. Again, just like every Illustration I do, is from Adobe Illustrator, created by tracing an image of a front door and simply adding a few lines to indicate bricks and lanterns. Even though it took longer than the others, I still really enjoyed creating it. And if I were to do it again, I would probably add a bit of animation to the lanterns to get a bit of a flashing/diming effect.

With regards to all the other elements used in my website, there is nothing new to say about how they were created or its purpose. Every frame and icons is created the same way and the main purpose of the layout, frames, colour etc. is to add to the overall design of consistency, attraction, user-friendly and so forth.

In conclusion, I am pretty pleased with how the website has turned out. It took up a lot of time to create, but nevertheless its been rewarding. It is always fun to create art deco styled designs, this is a thing this project as taught me. It has taught me creating an appealing website can be very time-consuming and at times challenging if I am not sure about a particular areas which I am trying to accomplish. 

If I was to do this project again, the thing I would do differently would be to add some JavaScript to my bar chart, so it appears more interactive, using Chart.js. I was unfamiliar with this application until I received feedback. I was already to begin using chart.js, until I found out that you have to upgrade your package on Webflow to unlock the ability to add CSS, JavaScript or any other code to your website and considering I have the starter package, I was unable to require this code. This was frustrating, as I am already a paying subscriber to Webflow, but not eligible for this action. Nevertheless, this is what I would do differently second time around, if given the chance.

The one thing I wish I learnt before doing this module, was the ability to create animations from static images or graphics. For example, the process with creating my Baker Street map. If I had the knowledge to animate this before, I wouldn’t have to waste time watching videos on YouTube on how to animate, or even the effort of creating the animation several times, until I get it right.

To see the website - click here

[cathal-mathers98]

Style Guide for Prototype

For the style guide of my prototype, I used a similar design and guide that I used for my website. This was because both my prototype and website followed a very similar design and colour scheme. The reason for this was for consistency and appearance. I used the same font, colours and headings for my prototype as my website. The only difference was swapping the primary colour from black to white and the buttons “Prev” and “Next”, which I have no use for in my website.

[cathal-mathers98]

Final Prototype - Stages/Reflection

If you read my last blog post, you would see that I decided to re-design my current prototype (at that time) to a more Victorian era styled eBook. At the beginning I was quite impressed with how it looked, compared to the previous design. But not long after this, I asked my tutor for feedback on this prototype. And feedback I received. The feedback stated that the design was going in the right direction but it had quite a number of problems. More than I would have thought. Everything from the design, layout and images to the size of the overall project. At first I was very shocked with the amount of changes that were to be made, but then the more I look at the design, the more I came to realise how weak and messy the design was. This in turn made me realise that I was following the wrong design path with my prototype. 

So because of this, I had no choice but to re-design it a completely different way, as one of my feedback points my tutor gave me, was that the immersive prototype should fit/follow the same design as my website, which was Art Deco. This was the absolute turn around for my project. This was the point that I started planning on creating my prototype Art Deco style.

First off, I began researching art deco styled eBooks on Google and I came across a book called “Art Deco Britain”.

With this book, I wasn’t overly interested with the cover of it, even thought I think it is a very nice design. I already had an idea of how my front cover should look. Anyway, the design tips and ideas I received from this book was the layout of the actual pages within the book. At this stage, before any sketches, I had no idea how I would go about laying at an eBook following the art deco style. I have laid out my website art deco and it wasn’t much of a problem, but again the layout of a book is different to that of a webpage, as there is less room to work with. This is what cause me to look at art deco styled book pages. 

As a result, I noticed that this book had it paged layout in a two column style, with a plain white background. At the beginning I thought this was interesting. I was expecting art deco books to be covered in all fancy shapes and colours. But this example gave me a great perspective on art deco books. This in turn influenced me to keep the white colour as a background to some of the pages in my eBook, which you will see later in the blog post.

Once I had researched enough about art deco styled eBooks and icons to include, I began sketching out my design ideas on paper. The main element I wanted to possess was simplicity. I wanted the design to look very appealing but also quite easy to navigate and fun to read. As I created my website in art deco, I had some shapes and icons/frames left over which I created myself on Illustrator. I didn’t want these to go to waste, so I sketched out and planned where I should put these within the final design. The sketches below should give you an idea of my intention. 

Paper Sketches

The first sketch includes:

Intro page

Contents page

Life and Times pages

While the second is:

The Heroes and Villains page - which all follow a similar layout, to keep with consistency.

And finally:

The Silver Screen page 

Measuring Mr. Holmes page

In the end, these sketches appeared to be nicely laid out and lived up to my expectations. Now it was time to begin designing on XD.

Final Design

With the creation of my final design on XD, I thought it was quite enjoyable. I practiced what I’ve been taught and what I have learnt from my previous mistakes, which was not planning ahead or being prepared on what I should do. I designed the prototype without any major problems and with this draft especially, I was happy with how it turned out. I had a good feeling that this was the prototype I was meant to design. My patience and time and effort in creating so may drafts of the same project has paid off.

The designing process went quite smoothly, as I had the layout planned already on paper. Below you can see an example of my contents page. I wanted to keep the eBook consistent with my website. So I included a few shapes and frames from my website to this. And in my opinion I think it fits nicely.

This is what my first page, the life and times of Sherlock Holmes looks like. Again, as stated earlier, I wanted to interpret the design element of using just a plain white background with black text as used in the “Art Deco Britain” book. Another reason for doing this, other than it looking appealing, was that again, my website was an all black background webpage, with white and gold font. I wanted to make this prototype a bit different by swapping these colours from primary to secondary.

With the Heroes and Villains pages, I keep the layout the exact same because again I wanted to keep up with the consistency of the design and not over think or exaggerate style. The only difference between the Heroes and Villains pages, apart from the content and images, was that keep the Heroes in a white background, while the Villains were presented in a black one. I did this because of symbolism. The white can be a sign of hope and warmth, whereas the black is a sign of darkness or evil, perfectly reflecting villainess characters. You can compare these images below:

With regards to the silver screen, I mainly followed the same layout as I have always followed on my other previous drafts. This was because, I thought this layout looked organised and easy to read and plus my lecturer agreed and never gave any negative feedback on this layout. Each of the title names includes a link to the IMDB website, where the user can find out more about the movie.

And finally, to the last page, which is measuring Mr Holmes. This page just includes bar chart of the top 10 highest rated Sherlock short stories according to its creator, Arthur Conan Doyle. With this page, I only wanted to include the bar chart, because my thinking was that throughout the whole eBook there is tons of text for the user to read (which is the purpose of an eBook), so I thought a page that has very little to no text would be a change of sight. Hence why its laid out like this.

Throughout this whole design, there wasn’t very many problems or issues I faced. Probably the biggest decision I faced (rather than a issue) was on what colour to use for the background on my front cover. I had a few different examples/versions laid out together that took my pick. 

But in the end I decided to go with the blue, white and gold. The reason I picked this was because, when I was researching art deco books, I seen two examples of books where the main colour used as the background was blue, with gold font and frames. I liked this contrast of colours as I thought they were unique and stood out from the text. The example of my front cover and the book where I drew influence from can be seen below. You can compare them yourself:

My Design

A Night of Noir

In conclusion, I thoroughly enjoyed creating this final design of my prototype, compared to my previous versions. This design felt right to me and more importantly it corresponds with my website, with a few differences here and there. I created every single one of my drafts on Adobe XD, as I believe it is very good for designing eBooks and it gives you the ability to link each pages, which gives the eBook a realistic feel. I again learnt from this piece of work, that organisation and planning is vital in the creation of a well-presented design. As well as research. If I didn’t conduct research at the beginning, then I wouldn’t have any knowledge of how art deco could be interpreted in an eBook.

What I would do differently next time, would be to create more art deco frames and shapes to include in my design, so I prevent the problem of using the same frames again and again. Furthermore, what I wish I had done or learnt before completing this task, would be to look at the Material Design website and learn off hand the best dimensions and layouts to use for positioning content, to aid in my presentation. Other than that, I think the design process went better than expected and I look forward to the next time I can use art deco within a project.

To see the Final Prototype - click here

[cathal-mathers98]

Re-defining my Prototype Stages/Reflection (Draft 2)

With regards to my prototype which I created in week 6 of IXD304, I made a last minute decision to re-design it, as I thought the overall design and layout of the project was quite weak and needed a good few adjustments to it. As well, as this, I mainly lost interest in the design and I believed I could create a better, more consistent style. This second draft of my prototype ( the one I am re-designing) was a combination of modern and Victorian style designs. It mainly had a more modern feel with the addition of a few Victorian style page borders. 

I believed this was a problem, because the overall app appeared to be random, as it didn’t know what style to follow. So, I wanted to correct that mistake by re-designing the prototype so it has an equal combination of both modern and Victorian styles. 

I even tried to change the layout and colours on this particular draft, but for me, no matter how many times I edited it, it still wasn’t appealing to me.

To see the process and story behind this first drafted prototype and the construction of it, click here to access the blog post.

Paper Sketches

Moving forward, with regards to my new prototype design, I first began by making wireframe sketches on the layout and the overall design. I already had the content sorted out anyway, so there was no need to include that in the sketches. The main purpose of this was to get an idea of how the app would appear to look on paper. We all know that some designs drawn on paper don’t turn out to be as accurate or as successful on the computer. I was already aware of this, so I had many pieces of paper available to me in case this happened. 

I already had in my possession, images, Victorian style page borders/ frames and wallpaper. So I knew what frame and design to use for each page. I was definitely more prepared this time than my first and second drafts. So, on these sketches I made a few points of information beside each element on the pages, to give myself and others looking at it an idea on what that section does and includes etc.. 

Anyway, these are the sketches I drew. The first page included:

Intro page

Content page

Life and Times page

Heroes page

And the second page:

Villains page

Silver Screen page

Measuring Mr. Holmes page

Once the sketching stage was complete, it was a matter of creating the designs digitally. I used the same application and same dimensions, while keeping some elements similar to the previous design.

Examples of Digital Prototype

Front Cover

For the front cover of the eBook, I decided to keep the layout and the text the same, because I liked the frame and how centred the text was. The only difference was the background colour and design. I had this image within my possession, I since obtaining it, I really liked it and thought it would look good as a from cover to a book.

Contents and Life and Times page

With the content page, I decided to completely change the layout and style of it. I thought the previous version was very crammed and overwhelming. For me a contents page has to be simple and straightforward to follow. For me, this one did a better job at it, than my old prototype. 

In addition, the Life and Times page has been completely revamped. I decided to put content in a two row column for this, as I wanted to follow a style and layout you would find in a Victorian book. I found examples of these in my research. In the end, I thought this was a better layout to follow, as I much preferred this than my the old version. 

Silver Screen and Measuring Mr. Holmes page

These pages again followed a similar style to the others, as I wanted to make the eBook consistent and easy to follow. For the background borders and images within the movie posters, I designed them in Illustrator, using the same Victorian image I used in the front cover. The reason for this was to help the image stand out from the text, make it look more professional and keep the design and eBook consistent.

With regards to the bar chart, I again created this in Illustrator using a Victorian style wallpaper as the background and an icon of Big Ben to help the chart stand out. This time I changed the topic from, “Sherlock Holmes top 10 short stories” to “The most common crimes committed in Sherlock Holmes”. I wanted to add more variety within the bar chart.

These are only examples/screen grabs of my prototype. Nevertheless, as you can see, throughout all these pages, I tried to keep an equal balance of both Victorian style and a modern style. For example, the page layout and frames are quite Victorian looking, but the text is Futura, which is quite modern compared to the Victorian era. The reason I chose Futura was because on the TV poster of Sherlock Holmes starring Benedict Cumberbatch, the small font used was Futura and the large one was a customised one designed for the show, which I am in possession with and have used it as the title to each page within the prototype. That was the main purpose. I wanted to combine the old Sherlock Holmes style with the new one, giving the eBook a unique look and feel to it.

In conclusion, I had a better time creating this prototype than the previous one, because I liked the overall design and layout. I think the old Victorian art and style is really nice if used properly. What I learnt from this project is that, research and preparation is key. More knowledge of certain styles can really aid you when it comes to designing it. If I was to do this project again and had more time, I would probably start designing my own templates and Victorian frames. Each of this frames looked very hard to be able to replicate, so it would require me to complete some master/apprentice tasks to get to that level. This was the thing I wish I learnt before doing the project. I will learn from these mistakes and improve on them for any future projects.

[cathal-mathers98]

Fitt’s Law

Fitts’ law states that the amount of time required for a person to move a pointer e.g. mouse cursor to a target area, is a function of the distance to the target divided by the size of the target. So, the longer the distance and the smaller the target’s size, the longer it takes.  

Fitts’ law is widely applied in user experience (UX) and user interface (UI) design. For example, this law influenced the convention of making interactive buttons large, especially on touch-screen mobile devices, as smaller buttons are more difficult and time-consuming to click. The user interface can affect the user’s experience in a number of ways like the size of the target and its distance from the user current position. 

How to prevent this, simply:

Create larger targets

Creating larger targets will aid with interaction as well as allowing you to get the most pixels out of your interface. For example, some websites do not extend the clickable area of a button or link to the entire target. As a result, more precision is required to move the cursor to the selected link, which leads to slower navigation times. Fitts’s Law would suggest using every available pixel to enlarge the clickable area and thus making it a larger target to click.

Minimize Movement

If you place the links and buttons users are most likely to access on a daily basis next to each other, rather than separating them across the interface, you will speed up interaction by reducing the number of pixels the cursor will have to travel. Its purpose is to give your website/screen a clear and consistent structure.

[cathal-mathers98]

Miller’s Law

Miller’s Law can be defined as the number of objects an average person can hold in working memory, in this case about seven, also known as The Magical Number Seven, Plus or Minus Two. According to Miller, our short term memory and absolute judgment are both limited to number 7 on average. Therefore, Number 7 is called the Magic number. The Seven (plus or minus 2) however, is a way of grouping content so that it could be organized better for human comprehension.

This law can be applied to so many situations and professions. An example would be card numbers on your debit card or mobile phones. How many times would a person glance over the numbers to see if they entered the code correctly (double checking)? Same applies to mobile phones.

However, in my case, it can be applied especially to UX Design. When browsing the internet, it is more in likely that a user will come across a website or article that will break this law. Usually along the sides of the body sections, you would see links to articles/blogs chunked together in large amounts of text, with nothing to separate the content. An example would be the image below. As you can see, the content on the left is quite overwhelming, as there is no images or proper spacing/layout to help break down the text so the users can remember the links better. 

Whereas, the content on the right has been displayed in small sections and placed alongside images. the only difference is that the content is condensed, laid out or separated nicely in rows and accompanied by icons. And from doing these actions, you can see a big difference even though the changes are small. Our brain will process this information quicker.

What you can take away with you from this topic is that, organizing content into smaller chunks helps users process, understand, and memorize easily.

[cathal-mathers98]

Hicks Law

Hick's law is a psychological principle which states that the more options are available to a person, the longer it will take for him/her to make a decision about which option is best. Hick's law is also sometimes referred to as the Hick-Hyman law. Named after William Edmund Hick and Ray Hyman, the law provides a logarithmic function which models the reaction time (RT) required to make a decision: 

RT = a + b log2(n)

In this function, n is the number of choices while a and b are constants which depend on the circumstances of the decision being made. Hicks law can be interpreted in Design.

Designers often use the "Keep it Simple, Stupid" principle to avoid overwhelming potential users or website visitors. This is important for websites when planning navigation menus. Having too many links makes it difficult to find the category that the user is looking for, and discourages them from staying on the website. 

One way of avoiding this issue, if having many options is necessary for the purpose of the website, then grouping them together cuts down on the items in the list, making it much easier for the user to find what they are looking for and make a decision faster.

[cathal-mathers98]

IXD 304 - Style Guide - Website

This is my style guide for my interactive website on Sherlock Holmes. The layout/design I used for this style guide, I took influence from an image of a style guide on Google images, that used an image within the guide to help text stand out and to cover a large chunk of empty space. I thought this was a very nice and smart idea, so I decided to do something similar but with an art deco style, considering my project follows this style.

[cathal-mathers98]

Art Deco - Examples/Influences

When the time came to begin planning on how my website would look, I conducted some research into art deco, then began looking at possible examples of art deco websites I could use as an influence for my own. But to my own surprise, I could barely find one website that followed the this unique and elegant style. There was mainly just art deco design frames, images and text etc. But hardly any websites. This really shocked me, because I would have assumed that when I searched for art deco styled websites, there would be large variety of different examples because of how successfully this decorative-art has used within the past 100 years.

However, I eventually found one website when I delved deeper into the search engine. It was a website that advertised photography that consisted of only one person, a female called - Monika Wertman, Head Photographer and Owner of Wertman Photography (the name of the website). She created this website in WordPress using the art deco style. At last I could finally relate back to at least one example when creating my own. 

This website influenced my use of font and colours. As well as the overall typography included in mine as well. I would research some art deco styled font and download it so I could in turn use it. The colour scheme was heavily influenced also. I really liked how the gold and the black backgrounds could correspond with each other and help the white text stand out in the process. 

In the end, these were the only elements that really influenced my own designs, as I thought the decorative backgrounds would be too overwhelming for my website, as there is quite a bit of content in mine. Nevertheless, this website turned out to be a great inspiration for my typography and colour. 

In addition, with regards to my ideas for the design of the frames and background of my website, I took some inspiration from these designs I found on Pinterest:

These types of templates I thought, were very helpful and vital to the creation of my own. Simply, I completed a few master/apprentice tasks of these templates that I created on Illustrator. But instead of just copying it, I would add a few elements such as circles, squares, lines etc. to my finished design, so it would be unique to me, instead of just copying the exact design.

Then at the end when I had all the designs and wireframes created, it was only a matter of beginning construction of the website on Webflow.  

[cathal-mathers98]

Art Deco

Art Deco is a movement in the decorative arts and architecture that originated in the 1920s and developed into a major style in western Europe and the United States during the 1930s. Art Deco design represented modernism turned into fashion. Its products included both individually crafted luxury items and mass-produced wares, but the intention was to create a sleek and anti-traditional elegance that symbolized wealth and sophistication.

The features of the style are simple, clean shapes, often with a “streamlined” look, ornament that is geometric or stylized from representational forms and unusually varied, often expensive materials, which frequently include man-made substances (like plastics) in addition to natural ones (silver, ivory).

Art Deco in Graphic Design

Graphic design was one of the earliest areas where Art Deco left its mark, starting before World War I. It was in the Paris costume designs and posters for the Ballets Russes and fashion catalogues of Paul Poiret, where a French audience first saw Art Deco-influenced graphic design. From then, the style is very much still alive and being used in this modern society.

An example of a famous Art Deco poster designer included Charles Gesmar, who designed graphic art for Air France, and Adolphe Jean-Marie Mouron, who designed the famous poster for the ocean liner SS Normandie by 1935.

Art Deco in Web Design

During my research into art deco as a decorative-art style, I came across a few examples of designs that made use of this style in its brand. But an interesting one for me was the site for the Los Angeles Football Club, a US pro football franchise that’s based in the City of Angels. Its web design is infused with notable references to Art Deco, in part because of its crest and site logo and in part due to its colours.

The LAFC crest features a Neutraface font that emits Art Deco due to its:

Simplicity

Hard corners and edges

Smooth, straight and sleek lines

Geometric influences in individual characters 

Me being a big football fan, I especially took interest into this design and what it stands for. In my opinion, I think it is really unique yet awesome to interpret this design into a football teams logo. The fact that art deco was created over a hundred years ago and is still heavily used in companies/brands as just a decorative-art style to advertise the business with no regards to what it originally stood for, which was wealth and an indication of a high social class.

In conclusion, this is why I decided to use this art style for my Sherlock Holmes website, because it is unique, attractive and very elegant. What gave me the idea to use art deco was, that my family recently purchased a art deco styled mirror for our house. And every time I would pass it, the design and the colours included in the mirror would stand out very noticeably for me. Enough to grasp my attention. From this, I would decide how I could use this Great Gatsby style type for my own benefit and include it in a project for University. In the end, this project gave me just the opportunity I needed in order to do that.

[cathal-mathers98]

5 Principles of Visual Design in UX

Visual design principles inform us how design elements such as line, shape, colour, grid, or space go together to create well-rounded and thoughtful visuals. From this, there are 5 visual design principles that impact UX. They are:

1. Scale

The principle of scale refers to using relative size to signal importance and hierarchy in a composition. When this principle is used properly, the most important elements in a design are bigger than the ones that are less important. The reason behind this principle is simple: when something is big, it’s more likely to be noticed.  A visually pleasing design generally uses no more than 3 different sizes. To emphasize the most important aspect of a design, make them biggest.

2.  Visual Hierarchy

The principle of visual hierarchy refers to guiding the eye on the page so that it attends to different design elements in the order of their importance. This can be implemented through variations in scale, value, colour, spacing, placement, and a variety of other signals. To create this, use 2–3 typeface sizes to indicate to users what pieces of content are most important or at the highest level in the page.

3. Balance

The principle of balance refers to an arrangement or proportion of design elements. Balance occurs when there is an equally distributed (not necessarily symmetrical) amount of visual signal on both sides of an imaginary axis going through the middle of the screen. This axis is often vertical but can also be horizontal. 

The kind of balance you use in a visual depends on what you want to convey. Asymmetry is dynamic and engaging. It creates a sense of energy and movement. Symmetry is quiet and static. Radial balance will always lead the eye to the centre of the composition.

4. Contrast

The principle of contrast refers to the juxtaposition of visually dissimilar elements in order to convey the fact that these elements are different, e.g., belong in different categories. The principle of contrast is often applied through colour. For example, red is frequently used in UI designs, especially on iOS, to signify deleting. The bright colour signals that a red element is different from the rest.

5. Gestalt Principles

Gestalt principles explain how humans simplify and organize complex images that consist of many elements, by subconsciously arranging the parts into an organized system that creates a whole, rather than interpreting them as a series of disparate elements. In simpler words, Gestalt principles capture our tendency to perceive the whole as opposed to the individual elements.

For example, in this image we see just colours in the same shape. But if you look closely at the white shape in the centre, you see the image actually appears as a peacock.

[cathal-mathers98]

Journey Mapping - Nielsen Norman

A journey map is an image or a visualization of the process that a person carries out in order to accomplish a goal. In its most basic form, journey mapping starts by compiling a series of user actions into a timeline. Then the timeline is fleshed out with user thoughts and emotions in order to create a narrative. This narrative is condensed and polished, ultimately leading to a visualization.

Journey maps come in all shapes and sizes. Regardless of how they appear, journey maps have the following 5 key elements in common:

1. Actor

The actor is the persona or user who experiences the journey. The actor is the person that the journey map is about, in other words a point of view. Actors usually align with personas and their actions in the map are rooted in data.

Provide one point of view per map in order to build a strong, clear narrative. 

2. Scenario + Expectations

The scenario describes the situation that the journey map addresses and is associated with an actor’s goal or need and specific expectations. Scenarios can be real or anticipated, for products that are yet in the design stage. Journey maps are best for scenarios that involve a sequence of events, such as shopping or taking a trip, describe a process or might involve multiple channels.

3. Journey Phases

Journey phases are the different high-level stages in the journey. They provide organization for the rest of the information in the journey map (actions, thoughts, and emotions). The stages will vary from scenario to scenario; each organization will usually have data to help it determine what these phases are for a given scenario. an example would be;

For an ecommerce scenario (like buying Bluetooth speakers), the stages can be discover, try, buy, use, seek support.

4. Actions, Mindsets and Emotions

These are behaviours, thoughts, and feelings the actor has throughout the journey and that are mapped within each of the journey phases.

Actions are the actual behaviours and steps taken by users. Mindsets correspond to users’ thoughts, questions, motivations, and information needs at different stages in the journey. Ideally, these are customer verbatims from research. Emotions are plotted as single line across the journey phases, literally signalling the emotional “ups” and “downs” of the experience. Think of this line as a contextual layer of emotion that tells us where the user is delighted versus frustrated.

5. Opportunities

Opportunities are insights gained from mapping; they speak to how the user experience can be optimized. Insights and opportunities help the team draw knowledge from the map:

What needs to be done with this knowledge?

Who owns what change?

Where are the biggest opportunities?

How are we going to measure improvements we implement?