WEB designer course # 5 Decorate with consideration of personality and importance of each element

In the previous lecture, we explained the arrangement and balance of the elements that make up the design.

This time, finally, I will explain about the decoration that seems to be a design.

Also, it will be limited to union members, but please feel free to ask if you have any questions such as “I don’t know Mr. Shindo!” In addition, if there is a response from this course, I would like to hold a “web design study session”.

If there are many excel and ward lectures, we will consider holding them. The story was a little derailed, but then I started the course.

Think about the personality and importance of each element of the design

Now, based on this design used in the previous course, we will consider the importance of each element.

For design objects, the importance is determined by considering what the design is trying to convey.

First of all, let’s start by sorting out what kind of personality each element is.

Consider the personality of each element

When considering the personality of each element of this design, roughly I would sort it as follows.

  • Picking up trash in the city … Product name, event name
  • Absolutely thin … catch phrase
  • Thank you for your health! … Subcatch copy
  • 95% of the experience is real! … Subcatch copy
  • You too … This is an explanation and a lead

And sorted in this way.

In this design, we consider the importance of each element, considering what is the most important thing that this design wants to convey?

As an aside, this selection of importance may be considered in advance on the web or flyer advertisement (DTP) site, but in principle, it will be “round to designer” anywhere. → Since most of them are “stuck and recreated”, it is important for those who are aiming to be professionals to cultivate this sense of laughter.

Consider the importance of each element

The importance of each element of this design is as follows.

  1. Picking up trash in the city … Product name, event name
  2. Absolutely thin … catch phrase
  3. 95% of the experience is real! … Subcatch copy
  4. Thank you for your health! … Subcatch copy
  5. You too … This is an explanation and a lead

After all, what the design object must convey is “what the design conveys”, so the product name and event name are the most important.

As for other priorities, in this design, since it will be an advertisement, it will be ranked with awareness of “the topic that readers are likely to jump”.

In terms of the contents of this design, “absolutely thin” is the word that seems to resonate with the reader’s heart. The sub-catch phrase “95% of the participants” is more “intelligible expression” than the word “thank you for being healthy!”, So I decided to rank third. In this way, let’s think about the importance, considering the purpose of the design.

However! This is only basic. Considering “what is its intended use and how to use it?”, The method of selecting importance will change again. This is a technique and practical field for creating web design advertisements, so we will explain it when the course has advanced to the stage where you will be able to create a website. For now, let’s get used to thinking with basic importance in mind.

Consider the importance of each element and apply decoration

Now it’s time for designers. As a designer, it is a fun field of work, and there are places where skill is required. Let’s learn the basics about coloring and decoration.

Since the design is easy to “enter the labyrinth”, it is an honest work.

However, knowing the various techniques can significantly reduce the work time. In order to have many drawers of this design, imitating various designs is the fastest way. If you are worried about design, try imitating the technique that you think is “good!” From flyers and articles.

Try changing the color of the text

Let’s color each element first, considering the importance.

■Before

■After

The above is the result of coloring according to each importance.

I wanted to emphasize “product name”, “skinny”, and “very hard”, so I made it colored to make it stand out. In addition, 95% ~ of the participants want to make it stand out, but since it is not a big sale, I tried to make the impression a little weaker by removing the letters in the background color.

However, if you look at it, this is not good enough, and if you are not good enough, it will be worse than the original. However, when you color it, you can see that it is easier to distinguish important elements. And as a result, there are many points where you notice that this is not so good!

You can decide the color scheme and color balance first, but we recommend that you make fine adjustments at the final stage of the design. The reason is that there are too many patterns in the color scheme and there is a possibility of “entering a labyrinth”.

First of all, make a basic layout firmly using simple colors. → The flow of color scheme is a trick to improve work efficiency.

マーカーをつけてみる

目立たせたい要素や項目にマーカーを引くことも、簡単に重要な要素を際立たせることができます。また、このマーカーにより、各要素の「独立性」が増して、視認性が良くなる効果も得られたりもします。

■マーカーを引いてみた

Think about the background

If a solid background is better, some patterns are not good. In some cases, you can improve the “independence” and “visibility” of each element using the background.

■I changed the background

How about it? Isn’t it somewhat refreshing?

There are some changes. You have noticed everything and you have a designer sense. The changes are as follows.

  • 2-tone color background
  • 95% or more of the experienced people in white letters
  • Review balance of left block

Reviewing the balance of the left block is the point, but in the process of designing, there is often a point that “there is some balance…”. In that case, it is necessary to readjust each time.

This number of readjustments tends to sharpen and increase the sense as the skill increases, so if you notice a sense of incongruity, please be happy to level up and make readjustment even if it is obediently difficult

Try to add a shadow

A three-dimensional visual effect can be obtained by applying a shadow to the element. The trick is to apply shadows.

However, there are some patterns that should not be shaded, so if you feel a sense of incongruity when you add a shadow, it is better to remove it. I would like to explain the design that needs shadows and the ones that don’t need in a separate article in this course.

  • Picking up trash in the city and shadowing elements from 95% of people who experienced it.

Reexamine the color scheme and gradation

By adjusting the color scheme and adding gradation, you can produce a three-dimensional effect or emphasize it more. However, design that performs gradation will be tedious if it is performed excessively, so it is better to do it a little.

That’s exactly the sense, but I don’t really like the gradation design. The gradation design increases the profound feeling, but softness is lost. I am a soft and gentle person who is not good at gradation.lol

  • Never lose weight! To the outline
  • 95% of the circle is gradated, and the text color is changed to 2 tone color
  • Gradient that picks up trash in the city

Think about typefaces (fonts)

Font selection is a very important factor. The impression changes greatly with Gothic, Mincho, folk, pop, etc. Please be careful as the number changes unexpectedly.

Basically, you should not mix Gothic and Mincho. Also, using a lot of fonts in one design is very difficult to read. I will explain about font work in the next article.

■Difficult to see when using various fonts

■Fonts should be unified.

  • Only 95% of the numbers are changed. Further review the gradation.
  • I increased the size of the trash pick-up letter in the city by another size font.
  • Thank you and be healthy! To pop fonts.

The design is endless, but there are certain rules

■prototype

■Once completed

Well, we have given various design examples, but there are certain rules in the design, and excessive decoration can also make the image worse. So, the trick is to give a light design. We will open a lecture on design theory later.

If you are a design beginner,

  1. Align
  2. margin
  3. font
  4. Color scheme

Let’s design the layout with these four in mind. There are various techniques, but this is the basic principle. Let’s practice by creating several designs that look like this theme.

For union members only, please talk to Shindo if you wish to practice. A monthly layout lecture will be given at the regular monthly editorial board. In the case of a large number of applicants, a “design course” will also be opened. I’m also involved in the course

Next time, we will explain “Fontwork” before working on full-scale web layout.