Graphic design guide
Scope of the guide
Short answer: Graphic design elements; are the building blocks of design such as point, line, shape, form, texture, color, value, space and typography; Design principles are the rules that determine how to bring together these building blocks such as balance, contrast, emphasis, hierarchy, alignment, proximity, repetition, unity, proportion and white space.
We can compare the elements to the ingredients in a kitchen and the principles to the recipe. A good or bad meal can be made with the same ingredients; the difference comes in how they are combined. In my 19 years of work, I have worked on many different surfaces such as catalogs, packaging, social media and web interface. In this guide, I explain each element and principle with a brief description and an example from real use. The goal is not to create a list to be memorized, but to create a language that you can use while minding your own business.
What is the difference between element and policy?
Elements are the things you see in a design: a line, a color field, a line of text, a space. Principles describe how these things fit in relation to each other: which is larger, which is seen first, which forms a group.
Consider a catalog page. Product photo, product name, description text, technical table and page number are elements. Having the product name in the largest text is the principle of hierarchy, starting the table from the same edge as the text is the principle of alignment, and keeping related information together is the principle of proximity. There is no design without elements; Without principles, the elements remain just a pile.
Basic elements of graphic design
Period
Dot is the smallest unit of design. It attracts attention alone, and creates texture or pattern when multiplied. A small colored circle used as a notification badge in an interface directs the user's eye directly to it. In packaging, repeating dots can form a ground pattern.
Line
A line is a trace between two points. It separates, connects, guides. In a catalogue, a thin line separates sections, while on a poster a slanted line can give a sense of movement. The thickness, direction and continuity of the line evoke different emotions: straight and thin lines give a feeling of order, broken and thick lines give a feeling of energy.
Form and shape
Form is a two-dimensional surface formed by lines surrounding an area. Geometric shapes such as squares, circles and triangles give an orderly and systematic feel; organic forms look more natural and soft. The choice of format in logo design directly affects the character of the brand. A repeating frame format in social media templates makes posts feel like they belong to the same brand.
Form
Form is the three-dimensional equivalent of form, or the illusion of three dimensions. A sense of depth is created on a flat surface with shadow, light and perspective. In packaging design, form is also a physical fact: the folding faces of the box, the curve of the bottle. When designing packaging graphics, it is necessary to check how a layout that looks good in a flat file looks like when the box is folded.
Texture
Texture is the feel of a surface. The real texture can be felt by touch: relief print, matte or glossy lacquer, textured paper. Visual texture is imitated: paper texture, wood pattern, grain. Using textured paper on a catalog cover can send a quiet message about the quality of the product.
Color
Color; It is defined by the properties of hue (red, blue), saturation (vividness) and brightness. It evokes emotion, makes people stand out, and becomes an important part of the brand identity. Separating each variety in a product family with a different color makes selection easier on the shelf. I explained the color difference between screen and print in the CMYK and RGB guide.
Value (tons)
Value is how light or dark a color is. It is often more decisive than color; because readability largely depends on the light-dark difference. If a design is still readable when you convert it to black and white, the value balance has been established correctly. Subtle differences in gray tones in the web interface are a quiet way to separate secondary information from primary information.
Space
Space is the area between and around elements. Positive space is the space occupied by the elements, negative space is the rest. The void is not just "remaining space", it is a consciously designed element. It creates groups, makes people breathe, makes them stand out.
Typography
Typography is the visual arrangement of type: typeface, size, line spacing, letter spacing, line length. In graphic design, text is both content and visual element. Product name on a packaging, button label on an interface, technical information on a catalogue; All of them become readable through typographic decisions. For details, you can refer to typography guide.
| Element | Basic function | Example from real use |
|---|---|---|
| Dot | Attracting attention, creating a pattern | Notification badge in interface |
| Line | To separate, to bind, to direct | Section separator in catalog |
| Format | Defining area, giving character | Geometric sign in logo |
| Form | Sensation of depth and volume | Folding sides of the packaging |
| Texture | Surface feel, perception of quality | Cover printed with textured paper |
| Color | Emotion, differentiation, brand identity | Color codes of product types |
| Value | Readability, depth | Secondary text tones in interface |
| Space | Grouping, breathing | Area around product image |
| Typography | To make it read, to give a tone of voice | Product name on packaging |
Basic principles of graphic design
Balance
Balance is the distribution of visual weight throughout the composition. Symmetrical balance gives a feeling of order and formality; asymmetrical balance looks more lively and modern. In a social media image, you can create an asymmetrical balance by placing a large product photo on the left and a small but bold headline on the right.
Contrast
Contrast is the difference between two elements: light-dark, large-small, thick-thin, warm-cold. Without contrast, everything looks the same weight and nothing stands out. Contrast ensures that the main button is distinctly separated from other buttons in the interface. In terms of accessibility, the contrast between the text and the background is also important for readability.
Emphasis
Emphasis determines the focal point of the composition. It decides where the eye will go first. In a campaign poster, the emphasis can be on the discount rate, on the product name on a packaging or on the brand logo. Trying to emphasize everything means emphasizing nothing.
Hierarchy
Hierarchy is the arrangement of information in order of importance. The title, subheading, body text and note are distinguished by different sizes and weights. In publications containing a large number of products and technical information, such as the catalog I prepared for Pedaş, hierarchy is the basic tool that allows the reader to quickly find what he is looking for.
Alignment
Alignment is the arrangement of elements on a common edge or axis. It creates a feeling of order by creating invisible lines. Grid system is a systematic form of alignment. Placing content blocks in the same columns on web pages helps the page look orderly and reliable.
Intimacy
Proximity is the placement of related elements close together and unrelated elements far away. In a product card, the product name, price and brief description should appear together; There should be a clear gap between it and the next product. In this way, the reader understands which information belongs to which product without thinking.
Repetition and rhythm
Repetition is the consistent reuse of elements such as color, format, font, or layout. Rhythm is the flow created by this repetition. In a multi-page catalogue, having the opening of each chapter in the same order makes the reader feel where he is. Repetition on social media sets makes it easier for the brand to be recognized.
Unity
Unity is the feeling that all elements in the design belong to the same whole. Unity is destroyed when different fonts, random colors and incompatible images are used together. In corporate identity works, ensuring that every surface, from business cards to fair stands, speaks the same visual language is a large-scale application of the principle of unity.
Proportion and scale
Ratio is the size relationship of elements relative to each other; Scale is the size of an element relative to its actual or expected size. Using a headline much larger than expected on a poster creates a dramatic effect. In the interface, it is necessary for usability that the touch areas correspond to the finger scale.
White space
White space is the deliberate use of negative space; It doesn't necessarily have to be white. Most of the time, it is not the added elements that give the "luxury" or "calm" feeling to a design, but the spaces left. In projects where visuals are at the forefront, such as Yatcim's website, leaving enough space around the content increases the impact of the visual. Resisting the urge to fill the void is one of the most difficult habits a designer must learn.
Same principles on different surfaces
The principles do not change, but come to the fore in different ways from surface to surface. The table below summarizes the points I paid most attention to in four different jobs.
| Principle | Catalog | Packaging | Social media | Web interface |
|---|---|---|---|---|
| Hierarchy | Product name, description, technical table order | Brand, product name, type, mandatory information | Single main message, short support text | Page title, section titles, call to action |
| Contrast | Separation of title and body text | Differentiation from competitors on the shelf | Getting noticed in the flow | Home button highlight |
| Alignment | Inter-page consistency with Grid | Information layout on different faces | Fixed margins in templates | Column structure and component alignment |
| Again | Chapter openings and page layouts | Common structure in the product family | Common framework in serial posts | Consistent component library |
| White space | Margins that make reading comfortable | Breathing space around product name | Simplicity in crowded streaming | Space between content blocks |
In screen work, such as the interface work I did for Danone, these principles directly impact whether the user can complete a task. In printing jobs, errors are often noticed after printing; Therefore, it is necessary to check at the file stage.
Fixing a catalog page with policies
To concretize the theoretical explanation, let me describe a situation I frequently encounter. Imagine an old catalog page that is in front of you to be renewed: there are six products on the page. Each product name is a different size, descriptions start from different edges, photos are of different sizes and there is almost no space left on the page. The reader has difficulty understanding which information belongs to which product.
When I fix it, I do the following:
- I set up a grid. I divide the page into equal columns and place all products on the same grid (alignment).
- I define the hierarchy. I define three fixed text styles for the product name, short description and technical information (hierarchy, repeat).
- I separate the groups. I bring the information of each product closer together and increase the space between the products (closeness, white space).
- I equalize the images. I crop the photos in the same ratio and show the products in a similar scale (ratio and scale, unity).
- I choose a focal point. If there is a product that needs to stand out on the page, I create emphasis (emphasis, contrast) by making it larger.
As a result, the content remains the same, but the page becomes readable. This difference can be made by applying only the principles, without changing the elements.
When to bend the rules?
Design principles are not absolute laws, but guides formed by experience. When stretched consciously, they can produce powerful results. In a fashion campaign, deliberately distorted alignment can have a dynamic effect; An extreme difference in scale can add energy to a music festival poster.
However, in order to bend the rule, one must first know it. If you can explain why you broke a policy, it's a design decision; If you can't explain it, it's probably a mistake. In information-intensive works such as catalogues, user manuals or interfaces, the room for bending the rules is narrower, because readability is a priority.
Summary: in what order should you check your own design?
Before submitting a job, I recommend checking it in this order:
- Hierarchy: Where does the eye go first? Is this the most important information?
- Contrast: Are important elements sufficiently separated? Is the text easily read from the ground?
- Alignment: Do the elements fit on common edges or in a grid?
- Proximity: Is relevant information together, irrelevant information separate?
- Repetition: Are text styles, colors and layouts used consistently?
- White space: Does the design breathe, or is every corner occupied?
- Unity: Do all the pieces appear to be from the same job and the same brand?
- Black and white test: Is it still readable after removing the colors?
These concepts are the basis for entering the profession; I explained the learning path in the how to become a graphic designer guide. You can check out my work to see how these principles are applied in real projects, and graphic design guide for the general framework.
Frequently asked questions
What is the difference between a design element and a design principle?
An element is a building block used in design: such as line, color, shape, text or space. The principle is the rule that determines how these building blocks will be arranged: balance, hierarchy, alignment, etc. In short, elements are the answer to the question "what" and principles are the answer to the question "how".
How many basic design elements are there?
Sources group elements in different numbers; some count seven elements, some more. In this guide, I covered point, line, shape, form, texture, color, value, space and typography. It is important to understand what each element does in the design rather than the number.
Why is white space not wasted space?
White space groups elements, makes reading easier and makes important elements stand out. In a crowded design, the eye does not know where to look. Consciously leaving space is one of the most effective tools of design.
Which design principle is most frequently violated?
In my observation, the most frequently broken principles are hierarchy and white space. When every piece of information is thought to be important, everything is enlarged and gaps are filled. As a result, nothing stands out and the reader does not find what he is looking for.
Do these principles also apply to web and packaging design?
Yes, the principles apply on all surfaces; What changes is which one stands out more. In packaging, contrast and hierarchy on the shelf, alignment and consistent use of components in the web interface can be more decisive. The basic logic is the same everywhere.
Should design rules be memorized?
It is more useful to understand rather than memorize. When looking at your own work and the designs you like, questioning what principles work will make these concepts permanent. Over time, you will begin to apply these principles intuitively, even without looking at the checklist.
Is it a mistake to break design principles?
Not always. A principle that is consciously and reasonedly overturned can have a powerful impact. But if you can't explain why you broke the policy, the result is most likely a mistake, not a decision.
What exercises can be done to learn design elements?
Preparing small compositions with only black and white, only lines or only typography is a good start. Examining a poster or packaging you like and noting which elements and principles are used also trains the eye. Organizing the same content several times with different hierarchies directly demonstrates the impact of the policies.
Do you have a design project?
This guide provides information about education and profession. You can share your existing content and delivery expectations for your design project.
- Communication purpose of the project
- Mediums to be used
- Needed deliveries
