วิศวกรส่วนหน้าคนเดียวสามารถแทนที่ทีมสองคนได้อย่างไร

คิดสองใจ

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

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

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

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

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

One Night Stand กับโปรเจ็กต์ของคุณ

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

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

ให้น้ำผลไม้สร้างสรรค์ของคุณไหลเวียน: กระบวนการออกแบบ

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

ในระหว่างขั้นตอนการออกแบบนี้ สิ่งสำคัญคือคุณต้องปล่อยให้ฝ่าย "นักพัฒนา" คอยตรวจสอบ เพื่อไม่ให้คุณคลั่งไคล้บางแง่มุมของเว็บไซต์ที่จะเป็นไปไม่ได้เลยที่จะสร้างใหม่อย่างรวดเร็วโดยใช้ HTML, CSS และ jQuery หากคุณพยายามสร้างเบราว์เซอร์ขึ้นมาใหม่ นักพัฒนาส่วนหน้าของคุณจะเกลียดคุณ และผู้พัฒนา front-end ของคุณคือ คุณ — จำได้ไหม?

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

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

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

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

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

1. กราฟฟิค : นี่คือส่วนที่ฉันชอบที่สุด: การเปลี่ยนโครงร่างของเราให้เป็นเว็บไซต์ที่สวยงาม แต่ไม่ใช่ทุกคนที่เป็นฉัน หากคุณเป็นนักพัฒนาโดยเฉพาะและมีพรสวรรค์ด้านการออกแบบ สี การออกแบบตัวอักษร ฯลฯ ที่บางเฉียบไม่มีเลย เราขอแนะนำให้คุณเริ่มต้นกับเว็บไซต์อื่นๆ เพื่อเป็นแรงบันดาลใจในการออกแบบ มีพวกมันมากมายและครอบคลุมด้วยแนวคิดที่ยอดเยี่ยม ใครจะไปรู้ บางทีคุณอาจมีนักออกแบบในตัวคุณที่กำลังรอให้ออกมาอยู่ ฉันพบว่าการเก็บโฟลเดอร์บุ๊กมาร์กของเว็บไซต์ที่ฉันพบว่าดูดีหรือออกแบบมาอย่างดีเป็นพิเศษนั้นมีประโยชน์ Picasso (?) พูดว่า "ศิลปินที่ดีลอกเลียนแบบ แต่ศิลปินผู้ยิ่งใหญ่ขโมย"—นั่นไม่ได้หมายความว่าคุณจะนำการออกแบบของคนอื่นมาติดสติกเกอร์ ให้หาแรงบันดาลใจจากงานของคนอื่น และเพิ่มรูปแบบและแนวทางของคุณเองเข้าไป

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

 So, for step three, we take our wireframe and bring it to life: 

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

1. CSS3Ps : ปลั๊กอิน Photoshop บนคลาวด์ฟรีที่แปลงเลเยอร์ของคุณเป็น CSS3
2. Divine Elemente : สร้างธีม WordPress โดยตรงจาก PSD ของคุณ เป็นการดีสำหรับการเริ่มโครงการ WordPress ของคุณอย่างรวดเร็ว แม้ว่าพวกเขาจะพูดว่า "ไม่จำเป็นต้องใช้ทักษะ HTML" แต่จริงๆ แล้วคุณต้องการบางอย่างหากต้องการได้ผลลัพธ์ที่ยอดเยี่ยม
3. รูปแบบที่ละเอียดอ่อน : คอลเลกชันของรูปแบบอิสระที่จะใช้ในการออกแบบของคุณ ซึ่งมักจะเป็นพื้นหลัง รายละเอียดเช่นนี้สร้างความแตกต่างเมื่อคุณพยายามเปลี่ยนการออกแบบจากดีไปหาเจ๋ง

“Slice It Up”: กระบวนการส่วนหน้า

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

ในขั้นตอนนี้ ถึงเวลาที่จะใช้สมองซีกซ้ายเพื่อวิเคราะห์มากขึ้น

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

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

ตอนนี้ หากคุณสร้าง wireframe ที่ยอดเยี่ยม (ในขั้นตอนก่อนหน้า) ตามตารางที่คุณคุ้นเคย คุณจะรู้ได้อย่างชัดเจนว่าคุณต้องการให้ไซต์ของคุณถูกเข้ารหัสอย่างไร วิธีที่เร็วที่สุดคือการใช้ front-end framework บางประเภท เช่น Bootstrap

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

1. โลโก้ / การนำทาง
2. ตัวเลื่อนภาพ
3. ข้อความแนะนำ
4. ภาพหมวดหมู่
5. ข่าวล่าสุด / ข้อเสนอ
6. ส่วนท้าย

หลังจากที่เราใส่มันลงในโครงสร้าง HTML ของ Bootstrap แล้ว เราก็จะได้สิ่งนี้:

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

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

การเลือก CMS

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

ในบรรดา CMS ขนาดใหญ่ทั้งหมด ฉันจะเรียกตัวเองว่า WordPress Evangelist: ฉันชื่นชมนักพัฒนาคนอื่นๆ โดยเฉพาะอย่างยิ่งผู้เริ่มต้น เนื่องจากมีความเก่งกาจ ใช้งานง่าย เอกสารที่ครอบคลุมสำหรับการพัฒนา ชุมชนขนาดใหญ่ ปลั๊กอินฟรีจำนวนมาก และอื่น ๆ และอื่น ๆ…

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

ฉันต้องการบทความทั้งบทความเพื่อเขียนเกี่ยวกับหัวข้อนี้ แต่เชื่อฉันในบทความนี้ เช่นเดียวกับที่คุณไว้วางใจ Baz Luhrmann ในเรื่องครีมกันแดด

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

การดูแลเว็บไซต์ของคุณ

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

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

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

ฉันทำได้แค่ให้คุณดูประตู คุณเป็นคนหนึ่งที่ต้องเดินผ่านมันไป - มอร์เฟียส เดอะเมทริกซ์

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