Monday 23 April 2018
505 - Module Evaluation
I struggled with this brief from the start as I couldn't get into it and think of any ideas I wanted to go forward with, in the end I feel as though I settled with both briefs and could have produced better work but with the time frame being so close to the last submission and the next one it was difficult to really focus and put my all into it. I think one of the reasons I didn't enjoy this module as much as the previous is the areas of graphic design I ended up working in, I did enjoy the ux design involved in app making however since I have not long ago designed an app I should have explored another area such as illustration or advertising. This module has taught me that I need to explore more options before settling on idea, for both I didn't have many initial ideas including sketches and experimentation/exploration, the result of this is two briefs that could be a lot better. I also need to work on my time management and push through with work that I am not enjoying the most, just in comparison to 503. I have however learnt that research is a very essential part of the design process that must not be overlooked, becoming an expert in the area you are producing for makes design decisions a lot easier I have also learnt to keep my blog up to date when I produce work or do any research as this makes the design boards a lot easier - I know what I was thinking and why I made decisions at the time rather than having to try and think back. I didn't engage with many critiques during this module and feel as though this has damaged my work and ability to take a step back from the screen.
505 - SB2 - Evaluation
This brief from start to finish was very research based, in order to come up with an idea I had to carry out a lot of research into the topic of endangered species as well as into the branding and organisation values of the forefronts in the area such as WWF. It took me a while to get started with this brief as I had a creative block, which is a real set back, if given more time I would produce some collateral for the promotion of the app such as billboard designs or newspaper adverts. Basing the app design from a brand guidelines document online allowed me to create an app that suits WWF and basically gives you an optimised version of the website, it is not supposed to replace the existing WWF app as this is more of an interactive journey experience, with my version being to educate, giving the facts plain and simple with the added feature of being able to adopt/join/donate right on the app. Creating initial wireframes before designing the style of the app is essential in order to create a hierarchy for the information, what is most important and what needs to stand out on the page. Using Adobe XD was straight forward and the live preview feature is extremely helpful when experimenting with layout and type size because on computer screen the design could work well however on mobile dimensions not so well. The app features examples of all the sections as it would have taken a lot more time to include all of the information that is available on the website. The menu bar features a home option as well as submenu which is useful for navigation as this was one of the key issues I found with the original app and set out to make mine easy to navigate. Overall this brief has been successful as I have created something that will educate people on the issue and prompts them to get involved.
505 - SB1 - Evaulation
Overall i am pleased with the outcome for this project, disco is a genre that is very much back in style with a lot of djs playing the old school anthems and young people enjoying it, this said a lot of people don't know its origins and what the era itself involved, this is why the instruction manual is an ideal piece to create for exhibition. The design of the booklet is 70s inspired using colour palettes popular in the time as well as typefaces that were used a lot in artwork and other graphic design around the time. The information included is all relevant and the manual is a quick read which will give the viewer a lot of insight into the trends of the times, the popular artists and the facts about the demise. There were a few things that didn't go to plan with this project such as production, the stock could have been a smaller gsm if i were to reproduce, and i would look into coloured stock options however the fact it is just white is relevant to the instruction manual aesthetic, these are usually cheap and mass produced. This brief has further allowed me to experiment with layout design, which I am interested in. The final product is suitable for public viewing and catches the eye with a bright cover design.
Sunday 22 April 2018
505 - SB2 - Final Designs
The menu bar contains a home button and a menu, the home takes you to the main page and the menu back to whatever sub menu you're under.
505 - SB2 - Development
Initial wireframes for the app, including all of the menu pages needed to represent the website.
From here I developed the design and layout further to include some colour, illustration and information. Adobe XD software is simple but you can do a lot with it, one of the best features is being able to live preview the artboards on your phone, therefore seeing if font sizes look good etc.
These initial designs looked okay on screen however when on mobile the font was too big, the photographs and example lion page also don't work as well as I'd like so decided to go down a different design route.
505 - SB1 - Final Design and Production
I initially wanted the background to be yellow like in the below design, however in terms of printing it wouldn't come out as bright and full as I would like, the other option would be to print onto yellow stock however this could effect the shades and intensity of the colours used, as well as change the photographs and leave no white space.
The final design idea was to have the steps and information on one side of the a2 sheet that folds into a booklet, and have a full poster on the other side. This however wasn't achievable when it came to the production, I encountered issues and wasn't able to print double sided, I therefore printed them separately to still show how they look a2 and a5.
I went for a matt finish as this is most relevant to an instruction manual, they are usually on dull cheap stock. The stock I ended up using didn't work as well as I had hoped as you can see below the card was thicker that I expected and therefore folding wasn't as neat and precise as I would have liked.
Besides those issues it was successful, the colours are vibrant, text is very readable and photographs are high quality. I would print onto a3 if I were to do it again as I believe a5 for the booklet is too large.
505 - SB1 - Development and Mockup
I decided to go ahead and design an instruction manual for disco, I had to consider the spacing of the different pages to ensure when it is printed and folded all the content is legible. It was also important to source high quality photographs to use so they come out well when printed.
I created a few different colour gradients based on the colours previously mentioned in the initial ideas. I then chose the typeface Harry to create the front cover visuals, as well as to be used for the body text. Helvetica is used for the headings as it compliments the stylistic Harry and is also the kind of simple and readable font that would be used for an instruction manual.
Thinking about the layout is essential in order to make sure that the pages would fold into the right order, also after designing the whole page the bottom half had to be turned upside down in order for the fold to work correctly.
Below is a small mockup I printed to make sure the layout and spacing was okay, as well as seeing the colours printed and checking for spelling errors etc before printing it full size a2.
Wednesday 18 April 2018
505 - SB2 - App UX Research
I decided to research into what makes an app successful in terms of user experience because if it fundamentally doesn't work then it won't matter pretty it looks it doesn't do the job. The Apple website has a lot of useful guidelines and suggestions to take on board when designing for the App Store on IOS.
'Delay sign-in as long as possible. People often abandon apps when they're forced to sign in before doing anything useful. Give them a chance to fall in love with your app before making a commitment to it. In a shopping app, let people browse your merchandise immediately upon launch, and require sign-in only when they're ready to make a purchase. In a media-streaming app, let people explore your content and see what you have to offer before signing in to play something.'
This has made me reconsider my initial wireframe design with the app loading straight away onto the log in page so I am going to explore other options in order to keep users interested as I myself have been put off from using apps when they make me log in immediately. With saying this I need to consider if the main purpose of the app is identify plants, or to keep a track of the ones you have and connect with others because in this case the social would be more prominent and therefore a login straight away make sense.
'Unlike my granddad, most users tend to use their phone with their thumbs. This is an important consideration when laying out an application flow. For example, if a user is a filling out a form, they should be able to navigate through fields in the lower part of the screen.'
This is another important thing to consider especially for those who have larger phones, they wouldn't be able to reach the top of the screen to first login and although it's a small thing subconsciously it would annoy someone.
'We often take if for granted that App users learn from their experience and are familiar with how how Apps behave. So take advantage of that familiarity and use it within your App. Everything in the right place - Make sure your buttons are clearly labeled and that they behave as they should. So in our example, we have back button in the top left corner, action button in the top right (this can also be a menu or home button) with navigation along the bottom.'
I need to consider how the app will be navigated around and the easiest way to start designing this is thinking about the most popular pre existing apps and the gestures used on IOS itself as that is what people are used to. If the controls and back/home etc are in familiar places the user will feel comfortable with the app straight away.
'Delay sign-in as long as possible. People often abandon apps when they're forced to sign in before doing anything useful. Give them a chance to fall in love with your app before making a commitment to it. In a shopping app, let people browse your merchandise immediately upon launch, and require sign-in only when they're ready to make a purchase. In a media-streaming app, let people explore your content and see what you have to offer before signing in to play something.'
This has made me reconsider my initial wireframe design with the app loading straight away onto the log in page so I am going to explore other options in order to keep users interested as I myself have been put off from using apps when they make me log in immediately. With saying this I need to consider if the main purpose of the app is identify plants, or to keep a track of the ones you have and connect with others because in this case the social would be more prominent and therefore a login straight away make sense.
'Unlike my granddad, most users tend to use their phone with their thumbs. This is an important consideration when laying out an application flow. For example, if a user is a filling out a form, they should be able to navigate through fields in the lower part of the screen.'
This is another important thing to consider especially for those who have larger phones, they wouldn't be able to reach the top of the screen to first login and although it's a small thing subconsciously it would annoy someone.
'We often take if for granted that App users learn from their experience and are familiar with how how Apps behave. So take advantage of that familiarity and use it within your App. Everything in the right place - Make sure your buttons are clearly labeled and that they behave as they should. So in our example, we have back button in the top left corner, action button in the top right (this can also be a menu or home button) with navigation along the bottom.'
I need to consider how the app will be navigated around and the easiest way to start designing this is thinking about the most popular pre existing apps and the gestures used on IOS itself as that is what people are used to. If the controls and back/home etc are in familiar places the user will feel comfortable with the app straight away.
505 - SB2 - Initial Ideas
After looking at several websites and apps that organisations associated with animal rights and conservation I have a few ideas on how to devise and develop a body of practical work that both distils your knowledge of an identified issue and demonstrates my ability to tap into the market potential for socially, politically and ethically-driven design.
- redesign the WWF app
- create a new app with sections including conservation, animal cruelty, animal testing and vegetarian/vegan
Issues with the current WWF app:
- not very straight forward
- no obvious home/menu/back buttons
- no option to donate
- app goes from portrait to landscape
The WWF app I design will not be to replace this interactive story telling experience but to be more of an app for the website, including some of the sections and options to donate etc. Pages needed:
- wildlife - a selection
- where we work - selection of places
- what we do - selection of areas
- who we are - about us - our six big wins
- earth hour
- get involved - adopt/donate/join - option for each
- home
Design -
The main aim of this app is to work as an app version of the website, providing all essential information whilst being easy to navigate and read for anyone who has access to a phone. With this in mind the design does not have to that stylish and is more function over form, as well as keeping with the brand guidelines.
Subscribe to:
Posts (Atom)