ขั้นตอนในการออกแบบเว็บไซต์มีอะไรบ้าง

เรียกนักออกแบบเว็บไซต์ทั้งหมด :)

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

คำถามของฉันคือ:

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

ฉันแค่อยากรู้ว่ากระบวนการ "ออกแบบ" ทำงานอย่างไรเช่นขั้นตอนที่ฉันต้องทำเพื่อสร้างเว็บไซต์

ขอบคุณล่วงหน้า.

การค้นพบและขอบเขต

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

การแมปเนื้อหา

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

ตัวอย่าง:

รูปจำลอง

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

ตัวอย่าง:

ลักษณะกระเบื้อง

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

ด้วยจุดประสงค์ของกระเบื้องคุณไม่ได้มอบหมายให้ลูกค้าออกแบบและวางมุมของตัวเอง "นี่ไม่เหมือนกับการออกแบบที่คุณให้ฉัน" นอกจากนี้ถ้าคุณกำลังวางแผนไซต์ไม่มีเหตุผลที่จะใช้เวลาในการออกแบบ Photoshop เพราะคุณจะใช้เวลาในการออกแบบสำหรับอุปกรณ์บางอย่าง ฯลฯ เป็นอย่างมากหากคุณต้องออกแบบเว็บไซต์เต็มรูปแบบ พิจารณา Illustrator ตามที่ระบุไว้สำหรับ SVG และความสามารถในการส่งออกองค์ประกอบสำหรับไซต์ของคุณเมื่อเทียบกับ Photoshop ในบางระดับคุณสามารถใช้ InDesign สำหรับการจัดรูปแบบเนื้อหา แต่ฉันจะใช้ Photoshop สำหรับการจัดการภาพเท่านั้นและถ้าฉันจะทำเช่นนั้นฉันอาจม้วนด้วย ImageMagick ฉันใช้ Style Tile ในระดับที่สูงกว่าคนอื่น ๆ และเขียนมันลงในหน้าเดียวดังนั้นฉันจึงได้ทำภารกิจเบื้องต้นของเจ้านายของฉัน.css ไฟล์.

wireframe

ฉันชอบที่จะปรับใช้การออกแบบในเบราว์เซอร์ถ้าคุณไม่ได้สังเกต วันนี้ฉันอาจใช้ Illustrator เป็นร่างของไซต์หรือจำลองของไซต์ แต่ฉันมักจะปรับใช้.cssไฟล์เท็มเพลตเริ่มต้นที่มีไม่เกิน 6 สีในระดับสีเทาและฉันเขียนโค้ดทุกอย่างสำหรับโครงสร้างของไซต์เนื่องจากคนส่วนใหญ่ไม่สามารถ รับความเข้าใจในการออกแบบและต้องการที่จะเล่นกับ บางครั้งฉันไปข้างหน้าและทำสิ่งนี้ใน PHP เนื่องจากง่ายต่อการปรับใช้สำหรับ CMS จากนั้นฉันจะพัฒนาโดเมนย่อยง่าย ๆ ด้วยแบบอักษร PROVIDED ของลูกค้าในลักษณะขาวดำดังนั้นการทำงานของไซต์ทั้งหมดจึงมีอยู่และพวกเขาสามารถผ่านมันได้ เนื่องจากฉันไม่ได้ใช้เวลาเพิ่มเนื้อหาหรือสีทั้งหมด (เพราะฉันใช้การอ้างอิงข้อความดัมมี่: "Alternative to Lorem Ipsum (ข้อความจำลอง) สำหรับเว็บไซต์") ฉันสามารถแก้ไขการเปลี่ยนแปลงใด ๆ ที่เกิดขึ้นได้อย่างง่ายดายหากไม่ชอบองค์ประกอบบางอย่างที่อิงตามอุปกรณ์

ทำสีและเนื้อหา

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

Debug, Debug, Debug

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

การอบรม

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

หัวข้ออื่น ๆ ที่อาจช่วยได้เมื่อคุณถามคำถามพื้นฐาน:

• อะไรคือความแตกต่างระหว่าง wireframes และ mockups?
• วิธีนำเสนอ mockups การออกแบบเว็บให้กับลูกค้าได้อย่างไร
• การปฏิบัติที่ดีในการออกแบบเว็บไซต์มีอะไรบ้าง

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

1. การประชุมการออกแบบและพัฒนาเริ่มต้น
   นี่คือเมื่อฉันรวบรวมข้อมูลที่เกี่ยวข้องทั้งหมดรวมถึงวันที่เสร็จสมบูรณ์ที่คาดหวังทำรายการของรายการที่ต้องการจากลูกค้าของฉัน ฯลฯ
   
2. PhotoShop Mockups
   ในขณะนี้ฉันพบการออกแบบหรือสองหรือสามที่เหมาะสมสำหรับลูกค้าของฉันและสร้าง mockups ใน Photoshop โดยใช้การสร้างแบรนด์สีสไตล์ ฯลฯ ฉันส่งสิ่งเหล่านี้และหารือเกี่ยวกับสิ่งที่ควรเปลี่ยนแปลง / เก็บไว้ในแต่ละอัน จากนั้นให้ลูกค้าตัดสินใจว่าจะออกแบบแบบไหนดีที่สุด
   หมายเหตุ: หากคุณใช้ WordPress เพื่อสร้างคุณสามารถไปที่http://themeforest.comและดูธีมมากมาย จากตรงนั้นคุณสามารถจับภาพหน้าจอและทำการจำลองของคุณจากนั้นคุณสามารถให้การสาธิตสด (โดยไม่ต้องปรับแต่งของลูกค้าอย่างชัดเจน) หากลูกค้าของคุณชอบ mockups เหล่านี้คุณสามารถซื้อชุดรูปแบบและสามารถเปลี่ยนแปลงได้ตามที่คุณต้องการ นี่คือสิ่งที่ฉันมักจะทำ ฉันไม่เคยใช้ชุดรูปแบบ (หรือสิ่งอื่นใดสำหรับเรื่องนั้น) โดยไม่ให้เครดิต / การชำระเงิน / ฯลฯ ที่เหมาะสม ถึงผู้สร้างดั้งเดิม :)
   
3. การพัฒนา
   จากนั้นในที่สุดฉันก็เริ่มพัฒนาเว็บไซต์ในสภาพแวดล้อมการพัฒนา (ไม่ใช่เว็บไซต์จริงของลูกค้า แต่เป็นโดเมนย่อยถ้าเป็นไปได้ - IE dev.clienturl.com) ฉันส่งการอัปเดตให้กับลูกค้าทุกครั้งที่รู้สึกว่าหน้าเว็บใกล้เข้ามา เพื่อให้เสร็จสมบูรณ์ด้วยวิธีนี้หากมีปัญหาเราสามารถแก้ไขได้ทันที
4. ทำตามอยู่เสมอ
   แม้หลังจากที่เว็บไซต์ของลูกค้าของคุณใช้งานได้แล้วและพวกเขาก็รู้สึกพึงพอใจและไม่ได้ขอการเปลี่ยนแปลงเพิ่มเติมใด ๆ เพียงให้แน่ใจว่าทุกอย่างทำงานได้ตามที่ควรตามความคาดหวังของพวกเขา ฉันขอแนะนำให้เขียนแบบสำรวจเล็กน้อยเพื่อให้ลูกค้าแต่ละรายเสร็จสิ้นเมื่อเว็บไซต์ใช้งานได้จริงประมาณหนึ่งสัปดาห์ คุณสามารถใช้ความคิดเห็นจากที่นี่เป็นคำรับรองบนเว็บไซต์ของคุณ

หากคุณต้องการความช่วยเหลือใด ๆ ติดต่อฉันผ่านทางเว็บไซต์ของฉัน ฉันมีทรัพยากรมากมายที่ฉันสามารถแบ่งปันกับคุณได้สำหรับสิ่งต่างๆเช่นสัญญาการสำรวจหลังการผลิตแบบสอบถามเริ่มต้น ฯลฯhttp://anchorsawaydesigns.com/

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

1. รวบรวมความต้องการ
2. แจก
3. ออกแบบจำลอง
4. การออกแบบสรุปแล้ว
5. พัฒนาการ
6. โฮสติ้ง

โชคดี.

สวัสดีเพื่อน ๆ ที่ดีคุณกำลังเริ่มโครงการใหม่

ขั้นตอนสำหรับความต้องการของคุณ:

1. ก่อนอื่นคุณตัดสินใจว่าเทคโนโลยีใดที่คุณต้องการใช้สำหรับโครงการของคุณฉันหมายถึงการเลื่อนหน้าเดียวหลายหน้าเป็นต้น

2. จากนั้นเตรียมร่างสำหรับเค้าโครงและเวิร์กโฟลว์ของคุณ

3. ตอนนี้เริ่มออกแบบเลย์เอาต์ของคุณในเครื่องมือที่คุณชอบที่ฉันทำกับ photoshop แต่คุณสามารถใช้ความชอบของคุณได้

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

5. ตอนนี้หลังจากการยืนยันของลูกค้า ถึงเวลาที่จะเริ่มการเข้ารหัสด้วย Html และ Css

6. หลังจากนั้นก็ถึงเวลาส่งผ่านไปยัง Developer สำหรับการเข้ารหัสฐานภาษาเพิ่มเติม PHP, .Net ฯลฯ

สนุก............

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

ขั้นตอนที่ 1: รับแรงบันดาลใจ:

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

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

ขั้นตอนที่ 2: การออกแบบกระบวนการของคุณ:

นักออกแบบหลายคนใช้วิธีการแบบ Wireframing และการแปลเป็นภาพหรือโค้ดในรูปแบบต่างๆ

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

Sketch => Wireframe => Mockup => รหัส

ขั้นตอนที่ 3: การร่างภาพ:

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

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

ขั้นตอนที่ 4: Wireframing:

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

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

wireframe เป็นพื้นแสดงภาพของรูปแบบเนื้อหาในการออกแบบ

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

เลือกเครื่องมือของคุณ

นี่คือรายชื่อ 10 เครื่องมือ Wireframing ฟรีของ Mashable สำหรับนักออกแบบ

การตั้งค่ากริด

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

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

กำหนดเค้าโครงด้วยกล่อง

กำหนดลำดับชั้นข้อมูลด้วยการทำตัวพิมพ์

สิ่งที่ควรหลีกเลี่ยงในขณะที่ Wireframing:

• เกิดขึ้นมากเกินไปในหน้า
• เน้นสีและการออกแบบ
• รายละเอียดมากเกินไป

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

Wireframing นำประโยชน์ที่สำคัญดังต่อไปนี้:

ขั้นตอนที่ 5: จำลอง / ภาพ:

ตอนนี้ Wireframe สุดท้ายสามารถแปลงเป็น Mockups หรือ Visual สุดท้าย:

เครื่องมือทั่วไปบางอย่างสำหรับ Mockuos คือ Adobe photoshop, Corel Draw และใหม่มาก แต่ populare Sketch แล้วเป็นต้น

ลำดับชั้นของข้อมูล

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

วิชาการพิมพ์

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

แบบแผนชุดสี

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

ขั้นตอนที่ 6: ต้นแบบ :

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

Wireframes จัดการโครงสร้าง mockups จัดการภาพและต้นแบบจัดการการใช้งาน (ในผลิตภัณฑ์เว็บ / แอพ)

มีการสร้างผลิตภัณฑ์ต้นแบบจากนั้นจะทำการทดสอบและทำ POC (Prof of concept) แล้วตอนนี้เราสามารถมุ่งสู่ผลิตภัณฑ์จริง (เห็นได้ชัดว่าไม่มีการเปลี่ยนแปลงที่จำเป็น)

เชื่อมโยงไปยังบทความต้นฉบับพร้อมรูปภาพและลิงค์อื่น ๆ