Assignment 2- Development
Introduction
The main objective of this assignment is to develop a website on a thing that interests you. Stated in the last blog I decided to develop my website about makeup. Before developing the website I designed various prototypes using Balsamiq. The advantage of developing prototypes is to achieve a fully functional website.
As part of the assignment, I must make sure that all images are copyright free. Because of this, I decided to take my own images and also use copyright free images from Stockphotos and FreeStockPhotos.
Images I captured myself include:
 |
Powder Image |
Images I got from various copyright free images include:
 |
Copyright Free Image: Source Free Stock Photos
|
Once I captured my images
and ensured that they were suitable for my website I began creating my
template. Using my prototypes on Balsamiq I began coding my website using
Brackets. I decided to use a basic html style which include's a navigation bar
on each page to allow user navigate throughout the pages and also be able to
return to the home page. The navigation bar will stay consistent on each page.
If the website is inconsistent it slows the visitor down causing them to lose
interest and they will leave the website. Links included on my navigation bar
include:
My website also contains
many other consistent elements. One of the main consistent elements of my
website is a search bar. This search bar redirects users to Google searches.
 |
| Developed Search Bar |
Like the navigation bar, the search part was developed using div's and a form. The form is used to create an input field for the user to search for information. This information is then directed to Google using the action within the form.
 |
| HTML for Search bar |
Secondly, each page
contains a footer section which provides users with information about who
created the website and also provides them with a link that redirects them to
the websites sitemap.
 |
Footer that contains information about developer of the website and link that redirects user to the websites sitemap
|
Once I decided on my consistent elements on my website I designed a logo
for my website. I designed the logo using both Adobe Illustrator and Adobe
Photoshop. I downloaded the chosen font from dafont.com. After development of the logo my next
task was placement of the logo. I decided to centre the logo on the page
because it will be more convenient for both desktop and mobile users
 |
Centred logo for website
The background image used is a powdered purple eyeshadow. I thought this image was most suitable for the website and also worked well with the colour scheme. I added the background to my css page using a url. The image used is copyright free and is sourced from stockphoto.com
|
 |
| Websites background image |
 |
Overall Layout design
|
Implement&Content Design
Once I created my basic template for each webpage on my website, I
began to add content to my pages. As my website is an informative website I
include a lot of text and images. I began with designing my index page. My
index page is my main page of the website that the user will land on when they
visit the website. When designing this page, I decided to keep it simple and welcome
the user to the website. I did this with various images and edited them to be
more suitable for the website. The images are modified to look like a polaroid
image. On each image I included words to welcome the user to the website. All
images used on the welcome page are copyright free and are sourced from
FreeStockPhotos.
 |
| Index.html (Welcome Page) |
The next page I created was the about page. The about page
contains information, images and tables about the website's content, makeup,
the history of makeup and the benefits of using makeup. Information on this
page was researched from various websites and these websites have been sourced
on the web page.
 |
About.html (Contains images, text and tables of information)
When designing my website it was compulsory to include a table. I decided a table would be beneficial for the brands webpage. I divided the brands table into four unique sections. These sections include:
- Natural and Green Brand
- High End Brands
- Drug Store Brands
- Independent Brands
Once I created the table and filled in the information I decided to style the table. First, I included a table caption to the webpage using the <caption> tag. I then added a background colour for the table header using my colour palette chosen. Next, I decided to add colour to the over table and every even cell in the table was colour. I did this using various css rules.
|
 |
| about.html (Including compulsory table) |
When designing the
makeup.html I included a page with image links that redirect users to the
pages also included in the makeup dropdown list. This provides users with two
directions to navigate to these webpages
 |
makeup.html
or
|
Secondary Navigation bar when hover over Makeup
|
When a user clicks brushes
and tools they are met with 2 image hyperlinks. These image
hyperlinks separate the brushes from the tools. The brushes.html
page is displayed with a slider. A user can click left and right the images on
the page changes and provides the users with a detailed description of the
product.
|
 |
Brushesandtools.html
|
 |
brushes.html slider that provides information about each brush
|
 |
| tools.html provides information about the main tools of makeup |
I decided I would include a page about animal cruelty. Animal cruelty is an important aspect of makeup as some laws allow countries to test products on animals. All products on my website are cruelty free and I provided information on my website to make more users aware. All information on this page that I have researched is also cited and hyperlinks are included on the webpage.
 |
| animalcruelty.html |
My low cost makeup web page
include images and information about low end makeup brands that are as good as
high end brands. I included this page for users to be aware of these products,
their price and where they can purchase them.
 |
| lowcostmakeup.html |
When developing the face care page I decided to include an embedded font-family. The font that I have chosen to include is called Impris and I got this font from dafont.com. To include this font I had to construct various css rules. I first had to initialise the font and provide it with a name. I then had to download the font, create a folder for it and call it's path in the css rule. Once I did this, I created a div around the paragraph of text that I had chosen to include the font family on. In the div css I simply just called the font-family. I included it in the first step on the face care page as this is the most important step in the routine.
 |
| facecare.html including font-face |
 |
| font-face code |
Finally, the last page include in the secondary navigation bar is Eye Shadow Pallets. When developing this page I decided to use an image slider. This image slider allows users to click an image. When the image is clicked the image will enlarge and provide the users with information about the product. The user also has access to a left and right navigation bar on the images which allows the user to swipe left and right throughout the eyeshadow pallets.
Resource: W3Schools.com
 |
| eyes.html |
 |
| enlarged image and information about the pallets |
This sounds like a very interesting project. I think you have a good concept going. It sounds like you have thought this through. I agree that consistency is a good thing with the navigation bar. I am curious to see what you come up with for the final project. Good luck!
ReplyDelete