html graph

ไปเจอเว็บที่พอเราใส่ชื่อ url อะไรลงไปมันก็จะเป็นกราฟออกมาให้ดู อาจจะ link กับ system ที่เคยทำเป็นใยแมงมุมได้ แต่ของเค้าวิเคราะห์จากส่วนประกอบของเว็บที่เราใส่ชื่อไป แต่ของเรามั่วเอาเอง :b

ความหมายของแต่ละสีคือ
blue for links (the A tag)
red for tables (TABLE, TR and TD tags)
green for the DIV tag
violet for images (the IMG tag)
yellow for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
black the HTML tag, the root node
gray all other tags

อัันนี้เป็นของเว็บนี้


อันนี้เป็นของ hi5


ดูเหมือน hi5 จะยุ่งเหยิงกว่ากันเยอะเลย เกือบลืมบอก เว็บชื่อ
http://www.aharef.info/static/htmlgraph/

workshop : system

การทำ workshop เรื่อง system โดยมีอุปกรณืคือ หลอด เชือก หนังยาง

ในกลุ่มเลือกที่จะทำระบบของ " อินเตอร์เนต " ซึ่งเป็นระบบที่คุ้นเคยกันในแต่ละวัน จึงทำเป็นรูปร่างของใยแมงมุมที่เป็นเครือข่าย



หลอดสีฟ้าและเหลือง แทนการรับและส่งของสัญญาณที่ต้องเดินทางไปตามเครือข่าย และ เทปสีขาวที่ติด ก็เหมือนเว็บไซด์ต่างๆที่อยู่บนเครือข่ายอินเตอร์เนต



จากการทำ workshop ครั้งนี้ก็รู้จัก system มากขึ้นว่าอาจจะเป็น system ที่เราคุ้นเคยอยู่แล้ว หรืออาจเป็นการสร้่ง system ใหม่ก็ได้ ถ้าเรามอง system ในข้อกำหนดที่แตกต่างกัน เช่น system ของบางคนอาจเป็นสิ่งที่ต้องเชื่อต่อกันไปเรื่อยๆไม่รุ้จบ หรือ อาจเป้นระบบที่ต้องวนกลับมาสู่จุดเริ่มต้น แต่ถึงแม้ว่าจะสร้างะบบใหม่ๆเราก็ต้องมีข้อกำหนดบางอย่างอยู่ที่ยังอยู่ในความหมายของคำว่า system

10 rules of Simplicity

จิงจิงวันนี้ไม่มีอารายแต่เห็นบล์อกไม่อัพเดตมานานแล้ว
เพราะยังคิดงานไม่ค่อยออก แต่พอดีไปเจอคนแนะนำหนังสือเล่มหนึ่ง
ชื่อ simplicity ของ edward de bono สำนักพิมพ์ penguin books ปี 1999
ภายในเล่มจะมีกฏ 10 ข้อของ simplicity และหนังสือทั้งเล่มก็จะเกี่ยวข้องกับกฏเหล่านี้

1. you need to put a very high value on simplicity.
2. you must be determined to seek simplicity.
3. you need to understand the matter very well.
4. you need to design alternatives and possibilities.
5. you need to challenge and discard existing elements.
6. you need to be prepared to start over again.
7. you need to use concepts.
8. you may need to break things down into smaller units.
9. you need to be prepared to trade off other values for simplicity.
10. you need to know for whose sake the simplicity is being designed.

เดี๋ยววันพุธจะไป tcdc ถ่ายรูปมาให้ดู ว่าข้างในเป็นยังไง หวังว่า tcdc คงมีนะ :)

Blast Bakery : Favorite work

Blast Bakery >> ร้านเบเกอร์รี่สำหรับผู้ที่ชอบออกกำลังกาย

logo จึงมาจากการรวมกันของรูปทรงขนมและคนมีกล้าม ซึ่งสามารถแสดงถึงเอกลักษณืของร้านได้

Project 3: Symbol of BTS and MRT for Shopcaholic

ในเมืองไทยนั้น รถไฟใต้ดินมีการสร้างชุดสัญลักษณ์เพื่อใช้แทนสถานนีต่างๆ เช่น
สถานีหัวลำโพง : ตัดทอนจากหัวลำโพง
สถานีสามย่าน : ตัดทอนจากจุฬาลงกรณ์ ซึ่งอยู่บริเวณนั้น
สถานีสีลม : ตัดทอนจากรูปปั้นรัชกาลที 6 หน้าสวนลุมพินี
สถานีลุมพินี : ตัดทอนจากดอกบัวแสงถึงสวนลุมพินี
สถานีคลองเตย : ตัดทอนจากหลังคาพระตำหนักปลายเนิน
สถานีศูนย์ประชุมแห่งชาติสิริกิต
สถานีสุขุมวิท : ตัดทอนจากจั่วของสยามสมาคม
สถานีเพชรบุรี : ตัดทอนจากคลองแสนแสบที่อยู่ใกล้สถานี
สถานนีพระรามเก้า : ตัดทอนจากเลขเก้าไทย
โดยการเลือกใช้สีมาจาก "สีฟ้า" คือ สถานีเชื่อมต่อ
"สีแดง" คือ สถานีย่านการค้า
"สีขียว" คือ สถานีที่ใกล้สวน
"สีเหลือง" คือ สถานีที่เกี่ยวข้องกับราชวงศ์
"สีส้ม" คือ สถานีที่อยู่ในย่านชุมชน
"สีเทา" คือ ย่านใกล้เส้นทางเดินทางทางน้ำ
ในแต่ละประเทศจะมีการใช้สัญลักษณ์กับผู้โดยสารแตกต่างกันไป เช่น
New York เป็นการใช้ตัวอักษร ตัวเลข และสี เป็นตัวสื่อสาร

ญี่ปุ่น ใช้ตัวอักษรตัวขึ้นต้น และ สีของสายการเดินรถ

concept : เป็นการสร้าง symbol ที่สามารถเข้าใจง่ายแก่บุคคลเฉพาะกลุ่ม โดยกลุ่มที่เลือกมาทำก็คือ " Shopcaholic หรือ สาวนักช้อป "

ตัวอย่างสัญลักษณ์สถานีต่างๆ

Project 2: Experimental : Subway Map

concept;หาความเป้นไปได้อื่นๆในการออกแบบแผนที่ สามารถสื่อสารกับคนจำนวนมากได้อย่างง่ายและรวดเร็ว โดยไม่ต้องใช้แผนที่ตามรูปแบบของ vignelli

การทดลองมีที่มากจากหลายที่ เช่น
*การลองเปลี่ยนสายเดินรถเป็ยสัญลักษณ์ที่สามารถรวมกันได้ในสถานนีเชื่อมต่อ
*การใช้เฉพาะเส้นโค้ง
*เปลี่ยนเส้นทางเดินตามรูปแบบหกเหลี่ยม เจ็ดเหลี่ยม และ แปดเหลี่ยม
*ตัดทอนจากแผนที่จริงของกรุงเทพมหานคร
*แบ่งตามชั้น ของกรุงเทพมหานคร
*แบ่งแผนที่เป็นสองฝั่ง โดยมีสายสีน้ำเงินเป็นตัวเชื่อมระหว่างสองฝัง

รูปแบบที่นำมาพัฒนาคือรูปแบบวงกลม

มีที่มาจากการแบ่งกรุงเทพฯเป็นชั้นๆ ชั้นใน ชั้นกลาง และ ชั้นนอก

โดยเริ่มจากการใส่จุดตามวงกลมที่ซ้อนกัน ให้คล้ายจุดตามแผนที่จริงมากที่สุด

และทดลองใส่จุดแสดงสถานนีสองสี คือ สีขาวและดำ แต่สีที่ชัดเจนที่สุดคือสีขาว

แผนที่ที่มีการแสดงเฉพาะสถานีเชื่อมต่อสำคัญเท่านั้น

แผนที่ที่แสดงชื่อสถานีทั้งหมด

Project 1: Grid System & Semiotics

การจัดองค์ประกอบแบบ golden mean - Composition
การจัดองค์ประกอบยอดฮิตวิธีหนึ่งที่ตำราทั้งหลายแนะนำ ก็คือ การใช้จุดตัดเก้าช่อง (rule of third) ก็คือ การแบ่งภาพออกเป็น 3 ส่วน ทั้งแนวตั้งและแนวนอน แล้ววางภาพตรงจุดตัดนั้นจริงๆ ก็คือ จะเป็นวางภาพในสัดส่วนสองจากสาม (2:3) จริง ๆ แล้ว rule of third นั้นก็เอามาจาก golden mean นั่นเองgolden mean คือ สัดส่วน (ratio) 1:1.6180339.. (ซึ่งเป็นตัวเลขมหัศจรรย์ ที่ถูกค้นพบมาตั้งแต่สมัยก่อน)และทุกวันนี้ถูกใช้ในทุก ๆ สิ่งรอบตัวเราโดยที่เราอาจไม่รู้ตัว เป็นอะไรที่สมองของมนุษย์ตอบสนองดีเป็นพิเศษ อย่างเช่น มีการทดลองพบว่า รูปสี่เหลี่ยมผืนผ้าที่คนชอบมากที่สุดเป็นสัดส่วน 1:1.618

1.618 มาจากไหน? จากอนุกรม Fibonacci ( S[n] = S[n-1] + S[n-2] )0,1,1,2,3,5,8,13,21,34,55,89,...เอา 3/2 = 1.55/3 = 1.667..55/34 = 1.617689/55 = 1.6182จากนั้น ค่าจะลู่เข้า ค่า ๆ หนึ่ง เรียกว่า Phi = 1.6180339... (เป็นอีกค่าคงที่ เหมือนค่า Pi และ e ที่เรารู้จัก)จะเห็นว่า 3:2 ก็อยู่ในอนุกรม Fibonacci เหมือนกันพอรู้จักค่า Phi แล้ว.. มาลองแบ่งตารางกันบ้างดีกว่า..จากรูป ขนาดสี่เหลี่ยมสีน้ำเงิน จะมีขนาดเท่ากับ 1:1.618 ของสี่เหลี่ยมใหญ่
Golden Section VS Rule of Thirdลองเทียบ 1.618:1 กับ 3:2 ใช้หลักการแบ่งเป็นสัดส่วนสี่เหลี่ยมคล้ายก็จะเป็นการเปลี่ยน

golden section เป็น rule of third
Golden Spiral โดยแบ่งภาพทีละ 1:1.618 ของด้านยาว แล้วลากจุดตัด เป็นเส้นโค้ง
มาเป็น Golden Triangle แบ่งเป็นสามเหลี่ยมคล้ายเท่าๆ กัน 3 อัน(สี่เหลี่ยมเป็น 3:2 ก็ใช้ Golden Triangle แบบ 3:2 ก็ถือว่าใกล้เคียง)

SEMIOTICS
semiotics แปล เป็นไทยว่า "สัญศาสตร์" คือ  ศาสตร์ที่ศึกษาเกี่ยวกับเรื่องของสัญลักษณ์และเครื่องหมายsemiotics มาจากภาษากรีกที่เป็นรากศ้พท์ของคำว่า Sign  โดยเริ่มต้นจากการศีกษาของนักภาษาศาสตร์ Ferdinand de Saussure & Charles  Sanders Peirce และอีกหลายๆคน ซื่งต่อมาก็มีการนำเอาหลักการมาประยุกต์ใช้ในงาน  Design รวมถีงงานแขนงอื่นๆด้วย

* icon เป็นเพียงการแทนที่ การตัดทอนลงมา R
* index เป็นภาพตัดทอนที่มีความหมายในตัวมันเอง R O
* Symbol เป้นภาพที่ตัดทอนแล้วนอกจากสื่อความหมาย ยังมีความสัมพันะ์กับผู้รับ

* R = การบอกความหมายของสิ่งที่แทนที่
* O = สิ่งของที่สัญลักษณ์ไปแทนที่
* I = ความเข้าใจของผุ้ใช้ต่อสัญลักษณ์

* Semantic = ศึกษาความหมายของ sign
* Syntactic = โครงสร้างความสัมพันธ์ของ Sign
* Pragmatic = ความสัมพันธ์ระหว่าง sign กับผู้ใช้

ตัวอย่างสัญลักษณ์ "ทางออก" 2 แบบ อันแรกที่สามารเข้าใจได้อย่างชัดเจน แต่ อีกอัน ต้องเคยผ่านการเรียนรู้มาก่อนว่าเป็นเครื่องหมายอะไร