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.

Mario Websites

Similar to my analysis of plumbing websites, I have taken a small sample of Mario websites to see if I can find any further ideas to incorporate into my website's design.

These have also been annotated in my sketchbook in detail. Click the images to enlarge them.

www.smbhq.com

www.themushroomkingdom.net

www.mariobroswii.com

Whilst these sites also share some elements with the plumbing websites, there are some other features that were not included in the plumbing genre that may be good to incorporate now that I have seen them in use on these sites.

The three main things that I think also need to be included within my design are:

• Social networking
• Bright colour
• Mario imagery

By including these things as well as those previously mentioned in the other blog post I should create a good design for my website.

Plumbing Website's

As my website project will be creating a Plumbing based website, I have looked at some plumbing websites that already exist to see the kinds of things which need to be included on my own site.

These are 4 sites that I found through doing a Google search and cover a variety of different areas of the country. From these chosen sites I can learn about things that need to be included within my site (such as pages and content) and can then build up ideas about what to put into my final design.

These website examples are also in my sketchbook where I have annotated them in some more detail. Click on the following images to view them full size.

www.pimlicoplumbers.com

www.duelservices.co.uk

www.heatingcentral.com

www.homeserve.com/plumbers

These websites share some common features such as:

• Logos
• Menu bars
• Footers containing legal info and links
• Prominence of phone number
• Clear information about the company on the homepage
• Plumbing images
• Gas accreditation marks
• Simple layouts

From these websites I have found many features that I can now incorporate into my own website design so that it fits into the genre of website which I should be focussing on. From these observations and from my sketchbook annotations I will be able to create a believable and appropriate design. These website examples will also help me work out what pages the website should have - and I will look at this in a future blog post.

I will also look at a couple of Mario fansites for some further research in another blog post so that I can combine the two types of website into one design.

The Idea! My website will be...

After much deliberation, I've decided to go with the idea of creating a website for Mario's Plumbing. I think that this website will provide me with a variety of design opportunities and interesting ideas which I can implement in my final design.

This website will be aimed at customers of the business which are obviously those seeking plumbing will be the ones looking for the site - and because of this it needs to be designed appropriately and contain features which relate to the genre of 'handyman' websites - something which I will begin to look into.


Whilst this seems like a fairly professional idea to be using, in reality it is obviously not. As the site is for a fictional company - based on a video game character - this means I can run with the theme and make something less serious and more tongue-in-cheek. The colour scheme and logo will be based on the Mario universe (and are things that I will be blogging on soon in order to test out some ideas), and things like images and text will be based around the games too. This means I can use different characters and areas of the Mario games in order to build up the design. For example, Luigi could be holding a phone and advertising the phone number, or Princess Peach could be crying for help with a blocked drain.

Hopefully, over the next few days I will post up some rough logo and colour scheme ideas before I start to design the site's layout.

Practice Logo Design

After playing around with Adobe Illustrator, I have come up with some ideas for logo's for my website. To start with, I familiarised myself with vectors in order to create my logo. In doing so, I came up with a practice image, in a similar style to how I may want the site's logo to look:


Whilst this is simply a leaf with a letter on it, it has given me a practice model on which I can then base a 'proper' logo on. I plan on creating two or three logo designs that I can choose from and use on my final design. These designs will probably revolve around images to do with the site - such as a Mario pipe, or a plumbing based tool such as a spanner.

Hopefully by using these vector based designs I will be able to create an interesting and suitable logo for my site.

Production Idea: Sports Information/News Site

Another idea which I have had is that of creating a website based around sport news, statistics and information - such as football. However, as football is a very wide reaching subject, my idea has been scaled down to that of a more niche market, to that of either teams within the npower Championship or just completely focussed on my team: Norwich City

A site of this type could hold so much information, that I would need to narrow it down to small areas such as results, news, fixtures and statistics. Whilst this still covers a lot of information, I think it would stop the site from becoming too over-crowded or complicated to design and make.

Another potential problem is the amount of existing sports sites that are on the web right now. It would be hard for me to design and create something that is brand new and interesting. However, this would provide me with lots of examples to analyse and look at in order to create designs that fit my genre.

I don't think that I will choose this production idea, but there are plenty of reasons why it could be feasable, should I change my mind.

Production Idea: Mario's Plumbing

After some thought, I have come up with a provisional idea for the basis of my website. This idea is to create a website for the fictional video game character Mario - who is a plumber - to advertise his plumbing business.

Mario is well known for being a plumber, yet nobody knows anything about what he does in his trade. Therefore, I thought it would be a clever (and fairly abstract) idea to design and create a website for this. As far as I am aware (and after a quick Google search) nobody has created a website for the moustachioed hero's plumbing business yet - although plenty of plumbers have based themselves after the man himself:

As this is only a provisional idea, I haven't come up with many plans for it yet. However, should I choose to go with the idea of 'Mario's Plumbing' - I will begin researching plumbing websites (as well as those for other utilities such as electricians) in order to come up with ideas and thoughts on what should be included in my site and how it should be organised.

Introduction

Welcome to my Production Portfolio for the MEDS2007 module of Media Studies at De Montfort University.

This blog will be home to my creative ideas and work as I build up thoughts and ideas to put towards my final project of the year - a website. Over the course of the next month or so I will be collecting ideas, information and examples to shape my final design. From these examples, sketches and thoughts I will build up the final plan for my website and then begin to create it.

Hopefully, this blog will be filled with many interesting posts!