Before And After Graphic Designs

Here are the four offending designs that I aim to improve in today’s post. Yes, that is a design agency who tried to sell clothing via a woman peeing herself. I have no words, but I do have some design skills to rectify that accident of an advert design. But first in today’s before and after post let’s look at this landing page design.

The first design has a lot of things wrong with it but for me, the first noticeable thing is how boring it actually is. It’s quite a cold and lifeless design and it’s one I aim to change with my redesign. But for my redesign one thing that I’m going to take away from this original one is. How the text talks about innovation standing out from the competition and development. That’s why I’ve chosen a yellow-orange for the background of my design. Because this color suggests change action and dynamic movement, something great for innovation.

Now obviously here at satori graphics, I am biased when it comes to this color. But you will soon see how the design comes together perfectly with this choice of color. So to move away from a boring design I came up with a concept. That suggests thinking differently all that’s saying is that most people know sinking out of the box. If we refer back to the original text it does mention innovation and so I took this. and created my concept for the right-hand side of this landing page. I also think it gives some character and a dash of humor into the mix.

It’s a far cry from the original example which is really cold and lifeless. The white circle really highlights and emphasizes the illustration giving it its own fixed location on my layouts. And considering it’s in the bottom right corner to create a sense of balance. Let’s bang some typography into the top left corner.

Now the font psychology here points to a forward-moving and modern sense of thinking. That’s due to sans-serif typefaces evoking those very feelings. Now I reworded the next block of text. So it finally does make some sort of sense. But also I use black to create some contrast within this section of typography. And to finish off this first design today.

Let’s add in the all-important call to action in a black square right down here. Then of course the motif at the very bottom. Now I’m very pleased with the layout and overall completion of this design. I personally consider it to be leaps and bounds ahead of the original one. But you can be the judge seeing them sit side by side like this you might very well agree with me.

Design number two is meant to be Advertising Tea. So by default, I love tea. But I for sure don’t love this design that advertises tea. Like the previous design, this one is pretty bland boring unaspiring and the typography is a mess. You’ll soon see why exactly it is a mess. But ask yourself this. Does this poster make you want to run out and grab 200 bags of tea because it really isn’t giving me those vibes right now? For my redesign, I wanted to create a setting that was warm and appealing something that evokes a sense of aromatic pleasure-based around tea. Here it is

We can now see the t through that glass mug and we have a background of wispy lines ushering the viewer’s eye upward. Which will finally lead us to the crucial typography. Of course, I hear you where’s the hierarchy. Let’s add some color hierarchy right here. Okay, so there is something very important to take note of on this design. In the typography, we have two words that caught my attention when redesigning it. Those words were superior and exquisite. These words are very high brow and sophisticated.

So I wanted to use a font that expresses that with how it appears to the viewer. If I’m not mistaken I did use Noto Serif here which is free on google fonts. Let’s now pair that up with a sans serif font for the next text, below that. Now some of you out there with hawkeye vision might have noticed how the typography is around the same width as the tea mug itself and this isn’t by accident. It gives a central layout to the design top to bottom and that’s mixed with those wispy lines helping the flow of the design as a whole. Now I’m still not sure about the typography at the very bottom but I did run out of time to properly consider that. But it does look more or less okay I feel.

Design number three is anything okay, but it’s essentially a design tragedy. So yeah we can all agree how this idea was bad from the start. I’m not sure how the conversation went down in the boardroom at Harvey Nichols. But someone actually brought up the concept of having models posing whilst looking as if they had wet themselves.

Anyway moving on from that concept I started with a black canvas. I took a lot of time considering how I can express the caption of the design. That was trying to contain your excitement. My initial thought was to show a model hiding her face maybe trying not to laugh or to burst out into hysterics. But in the end, I went for this layout right here. The model is essentially hiding her face. Which could be seen as subtly trying to hide the excitement. But I think it’s a very strong focal point, especially with how the model is staring intensely out of the design.

Next, let’s add some balance to this thing with some typography. Yes, again let’s boost it with some color hierarchy to really get a notion of a sail across to the viewer. I did originally use a boulder font, but Harvey Nichols is meant to be quite refined and sophisticated. So for that reason, I think a thinner sans serif font is the way to go here.

For the caption, I wanted to make it very different to the typography above it. That’s because the caption is almost as if it’s being said by a person. As opposed to the above text which is kind of like a notification or an announcement. The original design was simple which is why mine went down the same kind of route. After all, billboards need to be simple anyway. Because people driving past them have mere seconds to actually take them in.

Design number four is a poster advertising a Weight Loss Group type thing. And take a look at the very top line of the text. The happy shrinker section and I’ve never seen this technique before, but I do know I hate it. In an attempt to express weight loss they’ve made the letters less bold as you travel across the line from left to right. There are also issues with the rest of the typography too but we’ll get to that soon.

Firstly, we need a blank canvas considering the brand is called happy shrinkers we need a happy individual and here she is with a bright warm smile. I really love how she’s wearing orange that is complementary to the blue background. And I then need to add the main typography and that was weekly weigh-in. From a design perspective, the original was pretty controversial in my opinion.

I chose this bold sans-serif font and I used a title case instead of uppercase. The original text just seemed loud set in uppercase and it was a very sharp edgy kind of font. Sharp edgy typography like that isn’t friendly or fun it’s more loud and angry. And that isn’t something you want in the theme of a design that’s trying to get people to sign up to a group about losing weight. My typography solution in my opinion does fit a lot better. I then continue the theme of fun. Personal with more typography in lowercase for the happy shrinker’s putt and the contrasting darker text below that.

Finally, it’s time to add that all-important call to action section. And of course, the color matches the jumper of the model. But let’s just forget about the space in the call to action between happy and shrinkers as if it never happened. But yeah I really like the difference in these two designs when looking at them side by side. Actually, it’s one of my favorite designs that I’ve made in this series.