Designer Learn Code 101 นักออกแบบที่ดีต้องสามารถทำความเข้าใจ Code ได้ !

Hola! วันนี้ นำเรื่องที่สำคัญมาก ๆ สำหรับ Designer ยุคใหม่มาฝาก

cover-img

Hola! วันนี้ นำเรื่องที่สำคัญมาก ๆ สำหรับ Designer ยุคใหม่มาฝาก “Designer Learn Code 101 : นักออกแบบที่ดีต้องสามารถทำความเข้าใจ Code ได้ !” ในปัจจุบัน UxUi Designer เริ่มที่จะทำความเข้าใจงานทางด้าน Front-end เพิ่มมากขึ้น เพราะการที่จะเป็นนักออกแบบที่ดีจำเป็นต้องรู้ว่า Digital Product ที่เราออกแบบถูกสร้างมาอย่างไร…

เริ่มจากทำควารู้จักกับ ภาษา ที่ Developer ใช้ในการเขียนสะก่อน เพื่อเข้าใจว่าแต่ละภาษาที่ใช้เพื่อสร้างสรรค์สิ่งที่เราคิดมานั้นมีข้อจำกัดอะไรบ้าง และเมื่อเรารู้ข้อจำกัด เราจะสามารถออกแบบสิ่งที่เป็นไปได้ และช่วยให้ Designer สามารถสื่อสารกับ Developer เพื่อสร้างสรรค์ผลงานได้อย่างมีประสิทธิภาพอีกด้วย

วันนี้จะมาพูดถึง 2 ภาษา Basic ที่หากคุณเป็น UxUi Designer แล้วละก็ควรรู้เป็นอย่างมาก นั่นก็คือ HTML และ CSS ซึ่งถือภาษาเป็นพื้นฐานที่ Front-end Dev ใช้ในการสร้างงานที่ Designer ออกแบบนั่นเอง

HTML (Hyper Text Markup Language)

คือภาษาคอมพิวเตอร์ที่ใช้สร้าง Web pages ในรูปแบบ .html โดยการสั่ง Browser ว่าต้องแสดงข้อมูลอย่างไร ซึ่งในทางกลับกัน หน้าที่ของ Browser เช่น (Chrome, Edge, Firefox, Safari) คืออ่าน .html และแสดงข้อมูลออกมาตามคำสั่ง ใช้ในการสร้างโครงสร้างของเว็บ เช่น headings, paragraphs, quotes, images และ structure เป็นต้น เป็นเหมือน Skeleton ของเว็บไซด์

CSS (Cascading Style Sheets)

หรือเรียกอีกย่างว่า Style Sheet คือภาษาคอมพิวเตอร์ที่ใช้ในการกำหนด Style ให้กับ Content และ Element ที่สร้างขึ้นด้วย HTML เช่น colours, font size, shape และ visual aspects ของเว็บไซด์ เป็นต้น ถ้ามอง HTML เป็นเหมือน Skeleton ของเว็บไซด์ CSS ก็เปรียบได้เหมือนเป็นรูปร่างหน้าตาที่แต่งเติมเพื่อให้ HTML มีความสวยงามนั่นเอง

โดยสรุป (In Summary)

Designer รู้สิ่งเหล่านี้ไปทำไมกันนะ ? ข้อดีของการเข้าใจ Code คือ Designer จะสามารถรู้ข้อจำกัดของการทำงานของ Code ได้ เข้าใจว่าแต่ละอย่างที่ Design นั้นถูกเขียนขึ้นมาใช้งานจริงได้อย่างไร ช่วยให้ Designer สามารถออกแบบ “สิ่งที่เป็นไปได้” ได้ดียิ่งขึ้น และเมื่อ Designer เข้าใจ Code ก็จะช่วยให้สื่อสารกับ Developer ได้อย่างมีประสิทธิภาพมากยิ่งขึ้นอีกด้วย

หากสนใจเรียนรู้เกี่ยวกับภาษา HTML เพิ่มเติมสามาขถเข้าไปอ่านได้ที่ https://www.w3schools.com/ บอกได้เลยว่านี่ถือเป็นคำภีย์ที่ Developer ทุกคนน่าจะเคยผ่านตากันมาแล้วอย่างแน่นอน

Peace!

Reference

https://www.w3schools.com/html/html_intro.asp

https://www.w3schools.com/css/css_intro.asp