Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Design academy lecture & workshop
Similaire à Design academy lecture & workshop (20)
Dernier
Dernier (20)
Design academy lecture & workshop
- 1. ● An introduction to graphic design ● Workshop: Let’s create an app
- 2. An introduction to graphic design
- 3. Who am I? The teamWhat I do Fruto is a UX Design studio based in Oxford. We design intuitive interfaces and meaningful experiences for the web, mobile and emerging technologies. We work with global organisations as well as startups. We work with a variety of sectors and have a strong track record working with digital healthcare and education. Mariana Morris Managing Director Carmen Martínez-Freile UX/UI Designer Paula Simmons Project Manager Gargee Thakkur UX/UI Designer
- 4. Outline ● Presentation ○ Graphic design as a discipline ■ What is graphic design? ■ What does it involve? ○ Basic design principles ○ Design as a process ○ What tools do we use? ○ Graphic design in a digital world ■ User experience design ■ User Interface design ■ How UX and UI fit within the design process ○ A day in the life of a UX/UI Designer ○ Career paths
- 5. Graphic design as a discipline What is graphic design? Graphic design is the craft of visual communication and problem solving through the use of elements such as layout, typography, colour, image and shape. Applying all these elements graphic designers communicate messages to a specific audience. “Design is a solution to a problem. Art is a question to a problem.” — John Maeda, President of Rhode Island School of Design What does graphic design involve? 1. Visual identity design 2. Marketing and advertising design 3. User experience and user interface design 4. Editorial design 5. Packaging design 6. Motion design 7. Environmental design 8. Illustration
- 6. Visual Identity Images source: https://littlewolf.coffee/
- 9. Marketing and advertising Images source: https://99designs.co.uk/blog/tips/types-of-graphic-design/
- 10. Images source: https://99designs.co.uk/blog/tips/types-of-graphic-design/ Images source: https://www.voxbone.com/
- 11. User experience & User interface Image source: https://dribbble.com/shots/6555403-Combo-clinical-trial-app-UI-map Image source: https://dribbble.com/shots/6238939-Carpooling-App-Design-Concept
- 12. Imagessource: https://dribbble.com/shots/6839200-Music-Player Image source: https://dribbble.com/shots/6665198-Deliveroo-App-Screenshots
- 16. Packaging Image source: https://lauraevans.co/journal/ Image source: https://www.behance.net/gallery/35901865/Yves-Saint-Laurent-beaut-Love-concept-2014
- 19. Environmental design Image source: http://led-light.seoveri.com/2019/06/10/une-signaletique-qui-fait-bonne-figure-cl-design-signaletique-sports/ Image source: https://www.behance.net/gallery/7871469/Central-Stadium-(Yekaterinburg)
- 22. Basic Design principles Keep in mind: 1. Alignment 2. Hierarchy 3. Contrast 4. Repetition 5. Proximity 6. Balance 7. Colour 8. Space
- 26. Repetition Image source: https://dribbble.com/shots/5311359-Diprella-Login Image source: https://medium.com/@anahatrawal/10-basic-principles-of-graphic-design-b74be0dbdb58
- 27. Proximity Image source: https://medium.com/@anahatrawal/10-basic-principles-of-graphic-design-b74be0dbdb58 Image source: https://dribbble.com/shots/6685757-Vacation-House-Cooking-Landing-Page
- 28. Balance Image source: https://medium.com/@anahatrawal/10-basic-principles-of-graphic-design-b74be0dbdb58 Image source: http://jayce-o.blogspot.com/2010/11/balance-in-graphic-design.html Image source: hhttps://www.smashingmagazine.com/2015/06/design-principles-compositional-balance-symmetry-asymmetry/
- 29. Colour Image source: https://www.fifteendesign.co.uk/blog/colour-psychology-design/ Image source: https://dribbble.com/shots/5972919-Cook
- 33. The design process Image source: https://www.discoverdesign.org/handbook
- 34. What tools do we use? Image source: https://www.dropsource.com/blog/7-keys-to-expert-app-wireframing/
- 35. Graphic design in a digital world User experience design User experience design (UX) is a human centered process of designing products. UX focuses on the process of improving customer satisfaction and loyalty by improving the ease of use in the interaction between the customer and the product. User Experience Design is responsible for the structure of a website or app. It’s the underlying skeleton on which the UI will later expand. User Experience Design is in theory a non-digital (cognitive science) practice, but it’s used and defined predominantly by digital design. User interface design User interface design (UI) comes in after the UX, supporting and enriching it. The UI is the look and feel of the website or app. The UI visually guides the user through a product’s interface via interactive elements and across all possible devices. Unlike UX, UI is a digital field, and it involves cooperation between designers and developers (who will implement the design). “Something that looks great but is difficult to use is exemplary of great UI and poor UX. While Something very usable that looks terrible is exemplary of great UX and poor UI.” — Helga Moreno, on “The gap between UX and UI”
- 36. How UX and UI fit within the design process User interface involves: 1. Design research: Looking for inspiration 2. Identify and design components 3. Identify and design templates and specific pages 4. Handoff for development User experience involves: 1. User research: User interviews and user testing 2. Research analysis: User personas and recommendations (on report) 3. User journeys and page flows 4. Information architecture 5. Wireframing 6. Prototyping
- 37. In the office A day in the life of a UX/UI Designer
- 38. At events
- 39. In workshops
- 41. Career paths Level Study Entry level Mid level Senior level Salary 20K – 80K+ ● BA in Graphic design ● Self taught through courses ● MA Postgraduate ● Graduate designer ● Junior designer Early senior designer ● Late senior designer ● Design director ● Head of Design Title Salary will vary depending on: ● The size of the company ● Seniority ● The field you choose within graphic design ● Location
- 42. Workshop Let’s create an app!
- 43. Outline Workshop facilitation: Let’s create an app (groups of 3) Introduction ○ Warm up exercise (20) ○ Inspiration (individual) (30 min) 10 min break Brief ○ Personas (individual): (45 min) ○ User journeys (group): (45 min) Lunch break (45 min) ○ Wireframing (group): (1h and 20 min) 10 min break ○ UI Design: (30 min)
- 44. Warm up (20 min) Introduce yourself Introduce yourselves to your group and when is your turn, say something you like and dislike. Once you are done, write your name on a piece of paper and place it in front of you so we can all remember your name.
- 45. Inspiration (30 min) Individual exercise Think of apps you use on a daily basis and on post it notes and with a few words write down what you think these apps do well (from a usability point of view or from a look and feel one). We’ll then stick them on the board and I will pick some of them to discuss together. This exercise will serve as a foundation for the exercises that follow.
- 46. Project brief You are creating an app from scratch and the concept of this app is that it will allow users to find a buddy or a group with whom they can practice their favourite hobby (i.e a sport, music, etc). The app requires sign up and therefore you have a network of people that are registered and ready to practice your hobby with you! You will be designing the app for new users and not returning ones. This means that when thinking about
- 47. Personas (45 min) Individual exercise What are personas? Personas are fictional characters that we create to get an idea of what the majority of the potential users of a website or app might be. With personas we can define (potential) conventional user needs, goals, frustrations etc. Persona answers the question "Who are we designing for?". How do they help us design? They help us put our focus on our users during the design process and as a result they help us design products that conform to the user’s requirements. Exercise you will create one persona each. The persona will be who you are designing for and it will help you define the behaviours, aptitudes and the goal of your users.
- 48. The template
- 49. User journeys (1h) Group exercise What are user journeys? A user journey is a series of steps that break down how users get to their goal within an app or website. The represent a specific scenario which is mainly defined by the goal They can be used in 2 in two ways: ● Showing the way users currently interact with the website or app. ● Showing the way users could interact with the website or app. How do they help us design? ● Demonstrating the vision for the project ● They help us understand user behavior ● They help identify possible functionality at a high level ● They help you define the structure of the website
- 50. Exercise You will create one user journey per group with one common goal: Arranging a specific time and date to practice your hobby with an individual or a group. You will write each step of the journey on post it notes (one post it per step). You will be designing the app for new users and not returning ones (users that have account already). This means that when creating the steps you might want to think about what information you might need from the user beforehand. First define what triggers the user to go on this journey (that will be your first step). When you are writing the steps think about the pages you’d need within the app to achieve your goal. Once each group is done you will put your journey up on the board and we will discuss them. Example of user journey Trigger: I need new trainers for the gym Goal: Buy a pair of trainers Open Homepage and select my gender Select the pair of trainers I want Select my size and add them to my basket View my basket and click check out Fill in check out details Fill in payment details and pay
- 51. Wireframes (1h 20min) Group exercise What are wireframes? Wireframes are simplified, low fidelity sketches of your website or app. Wireframes are easily recognised by the use of lines to represent text, their block layouts and their “✕” boxes that are placeholders for future images. Wireframes work as a visual guide that shows us the skeleton on the app or website. How do they help us design? The skeleton we build during wireframing can be a useful tool early in the design process. It allows us to stop focusing on details and look at the structure of the app or website at a very high level. Their simplicity allows us to make mistakes and experiment. Wireframes will be a starting point for the UI stage after them.
- 52. Warm up exercise To start grab a blank piece of paper and draw the two things that you like and you dislike (mentioned at the start) and this time you will share it with the rest of us. This will help us get into the sketching mindset. Don’t be precious about your sketches it’s only to get us sketching! Exercise Pick up some sheets of the provided template and start sketching the different pages of your journey within the phone shape. It might be that there is one wireframe screen per step or that one screen covers more than one step on your journey. Be flexible and use the journey as a guide Don’t be too precious about your wireframes as the whole point of this exercise is not to judge your drawing skills but to explore ideas quickly and efficiently. Only design the most important pages in your user journey
- 53. Examples of wireframes Images source: https://1stwebdesigner.com/mobile-app-wireframe-sketching/
- 54. Examples of wireframes Images source: https://1stwebdesigner.com/mobile-app-wireframe-sketching/
- 55. UI Design (30 min) All together
- 56. Thank you for listening!