The Logotype

Your website will have an identity that is displayed primarily through a logotype that will probably be put on the header although it can be in other places as well.

So, what is a logotype?

 

The video above was actually made for my Graphic Design students, as an introduction to the overall idea of what a logotype is. There is also a PDF version of this which you can view or download here >>>

Logotype Categories

 
logotype-pictogram-ideogram.png

Logos fall into three classifications (which can be combined): Ideographs are completely abstract forms; pictographs are iconic, representational designs; logotypes depict the name or company initials.

A logo is a graphic mark, emblem, or symbol used for public recognition. It may be of an abstract or figurative design or include the text of the name it represents as in a logotype. A logo is the central element of a visual identification system. Therefore, the design of logos and their incorporation in a visual identity system is one of the most important things that we do in graphic design.

We will take the combined route of placing the name of the company next to an icon (which may be abstract or representational) since this approach is the one most widely used. However, this does not mean that you cannot design just a logotype, meaning an identification that is based solely on the name of your site and that therefore has no icon next to it. 

There is an extended page where I talk more about what logotypes and logos are, which you can read here: 

https://va301.wordpress.com/2017/11/29/the-logo/

Logotype Design on the Wix Editor

 

This chunky icon got combined with a chunky text which is Josefin Sans Bold, so in this design I shot for a harmony between font and shape - both are bold and chunky. I aligned the bottom of the text with the bottom of the icon, since that gave me a very clear line. The top I eyeballed to align roughly to the middle of the stroke that makes the head shape.

noun-cat-3550501.png

KIZGIN
KEDİ

Here I settled on the opposite to what I did above: I went for a strong contrast. Very heavy icon, very light text. This is not a combination that happened right away - I played around quite a bit before I decided on this combo. The font is Barlow Semi Condensed Thin. 

MANYAK TAVUK

This is the first of 2 versions. It is not the one I used in the end but I still want to show it. The cat was made white in photopea and then I placed it inside a dark container here in Wix. The alignment is from the bottom and the top of the text aligns with the back of the cat.

KIZGIN
KEDİ

cat-straight-back-1.png

This is the version that I actually ended up using and you can see it in action here >>> where I combined it with a long dark menu.

The font used is Barlow Semi Condensed Bold and the icon comes from the Noun Project. I downloaded many many cat icons and played around with all of them. And that is what you should do as well. First off, it is a lot of fun, and second the more you experiment the better your result will be.

noun_Cat_550612.png

KIZGIN
KEDİ

The font is Montserrat Bold. I just aligned the text with the middle of the cat head (remember round things always get aligned from the middle. You can see the final usage of this here >>> 

noun_Cat_205633.png

KIZGIN KEDİ

You can of course put together a logotype on photopea (to where you can also upload your own fonts), however a really efficient way to make a logo is to assemble in the place where it will actually live, which in our case is the Wix Editor. Create a blank page and hide it so that it does not appear on your menu. Then start playing around with icon and font combinations, which is what I did in the examples below. When you are happy with something scale it down to fit the header and drag it there to see if it is working. 

The one drawback to working in the Wix Editor is that unfortunately the fonts cannot be scaled by just simply scaling the text box. Instead you have the scale up / down the font itself. The plus is that since your logo text is made out of real fonts (as opposed to being a bitmap) you will be able to see right away how they look (are they crisp enough, legible enough) at the final size.   

My advice is to have plenty of icons and plenty of font alternatives and create many combinations, also using different font weights and widths, before you decide on your final design. All of the icons that I used come from the Noun Project, which for me is the best place to find really good ones.

Logotype Design on Canva

 
20.png
6.png
15.png
1.png
333 tutorial (1).png
333 tutorial.png

Creating a circular text logotype is not possible on Wix. There is however, a very easy to use online platform called Canva, which I have also used to show you the color wheel, that one can use to make such logotypes. 

One thing that you have to be aware of is that you will need to have the month long premium trial before you can make a usable logo on Canva since you will need to export your logotype as a transparent background image and also at a larger size. So, make sure you have this temporary premium account in place before you start. And make sure you opt out before the end of the month since otherwise they will charge you.

You will need to watch the video above in order to learn exactly how to go about putting a logo together on Canva. 

There is one other thing that you need to take into account if you would like to have a circular logo as part of your site identity: As you will see from the examples below, these logos are quite high and if you try to put them on your header, the header will become very deep, taking up quite a bit of viewing space on your pages. So, a logo like this can only really be used as a full version on a homepage or a micro site and then on a multipage site only the icon of the logo would be placed as a "reminder element". I have made a tutorial video about this which you should watch here >>> before you decide to go ahead, to see if this something you would want to do.