เส้นทางนักพัฒนาไปยังนักออกแบบ: วิธีการ

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

ฉันจะเริ่มได้ที่ไหน ฉันจะเรียนรู้วิธีสร้างเว็บไซต์และอินเทอร์เฟซที่สวยงามได้อย่างไร

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

ที่ถูกกล่าวว่าถ้าคุณต้องการอ่านบน UI / UX / ฯลฯ ฉันจะดูที่หัวข้อที่ยอดเยี่ยมนี้: ต้องอ่านส่วนต่อประสานผู้ใช้หนังสือ? ฉันคิดว่าสิ่งที่ฉันชอบที่สุดคือ Steve Don't ไม่ได้ทำให้ฉันคิดว่า - แต่ฉันมั่นใจว่าคุณจะพบคนที่คุณชื่นชอบในที่สุด

สุดท้ายนี้สำหรับเครื่องมือเช่น Photoshop, Illustrator และอื่น ๆ ... ไม่ต้องกังวล! ในที่สุดคุณจะพบเครื่องมือที่ดีที่สุดสำหรับคุณ โดยส่วนตัวแล้วฉันเริ่มต้นด้วยการเยาะเย้ยด้วยดินสอและกระดาษจากนั้นขึ้นอยู่กับโครงการฉันจะย้ายไปที่BalsamiqหรือAxureหรือบางครั้งตรง HTML และ CSS - ขึ้นอยู่กับขนาดขอบเขตและอื่น ๆ ของโครงการ สะดวกสบายที่สุดสำหรับคุณ ในตอนท้ายของวันทั้งหมดที่สำคัญคือคุณสื่อสารวิสัยทัศน์ของคุณอย่างชัดเจนสำหรับการออกแบบไม่ใช่เครื่องมือที่คุณใช้ในการทำ

ฉันได้ผสมผสานการออกแบบและพัฒนามาเป็นเวลานาน แต่ในช่วงแรก ๆ ฉันใช้เวลาในการเรียนรู้เครื่องมือแก้ไขมากกว่าสิ่งที่ทำให้การออกแบบดีขึ้น มีแบบฝึกหัดมากมายที่จะค้นพบเพื่อเรียนรู้วิธีใช้ Photoshop, Illustrator, Fireworks และอื่น ๆ แต่ก็ดีที่มีความรู้สึกและทิศทางการออกแบบ นี่คือสิ่งที่ฉันยังต้องการที่จะกลายเป็นดีกว่าที่

หนึ่งในแรงบันดาลใจของฉันคือผู้ชายที่ชื่อ Robby Ingebretsen เพราะเขาพัฒนาและออกแบบได้ดีมาก เว็บไซต์ของเขาที่nerdplusart.com

มีบางสิ่งที่ฉันจะดูจากเขา ...

• รายการสั้น ๆ ของฉันที่ต้องอ่านหนังสือสำหรับนักออกแบบ
• ออกแบบพื้นฐานสำหรับนักพัฒนา
• 10 วิธีในการแก้ไขปัญหาการออกแบบและการชนะรางวัล

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

เช่นเดียวกับการเรียนรู้ Visual Studio ไม่ได้ทำให้ผู้พัฒนาซอฟต์แวร์ที่ดีและจะไม่เรียนรู้ Photoshop เพียงอย่างเดียวทำให้นักออกแบบ UI ที่ดี

ถ้าคุณต้องการที่จะไปเส้นทางที่เป็นทางการ, การศึกษาในศิลปะ / กราฟิกดีไซน์, ปัจจัยมนุษย์, จิตวิทยา, ข้อมูลศิลปะสถาปัตยกรรม / ห้องสมุดวิทยาศาสตร์จะเป็นสถานที่ที่จะมอง

ไปทำงานอย่างไม่เป็นทางการ! ;) วิธีที่ดีที่สุดในการเรียนรู้คือทำ

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

โดยส่วนตัวแล้วฉันคิดว่าสมาชิกในทีม UX ที่ดีที่สุดคือคนที่มีทั้งสองอย่างผสมผสานกัน ดังนั้นฉันคิดว่าคุณกำลังอยู่ในเส้นทางที่ถูกต้อง

ฉันจะเริ่มต้นด้วยการอ่านหนังสือ"Head First Web Design" โดย Watrall & Siarto (จัดพิมพ์โดย O'Reilly) เป็นเรื่องไร้สาระที่ย่อยง่ายและนำคุณไปสู่ทุกสิ่งที่นักออกแบบต้องพิจารณา มันไม่ใช่การศึกษาเชิงลึก แต่ให้คุณเริ่มรู้ว่าคุณต้องตอบคำถามอะไรต่อไป มันครอบคลุมการนำทาง, องค์กร, เค้าโครง, การเขียน, สีและการเข้าถึง

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

จริง ๆ แล้วฉันใช้วิธีตรงกันข้ามจาก UX Designer ถึง UI Developer แต่เมื่อเลือก Design แล้วจะแนะนำให้เริ่มด้วยการเริ่มต้น:

ฉันจะดูหนังสือ"อย่าทำให้ฉันคิด!" โดย Steve Krugซึ่งฉันคิดว่าเป็นหนังสือที่ยอดเยี่ยมในการออกแบบเพื่อการออกแบบบนเว็บ

มีแหล่งข้อมูลบนเว็บที่ยอดเยี่ยมมากมายรวมถึง SmashingMagazine.com และ PSDTuts.com ซึ่งให้บทความที่ยอดเยี่ยมในโลกแห่งการออกแบบและเทคโนโลยีเว็บ

ฉันจะดูที่การทำความเข้าใจหลักการของHCIหากคุณกำลังมองหาการเป็นนักออกแบบ UX โดยเฉพาะ

ขอให้โชคดีและการออกแบบที่มีความสุข!

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

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

หนึ่งในกุญแจสู่การออกแบบภาพที่สวยงามเป็นความสามัคคี

การขาดความสามัคคีคือสิ่งที่ทำให้งานออกแบบของคุณดูไม่ชำนาญ

และสิ่งที่ดีที่สุดคือความกลมกลืนของภาพที่เกิดขึ้นกับคณิตศาสตร์ มันไม่ได้เกี่ยวกับความรู้สึกทางเดินอาหาร

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

วิธีการฝังความสามัคคีในการออกแบบเว็บไซต์

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

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

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

ตัวอย่างเช่นลองกำหนดขนาดส่วนหัวของเว็บไซต์ (เพื่อสื่อสารลำดับชั้นที่มองเห็นได้)

สมมติว่าเรามีมาตราส่วนแบบแยกส่วนนี้ตามขนาดตัวอักษร 19px ที่ฉันเลือก (19px เพราะมันดูดีที่สุดกับแบบอักษรที่ฉันใช้ แต่คุณสามารถข้ามขั้นตอนนี้และใช้ขนาดเริ่มต้น 16px) และอัตราส่วน 1.412 (ไม่ ต้องระบุรายละเอียดว่าทำไมฉันถึงเลือกอัตราส่วนนี้อัตราส่วนใด ๆ ที่ทำได้ดีกว่าไม่มีอัตราส่วนสำหรับโครงการของคุณ):

เมื่อมองดูแล้วฉันจะเลือก H1 ให้เป็น 2.815em, H2 จะเป็น 1.994em และ H3 เป็น 1.412em ตัวเลข 3 ตัวแรกใหญ่กว่าขนาดตัวอักษร เข้าใจง่ายใช่มั้ย ข้อความเนื้อหาจะเป็น 1em (ในกรณีของฉัน 19px) จากนั้นฉันจะปรับขนาด H4-H6 เป็น 1em และใช้ความเปรียบต่าง (น้ำหนักแบบอักษรหรือสไตล์ที่แตกต่างกัน) เพื่อแยกความแตกต่างจากเนื้อความ

ลองตอนนี้เลย:

1. สร้างสเกลโมดูลาร์ของคุณเอง
2. รับเอกสาร HTML ธรรมดา (เนื้อหาจริงโปรดอย่า Lorem Ipsum)
3. ใช้เครื่องชั่งเพื่อปรับขนาดส่วนหัว
4. จากนั้นลองใช้เครื่องชั่งสำหรับการตัดสินใจเกี่ยวกับขนาดอื่น ๆ (ระยะขอบ, ช่องว่างภายใน ฯลฯ )

นั่นเป็นเพียงก้าวเล็ก ๆ ต่อการออกแบบที่ดีกว่า แต่ฉันหวังว่ามันจะช่วยคุณได้

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

PS: คุณมีการอ่านมากมายให้ทำ

เหมือนที่คนอื่นพูดอ่าน:

• องค์ประกอบของการออกแบบกราฟิกโดย Alexander White
• องค์ประกอบของสไตล์การพิมพ์โดย Robert Bringhurst
• อย่าทำให้ฉันคิดโดย Steve Krug

นอกจากนี้ยังมีแหล่งข้อมูลออนไลน์มากมายเช่นบล็อกและชุมชนที่น่าจับตามอง: enboard.co/webdesign/