In this assignment, I will be developing a website relating to an interest of mine. I have chosen my website to be an E-commerce website for cameras and photography. I have great interest in photography and have experience in the sector. I will be listing down three of my top favorite Digital SLR cameras (also known as professional cameras) and will allow the visitors to buy these cameras there and then from the website using a checkout page. The target audience for my website is photography enthusiasts such as myself. I will be listing down the cameras at a much lower price than the actual retail price so that I catch more photographers' attention and have a slight boost in the sales.
The age requirement is 13 and above as these professional Digital SLR cameras tend to be heavy and delicate and giving it to someone under 13, they might damage it which will again cost a fortune due to their high retail prices. The website is UK based websites and will not allow to take any orders from outside of the UK, so anyone out of the UK is out of luck. There is a dedicated checkout page for anyone who wishes to purchase goods from my website.
My website will be called "Rotography" which will hold detailed information about all the products that are listed on my website.
The color scheme of my website
I have decided the above colors to be my chosen color palette because it has a nice gradient to it which will allow me to make different elements of the website look uniform, yet distinctively separating each from one another which will allow for the user to find what they are looking for on the website. I have chosen white to be my text color as it allows for it to not blend in with the background and will allow the users to read the text comfortably. This does not mean that I will be using the rest as backgrounds of different pages in my website. I will keep the background the same throughout the website but will have different colors for elements like the navigation bar and the body so that the user knows where each is.
The main background color of my website will be HEX 03FAFF or RGB 3:250:255 which gives a light blue / turquoise color. I will use this color as it will allow me to keep the website look uniform with the blue scheme color I have chosen for my website.
The font I will use
The font I have chosen is from the site http://fonts.google.com and I have chosen 'Bitter' to be my font as I require having a Serif font. I will use this font throughout the website. I have chosen this font as it will fit in well with the color scheme of my website which is around the blue color. This font is going to be in white and will stand out from the background which will allow for the users to easily read the text. The font also is slightly thicker than other fonts which will keep it distinct from the background.
Logo
The logo that I have used is of an animated camera which I created myself in Adobe Illustrator. This is the logo I chose because this relates to my website a lot. My website is based on a photography interest that I have, and the logo represents it. The lenses are made of two variants of blue color which reflects on the color scheme I have chosen on my website. The lens being the main aspect of a camera which is why I decided to keep that on the same colour scheme of the website. I have chosen the background of the logo to be yellow as it will allow for the logo to stand out from the background of my website.
In this blog, I will be discussing the different inter-activities I will be implementing within my website. This will allow for the user to be more interactive with the website which will provide with a much responsive yet friendly user experience. It is important for every web developer to have some a degree of inter-activities within their website in order to keep the user from getting bored off the basic layout.
The inter-activities I am planning on using are mentioned below.
Rollover activities
I will be implementing is roll over buttons which will give the user a visual feedback to where they are clicking. This is one of the most common ways to improve inter-activities within a website. On the above example, the button turns froma blue colour to a burgandy colour when it is rolled over to give the user a visual feedback.
Click activities
One other rollover activity I will be implementing is click activities where again, the user will have a visual feedback to where they are clicking. The links will go from grey to red when clicked on which which is the interactivity to make the user aware of the link they are about to click on.
Drop-downs
Drop downs are another form of interactivity that I will be using in my website.This will give the user another visual feedback when they click on a drop down enabled box. The drop down will give the user several options related to the box title. In the above example, the title of the person is being given in a drop down, so instead of the user fully typing their title in, the website will give them options from the available titles.
Images used in my website
In this assignment, I will be discussing the images I am intending on using in my website and an alternative piece of text if the images stop working. The images I will be using are illustrating the products that my website will be selling. The website will be selling two professional DSLR cameras and one T shirt as an exclusive Rotography merchandise.
Images of the cameras
Logo
In this assignment, I will be discussing the images I am intending on using in my website and an alternative piece of text if the images stop working. The images I will be using are illustrating the products that my website will be selling. The website will be selling two professional DSLR cameras and one T shirt as an exclusive Rotography merchandise.
Images of the cameras
 |
| This is the first camera that I will be selling. This camera is called the Canon EOS 5D Mark IV. This image will have an alternative text saying "Camera 1" which will let the users know that it was a picture of the first camera, if something goes wrong with the image. |
 |
| This is the second camera that I will be selling. This camera is called the Nikon D810. This image will have an alternative text saying "Camera 2" which will let the users know that it was a picture of the second camera, if something goes wrong with the image.
Images of the exclusive t shirt
|
 |
| This is the exclusive Rotography t shirt that I will be selling. This image will have an alternative text saying "Tee" which will let the users know that it was a picture of the Tee, if something goes wrong with the image. |
 |
This image is of the logo I created for my website called Rotography. I will use this logo on every webpage of my website and an alternative text of "Rotography logo" will be created in order to let the users know that it was the logo, if something goes wrong with the image.
|
Wireframes of my website
I have created wireframes of my website which illustrate how my website will look like after it has been finished. I have called the website 'Rotography' which is an eCommerce website for people who have a passion for photography like myself. I will be selling two different cameras which are my most favorite cameras at a discounted price. My website also will be selling its own merchandise which is a T shirt with the website logo. In total the website will have three products but in total it will have 6 webpages. I have created a wireframe for each webpage which are shown below.
I have created wireframes of my website which illustrate how my website will look like after it has been finished. I have called the website 'Rotography' which is an eCommerce website for people who have a passion for photography like myself. I will be selling two different cameras which are my most favorite cameras at a discounted price. My website also will be selling its own merchandise which is a T shirt with the website logo. In total the website will have three products but in total it will have 6 webpages. I have created a wireframe for each webpage which are shown below.
 |
| This is a wireframe of the homepage of my website which will list the three products that my website will be selling. Due to the website being an eCommerce website, it will show the products on the homepage. I will have three products, two of which will be professional cameras that I recommend at much lower prices than the Retail price. I will also have a description which will let the enthusiasts know the reason why I recommend that camera. |
 |
| This is the wireframe of the webpage where my highest rated camera will be selling. I will have a picture of the camera and then I will have the specifications list next to it. I will also have a buy now button underneath the description. |
 | |
This is the wireframe of the webpage where my website's merchandise will be selling which is a T shirt with the website logo on it.
|
 | |
This is the wireframe of the webpage where my second highest rated camera will be selling.
|
 |
This is a wireframe of the checkout page which the users will see if they decide to buy an item. This is going to be a form where the user is going to input their details in and order for the product they are intending to buy.
|
 |
| This is the sitemap of my website where it shows how my website functions. I will have 6 webpages in my website with one of them being a homepage, two being the cameras I am selling, one being my merchandise on sale, one being a contact us page and one being a form which is the checkout page as shown above. The homepage will link to the two cameras that I will be selling, the merchandise and as well as the contact us page. The cameras and the merchandise will have a buy now button which will link to a checkout page. |
No comments:
Post a Comment