Fonts + Logo

When choosing some font's for my website I decided that I needed a mixture of Mario-based fonts and modern fonts. I went onto the popular font website www.dafont.com and then looked for some fonts which were either Mario-based, modern and stylish or more traditional.

I came up with the following shortlist which is analysed in my sketchbook:

Fonts chosen - Also in sketchbook.

Now that I had a short-list of fonts, I needed to pick a main font and a secondary font so I could mock up the logo and see how the fonts would work in a logo design.

I decided that in order to reflect the Mario world as well as a modern website I would create a logo with 'Mario' in the video game font and with 'Plumbing' in a stylish, new font. I touched on this when coming up with logo designs in my sketchbook.

Here is the outcome of these designs, click on the image for the full size picture:

The short-listed fonts combined into logo forrnat.

After looking at the fonts in this logo-based format I have chosen the fonts 'Super Mario Bros.' and 'Antipasto.' which are both freely available at www.dafont.com.

Now that I have chosen the fonts in which my logo will contain, I could mock up some different coloured versions of the logo - as this is where the colour scheme for my website will originate from. Here are the mocked up logos in different colours. The reason why the chosen colours are so bright is because they are derived from the official Mario logo - something that is replicated in the 6th logo below.

(Click to enlarge)

After seeing these 'same colour' logos I mixed and matched some of these colours to create some different looking images, and these are shown below:

(Click to enlarge)

Now that I have played around with different colour combinations I can create a final logo piece. Whilst this logo design does not yet incorporate any of my other logo ideas in my sketchbook (such as a plumbing/Mario related emblem) it is still possible for me to add this, though I may yet decide that this logo does not need anything else, and my header will then just be left simple - albeit with other images possibly used within the header instead of within the logo element.

Here is my chosen design:

I chose the colourful Mario lettering combined with black as I think it incorporates the Mario games with a modern and stylish feel too. When looking at the original designs though, I realised the letters were fairly spread out and so I adjusted the font kerning in Photoshop so that the letters were more bunched together. I also thought hard about the visibility of the chosen colours and then decided to add a drop shadow in order to make these visible and readable on a website background.

I think this logo works very well and will look good within my website's header.

Update:


I also tried putting a 'Starman' from the Mario games into my logo, in a similar way to a design in my sketchbook:

Logo with added starman.

However, I decided that this does not look as good as before and so am sticking to my original logo design.

Colour Scheme

Even though I already had a final design for the website, I had not yet come up with a colour scheme - hence why the website's design was mocked up in shades of green. So, in order to create a coherent final design I needed to come up with a colour scheme. Fortunately I found this quite simple as I had clear ideas in my mind for the three main colours to be used on my site.

I decided that two main colours were needed, alongside a contrasting colour that would be used to split up pages or draw attention to certain things. When picking these colours, I wanted the site to seem stylish and modern, as well as related to the Mario games of the last 25 years. Because of this, I chose a deep red as my contrasting colour, and then blue and white as the other colours.

Red was chosen as it is the famous colour of Mario - and it's brightness and striking nature will suit the role of a contrast colour perfectly.

The blue and white was a slightly more ambiguous choice as it bares less relation to Mario - but when used and mixed together can create a pleasant and stylish look to websites - such as the Pimlico Plumbing site that I analysed on this blog and within my sketchbook.

Here are the three main colours:

Site Layout Ideas

As the homepage is the first thing that anybody sees when they will visit the site, it is important that it is designed well and is clear, simple and easy to understand.

In order to accomplish this, I have mocked up two basic design ideas in Photoshop that show how the homepage could look. In doing so, I also added an image of a van to show how images could be used to either emphasise a content box / link or to draw attention to the header or possibly even information written on the van.

Here are the two main layout ideas for the website's homepage:

First Design: Contains two side content boxes, one with an image link - possibly could be used for social networking?

Second design: Simpler single side content box layout. However, could be expanded to two or more dynamic boxes

These two designs are similar but contain different design elements. The main difference is the use of side boxes. In the first design, I chose to use two same-sized content boxes which could then be used for either consistent information (such as contact details) across all the site's pages, or for dynamic, changing information (such as the van button example used). In the second example I use one singular side box for the content - which again could either be static content across all the site's pages.

The main content box looks like it is a fixed height in the design - but I do not plan for it to be, I plan for it to be this height as a minimum and then can be expandable depending on how much content I put into it. However, I plan for the boxes at the side to be of a fixed number and height in order to keep a consistent layout across different pages of the site.

In the second design I used the image of the van to jump out of the header and break out of the layout slightly so that attention can be drawn towards it - thus making it a good idea for a button or for extra content etc.

However, I prefer the idea of having multiple content boxes - such as one static one for contact details and one that changes depending on the page. Because of this, I may yet tweak this basic design further and create a basic template for the entire site which contains multiple content boxes at the side and images that leap out of the header.

Finally, I have also used a basic grid layout which means that I can change this to suit different page ideas that I have. The site is split into 3 main columns, and I have used them as a ratio of 2:1 in order to manage my content. By doing this, I can develop the layout across other pages and possibly try some more ideas rather than the basic layout.

This basic layout is good for the homepage as it is clear and simple, and I will soon post up a final idea which contains both the multiple content boxes and the 'jumping out' header image combined with some colour scheme ideas for the website - as the colours used in the above images are not representative of any final design ideas. As I have this basic layout - I can either use it across all pages on the site, or choose to develop it and change how it looks depending on the page content.