w.3 - igd 222 interface design [ 2559 ]

IGD 222WEEK 3 : SITEMAP, WIREFRAME

- 06.09.2016 -

INTERFACE DESIGN

SITEMAP

WHAT ?

SITEMAPหรออกชอทคนหวา

แผนผงเวบไซต หรอ แผนทเวบไซต เปนสวนหนงของเวบไซต ทอธบายถงโครงสรางของเวบไซตไดทงหมด ซง Sitemap นเองจะเปนเหมอน สารบญ หรอ หนาดชน ของเวบไซต ทรวม Link ทงหมดของเวบไซตไวภายในหนาเดยว และยงชวยสรางปฏสมพนธทดตอ Search Engine

RESULT ?

ทำาใหผชม Application เขาใจโครงสราง และเขาถงขอมลทตองการไดรวดเรวยงขน1

.2

.3

.4

.

Sitemap ทำา ใหผพฒนา Application เขาใจโครงสราง และเหนภาพรวมของ Link ทำาใหงายตอการพฒนา เนองจาก Sitemap จะแบงสวนของ Application ไวอยางชดเจนทำาให Bot ของ Search Engine เขามาเกบขอมล (index pages) ไดรวดเรว และงายขน

เปนสวนหนงของการทำา SEO

EXAMPLE ?

KNOWLEDGE ?

https://slickplan.com/1.2.3.4.

https://dynomapper.com/

https://writemaps.com/

http://mindnode.com/

WIREFRAME

WHAT ?

WIREFRAMEจดประสงคกเพอทจะเปน

เครองมอทชวยใหการดำาเนนงานเปนไปอยางราบรน เพราะ Wireframe จะเปนขอกำาหนดในการทำางานรวมกน และยงใชเปนเอกสารเอาไวอางองได ซงจรงๆ แลว การทำา Wireframe นน ไมไดมรปแบบตายตว แตละคนหรอบรษทอาจมวธการแตกตางกนออกไป แตจะมจดประสงคเหมอนๆ กน คอเพอใหเหนภาพรวมของงาน ทำาใหทมเขาใจตรงกน และพฒนาไปในทางเดยวกน

WHEN ?

WIREFRAMEกอนทจะลงมอทำา Wireframe

เราควรมการเตรยมพรอมกอน เรมตงแตเรองของ Requirements ตางๆ ของโปรเจค เวลาคยกบลกคา ตองตกลงกนใหชดเจน และมนใจวาเขาใจตรงกน แลวทำาการสรป Requirements อกครง ยงละเอยดมากเทาไรยงดเมอสรป Requirements ไดแลว เราควรนำาสงทไดสรป มาระดมความคดกนกอน วาสงนโอเคมย ทำาจรงไดมย มขอเสนอแนะ หรอขอจำากดอะไรบางมย ขนตอนนสำาคญกบงานและทม

HOME

EVENT

PRODUCT

PROFILE

SITEMAP

HEADER

FOOTER

CONTENT

SIDEBAR

LAYOUT

PICTURE

MESSAGE

TITLE

CONTENT

SYMBOL

MAP

PLAYER

BUTTON

MENU

?

PICTURE

MESSAGE

TITLE

CONTENT

SYMBOL

MAP

PLAYER

BUTTON

MENU

RESULT ?

WIREFRAMEWireframe กเหมอนกบ

การวางแผนการทำางานของเรา โดยเขยนออกมาเปนแผนภาพเพอใหเขาใจไดงาย โดย Wireframe นนจะไมมรายละเอยดทางดานความสวยงาม ไมวาจะเปน สสน แบบตวอกษร หรอรปภาพ แตจะแสดงเฉพาะ Layout วาอะไร อยในตำาแหนงไหนบาง ลงคนกดแลวไปหนาไหนตอ พอกดแลวเปน Overlay มย พอเอาเมาสไป Hover จะเกดอะไรขน รายละเอยดพวกน เราสามารถใสลงไปไดเลย

EXAMPLE ?

KNOWLEDGE ?

http://miketheindian.com/2012/09/28/iphone-5-wireframe-sketch-template/1.2.3.4.

https://www.flickr.com/photos/owaters/4501918517/

http://sneakpeekit.com/wireframe-sketchsheets/

https://inspirationhut.net/printable-paper/

http://www.justinmind.com/1.2.3.4.5.6.7.

http://pencil.evolus.vn/

https://cacoo.com/lang/en/

https://www.jumpchart.com/

http://framebox.org/

http://iplotz.com/index.php

https://wireframe.cc/

PRACTICE !

BREAK10

Minutes

1. เขยน SITEMAP2. เขยน WIREFRAME

HOMEWORK !

1. เขยน SITEMAP

2. เขยน WIREFRAME3. INTERACTIVE BOX

w.3 - igd 222 interface design [ 2559 ]

Art & Photos