OUGD504 - Module Evaluation

Overall I have enjoyed this module and think it has been a great module to help us 'get back into the swing of things' after the summer break. Although it has felt like a quick, short and snappy module (especially with two studio briefs) it has helped keep things interesting and engaging.

The first studio brief was something I found really stressful - I had done all my summer research and prior planning in order to create a guidebook on architecture, and then found out I had to do Catherine's brief on indoor plants - something I know nothing about! The content I was given was very limited and I struggled to piece things together without doing my own research and reading.
Once I had got my head round it though, I really enjoyed it - especially creating the collages. Collage work is something I really love so I found a way to incorporate this into the publication in order to keep it interesting for myself, in a way! Chats with Catherine really helped me in terms of direction for the publication too. This brief certainly taught me more about what it's like to work with a client.

The second studio brief I enjoyed more - I found the briefing very daunting as I knew nothing about design for screen! But eventually after I had completed all my research I started enjoying it more. Designing the app for something I had a personal interest in really helped and kept me motivated and engaged with the process throughout. Whilst I felt I was learning as I went along, I do feel like the final outcome was a success and things could have been a lot worse! This particular brief I felt opened up doors for me for other potential career routes etc.

In general, this module has taught me a lot about printing, production and also designing for screen. The things I have learnt will be useful for future projects and are things I can take forward into my career.

OUGD504 - Guidebook - Studio Brief Evaluation

Overall I would say I am happy with the final outcome.

It is very appropriate for the target audience, young adults, and uses humour and quirkiness to keep them interested. The 1970s collage combined with a more modern, contemporary typeface/house style are a great juxtaposition and give the publication a unique element.

The colour scheme sways away from heavy use of green, which is again a nice contrast with the actual
publication title, ‘Green’. Again, it also adds a unique element as the majority of books about indoor plants are primarily green based colour-wise.

The overall aesthetic and ‘feel’ of the publication matches up with the independent vibe I wanted and suits the sort of places the publication would be sold, e.g Urban
Outfitters. The paper stock is cheap allowing for
inexpensive production costs.
The Chinese staircase spine adds an interesting hand-crafted element, a contrast between the strong and contemporary graphics within. This also links nicely back to the natural and ‘hand-grown’  element of
gardening.

Improvement wise, I would have liked to have produced more content given the time. I also think the publication may have benefited from a thicker/maybe even
hardback cover to give it a more keepworthy feel, rather than the thin, throwaway impression it may give out now.
I would also liked to have pushed the publication further and looked at how I could use the collages in the best way - in early stages I looked at creating the publication in the style of a 1970s housekeeping magazine, but this became too complicated. Given the time I would have liked to explore this a bit more in depth.

After receiving feedback from peers I believe my
publication is effective and puts across the message that I was hoping for - indoor plants are cool, interesting and accessible for a younger audience.

OUGD504 - Guidebook - Production

Once the booklet design was finished, I began trying out different prints on different stocks. I tried printing the booklet onto plain white A4 paper, but I felt this looked quite unprofessional and didn’t give off the right ‘vibe’ I wanted.

  

  

I then looked using sugar paper - an off-white colour that would match the quirky and ‘indie’ aesthetic of the publication. I trialed printing onto this stock and was shocked by how much I loved the print - the nature of the paper meant that the ink was absorbed in a different way to normal paper, leaving an almost grainy effect. This particular element was something I felt really added to my publication in a positive way, and gave it another dimension as such.

Also because the paper was off-white, it made all the colours appear differently in the flesh. At first I wasn’t too sure about this as the print-out looked very different to how I had originally designed it on-screen. After some feedback though, the colour of the print on the off-white paper really grew on me and I decided to take this
forward into my final print.

Once printed, I took the stock down to the binding room and bound it together using a simple saddle stitch. Whilst this was efficient and simple enough, I felt as though I could add something extra as a finishing touch. Using a lighter orange coloured thread, I used a
friendship braiding technique called the ‘chinese
staircase’ that wrapped around the saddle stitch. To me, this really resembled a vine-like plant, which tied everything together nicely.

  

  

Due to the independent nature of the magazine, this was appropriate, however if it were to be mass produced a more efficient and quicker method may have to be used.

OUGD504 - Design for Screen - Studio Brief Evaluation

Overall I am happy with my final app design.

I feel as though it functions well, transitions smoothly and works in a user friendly way. It is simple, clean and accessible, which is everything I wanted it to be in terms of functionality for the user.

The gender neutral element I believe comes across really well - there are no pinks or blues in sight, and staying away from gender biased imagery has really helped
solidify that part of the design. The limited colour palette of the app again reiterates the idea that parents can choose whatever they want for whoever their child is. The neutral tones also allow for easy and gentle viewing on screen, with nothing garish or ‘in your face’ standing out in a negative way.

The whole design process has taught me some really
important and valuable lessons when designing for screen, such as viewing the software in its proper
environment -  i.e an app on an actual mobile phone. This really showed me how disillusioned you can be when designing on a desktop, and how different things can appear when viewed in other formats/devices.


I have thoroughly enjoyed the project and gained lots of extra knowledge within this area of expertise. In future, I will make sure I carry out all the necessary steps before I carry out the design process and ensure I explore every potential problem before finalizing my design.

OUGD504 - Design for Screen - Final App Design

Now that all the necessary changes have been made to the final app design, I have used Adobe XD to put it all together so that it works in a functional way.

OUGD504 - Design for Screen - Modifying/Making Changes to the App

After viewing my app on my phone screen I have decided to create some more user friendly variations so that they work better on the actual mobile version.

I experimented with changed the top of the page as the navigation bar was too small and complex for the screen size. I tried out a variety of different approaches from changing to icons at the top to search bars etc.




I have changed the navigation bar at the top so that it has just icons rather than actual words. This simplifies things and makes it appear less cluttered. I also made some other small changes to the page, such as less text on the darkened bar, making the 'shop now' bigger and increasing the weight of the text underneath the images.


    >    


I also adjusted the product range page, again changing the navigation bar to the icons and also reducing the rows to just two images rather than 3, allowing for easier and better viewing.




I did a similar thing with the lower half of the homepage, reducing the featured products to three rather than 4 and increasing the text size. I also reduced the clutter in the section at the bottom, leaving just the newsletter bar and social media icons.

    >    

OUGD504 - Design for Screen - Testing the App on a Phone Screen

To see how the app would function on an actual phone, I have downloaded Adobe XD for my phone to view the prototype.

 
 


After viewing the app on my phone, it totally changed my view on the layout and text etc. Whilst it looked fine on the computer, the text on the phone was just far too small and almost illegible in some areas. Viewing the app on a mobile highlighted the areas that I need to adjust.

OUGD504 - Design for Screen - Putting the App Together

I have now completed enough screens to provide a walk through example of buying a product.


    
    


I uploaded these images into Adobe XD in order to start putting the app together.



I drew squares and boxes around different elements, allowing me to link things together by clicking certain areas of the screen etc.

You are able to see the user flow of the app via this prototype flow chart from XD.



I set each transition to dissolve out and into the next screen, at a duration of 0.8s. This allowed for a gentle and smooth transition to the next screen, but not too slow for the user in terms of waiting time. The transition of each slide reflects the gentle and natural aesthetic of the app.

OUGD504 - Design for Screen - Further App Designs

Looking at Jamie Kay's photography, I have put together a small swatch palette of potential colour options for the graphics within the app. All colours are very earthy and neutral, again so as to not sway towards one particular gender etc.



I put together a few artboards in order to start designing the app pages. I used the Apple iOS UX mock ups to import an iOS status bar onto the top of each artboard. This allows for a more professional and realistic representation of the app in a proper setting.

I started arranging images onto the boards to see how they would fit/work on the screen.

Adding bits of text to the app pages helped me visualize how it would function on the actual screen. I chose to use the same typeface as the logo, Mr Eaves Mod OT. This helped tie everything in nicely together and kept things simple.

OUGD504 - Design for Screen - Initial App Designs

Now that the branding and photography are in place, I have started with a few initial designs for the app.

I chose to start with the loading screen/first screen that will be seen after the user clicking on the app.

I experimented with a few different ways of laying this out, deciding how big the image should be, how big the logo should be in comparison, where other elements  should go etc.

I had a look at having a 'log in' or 'enter' button, but I felt this over-complicated the initial loading screen, so I chose to move away from that.

I also looked at just having the logo with a loading circle on a plain white background, but I felt this was too cold and harsh - not friendly or welcoming enough for the parents.



Eventually I settled on having a large image positioned slightly off screen, leaving an area of blank space to allow for the logo and loading circle to fit comfortably on the page.

OUGD504 - Design for Screen - Jamie Kay Images

For the photography in my app, I have chosen to use the images from Jamie Kay's website alongside my own designs.

In a real world setting, I would use my own photography and style to best suit the brand and theme, but for this purpose I feel as though these particular images would work well as 'placeholders' as such within the app.

These particular pictures work well with the soft and gentle branding, and also fit alongside the 'gender neutral' clothing element too.

All credit goes to Jamie Kay 2017.

  
  

OUGD504 - Design for Screen - Branding Development

Following the experimentation with the geometric shapes, I decided to move away from this as I felt it was getting too complicated and straying too far from the actual aesthetic I was after.

I went back to the original typeface I liked, Mr Eaves Mod OT. I felt this best represented the brand would work best with the rest of the content.

I played around with some colours and ended up settling on an ochre tone. I thought this worked well with the gender neutral aspect of things and kept the design within these restraints.



I asked my peers which design they preferred - the hollow or filled accent above the a. They suggested I put it into context to see how it worked, so I borrowed an image from Jamie Kay to see how it would work.



After doing this, I could straightaway see that the filled in circle worked best and was most striking. I put together a couple of mock-ups for the actual app in the rounded square. I felt the circle was too confusing, but the logo/type worked well inside the shape.




I made a quick mock up of the app on an iPhone home screen to see how it would fit within the context. I really liked how simple and gentle it looked alongside the other apps, so have chosen to move forward with this design.

OUGD504 - Design for Screen - Geometric Shapes

Something that is prominent in Swedish design is geometric patterns. This led me to start looking into how this could be incorporated in the branding.



I came across geometric lettering and thought this could be a really interesting style to use within the website, linking in with the roots of the company.



Using the alphabets as inspiration, I looked at creating my own logotypes.

I'm not sure yet whether these are going to be approriate and flow well with the rest of the app, so I am planning on exploring some other approaches before I make a final decision.