Home » About design » Basics of graphic design and its components
0.42 AM Basics of graphic design and its components | |
Basics of graphic design and its components There are six design elements you need to know about: line, shape, color, texture, value and space. 1. Line A line is usually present in every design, even if it is a 1 pixel solid border or a 5 pixel dotted border. Every website has lines, but the minimalist style that has become more popular over the past couple of years attempts to erase lines from layouts, or at least reduce their use. .Lines can be long, red, straight, thin, blue, dotted, short, black or curved, all of which fall into the same category. They are most often used to delimit different parts of a design or are used to direct the viewer's eye in a particular direction Lines can create different effects and visual impact. While a thick bold line attracts attention with its visual power, thin lines tend to go in the opposite direction. Color matters too, dark colors are easier to see and attract more attention than light or pale ones. And that's not it. The style of the line can also affect how the user sees it. This style can be easily defined using CSS and can be solid, dotted or dotted. Solid lines have a different impact than dotted lines because they are more impressive. In a minimalist style, either less solid or more curved lines are used because they give the design a dynamic and fluid look, which is also the goal of the style. They indicate energy, create interest in the user and, when combined with illustration, are very powerful to the human eye. Years ago, solid lines were very popular because they defined the design style: rigid, solid, and organized. The internet has changed in recent years and this style is no longer very popular, especially for designer portfolios and other pages that strongly require a personal touch. 2. Shape Form is the second most commonly used web design element. They are actually lines combined into different shapes. Shapes are still popular because if there is something that needs to stand out, shapes are one way to do it. These can be circles, squares, rectangles, triangles or any other abstract shape; most designs include at least one of these. It is often used in minimalist designs because they are often based on illustrations and drawings. The old style of website design also included forms, which is why they have remained popular throughout time and will likely continue to be so. Like lines, shapes are also associated by the human mind with various movements. For example, circles are associated with movement and nature, while squares are often seen as structured basic designs. As with lines, the color, style, background or texture of a shape can completely change the viewer's perception. 3. Textures Textures weren't very popular a couple of years ago, but they're generally becoming more popular. They replaced (or compete, so to speak, compete) plain backgrounds. Textures may look like solid background colors, but if you analyze them more closely, you'll notice subtle but effective differences. Texture styles include paper, stone, concrete, brick, fabric and natural elements, as well as flat or smooth colors. Textures can also be subtle or pronounced, and can be used sparingly or generously. They work with almost everything. Even if they don't seem important, textures can completely change a website and have a completely different visual impact. 4. Color Color may even be the most important design element because it provides the strongest visual impact at a glance. The color is obvious and does not require basic graphic skills. While lines and shapes mean the same things they do in reality, just on a deeper level, color means the same things they do in nature. Color evokes emotions - red is passionate, blue is calm, green is natural. Even if you don't realize it, colors have a powerful effect on your mind. Studies have been done and a person living in a red environment has a higher heart rate and pulse rate than a person living in a blue environment. The human brain sees this and influences the rest of the body. Therefore, it is very important to know color theory because not many designers can call themselves experts in this field. Knowing your color skills can make the difference between good design and great design. I'm not saying you have to know them all, but knowing how hue, saturation, hue, hue, hue, or chroma work together is crucial for a graphic designer. 5. Value I didn't list the value above, even though it is closely related to color, because the value is more general and represents how dark or light the design is. Value also has a direct relationship with mood, but only on a deeper level. Understanding colors will take you closer to perfection, but knowing how value works will take you beyond that. Lighter designs offer a different look and feel than darker ones, and you need an expert eye to spot the differences and decide which one is better. 6. Space Space and how it is used is critical in design. Recently, "white space" (also called negative space) has become widely used because it makes it easier for the human eye to read. For those unfamiliar with the term “white space,” it does not specifically refer to space filled with white, but rather any area of a design that is filled only with the background color. You can see some examples below to understand the concept better. If your web design has a lot of negative space, it suggests lightness and openness. Lack of white space will turn your design into an old-fashioned, cluttered one. Space also has a lot to do with how a design is perceived by the human eye. Color is perhaps the most important design element, space is definitely present at the top because it is also very easy to notice to the untrained eye. This can turn the design to your advantage and get the most out of your layout. Google is the best example of how to maximize negative space. These are the basic elements that an aspiring graphic designer should know about. This knowledge will allow you to think more user-centrically and develop a better style. However, that's not all. Basics of Graphic Design : Principles In Part 1, we looked at the basic elements of graphic design, including shapes, lines, textures, and color. In this section, we'll go a little deeper and look at design principles that are very important to know because they're what separate good designers from amazing designers. Some of the principles we'll cover today apply unconsciously, but they're definitely there, and we'll show you examples from the internet to illustrate the concepts. 1. Balance Balance is how design elements are distributed throughout the layout. If the balance is good, then stability is guaranteed, although recently many designers are choosing unbalanced designs because they are dynamic and offer a completely different perspective.
Personal pages work best with slightly unbalanced layouts, and you'll see a few examples shortly. To notice how much balance a website has, you need to know the three types of balance: symmetrical, asymmetrical, and radial. The first occurs when both sides of the design are similar in shape, lines, texture, and so on. Because that's the way we design today, most of the time it's on the vertical axis, so when we talk about two sides of a design, we're talking about left and right. There are also examples on the horizontal axis, and sometimes on both, but they are rare. Just 5 years ago, symmetrical design was present on most websites on the Internet. The second type of balance occurs when two sides of a website are not similar to each other, but still have similar elements. Although this is called asymmetrical, they still provide some symmetry like the first type of balance, just at a lower level. Asymmetrical websites are becoming increasingly popular nowadays Radius balance occurs when design elements are placed in a circle. They give a sense of movement, dynamism, but this is not often seen online because even the most experienced designers have trouble laying out such designs. As stated earlier, balance is achieved through shapes, colors, textures, lines and other elements that we talked about in the first episode. 2. Dominance and priority These two principles are inextricably linked because they are strongly connected. Both of these have a lot to do with user experience because lack of priority and dominance of elements can be confusing. The dominance level is the one that prioritizes different elements such as menu, logo, content or footer. Of course, this can also be done by playing with font and size, but let's go deeper and look at what dominance and priority mean. There are three main priority levels. We have a headline or call to action that acts as the main element; then we have secondary elements such as the images needed to represent the point, or in most cases the navigation. Obviously, they are not the most important element of a website, but they are also necessary. Tertiary elements are information such as footer links, meta information about blogs or various elements, and most of the time a website can exist without them. However, they are often used because they complete the design in different ways, either by offering additional information or by adding some elements to the layout. 3. Proportions Proportions are important and represent the scale of elements compared to each other. They have a strong impact on the user and are also related to the previous principle. It's no surprise that larger elements have a greater impact on the user than smaller ones. Dominance, priority, and proportion work together to ensure that the user sees information on a website correctly. Using a larger font in the footer than in the content is a mistake because these three principles are not followed. 4. Contrast This is another important principle not only of design, but also of photography and any other fine art. I don't think we need to go into this because everyone knows what contrast is. Enough contrast between elements ensures that some stand out more than others. When designers want to blend elements together, they do so by minimizing the contrast between them. If the contrast is high, the elements are different from each other. If balance is achieved through shapes and lines, contrast can be created through color. However, recently contrast has also been modified through typography and texture, so it is becoming increasingly popular. Perfect typography will help you achieve not only perfect contrast, but also proportion, dominance, and priority. It's easy to see that the last three concepts we talked about are somewhat related to each other in some way. 5. Rhythm This may be new to you. Page rhythm is the principle that causes the human eye to move from one element to another. This provides a flow of view and the order in which users should see elements. Now this is difficult to do because everyone has a different view on a website and getting everyone to do it the same way would be too difficult. There are two types of rhythms: smooth and progressive. The first is variation, and the best example is the movement of water, which mostly flows in one direction but has many variations in how it moves. Gradual rhythm occurs when there is a clear sequence of how the eye should move between elements. 6. Harmony and unity. The last design principle strives to ensure that even if all the above principles are used correctly, it is impossible to create a stunning design without harmony and unity, and this is seen quite often in real life. We often hear about rich people who have everything they want, but lack harmony and unity in their lives. The same rule applies to design. If all these elements are working correctly, then you have achieved what we call unity. Just placing all these elements on a page without linking them to each other creates not a design, but a page with a bunch of elements. If the elements complement each other and the website is pleasing to the eye and offers a good user experience, then the work you've done is more or less complete. There is no need to give an example here, we all know that websites with harmony and unity can be found everywhere; think of a website that you really like and always remember. This is probably a site where harmony and unity reign. The second article in the series concludes the process of examining the most basic design principles that you really need to know about. After reading the first two articles, you already have most of the knowledge needed to create your own layout. The third and final part covers the basics of composition such as focus, grid theory, Gestalt laws and others, which can also be used for products such as magazines, flyers or brochures. Graphic Design Fundamentals : Composition The second was about the principles of graphic design and we looked at concepts such as balance, dominance, contrast and harmony. 1. Unified visual This composition uses one image for the design. This means that the image is usually powerful, makes an impression, and the entire design is built around it. Examples of individual visual pages include landing pages, but these are more popular in print than online. A unified visual composition is one of the easiest to achieve, although you need to choose your image carefully or it won't have the desired effect. The main principle of this template is to make sure that the typography and other design elements enhance the visual element and do not compete with it. There should be a clear definition of which one is more important, in which case the image, illustration or graphic element used should be the most powerful. 2. Golden ratio The golden ration, also known as the Fibonacci or Phi spiral, is about 1:1.618. The Fibonacci Spiral is found all over the world in a variety of things, and the Internet is no exception. Arranging elements on a website in a spiral pattern is a good idea because that's how the human eye works. Proper use of the golden ratio will draw your visitors' attention to the specific things you want to emphasize. 3. Focus This is another important point because the focal point is the one who gives the audience something to look at. A focal point adds a more specific idea to the design and serves as a starting point for most visitors. The focus can be represented using simple typography, a button, an illustration, an image, or any other element. It is entirely up to the designer how he wants to create the focal point. The focal point should be in focus and should be the first element the viewer sees when they enter the page (especially the first time). However, making it too important and prominent will throw off the balance of the layout. Focus on the purpose of your site and make the page's purpose communicate through it. For example, having a call to action button is a focal point because it is the last action you want the user to take on your page. 4. Grid design This shouldn't be new to you. Grid theory is perhaps the most popular element of composition because we do it all the time without even realizing it. Grids add structure to a design and are used to maintain proper proportion between elements on a page. You can find many grid frameworks online that are free to download and build, and I really recommend you use them if you are new to this field. Working with grids from the start will make you feel comfortable with this approach, and that's good for your layouts. The meshes don't have to be rigid all the time, they can also be thin, but if you choose this option, make sure the design is still clean and refined before delivery. When working with meshes, it's always a good idea to ask for feedback from those around you, because working with the mesh in front of you for many hours will likely cause your eyes to overlook small errors that require adjustment. 5. Laws of Gestalt. When I learned this principle in school, I was amazed at how much it changed my design. Laws are the result of a person's visual perception of things, including websites and elements. Laws are created by how different elements affect the viewer. There are five principles of Gestalt laws: closure, similarity, continuation, coherence and proximity. In short, the law of closure states that we are accustomed to closing in our imagination what is not actually closed. A good example is the inner circle, which you only draw at 330°. The human brain will perceive this as a single vicious circle. The law of proximity shows that we tend to group objects that are closer to each other, while the law of similarity emphasizes the same thing, only that we group objects of the same color, shape, or texture. The law of continuation emphasizes that objects will group as a whole if they are collinear or follow a particular direction, while the final rule, the alignment rule, states that objects are aligned along their edges (a very popular pattern), or along their centerlines. Objects can also overlap each other. Gestalt Law of Closure Gestalt Law of Proximity In fact, there are many more gestalt laws, but not all of them are important for designers. At the end of the article you can find a link to all the laws and learn more about each of them. 6. Layout "Z" and "F". The so-called Z-layout is based on the normal movement of the human eye. As the name suggests, most people observed look at a web page in a Z shape, meaning they start at the top left and end at the bottom right. Aligning all the objects on your home page to this shape will definitely give better results and make your design more effective. Z shaped layout There is also another type of layout that is shaped like an F. This means that users read the first line and then continue reading the second, continuing in a specific order. These are the most important design principles, and if you have a good understanding of each of them, your layouts will not only look better, but will also offer a better user experience. Creating good experiences for users will make them remember your page, and if you get used to working with these principles, at some point it will even become normal and logical. Of course, there is much more knowledge to learn about all these laws, but this knowledge comes with experience and you cannot get it only from books, but also from practice. | |
Category: About design |
Views: 46 |
Added by: admin
| Tags: |
Total comments: 0 | |