2d Visual Basics For Designers Pdf Download UPDATED

2d Visual Basics For Designers Pdf Download

Visual design is about creating and making the general aesthetics of a product consistent. To create the aesthetic fashion of a website or app, we work with fundamental elements of visual blueprint, arranging them co-ordinate to principles of design. These elements and principles together form the building blocks of visual blueprint, and a firm understanding of them is crucial in creating a visual design of whatsoever product.

Here, nosotros'll introduce yous to the elements of visual design: line, shape, negative/white space, volume, value, colour and texture. While a close examination of each element is usually not necessary in your daily work every bit a designer, the principles of design — how to place the elements together to build pages and app screens optimally — play a crucial part in your role. Learning how to reach unity, gestalt, hierarchy, residuum, contrast, scale, dominance, and similarity will advantage you fourth dimension and over again. Hither, we will also prove y'all how you should consider placing these indispensable visual elements to make the maximum bear on. And so, let'southward begin.

Elements of Visual Design

Any production — from software products such as websites and apps to hardware products such as toasters and hairdryers — can exist cleaved down into fundamental elements of visual design, equally described by Alan Hashimoto, associate professor of Graphic Design and Computer Art at Utah Country Academy, and Mike Clayton, manager and associate professor of Computer Graphic Arts at the University of the Incarnate Word, in their book, Visual Pattern Fundamentals: A Digital Approach. These elements are the basic tools that we visual designers use in our daily work, and having a basic understanding of them is definitely a prerequisite for the job.

Line

Lines are strokes connecting two points, and the most basic chemical element of visual design. We tin can utilise them to create shapes, and when we repeat them, we can class patterns that create textures.

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC Past-NC-SA iii.0

A line connects two points and is the simplest chemical element of blueprint. Put it this way, you lot can't strip downward any lower than a i-dimensional object in the world of design. (In science, yous tin, but that'due south another story.)

Although simple, lines tin possess a large variety of properties that let us to convey a range of expressions. For example, lines can be thick or sparse, straight or curved, have uniform width or taper off, be geometric (i.e., look like they are fatigued past a ruler or compass) or organic (i.east., look like they are fatigued by hand).

Writer/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

Lines are simple, but tin can convey different emotions by using different properties.

A line can also be implied: that is, suggested by forming an invisible connexion between other elements. In the logo of the Interaction Design Foundation, for instance, the words "Interaction Design Foundation" around the tree connect to create a semicircular implied line.

Author/Copyright holder: Teo Yu Siang and Interaction Pattern Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

The words "Interaction Blueprint Foundation" form an unsaid semicircular line in our logo.

Shape

Shapes are self-contained areas, commonly formed by lines (although they may also be formed by using a different colour, value or texture). A shape has two dimensions: length and width.

Writer/Copyright holder: Teo Yu Siang and Interaction Pattern Foundation. Copyright terms and licence: CC By-NC-SA 3.0

We tin can form shapes using lines (as above), or past using differences in color, texture or value.

We tend to identify objects past their basic shapes, and only focus on the details (such as lines, values, colours and textures) on closer inspection. For this reason, shapes are crucial elements that we designers use for quick and effective communication.

Negative/White Space

Negative space (likewise known as white space) is the empty area around a (positive) shape. The relation between the shape and the space is called figure/footing, where the shape is the figure and the area around the shape is the ground. We should exist aware that when designing positive shapes, we are besides designing negative spaces at the aforementioned fourth dimension. Negative space is just equally important as the positive shape itself — because it helps to define the boundaries of the positive infinite and brings residuum to a composition.

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC By-NC-SA 3.0

Negative space, besides called white space, is the empty area effectually a positive shape. You can cull to see this as a blue ball set against a low-cal blue rectangle — or, is it a light blueish rectangle with a hole in information technology?

Some designs brand use of negative space to create interesting visual effects. For example, the famous Earth Wide Fund for Nature (WWF) logo makes use of the confusion between positive shape and negative infinite to create the prototype of a panda.

Author/Copyright holder: World Broad Fund for Nature (WWF). Copyright terms and licence: Fair utilise

WWF's logo doesn't explicitly draw out the entire panda: it cleverly uses negative (white) space around the black shapes to propose the residual of the panda.

Volume

Volume applies to visuals that are three-dimensional and have length, width and depth. We rarely use volume in visual design, because near digital products end up being viewed on a 2nd screen, although some apps and websites do use 3D models and graphics. (Technically, though, 3D images viewed on a 2D screen are still 2d images.)

Author/Copyright holder: Teo Yu Siang and Interaction Pattern Foundation. Copyright terms and licence: CC BY-NC-SA iii.0

Volume has 3 dimensions: length, width and depth. This image is a simulation of book in 2d graphics.

Value

Value, quite just, describes light and dark.

Writer/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

Lite value vs. night value: value describes lightness and darkness.

A design with a high dissimilarity of values (i.e., one which makes utilise of light and dark values) creates a sense of clarity, while a design with similar values creates a sense of subtlety. Nosotros tin also utilise value to simulate volume in 2D, for example, by using lighter values where the light hits the object and darker values for shadows.

Author/Copyright holder: Teo Yu Siang and Interaction Blueprint Foundation. Copyright terms and licence: CC By-NC-SA 3.0

Differences in values create articulate designs, while designs using similar values tend to look subtle.

Colour

Colour is an element of light. Color theory is a branch of design focused on the mixing and usage of different colours in blueprint and art. In colour theory, an important stardom exists betwixt colours that mix subtractively and colours that mix additively.

In paint, colours mix subtractively because the pigments in paints absorb low-cal. When different pigments are mixed together, the mixture absorbs a wider range of lite, resulting in a darker color. A subtractive mix of cyan, magenta and yellow will result in a black colour. A subtractive mix of colours in paint and print produces the CMYK (i.east., Cyan, Grandagenta, Yellow and blacG) color system.

In digital design, where the product shows up on a screen, colours mix additively, since the screen emits low-cal and colours add to i another accordingly. When different colours are mixed together on a screen, the mixture emits a wider range of light, resulting in a lighter color. An additive mix of cerise, blue and greenish colours on screens volition produce white light. An additive mix of colours on digital screens produces the RGB (i.e., Red, 1000reen, Blue) colour system.

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC Past-NC-SA 3.0

The subtractive mix of colours in pigment and print produces the CMYK colour system. The additive mix of colours on digital screens produces the RGB color arrangement.

We use colours in visual design to convey emotions in and add together variety and involvement to our designs, separate distinct areas of a page, and differentiate our work from the competition.

Texture

Texture is the surface quality of an object.

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC Past-NC-SA iii.0

Texture tin can be created past a repeated pattern of lines, or by using tiled images of textures. To a higher place, the diagonal lines add a 'grip' effect to an otherwise 'smooth' rectangle.

As a designer, you can work with two types of textures: tactile textures, where y'all can feel the texture, and unsaid textures, where you can just meet — i.e., not experience — the texture. Most visual designers volition work with implied textures, since screens (at least as far as the state of the art had pushed them by the mid-2010s) are unable to produce tactile textures.

The app icon designs in iOS 6 and earlier mimic the sleeky texture of glass to incite users to tap them. Later on, Apple (in)famously introduced a linen textile texture to much of its user interface. With the popularity of apartment design (a minimalist mode that features make clean spaces and two-dimensional, flat illustrations), the use of textures in visual design would greatly subtract by the mid-2010s — although they can withal be very useful.

Writer/Copyright holder: Unknown. Copyright terms and licence: Off-white use

iOS one-half dozen app icons feature a glossy texture so that they look like actual buttons.

Writer/Copyright holder: Unknown. Copyright terms and licence: Fair employ

Around 2011, Apple introduced a widespread employ of linen texture (which first appeared on iOS) in all of its operating systems.

Principles of Pattern

The elements of visual design — line, shape, negative/white space, volume, value, colour and texture — describe the building blocks of a product's aesthetics. On the other mitt, the principles of design tell united states how these elements tin and should go together for the all-time results. Many of the principles below are closely related and complement one another.

Just how important are principles of design to a visual designer'south chore? Partner and chief inquiry and development officer at the Applied Management Sciences Constitute William Lidwell, in his landmark and widely referenced volume Universal Principles of Blueprint, explains:

"The best designers sometimes disregard the principles of blueprint. When they practise so, still, there is usually some compensating merit attained at the price of the violation. Unless you are sure of doing equally well, it is best to abide past the principles." – William Lidwell

Unity

Unity has to exercise with creating a sense of harmony between all elements in a page. A page with elements that are visually or conceptually bundled together will likely create a sense of unity.

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

A lack of unity in designs can create a sense of unease and chaos. Our eyes govern our judgements.

When we're designing websites, we can brand apply of a grid for achieving a sense of unity, since elements organised in a filigree volition follow an orderly arrangement. Nosotros exercise demand, nonetheless, to innovate some diversity in our work in social club to strike a balance between a slow and a chaotic design.

Gestalt

Gestalt refers to our tendency to perceive the sum of all parts as opposed to the private elements. The man centre and encephalon perceive a unified shape in a different way to the style they perceive the individual parts of such shapes. In item, nosotros tend to perceive the overall shape of an object first, before perceiving the details (lines, textures, etc.) of the object.

Writer/Copyright holder: Teo Yu Siang and Interaction Pattern Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

Gestalt is the reason that we can see a square, circle and triangle even though the lines are not consummate. Nosotros see the whole formed by the dotted lines first, before perceiving the split up dotted lines in each of the images.

The WWF logo, shown earlier, is an example of making apply of the principle of gestalt to create interesting designs. By placing the parts of a panda near i another and strategically, the pattern makes use of our tendency to view the whole of an image rather than its parts, thereby creating an illusion of a panda.

Gestalt is of import, for instance, in making divide sections of a website distinct by increasing the white space betwixt them. As designers, we should make sure that the parts of a website we grouping together past using gestalt principles — i.e., if they are close to ane another, take the same shape, and/or are similarly sized — are indeed conceptually grouped together. "Accidentally" group elements which are not conceptually similar will result in dislocated users.

Author/Copyright holder: Teo Yu Siang and Interaction Pattern Foundation. Copyright terms and licence: CC BY-NC-SA three.0

Designs with clear sections are easier to process and scan than those without clear distinctions betwixt sections — particularly if the sections are conceptually distinct.

Bureaucracy

Hierarchy shows the difference in importance of the elements in a pattern. Color and size are the well-nigh common means nosotros can create hierarchy — for case, past highlighting a master button, or using larger fonts for headings. Items that announced at the top of a page or app also tend to be viewed as having a higher hierarchy than those appearing below.

Author/Copyright holder: Teo Yu Siang and Interaction Pattern Foundation. Copyright terms and licence: CC BY-NC-SA iii.0

Font size and style is i of the ways to institute hierarchy.

Residuum

Residuum is the principle governing how we distribute the elements of a design evenly. Counterbalanced designs tend to appear calm, stable and natural, while imbalanced designs make us feel uneasy.

Author/Copyright holder: Teo Yu Siang and Interaction Blueprint Foundation. Copyright terms and licence: CC Past-NC-SA 3.0

Balanced designs announced stable, while imbalanced designs seem unsustainable and unnatural.

Balance tin exist achieved by having symmetry in the pattern (for instance, having a webpage with centralised text and images). Still, you lot can besides achieve residual without symmetry — mayhap unsurprisingly, this is known every bit asymmetrical balance. We achieve asymmetrical balance when nosotros arrange differently sized elements in a style that results in unity. Nosotros can imagine a centre betoken of the design and distribute the elements in a way that creates balance.

Contrast

Nosotros apply contrast to make an element stand out by manipulating differences in color, value, size and other factors. For instance, as designers (exist information technology in logo design, UI blueprint, etc.), we oft use the colour red to make certain elements stand out. In iOS, scarlet often appears in the "Delete" action to signify that an (oft) irreversible action is about to occur. On the other paw, dark-green is frequently something we apply (at least in Western design) in positive actions such as "Go" and "Accept" — thus highlighting that nosotros cannot ignore the cultural significant of colours when designing for contrast. If you lot're designing for a client in a far-off country, learn virtually and adjust your work to arrange to the cultural considerations. For instance, ask yourself, "Is their ruddy lucky or angry?" or "Is their blackness businesslike or funerary?"

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC Past-NC-SA iii.0

Red, a colour with high contrast, is used widely in iOS for the "Delete" office.

Scale

Calibration describes the relative sizes of the elements in a design. By using scale to make an chemical element larger than others appearing with it, yous can emphasise that element. Not only can y'all make an element stand out this way—you tin likewise use scale to create a sense of depth (since nearer objects appear larger to the human eye). Exaggerated scales of images also add a certain level of interest and drama to them.

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

Scale can be used to create a hierarchy for and add together accent to certain elements on a pattern.

Authorisation

Dominance creates focus on a single element. We tin can use colour, shape, dissimilarity, scale, and/or positioning to accomplish this. For instance, about websites take a main "hero" image, which uses authorisation to appeal to users, drawing them to it naturally.

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC By-NC-SA 3.0

Authorization can be established past using positioning, shape and colour, among many other factors.

When working in visual pattern, nosotros should ensure that we utilize dominance while even so maintaining the unity and balance of websites — if not, the design would potentially produce a disorienting experience for users.

Examples to highlight design elements and principles

With the elements of visual blueprint and blueprint principles in mind, we volition analyse a few websites to see how they come together, and why the designs work.

Google'due south homepage

Google's homepage is one of the well-nigh visited webpages in the world. The raw simplicity of the page is partly why it is so well designed, but here are other factors that make this page piece of work superbly:

Author/Copyright holder: Google Inc., https://www.google.com/. Copyright terms and licence: Fair Apply.

• Dominance: The large Google logo and search box gives it potency, making information technology the core (and to nigh, sole) focus of the entire page.
• Dissimilarity (and colour): Google's logo uses vivid (by and large main) colours, and these mix well, forming a visually pleasing logo. The logo as well has sufficient contrast confronting a white groundwork, making it stand up out on the page.
• Shape: The search box uses a rectangular shape to delineate the search field, making it very usable.
• Negative space: Google's homepage is predominantly made out of negative infinite, which makes the search box (the main office of the page) the middle of attention. The negative space besides works well for the page, every bit it acts like a blank sheet of paper earlier users blazon in their search terms.
• Balance: The page is near vertically symmetrical, resulting in a sense of balance that is very pleasing and calm to look at.

Quartz'south homepage

Quartz is a digital-first and mobile-first news bureau with a global audition, launched in 2012 past Atlantic Media, which also publishes The Atlantic. It has a bold homepage that puts the featured news stories front end and centre. Hither'south how the principles of blueprint and blueprint elements come together:

Author/Copyright holder: Quartz, http://qz.com/. Copyright terms and licence: Fair Apply.

It's like shooting fish in a barrel to admire the issue equally a whole without looking past it at the basics and bolts—the elements that are fix together so well and according to age-old principles then every bit to create that 'wow' effect.

• Dominance: The master news story immediately catches your eyes because its large, bold font makes it dominant on the homepage.
• Hierarchy: The homepage uses a clear hierarchy to establish the relative importance of various elements. The main story, with the largest text and bolded weight, has the highest hierarchy. The next four stories, positioned below the main story, have smaller fonts to show their subordinate hierarchy under the main story.
• Scale, value and colour: Quartz's homepage features a large (total page height) "Q", which is a mask of the hero paradigm for the main story. The large "Q" rapidly establishes the identity of the website (since "Q" stands for "Quartz") with the utilize of scale. However, the relative light value and greyscale color of the "Q" makes it fade into the background, thus bringing the overall focus to the headline of the main story instead.
• Negative space: Nigh of the homepage is negative space, which allows the content to shine through. When the mouse is brought over the main story headline, the "Q" mask disappears, filling the negative space with the featured image. This is an example of how a unique play of negative space can stimulate interest in a website'southward design.
• Unity: Quartz uses a filigree organisation in its website to create a sense of unity. For case, the four stories accept equal width and are uniformly spaced, creating a sense of orderliness and structure.

The Take Away

The elements of visual design make up the cardinal building blocks of a product. While nosotros equally visual designers do not really need to examine each element closely in our daily work, the principles of design — how to place the elements together to build pages and app screens optimally — practice play a crucial part in what we do. Learning how to achieve unity, gestalt, hierarchy, balance, contrast, scale, authority, and similarity will be extremely useful every bit you work in visual pattern.

So, using your elements, namely:

• Line
• Shape
• Negative space
• Volume
• Value
• Colour
• Texture

and gearing them around the principles, namely:

• Unity
• Gestalt
• Hierarchy
• Balance
• Contrast
• Scale
• Dominance

—will enable you to produce winning results consistently.

References & Where to Acquire More than

Alan Hashimoto and Mike Clayton, Visual Design Fundamentals: A Digital Approach, 2004

William Lidwell, Universal Principles of Design, 2003

Digital Communications Segmentation in the U.S. Department of Health and Homo Services, Visual Design Nuts: https://www.usability.gov/what-and-why/visual-pattern.html

DOWNLOAD HERE

Posted by: wolfthaparme68.blogspot.com