แอพที่อาจลดภาระ "วิทยาศาสตร์" ในการออกแบบ

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

ด้วยเหตุนี้จึงมีแอพใหม่ที่ยอดเยี่ยมจำนวนหนึ่งที่นักออกแบบทุกคนควรสำรวจเพื่อเป็นส่วนเสริมที่มีศักยภาพให้กับชุดเครื่องมือของเขา/เธอ!

FRONTIFY

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

นี่คือโลโก้พื้นฐาน Frontify ตัดสินใจว่า "การหยด" เป็นกุญแจสำคัญที่นี่ แต่พวกเขาสามารถทำสิ่งอื่น ๆ ได้มากมาย โดยยังคงรักษาโลโก้ไว้อย่างสม่ำเสมอ นี่คือการเปลี่ยนแปลงสี:

และนี่คือตัวอย่างรูปแบบต่างๆ ของโลโก้พื้นฐาน:

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

นักแต่งเพลงภาพ

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

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

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

ออกแบบล่า

เมื่อแรงบันดาลใจของคุณหยุดนิ่ง คุณอาจแสวงหาโดยค้นหาเว็บไซต์ใหม่ๆ ที่สามารถให้แนวคิดดีๆ แก่คุณได้ นั่นอาจเป็นงานที่ต้องใช้เวลามาก ทำไมไม่ใช้วิธีที่สะดวกกว่านี้ล่ะ Design Hunt เป็น "สำนักหักบัญชี" แปลก ๆ แต่มันเปลี่ยนละครทั้งหมดทุกวัน มันดึงการออกแบบใหม่ที่ยอดเยี่ยมที่พบใน Pinterest, Dribble, Designer News, DesignInspiraton และอีกมากมาย และเผยแพร่สำหรับนักออกแบบที่มองหาแรงบันดาลใจและแนวคิดใหม่ๆ ตอนนี้คุณสามารถไปที่เดียวทุกวันและพบกับคอลเลกชันใหม่ทั้งหมด

TOOKAPIC

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

MARVELAPP

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

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

CSS เคลื่อนไหว

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

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

อย่างไรก็ตาม Animate CSS นั้นใช้งานง่ายมาก คุณดาวน์โหลด แนบ CSS เช่นเดียวกับ jQuery และส่วนประกอบอื่น ๆ ที่คุณต้องการและเริ่มสร้างภาพเคลื่อนไหว มีบทช่วยสอนที่ยอดเยี่ยมบน YouTube เพื่อให้คุณเริ่มต้นได้

สี

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

เครื่องสร้างโครงร่างสีอัตโนมัติสำหรับผู้มีปัญหาสี

CIRCULUS.SVG

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

สิ่งเล็กๆ น้อยๆ ที่จะดึงดูดผู้เข้าชมได้ดียิ่งขึ้น

SVG แบบวงกลมน่าจะดีกว่า CSS ในการสร้างองค์ประกอบประเภทนี้ เมื่อคุณดาวน์โหลดแล้ว คุณมี 3 ตัวเลือก: คุณสามารถวาดส่วนต่างๆ ของคุณในโปรแกรมแก้ไขกราฟิก เช่น Sketch แล้วส่งออกเป็น SVG เพิ่มการโต้ตอบและฝังไว้ คุณสามารถวาดภาคของคุณด้วยรหัส หรือคุณสามารถใช้เครื่องกำเนิด Circulus ได้ในแอป

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

เมื่อใช้ SVG คุณสามารถวาดรูปร่างใดๆ ก็ได้ตามต้องการ โดยใช้คำสั่งเส้นและส่วนโค้งที่เจาะจงไปยัง “เสี้ยววงกลม” ที่คุณต้องการ – นี่คือตัวอย่าง:

เมื่อคุณวาดเวดจ์และไอคอนและ/หรือเนื้อหาของคุณแล้ว คุณก็เข้าร่วมได้

เมตาฟลอป

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

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

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

FONTFLAME

นี่เป็น "เด็กใหม่ในบล็อก" จริงๆ Fontflame พยายามที่จะแบ่งเบาภาระของนักออกแบบ – ค้นหาการจับคู่แบบอักษรที่ใช้งานได้จริง ขณะนี้มีการจับคู่ที่เผยแพร่ 10 รายการบนไซต์ แต่กำลังเพิ่มทุกวัน ตัวอย่างของการจับคู่โดยใช้ไลบรารีแบบอักษรฟรีของ Google ได้แก่ "Lobster-Asap" และ "Roboto-Open Sans" ห้องสมุดเพิ่มเติมจะถูกเพิ่มเร็ว ๆ นี้ จับตาดูไซต์นี้ให้ดี - เร็วๆ นี้จะมีข้อเสนอมากมายให้คุณจับคู่

ฟรีแลนซ์ PODCAST

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

ในวิสัยทัศน์

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

ในการเปรียบเทียบ In-vision กับแอป Marvel ความแตกต่างที่สำคัญอาจเป็นดังนี้:

1. InVision มีคุณสมบัติมากกว่า Marvel แต่ก็ทำให้ซับซ้อนมากขึ้น ตัวอย่างเช่น มีฟีเจอร์การทำงานร่วมกันแบบสดมากขึ้น เครื่องมือสำหรับภาพหน้าจอคำอธิบายประกอบ และองค์ประกอบประวัติศาสตร์ที่ยอดเยี่ยม
2. Marvel มีแอพ iOS และกำลังทำงานบนแอพสำหรับ Android และ iPad – InVision ไม่มีสิ่งเหล่านี้
3. InVision น่าจะดีกว่าสำหรับทีมที่ใหญ่กว่า Marvel ดีกว่าสำหรับทีมเดี่ยวหรือทีมเล็ก

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

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