PROTOTYPE

what is WIREFRAM

-Black and White version of design the work as a

bridge for communicate in team

- Ensure everyone is on the same

page istructure, functionality, future product
-proprior
การ ตกแ
to decorative clogo, colours
any

WEREFRAME tell a
story
-Help team to figure website or
app will tell user
through draft and sketches

BENEFIT Of WIREFRAM

·Explore concept =>

explore competitors, evaluates busines

-Allow for rapid testing =>

verify Ideas will satisfy your user's need and help them task efficiently
-Help Save time => easier to fix the issues at earlier stages

-keep the concept user focused

-easy
to updates
ITERATIVE design proces

-The continually improve a

product's design
ความ มระเ ย

WIREFRAME FIDELITY

-Low- fidelity wireframe =>

paper mock

. focus on the basic UI structure without diving into details

- Usually design black and white, show UI element like box and line

Explains the basic functionality and simple explanations of requirement, layout

-Medium- fidelity wire frame

-More detailed low- fidelity wireframe

ทจ

-Communicate to team for essential functionality

-High- fidelity wireframe

·Result of validation
-When should you us

. At the end of design proces

·If have time and
you
budget
ที่
ฉี
ต่
ำ
WIREFLOWS
-Task flow
-shows liner step
sequence of
a

·Flowchart =c similar to task flow but more detailed

-interacting with system, show their decisions (frerghtgener

-Wireflow

-change content dynamically based on user interactio

-Simplified Wireframe
ภาพประกอ
-A task flow Illustrated with symbols
-Wireframe creation proces

-start with describing the need and in story

problem user

-key screen in interface

-order user would more forward

creating WIREFRAME For MOBILE

Step 1 = Identify the target audience and the problem

step 2 = creat a user flow

-Step 3 => Sketch out core screens

Step 4 => Set mobile frame

up
a

Step 5 - Determine layout using boxes (Focus layout and structures

Step Use design patterns ( Android and iOSC

6 =>

-stepe. Bring actual copy creplacing text, image with

in real contents

-Step 8 => Ensure you content scales well

-Step 9 - Connect the screen to create a flow stools Figmar

Step 10 => Test

your design decisions

RESPONSIVE design wireframing

·what is
responsive design
-how to make look different device
a
design good or
types and size

- identify your
content

-content analys

-define user flow

-choose the grid

- decide on
your target screen a layout
 USE CASE
อ งหา มทร

BEST PRACTICES

·set goals -use real content -select the right tools

ค อ บายประก
-Minimize the use of color -use annotations - Iterate

-use basic components -select the

right level

- maintain consistency ( ใช้ใ ใ เหมือน น template - Ext end wirefram e to proto

UI DESIG

การ ม

TYPROGRAPHY

-
can be view in two form

-style and of tex

appearance

-art and
process
of arranging tex
การป บต

-Typography generousis selecting and adjusting

·Typeface
- Point size

-Line Lengths
-Line
spacin
-Letter
spacin

:Paragraph
spacin

ดต แห
-Text alignment
กั
จั
ห้
ำ
สั
ำ
ธิ
พิ
รั
ริ
 Roboto,
-Typeface =sName
of font c A saranews

&
-include slight decorative strokes at the end of letters

sourcerwwwTowners
่

-feel is class, romance, เ

เหมาะท ออหา

sans- serif typeface

- do not include decorative strokes at the end of letters

-script typeface

&
-usually design logo chandwriting:
·slab serif typeface วข อ
-They are bold, thick and serif

-Best suited to shorter

pieces of text cheadline, titles

·display typeface
monospaced typeface
-default text code, cmL

- Font => weight and width within a

typeface
-system or
desktop
·fonts are
design to be installed on
your computer ( Usually =s -off,lft, ·psel

- web font

-used in web pages with the CSS ( Formats Like Truetype == WOFF, EOT, SVEL

-color = Use communicate, stimulate action, in poncreatethe

กระ

mood

-Happy colors
โด 1 แล
่

มอบ

-happies and stand for joy, warmth,

optimism
-Avoid
using yellow for background
-Energizing colors
. associated with lists ofราม วนCent and Quinoรอร
- sad colors

·feel
-

=>
distance, coldness, Contact- thes
-Avoid
using
buttons for Call to Action

-calming Posted only, powerful, energetic, medcitation, yoga

ข้
หั
ส่
นื้
ตุ
ต่
ที
 -Trustworthy colors and Brown

Lassociated with positive and non- threthaitening things

- stimulating colors

-color of winner

food
- promoting delivery
- Peaceful colors

-health instant to
-Creative colors
Lassociate mysterious, spontanecall
- Restful color
feel => love, romance

-Angry colors

-fire, anger, even rage

-Grounded colors

-support, trust
UI ELEMENTS

-Microcontent
นส
type copywrite the form of short text
-is a of ux in
fragment
-Microcopy
-Notification, Error message

-Imagery
refers to the use of photo, Illustration, animation, vide
- Icons

ทาญาเ า 1 represen

Help users understand

-Components
Buttons, inputs, Cards, Navigation bars, Tabs and others

- layout
Layout spacing => make a
page
look visually balanced eodp

Component spacing > distance between icon and label

cadpogrid
Fixed layout suitable for game
=>

Fluid layout => ป บเป ่ย นตามการใช ้

ข้
ชิ่
รั
ลี
 -Type of Button = There are 3 main ·Radio button
I
ser ใ งาน
·Primary button => ุ่มห ก
้า อย าก ใ u
Only allow one

-Secondary button => มหายเ อกในการยก Toggle switch

-Terriary button => มทางเ อก วย I select on - off

TextInputright
·Other type of Button
. Icon button use feet Input for name, email, phone numbers

-Text button

-Spilt button Limit is 10- 12

Options
Menu
-Toggle button = >select lift or
Right
-Menu button = Limit 4 -5
options ·Form
Best practices of Button Labels Linclude multiple Input controls

↓ use

use
leading icon
meaningful button command
- Modal
I
pop- ups => notificatio
-check box -Card
1 to be selected
1A
Allow multiple options card have image, title, content

- Best practices for table

designing - Table
1
-style the table header differently Organizing data

numbers
-Alige
·Allow
sorting
-Use zebra stripping for long tables
- header

- Footer
ที
ห้
ช้
ปุ่
ปุ่
กื
ลื
ช่
ปุ
 MOBILE

Design Mobile Login, Signup & other forms

interinary your forms top- align labels keep labels visible Provide multiple signup and login

show stay logged

Provide option to password Let users in Allow username or email remembered

Option for emails instead of usenames Make it to reset password

easy

MOBLIE ONBOARDIN G
Instructional onboardin use
permission priming Allow users to
preview app content

before
signing Up
 NAVIGATION DESIGN

Top navigation bars Bottom navigation bar Tab

( 4 รรเ ไ อ น

Hamburger menu Circle e menus

ไม ิกต
่ฟ
แ

SETTINGS DESIGN
ศ า ก ค
include important setting Group setting Establish visual hierarchy Describe settings clearly
Profile
-ให ้ า

อ ่ User ไ

use toggle switches split setting in to include search Put destructive Items last

·nonner date chang basic and advance

Put essential item

at the top
รู
่ำ
ม่
จ่
ยู่
ร้
ค่
กิ
ำ