Basic Principles of Design

• Visual Design


  focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements
• It enhances it by engaging users and helping to build trust and interest in the brand


  A successful visual design does not take away from the content on the page or function. Instead?
• •Line

  •Shapes

  •Form

  •Color

  •Texture

  •Typography


  Basic Elements of Visual Design
• Line


  connects two points and can be used to help define shapes, make divisions, and create textures
• Shapes


  have two dimensions and are measured by their height and width; All objects are composed of it and all visual elements are it in some way
• Geometric Shape and Organic Shape


  2 Types of Shape
• Forms


  are three-dimensional, and can be measured by height, width, and depth. It can be created by combining shapes, and it can be enhanced by color or texture
• Color


  •choices and combinations are used to differentiate items, create depth, add emphasis, and/or help organize information
• Color theory


  examines how various choices psychologically impact users
• •Hue

  •Saturation (Intensity)

  •Brightness (Value)


  3 Properties of Color
• Texture


  •is the way a surface feels or is perceived to feel
• Texture


  •It is used to create a visual tone and can influence the look and feel of a piece of graphic design work. It is also used to attract or repel interest to an element depending on the pleasantness of the texture
• Image and Pattern


  2 Types of Texture
• Typography


  •is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader
• Typography


  should guide and inform your users, optimize readability and accessibility, and ensure an excellent user experience
• •Serif

  •San Serif

  •Script

  •Display


  Types of Font
• Typeface


  is a family of related fonts
• Fonts


  refer to the weights, widths, and styles that constitute a typeface
• •Contrast

  •Balance

  •Emphasis

  •Proportion

  •Hierarchy

  •Repetition

  •Rhythm

  •Pattern

  •White Space

  •Movement

  •Variety

  •Unity


  Principles of Design
• Contrast


  refers to how different elements are in a design, particularly adjacent elements. These differences make various elements stand out
• Balance


  All design elements and principles—typography, colors, images, shapes, patterns, etc.—carry a visual weight. Some elements are heavy and draw the eye, while other elements are lighter. The way these elements are laid out on a page should create a feeling of
• Symmetrical and Asymmetrical


  2 Types of Balance
• Balance


  Graphic design is the art of?
• Emphasis


  deals with the parts of a design that are meant to stand out. In most cases, this means the most important information the design is meant to convey
• Proportion


  is the size of elements in relation to one another. It's signals what's important in a design and what isn't. Larger elements are more important, smaller elements less
• Hierarchy


  It refers to the importance of elements within a design. The most important elements (or content) should appear to be the most important.
• Repetition


  is repeating a single element through the design. Using repeated elements on a layout can be pleasing to the viewer
• Rhythm


  is the visual tempo of a combination of elements when used repeatedly, and with variation, it gives the feeling of organized movement
• Pattern


  is the repetition of more than one design element. While repetition focuses on a single element being repeated, pattern refers to multiple elements repeated throughout a design (e.g. wallpapers and backgrounds)
• White space


  also referred to as "negative space"— is the areas of a design that do not include any design elements. The space is, effectively, empty
• Movement


  refers to the way the eye travels over a design. The most important element should lead to the next most important and so on. This is done through positioning (the eye naturally falls on certain areas of a design first), emphasis, and other design elements already mentioned
• Variety


  in design is used to create visual interest. Without variety, a design can very quickly become monotonous, causing the user to lose interest. Variety can be created in a variety of ways, through color, typography, images, shapes, and virtually any other design element
• Unity


  is created when there is a relationship between the different elements in a design or artwork. Unity adds order to a composition and helps us see it as one thing instead of a number of separate parts
• - Clarity

  - Familiarity

  - User Control

  - Hierarchy

  - Consistency

  - Responsiveness


  Key Principles of UI Design
• Clarity


  The very first principle every quality UI designer will follow is "simplicity"; All UI design elements such as language, visual content, flow, or hierarchy, need to be convenient and effortless to use, providing your customer with a great user experience
• Familiarity


  A quality UI design will provide the user with a sense; When we work on E-commerce web design, for example, we input commonly accepted symbols such as "x" for exit from the app or "+" for adding a product in the chart
• User Control


  As an example, whenever you're creating forms, allow users to click the button and go back to the page they were last on. Don't take them all the way back to the homepage or the start of the form
• Jakob Nielsen


  Who said this quote: : "Users often choose system functions by mistake and will need a clearly marked 'emergency exit' to leave the unwanted state without having to go through an extended dialogue. Support undo and redo."
• Hierarchy


  It ensures that users see the most important information first, then the next, and so on, and is established through various elements.
• Consistency


  The whole UI design should serve one goal, to provide consistent visual and brand identity that is able to function regardless of device; requires user-friendliness and intuitive design whose aesthetic will speak positively of said product or brand.