SMARTSistas Web Design Presentation

SMART Sistas ICT Camp

Web DesignWeb 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.

Web Design PrinciplesUser Experience (UX) User Interface (UI) Interaction Design

Front End Development Back End Development

Graphic Design Content Strategy Branding

Tedei bae yumi tok aboat tri web design principles

User Experience (UX) User Interface (UI) Interaction Design

UXUser Experience

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.

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.

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?

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.

UXUser Experience

Step 2: Site Map

Brenna Mickey, Peace Corps Response

UXUser Experience

Step 3: Wireframing

Brenna Mickey, Master’s work

UXUser Experience

Bea yumi practis.Supos yumi mekem wan website abaot __________.

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?

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?

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.

UIUser Interface

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.

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?

UIUser Interface

Buttons and forms

Brenna Mickey, Centerline Digital

UIUser Interface

Icons and graphic design

Icon set #1 Icon set #2

Jen Hubbard, Centerline Digital

Colors, patterns, visual hierarchy


Photography

Human focused, parent and child interactions, fun, communication.


PhotographyAbstract, pattern

Business focused


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?

Interaction Design

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.

https://facebook.github.io/origami/

NO mekem oli usa tingting tumas.

Interaction Design

Interaction DesignButtons

Interaction DesignInteractive Tools


Interaction DesignGame Design


Popular interactionsInteraction 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


Pull down (hold) - Refresh

https://dribbble.com/shots/1802075-iPad-Location-Detail-Article

Scroll down (hold)

https://dribbble.com/shots/2590603-Liquid-Pull-Down


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


Icon interactions

https://dribbble.com/shots/2428762-Cut-Copy-Share-Delete

Form Interactions

https://dribbble.com/shots/2197140-New-Material-Text-Fields

SMARTSistas Web Design Presentation

Design

Transcript of SMARTSistas Web Design Presentation