Final project
W E B A P P L I C AT I O N
User Interface Design
04.
PAT TA 1
06.
7
RW
AN
PU
MN
IKO
M
01
Problem »˜ Þ ËÒâšᵡ " ÇÑ ¹ ¹Õ ้ ¡ Ô ¹ ÍÐäà ´Õ " »˜ Þ ËÒ¹Õ ้ ໚ ¹ »˜ Þ ËÒ·Õ ่ ¾ ºÁҡ㹡ÅØ ‹ Á à¾× ่ Í ¹àÁ× ่ Í àÇÅÒ¹Ñ ´ ¡Ñ ¹ ä»à·Õ ่ Â Ç áÅŒ Ç àÁ× ่ Í ¶Ö § àÇÅÒ·Ò¹ÍÒËÒà ᵋ ¡ ÅÑ º äÁ‹ Ê ÒÃÒöàÅ× Í ¡ä´Œ Ç ‹ Ò ¨Ð·Ò¹ÃŒ Ò ¹ä˹ »˜ Þ ËÒ " ËÒÃŒ Ò ¹ÍÒËÒÃäÁ‹ ¾ º " ºŒ Ò §¤ÃÑ ้ § ä»ã¹Ê¶Ò¹·Õ ่ ·Õ ่ ä Á‹ ¤ Ø Œ ¹ à¤Â ËÃ× Í à¾Ô ่ § à¤ÂÁÒ໚ ¹ ¤ÃÑ ้ § áá ·ÓãËŒ ä Á‹ Ê ÒÁÒö·ÃҺ䴌 Ç ‹ Ò ºÃÔ à dz¹Ñ ้ ¹ ÁÕ Ã Œ Ò ¹ÍÒËÒûÃÐàÀ·ä˹ áÅÐÁÕ ¤ ÇÒÁ¹Ô  ÁËÃ× Í äÁ‹ ÍÕ ¡ »˜ Þ ËÒ¡็ ¤ × Í " ·´ÅͧàÁ¹Ù ã ËÁ‹ " ¡ÒÃ·Õ ่ µ Œ Í §¡ÒÃ·Õ ่ ¨ ÐËÒÃŒ Ò ¹ÍÒËÒÃá»Å¡ãËÁ‹ ᵋ ä Á‹ · ÃÒºáËÅ‹ § ¢Œ Í ÁÙ Å ·Õ ่ ¨ к͡¡ÒÃà´Ô ¹ ·Ò§ ÅÑ ¡ ɳÐÍÒËÒà àÁ¹Ù À ÒÂã¹ÃŒ Ò ¹
02
OBJECTIVE 1. à¾่ × Í ·ÃÒº¶Ö § ÃŒ Ò ¹ÍÒËÒÃÀÒÂ㹺ÃÔ à dz·Õ ่ Í ÂÙ ‹ 2. à¾× ่ Í à»š ¹ µÑ Ç ª‹ Ç Â㹡ÒÃµÑ ´ ÊÔ ¹ ã¨àÅ× Í ¡ÃŒ Ò ¹ÍÒËÒà 3. à¾× ่ Í ºÑ ¹ ·Ö ¡ ÃŒ Ò ¹ÍÒËÒÃ·Õ ่ ª × ่ ¹ ªÍºàÍÒäÇŒ ã ¹¤ÃÑ ้ § µ‹ Í ä»
03
FUNCTION
1. ¤Œ ¹ ËÒÃŒ Ò ¹ÍÒËÒÃÀÒÂ㹺ÃÔ à dz 2. ÊÃŒ Ò §ÃÕ Ç Ô Ç ÃŒ Ò ¹ÍÒËÒÃ·Õ ่ ä ´Œ ä »ÃÑ º »Ãзҹ 3. µÔ ´ µ‹ Í ¡Ñ º ÃŒ Ò ¹ÍÒËÒà 4. ºÑ ¹ ·Ö ¡ ÃŒ Ò ¹ÍÒËÒÃ·Õ ่ Ê ¹ã¨ 5. ´Ù ¤ ÇÒÁ¹Ô  Á¢Í§ÃŒ Ò ¹ÍÒËÒà 6. ·ÃÒº¶Ö § â»ÃâÁªÑ ่ ¹ ËÃ× Í ¢‹ Ò ÇÊÒü‹ Ò ¹¡ÒÃᨌ § àµ× Í ¹ 04
F E AT U R E S
1. ÁÕ ¡ ÒÃ㪌 à ٠» ÀÒ¾¢Í§ÍÒËÒà ·Õ ่ Á Õ ¤ ÇÒÁÊǧÒÁ´Ö § ´Ù ´ ¤ÇÒÁʹ㨠2. ÁÕ ¿ ˜ § ¡ ª Ñ ¹ ˺ҡËÅÒ 3. ÁÕ ¡ ÒÃᨌ § àµ× ่ Í ¹à¾× ่ Í ·ÃÒº¶Ö § ¢‹ Ò ÇÊÒà 4. ¡ÒÃºÑ ¹ ·Ö ¡ ÃŒ Ò ¹ÍÒËÒÃ·Õ ่ ª × ่ ¹ ªÍº
05
TA RG E T G RO U P ´Œ Ò ¹¡ÒÂÀÒ¾ (Demographic Variable) . à¾ÈËÞÔ § / à¾ÈªÒ .Ager 20-34 »‚ .ÍÒªÕ ¾ ¹Ñ ¡ ÈÖ ¡ ÉÒ ¨¹¶Ö § ÇÑ Â ·Ó§Ò¹ ´Œ Ò ¹¨Ô µ ÀÒ¾ (Psychographic Variable) .ªÍº¤ÇÒÁá»Å¡ãËÁ‹ .ÁÕ ¤ ÇÒÁª× ่ ¹ ªÍºã¹àÃ× ่ Í §ÍÒËÒà .ÁÕ ¤ ÇÒÁÁÑ ่ ¹ ã¨ã¹µ¹àͧ
06
Pesona
¹¹
ªÒ¹¹ ÊÑ ¹ µÔ ¹ ¸Ã¡Ø Å
ÍÒªÕ ¾ : ¹Ñ ¡ áÊ´§ ¾Ô ¸ Õ ¡ à ¹Ñ ¡ ÈÖ ¡ ÉÒ §Ò¹Í´Ô à á : ·‹ Í §à·Õ ่ Â Ç Ê¶Ò¹·Õ ่ µ ‹ Ò §æ ËÃ× Í ¡ÒÃËÒÃŒ Ò ¹ÍÒËÒÃãËÁ‹ æ
âÍ»ÍÅ »Ò³Ô Ê ÃÒ ÍÒÃÂÐÊ¡Ø Å ÍÒªÕ ¾
: ¹Ñ ¡ áÊ´§ ¾Ô ¸ Õ ¡ à ´Õ à ¨ ¹Ñ ¡ ÃŒ Í § ਌ Ò ¢Í§ÃŒ Ò ¹¡Òá¿ §Ò¹Í´Ô à á : ¡ÒÃËÒÃŒ Ò ¹ÍÒËÒÃÊÙ µ ÃãËÁ‹ æ
07
A P P L I O C AT I O N S T U DY ¨Ø ´ à´‹ ¹ - ÊÒÁÒöËÒÃŒ Ò ¹ÍÒËÒÃä´Œ § ‹ Ò Â - ÊÒÁÒöºÑ ¹ ·Ö ¡ ¢Œ Í ÁÙ Å ÃŒ Ò ¹ÍÒËÒÃä´Œ - ´Ù Å Ó´Ñ º ¤ÇÒÁ¹Ô  Á¢Í§ÃŒ Ò ¹ÍÒËÒÃä´Œ
¨Ø ´ ´Œ Í Â - äÁ‹ Ê ÒÁÒöà¢Õ  ¹ÃÕ Ç Ô Ç ¶Ö § ÃŒ Ò ¹ÍÒËÒÃä´Œ - ¡ÒÃ㪌 § Ò¹·Õ ่ Â Ø ‹ § ÂÒ¡
WONGNAI
ÊÔ ่ § ·Õ ่ ¨ йÓä»ãªŒ - ¡ÒÃàÃÕ Â §ÅÓ´Ñ º ¤ÇÒÁ¹Ô  Á¢Í§ÃŒ Ò ¹ÍÒËÒà - ¡ÒÃºÑ ¹ ·Ö ¡ ¢Œ Í ÁÙ Å ÃŒ Ò ¹ÍÒËÒÃ
08
¨Ø ´ ´Œ Í Â - äÁ‹ Ê ÒÁÒöà¢Õ  ¹ÃÕ Ç Ô Ç ¶Ö § ÃŒ Ò ¹ÍÒËÒÃä´Œ - ¡ÒÃ㪌 § Ò¹·Õ ่ Â Ø ‹ § ÂÒ¡ - äÁ‹ Ê ÒÁÒö´Ù Å Ó´Ñ º ¤ÇÒÁ¹Ô  Á ¢Í§ÃŒ Ò ¹ÍÒËÒÃä´Œ
FOURSQARE
ÊÔ ่ § ·Õ ่ ¨ йÓä»ãªŒ - ¡ÒÃËÒÃŒ Ò ¹ÍÒËÒÃÀÒÂ㹺ÃÔ à dzã¡ÅŒ à ¤Õ Â § - ¡ÒÃá¡ËÁÇ´ËÁÙ ‹ ã ËŒ § ‹ Ò Âµ‹ Í ¡ÒÃ㪌 § Ò¹ ¨Ø ´ à´‹ ¹ - ÊÒÁÒöËÒÃŒ Ò ¹ÍÒËÒÃä´Œ § ‹ Ò Â - ÁÕ ¡ ÒÃá¡ËÁÇ´ËÁÙ ‹ à Œ Ò ¹ÍÒËÒà - ÊÒÁÒöµÔ ´ µÒÁºÑ Þ ªÕ ¼ Ù Œ ã ªŒ · Õ ่ Ê ¹ã¨ä´Œ
A P P L I O C AT I O N S T U DY
09
WEB STUDY ¨Ø ´ à´‹ ¹ - ÊÒÁÒöËÒÃŒ Ò ¹ÍÒËÒÃä´Œ § ‹ Ò Â - ÁÕ ¡ ÒÃá¡ËÁÇ´ËÁÙ ‹ à Œ Ò ¹ÍÒËÒà - ÊÒÁÒöºÑ ¹ ·Ö ¡ ¢Œ Í ÁÙ Å ÃŒ Ò ¹ÍÒËÒÃä´Œ ¨Ø ´ ´Œ Í Â - äÁ‹ Ê ÒÁÒöà¢Õ  ¹ÃÕ Ç Ô Ç ¶Ö § ÃŒ Ò ¹ÍÒËÒÃä´Œ ÊÔ ่ § ·Õ ่ ¨ йÓä»ãªŒ - ¡ÒÃÑ º ¢‹ Ò ÇÊÒõ‹ Ò §æ - ¡ÒÃºÑ ¹ ·Ö ¡ ¢Œ Í ÁÙ Å ÃŒ Ò ¹ÍÒËÒÃ
10
DESING CONCEPT ¤Í¹à«»µ ¢ ͧ THE EAT ¤× Í ¡ÒÃ㪌 Ê Õ à »š ¹ ÊÕ · Õ ่ ª ‹ Ç Â ã¹àÃ× ่ Í §¢Í§¡ÒÃà¨ÃÔ Þ ÍÒËÒà ¡ÃÐµØ Œ ¹ ¤ÇÒÁÃÙ Œ Ê Ö ¡ ์ ¹ ¡ÒÃÍ͡Ẻ·Õ ่ à ÃÕ Â º§‹ Ò Â ÊºÒÂµÒ ÍÕ ¡ ·Ñ ้ § ÁÕ ¤ ÇÒÁ·Ñ ¹ ÊÁÑ Â áÅСÒÃ㪌 § ҹ䴌 § ‹ Ò Â
11
logo
àÍÒÁÒ੾ÒÐ䢋ᴧ à¾×่ÍÊ×่ͤÇÒÁËÁÒ¶֧ ¡ÒÃ໚¹Èٹ ÃÇÁ
µÑÇ a ÁÒ¨Ò¡ª×่ÍàÇ็ºá;ÅÔपÑ่¹ ÁÕÅѡɳФŌÒÂ䢋 µÑÇ E ÁÒ¨Ò¡ª×่Í àÇ็ºá;ÅÔपÑ่¹ ÁÕÅѡɳÐËÂÑ¡¤ÅŒÒ¼ѡ
µÑÇ T ÁÒ¨Ò¡ª×่Í àÇ็ºá;ÅÔपÑ่¹ ÁÕÅѡɳÐËÂÑ¡¤ÅŒÒÂàË็´
12
logo
à¹× ่ Í §¨Ò¡ÊäµÅ ã ¹¡ÒÃ´Õ ä «¹ à »š ¹ ẺàÃÕ Â º§‹ Ò Â âÅâ¡Œ ¨ Ö § ÍÍ¡ÁÒÁÕ ¤ ÇÒÁàÃÕ Â º§‹ Ò Â â´Â¡ÒÃ¹Ó ¤ÓÇ‹ Ò eat ·Õ ่ à »š ¹ ª× ่ Í ¢Í§àÇ็ º á;ÅÔ à ¤ªÑ ่ ¹ ÁÒ¼ÊÁ¡Ñ º ÃÙ » 䢋 á ´§ ⴹ䢋 á ´§ÁÒ¨Ò¡ ¡ÒÃ·Õ ่ à »š ¹ ÈÙ ¹  ¡ ÅÒ§ ÈÙ ¹  à ÇÁ¢Í§ä¢‹ · Ñ ้ § ËÁ´ à»ÃÕ Â ºä´Œ ¡ Ñ º ¡Òà ·Õ ่ à Ç็ º á;ÅÔ à ¤ªÑ ่ ¹ ¹Õ ้ à »š ¹ ÈÙ Â ¹ à ÇÁÃŒ Ò ¹ÍÒËÒà 13
FONT Share
Title 30 px Head 18 px Detail 14 px
Supermarket
Title 30 px Head 18 px
COLOR ABCDEFGH abcdefgh 12345678 -/ () ¡¢¤§¨©µ¹ ·ÁÃÊǾ´» æ ä ã Ð Ó
Detail 14 px
Pridi
Title 30 px Head 18 px Detail 14 px
ก ข ค ง จ ฉ ต น ท ม ร ส ว พ ด ป ๆ ไ ใ ะ ำ A B C D E F G H a b c d e f g h 1 2 3 4 5 6 7 8 - / 8 ( )
illustrations
#a8351b
#d88c45
#f2ce60
#000000
#333366
#f1f1f1
Interface
#fbb040
#f1f1f1
#000000
14
ICON
15
MOOD BOARD
16
REFFERENCE
https://www.behance.net/ gallery/52698401/Scrummer -planning-poker-IOS-app
https://www.behance.net/ gallery/44646163/Eight-App
http://www.flaticon.com/free-icon/ promotion_272436#term=promotion &page=1&position=9
https://www.instagram.com/e.htrae/
https://www.pinterest.com/ pin/141511613274917107/
17
MOBILE
| WIREFRAME
18
MOBILE
| WIREFRAME
19
MOBILE
| WIREFRAME
20
MOBILE
| WIREFRAME
21
TABLET
| WIREFRAME
22
TABLET
| WIREFRAME
23
TABLET
| WIREFRAME
24
DESKTOP
| WIREFRAME
25
DESKTOP
| WIREFRAME
26
DESKTOP
| WIREFRAME
27
DESKTOP
| WIREFRAME
28
DESKTOP
| WIREFRAME
29
HOME PAGE á¡ËÁÇ´ËÁÙ ‹ » ÃÐàÀ·ÃŒ Ò ¹ÍÒËÒà à¾× ่ Í Êдǡµ‹ Í ¡Ò¤Œ ¹ ËÒÃŒ Ò ¹ÍÒËÒà IPHONE 6 : 375 x 667 px
30
HOME PAGE á¡ËÁÇ´ËÁÙ ‹ » ÃÐàÀ·ÃŒ Ò ¹ÍÒËÒà à¾× ่ Í Êдǡµ‹ Í ¡Ò¤Œ ¹ ËÒÃŒ Ò ¹ÍÒËÒÃ
IPAD : 768 x 1024 px
31
HOME PAGE á¡ËÁÇ´ËÁÙ ‹ » ÃÐàÀ·ÃŒ Ò ¹ÍÒËÒà à¾× ่ Í Êдǡµ‹ Í ¡Ò¤Œ ¹ ËÒÃŒ Ò ¹ÍÒËÒÃ
DEAKTOP : 1024 x 908 px
32
DISCOVER PAGE àÃÕ Â §ÃŒ Ò ¹ÍÒËÒÃ·Õ ่ Í ÂÙ ‹ º ÃÔ à ÇÃâ´ÂÃͺ ÅÓ´Ñ º ÃŒ Ò ¹ÍÒËÒÃ·Õ ่ ä ´Œ Ã Ñ º ¤ÇÒÁ¹Ô  Á IPHONE 6 : 375 x 667 px
33
DISCOVER PAGE àÃÕ Â §ÃŒ Ò ¹ÍÒËÒÃ·Õ ่ Í ÂÙ ‹ º ÃÔ à ÇÃâ´ÂÃͺ ÅÓ´Ñ º ÃŒ Ò ¹ÍÒËÒÃ·Õ ่ ä ´Œ Ã Ñ º ¤ÇÒÁ¹Ô  Á
IPAD : 768 x 1024 px
34
DISCOVER PAGE àÃÕ Â §ÃŒ Ò ¹ÍÒËÒÃ·Õ ่ Í ÂÙ ‹ º ÃÔ à ÇÃâ´ÂÃͺ ÅÓ´Ñ º ÃŒ Ò ¹ÍÒËÒÃ·Õ ่ ä ´Œ Ã Ñ º ¤ÇÒÁ¹Ô  Á
DEAKTOP : 1024 x 908 px
35
IPHONE 6 : 375 x 667 px
36
D E TA I L PAG E ˹Œ Ò ·Õ ่ º Í¡¢Œ Í ÁÙ Å à¡Õ ่ Â Ç¡Ñ º ÃŒ Ò ¹ÍÒËÒÃ
IPAD : 768 x 1024 px
37
D E TA I L PAG E ˹Œ Ò ·Õ ่ º Í¡¢Œ Í ÁÙ Å à¡Õ ่ Â Ç¡Ñ º ÃŒ Ò ¹ÍÒËÒÃ
DEAKTOP : 1024 x 908 px
38
ABOUT ME PAGE ˹Œ Ò ¢Œ Í ÁÙ Å Ê‹ Ç ¹µÑ Ç ¢Í§¼Ù Œ ã ªŒ ·Õ ่ ¨ ÐÃǺÃÇÁ ÃŒ Ò ¹·Õ ่ ä ´Œ º Ñ ¹ ·Ö ¡ äÇŒ ÍÕ ¡ ·Ñ ้ § ÃÇÁÃÕ Ç Ô Ç IPHONE 6 : 375 x 667 px
39
ABOUT ME PAGE ˹Œ Ò ¢Œ Í ÁÙ Å Ê‹ Ç ¹µÑ Ç ¢Í§¼Ù Œ ã ªŒ ·Õ ่ ¨ ÐÃǺÃÇÁ ÃŒ Ò ¹·Õ ่ ä ´Œ º Ñ ¹ ·Ö ¡ äÇŒ ÍÕ ¡ ·Ñ ้ § ÃÇÁÃÕ Ç Ô Ç
IPAD : 768 x 1024 px
40
ABOUT ME PAGE ˹Œ Ò ¢Œ Í ÁÙ Å Ê‹ Ç ¹µÑ Ç ¢Í§¼Ù Œ ã ªŒ ·Õ ่ ¨ ÐÃǺÃÇÁ ÃŒ Ò ¹·Õ ่ ä ´Œ º Ñ ¹ ·Ö ¡ äÇŒ ÍÕ ¡ ·Ñ ้ § ÃÇÁÃÕ Ç Ô Ç
DEAKTOP : 1024 x 908 px
41
C R E AT E R E V I E W PAG E ˹Œ Ò ¡ÒÃà¢Õ  ¹ÃÕ Ç Ô Ç ã¹áµ‹ Å Ð¢Ñ ้ ¹ µÍ¹ IPHONE 6 : 375 x 667 px
42
C R E AT E R E V I E W PAG E ˹Œ Ò ¡ÒÃà¢Õ  ¹ÃÕ Ç Ô Ç ã¹áµ‹ Å Ð¢Ñ ้ ¹ µÍ¹
IPAD : 768 x 1024 px
43
C R E AT E R E V I E W PAG E ˹Œ Ò ¡ÒÃà¢Õ  ¹ÃÕ Ç Ô Ç ã¹áµ‹ Å Ð¢Ñ ้ ¹ µÍ¹
DEAKTOP : 1024 x 908 px
44
WORKFLOW
01
MOBIL 45
MOBIL
02
46
WORKFLOW DESKTOP
47
STORY BOARD
¡Òö¡à¶Õ§¡Ñ¹àÃ×่ͧÌҹÍÒËÒ÷Õ่¨Ð·Ò¹
à¢ŒÒ Web The Eat à¾×่ͤŒ¹ËÒÌҹÍÒËÒà ·Õ่ÍÂÙ‹ã¡ÅŒà¤Õ§ ËÃ×Í µÒÁÊäµÅעͧ¼ÙŒãªŒ§Ò¹ à¾×่Íàª็¤ ËÃ×Í ÃѺÊÔ·¸Ô¾ÔàÈÉ
48
DESIGN CORPORATE PEEPLE ºØ¤¤Å·Ñ่Çä»
BUSINESS
TECHNOLOGY Êдǡµ‹Í¡ÒÃ㪌§Ò¹ icon §‹Òµ‹Í¡ÒÃࢌÒ㨠¡ÒÃ㪌§Ò¹äÁ‹«Ñº«ŒÍ¹
TECHNOLOGY
PEOPLE
BUSINESS à¾×่͹ÓàʹÍÌҹÍÒËÒà 㹡Òè٧ã¨ãˌࢌÒä»ãªŒºÃÔ¡ÒÃ
49
CONCEPT DESIGN INFORMATION ARCHITECTURE PEOPLE
CONTENT
CONTEXT
CONTENT
CONTEXT
à¹×้ÍËÒ·Õ่㪌㹡ÒÃÍ͡Ẻ ໚¹¡ÒÃÍ͡Ẻ ãËŒ´ÙÊÐÍÒ´µÒ à¾×่ͨеŒÍ§´Ùã¹ smartphone ¡Ñº¡ÒèѴÇÒ§·Õ่ÁÕÃÐàºÕº äÁ‹áÍÍÑ´ à¾×่ͤÇÒÁÊдǡ µ‹Í¡ÒÃÍ‹Ò¹ áÅеÑÇÍÑ¡ÉÃÊÒÁÒöÁͧàË็¹ä´ŒªÑ´à¨¹
ºÃÔº·¢Í§à¹×้ÍËÒ¨Ð໚¹¡ÒÃ㪌¤Ó·Õ่§‹Òµ‹Í¡ÒÃࢌÒ㨠áÅСÒç‹Òµ‹Í¡ÒÃ㪌§Ò¹à¾×่ͤÇÒÁÊдǡáÅÐÃÇ´àÃ็Ç ÁÕ¤ÇÒÁ¡ÃЪѺ
PEEPLE ºØ¤¤Å·Ñ่Çä»
50
GRIDS & LAYOUT MOBILE SING IN & SING OUT
51
GRIDS & LAYOUT
MOBILE
TOGGLE & CREATE REVIEW
52
GRIDS & LAYOUT MOBILE SEARCH & DETAIL
53
GRIDS & LAYOUT
MOBILE
SEARCH & FEED & ABOUT ME
54
GRIDS & LAYOUT
DESKTOP & TABLET
HOME & DISCOVER
55
GRIDS & LAYOUT
DESKTOP & TABLET
ABOUT ME & DETAIL
56
W E B A P P L I C AT I O N
FINAL PROJECT THANK YOU Pattarwan Pumnikom 13580228 802208 USER INTERFACE DESIGN WORK CLASS, SILPAKORN UNIVERSITY
https://youtu.be/MarfZppvEVc https://marvelapp.com/hhge8i6 https://www.behance.net/gallery/53879247/THE-EAT
57