The design and creative process

Okay so little disclaimer before you read the whole thing (at least I hope haha), it is veeeery long and I didn’t realize that at the beginning. But there are a lot of images and it is very visual so I hope you like it! 

Hi Charlie! Today I wanted to share some tips and introduce design! As many said in the last blog articles, the 

quarantine is a great time to learn new skills. 

So first of all, I will clarify what I mean by design because ok it is a very wide term. So I mean web design,

with all the design you can create for presentations, websites, apps, etc… You see it everywhere and all day, without

most of the time noticing it. For example, when you are writing and you choose a visual or not, there are elements of

design. Also I consider it as a form of art, it is my opinion though. When I start a design, the page is like an empty

canvas to me. Do you think the same?

I was first interested in design when I did my first presentation for the school and yes, as you can imagine, it wasn’t

great… :D The thing with design is that it seems very simple, but in reality, it is a very complex process. 

There are two types of design in web design: UI (now you understand my running joke… Stands for User Interface)

and UX (User eXperience). As you might have understood, UI design is more about the graphical and visual aspect

and UX design focuses on if the interface is intuitive or not, it is a bit closer to psychology. I’m going to talk about UI

design since I know close to nothing about UX, but a good example of a major UX issue, just so you get the idea,

would be a website in which you can’t easily access the different pages.

I will create one for this article to explain better the notions I will show. And for the topic I choose… What a suspense…

quarantine of course! For the format, it is a slide but destined to be posted on social media, a kind of poster.

I would say the main thing in design is identity and meaning. What I mean by that is once you choose what color, fonts  

and elements you’ll be using, you’ve got to stick to it, otherwise it won’t make any sense for the person seeing 

your work. I work on several subjects so I don’t think anyone would recognize I did a certain design (except maybe 

with my drawing style if I choose to draw) but for example, those who have a company have an identity.

       

I’m sure you all recognized these two logos and if you go on these websites, you will see they always use the same 

colors, fonts, shapes and so on… This is their identity.

Message

The first thing you want to think when creating a design is the message, what are you going to work on, what is 

your purpose. If you create a website, you would want the person seeing it to know what is your goal, right? 

Same thing if you are creating a poster or something like that. It needs to be impacting, short, and you need to make 

it visible.

For my example I choose to write: ‘Stay home and be creative’

Spacing is EVERYTHING!

Here you go with another example of a catchy message… But what I mean is that the design would not be that 

great if I was to put the text in a random place. Or would it? 

Well, you could not center your message, put it in the corner at the top and left for example, you still need to leave 

space at the top and left. 

For my example I decided to align the message to the center because I already had an idea in my mind. 

Obviously we are going later on to fill in the white space with some shapes or drawing linked with the message.

Fonts and CAPS and size

My message has an arial font by default. Hum, not very original for a design… Once again it is a choice to 

make. But how many fonts should I use? How to use them? 

Using more than two fonts for a design could be a bit confusing for the reader… Imagine if I used that many  

fonts? 

As you can see it is a bit too much. But for the sake of originality, let’s take two fonts for this design (roboto and lobster). 

Take fonts that are quite recent, otherwise it will look… well… old. I think the lobster font fits perfectly the word “creative” 

since it is quite an unusual font, and it almost looks like a drawing or calligraphy. “Stay home” is more important than

“and be” so it is both in the roboto font but I made the first two words thicker.

Now when you have a message, you can identify the important words, and put them in capital letters to catch the 

reader’s attention right away. I won’t do it here since it does not go that well with the fonts I chose. 

You also notice I chose to write with sort of run-on-lines between “home” and “and” and “be” and “creative” and 

there is several reasons for this:

- To create a sense of balance (“stay home” and “creative” are the main words here, on one line it would be too 

heavy visually. Moreover if we look at the 2 important parts separately, it is about the same size)

- To separate the 2 aspects (staying home is a thing, but you’ve got ALSO to be creative)

For the size of your text, here the fonts and caps are enough to make your eyes go straight to the message. 

But you wouldn’t want to make it smaller, if you want to say something, say it. However, don't make it too big either, 

it can even be harder to read if it takes the whole page.

CoLoR TheOrY TiMe!

Still looking sad and empty?

We need to create our color palette! Like a real palette in painting, you pick colors that are harmonious. 

You DON’T need to use too many colors! For that, I recommend only choosing one or two given what you are doing. 

If you are creating a design linked with the environment, you might like to pick a green, or a yellow. If your design is  

health related, it would be more blue or green. So like in literature, when you see a color it has a meaning and 

you should even be able to guess by the colors what this is about. 

Here is a design I did for yfcm for example (sorry it is in French), you can see I used green for  

ecology/environment, the message is clear and you can see it even though it is smaller.

For my example I wanted to create a message of positivity for the lock-down, and I associate that with the color 

yellow. Be careful not to pick a color with too much saturation (intensity) because it is like music, if you put the volume 

too high you won’t appreciate it and it will just make your ears bleed (ok not literally but you get the idea). So the 

first color I picked is the pastel yellow you see below.

         A bit flashy isn’t it?                 Much better now don't you think?

To choose which shade, I like to go on material.io at the bottom of the color system part. When you want to reuse 

the color, just copy and paste the hexadecimal code (eg: #ffffff) into whatever software or website you are using and 

voila you have the exact same color!

I have my first color. But what about the second one? 

Well for your design to work easily you can use shades, for example the third yellow above. 

Then we need another color because for instance we only have yellows. I thought then to my subject: lock down. 

When you think of it, without thinking of our present circumstances, you would think of a prison right? And what is the 

“color” of prison? A black, grey or dark grey. But you don’t want your message to be negative. So I decided to add 

a bit of dark grey (#434343) on the background to remind the person watching of the quarantine, but I decided to make 

the yellow on this dark grey, to show the positivity surpass and is over the negative side. I will also use some white, 

to make the whole a bit more contrasted.

The other thing you need to think about is contrast. If I was to make my background yellow pastel and the text in white, 

it would be barely visible.

It’s great but… Can’t see much of the message

I can SEE!

At this point I’ll leave the background and I will add other colors later when dealing with shapes. For presentation, there 

are certain slides that you can leave like this without adding anything more. Even in simple designs, we could leave it 

like that.

Last thing for color, make the text you think is important more visible: here even it is detail, I added a bit of my yellow 
color on the “and be” since it was a little less important.

Images

You can choose to use images if you want, but remember some things about it:

- High quality only (you don’t want a "pixely" image)

- If it is in the background, make sure you lower the brightness of the image, so that the text is visible and have 

enough contrast

Play with shapes

In every word I write, there are shapes. When I draw I only see shapes, and since I always imagine drawing people 

or the things around me, yes I often see a lot of shapes. And in design, you want to make things or principles in shapes, 

the easier the better but it has to be recognizable. When you see logos it is very simple right? You’ve got to make your 

drawing look like a child could do it. Of course you can still include elements that are more complicated in your 

designs, but it has to feel light or really integrated (by making it monochromatic for example).

Example of a monochromatic drawing I did for a presentation with Ines L on A Separate Peace (ok Finny looks a bit 

like a psychopath, I was laughing in front of my drawing when I finished it)

In my example, I wanted to add a bit of that dark grey so I thought the quarantine was linked with the rectangle or  
square since we are all stuck at home, and the rooms we are in are not circular (as much as I know). But hopefully 
the shapes representing creativity will be there to go over this frame. I searched what creativity would be in a shaped
 form (yes kind of weird to say) and I think a round shape to represent splatters of paint wouldn’t do, so I cheated a 
little bit and drew some. And of course using my color palette!

And tadaaaa here’s the result! 

I hope you liked this article and that it will be useful :) Sorry I know it was a little long but I didn’t want to restrain what 

I said since as you have seen there are several aspects of design and they are all important!

If you want to go a little further, here are some useful links you can use:

- Shades of color with hexadecimal code, made by google designers: 

https://material.io/design/color/the-color-system.html#tools-for-picking-colors

- Create different palettes based on one color: https://color.adobe.com/create/color-wheel

- You can find some great lessons about design on openclassrooms.com, you just need to sign up but it's free

- You can find design related videos and channels on Youtube, like "the futur academy" or "designcourse"

Don't hesitate if you have any questions, comments, things you would have done in another way (I am not a designer

and things can always be improved) or design and links you would like to share.

So…. Take care of yourselves and your families, stay home and be creative!

Astrid