SMARTSistas Web Design Presentation
2 likes•369 views
The document outlines the principles and practices of web design, emphasizing its importance in user experience (UX) and user interface (UI) design. It explains steps like card sorting, site mapping, and wireframing, which are essential in understanding user needs and developing effective websites. Additionally, the document discusses interaction design, highlighting the significance of visual and motion design to enhance communication between users and technology.
SMARTSistas Web Design Presentation
- 1. SMART Sistas ICT Camp
- 2. Web Design Web design isn’t something that just designers do. Web design is marketing. Web design is how your product works, acts and responds to the user. Web design is the process of creating a website.
- 3. Web Design Principles User Experience (UX) User Interface (UI) Interaction Design Front End Development Back End Development Graphic Design Content Strategy Branding
- 4. Tedei bae yumi tok aboat tri web design principles User Experience (UX) User Interface (UI) Interaction Design
- 6. UXUser Experience User Experience (UX) refers to a person’s total experience using a product or website. Great UX is to meet the exact needs for the usage of a product or service. --- User Experience (UX) hemi wan total experience taem wan man usem wan product o wan website. Gudfala UX hemi wan i metem stret nid blo use blo product o service ia.
- 7. UXUser Experience If you want to make something, anything, first you must know about who will be using what you’re making. --- Sapos yu wantem mekem wan samting, yu mast save abaot hu blo i usem wanem wea yu makem. Examples: ● Taem wea yu kukum steak blo dina be gest blo yu i no stap kakae mit. ● Taem wea yu pem present blo wan man wea yu no save hem.
- 8. UXUser Experience UX Strategy First taem yu must faenem aot wanem usa hemi wantem o hemi nidem. No makem oli tingting tumas. Examples: Supos yu wantem mekem wan haus. Yu ting se bae yu mekem wan haus wea nine man i stap lo hem o tri man i stap lo hem?
- 9. UXUser Experience Step 1: Card Sorting Card sorting helps everyone brainstorm every and all ideas about the website or product being made. Once you have put all ideas out there you can begin to categorize them, get rid of ones that are the same and begin to organize the information. It helps lead to the next step of UX, which is the site map.
- 10. UXUser Experience Step 2: Site Map Brenna Mickey, Peace Corps Response
- 11. UXUser Experience Step 3: Wireframing Brenna Mickey, Master’s work
- 12. UXUser Experience Bea yumi practis. Supos yumi mekem wan website abaot __________.
- 13. UXUser Experience Bea yumi practis. Wanem kind information nao yu wantem blo ko insaed lo website __________. What kind of information do you think should go inside of the website? What categories of information are important? What do you think the user will want to know when they come to your website?
- 14. UXUser Experience Bea yumi practis. Wanem information nao i more important? Wanem information nao bae yumi save putim insaed lo wan category? Now, what information is the most important? What should have it’s own page? What should go into categories?
- 15. UXUser Experience Bea yumi practis. Bea yumi wireframe! What do you think the homepage should look like? What information should be on the first page you see when you come to the website? What is the main goal of the website? These questions will help you start to develop the infrastructure of your webpages.
- 16. UIUser Interface
- 17. UIUser Interface User Interface Design (UI) refers to the design that aims to predict what the user needs or wants while using the website. It makes sure that the elements on the website are easy to access and understand. --- User Interface Design (UI) hemi wan design wea hemi predict wanem ol usa oli nidem blo makem team wea oli stap usem website. Blo make sure se i kat ol elements wea i easy blo accessem mo understandem.
- 18. UIUser Interface No makem oli tingting tumas. Examples: ● Wanem kind photo bae yu putim lo front blo wan buk abaot fis? ● Supos hemi wan buk blo fis blo ol pikikini nomo? ● Supos hemi wan buk blo al teacha nomo how blo hukum fis? Yu ting se bae photo i change? O nokat?
- 19. UIUser Interface Buttons and forms Brenna Mickey, Centerline Digital
- 20. UIUser Interface Icons and graphic design Icon set #1 Icon set #2 Jen Hubbard, Centerline Digital
- 21. Colors, patterns, visual hierarchy Jen Hubbard, Centerline Digital
- 22. Colors, patterns, visual hierarchy Jen Hubbard, Centerline Digital
- 23. Photography Human focused, parent and child interactions, fun, communication. Jen Hubbard, Centerline Digital
- 24. Photography Abstract, pattern Business focused Brenna Mickey, Centerline Digital
- 25. UIUser Interface Bea yumi practis: ● Wanem colors nao yumi shud kat insead lo website blo yumi? ● Wanem style buttons yumi shud kat? ● Wanem style photography yumi shud kat? ● How noa bae yu sa i save how blo klikim wan samting?
- 27. Interaction Design Interaction design creates thought out interactions inside of your device, helping the user understand the website or app better. It focuses on creating good communication through visual and motion design between the user and technology. --- Interaction Design hemi ol grafiks display insead lo wan device wea i supos blo mekem yumi understandem ol websites wetem visual design lo wan easy wai.
- 28. NO mekem oli usa tingting tumas. Interaction Design
- 30. Interaction Design Interactive Tools Brenna Mickey, Centerline Digital
- 31. Interaction Design Game Design Brenna Mickey, Centerline Digital
- 32. Interaction Design Game Design Brenna Mickey, Centerline Digital
- 33. Popular interactions Interaction Design Smart phone dial https://dribbble.com/shots/2280148- Day-003-Animated-Dial-Pad Button interaction https://dribbble.com/shots/2298320- Spin-loader-and-success-animation
- 34. Popular interactions Interaction Design Pull down (hold) - Refresh https://dribbble.com/shots/1802075- iPad-Location-Detail-Article Scroll down (hold) https://dribbble.com/shots/2590603- Liquid-Pull-Down
- 35. Popular interactions Interaction Design Swipe right/left https://dribbble.com/shots/2021508- Weather-app-concept Hold and drag https://dribbble.com/shots/2258080- Principle-Prototype-To-Do-Lists-and- Tasks
- 36. Popular interactions Interaction Design Icon interactions https://dribbble.com/shots/2428762- Cut-Copy-Share-Delete Form Interactions https://dribbble.com/shots/2197140- New-Material-Text-Fields