Web design, UX, UI and Interaction design presentation for thehe SMARTSistas ICT Camp, a collaboration between US Peace Corps Volunteers, US Peace Corps Staff, ICT Association Professionals (VIGNET) and local NGOs.

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

5. UXUser Experience

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?

26. Interaction Design

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

29. Interaction Design
Buttons

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