Dungeness Evaluation

This was the last bomb project we had to carry out for our FMP. Considering the time constraints and what we where required to produce I am happy with the outcomes of my post cards. Through the photography and combination of typography I was able to achieve unique outcomes.

I wanted to emphasise the apocalyptic nature of the place by playing around with different hues to emphasise that eeriness of the place. Since the place really is quite barren I thought the landscape it’s self is not really something that was enough to entice people to check out the place. But by playing around with this apocalyptic theme I think it makes the images and place much more intriguing to someone that has not visited the place.

I would have liked to perhaps produce a few more post cards but the other images I was able to take were not as good quality and I didn’t feel they were consistent with the two I produced. It was a good practice for me to just be creative and produce an outcome without over thinking the design process. I had a general idea in mind of what I wanted to experiment with and I arrived at a slightly different but similar solution. As shown in my research I wanted to play around with different hue filters over landscape imagery and possibly combine images to create a collage. I didn’t end up going for the collage simply because I don’t have much experience producing them and I was happy with the outcomes I arrived at.

I do think the reddish hues and orange typography really make the images pop out enough to interest a viewer to find out more. I wanted to remain minimalistic in the amount of information on the actual postcard and as the ‘dungeness’ on its own is quite striking without interfering with the photo its self.

Screen Shot 2017-06-04 at 22.51.07

 

Screen Shot 2017-06-04 at 22.51.48

KSA Evaluation

The logo and brand I developed for the KSA bomb project works well at reflecting the company values that we were pitched during the brief run down. The logo itself is an abstract representation of a sales chart and the three ‘makings of a sales person’ that the company wanted to portray: resilience, tenacity and curiosity. With the combination of colours and typeface the logo looks modern and youthful yet it retains a corporate feel. I wanted to create a logo that was attractive to a younger audience but yet retaining a certain level of professionalism as I though if it was me looking to study in an institute I would prefer for the logo of the institute to look respectable.

I think I did a good job at experimenting with a lot of logo possibilities considering the amount of time we had to complete the project. The solution I arrived at went through various stages of refinement stripping back the logo to a more basic form. As I have learned from experience that the simpler a logo is the better it can be used across a range of branding materials. The example brand advertisement I created I think also reflects a certain level of professionalism that I wanted the academy to portrayed as.

Over all I am happy with the results for this project and I was also happy that I received a special mention from the KSA representatives that they liked what I had produced for them even though unfortunately my work wasn’t chosen.

FMP Evaluation

I am happy with the final outcomes of my mobile application. It has been a difficult process from the beginning. I wanted to create an app to facilitate people looking for pet sitters or house sitters when they are planning on going on holiday. This has probably been the hardest project I’ve had to carry out so far, and it wasn’t so much due to the design side of it but the whole UX methodology process is something I had never done before. There was a lot of planning and thinking behind every step leaving me a little frustrated at times as I spend a lot of time thinking of the content and information architecture before I was able to move on to the design.

Through out this project my dissertation and the Lightmaker brief I have learned about designing for digital applications. It’s a whole new area I hadn’t had much opportunity to work with. I have learned a lot through out this process and its something I hadn’t really done before properly. Designing a mobile app is something I have wanted to try out for sometime and there wasn’t going to be a better opportunity to have a go at it so I am glad I went for it in the end.

This time around I feel I was able to be more independent with my design process. I still asked for help or feedback if I thought it was needed but I tried to break off having to be reassured that I am heading in the right direction and become more confident in my designs.

One thing I struggled with was my time management, it’s a problem I have always had. Even though at some stages I though I was keeping on top of the work I could have definitely worked harder at the beginning so that I would have more time to reflect on my designs by the end and even have produced more work. I feel a big part of the problem was that since I was focusing on a user experience methodology, the whole process was something I hadn’t done before so I found it difficult to motivate myself to work and get much progress in during the first non-design stages. I was however undertaking several peoples jobs and it’s not something a lone designer would have had to do in an agency.

When it comes to the actual design stage I feel that my working rate has improved a lot from the previous years. My technical knowledge of adobe programs has grown and I am now very comfortable specially with illustrator as a base program for most of my designs. My attention to details such as layouts and typography has also improved a lot and feel a lot more confident in my choices without having to experiment loads before making a decision.

The final outcomes are what I set out to achieve, a minimalistic design delivering a good user experience through it’s well though out structure and simple design. I think it could have the potential to become a real mobile application with a little more development. The brand its self is strong and I think I have done a good job at creating a visual identity that reflects the tone of voice of my brand through the design of the logo and visual aesthetic of my app.

I would have liked to put the finalised versions through Invision so that I can show case the functioning app, but I will have to create it for the exhibition now instead. Overall I am happy with the outcomes of this project and what I have achieved.

 

Breeze style guideonline-01

Typography

Screen Shot 2017-06-02 at 19.04.33

Looking into typography I looked into webfonts. Knowing that print and web based typography has its differences I wanted to find out more. I found an article explaining more in depth what some of these differences included. Web fonts are optimised to enhance readability and how they work on screens. There are several elements that differentiate a web font: the x-height of a web font is usually taller, they have wider letters, heavier strokes and serifs, wider spacing as well as other modifications depending on the type design. This is usually done to accoomodate smaller font sizes on screens.

There are some desktop fonts that are optimised for the web. This is an advantage for creating brand consistency throughout print and digital mediums.

Having a better understanding of the difference between print and web based fonts will allow me make a better decision when choosing a font for my mobile app. I began experimenting with Bebas Neue but soon realised that only having capital letters wouldn’t really work well for my app. I then found that there is a web based font for Century Gothic, a typeface that I really like and have used before. It offers a lot of clarity and is a clean and modern looking font with four subset font families, bold, regular, italic and italic bold. This allowed me enough variety to create a text hierarchy which is an important part of the visual structure for my app. This allows the user to discern the information on the screen.

As I mentioned before for the logo I wanted a typeface that was light and smooth helping reflect the brand and name ‘Breeze’. Looking into script fonts I found a typeface called ‘Milkshake’  which produced a look consistent to what I was looking to achieve.

Screen Shot 2017-06-02 at 19.29.39

Screen Shot 2017-06-02 at 19.31.28

 

 

Reference:

https://creativepro.com/print-vs-web-fonts-what-s-the-difference/

Icon Development

I began sketching out my icons playing around with different possibilities. Trying to keep the imagery as stripped down as possible. The less detail involved the better they are going to look they get reduced in size.

At this stage I didn’t know exactly how many icons I would need so I decided to move into illustrator to further develop the ones I have for the moment.

 

Screen Shot 2017-05-09 at 13.07.27

I tried to keep the shapes very basic and using different pathfinder options I was able to combine certain shapes. This allowed me to create symmetry through some of the icons.

Through out the development of the app I though of more icons I could produce to include like the one above to represent a message that has ben replied to.

For the bookings section I decided to combine a calendar icon with the three wave lines from my logo.

The simple clear icons work well when reduced in size and look clean, sitting nicely with the rest of the design as seen below on ‘my profile’ page.

Screen Shot 2017-06-04 at 21.22.02

 

FMP Style Guide

I wanted to create a style guide for my app to show case it as a whole specially for as a print version for the hand in. Doing some quick research at how others have approached showcasing their apps I ran into a few examples.

Screen Shot 2017-06-04 at 21.35.59Screen Shot 2017-06-04 at 21.36.04

I created an a3 page where I was able to show a few of the screens to give a feel of the app plus all the other elements: colours, typography, logo, and icons. I also created another two a3 layouts showcasing all the screens

FMP Development pt 2

Through out the development of my app I kept referencing back to existing apps looking at different aspects such as type size, layout spacing, button states, navigation etc.

Screen Shot 2017-05-19 at 16.28.51

The process was a little tedious going back and forth experimenting with different placements of elements to see what would work better. For my placement images I used different images of family members as this was an important part of making the app begging to look more authentic.

Doing research into other apps I was able to get ideas of how to set up a user profile page for example. Thinking of the elements that I wanted to include such as having the ability to have an image scroll, having a full ‘about’ section, user reviews, services as well as the ability to contact the person.

Screen Shot 2017-05-22 at 13.15.02

Once I started having a general layout for my pages it was important for me to keep things consistent. This is important because having consistency through out the pages like having a backtrack navigation icon on the top left of each page creates a uniformity among the layouts of the pages. This consistency allows users to familiarise themselves with the design. This also means making sure that everything is spaced out exactly the same through out the different pages.

 

Other elements created had to also be consistent with the rest of the design, below is the calendar I created to go on the service booking section.

This slideshow requires JavaScript.

Screen Shot 2017-06-04 at 18.17.12

Other examples included the page headings

and the section headings (below) within a frame, I contemplated having the page headings at a bigger pt size but that would have created too much variation within the type hierarchy and would have begun to make the layouts look messy. So I opted for having the headings at 45 pts. bold, subheadings 35 pt regular.

And in some cases I used a subheading at 45 pt but in regular where I still needed to differentiate the type hierarchy.

Screen Shot 2017-06-04 at 18.43.17

Buttons and states

For the notifications and messaging pages I chose to emphasise “new” messages or notifications by adding a slight drop shadow and contrasting it against the slight grey back ground with a white frame to help it pop out

Screen Shot 2017-05-30 at 00.30.46

Below is an example of how these buttons would look once they have been selected.

Even though I wanted to keep the design as minimalistic as possible, I thought it was important to make sure that the buttons are recognisable as something you can press to help separate from the rest of the design considering the colour scheme is very limited.

For my navigation bar at the bottom the simple fill of the icons would let the user know what page they are on.

Screen Shot 2017-06-04 at 18.54.51