My website will be about a motorcycle. More specifically it will be about Honda CBR 125R. It will consist of basic description and information that the audience may find useful.
Purpose
The purpose of this website is to inform the audience about the parts, models and overall different aspects of the Honda CBR 125R. This way the audience may learn about certain aspects of the bike and eventually apply the knowledge gained to their own bike.
Audience
The audience of this website are bike riders and fans. The website will be rather aimed at Honda CBR 125R bike riders, however it may also be appealing to other bike riders. The age range of the audience will be 14+, since it will contain information about the bike's maintenance and parts, which younger users will probably be not aware of.
Content - Description of Honda CBR 125R
This first page will be describing the Honda CBR 125R. The description will consist of basic information such as the first model, horse power, engine size and other relevant specification of the motorcycle.
Content - Honda CBR 125R Models & Year
The next one will include the different Honda CBR 125R models and their corresponding year of manufacture. This page will also include the relationship between the models produced during the years to other motorcycles. Additionally, I will talk about how the bike has developed and changed over the years and compare the basic specification of the bike.
Content - Accessories
The third page will consist of the different and relevant accessories for Honda CBR 125R. This would include things like exhausts, cargo net, outdoor covers, rim tapes etc and reasonable price of each product.
Content - Basic maintenance
The next page will contain information about basic maintenance. This would include things like changing/adding engine, brake and other essential fluids and oils. This page will also include "Always check before a journey" topic.
Content - Basic parts
The last fifth page will consist of all basic and essential parts. This would include things like tires, brake disks & pads, chain & sprockets and more. I will also include the price of the parts I talk about, to give my audience an idea of the cost of different products in case they decide to purchase any of them.
Navigation
Colour Scheme
By exploring the Adobe Kuler colour themes, I managed to choose a colour theme I believe will suit my website. The colour scheme I will be using is complementary, which means the colours in the scheme are contrasting with each other.
The colours of the scheme are as follow:
Colour 1 - black: #000000
Colour 2 - light grey: #3D4742
Colour 3 - light red: #A40028
Colour 4 - dirty white: #E0DAD6
Colour 5 - dark grey: #292929
https://kuler.adobe.com/#cool-and-warm-color-theme-3385148/
Fonts
I've been looking at various websites that provide free web fonts. After spending some time I've came to the decision to use two fonts from Google Fonts. Audiowide is one of the fonts, which I will be using for my headings and subheadings. Alegreya Sans is the font I will be using for the main body text.
The image below shows the two fonts. The first one is for the headings and the second for the body text.
I chose Audiowide for my heading as it's stylish, fancy, bold and will stand out to the rest of the text on the website. I like the unique design, shape and position of the letters and I think it will make the entire website make much more professional and modern.
I chose Alegreya Sans for my main (body) text, because it looks simple and unique at the same time. I think both fonts suit each other and will look good on the website. Also the font isn't bold by default, which is another factor I had to consider and reason I chose it for.
Lumzy web pages design
Home page
This screenshot shows the design of the Home Page for my website. It's pretty simple, as it's I've decided not to have too many elements for the Home Page. In the centre of the page will be the main and only text, which would be an introduction to the website and its purpose, followed by an appropriate heading. I decided to have two images of motorbikes on both sides of the page, so there isn't big block of empty space. By looking at other websites and their designs I've came to the conclusion to have the navigation bar right at the top of each web page, so that its easily accessible and eye catching. I decided to place the logo at the top left corner, because it has become very common to have the logo somewhere across the top of each page in a website. As every personally created work/product this website will have copyright, which will be indicated by a copyright text and logo at the bottom right corner of each page.
Models & Year page
This is the Models & Year web page. Just like the home page I have positioned the navigation bar and logo right at the top of the page, where they can be seen, memorized and easily accessible if needed to. Similarly to the home page it has the main text in the centre of the page, along with a heading. This way user's attention will be grabbed instantly by the information. I've also decided to spread four images around the rest of the page, firstly to display some of the different models & year of the motorbike and also to fill up the empty space.
Accessories page
The screenshot above shows the Accessories page. It has multiple column layout, due to the purpose of the web page. Since it's about the accessories available for the motorcycle, I will be displaying multiple items with an appropriate image, along with a brief description to give the users a better idea about them. The rest of the layout is exactly the same as every other web page, which I've done for a reason. The reason is that the pages throughout a website should look alike as much as possible, which is done so the users are not confused and put off by the design.
Maintenance page
This is the maintenance page of my website. The design is pretty simple, yet informative and appealing. I will be using a three column layout, as each would consist of a heading, brief and simple description of how to go about the maintenance and a relevant image to go with each description. The rest of the design is the same as the rest of the pages, as shown in the screenshot.
Parts page
This screenshot shows the design of the fifth and final page of my website. Just like the rest of the pages, I have positioned the navigation bar and logo at the top of the page for easy access. The copyright text is at the bottom right corner, along with the copyright symbol. The rest of the design includes multiple column layout, as each of them will be for a specific part. Each column will consist of a heading, brief & relevant description of the part/product and an image.
Images to be used & text to describe them
Home page
This is the second image I will be using on the home page. It shows an earlier model of the motorcycle. The alternative text I will be using for this image is: Honda CBR 125R, year 2009 in black and white colours.
Models & Year page
This is the third image I will be using on the Models & Year page. It represents the 2010 model of the motorcycle. The alternative text I will be using is: Honda CBR 125R 2010 year in all black colour.
This is last image I will be using on the Models & Year page. It represents the latest model and year of the motorcycle. The alternative text I will be using is: Honda CBR 125R 2014 year, latest model in all black colour.
Accessories page
This is another image I will be using on the Accessories page. This image represents rain/weather cover specifically designed for the dimensions of this motorcycle. The alternative text I will be using is: Grey Honda rain/weather motorcycle cover.
This is the last image I will be using on the Accessories page. It shows a paddock stand, which is used to perform various maintenance activities on the motorcycle. The alternative text I will be using is: Grey metal Paddock Stand specifically designed for the dimensions of this motorcycle.
Maintenance page
This is one of the images I will be using on the Maintenance page. It represents the changing of a motorcycle chain and sprockets. The alternative text I will be using is: Changing motorcycle chain and sprockets.
This image represents the changing of motorcycle engine oil. This is another basic maintenance done to every motorcycle. The alternative text I will be using is: Changing motorcycle engine oil.
This is the last image I will be using on the Maintenance page. It represents the checking of tyre pressure and pumping tyres. The alternative text I will be using is: Checking tyre pressure and pumping tyres.
Parts page
This image represents the front brake disk. The alternative text I will be using is: Grey front brake disk.
This image represents the front brake pads for the motorcycle. The alternative text I will be using is: Dark grey and black material front brake pads.
This image represents a pair of mirrors to fit the motorcycle. The alternative text I will be using is: A pair of black standard motorcycle mirrors.
This is another image I will be using on the Parts page. It represents a pair of tyres to fit this motorcycle. The alternative text I will be using is: A pair of black tyres on grey rims/wheels.
This image shows a pair of replacement grips to fit this motorcycle. The alternative text I will be using is: A pair of black and red motorcycle grips.
This image shows brand new chain and sprockets kit. The alternative text I will be using is: Brand new grey chain and sprockets motorcycle kit.
This is the last image I will be using on the Parts page. It shows a standard rear shock absorber for the earlier models of the motorcycle. The alternative text I will be using is: Brand new grey and red early models motorcycle rear shock absorber.
Website Logo
Website Interactivity
I'm planning on using some basic types of interactivity in my website.
One interactivity will be the buttons. The navigation buttons will get highlighted as the user hovers over them, in order to indicate a selection and give the user a better sense of navigation and orientation.
Furthermore, the logo will also have an interactivity. It will also be a button, which if clicked will be navigating the user to the home page. This interactivity will improve accessibility and navigation.
The last and final interactivity I will be using on my website is links. On both the Accessories and Parts pages, I will include a web address link on each image. This way the user will not only be aware of the products available, but actually visit websites they can purchase any of the products they want from. This may come very handy, in case they are not really up for searching for the products.
