Socotra (Live Brief)

Some imagery for techno/house artist Socotra Spotify page. 

Research 

Jonathon Calugi - (single line illustrations)

ARCHITECTDRW

Gabriel Lam - (Graphic backgrounds)

Socotra Instagram now

TYPE EXPERIMENTS 

Rob Watson - Task 3

 

• Think about reaching out to companies through the post - do research and make it individual to them. 
• Promoting work in cd's 
• 10% of you will not make it - put in 200% effort.
• Make it personal when promoting work - do your research 
• 20 years from now you will be more disappointed by the things you didn't do then by the ones you did - mark twain
• having a clear goal and vision can help you manifest it 
• do good work for good people - know who you want to work for and what they stand for (companies that are making a difference in the world) 
• if your in the rat race, even if you win, you're still a rat. 
• Create the right space for you to be productive 

• Deep dive into research - wolves branding - fan Q&A, interview with chairman etc
• being honest to the content 
• have fun and make it up as you go

Task

personal branding - personal projects - express what you enjoy 

Task Three

Research three projects that other designers have produced which have turned out to be an impressive piece of self-promotion. Write down what it is that made these projects stand out.

Now come up with your own ideas for your own self-initiated project that will capture people's attention. It could be a topic that's close to your heart or just a fun idea that reflects something you are interested in but most importantly is true to yourself.

Present your findings and ideas in a x4 page PDF.

Page 1 — Research Project - Christoph Niemann Lego Project 

Page 2 — Research Project - b

Page 3 — Research Project - c

Page 4 — Your Idea

Group crits will take place commencing next Thursday (25th)

TASK 

Ben Freeman - Task 2

From the perspective of a simple soul who blissfully moves through each day, with just one solitary goal in mind. To find the next best pot of hummus. An outdated soul, with outdated and quite often lame perspectives on the world as a whole - he recently had his geopolitical capacity pushed to its limit when questioned with the fundamental question ‘what do think of the systemic overfarming of chickpeas?’ he simply replied ‘If they die...they die’. Saying this they do have but one redeeming quality to their character, they have very contemporary and pertinent views on the quality of a pot of hummus. Further developments will follow on this page, will a rival Instagram tag find a way to infiltrate this seemingly simple yet calculated characters page #chickpearevolution 

Instagram Page: 

@digitalhummus 

2 minute beach clean App Brief

 '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: 

1. 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