Logo upgrade and re-engineering design process

Digital web magazine logo redesign process
Author: Kristof saelen
Translation: bohemian

In particular, I would like to thank Kristof saelen for creating a new logo for digital web and writing the design process.
All rights reserved for bohemian and blue ideal (www.blueidea.com. If you want to reprint it, please contact me.

Since digital web magazine has no idea about their new logo, they have told me their initial plans and delegated them to me. This is not a simple task-a lot of questions flood into my mind. Who am I actually designing a logo? Who are their audiences? What do the audience think is comfortable? Wait ...... The most basic answer to these questions is to create a decent and representative logo.

The reviewer's personal preferences, opinions, and designer's design style have an important influence in our creation process. However, we must note that the most important (and often the most common) views come from the readers. It takes about three months from the first impression to the creation. The reason for spending so long is the difference in background and Ideology Between the reviewer and me. On the other hand, it also has a great advantage, this means that different people can share their different views and opinions with each other.

The initial design was just an attempt to test the response of "Digital web" in general. I think a good idea comes from a very unique idea.

Later, when we reviewed the design, we realized a problem that the font should be clearer and easier to read. Like "Digital web", it has good readability. Traditionally, digital Web is a combination of two words. On the surface, this concept is far away from the initial consideration. The font "Sans-serif" is ideal, but it does not fully interpret the design features. Adding a symbol or icon to replace the traditional font allows us to design a more distinctive and representative logo. Symbol can also play a very good role, so we leave the question about the words below for discussion.

Symbol

We made the second adjustment, but it was actually our first attempt at the symbol. It was an extension of the concept of 1A. These designs can represent an independent symbol or abbreviation at the same time. Each symbol can represent D, W, or M, even though the letter D is mistaken for the letter C in 2B and 2D due to the top structure.

In 2a and 2c, they are improved and roughened to make them more stereoscopic, rather than being separate from the beginning. 3A is its re-development, but its stripes (especially the colored ones) remind us of a sports brand, which is simply not what "Digital web" expects. For more questions about colors, let's talk about them later.

In addition to 3A, I also tried some brand new designs, which seem much simpler in this set. In 3E and 3f, we find that D and W are hard to read. In 3C and 3D, we made great corners and made them open a gap. 3B is the rough one in this set, because it looks simpler and more unique. Take a look at it. Imagine that the color in 3B comes from the letter W, and the blank and hollow spaces around it shape the letter D. This is a major leap in our task and a new foundation for continued development.

Next we will make some changes based on the previous 3B. Note that what we see in the 3rd sets has been reproduced in the 4N. In this design experiment, I tried to add natural value to our logo. For example, there is a wave-shaped edge at the top of 4d and 4l. The rest have rounded corners in the lower left, just as in all the rows in orange and blue. The top-right corner of the table contains a tip with a letter W.

The first three examples of the orange line and the entire red line, because they are polished on the right side, making the technology not very strong. Our logo looks more dynamic than normal, and the letter D remains intact. I tried to compare the black color with the surrounding color in the middle area. However, this monotonous color looks very good. Although this comparison is not really needed here, the accompanying font we will add later will be partially black. In this set, we are optimistic about 4I, because it is a new combination of dynamic and static, and its simplicity.

What we need to do next is to smooth the bottom of our logo. Note that the link between the bottom of 5a and the right corner is smoother and smoother than the previously created 4I. Another idea is the insert style like 5B, but it was quickly denied.

Symbolic representation is the best method we have seen so far. It reinforces our next step. Some new design experiments allow us to expand new imaginations to consolidate our logo. This is perhaps the most crazy of them. We soon realized that there was a misunderstanding in the middle of the line, although 6B, 6f, and C6. The cursive style and smooth top curve give our logo a modern and active visual experience. Those new styles next to 6B seem less monotonous and dull, so our new styles are worth exploring.

The next idea is to connect to the top of the curve, with a single shape of solid letter D in the middle. Note that the letter W in 7A is composed of colored spaces. The first one is the final choice of digital web. Then I continued to try some more natural changes, but we found the letter W withered. So 7A deserves it.

Words

As I mentioned earlier, the "Sans-serif" font is more suitable for modern logos, so I tried a lot of general-used and easy-to-read fonts. First, we felt that the types of these words were much clearer than we used at the beginning. The success of type 1 comes from the White gap between its characters and words. As you can see, the white space in 3 and 4 is much inferior to the other two. Because the Character Spacing Between 'magazine' is larger, I try to make the distance between 'digital web' smaller. This means comparison between them. Otherwise, letters will be too open. At the same time, you should also note that the font of type 1 is narrower than that of other types, and perhaps another reason is to make the gap look better. Type 1 has all the specifications that good fonts should possess.

The only defect here is that the font is not unique enough. In fact, it is widely used in web design, so it is worth making some improvements similar to the following to this unique face.

First, you should pay attention to the font width. Many shapes in previous type 1 follow this type, except the corners. To break the passivation effect of regular fonts, the most acute corner (such as letter A and letter W) has been smoothed to make it more suitable for our symbol creation. Soon, we selected 6 in this set. Its word density exactly shows the design idea of our logo, which is not too rough or too small. We recognize this and start some associations. The letter B looks like a number 8, so we 'd better avoid it. So next, we will modify this type of modification. This time, we will change the top of the letter B to a 90-degree angle.

Before completing the design, we need to add "magazine" to our logo. The fonts we used earlier were too angular. To reflect the ease of use of digital Web, we still use the Sans-serif font. It looks simple and concise, so that our logo looks better.

Color

In our ideas and comments, we did not actually consider the final color of the logo. The only consideration is that it should be happy, clear, and flexible. Here I only use the color for example to get a good contrast with the background. Using only one color will make our logo more suitable for various design forms. The color of the symbol and the "magazine" font can depend on the color of the website. "Digital web" text can be black or white.

The logo we made should be easy to fit the brand new design of the website. Let us wish it a better display of the charm of "Digital web" in the world.

Special thanks to Nick Finck and Jesse Nieminen for their patience, comments, and comments.