'The 2-minute Foundation'
https://beachclean.net/
2-minute beach clean is a group of environmental activists who throughout the country aim to keep our beaches and seas free from litter. Whether you have access to a beach or simply just in your local high street, the aim of the foundation is to simply put 2 minutes of litter cleaning in each day. This simple act can significantly reduce the risk to local wildlife and obviously makes the surrounding area nicer to be in.
The aim of this project would be to create an app that would enable the user to keep on top of their daily 2 minutes of cleaning. There would be a 'checklist' element to the app, but the app would serve as a platform to other relevant foundations, links to relevant podcasts, new's stories, and other ways to support 2-minute beach clean.
OLD
NEW
Edited the intro of the description of the brief by adding a fact about the impact of coastal littering, as to add context to the motivation behind the brief.
Time Management
Links to other environmental/conservation activism
links to social media
Page could fill with litter when you don't keep up with checklist
Contextual Research
From '2 minute Beach Clean' website:
This block colour illustrative style is ubiquitous to the 2-minute beach clean website and advertising/branding in physical forms (posters, banners etc.) To keep a sense of continuity/fluidity through to the app, it would make sense to keep this style of illustration; also it would be more effective to animating this block colour on the app as you can present a number of moving parts/forms at one time without the composition feeling cluttered or clashing.
International Magic presentation app, Dekks.
Lots of moving parts within this runthrough of the app, but the refined simple design and use of block colours make it easy to follow and stops from the app feeling cluttered.
(I understand this is a wireframe for the app, but the use of shapes/forms here are similar to the ones I'm aiming to use in the 2 Minute Beach Clean app.)
https://dekks.app/
The point in Passing's new website with a focus on their ethos "living system"
The use of animation here that covers parts of the text here on screen could be used within the 2 Minute Beach Clean in the form of litter that fills parts of the page if you don't keep up with your checklist of cleaning for 2 minutes each day, a visual reminder for users.
Inkee Wang Illustrations
Studio Moross Illustrative Type for Parklife and Lovebox festivals respectively
Playful hand-drawn types that are quite conducive to the illustrative style of 2 Minute Beach Cleans branding.
https://www.studiomoross.com/project_category/design/
Nike event to Inspire innovation to young people
Good app UX Design
Marline
Highlights: Clear typography
Bullet Journal
Highlights: Micro interactions
QiangChang Music App
Highlights: Minimalist Paper Design
Monthly Data Reports
Highlights: Flat design and interactive animations
Mi Smart Home
Highlights: high-contrast UI colours
Real Scroll Animations in Adobe Xd
https://www.youtube.com/watch?v=IDL3lo_CaFw&ab_channel=PunitChawla
Colour palette
https://coolors.co/
Use UX google program to find typefaces
Typefaces in use:
- Unbuntu
- Roboto
Wireframes // Still Mockups
Home Page
The aim of the home page here is to show how the app will remind the user to do their 2 minutes of cleaning each day (litter picking etc.). The page slowly fills with a block color here as the days go on without cleaning and checking off that you have cleaned. This design will need to be developed, creating a more convincing and engaging home screen.
Developments:
- implement motion into the filling of the page as the user doesn't tick off their daily clean. (wobbling water)
About Page
Reminder//Calendar Page
The reminder/calendar page will be a place for the user to check up on upcoming environmentally based events/workshops/and news articles they are tracking on the news page.
News Page
News page to catch up on all the latest environmental news stories
Mock Up
Mockup on Adobe XD presenting simple animations used to make the transitions between different slides on the app look smooth. The composition is the same as wireframes, this will be developed to look more engaging.
Notes from crit with Simon & Tom Wilson:
- What is the main purpose of the app? - One of the first fundamental points I need to consider for this app, is whether it is going to be used for functional or fun purposes - yes the UI design can look playful and fun but the underlying purpose of the app needs to be defined. The point of the app is to be a hub for people to get involved in the 2-minute beach foundation, so the app has a clear functional purpose -which will need to be emulated in the UI design of the app and. through how the micro-interactions and layout create an easily navigatable UX interface. Furthermore to this last point, the target market is a large range, but I was mostly inspired to make this app through talking to my mum and people of a similar age which gives me the impression that the majority of the users may be of an older demographic - either way will need to make an app that is appealing to all so that a larger audience uses it, but will need to consider that older (potentially less tech savvy) will be using the app.
- Don't be afraid of white space. - My initial designs aren't particularly sleek and feel like they would be more fitting to an app for kids - the buttons are too big and the layouts are cluttered with not enough space to give the user a 'break' from the content. Will need to research good app designs that incorporate these elements.
- material.io.com - website/blog that documents apple app design considerations.
Further Research
Neumorphism
- Flat icons and buttons and gives them a 3D makeover.
- Rounded vertices
- Engaging swiping experiences
(App design by ideasinthings)
(App design by Cal Notman via dribble)
- Depth through shadows and layering
- layer elements, with parts overlapping each other to create an internal hierarchy.
(App design by Nino Lekveishvili via dribble)
(App design by Piotr Swierkowski via dribble)
- Both these apps incorporate design elements reminiscent of the analogue world: paper and cardboard textures, collage inspired layouts, slightly yellowed backgrounds instead of pristine whites, retro typography and button designs.
Presenting data creatively - (App design by Arman Rokni via dribble)
- Using unique types of graphs, animations and colours in correlation to data will make it more stimulating and provide users with information in a more engaging way.
Material.io
Tips for designing apps etc:
https://material.io/design
Typefaces
Developed
Design orientated towards flat illustrations, using more negative space and so that the slides aren't too busy, also have a clearer visual link to the original illustrated branding of the 2 minute beach clean foundation.
Playing around with layout and colour palette. for developments, i will create the rest of the app pages in the same style then try implementing 3D elements to the design.
FURTHER DEVELOPMENTS - Landing & Navigation Page
With these developments, I've tried to emulate the flat colours and illustrative aesthetic of 2 Minute Beach Cleans branding. The typeface is a manipulated Futura typeface, I chose Futura for its legibility but also for is slightly rounded serifs which align with the 'soft/calming' aesthetic of 2-minute beach clean's previous promotional works/branding.
I then manipulated it to look as if it were a piece of debris or seaweed floating int the ocean, the same design principles were applied to the objects/shapes used to break up the composition and present information and links to other sections of the app. The brushstrokes further communicate the mess that we need to clean up (litter in the ocean)
Adding a different colourway to the background as I felt the type didn't 'pop' enough - establishing a clearer visual hierarchy.
Notes for development
The navigation as seen above could start out very busy (brush strokes/litter) - then as the user completes their daily task of cleaning up or whatever else it may be; it becomes less noisy and clearer - a visual representation of the seas becoming clearer through the use of the #2 Minute Beach Clean foundation.
Development - About Page
Here, a screenshot of the 'about' page on the app, experimenting with different forms, and type - wasn't sure whether to keep the same busy/noisy background as seen on the landing & navigation pages above, so experimented with a more legible composition here. with the noisy brush stroke element, being used as a 'footer' on the page to break up the page, while referencing the background (litter in the ocean) on the navigation page - creating a sense of continuity in the app.
FINAL STILLS OF APP
Applied a new colour palette to the background for the stills here as I felt they better presented the sea (dark blue - deep sea, pink - coral, turquoise - ocean surface).
The user would scroll horizontally & vertically to see new the news headlines (continuous scroll)
Final Mockup - (App-iPhone 7/8 format)
The original designs revolved around the 'reminder' page which presented a table/graph which would fill up as the user didn't clean up and meet their quota for the day, in this final mockup, the user instead has the option to 'check it' which then removes the noisy design elements on the pages - further referencing the cleaning up of our coastline.
Link to 1080p quality - https://youtu.be/FiPG5iH_gek
Blackline
No comments:
Post a Comment