CARRIE WOODWARD
DESIGN PORTFOLIO STUDENT NO. 21281015 MODULE NO. AD60147E BA (HONS) GRAPHIC DESIGN, VISUAL COMMUNICATION AND ILLUSTRATION
sleep matters brief Design a product or service to improve sleep and encourage better health and well being.
THE BRIEF
♦♦ Consider the role of nutrition, exercise, mental states, physical environments and eco system.
Lack of sleep in adults within the U.K. is a concern due to the high numbers and equally a strain on the ♦♦ Designing for a target group of adults suffering with stress and N.H.S. Long term effects are a real how applying holistic therapies into concern leading to serious medical their daily routines could benefit. conditions, which effect long term mental health and physical health. ♦♦ Consider a product - service CONSIDERATIONS system with an environmental design solution to help good sleep. What could people do to achieve a better sleep? Could they change ♦♦ An activity to improve mental well their lifestyles and prioritise sleep? being or boost positive thoughts How could a holistic approach that enables better sleep. What are contribute to improving the the clinical reasons for bad sleep. sleep pattern?
♦♦ A design that improves the experience creating sleep routine as a resource to educate.
why i chose this brief
ATTRACTION The sleep matters design award attracted me, as I have found myself juggling many tasks in a weekly routine, like a lot of people, who live in a busy city. From looking after family, work, catching up with friends, house chores, study and of course, those unexpected issues that crop up out of nowhere! EXPERIENCE What experience has taught me over the years is being organised
and having a good balance between daily tasks, and all of the things enjoyable in life is essential for good mental health. Equally maintaining a healthy lifestyle, clean eating, relaxation and exercise, which also aid with better sleep. STRESS BUSTERS People often let well-being activities slip from their lifestyle due to heavy commitments in work or family and this is when things start to get difficult for people and their mental health deteriorates.
Getting into a routine and sticking to it, is really important for good mental health and well being. I find music therapeutic, and enjoy listen to most genres to relax, focus or incorporate it into my exercise or meditation practice. I was born and raised in the countryside and travelled to many countries worldwide, I have always been attracted to the natural world as a force of healing energy. I also enjoy learning about natural healing remedies and aroma therapies. Always looking for new
high quality products/gadgets with a holistic edge for improving health and well-being. Attracted to eastern art for over 20 years and healing practices for physical and mental well being. I feel I can create something for users that will be useful and enjoyable based on my life experience and research. BALANCE Having practiced yoga for 7 years, trained martial arts for 6 years, as well as committed workout training routines to a high fitness level,
which involved theories in training programmes, diet and exercise and incorporating holistic therapies into daily routines has helped the mind and body to deal with stress of busy city lifestyle. Hectic lifestyles need to have some ‘me’ time and some guidance in a designed solution to benefit sleep can help.
research and development
BOOKS AND MAGAZINES Starting research with a magazine entitled ‘balance live well’. There’s quite a few articles on eating well and how sleep matters for good life balance and some great contemporary design. Referring to several fitness books and magazines for research, including a book titled The Yoga Bible by Christina Brown. This was particularly useful for the mediation exercises. For inspiration on the design, I
referred to a book titled The Art of Mehndi by Sumita Batra, as well as inspiring illustrations this book covers history and design symbolism across India, North Africa, The Middle East, South East Asia and how Mehndi grew as a trend in the Western world.
UX/UI DESIGN APPS
HOLISTIC PRODUCT DESIGN
Having undertaken web design course up to level 3, designing websites using HTML and CSS. Understanding how to apply good navigation for good UX design. For this app I have referred to guidelines from the book Learn Design for iOS Development by Sian Morson.
For product design, typography and photography, I referred to the summer edition 2016 and winter edition 2017 brochures of the brand Rituals, as this has a ‘westernised’ eastern design.
Downloaded mediation apps, reviewed UX/UI design, noting the pros and cons in each, which has made me understand what navigation will work in my app for an engaging user experience.
sleep is the best meditation DALAI LAMA
I was keen to fully develop the app in XCode using Swift code, but due to time restraints, I have created a demo animation of the app.
Pinterest and have created my own mehndi artwork designs, so have experience work with the intricate patterns.
The apps I have downloaded and reviewed are Sleep/Relax, Calm, Rain Rain. A fitbit app for fitness exercises, which allows me to understand what exercises are suitable to raise and lower the heart rate. Motivation quote notifications as daily pop ups on my phone for inspration. I have downloaded Ritual Cosmetics app as well as refer to the brochure for design. I am also inspired by eastern designs on
SOCIAL MEDIA I follow pages on Facebook for inspiration, these have been in my feed for some years. One Green Planet Yoga.com Sun Gazing I Love Yoga Vegan.com Yoga Earth Yoga Vibes
Shiva Rea Yogi Anonymous The Travel Yogi Yoga Glo Yoga International Yoga on Gala Yoga Dork Yogasasan Yogacurious Yoga Journal Muscle & Fitness Mind Unleashed Art Conscious Awareness Consciousness Science Ritual Costemics
creating a colour palette DEVELOPMENT Applying colour theory to the design is of a high importance, to set the right tone and keep the user engaged. Applying the colours associated with senses to my design. First, I worked with similar colours in the first palette (beach scene), but later move onto a bolder colour specturm, but still adapting a colour scheme of earthy natural tones to invokes different feelings when using the app.
COLOUR PALETTE The colour palette to the right is my final scheme. I have applied a gradiant to the colours, which have a tint of the colour within design. Left to Right Blue - Main colour for the sleep app White - to use as a soft contrast to the other colours. Yellow - Rise and Shine menu Lavender - Sleep menu Teal - Meditation menu Olive green - Eat Clean menu Pink - Aroma menu Orange - Yoga menu Red - Cardio menu
word and image
OPENING SCREEN AND MENU DEVELOPMENT The above sketches are the initial developments of the app design. Taking inspiration from the Ritual brand app design. A photo alongside the menu gives a nice balance to the menu screen, like the Rituals app, so I chose a photo I took in Ubu, Bali of a buddha sculpture.
SCREENS DEVELOPMENT Sketches show development of the app, working out the layout and how navigation is going to work.
logo development
LOGO AND BRAND DEVELOPMENT OF THE APP Sketches above show the development of the the logo and brand design. Inspiration taken from the book of Menhdi for the logo design. Initially, trying different brand names for the app, as above. Before deciding on the mandala and the name inbalance.
Using a mandala from royality free stock, but simplified the design by removing elements in Illustrator to see what worked best.
FINAL LOGO DESIGN Creating two designs to test next to the typography, one with, and one without, the filled inner circle. The filled inner circle has less detail, which is ideal due to the size for an app button image on a device and it’s launch page.
COLOUR AND TYPOGRAPHY Placing the logo with the typography in different colours to see what work best for the sleep app. The initial design was a greyblue. The name inbalance created with different weights to break up the word to make it look clearer.
FINAL COLOUR DESIGN Created app buttons to see how the colour blue would work with mandala in place. Selecting a blue colour seemed appropriate for the sleep app, as it’s a calm colour and mostly associated with sleep.
inbalance
inbalance
inbalance
inbalance
inbalance
inbalance
typography LOGO DESIGN TYPOGRAPHY Selecting the appropriate typeface and font weights to work with the images. I reviewed typefaces with an Asian design to them, this would create the perfect balance for the word and image in the design.
For the logo I chose Sukhimvit Set Medium and Thin weights.
Inbalance Inbalance Inbalance Sukhimvit Set Medium
Sukhimvit Set Thin
Sukhimvit Set Medium and Thin
Inbalance
Inbalance
Inbalance
Avenir Next Condensed Medium
Avenir Next Condensed Regular
Avenir Next Condensed Ultra Light
Inbalance Inbalance Inbalance Myriad Pro Regular
Lao Sangam MN Regular
Supra Thin
PAGE DESIGN TYPOGRAPHY ♦♦ HEADING Sukhimvit Set Medium ♦♦ SUB HEADINGS Avenir Condensed Medium ♦♦ BODY Avenir Condensed Regular Avenir typeface is clearer to read than sukhimvit set at small point size within the design on the device. The initial page designs were placed in iphone 6 device mockups, but during working on this brief the iphone X was launched. So I changed this design for a fresh and up to date look.
icon design Each landing page has a selection of buttons and icons colour coded relevant to each page. Below are the buttons for the menu landing page, which is the main menu page after the launching page. To the right are examples of buttons and icons for each of the guided landing pages. Creating the icons in illustrator so they are scalable for each device.
device mock up development
The changes in the mock up show more constrast of colour blue against white in the final design for the roll over buttons.
rise ‘n’ shine
sleep retreat
clean ‘n’ green
infuse
yoga
uplift
iPhone 6 blue-grey colour menu
iPhone 6 dark blue colour menu
iPhone X dark blue colour menu
4 ILLUSTRATOR WIREFRAME UX DESIGN audio on/off button
1. iphone X menu screen Inbalance app downloaded
3. launch screen Inbalance app logo 2. app button Inbalance app logo
5. rise n shine
11. clean ‘n’ green
7. sleep retreat
13. infuse
15. yoga
4. landing page menu 6 button menu
dropdown for guided practise play button
back button
3/4 summer (uplifting) 5/6 happiness (uplifting) 7/8/9/10 acoustic breeze (relaxing/chillout) 11/12 summer (uplifting) 13/14 lounge (relaxing/chillout) 15/16 memories (relaxing) 17/18.1 moose (upbeat) 18.2 happyrock (uplifting) 18.3 dance (uplifting) 18.4 brazil samba (uplifting) 18.5 house (chillout)
dropdown for guided exercise
18. energise 20 minute workout
6. the perfect start 8. wind down sleep guide morning guidance
music tracks list by bensound
17. uplift
16. get with the flow 14. aromatise guided yoga practises 12. fresh & delicious aromatherapy guide healthy eating guide
dropdown for guided meditation practise 9. 7 day meditation select a meditation dropdown to release back to 7 day meditation menu 10. candle gazing guided meditation toggle audio on/off for audio guidance
animation demo STILL SCREENSHOTS Below are screenshots of the animation demo for the app, starting from left to right.
LINK TO ANIMATION DEMO OF INBALANCE APP https://youtu.be/RJ0o-4xA3-k
bibliography Brown, C. (2009) The Yoga Bible London: Octopus. Barta, S. (1999) The Art of Mehndi London: Carlton. Ingledew, J. (2011) The A-Z of Visual Ideas London: Laurence King. Neuburn, M. (2016) iOS 10 Programming Fundamentals with Swift: Swift, Xcode, and Cocoa basics Sebastopol: O’Reilly. Fletcher, A. (2001) The Art of Looking Sideways London: Phaidon. Morson, S. (2013) Learn Design for iOS Development New York: Apress. McCandless, D. (2010) Information is Beautiful London: HarperCollins. Rituals (2016) Good Karma Summer Edition Amstelveen: Rituals concept and realization MPG. Rituals (2017) Open Your Heart Winter Edition Amstelveen: Rituals concept and realization MPG. Balance Media (2016) The Sleep Issue: London: Balance. Balance Media (2017) The Organic Issue: London: Balance. Ultra-FIT (2010) Ultra Fit Vol.20, No.9: Wallington: Ultra-Fit. Magbook (2010) Tone Up in 10 Minutes: London: Dennis.