For the last couple of month I have been creating a one page website on cosmetics called Barry M, which is a cosmetic company. I picked to do the one page website on cosmetics as it is something I like and am interested in. I also thought that it would be a good website to create.
When making my one page website I decided that the target audience was going to be aimed at girls/women at any age range as my one page website is about cosmetics. I decided to use feminine colours like pinks and purples and make the website look like it was aimed at girls/women wanting to buy cosmetics so it would attract this type of audience to the website. I made sure that I put pictures of cosmetics on my one page website like lipsticks and nail varnishes to make sure that the target audience know what my website is about, and so it would attract the target audience to the website.
When designing my one page website I designed it on photoshop, then when I had designed it on photoshop I sliced and created my one page website on dreamweaver using variuos html, css text, and coding. To create my website design I also linked various parts of my one page website to the official Barry M cosmetics website.
When looking at my photoshop design I created, and the dreamweaver version of my one page website I created, I think that they look quite similar, but I did make a few changes to the one page website as when I was creating the design on dreamweaver I thought that certain things looked better than what my original design of my website did on photoshop. For example, I changed the text on the main content of my one page website to the same text as I have on my logo, I thought this fitted in more with my design and it also made my one page website look more feminine. I also changed the colour of the text on my one page website to black, as my photoshop version has pink writing on the main content and it is quite hard to read. Whereas black text is easier to read and it also made my website I created on dreamweaver easier to read as on the photoshop version there looked like there was too much pink used, but when I changed the text to black in the dreamweaver version this broke the website up and made it look more attractive and clear. Also, in my photoshop version of my website I had my main content in four separate pink boxes. I decided to change this on dreamweaver as it looked better when the boxes wasn't there as it looked clearer and went with the theme of the website more, also with the pink boxes, it looked like there was too much pink and without the boxes it made it look more advanced and clear. I also changed the text in the navigation bar on my dreamweaver design to a normal smooth text so my website wasn't the same text throughout as it would just look plain and boring if the same text was used. So by using the text I used on the navigation bar it made my design look more clear and broke the continuous text up. Apart from them few things I didn't change anything else on my design on dreamweaver compared to my design on photoshop. Here is a photo of my design on photoshop, and a photo of my final design on dreamweaver.
Photoshop Design
Dreamweaver Design
When I created my one page website on dreamweaver, I had to make sure that it is cross browser compatible. This means that I had to make sure that my one page website worked on every web browser. Safari, Internet Explorer, Firefox, Opera, and Google chrome. My website worked on all five of these web browsers that meant that everyone would be able to access it from any web browser, and it also meant that none of my websites coding or links were broken/wrong. Here are some images of my website in some web browsers.
Safari
Firefox
When making my one page website on dreamweaver I used various css text, css, hyperlinks and style sheets. I used the css text on my website for the text inside my main content. I also used css to create certain effects on things on my website like shadowing text on my website and adding box shadow in to my website using the css on dreamweaver. I used style sheets on my web design to give different types of styles to certain things on my web site like colours, sizes, and font etc. I used hyperlinks to link everything together, my navigation bar links to parts of the official Barry M website the home, buy online, reviews, and fun all link to the Barry M website, also the login, wishlist, and shopping basket link to their website too, and my Facebook and twitter buttons are linked up to the official Barry M Facebook page and Twitter page, I linked all these up by using the hyperlinks on dreamweaver. Below is two images, an image of the coding used for a part of my website, and the image that was created by the coding that has been used. The blue section of coding shows a link, the link links up to part of the official Barry M website and also shows where the link is on the image below highlighted in blue.
When I had finished creating my final web design on dreamweaver I needed to transfer it to the web. I did this by creating my own account by using a free web hosting site called, x10 hosting. When I signed up to the account it meant that I could host my one page website design for free on the web. When I did this anyone would be able to access my website, from any web browser.
When I had finished creating my website I had to test it and make sure that it was suitable to go as a live website, i had to give ethnical consideration. This means I had to make sure that the colours, videos, language, and pictures were suitable and did not offend anyone that would visit my website. Also I had to make sure that it was suitable for any age range to visit. I also had to make sure that none of my stuff on my one page website wasn't copy righted, this means to make sure that i had no copied images or text without online permission. When I tested my website out I discovered that it was not offensive to anyone and was suitable and safe to go as a live website. This meant that anyone, at any age range, would be able to visit my website, without a warning on my website page, and without anyone getting offended.
When creating my website, the use of content i put into my website was things like, different kinds of images of cosmetics, I put these images in as it went with the whole content of my web design. I also used a font called lipstick traces in my content, I used this font as it fitted in well with my website design, I used this font as my header, and also on my main content of my design. Furthermore, I also put a video on my website, the video fits in well with the content of my design, at it is a make-up tutorial.
My final thoughts on my one page website is that it has turned out how I expected it, it is quite different from the photoshop design I originally created, but it is better because the things that I changed on dreamweaver make my website look better, so I think that it has turned out quite well. If i had to change anything about my one page website it would be to maybe add a bit more text/ different types of font on to the website, also maybe have one or two more images, and maybe an extra feminine colour that goes with the theme of my website, to break my website up more and make it look more attractive. I have also benefited from this experience of making a one page website, as i never knew how to make one before, and now I do, and I think that it was a good thing to learn and may want to make websites in the future, and this experience will have helped me do so. So I think I have benefited very well from this experience.
No comments:
Post a Comment