Colour scheme



colour scheme 1 colour scheme 2 colour scheme 3 colour scheme 4 colour scheme 5

For my colour scheme I wanted to start with a base colour, I chose yellow. I chose yellow because it is associated with optimism. Blue is also used as it represents knowledge. From the yellow I used different type of colour schemes such as analogous, triad and compound. I did this to get varying colour schemes but to still stick with the base colour. Just to add more variety I included white in some of the colour schemes because this would be useful as white goes with just about anything. Some of them are quite bright so I might tone down the brightness when it comes to using the colour scheme  in my design. Having the colours less bright would appeal to the target audience.


Mood board

Fife college has a web based app, this is what it looks like. I like the design, simplistic and eye catching. It includes features that I would have included in my app as well as great features that I never thought of. The pictures include the web based apps on android (right), iOS (left) and windows based devices (middle). I like the idea that the colours of the logo are carried over to the apps colour scheme. I also like their icons as they are simple and eye catching.

images from

Download IWCollege Apps

image from

This app is more article based which is an interesting direction to go in. It is also a good example of a design with an emphasis on photographs. Having photograph as the background however is something I do not want to do.

PACT Analysis


Physical differences- One focus will be to make sure the app is accessible for everyone even those with differences. For example there will be a good chance that some people have eyesight problems so, like they can’t read small text, so the design would need to include large enough text for most people to read clearly and maybe even icons that are clear and easy to make out. There could also be people who are colour blind so it would be helpful to make sure that the design is not dependent on colour coding so that you could navigate through the app without the use of colour or for people who’s colour blindness isn’t as severe, the design should avoid putting together colours that can easily be mixed up with colour blindness, to avoid confusion. There could also be audio alternatives considered for blind users.

Novice and expert users- The app will have to suit the needs of many different people, it will have to be relatively simple as there will be people that are novices when it comes to apps but it shouldn’t be too simple as that will put off the more experienced users.

Skills & Knowledge- I will be using popular apps as references since they will have the balance right between easy to use and a sophisticated look since they are so popular. I could also follow the design of the college’s web app so that people who have used the web app will instantly know what they are doing.


Time- I will need to consider the amount of time the users will be spending on the app. Most likely the users will be using it for short periods of time on a weekly basis so I will need to make sure that the features are easy to access to suit the way that the users use the app. If it is overly complicated people might refrain from using it. I will also need to think about what feature of the app people use the most. The parts that are frequently used will be located near the starting point for easier access.

Response time- The response time for the app will have to be fast because if it is too slow then the user might begin to get frustrated which is the last thing you want.

Colour & text- I will probably keep the colour in line with the college logos colours. As for the text it will have to be fairly big so that it is readable for everybody and the font that is used will have to be simple but still look good.


Place- The app will probably be used at home, to check where they are on their work or if there is any closures during bad weather and for other thing as well. It may also be used at the college itself or even on the go. So making sure it works on Wi-Fi is important but 2G, 3G or 4G will not matter as much.

Circumstances- Towards the end of deadlines might be a time where the app is used the most as the people who are trying to finish their work will be checking to see how much work they have left to do or even checking if they have passed the block yet.

Social environments- People will probably use the app when they are on their own or with other students from there class. It is unlikely that it will be used when someone is with their friends and/or their family.


Output- There will be a variety of things used in this area such as video, there could be an interesting video that our tutors want us to see or there could be some photographs, maybe photo’s of the staff or the building itself.

Accuracy- The information on the app will constantly have to be kept up to date as most of the info that will be on display will need to reach the user ASAP.

Reliable- It will also have to be really reliable, again this is because the info that the users want are needed sooner rather than later so it will be a nightmare if someone is waiting for important info and the app gets some sort of problem. Users would not trust it and would stop using it.

Final success-ometer

simpleInterfaceEvaluationStart page- Success-ometer success-ometer

There is a download above which includes the scores people gave me when rating my success-ometer. I got useful feedback mainly that the green was too strong and the blue was not standing out as much as it should have and the font was not good (but I was restricted to basic fonts which most of the people I asked did not like). However they thought that the use of it was good, as well as the layout and that it met the design brief.




Image from

Image from

I liked the idea of having the ratings going across the meter like in the first image but I did not want to do a normal looking gauge, I wanted colourful bars like in the second image. Doing it like this made it feel more like an info graph which is what I was intending.

Image from

To make sure that the user will understand how the meter works I wanted some sort of image to indicate Success and failure. This image gave me an idea to include arrows, the image itself is a sign but since success is normally associated with moving up I decided to put in arrows, one pointing up for success and one pointing down for failure.

Colour choice

I decided to go with an analogous colour scheme, this was because it kept things colourful but wouldn’t be as of putting as a complimentary. If it was too dull it would not grab anyone’s attention and if it was too bright it would look like it was aimed at kids.

For the colours I actually chose I used colour association. I started with green for success because this is the colour most associated with success as well as being happy (if you are successful you’re normally happy). I didn’t want to go for the usual red for failure so I instead went with a light blue as it fitted with the colour scheme and it has associations with sadness as well as calm (this was useful as I didn’t want an aggressive colour because that would put some people of). The green I use for the background is very neutral, this is to balance with the colours used on the meter, this is so that it does not take anything away from the meter.

I use white for every thing else as it stands out (which is good for the text and arrows) as well as enhancing the other colours (which is good for the meter itself).

Image from


User- Aged between-15-25

Colour palette- Nothing to bright as that we be aimed at children, nothing to dull as people would lose interest, so I will be looking at a colour palette that is colourful but not so bright that it will be of putting. I will probably go for a analogous colour scheme as it will contain varied colours but they will not contrast each other.

Typography- I will probably use a font that is not to complex yet still looks aesthetically pleasing.

Layout- I will be going with a simple layout that is easy to navigate, I want it to look like a chart/info graphic.