เข้าใกล้ขั้นตอนการออกแบบเว็บไซต์จากเบราว์เซอร์

“นี่สำหรับคนบ้า คนไม่ปกติ พวกกบฏ คนสร้างปัญหา หมุดกลมในรูสี่เหลี่ยม… คนที่มองสิ่งต่าง ๆ - พวกเขาไม่ชอบกฎ… คุณสามารถอ้างถึงพวกเขา ไม่เห็นด้วยกับพวกเขา ยกย่องหรือ กล่าวร้ายพวกเขา แต่สิ่งเดียวที่คุณทำไม่ได้คือเพิกเฉยเพราะพวกเขาเปลี่ยนแปลงสิ่งต่าง ๆ…” - แคมเปญ Think Different ของ Apple, Steve Jobs, 1997

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

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

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

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

ทำไม? เมื่อมีส่วนร่วมในโครงการออกแบบเว็บไซต์ที่ตอบสนองด้วยความซับซ้อนทั้งหมด นักออกแบบมักจะไม่มีเวลาสร้างการออกแบบคงที่ขององค์ประกอบเดียว (สมมติว่าเป็นส่วนหัวหรือส่วนท้าย) ในความละเอียดและวิวพอร์ต 10 แบบที่แตกต่างกัน แม้จะออกแบบเฉพาะอุปกรณ์ที่ได้รับความนิยมสูงสุด แต่ก็ยังต้องพิจารณาหน้าจอ 4-5 จอที่มีอัตราส่วนกว้างยาว ความหนาแน่นของหน้าจอ และขนาดหน้าจอต่างกัน ไม่มีงานเล็ก ๆ ที่จะพูดน้อย

การแก้ปัญหาการออกแบบเว็บไซต์ด้วยปากกาและกระดาษก่อน

มาสำรวจแนวทางการออกแบบเว็บไซต์และขั้นตอนการวางแผนที่แตกต่างกันกัน

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

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

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

Wireframing และการสร้างต้นแบบ

การสร้างต้นแบบเป็นขั้นตอนต่อไปในกระบวนการออกแบบเว็บไซต์ การสร้าง wireframes อย่างรวดเร็วเพื่อพูดคุยเกี่ยวกับเค้าโครงหน้า ฟังก์ชันการทำงาน และลักษณะของหน้าเว็บไซต์ในอุปกรณ์ต่างๆ เป็นการเริ่มต้นที่ดี ใช้เวลาไม่นานในการสร้างโครงร่างหลายสิบแบบของเทมเพลตและส่วนประกอบต่างๆ สามารถสร้างต้นแบบเว็บไซต์อย่างง่ายได้จากสิ่งเหล่านี้ และขึ้นอยู่กับความซับซ้อนของโครงการ คุณสามารถใช้เครื่องมือสร้างต้นแบบเช่น InVision, Adobe XD, Balsamiq, Moqups หรือ Axure

Mood Board และอินเทอร์เฟซสินค้าคงคลัง

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

เมื่อสิ่งประดิษฐ์ต่างๆ ได้รับการอนุมัติ เช่น โครงลวด ต้นแบบ ม็อคอัพ มูดบอร์ด ฯลฯ ควรทำอินเทอร์เฟสสินค้าคงคลัง

สินค้าคงคลังอินเทอร์เฟซคือคอลเลกชันที่ครอบคลุมของบิตและชิ้นส่วนที่ประกอบขึ้นเป็นอินเทอร์เฟซของคุณ

แบรด ฟรอสต์

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

การออกแบบในเบราว์เซอร์

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

ด้วยการมุ่งเน้นไปที่ HTML mockup และการทดสอบแนวคิดการออกแบบ "ในเบราว์เซอร์" ด้วย CSS เวลามักจะใช้ในการสร้างแบบจำลองคงที่ของหน้าในเครื่องมือการออกแบบอื่น ๆ เช่น Sketch สามารถบันทึกได้ เป็นความคิดที่ดีที่นักออกแบบควรใช้โปรแกรมแก้ไขโค้ดที่ดีและคิดวิธีการรีเฟรชเบราว์เซอร์ที่ดี เพื่อให้สามารถเห็นการเปลี่ยนแปลงในแบบเรียลไทม์ ตัวอย่างเช่น Sublime Text และ Codekit เป็นส่วนผสมที่ลงตัว

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

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

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

ต้องการลองใช้ชุดรูปแบบสีของส่วนหัวอื่นหรือไม่? ด้วยการทำงานกับโค้ด CSS เพียงไม่กี่บรรทัด การเปลี่ยนแปลงจะปรากฏบนเทมเพลต HTML ทั้งหมดทันที บนอุปกรณ์และหน้าจอทั้งหมด ความยืดหยุ่นแบบนั้นไม่สามารถจำลองได้ง่ายๆ เมื่อคุณมี 20 ม็อคอัพคงที่ จริงอยู่ที่ คุณสามารถใช้ “สัญลักษณ์” ใน Sketch หรือ Adobe XD สำหรับส่วนประกอบที่นำกลับมาใช้ใหม่ได้ แต่สิ่งเหล่านี้ไม่ได้มีความอเนกประสงค์เท่ากับ CSS

ในขั้นตอนนี้ จะต้องมีการตัดสินใจทางเทคนิคหลายอย่าง คำถามที่จะต้องตอบคือ:

• คุณจะใช้ตัวประมวลผลล่วงหน้า CSS หรือไม่ (ที่แนะนำ)
• คุณจะใช้กริดแบบตอบสนองประเภทใดสำหรับเลย์เอาต์
• แบบอักษรที่คุณต้องการใช้พร้อมสำหรับการซื้อหรือไม่ ลูกค้ามีงบประมาณสำหรับฟอนต์เว็บระดับพรีเมียมหรือไม่ หรือคุณจะเปลี่ยนกลับไปใช้ฟอนต์เว็บฟรีที่มีอยู่หรือไม่?
• คุณจะใช้ไอคอนหลากสีหรือสีเดียวหรือไม่? ขนาดจะแตกต่างกันไปทั่วทั้งไซต์หรือไม่? ต่อไปนี้ คุณใช้ไอคอนที่วาดเองหรือชุดไอคอนที่มีอยู่แล้วหรือไม่ ไอคอนของคุณจะต้องรองรับขนาดใด

ปัญหากับแบบอักษรและการออกแบบเว็บที่ตอบสนอง

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

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

ไอคอนที่เข้ากับสไตล์ของแบรนด์

หากการวาดไอคอนแบบกำหนดเอง จะต้องกำหนดขนาด ตาราง และรูปแบบ การทำงานใน Illustrator ทุกอาร์ตบอร์ดจะแสดงไอคอนเดียว ตัวอย่างเช่น คุณสามารถส่งออกไอคอนจาก Illustrator เป็น SVG หรือ PNG ได้อย่างง่ายดาย ซึ่งภายหลังสามารถเปลี่ยนเป็นแบบอักษรของไอคอนด้วยบริการต่างๆ เช่น Icomoon ขอแนะนำให้ใช้ไอคอนเวกเตอร์ (SVG) เนื่องจากเวกเตอร์ไม่มีความละเอียด ดังนั้นจึงไม่ต้องกังวลว่าจะแสดงบนหน้าจอความละเอียดสูง (เรตินา) อย่างไร

คู่มือสไตล์และ CSS เพื่อให้กระบวนการออกแบบเว็บไซต์อยู่ในการตรวจสอบ

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

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

ด้วย CSS แนวทางปฏิบัติที่ดีที่สุดในการแยกรูปแบบส่วนประกอบออกเป็นไฟล์แยกกัน ตัวอย่างเช่น การจัดรูปแบบการแบ่งหน้าจะอยู่ใน _pagination.scss องค์ประกอบรูปแบบใน _form.scss และไฟล์ทั้งหมดเหล่านี้จะรวมอยู่ในไฟล์ SCSS ไฟล์เดียวกับไฟล์อื่นๆ (ตัวแปร มิกซ์อิน ฯลฯ)

แม้ว่า style.scss อาจประกอบด้วย "ไฟล์ขนาดเล็ก" หลายสิบไฟล์ เมื่อมีหลายคนทำงานในโปรเจ็กต์เดียวกัน การติดตามการเปลี่ยนแปลงจะง่ายกว่า (ไม่ว่าจะใช้ซอร์สคอนโทรลหรือไม่ก็ตาม) หากทุกอย่างถูกแยกเป็นส่วนย่อยๆ สิ่งสำคัญคือต้องรักษาคู่มือสไตล์ต่อไปหลังจากที่โครงการออกแบบเว็บไซต์อยู่ในระหว่างการผลิต เนื่องจากทีมจะต้องติดตามทุกองค์ประกอบของไซต์

การใช้สไตล์ชีต – Modular CSS

จากจุดยืนของการพัฒนา มีหลายวิธีในการเขียน CSS แบบแยกส่วน ที่รู้จักกันดีที่สุดคือ SMACSS (Scalable and Modular Architecture for CSS), BEM (Block, Element, Modifier) ​​และ OOCSS (Object Oriented CSS ) มีจำนวนพอสมควรในการเรียนรู้ แม้ว่าคุณจะลงเอยด้วยการพัฒนาแนวทางของคุณเองก็ตาม ณ จุดนี้ คุณควรมีคอลเลกชันส่วนประกอบ UI และหน้าเว็บที่ดี ซึ่งจะช่วยให้คุณสามารถสร้างหน้าเว็บใหม่ได้อย่างง่ายดาย คุณสามารถคัดลอกและวางองค์ประกอบจากคู่มือสไตล์ และจัดเรียงใหม่ได้ตามต้องการ

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

อะไรต่อไป? การออกแบบในเบราว์เซอร์

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

ไม่แน่ใจว่าการเปลี่ยนแปลงเฉพาะจะส่งผลต่อการออกแบบอย่างไร ตอนนี้คุณสามารถดูตัวอย่างการออกแบบของคุณบนอุปกรณ์และเบราว์เซอร์ต่างๆ พร้อมกันเพื่อดูว่าฟอนต์เปลี่ยนไปอย่างไรในส่วนหัว หรือการเปลี่ยนขนาดและสีของปุ่มจะส่งผลต่อการออกแบบ

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

การทำงานกับ HTML และ CSS และการทำงานในเบราว์เซอร์อาจไม่เหมาะกับนักออกแบบทุกคนในระหว่างกระบวนการออกแบบเว็บไซต์ แต่ถ้านักออกแบบสนใจจริง ๆ ว่างานของพวกเขาจะออกมาเป็นอย่างไรบนอุปกรณ์และขนาดหน้าจอต่างๆ พวกเขาจำเป็นต้องตรวจสอบให้แน่ใจว่างานนั้นสมบูรณ์แบบทุกครั้ง สิ่งที่ดูน่าทึ่งในฐานะม็อคอัพการออกแบบคงที่อาจดูไม่เป็นที่ต้องการเมื่อดูในเว็บเบราว์เซอร์บนอุปกรณ์มือถือ นักออกแบบที่เก่งกาจจะต้องสร้างและทดสอบการออกแบบเว็บในสภาพแวดล้อมที่ทุกคนจะได้เห็นพวกเขา...ในเบราว์เซอร์

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• การออกแบบที่ตอบสนอง – แนวปฏิบัติและข้อควรพิจารณาที่ดีที่สุด
• วิธีการออกแบบหน้า Landing Page ที่มีประสิทธิภาพ
• สุดยอดคู่มือการออกแบบเว็บไซต์อีคอมเมิร์ซ
• พื้นฐานของการออกแบบเว็บไซต์ใหม่ – กรณีศึกษา
• แรงผลักดันของการออกแบบ – กรณีศึกษาการออกแบบเว็บไซต์ใหม่