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

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

1. นักออกแบบเว็บไซต์ต้องการความรู้อะไรบ้าง
โดยทั่วไป สำหรับผู้เริ่มต้น ฉันขอแนะนำให้คุณอ่านเนื้อหาที่เหมาะสม ในการเริ่มต้น คุณเพียงแค่ต้องเลื่อนดูในแนวทแยง หยุดในช่วงเวลาที่ชัดเจน ในระยะแรก สิ่งสำคัญคือต้องเข้าใจ "สิ่งที่อยู่บนหิ้งใด" โครงสร้างทางทฤษฎีทั่วไปคืออะไร และหลังจากนั้น ค่อยๆ หันไปหาเธอเพื่อขอคำอธิบายโดยละเอียดเพิ่มเติมเกี่ยวกับปัญหาเฉพาะด้วยการศึกษาและทำความเข้าใจเนื้อหาอย่างลึกซึ้งยิ่งขึ้น นั่นคือในความเป็นจริงมันควรจะเป็นหนังสือเรียนที่ใช้งานได้ซึ่งควรอยู่ใกล้มือเสมอ

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

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

2. โปรแกรมอะไรที่ต้องเชี่ยวชาญ
เรื่องนี้ผมยึดหลักความมินิมอล ฉันเชื่ออย่างจริงใจว่าในการออกแบบปกติก็เพียงพอที่จะรู้ อย่างไรก็ตาม โปรแกรมนี้ไม่ควรเชี่ยวชาญในระดับเริ่มต้น ดังนั้นคุณต้องใช้เวลาศึกษามัน โปรแกรมอื่นๆ ทั้งหมดเป็นตัวเลือก สำหรับการจัดวาง Notepad มาตรฐานก็เพียงพอแล้ว

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

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

ดังนั้นเราจึงสามารถพูดได้ว่าหลังจากการฝึกอบรมประมาณ 4-5 เดือน ทักษะการออกแบบที่ค่อนข้างแข็งแกร่งและความเข้าใจที่เพียงพอเกี่ยวกับกระบวนการออกแบบก็ปรากฏขึ้นแล้ว แต่แน่นอนว่าโดยมีเงื่อนไขว่าในช่วงเวลานี้คุณจะต้องศึกษาด้วยตัวเอง ฝึกฝน ศึกษาทฤษฎี ลอง

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

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

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

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

แต่ฉันคิดว่ามีวิธีที่มีประสิทธิภาพมากกว่า ให้ความสนใจกับฟอรัม SEO พวกเขาเป็นพวกชอบเคลื่อนที่และต้องการหน้า Landing Page, splogs หรือฟีด PPS อยู่เสมอ จึงค่อนข้างสนใจบริการออกแบบ ฟอรัมหลักเกือบทุกฟอรัมมีส่วน "การออกแบบ" ศึกษาส่วนนี้อย่างรอบคอบดูว่ามีงานใดบ้างที่ขายในราคาเท่าไร ทำสิ่งที่คล้ายกันและวางขายที่นั่น ฉันทำอย่างนั้นในเวลานั้น

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

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

9. กลไกการปฏิบัติตามคำสั่งซื้อคืออะไร
ปฏิสัมพันธ์ของฉันกับลูกค้ามีดังนี้ ขั้นแรก ฉันได้รับเงื่อนไขการอ้างอิง (TOR) จากลูกค้า จากนั้นในบางครั้ง (โดยปกติตั้งแต่สามวันขึ้นไปขึ้นอยู่กับความซับซ้อน) ฉันทำงานและจัดเตรียมเลย์เอาต์ไซต์ใน jpeg ให้กับลูกค้า โดยปกติจะเป็นหน้าหลัก หน้าโพสต์ และหน้าช่วยเหลือ บางครั้งหน้าหลักก็เพียงพอแล้ว แต่ต้องตกลงกับลูกค้าล่วงหน้า

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

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

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

ตัวเลือกของบรรณาธิการ

เรียนรู้การออกแบบเว็บตั้งแต่เริ่มต้น คำแนะนำทีละขั้นตอนสำหรับผู้เริ่มต้น (สิบขั้นตอน)

คนหนุ่มสาวจำนวนมากต้องการเชื่อมโยงอาชีพในอนาคตกับการพัฒนาเว็บไซต์ แน่นอนว่าไม่ใช่ทุกคนที่อยากเป็นโปรแกรมเมอร์ บางคนค่อนข้างพอใจกับการออกแบบเว็บไซต์

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

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

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

เนื้อหา:

ขั้นตอนที่หนึ่ง - ค้นหาว่าทำไมคุณถึงต้องการทำ

ในแง่หนึ่ง นี่เป็นคำถามง่ายๆ เพราะคนส่วนใหญ่อยากทำเว็บดีไซน์เพราะได้ค่าตอบแทนดี

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

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

และเหตุผลประการที่สามที่ทำให้ผู้คนสนใจการออกแบบเว็บไซต์ก็คือความดึงดูดใจต่องานศิลปะ

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

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

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

ถ้าก่อนหน้านี้คนต้องทำเพจให้สวยถูกใจ ตอนนี้ ต้องมีทักษะการเขียนโค้ด เข้าใจการตลาด เข้าใจการทำ SEO

หากไม่มีวิธีแก้ปัญหาเฉพาะ แนวคิดดั้งเดิม และวิธีการสร้างสรรค์ของแต่ละคน งานก็จะไม่สามารถแก้ไขได้

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

งานของคนเหล่านี้รวมถึง:

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

ดังนั้นเราจึงพบโดยสังเขปว่าทำไมผู้คนถึงต้องการจัดการกับส่วนกราฟิกของเว็บไซต์

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

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

ขั้นตอนที่สอง - เลือกทิศทางการออกแบบเว็บที่คุณต้องการลองด้วยตัวเอง

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

วันนี้พวกเขาแยกแยะ มากถึงเจ็ดทิศทางในการออกแบบและนี่เป็นเพียงทิศทางหลักเท่านั้น

แข็ง

เก่าเหมือนการสร้างเว็บไซต์ประเภทการออกแบบหน้าง่ายดาย เหมาะสำหรับผู้เริ่มต้น

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

หน้าดังกล่าวจะมีลักษณะเหมือนกันทุกประการในทุกอุปกรณ์ โดยไม่คำนึงถึงแพลตฟอร์มและขนาดหน้าจอ

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

ยืดหยุ่นได้

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

ความท้าทายของการออกแบบนี้คือ:

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

รวม

รวมสองวิธีก่อนหน้านี้: หากขนาดจอภาพ (อัตราส่วนกว้างยาว) แตกต่างจากพารามิเตอร์การแสดงผลที่ใช้เมื่อสร้างไซต์มาก จะมีการใช้การออกแบบที่ยืดหยุ่น มิฉะนั้นจะใช้ทั้งสองเซลล์ ทั้งนี้ขึ้นอยู่กับความพร้อมใช้งานของพื้นที่ว่างในเซลล์เหล่านั้น

ข้อความ

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

การพิมพ์

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

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

อินเตอร์เฟซ

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

พลวัต

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

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

ขั้นตอนที่สาม - ค้นหาว่าโปรแกรมออกแบบเว็บใดกำลังได้รับความนิยมในขณะนี้

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

อย่างไรก็ตาม, จำเป็นต้องมีความรู้เกี่ยวกับตารางเรียงซ้อนและไฮเปอร์เท็กซ์มาร์กอัปเป็นอันดับแรก

คุณต้องมีนักออกแบบและมีความรู้ในสาขานี้ แอนิเมชั่นคอมพิวเตอร์เป็นที่นิยม SEO และอาจเป็นการสร้างแบบจำลอง 3 มิติ

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

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

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

อย่าลืมเลือกอันที่สะดวกที่สุดที่รองรับไวยากรณ์และการเน้น: , Sublime , Axure RP

ขั้นตอนที่สี่ - สำรวจหนังสือที่เป็นประโยชน์สำหรับนักออกแบบเว็บไซต์ที่ต้องการ

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

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

การเรียนรู้การออกแบบเว็บตั้งแต่เริ่มต้นควรเริ่มต้นด้วยวรรณกรรม ที่ให้แนวคิดพื้นฐาน ทฤษฎี และงานปฏิบัติเล็กๆ น้อยๆ:

องค์ประกอบหลักคือ:

โลโก้- ตามกฎแล้วใช้ส่วนกลางของหน้าและแยกทรัพยากรออกจากส่วนอื่น ๆ

องค์ประกอบการนำทาง- วางไว้ที่ด้านบนของหน้าในแนวนอน ไม่บ่อยนัก - ในแนวตั้งและมีลิงก์ไปยังส่วนหลัก

บล็อกหลักที่วางเนื้อหา- ตรงบริเวณส่วนหลักของหน้าจอ ข้อความจะมาพร้อมกับตัวเลข ตาราง ไดอะแกรม ภาพเคลื่อนไหว ฯลฯ เสมอ

ตารางโมดูลาร์

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

การใช้งาน ตารางโมดูลาร์ทำให้เลย์เอาต์เพิ่มเติมง่ายขึ้นอย่างมากใช้เวลาในการทำความรู้จักกับเธอ

ขั้นตอนที่หก - การฝึกอบรมออนไลน์

• เข้าร่วมสัมมนาและฝึกอบรม
• การเข้าร่วมการฝึกอบรมออนไลน์ (ทางไกล)

เลือกชั้นเรียนที่เหมาะสมตามความรู้ ประสบการณ์ และทิศทางที่คุณตระหนักถึงศักยภาพในการสร้างสรรค์ของคุณ ในระหว่างหลักสูตร การรวมทฤษฎีเข้ากับการปฏิบัติเป็นสิ่งที่มีเสน่ห์

1 บทเรียนการออกแบบเว็บไซต์สำหรับผู้เริ่มต้น

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

ขั้นตอนที่เจ็ด - ค้นหาคนที่มีใจเดียวกัน

ในชีวิตการทำงานของคุณ สิ่งสำคัญคือต้องสื่อสารกับผู้คนที่กำลังทำในสิ่งที่คุณกำลังทำอยู่

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

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

ขั้นตอนที่แปด - ติดตามแนวโน้มและแนวโน้ม

เพื่อให้พร้อมสำหรับทุกสิ่งเมื่อต้องทำงานกับลูกค้าในพื้นที่ที่ไม่มีผลิตภัณฑ์ใหม่ๆ ในแต่ละวัน คุณต้องติดตามการพัฒนา โซลูชัน และเทคโนโลยีใหม่ๆ อย่างต่อเนื่อง

พวกเขาเปลี่ยนให้ดีขึ้นและเพิ่มประสิทธิภาพการโหลดทรัพยากรและเพิ่มความน่าดึงดูดทางอารมณ์ของหน้า

วิธีที่ง่ายที่สุดในการเยี่ยมชมแหล่งข้อมูล ที่ซึ่งนักออกแบบที่มีประสบการณ์และไม่มีประสบการณ์นำผลงานของพวกเขามาจัดแสดง:

ด่านที่เก้า - ลองใช้การแลกเปลี่ยนอิสระ

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

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

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

ให้ความสำคัญกับการกรอกโปรไฟล์และราคาสำหรับงาน

เลย์เอาต์ที่เรียบง่าย แต่คำนึงถึงใจสามารถขายได้โดยยึดตามโครงการที่คล้ายกันที่เสนอขาย

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

ขั้นตอนที่สิบ - เปลี่ยนการออกแบบเว็บไซต์จากงานอดิเรกเป็นอาชีพ

การออกแบบเว็บไซต์มักจะเริ่มต้นโดยนักเรียนและคนหนุ่มสาว ซึ่งกิจกรรมนี้กลายเป็นงานอดิเรก

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

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

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

ข้าว. 15 – เมื่อเวลาผ่านไป การออกแบบเว็บไซต์ควรกลายเป็นอาชีพ

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

เมื่อเวลาผ่านไป ความรู้ ประสบการณ์ และคำสั่งถาวรจะปรากฏขึ้น

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

สิ่งสำคัญคือต้องพยายามให้ดีขึ้น พัฒนาอย่างต่อเนื่อง และสนุกกับสิ่งที่คุณทำ!

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

วันนี้ฉันจะบอกคุณถึงวิธีการเป็นนักออกแบบเว็บไซต์และไม่หลงทางในข้อมูลจำนวนมาก หากคุณมีศรัทธาในตัวเองและปรารถนาที่จะเรียนรู้ บทความนี้เหมาะสำหรับคุณ!

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

การออกแบบเว็บคือ...

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

คุณปู่วัย 87 ปี;

ไม่มีประสบการณ์ที่เกี่ยวข้องและ/หรือการศึกษา

คุณไม่สามารถวาดได้

ไม่ได้เป็นเจ้าของคอมพิวเตอร์

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

ข้อกำหนดสำหรับนักออกแบบเว็บไซต์

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

ดังนั้น งานหลักของผู้เชี่ยวชาญด้านการออกแบบเว็บไซต์คือ:

ดึงความสนใจของผู้ใช้มาที่ข้อดีของบริษัท

เน้นข้อมูลสำคัญเกี่ยวกับผลิตภัณฑ์ บริการ องค์กร

มีเหตุผลที่จะนำผู้เข้าชมให้ซื้อหรือดำเนินการอื่น

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

จะเริ่มศึกษาด้วยตนเองได้ที่ไหน? 5 ขั้นตอนสู่ความสำเร็จ

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

2. ทำตามความสนใจภายในของคุณ ฟังตัวเองและพยายามเข้าใจว่าสิ่งใดทำให้คุณพึงพอใจในงานชิ้นนี้หรืองานนั้น สิ่งที่น่าสนใจที่สุดสำหรับคุณ

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

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

หากต้องการผ่านด่านนี้ให้สำเร็จ ให้ลืมเรื่องที่คุณกำลังวาด คิดเฉพาะสัดส่วนและตำแหน่งของมันในอวกาศ

หากคุณไม่เชื่อในความแข็งแกร่งของตัวเอง ให้กูเกิลดูชีวประวัติของศิลปิน Matisse, Paul Gauguin, Moses, Adolphe Bouguereau ซึ่งเริ่มวาดภาพในวัยผู้ใหญ่

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

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

ในการรับงานของคุณเองคุณไม่จำเป็นต้องทำโครงการจริงให้เสร็จ คุณสามารถสร้างภาพร่างเว็บไซต์ อินเทอร์เฟซแอปพลิเคชัน โลโก้ของบริษัทในท้องถิ่นของคุณเองได้

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

อินเทรนด์และพัฒนา แม้ว่าคุณจะมีพรสวรรค์อย่างล้นหลามในฐานะศิลปิน คุณก็ยังจำเป็นต้องรู้สิ่งต่างๆ เช่น กราฟิกแรสเตอร์และเวกเตอร์, CMYK และ RGB, หลักการของ Adaptive, Flat และ Material Design, เครื่องมือ Photoshop

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

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

อย่างไรก็ตาม โปรดจำไว้ว่าการออกแบบเว็บไซต์เป็นสาขาที่ไม่สามารถศึกษาได้เฉพาะทางทฤษฎีเท่านั้น ยิ่งมีประสบการณ์จริงยิ่งดี

ตลาดสมัยใหม่ทิ้งร่องรอยไว้ในอาชีพ "นักออกแบบเว็บไซต์" ในช่วงสองสามปีที่ผ่านมา มีแนวโน้มไปสู่โครงสร้างเว็บไซต์ที่เรียบง่ายและเรียบง่าย โดยไม่มีแบบอักษรแปลกใหม่ "ruffles" เงา ฯลฯ ที่ความนิยมสูงสุด ยังมีการพิมพ์ขนาดใหญ่ ภาพพื้นหลังแบบเต็มความกว้าง และแบบแฟลตดีไซน์ (Flat Style)

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

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

คุณยังสามารถเรียนรู้เกี่ยวกับ Illustrator ได้ แต่นั่นไม่สำคัญเท่าในตอนแรก แต่แน่นอนว่ามันจะมีประโยชน์!

ฉันยังแนะนำให้คุณทำความคุ้นเคยกับวิธีต่างๆ ในการสร้างเว็บไซต์ตั้งแต่เนิ่นๆ ตัวอย่างเช่น WordPress และ Tilda นี่คือเครื่องมือสร้างไซต์

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

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

นี่คือข้อมูลที่ดีเกี่ยวกับวิธีการเขียนในรูปแบบข้อมูล (ท้ายที่สุดแล้วน่าจะเป็นนักออกแบบเว็บไซต์ที่จะต้องเขียนข้อความบนเว็บไซต์) soviet.glvrd.ru

สำหรับเลย์เอาต์ - มีนักออกแบบเลย์เอาต์และมีนักออกแบบเว็บไซต์ และนี่ไม่ใช่สิ่งเดียวกัน! คุณสร้างเลย์เอาต์ใน Photoshop ตัวออกแบบเลย์เอาต์กำลังทำงานกับ html / css โดยตรงอยู่แล้ว

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

ในบริษัทขนาดเล็ก การออกแบบและเลย์เอาต์สามารถทำได้โดยคนๆ เดียว แต่ในบริษัทขนาดใหญ่ คนสองคนนี้แตกต่างกัน นอกจากนี้ยังมีนักพัฒนา - พวกเขาทำงานกับภาษาโปรแกรม - PHP หรือ JavaScript

ฉันหวังว่าคำตอบของฉันจะช่วยคุณได้ - ถ้ามีอะไรให้เขียน :)

นักออกแบบเว็บไซต์สร้างการออกแบบผลิตภัณฑ์สำเร็จรูป - ไซต์ ดังนั้นต้องรู้สึกถึงคุณลักษณะของสภาพแวดล้อมและเป็นเจ้าของเครื่องมือ ตามประสบการณ์:

1. คุณต้องเข้าใจเป็นอย่างดีว่าความสามารถในการใช้งานและการเข้าถึงคืออะไร บางคนคิดว่าความสามารถในการใช้งานสามารถปลูกลงในไซต์ได้สองนาทีก่อนการยอมจำนน ในความเป็นจริง ความสามารถในการใช้งานควรมีอยู่แล้วในเทมเพลตและแม้แต่ในม็อคอัพ มีหนังสือคลาสสิกและบทความดีๆ
2. ทำความเข้าใจว่าอะไรคือความสมดุล ความคมชัดของตัวอักษร การรวมเป็นหนึ่งด้วยระยะห่างและการออกแบบ ควรมีอากาศเพียงพอในการออกแบบ - พื้นที่ว่าง แต่ไม่ควรมีคนแคระลากกัลลิเวอร์ - ข้อความขนาดเล็กที่มีช่วงเวลาเล็ก ๆ ถัดจากรูปม้าและพื้นที่ว่างขนาดยักษ์ - ด้วยเหตุผลบางประการนี่เป็นโรคของนักออกแบบหลายคนในพื้นที่กว้างใหญ่ของ อดีตสหภาพโซเวียต การกดทุกอย่างให้แน่นโดยแทบไม่มีขอบนั้นดีกว่า แต่อ่านไม่ค่อยออกและมักจะดูเหมือนสวัสดีจากปี 1998 คุณต้องรู้สึกถึงสิ่งเหล่านี้และได้รับประสบการณ์และรสชาติ
3. พยายามอย่างต่อเนื่องที่จะเชี่ยวชาญและรู้สึกว่าความเรียบง่ายคืออะไร สิ่งสำคัญ! อ่านบทความเกี่ยวกับอันตรายของความเรียบง่าย
4. รู้พื้นฐานของเลย์เอาต์ CSS อย่างน้อยแบบลอยตัว ควรใช้กริดและเฟล็กซ์ คุณจะต้องใช้สิ่งนี้เพื่อใช้วิธีแก้ปัญหาที่สวยงามซึ่งสามารถเรียงพิมพ์ได้และหลีกเลี่ยงเค้าโครงที่แทบจะเป็นไปไม่ได้ที่จะเรียงพิมพ์โดยไม่จำเป็น ห้ามใช้ JavaScript ในการจัดวาง (ตรงตามแบบ.)
5. ทราบข้อมูลพื้นฐานเกี่ยวกับองค์ประกอบและรูปแบบอินเทอร์เฟซ - แท็บ แซนวิช องค์ประกอบฟอร์ม ตัวเลือกยอดนิยมสำหรับการแสดงข้อผิดพลาดในการกรอกฟอร์ม แถบความคืบหน้าและการเปลี่ยนเมื่อเปลี่ยนสถานะ แผนที่ หมุด หน้าต่างและไอคอน รายการที่กรอง พื้นที่ค้นหาที่เพิ่มขึ้น ไม่จำเป็นต้องทำได้ แต่คุณต้องได้รับคำแนะนำ
6. รู้ทฤษฎีสีเบื้องต้น เข้าใจว่าสีคู่ตรงข้ามคืออะไร เฉดสีควรต่างกันมากน้อยเพียงใดเพื่อให้เข้าใจได้ง่ายขึ้น
7. รู้จักแนวโน้มที่สำคัญที่สุดของทศวรรษ: ตัวละคร, RWD, Mobile First, ความนอกรีตทุกประเภท เช่น การเลื่อนพารัลแลกซ์และเพจเจอร์พารัลแลกซ์ หากเทรนด์นั้นล้าสมัยไปแล้ว อย่าอาย: การสร้างไซต์ที่มีสไตล์ตามเทรนด์ของปีที่แล้วย่อมดีกว่าไม่มีใครสนใจอะไรเลย

ความรู้สึกของสัดส่วนและรสชาติ
เครื่องมือ:

เครื่องมือแก้ไขเวกเตอร์ที่มีองค์ประกอบเป็นศูนย์กลางเช่น Sketch

8. คุณสามารถใช้เครื่องมือสร้างต้นแบบ - ค่อนข้างดั้งเดิม แต่เข้าถึงได้ทางเว็บ
9. โปรแกรมแก้ไขเวกเตอร์เช่น Illustrator บางคนถึงกับใช้ InDesign
10. ทักษะการรีทัชภาพเบื้องต้น
    ไม่จำเป็น:

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

อะไรไม่จำเป็น:

รู้วิธีการถ่ายภาพ

มันเจ๋งที่จะพิมพ์ได้

สามารถเขียนโปรแกรม เขียนแผงผู้ดูแลระบบ และสร้างเว็บแอปพลิเคชันได้

ที่จะข่มทุกคนด้วยสติปัญญาและความอวดดี.

หวังว่าจะช่วยได้

"อาการ" แรกของนักออกแบบ:

1. คุณโฉบเฉี่ยวมาก ป้ายบอกทาง ในเมืองดูเป็นอย่างไรคุณสนใจที่จะดูพวกเขา ดูที่โลโก้ และเปรียบเทียบกัน
2. เมื่อดูที่ปกนิตยสาร คุณคิดว่าทำไมคุณถึงชอบ ในขณะที่อีกเล่มหนึ่งมีแต่ความขยะแขยง
3. บนอินเทอร์เน็ต คุณเปรียบเทียบเว็บไซต์ตลอดเวลา: ทำไมไซต์นี้ถึงเจ๋ง (มีแบบอักษรและรูปถ่ายที่เท่ห์) แต่ไซต์เช่น "Moskovsky Komsomolets" นั้นไม่โอเคเลย
4. หากคุณสงสัยมากขึ้นเรื่อยๆ ใครคือคนเหล่านี้ที่ทำเว็บไซต์ แบนเนอร์ โลโก้พยายามที่จะเข้าไปแล้วก็ถึงเวลาแล้ว ... ถึงเวลาแล้วที่จะต้องเข้าสู่การออกแบบเว็บในที่สุด ทางเลือกที่ดี นักออกแบบเว็บไซต์สามารถรับได้ตั้งแต่ 100,000 รูเบิลต่อเดือน

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

1)ดาวน์โหลด Photoshop หรือเปิด Figma. แต่อีกครั้งมีความคิดเห็นที่ล้าสมัยว่าเราต้องการ Photoshop เพื่อเริ่มต้น นี่เป็นผลิตภัณฑ์ที่ค่อนข้างเก่า ดังนั้นสำหรับการออกแบบเว็บสมัยใหม่นั้นล้าสมัยไปแล้วเล็กน้อย หากคุณมี MacBook ให้ลองใช้ Sketch

2) สมัครสมาชิกเพื่อออกแบบบล็อกและสาธารณะบน VK.com. สตูดิโอออกแบบขนาดใหญ่มักมีบล็อกของตนเอง ตัวอย่างเช่น Ideo หรือ Frog Design นอกจากนี้คุณยังสามารถหาหนังสือที่จะอ่านได้ที่นี่ คุณสามารถสมัครรับรายชื่ออีเมลของ Sidebar.io ซึ่งส่งบทความเจ๋งๆ 5 บทความเกี่ยวกับหัวข้อการออกแบบไปยังอีเมลของคุณทุกวัน หรือสมัคร Think with Google ตัวอย่างเช่นฉันติดตามการวิจัยใหม่ ใน blog.aic.ru มีบทความบางส่วนเกี่ยวกับการออกแบบ UX ในภาษารัสเซีย นอกจากนี้ยังมีบทความให้เลือกมากมายในนิตยสาร Smashing แต่ทุกอย่างเป็นภาษาอังกฤษ หากคุณรู้จักเขาดี คุณจะได้รับเนื้อหาที่เป็นประโยชน์จากปากนักออกแบบชั้นนำโดยตรง

3) ชมเวิร์กช็อปและการสัมมนาผ่านเว็บ. ตัวอย่างเช่น มีกิจกรรมที่คุณสามารถติดตามการสัมมนาผ่านเว็บเกี่ยวกับการออกแบบได้ฟรี

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

เป็นไปไม่ได้ที่จะบอกว่าต้องใช้เวลานานแค่ไหนในการเป็นนักออกแบบที่ยอดเยี่ยม สิ่งสำคัญคือต้องทำทุกวัน ตัวอย่างเช่น หากคุณอุทิศเวลา 7-8 ชั่วโมงต่อวันในการออกแบบ คุณจะได้รับผลลัพธ์ที่จับต้องได้ภายใน 3-4 เดือน โดยรวมแล้วนักออกแบบเว็บไซต์มืออาชีพระดับแนวหน้าต้องใช้เวลาในภูมิภาคนี้ถึง 10,000 ชั่วโมงเพื่อบรรลุระดับสูงสุดอย่างแท้จริง กล่าวอีกนัยหนึ่ง คุณสามารถเป็นกูรูด้านการออกแบบเว็บได้แม้ในโครงเรื่องที่แย่ที่สุดใน 5 ปี.

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

การฝึกอบรมเกิดขึ้นในรูปแบบของการบรรยายออนไลน์ทีละขั้นตอนพร้อมการวิเคราะห์การบ้านรายบุคคลภายใต้การแนะนำของที่ปรึกษา หลักสูตรประกอบด้วยสี่ช่วงหลัก ครอบคลุมงานทั้งหมดของนักออกแบบเว็บไซต์: ตั้งแต่แนวคิดเบื้องต้น เช่น เลเยอร์คืออะไร และความรู้พื้นฐานเกี่ยวกับการพิมพ์ไปจนถึงการแยกวิเคราะห์ความยากลำบากที่นักออกแบบต้องเผชิญในตอนท้าย แต่ด้วยเหตุผลบางอย่างหลายคนก็นิ่งเฉย พวกเขา: วิธีสร้างพอร์ตโฟลิโอที่ดี การพูดคุยกับลูกค้าที่เข้าใจยาก การหางานจากระยะไกลในสตูดิโอต่างประเทศ นักเรียนของหลักสูตรทำวิทยานิพนธ์ให้กับลูกค้าจริง เช่น Azbuka Vkusa และ Ticketland.ru จากนั้นจึงฝึกกับพวกเขาได้

สวัสดีเพื่อน ๆ ทุกคน! ในเอกสารนี้ คุณจะได้เรียนรู้ว่าการออกแบบเว็บคืออะไร, UI / UX คืออะไร, Wireframing ในการออกแบบเว็บสมัยใหม่, พิจารณากฎพื้นฐานสำหรับการออกแบบ UI คุณภาพสูง, องค์กรที่ถูกต้องในการทำงานในแอปพลิเคชันการออกแบบเว็บ, พิจารณาความสำคัญของ HTML เค้าโครงในการออกแบบเว็บและวิธีการเรียนรู้การออกแบบเว็บและพัฒนาเป็นนักออกแบบเว็บไซต์อย่างอิสระและถูกต้อง กล่าวอีกนัยหนึ่งคือเพื่อน คู่มือนักออกแบบเว็บไซต์ที่ดีที่สุดซึ่งจะเป็นประโยชน์อย่างยิ่งไม่เพียงแต่สำหรับผู้เริ่มต้นเท่านั้น แต่ยังรวมถึงนักออกแบบเว็บไซต์ที่มีประสบการณ์ซึ่งต้องการพัฒนาอย่างมืออาชีพ

เย็น

ขามัน

ส่วนที่หนึ่ง: UX เป็นหัวหน้าของทุกสิ่ง

UX คืออะไรและหัวหน้าอื่น ๆ ที่คุณถามด้วยความงุนงง? เริ่มจากคำจำกัดความที่แห้งและไม่มีชีวิตชีวาจากนั้นเราจะวิเคราะห์ทุกอย่างอย่างละเอียดและเป็นภาษามนุษย์

ประสบการณ์การใช้งาน- วินัยที่ศึกษา ประสบการณ์ปฏิสัมพันธ์ผู้ใช้ที่มีต่อผลิตภัณฑ์ การรับรู้ และปฏิกิริยาที่เกิดจากการใช้

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

เรามาดูรูปกันก่อน อาจเป็นการเปิดเผยที่น่าตกใจสำหรับคุณ แต่ UX เป็นพื้นที่ที่มีทั้งการวิจัยและการออกแบบ ตลอดจนการสร้างภาพข้อมูลและการจัดวาง จากการทำงานบน UX เราควรจะได้ต้นแบบการทำงาน หากเรากำลังพูดถึงแนวคิดการออกแบบเว็บ ต้นแบบดังกล่าวคือเค้าโครง HTML หากเราถอดและดึงหน้าจอออกจากโทรศัพท์ เราจะเห็นสายไฟ วัสดุบุผิว ตะเข็บกาว นอกจากหน้าจอแล้ว นี่คืออินเทอร์เฟซ นักออกแบบที่ดีจะพัฒนาส่วนต่อประสานกับเครื่องในทั้งหมด รวมถึงเลย์เอาต์ ในอนาคต หน้าจอจะเชื่อมต่อกับบอร์ดของโทรศัพท์ (Back-end, PHP, Python, Ruby) หรือโปรแกรม (Front-end, JS) ฉันเข้าใจว่าบางคนจะรู้สึกไม่สบายใจจากข้อความดังกล่าว โดยเฉพาะนักออกแบบเลย์เอาต์รุ่นเก่า ซึ่งเลย์เอาต์คือโลกทั้งใบ ซึ่งเป็นความรู้อีกแขนงหนึ่ง แต่ลองดูที่การพัฒนาอย่างเป็นกลางและเรียกจอบเสียม และความเป็นจริงก็คือ เรากำลังพัฒนาโมเดลที่ดีที่สุด ต้องผ่านการทดสอบ และนี่คืองานของคุณในฐานะนักออกแบบเว็บไซต์ นอกจากนี้ โมเดลนี้ (โครงร่าง HTML) สามารถโอนโดยตรงไปยังการพัฒนาส่วนหลัง หรือหากเป็นโครงการที่ซับซ้อน ให้นักพัฒนาส่วนหน้าเขียนโค้ด JS ของแอปพลิเคชัน

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

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

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

นักออกแบบเว็บไซต์มือใหม่หลายคน (และไม่ใช่มือใหม่เท่านั้น) สับสนระหว่างการออกแบบเว็บไซต์กับการออกแบบภาพ มีคนยังคงเชื่อว่ากระบวนการสร้างการออกแบบเว็บไซต์คือประการแรกคือการสร้างรูปภาพ, ปุ่ม, ไอคอน (UI), ลืมเกี่ยวกับรากฐาน (UX) โดยสิ้นเชิงเกี่ยวกับการศึกษาผู้คนที่เศรษฐกิจทั้งหมดนี้ถูกดึงดูด .

ฉันได้เห็นซ้ำแล้วซ้ำเล่าว่าไซต์และ LPs ที่ดูไม่สวยงามนำยอดขายมหาศาลและทำงานได้ดีกว่าอินเทอร์เฟซ Flat ในต่างประเทศที่มีไอคอนมีสไตล์และอินโฟกราฟิก ใช่ ใช่ ไซต์เหล่านี้มีการไล่ระดับสีที่ไร้สาระ ปุ่มขนาดใหญ่ ภาพถ่ายดิบที่ไม่มีการปรับแต่งและบล็อกข้อความที่ถูกบีบอัด แต่พวกเขาทำงาน ปาฏิหาริย์คุณพูด? ฉันไม่คิดว่า เป็นเพียงการที่นักออกแบบที่วาดไซต์ดังกล่าวทำการศึกษาผู้ชมของลูกค้า นักออกแบบรู้วิธีฟังและเข้าใจความต้องการที่แท้จริงของผู้ใช้ผลิตภัณฑ์ แม้ว่าเขาจะไม่มีรสนิยมด้านภาพเป็นพิเศษก็ตาม หรือเดาถูกทิศทางโดยไม่ตั้งใจ หากคุณต้องการเป็นนักออกแบบเว็บไซต์ที่ยอดเยี่ยมอย่างแท้จริง คุณต้องมี 2 ด้านที่เงางามและสวยงามของเหรียญเดียวกัน ด้านหนึ่ง คุณต้องเป็นผู้เชี่ยวชาญ UX ที่ดี อีกด้านหนึ่ง คุณต้องพัฒนารสนิยมเพื่อให้ อินเทอร์เฟซของคุณไม่เพียงใช้งานได้ แต่ยังน่าดึงดูดอีกด้วย - มันคือ UI หากเราพูดถึงว่านักออกแบบคนไหนดีกว่า - ผู้ที่คำนึงถึงประสบการณ์ของผู้ใช้ แต่ไม่สวยงาม หรือผู้ที่วาดอินเทอร์เฟซที่ประณีตน่าทึ่ง แต่ไม่เจาะลึกถึงปัญหาของมนุษย์อย่างแน่นอน คนแรกจะชนะอย่างแน่นอน และนี่เป็นสิ่งที่เข้าใจได้เพราะเป็นอย่างแรกที่จะนำเงินและลูกค้ามาสู่ธุรกิจมากขึ้น พูดง่ายๆ ก็คือ

ความคิดเห็นที่ต่ำต้อยของฉัน: การออกแบบจะหยุดอยู่สำหรับการออกแบบภาพ Web 3.0 เป็นยุคของ UX ข้อมูลและความสะดวกสบาย

งาน UX

เราค่อย ๆ เปลี่ยนจากทฤษฎีไปสู่การปฏิบัติ UX แก้ปัญหาอะไรได้บ้าง?

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

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

ส่วนที่สอง: การวิจัย

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

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

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

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

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

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

ส่วนที่สาม: ไวร์เฟรม ไวร์เฟรม

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

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

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

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

ส่วนที่สี่: UI, การสร้างภาพ

หลังจากที่คุณศึกษา UX อย่างละเอียด สร้างโครงร่างหลายตัว และเลือกตัวเลือกที่น่าสนใจที่สุดแล้ว คุณสามารถเริ่มแสดงภาพได้ การแสดงภาพคือการวาดโครงลวด การสร้างสไตล์ที่เป็นหนึ่งเดียว การออกแบบเนื้อหา กล่าวอีกนัยหนึ่งคือเราเริ่มทำงานกับ UI ส่วนใหญ่มักใช้ Adobe Photoshop, Sketch.app, Inkscape + Gimp หรือเครื่องมืออื่น ๆ ในการสร้างภาพ ฉันแนะนำให้ใช้ Adobe XD เพื่อเรนเดอร์และพัฒนาต้นแบบกราฟิกเชิงโต้ตอบ ในอนาคตในบทเรียนของเรา เราจะใช้เฉพาะเครื่องมือนี้ในการสร้างการออกแบบ เนื่องจากที่นี่คุณสามารถสร้างภาพข้อมูลได้ทันทีและแสดงว่าผู้ใช้จะเคลื่อนผ่านหน้าต่างๆ อย่างไร ในการทำงานด้วย กราฟิกแบบเวกเตอร์ฉันใช้ Inkscape - ที่นี่ฉันสร้างไอคอนและกราฟิกที่จำเป็นอื่นๆ เพื่อทำงานกับกราฟิกแรสเตอร์ - ทางออกที่ดีที่สุดคือ Adobe Photoshop

กฎมารยาทที่ดี

ไม่มีกฎในการออกแบบเว็บ Artemy Lebedev กล่าว มีมารยาทในการออกแบบเว็บฉันจะตอบ เมื่อพัฒนาการออกแบบเว็บไซต์ นักออกแบบเว็บไซต์ปฏิบัติตามกฎที่ไม่ได้พูดเมื่อออกแบบ ระยะห่างระหว่างบรรทัด ช่องว่างภายใน แบบอักษร ขนาดองค์ประกอบ ทั้งหมดนี้สามารถวัดได้และมีการใช้งานที่ไม่ดีอย่างตรงไปตรงมา ดังนั้นจึงเป็นไปได้ที่จะสร้างชุดของกฎซึ่งคุณจะไม่สร้างภาพการออกแบบที่ไม่ดีอย่างแน่นอนแม้ว่าคุณจะเป็นมือใหม่และรสนิยมของคุณยังอยู่ในช่วงเริ่มต้น

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

1. ตัวอักษร ข้อความ ลิงค์

   • อย่าใช้หัวเรื่องขนาดใหญ่เกินไป
   • อย่าใช้แบบอักษรที่เล็กกว่า 12px;
   • อย่าทำให้ระยะห่างระหว่างบรรทัดเล็กหรือใหญ่เกินไป
   • อย่ายืดตัวอักษรด้วยเครื่องมือ "แปลง" แบบอักษรควรได้สัดส่วนตามธรรมชาติ
   • อย่าใช้มากกว่า 3 ฟอนต์ต่อหน้า;
   • อย่าใช้คอนทราสต์น้อยเกินไป อย่าพิมพ์สีเทาอ่อนบนสีขาวหรือสีเทาเข้มบนสีดำ
   • ใช้ระยะห่างระหว่างอักขระอย่างระมัดระวังหากคุณรู้ว่าคุณกำลังทำอะไรอยู่ และแบบอักษรที่เลือกช่วยให้ข้อความโปร่งสบายและสวยงามที่สุด
   • อย่าเยื้องเล็กเกินไประหว่างย่อหน้า หัวข้อ และองค์ประกอบ ให้อากาศกับการออกแบบ
   • อย่าใช้ตัวพิมพ์ใหญ่โดยไม่จำเป็น
   • อย่าใช้แบบอักษรตกแต่งที่ซับซ้อนเกินไปสำหรับบล็อกข้อความหลัก ควรเป็นแบบอักษรที่เรียบง่ายและอ่านง่ายของตระกูล Sans หรือ Serif (Serif และ Slab - ถ้าคุณรู้ว่าคุณกำลังทำอะไรอยู่)
   • ลิงก์ทั้งหมด ยกเว้นรายการนำทาง จะต้องขีดเส้นใต้ พยายามทำให้ลิงก์ที่เข้าชมไปแล้วมีสีเข้มกว่าสีเริ่มต้นของลิงก์
   • หากลำดับชั้นของไซต์มีมากกว่า 3 ระดับ อย่าลืมเบรดครัมบ์

2. กราฟิก ไอคอน ภาพถ่าย

   • อย่าใช้รูปถ่ายแม่แบบในการออกแบบของคุณ ทำเองดีกว่า แนะนำลูกค้าให้ติดต่อช่างภาพหรือหาภาพถ่ายที่ "มีชีวิต" ที่สุด
   • อย่าใช้ไอคอนที่ทำจากรูปถ่าย
   • ไอคอนทั้งหมดต้องทำในรูปแบบเดียวกัน
   • อย่าขยายภาพถ่ายเกินขนาดดั้งเดิม
   • อย่าปรับขนาดกราฟิกเกินสัดส่วน
   • อย่าใช้โหมดการผสมเลเยอร์อื่นที่ไม่ใช่โหมดปกติ (ปกติ);
   • พยายามอย่าใช้ฟิลเตอร์กับรูปภาพที่ควรมีหลายสถานะ (เช่น โฮเวอร์) การซ้อนทับทั้งหมด การเปลี่ยนแปลง - โดยการซ้อนทับเลเยอร์ใหม่เท่านั้น ทุกอย่างควรทำซ้ำในรูปแบบ HTML ได้อย่างง่ายดาย สิ่งนี้ใช้ไม่ได้กับการรีทัชและการเตรียมภาพ
   • อย่าปรับขนาดภาพถ่ายก่อนที่จะแปลงเป็นวัตถุอัจฉริยะ
   • ครอบตัดรูปภาพด้วย clipping mask สำหรับรูปร่างเท่านั้น ต้องบันทึกรูปภาพต้นฉบับดังเช่นในย่อหน้าก่อนหน้าในวัตถุอัจฉริยะ
   • หากคุณกำลังวาดไอคอนใน Photoshop อย่าแรสเตอร์ลดขนาดลง อย่าลืมว่าเลย์เอาต์ยังคงมีเลย์เอาต์สเตจและไอคอนทั้งหมดจะต้องถูกทำให้เป็นเวกเตอร์ วัตถุอัจฉริยะดั้งเดิมพร้อมไอคอนควรมีขนาดใหญ่เพียงพอสำหรับการติดตามคุณภาพสูง
   • ตามหลักการแล้ว คุณควรมีไอคอนแบนและกราฟิก SVG ทั้งหมดในโฟลเดอร์แยกต่างหาก หากคุณเป็นนักออกแบบที่ขี้เกียจ - พิจารณาความเป็นไปได้ของการแปลงหรือส่งออกไอคอนคุณภาพสูงเป็น SVG

3. สี

   • อย่าใช้สีบริสุทธิ์ พยายามให้ได้เฉดสีที่ถูกใจที่สุด
   • อย่าใช้สีเน้นมากกว่า 2 สีต่อหน้า และไม่เกิน 2 สีเทาเข้ม (หรือสีดำ) สำหรับข้อความ ตามหลักการแล้ว ให้ใช้สีเฉพาะจุด 1 สีและสีเทาเข้ม/ดำ 1 สีสำหรับข้อความ ฉันใช้สี 111111 - 222222 สำหรับแบบอักษรหลักบนพื้นหลังสีอ่อน
   • พยายามทาสีทับด้วยสีเน้นเฉพาะองค์ประกอบที่สำคัญที่สุดในหน้าเน้นที่องค์ประกอบเหล่านั้น เหล่านี้คือปุ่ม ลูกศร ช่องทำเครื่องหมายของรายการสำคัญ ลิงก์ข้อความ ไอคอนข้อมูล (ไม่จำเป็นต้องเน้นไอคอนขนาดเล็ก เช่น "เข้าสู่ระบบ" "รหัสผ่าน" "จดหมาย" และไอคอนในแบบฟอร์ม)

4. กฎสำหรับการทำงานในโปรแกรมแก้ไขกราฟิก องค์กรของงาน ฯลฯ

   • เลเยอร์ชื่อที่มีความหมาย
   • พยายามจัดเรียงบล็อกความหมายและส่วนประกอบอินเทอร์เฟซเป็นกลุ่ม
   • สร้างโฟลเดอร์แยกต่างหากพร้อมฟอนต์ทั้งหมดที่คุณใช้ในรูปแบบ TTF หรือ OTF ควรวางแบบอักษรของไอคอนไว้ในโฟลเดอร์นี้ด้วย
   • สร้างเค้าโครง 1 ใน 1 (72 ppi) ที่การแสดงผล 100% เลย์เอาต์ต้องมีขนาดเดียวกันกับผลลัพธ์ของเลย์เอาต์ HTML ที่ควรจะเป็น
   • อย่าลืมใช้ระบบกริดบางประเภทในการทำงานของคุณ คุณสามารถพัฒนาได้เอง แต่ฉันแนะนำให้ใช้ระบบกริดของ Bootstrap ความกว้างของเนื้อหาสามารถปรับแต่งได้จากความกว้างของกริด Bootstrap ดั้งเดิม สำหรับสิ่งนี้ คุณสามารถใช้ปลั๊กอินสำหรับสร้างกริดในกรณีที่คุณเป็นผู้ใช้ Photoshop
   • อย่าสร้างองค์ประกอบตกแต่งหากไม่สมเหตุสมผล หากนี่คือไซต์รูปภาพและคุณต้องการรูปภาพที่สวยงาม คุณสามารถละเว้นกฎนี้ได้
   • ยึดติดกับลำดับชั้นภาพเชิงความหมาย อ่านเกี่ยวกับลำดับชั้นภาพ
   • ใช้กฎ "ด้านในและด้านนอก" ซึ่งระบุว่าระยะห่างระหว่างองค์ประกอบด้านในของบล็อกต้องน้อยกว่าระยะห่างด้านนอกระหว่างบล็อก
   • อย่าลืมว่าผู้คนส่วนใหญ่มักจะไม่มาที่หน้าแรกของเว็บไซต์ แต่ไปที่หน้าภายใน ดังนั้นให้คิดถึงบล็อกสากลที่ให้ข้อมูล - ส่วนหัว ส่วนท้าย แถบด้านข้าง (ถ้ามี) ส่วนหัวควรให้ข้อมูลมากที่สุดเท่าที่จะเป็นไปได้ แต่ไม่มากเกินไป องค์ประกอบที่จำเป็น: โลโก้ ชื่อโครงการ การนำทาง การค้นหาไซต์และองค์ประกอบอื่น ๆ ขึ้นอยู่กับโครงการ
   • ทางออกที่ดีคือการวางการนำทางแบบขยายในส่วนท้ายหรือแผนผังไซต์ที่มีตำแหน่งที่ซ่อนอยู่ทั้งหมด ส่วนท้ายหรือชั้นใต้ดินมักเป็นหัวข้อแยกต่างหากที่ควรค่าแก่บทความแยกต่างหาก พยายามคิดถึงห้องใต้ดินในรายละเอียดที่เล็กที่สุด พยายามอย่าสร้างห้องใต้ดินแคบๆ ที่มีโลโก้และหมายเลขโทรศัพท์ ที่นี่อีกครั้งขึ้นอยู่กับโครงการ แต่ส่วนใหญ่แล้วส่วนท้ายจะดีกว่าเพื่อให้สูงและปรับใช้ ฉันมักพบข้อมูลที่จำเป็นซ่อนอยู่ในห้องใต้ดิน และฉันชอบห้องใต้ดินที่สูงและรอบคอบ ฉันไม่คิดว่าฉันจะพูดแบบนั้นเกี่ยวกับชั้นใต้ดิน

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

ตำนานการออกแบบเว็บ

• กฎสามคลิก. ตำนาน. หากผู้ใช้สนใจข้อมูลเกี่ยวกับ หน้าแรกเขาจะคลิกได้มากเท่าที่ต้องการเพื่อให้บรรลุเป้าหมาย เราเพียงแค่ต้องช่วยเขาในเรื่องนี้เล็กน้อย - วางตัวชี้อย่างถูกต้องในการนำทางไปยังเนื้อหาที่ต้องการ การนำทางควรง่ายและชัดเจน
• ตัวเลื่อนเนื้อหา- มัน การตัดสินใจที่ดี. คำสั่งที่ขัดแย้งกันมาก ฉันมักจะใช้แถบเลื่อนเป็นรูปแบบในการแสดงเนื้อหา แต่มีการศึกษาที่ยืนยันว่ามีเพียงไม่กี่คนที่เลื่อนดูและมีบางอย่างบอกฉันว่านี่เป็นเรื่องจริง บางทีในอนาคตอันใกล้นี้ ประสิทธิภาพของแถบเลื่อนเนื้อหาอาจกลายเป็นตำนาน
• ต้องใช้ความพยายามอย่างมากในการออกแบบที่ดี. ตำนาน. การกำหนดกลุ่มผู้ชมอย่างถูกต้อง รูปภาพ ชื่อเรื่อง และกลุ่มข้อความที่ประสบความสำเร็จเพียงภาพเดียวก็เพียงพอแล้วที่จะทำให้ผู้ใช้สนใจผลิตภัณฑ์อย่างจริงใจ มีบางสถานการณ์ที่นักออกแบบเว็บไซต์ถูกบังคับให้ใส่อะไรลงไปในอินเทอร์เฟซ (ส่วนต่างๆ ที่มี CTA, ตัวจับเวลานับถอยหลัง, คำกระตุ้นการตัดสินใจที่ถูกแฮก) ตามคำขอของลูกค้าโดยกล่าวหาว่านักออกแบบทำงานไม่เพียงพอ นี่เป็นเรื่องไร้สาระและไร้สาระ น่าเสียดาย นี่เป็นคุณลักษณะที่แพร่หลายของเจ้าของธุรกิจ และคุณเพียงแค่ต้องสามารถอธิบายได้อย่างถูกต้องว่าในการออกแบบเว็บ กฎ "ยิ่งมากยิ่งดี" ใช้ไม่ได้;
• การออกแบบต้องเป็นต้นฉบับแน่นอนว่านี่เป็นเรื่องดีหากคุณมีเวลาเหลือหนึ่งเดือนและลูกค้ามีกระเป๋าเงินที่อ้วน แต่บ่อยครั้งไม่เป็นเช่นนั้น คุณสามารถใช้เงินและเวลาจำนวนมากไปกับภาพประกอบ การออกแบบที่ไม่เหมือนใคร แต่ได้ผลลัพธ์แบบเดียวกันราวกับว่าไม่มีโอกาสเช่นนั้น ทำงานบน UX และเพื่อให้ได้ผลลัพธ์ที่ยอดเยี่ยม การเสียเวลาและเงินโดยไม่จำเป็น บ่อยครั้งที่ผู้ใช้ที่คุ้นเคยกับการจัดเรียงบล็อกแบบสากล (ส่วนหัวการนำทางและส่วนท้าย) จะสับสนเมื่อเยี่ยมชมไซต์ที่ทุกอย่างเป็น "ต้นฉบับและผิดปกติ" ยึดมั่นในมาตรฐานของเว็บและคุณจะไม่ต้องสร้างวงล้อขึ้นมาใหม่ นอกจากนี้ สตาร์ทอัพมักไม่มีเวลาหรือเงินในการทดลอง ฉันเชื่อว่ามันเป็นไปได้ที่จะสร้างการออกแบบที่กระชับด้วยการบิดที่จะใช้งานได้จริงและดึงดูดลูกค้าโดยไม่ต้องหันไปใช้ความหรูหราทางสายตา

ตอนที่ห้า: เค้าโครง

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

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

หากคุณต้องการเชี่ยวชาญเลย์เอาต์และทักษะพื้นฐานของ Front-end Developer ฉันขอแนะนำ:

1. ทำความเข้าใจพื้นฐาน HTML
2. ศึกษาทฤษฎี. ฉันแนะนำให้คุณเชี่ยวชาญเว็บไซต์ htmlbook.ru สำหรับสิ่งนี้ ตั้งแต่ต้นจนจบ แท็ก HTML ทั้งหมด คุณสมบัติ CSS ทั้งหมด
3. รวบรวมความรู้ในการปฏิบัติ สำหรับสิ่งนี้ วัสดุต่อไปนี้เหมาะสำหรับฉัน:

มีเนื้อหามากเกินพอในเลย์เอาต์ HTML เท่านี้ก็มีเลย์เอาต์แล้ว

ตอนที่หก การเรียนรู้ตนเองและการพัฒนาตนเอง

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

สำหรับ UX ทุกอย่างเงียบสงบที่นี่ และจะเป็นเช่นนั้นไปอีกนาน เพราะจริง ๆ แล้ว UX เป็นวิชาที่ศึกษาเกี่ยวกับจิตวิทยา และที่นี่ไม่น่าจะมีอะไรเปลี่ยนแปลงได้ในอนาคตอันใกล้นี้ ที่นี่การศึกษาด้วยตนเองประกอบด้วยการพัฒนาโลกภายในประสบการณ์ของตนเอง เมื่อศึกษาฐานข้อมูลแล้ว คุณจะสามารถทำงานได้อย่างปลอดภัยเป็นเวลาหลายปี เฝ้าติดตามข่าวสารในพื้นที่นี้เป็นครั้งคราวและอ่านเรื่องราวนักสืบดีๆ แต่การเรียนรู้ด้วยตนเองของ UI นั้นต้องการความสนใจเป็นพิเศษ ชีวิตเต็มไปด้วยความผันผวน เทรนด์ในการออกแบบภาพมาแทนที่ซึ่งกันและกัน เติมเต็มและพัฒนาเกือบทุกวัน! ฉันไม่ใช่ผู้สนับสนุนการทำตามเทรนด์และเทรนด์อย่างสุ่มสี่สุ่มห้า แต่จากการปฏิบัติแสดงให้เห็นว่ามีแนวโน้มที่มีเหตุผลและจำเป็นต้องปฏิบัติตาม

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

1. ศึกษางานอย่างต่อเนื่องใน ThemeForest - คลังของการออกแบบเว็บไซต์ที่ทันสมัย ลองใช้รูปแบบการแสดงเนื้อหาที่น่าสนใจในงานของคุณ แต่อย่าหลงทางและอย่าลืมเกี่ยวกับฐาน - UX ทุกอย่างควรอยู่ในธีม
2. เป็นแขกประจำของ awwwards.com และรับชมผลงานเจ๋งๆ เพื่อไม่ให้คุณเฉื่อยชา ;-)
3. นอกจากนี้ เพื่อพัฒนารสนิยม การเรียนรู้ผลงานดีๆ บน behance.net เป็นระยะจะเป็นประโยชน์ ใช้เวลาในการฝึกฝน - ทำซ้ำงานที่คุณชอบในทางปฏิบัติในโปรแกรมแก้ไขกราฟิก แต่ไม่ว่าในกรณีใดจะเผยแพร่สำเนาของคุณที่ใดก็ได้ นี่เป็นเพียงการฝึกฝนและพัฒนาตนเองเท่านั้น
4. วิจารณ์โฆษณาตามท้องถนนในเมืองของคุณและคิดว่าคุณจะทำอย่างไรให้ดีขึ้น
5. วิจารณ์ UX ตามท้องถนนและคิดด้วยว่าจะทำให้ดีขึ้นได้กี่อย่าง โชคดีที่เรามีสถานที่ในพื้นที่หลังยุคโซเวียตที่เราสามารถท่องเกี่ยวกับเรื่องนี้ได้ คิดเกี่ยวกับคนคิดเหมือนคน