THE EAT : web application

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