OUGD504 - Adobe Xd

This brief asks me to create prototypes for my brief that are working, animated or navigable. Despite taking part in a number of After Effect workshops to improve my animations skills, I have found the beta program: Adobe Xd to be very useful in the design process. Rather than spending time animating each individual moving element, I can work on the app as if I am using it. This gives me a better idea what it will look like as a finished product and brings me closer to professional design when I would use a similar program to show the client.

One useful feature of Adobe Xd is being able to record yourself as you try out the app you've created. Once I have inserted all images into my app I will use this feature. I then hope to insert this video into Adobe after effects, adding an iphone to the background. I hope this will then make it more engaging for the viewer.

My first experiment with Adobe Xd can be seen below. Although some icons and links are not yet working and photos are missing, I feel it is slowly coming together.

OUGD504 - Critique with Only and further development

Recently, design studio Only came in to help give feedback on work done so far for the design for screen brief. I showed the developed wire frames I had previously produced in illustrator. At this point in my design process I felt I had a near complete idea as I understood what features I would be including and had started designing my app on illustrator. However, the critique outlined a number of issues which my peers felt needed improving.

The first suggestion focused on my aim for the app to work as a research tool for people to look for and find the most appropriate font for their own work. My peers felt the app's social media aspect should include a way for user to ask others what they think the best font would be for use within their project. This feature could be easily created by giving users the opportunity to add another caption option. Users can ask: What font do you think would work best? so help can be given with ease.

The group also proposed I added a way for users to download a font they may like. To improve this I will add a simple icon, taking users out of the app to the appropriate source.

My peers noted that there was no incentive for users to comment on other people's work meaning people may be less likely to use the app. One option suggested within the crit was to include a 'like' system seen on other social media apps, where users are rewarded for answering a post correctly or giving feedback on work. This would sit alongside the number of followers on each persons profile.

One thing that was noted as successful during the critique was how there were a number of different ways for people to find the typeface they are looking for. This was something my peers felt was the most important feature so should be accessible wherever you are on the app.

One final thing that was suggested during this critique was to look more extensively at other type finding applications and companies. Examples given include: Font Matcherator, Identifont, Typekit and Whatthefont.

OUGD504 - Designing my app

Now my wireframes are complete and I have a good idea how my final app will look and work, I will start the design process in illustrator as it is easy to use and I will easily be able to create exactly what I want. However, I will look at a number of important design decisions first. After looking through the Monotype website, I found two typefaces I wiill consider for use within my own app.

Strada

This typeface is used recurrently on the website and is legible at most sizes. The modern font is one of Monotype's own and so will be easily recognisable for my app. I will use this for most of the text within my applications.

Malabar

This font is used less within the website however its unique qualities may help for my app to stand out against others, making it more recognisable. Despite this, I feel the font may be difficuly to read at smaller sizes and becomes less appropriate in more cluttered layouts.

Research into current, modern app design and the Monotype website has shown me that the colour scheme within this project must be clean and simple. I have decided to use the same colours as Monotype these are:

The monochrome colours are used for the majority of design however the blue is used for highlights and selected elements to help them stand out. These colours will be used within my app in the same way so the two interfaces are clearly linked.

Now my preliminary decisions have been made I will start to create my app.

Home Page

I first created two designs for the social media aspect of my app. It is important that all features are clear and accessible from this first page. I experimented with both small and larger photos however feedback found that the photos were too small on the left and the layout looked very similar to Instagram on the right so I needed to experiment. The '...' icon has been used to extend the post and give the user further options such as commenting. The use of the heart and comment icons was found to be too busy alongside the photo so the '...' became useful to hide it.

The bar at the bottom of each example interface is placed so users can easily access the camera however from feedback, I found this could be easily pressed when scrolling so I must look to move it to a more appropriate place.

Extending a photo

I created a simple interface that opens when a photo's '...' is pressed. The comments are clear and can be scrolled through with ease. I decided to not use an icon for liking the post and instead double clicking the photo will surround the photo with a blue border to show the same. The '...' will do the same when someone has commented. 












Looking at selected typefaces

I wanted users to be able to see a particular font in all its forms when they clicked it. My layout gives the option to see their own text in the desired font and change it to any characteristic they need. Information is given using the i icon whilst tagged photos can be seen with the # icon. All other parts of the app are still accessible using the bar at the top.

Posting a photo

Users are limited to four captions so posts won't move away from the subject of type. Options to crop and go back a step are placed in the below bar.













Finding a font through questions

A typeface can be found by answering a series of questions that lead a user to the final example. I tried to make the layout for these questions as simple as possible so user can be guided through with ease. If the correct typeface is found, you are lead to the fonts information page.

Catalogue of typefaces

A users desired font can be searched by name or scrolled through to be found. The name uses its own typeface so a quick glimpse of what it looks like can be given.














Profile

My first profile design is more cluttered than some of the other interfaces I have created for this brief but must fit more onto it. Users can connect together using other social media links such as Behance and Instagram however can also find new accounts and follow them accordingly.











Other interfaces I have designed for this app can be seen below:

OUGD503 - Penguin - evaluation and final cover

Being my first brief within the responsive module, I felt it was essential that I planned my time well and produced appropriate outcomes in time for the competition deadline. My vigorous research at the start of the brief has produced well informed final results that work well for this crime novel. 

The ambiguous shoe print design came about through research on the murders crime scene photos. Experimentation through hand drawn sketches and designs on illustrator progressed quickly and gave me a good number of layout ideas to bring to a final critique. Further experimentation with type also helped build a response that looked like a crime novel sat on a shelf.

Feedback sessions such as the final critique influenced my work greatly within this brief as told me how I could improve my work so far. These feedback sessions also showed me what stage I was in comparison to others doing the brief. This helped me to plan my time well and deliver my outcomes the best I could.

Overall, I feel this project has been successful. The conceptual outcomes were suitable for the target audience and adhered to the points set within the brief.

OUGD504 - icons

Having previously looked at icons within my research, I noticed their importance within my app. I went through my wire frames so I new which icons I would have to design for my app. I found there to be 7 icons needed which are listed below. 

Home button
Own profile access
Finding typefaces manually
Info about chosen typeface
Location
Tagged photos
Searching for typefaces
Camera
Cropping photos

I experimented with a number of options on paper first. My chosen designs were then recreated on illustrator.

OUGD504 - Critique

The Feedback from my critique was almost entirely positive. My peers swayed towards the Monotype idea because of the social media aspect which could connect users (including professionals) together. They felt this solution was more relevant to the brief and has potential to expand with further features especially using the hashtags for research use. Despite this, one person noted that the monotype wire frames were quite similar to the design of Instagram. I will make sure my final designs have unique qualities that separate themselves from other apps. The next stage in this design process will be to expand on my Monotype wire frames and start designing the app itself.

OUGD503 - Penguin - Type Experiments

I experimented with type in a number of ways. I first looked at what typeface would be most appropriate for heading and body copy, then how type could be best placed on the page in relation to image and white space. It's important that these design decisions consider the brief; focussing on being shocking and in tune with the book.

I used san serif typefaces within my experimentation as felt they best convey shocking emotions. Out of the typefaces I looked at I found Trebuchet to be most suitable. This came after consulting a number of my peers on my options and ideas behind their use.

I wanted my type placement experiments to be bold and in caps relating to shocking themes. I came up with different options to work around my shoe print design on the front of the book cover. The examples can be seen above.

OUGD503 - Penguin - Layout Ideas

I sketched out a number of layout ideas for my shoe print based on my extensive research on book covers. I looked at doing this in a number of distinctive ways so I had a number of options for progression within the brief. I first sketched my ideas out on paper so I had a vague idea what I wanted to produce. These can be seen below.

I then moved to illustrator so I could replicate my ideas digitally and get a better idea what my final cover may look like.

idea 1

idea 2

idea 3