I took a look at how I would begin prototyping by checking out how others have done it. The following image shows how the user created a website from paper prototyping. Obviously he knew exactly what he wanted in his website and the type of layout to suit his needs.
'Image courtesy of: http://www.vikingkarwur.com/blog/archives/2006/05/'
In my case I think that I will be doing some more than this as I don't quite know what type of layout I want and I will be doing some sampling with diagrams as to what I really want it to turn out.
Firstly, I have to think up of a name:
BelfastCommute - This was the first idea that I came up with as I was really just targeting Belfast and the domain name was free at the time, but after a discussion with Paul we both felt that maybe I should target a greater scope 'Northern Ireland'. This was a good plan as I would be able to do a lot more with my website instead of just targeting one specific area. With this name it sounds like it is a 'To Belfast' service whereas with a suitable name it would be a greater service 'To and From Belfast'.
I began doing some sketches and paper prototyping for a logo idea. I had been trying out different names and usingdifferent typefaces, but felt that I should try doing some protoypes.
Some names I brainstormed were NI Cmmuter, Travel2Belfast, JourneyNI and Journi. The las appealed to me as I felt that it was catchy and stuck with it. I then showed Paul McCormick the same ideas and he thought it was a good name for the service.
Travellingni - This logo would be a simple Helvetica font and thecolour would be primary, concise and clean on the eye. I would remove the letters 'L' and instead would place to tyre marks in to still symbolise that it is a form of transport website. I would then try to incorporate the ni into the word travelling to make it stand out a bit more just like the image below.
Commuteni/Commutini/Travellini - This logo would have been something similar, with the colour schemes but instead I got my idea from the bbcni logo which can be seen below only I wanted to elaborate on it a bit more this would be appealing to the user as it would be catchy on the eye and look simple at the same time.
Image courtesy of www.bbc.co.uk/northernireland
Instead of just leaving NI just like this I would add more human like features to it, as if the letter 'I' was a person sitting down travelling on a bus or train.
Here is another logo from NITB Northern Ireland Tourist Board which is a very good idea of how the used the words but changed some of the colours so that the letters 'NI' stand out from the rest. The logo is simple as it just has a shamrock instead of being green the background is and the shamrocks white with a little bit of red at the top of the shamrock to link up with the "NI".
Here is another logo from NITB Northern Ireland Tourist Board which is a very good idea of how the used the words but changed some of the colours so that the letters 'NI' stand out from the rest. The logo is simple as it just has a shamrock instead of being green the background is and the shamrocks white with a little bit of red at the top of the shamrock to link up with the "NI".
OmniTravel - This next name came to me when Paul McCormick spoke to me about Omnibus being the collective word for buses. I thought that OmniTravel would have been a good name for the website as Omni means all or many and travel... well it's pretty self explanatory! Therefore OmniTravel means all ways of travel with the ni from Omni representing Northern Ireland. For this example I haven't quite thought of the process of designing the font as I have a few ideas about it so far. Something slender and clear maybe a sans-serif font maybe keeping the ni as serif or else bold but I'm in the middle of reviewing it at the moment.
Journi - I felt that this name was most appropriate as it incorporates NI into the word journey. The name journi needs to be easy on the eye yet catchy at the same way. I looked at fonts that would be appropriate to the name, industry and website. Below are some examples of the name and how I have added some symbols to the name to make it stand out more.
A more simple approach to the name with a compass symbol on top of the letter "i" to make it stand out a little more. The aim of the compass symbol is to give the theme of travel and the word journi is travel in northern ireland mainly to Belfast.
Now that I have a name, I need to find out what the layout of the website will be. Firstly I will look at the wire frames of the website taking into consideration the pixels size of each individual aspect. Below is an image of the wire frames of the home page and a standard layout for the rest of the website. Firstly is an image of the homepage
The width of the main contect will be 900 pixels. The logo/banner, navigation and footer will be 850 pixels. The contents page will be 600 pixels and the news feed will be 250 pixels as well as each of the link divs along the bottom will also be 250 pixels.
The next is the same layout for the rest of the pages:
The only main difference between the two page wireframes is that there will be nolinks as such along the bottom of the page as indicated on the image above. The only other difference will be the length of the contents page as it will vary from each page.
Here is my first paper prototype of some of the pages that will make my website. As you can see I have done these sketches before I had come up with the name. The logo will be in the banner and it will visually enhance the website as the banner maximises the advertisement of the website.
The navigation process will be quite simple as I want to make it visually and practical for all age groups that I will be targeting. I then placed a space at the bottom right of the screen an advertising area, but now I feel that an update process would be more beneficial as it will inform the clients rather than taking them away from the site with advertisements.
I have been research 960 layout system for grids and wire framing which enables the client to alter a 12-column grid which is divided into portions that are 60 pixels wide. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. It is a great system for getting the layout of your site exact.
"The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements." http://960.gs/
Now that I have analysed these features I will be creating a prototype for the structure and layout of the Journi website. Below is a prototype of the Homepage:
This is a first approach to what way I would like to see they way in which my end product will appear. It looks quite sophisticated yet simple at the same time. There doesn't seem to be anything to hard for the user to cope with, instead I have tried to go with the same approach as National Express.
The About page looks slightly similar to the Homepage here with some adjustments to the view of the content. The county or counties page will look something similar to the above image but I feel that I might add a search bar onto this page as it may make things easier for the client. This search bar or journey finder may prove to be a great addition to the site and improve the usability and its practicality.
What if?
Just a thought but when I was doing some prototyping at the beginning I made some sketches of how I would like my website to look in application form for the iPhone or other forms of Phone with applications:
No comments:
Post a Comment