Principles for Creating a Visual De

Principles for Creating a Visual Design
A successful visual design applies the following principles to elements noted above and effectively brings them together in a way that makes sense. When trying to figure out how to use the basic elements consider:

Unity has to do with all elements on a page visually or conceptually appearing to belong together. Visual design must strike a balance between unity and variety to avoid a dull or overwhelming design.
Gestalt, in visual design, helps users perceive the overall design as opposed to individual elements. If the design elements are arranged properly, the Gestalt of the overall design will be very clear.
Space is “defined when something is placed in it”, according to Alex White in his book, The Elements of Graphic Design. Incorporating space into a design helps reduce noise, increase readability, and/or create illusion. White space is an important part of your layout strategy.
Hierarchy shows the difference in significance between items. Designers often create hierarchies through different font sizes, colors, and placement on the page. Usually, items at the top are perceived as most important.
Balance creates the perception that there is equal distribution. This does not always imply that there is symmetry.
Contrast focuses on making items stand out by emphasizing differences in size, color, direction, and other characteristics.
Scale identifies a range of sizes; it creates interest and depth by demonstrating how each item relates to each other based on size.
Dominance focuses on having one element as the focal point and others being subordinate. This is often done through scaling and contrasting based on size, color, position, shape, etc.
Similarity refers to creating continuity throughout a design without direct duplication. Similarity is used to make pieces work together over an interface and help users learn the interface quicker.
Example of Pulling it all together
Applying design principles to the basic elements can seem overwhelming at first but once you start pulling a page or concept together, it becomes easier. Below is an example homepage that features some of the principles in action:

Screenshot diagram of Stopbullying.gov showing contrast, hierarchy, dominance, space, texture, scale, lines, shapes.

Color contrast was applied to the logo making the word “stop” stand out
Text spacing and size creates a visual hierarchy
Featured image in the carousel dominates over the smaller images below it to create a focal point
White space is used around text and between sections to allow the page to breath
Textured background to helps the elements on the page stand out on top of it
Map showing scale
Lines to divide sections
Shapes to create buttons
Additional Information
Alex White’s The Elements of Graphic Design (2nd Edition)
Jim Krause’s Design Basics Index
Poppy Evans and Mark Thomas’ Exploring the Elements of Design
UX Design Defined Site exit disclaimer
Elements and Principles of Visual Design Site exit disclaimer
Visual Design and Usability Yellow Brick Road Site exit disclaimer
Jesse James Garrett’s The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition).

ผลลัพธ์ (ไทย) 1:

หลักการสำหรับการสร้างการออกแบบภาพออกแบบภาพสำเร็จใช้หลักการต่อไปนี้องค์ประกอบที่กล่าวข้างต้น และมีประสิทธิภาพนำพวกเขาในทางที่เหมาะสม เมื่อพยายามคิดหาวิธีการใช้ องค์ประกอบพื้นฐานพิจารณา:ความสามัคคีมีการดำเนินการกับองค์ประกอบทั้งหมดบนหน้าปรากฏสายตา หรือทางแนวคิดการ อยู่ร่วมกัน ออกแบบภาพต้องสร้างความสมดุลระหว่างความสามัคคีและความหลากหลายเพื่อหลีกเลี่ยงการออกแบบที่น่าเบื่อ หรือครอบงำGestalt ในการออกแบบภาพ ช่วยให้ผู้ใช้รับรู้การออกแบบโดยรวมเมื่อเทียบกับแต่ละองค์ประกอบ ถ้าจัดองค์ประกอบการออกแบบอย่างถูกต้อง Gestalt ของแบบจะชัดเจนมากพื้นที่เป็น "กำหนดเมื่อสิ่งที่อยู่ในนั้น" ไปตามอเล็กซ์ไวท์ในหนังสือของเขา ในองค์ประกอบของกราฟฟิกดีไซน์ ผสมผสานพื้นที่ในการออกแบบช่วยลดเสียง เพิ่มอ่าน และ/หรือสร้างภาพลวงตา ช่องว่างเป็นส่วนสำคัญของกลยุทธ์ของคุณเค้าลำดับชั้นแสดงความแตกต่างของความสำคัญระหว่างรายการ นักออกแบบมักจะสร้างลำดับชั้นผ่านขนาดแบบอักษรที่แตกต่างกัน สี และการจัดวางหน้า มักจะ รายการด้านบนจะมองเห็นเป็นสำคัญที่สุดสมดุลสร้างการรับรู้ว่ามีการกระจายเท่ากัน นี้ไม่ได้เสมอหมายความว่ามีความสมมาตรความเปรียบต่างมุ่งเน้นไปที่การทำรายการที่โดดเด่น โดยเน้นความแตกต่างในขนาด สี ทิศทาง และลักษณะอื่น ๆขนาดระบุช่วงของขนาด สร้างดอกเบี้ยและความลึก โดยสาธิตวิธีแต่ละรายการที่เกี่ยวข้องกับแต่ละอื่น ๆ ขึ้นอยู่กับขนาดปกครองโดยมุ่งเน้นไปที่การมีองค์ประกอบหนึ่งเป็นจุดโฟกัสและอื่น ๆ ถูกย่อย มักจะทำการปรับขนาด และตัดตามขนาด ตำแหน่ง รูปร่าง สี ฯลฯความคล้ายคลึงหมายถึงการสร้างความต่อเนื่องตลอดการออกแบบโดยไม่ซ้ำกันโดยตรง ความคล้ายคลึงกันถูกใช้เพื่อทำให้ชิ้นส่วนทำงานร่วมกันผ่านอินเทอร์เฟซ และช่วยให้ผู้ใช้เรียนรู้อินเทอร์เฟซได้อย่างรวดเร็วตัวอย่างของ Pulling ไว้ด้วยกันใช้หลักการองค์ประกอบพื้นฐานสามารถดูล้นหลามออกแบบตอนแรกแต่เมื่อ คุณเริ่มดึงหน้า หรือแนวคิดร่วมกัน มันกลายเป็นง่าย ด้านล่างเป็นหน้าแรกเป็นตัวอย่างที่มีบางส่วนของหลักการในการดำเนินการ:แผนภาพภาพหน้าจอของ Stopbullying.gov ที่แสดงความคมชัด ลำดับชั้น ปกครอง พื้นที่ เนื้อ มาตราส่วน เส้น รูปร่างสีความคมชัดใช้โลโก้ที่ทำใน word "stop" เด่นระยะห่างของข้อความและขนาดสร้างลำดับภาพภาพที่โดดเด่นในรูปแบบหมุนที่กุมอำนาจเหนือภาพเล็กด้านล่างเพื่อสร้างจุดโฟกัสใช้พื้นที่สีขาวรอบ ๆ และ ระหว่างส่วนต่าง ๆ เพื่อทำให้หน้านั้นลมหายใจพื้นหลังพื้นผิวเพื่อช่วยให้องค์ประกอบที่ยืนหน้าออกด้านบนของมันแผนที่แสดงระดับบรรทัดการแบ่งส่วนรูปทรงการสร้างปุ่มข้อมูลเพิ่มเติมอเล็กซ์ไวท์องค์ประกอบของกราฟิกออกแบบ (ฉบับที่ 2)ดัชนี Jim Krause ออกแบบพื้นฐานงาดำอีแวนส์และโทมัสมาร์คสำรวจองค์ประกอบของการออกแบบไซต์กำหนดออกแบบ UX ออกปฏิเสธองค์ประกอบและหลักการของภาพออกแบบเว็บไซต์ออกจากการปฏิเสธออกแบบและการใช้งานเว็บไซต์ถนนอิฐสีเหลืองออกจากปฏิเสธเจสซีเจมส์เร็ตองค์ประกอบของประสบการณ์ผู้ใช้: ผู้ใช้ออกแบบ สำหรับเว็บ และ (ฉบับที่ 2)

ผลลัพธ์ (ไทย) 2:

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

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

. ภาพหน้าจอของแผนภาพแสดง Stopbullying.gov ตรงกันข้ามลำดับชั้นการปกครอง, พื้นที่, เนื้อ, ขนาด, เส้นรูปร่าง

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

ผลลัพธ์ (ไทย) 3:

หลักการสำหรับการสร้างการออกแบบภาพความสำเร็จออกแบบภาพใช้หลักการตามองค์ประกอบที่ระบุไว้ข้างต้นได้อย่างมีประสิทธิภาพและทำให้พวกเขาเข้าด้วยกันในทางที่เป็นไปได้ เมื่อพยายามที่จะคิดออกว่าจะใช้องค์ประกอบขั้นพื้นฐานพิจารณา :ความสามัคคีได้จะทำอย่างไรกับองค์ประกอบทั้งหมดบนหน้าเว็บหรือแนวคิดที่ปรากฏอยู่ด้วยกันสายตา ออกแบบทัศนศิลป์ต้องสร้างสมดุลระหว่างความเป็นเอกภาพและความหลากหลายเพื่อหลีกเลี่ยงทึบ หรือยุ่งยากในการออกแบบเกสตัลท์ ในการออกแบบภาพช่วยให้ผู้ใช้รับรู้การออกแบบโดยรวมเมื่อเทียบกับองค์ประกอบของแต่ละบุคคล ถ้าองค์ประกอบของการออกแบบจัดอย่างถูกต้อง เกสตัลต์ของการออกแบบโดยรวมจะชัดเจนมากพื้นที่คือ " กำหนดเมื่อสิ่งที่อยู่ในนั้น " ตามที่อเล็กซ์สีขาว ในหนังสือของเขา , องค์ประกอบของการออกแบบกราฟิก รวมพื้นที่ในการออกแบบ ช่วยลดเสียง , เพิ่มการอ่านและ / หรือสร้างภาพลวงตา พื้นที่สีขาวเป็นส่วนสำคัญของกลยุทธ์เค้าโครงของคุณลำดับชั้นแสดงความแตกต่างในความสัมพันธ์ระหว่างรายการ นักออกแบบมักจะสร้างลำดับชั้นด้วยขนาดตัวอักษรที่แตกต่างกัน สี และการจัดวางในหน้า ปกติแล้ว รายการที่ด้านบนมีการรับรู้ที่สำคัญที่สุดสร้างการรับรู้ว่ามีความสมดุลเท่าเทียมกันกระจาย นี้ไม่ได้หมายความว่าไม่มีสมมาตรความคมชัดเน้นทำสินค้าที่โดดเด่น โดยเน้นความแตกต่างในขนาด ทิศทาง สี และลักษณะอื่น ๆขนาดระบุช่วงของขนาด มันสร้างความสนใจและลึก โดยแสดงให้เห็นว่าแต่ละรายการที่เกี่ยวข้องกับแต่ละอื่น ๆขึ้นอยู่กับขนาดการปกครองโดยมีองค์ประกอบหนึ่งเป็นจุดโฟกัสและคนอื่น ๆ เป็นลูกน้อง นี้มักจะทำผ่านการปรับขนาดและตัดตามขนาด , สี , ตำแหน่ง , รูปร่าง ฯลฯความเหมือน หมายถึง การสร้างความต่อเนื่องตลอดการออกแบบโดยไม่ซ้ำโดยตรง ความเหมือนคือ ใช้เพื่อให้ชิ้นทำงานร่วมกันผ่านอินเตอร์เฟซและช่วยให้ผู้ใช้เรียนรู้อินเตอร์เฟซได้อย่างรวดเร็วตัวอย่างของการดึงมันทั้งหมดเข้าด้วยกันการประยุกต์ใช้หลักการออกแบบองค์ประกอบขั้นพื้นฐานอาจดูยุ่งยากในตอนแรก แต่เมื่อคุณเริ่มต้นการดึงหน้า หรือแนวคิดด้วยกัน มันก็จะง่ายขึ้น ด้านล่างนี้คือตัวอย่างที่หน้าแรกที่คุณลักษณะบางอย่างของหลักการในการดำเนินการ :แผนภาพแสดงความคมชัดของหน้าจอ stopbullying.gov ลำดับ การปกครอง , พื้นที่ , เนื้อ , ขนาด , เส้น , รูปร่างสีชัด ใช้เป็นโลโก้ที่ทำให้คำว่า " หยุด " โดดเด่นระยะห่างระหว่างข้อความและสร้างลำดับภาพขนาดภาพที่โดดเด่นในม้าหมุนครอบงำเหนือภาพขนาดเล็กด้านล่างเพื่อสร้างจุดโฟกัสพื้นที่สีขาวใช้รอบข้อความและระหว่างส่วนต่าง ๆ เพื่อให้หน้าเพื่อลมหายใจพื้นผิวพื้นหลังเพื่อช่วยให้องค์ประกอบบนเพจโดดเด่นด้านบนของมันแผนที่แสดงมาตราส่วนเส้นเพื่อแบ่งส่วนการสร้างปุ่มรูปร่างข้อมูลเพิ่มเติมอเล็กซ์สีขาวองค์ประกอบของการออกแบบกราฟฟิก ( 2 รุ่น )จิม กรอสดัชนีพื้นฐานการออกแบบป๊อปปี้ อีแวนส์และมาร์คโธมัส " สำรวจองค์ประกอบของการออกแบบux ออกแบบกำหนดความรับผิดชอบออกจากเว็บไซต์องค์ประกอบและหลักการของการออกแบบเว็บไซต์ความรับผิดชอบออกจากภาพการออกแบบภาพและการใช้งานถนนอิฐสีเหลืองสดออกจากความรับผิดชอบเจสซี่ เจมส์ การ์เร็ต เป็นองค์ประกอบของประสบการณ์ของผู้ใช้ : ผู้ใช้เป็นศูนย์กลางการออกแบบเว็บและเหนือ ( 2 รุ่น )