10 Front-End Framework มาแรงในปี 2018

เมื่อต้องพัฒนาเว็บไซต์ใหม่ Front-End Framework ช่วยให้คุณสามารถเริ่มงานได้ทันที ด้วยความนิยมของ framework จึงทำให้มี Front-End Framework ให้เลือกใช้งานหลายแบบและยังมี framework ใหม่ๆ ออกมาอยู่เสมอ

เพราะการมี framework ให้เลือกใช้งานหลากหลาย การเลือก Front-End Framework ตัวหนึ่งให้เหมาะกับการงานอาจเป็นเรื่องยาก เช่นเดียวกับนักพัฒนาจำนวนมาก คุณอาจถูกดึงดูดให้ใช้ framework ยอดนิยมและเป็นที่ยอมรับ เช่น Bootstrap และ Foundation มองอีกแง่หนึ่ง framework ใหม่ๆแต่เป็นที่นิยมน้อยกว่าอาจจะเหมาะกับความต้องการของคุณก็เป็นได้ ดังนั้นมันก็คุ้มค่าที่จะเรียนรู้เกี่ยวกับตัวเลือกยอดนิยมในปัจจุบัน
สิ่งที่ควรคำนึงถึงใน Front-End Framework
ก่อนที่คุณจะเลือก Front-End Framework สำหรับโปรเจคต่อไป สิ่งสำคัญคือการหาความรู้เกี่ยวกับสิ่งที่ควรคำนึงถึงของแต่ละ framework โดยพิจารณาหัวข้อต่อไปนี้ คุณสามารถพิจารณาข้อดี-ข้อเสียของ Front-End Framework ยอดนิยมได้ง่ายขึ้น

ระดับทักษะความรู้ – เมื่อต้องเลือก Front-End Framework ให้พิจารณาจากทักษะของคุณ หากคุณเป็นมือใหม่ framework ที่มีความเสถียรอย่าง Bootstrap อาจเป็นตัวเลือกที่ดี เนื่องจากมาพร้อมวิดเจ็ทที่เป็นประโยชน์และไม่ต้องอาศัยทักษะการเขียนโปรแกรมมากนัก หากคุณมีประสบการณ์ ควรเลือกใช้ framework ที่เรียบง่าย ซึ่งสามารถให้คุณมีพื้นที่ในการปรับแต่ง โดยทั่วไป framework เหล่านี้จะเบากว่าและไม่ใหญ่จนเกินไป ซึ่งนับว่าเป็นข้อดี
Responsive web design – เว็บใดๆก็ตามที่คุณพัฒนาควรมีการแสดงผลได้อย่างถูกต้องในทุกอุปกรณ์ เนื่องจากมีผู้คนจำนวนมากขึ้นที่เข้าถึงอินเทอร์เน็ตผ่านอุปกรณ์มือถือ จากรายงานของ Similar Web เรื่องสถานะเว็บบนมือถือในสหรับอเมริกา ปี 2015 ประมาณร้อยละ 56 ของปริมาณการใช้ข้อมูลผู้บริโภคไปยังเว็บไซต์ชั้นนำของสหรัฐอเมริกาตอนนี้มาจากอุปกรณ์มือถือ ดังนั้นจึงควรใช้ Front-end framework ที่รองรับ Responsive web design เพื่อให้คุณมีสิ่งที่ต้องกังวลน้อยลง
CSS-Preprocessor – หากคุณใช้ CSS-Preprocessor และต้องการใช้เฉพาะตัวใดตัวหนึ่ง โดยทั่วไปแล้วมี Sass และ LESS ตรวจดูให้แน่ใจว่า framework ที่คุณใช้รองรับมัน
รูปลักษณ์ – เลือก framework ที่ช่วยให้คุณออกแบบรูปลักษณ์ตามที่คุณต้องการโดยใช้ความพยายามน้อยที่สุด
Prototype - Front-end frameworkในอุดมคติจะช่วยให้คุณสร้าง wireframe และ prototype อย่างรวดเร็วเพื่อเพิ่มความเร็วในขั้นตอนการออกแบบและพัฒนา

เหนือสิ่งอื่นใด การใช้ Front-end frameworkที่เหมาะสม จะช่วยลดความซับซ้อนและเพิ่มความเร็วในขั้นตอนการออกแบบและพัฒนาเว็บไซต์ และยังคงให้ความยืดหยุ่นและคุณสมบัติที่คุณต้องการเพื่อให้ได้ผลลัพธ์ที่ยอดเยี่ยม
10 Front-End Framework มาแรงในปี 2018
เพื่อไม่ให้เป็นการเสียเวลา เรามารู้จักกับ Front-End Frameworks ยอดนิยมในปี 2018
1. Bootstrap

การจัดอันดับนี้คงจะไม่สมบูรณ์หากไม่มีชื่อของ Front-End Framework ที่เป็นที่นิยมอย่างแพร่หลายนั่นคือ Bootstrap สร้างโดยนักพัฒนา Twitter และเปิดตัวครั้งแรกในปี 2011 เป็น open-source framework ที่ใช้มากที่สุดในโลก

เหมือนกับ Front-End Framework ที่มีประสิทธิภาพตัวอื่นๆ Bootstrap ประกอบไปด้วย CSS, HTML และ JavaScript หรือ JS และองค์ประกอบอื่นๆ โดยยึดหลักมาตรฐาน Responsive web design ช่วยให้คุณพัฒนาเว็บต่างๆสอดคล้องกับความซับซ้อนและขนาดต่างๆ

Bootstrap มีการอัพเดตอย่างต่อเนื่อง ประกอบไปด้วยคุณลักษณะล่าสุดและดีที่สุด ตัวอย่างเช่น ได้มีการเพิ่มธีมเพื่อให้สอดคล้องกลับแนวทางของ Google’s material design หลังจากที่การเปิดตัวเพียงไม่นาน และยังมีการปรับปรุงเพื่อใช้ Sass เป็น CSS preprocessor

ข้อดี

รองรับ Responsive web design (สามารถปิดการใช้งานได้หากต้องการ)
มี documentation ที่ครอบคลุม

ข้อเสีย

ไฟล์ที่มาพร้อมแพกเก็จขนาด 276kB เป็นสไตล์ที่ไม่มีการใช้มากนัก
จำนวนของ HTML class และ DOM element ที่มากเกินไปสามารถทำให้เกิดความยุ่งเหยิงและสับสนได้

เหมาะกับ ผู้ใช้งานเริ่มต้นและผู้ใช้งานที่ต้องการ front-end framework ที่แข็งแรง
2. Semantic-UI

สำหรับ framework ที่ออกมาใหม่ Semantic-UI โดดเด่นทั้งในหลายๆด้านและกำลังจะกลายเป็นหนึ่งใน front-end framework ยอดนิยมที่สุดอีกหนึ่งตัว

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

อีกหนึ่งคุณลักษณะที่โดดเด่นของ Semantic-UI คือการรวมรวบ array ที่น่าปวดหัวของ library บุคคลที่สามเอาไว้ ซึ่งในความเป็นจริงคุณอาจไม่จำเป็นต้องใช้งานของคนอื่น ดังนั้นขั้นตอนการพัฒนาจะง่ายขึ้นและมีประสิทธิภาพมากขึ้น

ข้อดี

ชื่อของ Semantic class ทำมาให้ง่ายต่อการใช้ แม้แต่มือใหม่ก็สามารถเริ่มใช้งานได้ทันที
ไฟล์ขนาดเล็กและใช้เวลาโหลดไม่นาน เพราะคุณสามารถโหลดเพียงแค่องค์ประกอบที่คุณต้องการ แต่ละส่วนมีไฟล์ JS และ stylesheet ของตัวเอง
องค์ประกอบที่หลากหลายง่ายต่อการปรับใช้

ข้อเสีย

แพกเก็จมีขนาดใหญ่มากเมื่อเทียบกับ Foundation และ Bootstrap
ผู้ที่ต้องการออกแบบและพัฒนาที่ซับซ้อนอาจไม่เหมาะกับ framework นี้

เหมาะกับ ผู้ใช้งานเริ่มต้นและผู้ใช้งานที่ต้องการ front-end framework ที่เบาและรวดเร็ว
3. Foundation

สร้างโดยบริษัทออกแบบเว็บไซต์ Zurb โดย Foundation เป็น front-end framework ระดับองค์กรขั้นสูง ซึ่งเหมาะกับพัฒนาเว็บไซต์ responsive ให้มีความรวดเร็ว ถูกนำไปใช้บนเว็บไซต์เช่น Facebook, eBay และ Mozilla ยังค่อนข้างซับซ้อนและไม่เหมาะกับมือใหม่

Framework ที่ทรงพลังนี้ยังรองรับ GPU acceleration สำหรับแอนิเมชั่นที่เบา รวดเร็ว ลื่นไหลและ Fastclick.

เทรนด์ออกแบบหน้าเว็บและแอพมาแรง ปี 2018 Part 2

เทรนด์ออกแบบหน้าเว็บและแอพมาแรง ปี 2018 Part 2

สวัสดีครับ ยินดีต้อนรับสู่ Part 2 ครับ

เพื่อเป็นการไม่เสียเวลาเรามาดูกันเลย

Split Screens

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

สำหรับแอพหาคู่นี้ ใช้หน้าจอแยกตามแนวทแยงมุม บวกกับคอนทราสต์ของสี ซึ่งจะสร้างความกลมกลืน เนื่องจากมีการสอดคล้องกับเงา

เว็บไซต์สารานุกรม ใช้หน้าจอแยกสำหรับแบ่งหน้ารายการ

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

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

 

แอป Watering Tracker จะใช้หน้าจอแยกแนวนอน: ส่วนบนที่มีพื้นหลังที่มืดเป็นที่ดีสำหรับการนำเสนอแผนภูมิและภาพ ในขณะที่ส่วนที่ต่ำกว่าใช้พื้นหลังโทนสว่าง เพื่อให้อ่านง่าย

 

Bold Typography

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

Landing Page ของ Big City Guide ใช้วิธีประยุกต์ลำดับตัวอักษร และ ภาพ ทำให้ชื่อของเมือง ดูกลืนไปกับตัวภาพ ยังไม่หมด คนออกแบบยังใช้เทคนิคการตัด และสลัก หัวข้อหรือคำสำคัญลงไป ด้วยวิธีการแบบนี้จะทำให้ตัวอักษรดู ผสมผสานกลมกลืนไปกับตัวภาพ ราวกับเป็นหนึ่งเดียวกัน

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

Buttonless UI 

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

แอพสารานุกรมนำเสนออินโฟกราฟิกแบบโต้ตอบ สำหรับข้อมูลช้าง การโต้ตอบทั้งหมดกับข้อมูลเกิดขึ้นโดยปราศจากปุ่มต่าง ๆ แต่จะใช้การเลื่อนเพื่อดูข้อมูลแทน

Vibrant and Bold Colors

นักออกแบบเลือกใช้ color palettes ในแอปพลิเคชั่นและเว็บไซต์ รวมถึงการใช้โทนสว่างและโทนมืด ความหลากหลายของฟ้อนท์และรูปแบบอักษร (typefaces) เช่นเดียวกับ การศึกษาด้านการออกแบบก็ได้ผนักดันมาตรฐานใหม่ๆอยู่เรื่อยๆ นักออกแบบจึงลองผสมผสาน โดยใช้ประโยชน์จากสีที่หลากหลายโดยไม่ทำให้การใช้งานเสียไป

Music News Appนี่คือแนวคิดที่สร้างสรรค์สำหรับ App ข่าวดนตรี ที่ช่วยเก็บรวบรวมเนื้อเพลงข่าวและควิซเกี่ยวกับเพลงทั้งหมดในที่เดียว UI จะถูกนำเสนอผ่านทาง โทนสีสดใส  พื้นหลังของโฮมเพจจะใช้รูปทรงเรขาคณิตซึ่งเปลี่ยนรูปแบบและสีของพวกเขาเมื่อผู้ใช้สไลด์ผ่านหน้าจอ

Engaging Interface Animation

การให้หน้า UI เคลื่อนไหวยังคงเป็นประเด็นเถียงกันแรง เพราะสิ่งที่แอนิเมชั่นทำคือ ฟีเจอร์ที่ไม่จำเป็น แถมยัง overload ตัว UI ของผู้ใช้งาน ยิ่งทำให้ดูซับซ้อน ผู้ใช้มักคาดหวังว่าแอนิเมชั่นคือ ส่วนสำคัญที่ทำให้แอพมีปฎิสัมพันธ์กับผู้ใช้ ดังนั้น ทั้งนักออกแบบ และ นักพัฒนา จึงพยายามค้นหาวิธีต่างๆเพื่อให้ตอบโจทย์นี้ สิ่งที่ได้คือ ให้มันขยับนิดขยับหน่อย (Microinteractions) ให้ปุ่ม สวิตซ์ หรือแถบเปิด-ปิด ได้เคลื่อนไหว

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

Slumber App มีจุดเด่นเรื่องหน้าจอหลัก ภาพ illustration ที่ทำงานร่วมกับ preloading ช่วยให้การรอไม่น่าเบื่อ และบวกกับการเล่นกับความสุนทรีย์

จบ Part 2 จ้า โปรดติดตามชมตอนต่อไป
Complete Web & App Design Course - UX, UI and Design Thinking With Big Data Bootcamp
เรียนรู้ หัวใจหลักสำคัญของการทำ Product ด้วย UX และ UI
การออกแบบโดยใช้ Concept ของ Design Thinking
นำข้อมูลที่ได้มาพัฒนา Product อย่างสม่ำเสมอ โดยใช้ Concept ของ Big Data
รายละเอียดเพิ่มเติมและสมัครที่นี่
หลักสูตรยาว 12 ครั้ง รวมเวลากว่า 72 ชั่วโมง จบมาทำงานได้จริง
ราคาคุ้มค่าที่สุด ตอนนี้มี promotion มา 2 คนลดเพิ่ม 10% 3 คนลดเพิ่ม 15%
สามารถขอ code ส่วนลดได้ที่ page LEAN upskill

อะไรคือ Test Driven Development (TDD)? ตัวอย่าง

อะไรคือ Test Driven Development (TDD)? ตัวอย่าง

อะไรคือ Test Driven Development (TDD)?
TDD สามารถอธิบายได้ว่า เป็นการฝึกโปรแกรมเพื่อให้นักพัฒนาทราบถึงว่าโค้ดใหม่ที่เขียนขึ้นมาเมื่อได้รับการทดสอบแล้วมันผิดพลาดไหม  แถมยังหลีกเลี่ยงโค้ดที่ซ้ำกันได้อีกด้วย โดย TDD ย่อมาจาก Test Driven Development เป้าหมายหลักของ TDD คือการทำให้โค้ดสะอาด เรียบง่าย  และปราศจากบัค
(more…)

พิชิตปัญหาคุยกับไอทีไม่รู้เรื่อง ด้วยภาษาอังกฤษ!

พิชิตปัญหาคุยกับไอทีไม่รู้เรื่อง ด้วยภาษาอังกฤษ!

เคยไหมที่ไอทีพูดอะไรก็ไม่รู้ แล้วคุณรู้สึกปวดหัวไหม?

เคยอยากลองแก้ปัญหาไอทีเอง แล้วรู้สึกศัพท์อะไรไม่รู้เต็มไปหมด?

ต้องปฎิเสธไม่ได้เลยทุกวันนี้คุณต้องใช้เทคโนโลยี และก็ต้องพบกับปัญหาหรือการเรียนรู้มากมาย ไม่ว่าจะเป็น

(more…)

อนาคตของ Java Enterprise

อนาคตของ Java Enterprise

ช่วงไม่กี่เดือนที่ผ่านมานี้ มีการเปิดเผยว่า ภาษา Java กำลังพบกับการเปลี่ยนแปลงครั้งใหญ่อีกครั้ง

นอกจากการโหวตให้มีการเปลี่ยนชื่อของ Java Enterprise จากปัจจุบัน Java EE เป็น Jakarta EE – แบรนด์ที่อยู่ภายใต้การดูแลของ Eclipse Foundation สำหรับผู้ใช้ coding robust แอพพลิเคชั่นเอนเตอร์ไพร์ส โดยใช้ภาษา Java ในการปรับปรุงผลิตภัณฑ์และก้าวเข้าสู่ตลาด DevOps ที่กำลังแข่งขันสูงอยู่แล้ว อาจดูเหมือนเป็นสถานการณ์ที่เลวร้าย

(more…)

คู่มือลัด: Scrum สำหรับสตาร์ทอัพ

คู่มือลัด: Scrum สำหรับสตาร์ทอัพ

สกรัม (Scrum) เป็นการบริหารโปรเจคอไจล์ (Agile) รูปแบบหนึ่งที่เน้นไปที่การทำงานให้เกิดผลอย่างเป็นรูปธรรม ความเร็วและการทำรอบ
หากคุณได้ก้าวเข้าสู่ชุมชนสตาร์ทอัพ คุณอาจเคยได้ยินเกี่ยวกับวิธี Lean ทีม Scrum และ Agile ต่างก็มีหลายความเห็นมากมาย วันนี้ผมต้องการตัดความคิดเห็นที่คุณเคยได้ยินมาออกไป และโฟกัสกับสิ่งที่สามารถเปลี่ยนวิธีการบริหารทีม บริษัท หรือแม้กระทั่งชีวิตของคุณเอง:

(more…)

TDD – Java JUnit FizzBuzz

TDD – Java JUnit FizzBuzz

TDD - Java JUnit FizzBuzz

เรื่องนี้เกิดขึ้นในตอนเช้าวันอาทิตย์ ที่ผมกำลังฝึกใช้ FizzBuzz อยู่

ผมได้ยินมาว่า FizzBuzz จะถูกใช้ในการสัมภารณ์ด้วย ผมเลยว่าจะลองเล่นกับมันดูหน่อย

สามารถศึกษา FizzBuzz ได้ ที่นี้

วิดีโอที่ผมสร้างในส่วน TDD นั้นจะท้ายบทความครับ

(more…)

ภาษาอังกฤษสำหรับ IT

ภาษาอังกฤษสำหรับ IT

ผู้มีทักษะด้านคอมพิวเตอร์ได้พัฒนา และบำรุงเครื่องมือคอมพิวเตอร์และซอฟต์แวร์ ก่อเกิดเป็นรากฐานของอินเตอร์เน็ตในปัจจุบัน พวกเขายังได้สร้างผู้เชี่ยวชาญ และ งานของอุตสาหกรรมนี้อีกว่า 34 เปอร์เซ็นต์ โปรแกรมเมอร์ลงมือเขียน ทดสอบ และปรับแต่งรายละเอียดคำสั่งการทำงาน ที่เรียกกันว่า โปรแกรม หรือซอฟต์แวร์ ที่คอมพิวเตอร์สามารถทำงานตามคำสั่งอย่าง เชื่อมต่ออินเตอร์เน็ตแล้ว เปิดหน้าเว็บขึ้นมา การใช้ภาษาโปรแกรมเช่น C++ หรือ Java พวกเขาทำการแตกงานใหญ่ๆสำหรับคอมพิวเตอร์ ออกเป็นงานย่อยที่สุด แล้วร้อยด้วยพลังแห่งตรรกะ

(more…)

เทรนด์ออกแบบหน้าเว็บและแอพมาแรง ปี 2018 Part 1

เทรนด์ออกแบบหน้าเว็บและแอพมาแรง ปี 2018 Part 1

ในปี 2018 มีการออกแบบหน้าจอผู้ใช้งานหรือ User Interface(UI) เกิดขึ้นอย่างมากมาย เราจึงทำการรวบรวม การออกแบบหน้าจอที่ผู้ใช้งานส่วนใหญ่นิยมชมชอบ มองแล้วมีความสะดวกสบาย น่าค้นหา และตอบโจทย์ผู้ใช้งาน
Full-Screen Background Images

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

ตัวอย่างหน้าจอ ของ Big City Guide ใช้รูปภาพเมืองที่มีชื่อเสียงโด่งดังอย่างเมืองเบอร์ลินเป็นภาพพื้นหลัง รวมกับทั้งเพิ่มข้อมูลของสถานที่ เพื่อนำเสนอให้ผู้ใช้งาน และช่วยให้ผู้ใช้สามารถจดจำสถานที่แห่งนี้ได้ง่ายขึ้น

นี่คือตัวอย่างโฮมเพจของเว็ปไซต์ที่ทำขึ้นสำหรับสตูดิโอออกแบบ ที่เชี่ยวชาญด้านการออกแบบทั้งภายนอกและภายใน จากรูปนี้มีการวางวัตถุและแบ่งสีเป็นสีต่าง ๆ วิธีนี้เป็นการเสนอบริการของสตูดิโอแห่งนี้แก่ลูกค้า
Several Interactive Layers
ผู้ออกแบบตั้งใจนำเสนอหน้าเว็ปสามารถตอบสนองต่อผู้ใช้งานได้ วิธีการจะเป็นการที่มีภาพซ้อนหลาย ๆ ชั้นเมื่อทำงานกับการเลื่อนจอ (scroll) ทำให้ผู้ใช้งานสามารถได้รับรู้ข้อมูลที่มากขึ้นและยังได้ประสบการณ์ใหม่ที่ไม่เหมือนใคร ๆ

นี่เป็นตัวอย่างของเว็ปไซต์การกุศลเกี่ยวกับการปกป้องมหาสมุทร เว็ปไซต์มีการปฎิสัมพันธ์ โดยนักออกแบบนี้ใช้ภาพ 2 ชั้น เมื่อทำการเลื่อนจอ ภาพจะขยับไปมา โดยทั่วไปแล้ววิธีนี้มักใช้ตัวหนังสือและรูปภาพเป็นเนื้อหาของข้อความ
Custom Digital Illustrations
ใช้ภาพกราฟิก วิธีการนี้ต้องการสื่อความหมายให้ผู้ใช้งานรับรู้อย่างเป็นธรรมชาติ ส่วนใหญ่จะมาในรูปของตัวมาสคอต(Mascots), ไอคอน และภาพประกอบ นอกจากนี้รูปภาพยังช่วยให้ขยายขอบเขตการรับรู้ของผู้ใช้ที่มีปัญหาด้านข้อความ เช่น เด็กก่อนวัยเรียน หรือเด็กที่มีความบกพร่องทางการเรียนรู้ หรือผู้มีความบกพร่องด้านการอ่าน

ภาพ Illustration เป็นภาพสำหรับบทความในบล็อก เป็นเทรนด์ที่กำลังได้รับความนิยมเพราะจะเพิ่มความสวยงามให้กับบล็อกหรือเว็ปไซต์ และความน่าอ่านให้มากขึ้น

ภาพ Illustration สำหรับบทความ 3C : Color(สี), Contrast(การตัดกัน) และContent(เนื้อหา)

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

หน้าเว็บไซต์ Digital Agency มีการเล่นกับคำว่า "Goals(เป้าหมาย)" จากภาพเราจะเห็นผู้เล่นบาสเก็ตบอลกำลังชู้ตบาสลงห่วง เต็มไปด้วยความมั่นใจและความแข็งแกร่ง ซึ่งจะสื่อถึงความมั่นใจในการใช้บริการเว็บไซต์นี้

แอพ Cuteen

การใช้ภาพกราฟิกขึ้นมาแบ่งหมวดหมู่ และการจัดเรียงเนื้อหา ทำให้แอพนี้มีเสน่ห์ มีการใช้เทคนิคทำให้ไอคอนกราฟิกดูเคลื่อนที่ เพื่อให้ผู้ใช้งานรู้สึกอยากจะปฎิสัมพันธ์กับแอพฯ
Storytelling with Character Design
การนำกราฟิกเพื่อมานำเสนอเรื่องราวของเว็ปไซต์และแอพต่าง ๆ อย่างตัวอย่าง ก็ใช้ตัวละครกราฟิกเพื่อเสนอนิทานเรื่องราว, สร้างบรรยากาศ, ส่งข้อความ หรือนำเสนอประโยชน์ของเนื้อหา ตัวละครที่สร้างขึ้นช่วยให้ เว็บปฎิสัมพันธ์กับผู้ใช้ในแง่ความเป็นมนุษย์มากขึ้น ทำให้เนื้อหาที่เรานำเสนอนั้นมีชีวิตชีวามากยิ่งขึ้น

ฟลอเรนซ์แอป เป็นแอปออนไลน์ที่พยาบาลสามารถหาสถานที่ทำงานและช่วงเวลาที่ทำงาน แล้วมีค่าตอบแทนสูงทั่วสหราชอาณาจักร โดยจะมีตัวละครสร้างการบอกเล่าเรื่องราวและประโยชน์ของแอปนี้

แนวคิดการออกแบบของแอปนี้ คือการบริการช่วยให้ผู้ใช้สามารถหาที่พักริมทะเล ภาพประกอบนำเสนอบรรยายกาศแห่งการพักผ่อน

ภาพประกอบนี้: อุทิศให้กับวันมะเร็งโลก มีการทำเครื่องหมายทั่วโลกในวันที่ 4 กุมภาพันธ์. สโลแกนสำหรับปีนี้คือ "เราทำได้ ฉันสามารถ " โดยนักออกแบบจะแสดงให้เห็น เส้นทางแห่งความไม่ยอมแพ้ของคนไข้ ญาติและแพทย์ จนไปสู่หนทางการที่คนไข้นั้นสามารถกลับมาใช้ชีวิตได้อย่างปกติ

ภาพประกอบชุดเคลื่อนไหวนี้เป็นตัวอย่างการทำงานของแอปเครือข่ายสังคม โดยมีพื้นฐานจากการเล่าเรื่อง มีจุดมุ่งหมายเพื่อแสดงขั้นตอนและลักษณะการทำงานของแอป โดยนำเสนอให้สนุกสนาน

จบแล้วครับสำหรับ PT.I (Part1) โปรดติดตามชมตอนต่อไป~
Complete Web & App Design Course - UX, UI and Design Thinking With Big Data Bootcamp
เรียนรู้ หัวใจหลักสำคัญของการทำ Product ด้วย UX และ UI
การออกแบบโดยใช้ Concept ของ Design Thinking
นำข้อมูลที่ได้มาพัฒนา Product อย่างสม่ำเสมอ โดยใช้ Concept ของ Big Data
รายละเอียดเพิ่มเติมและสมัครที่นี่
หลักสูตรยาว 12 ครั้ง รวมเวลากว่า 72 ชั่วโมง จบมาทำงานได้จริง
ราคาคุ้มค่าที่สุด ตอนนี้มี promotion มา 2 คนลดเพิ่ม 10% 3 คนลดเพิ่ม 15%
สามารถขอ code ส่วนลดได้ที่ page LEAN upskill

ภาษาอังกฤษสำหรับคนทำงานด้าน IT ตอนที่ 3 : ทักษะและความสามารถ (Skills and Abilities)

ภาษาอังกฤษสำหรับคนทำงานด้าน IT ตอนที่ 3 : ทักษะและความสามารถ (Skills and Abilities)

ต่อเนื่องจากตอนที่ 2 ที่เราได้แนะนำตัวเกี่ยวกับประสบการณ์การทำงาน ในตอนที่ 3 เราจะกล่าวถึงทักษะและความสามารถที่เรามี ซึ่งเป็นประโยชน์อย่างมากในการแนะนำตัวในวงการไอที

(more…)