Monday, December 15, 2014

Dec 15 - Website Modification

After deducing what I needed to change on the homepage, I contacted my client for confirmation on what she agreed on my opinions for what to change in the homepage, and other suggestions she might like to add so that we can make our website more visually appealing and meet our objective. From my research, we got to the conclusions that we should provide more emphasis on the logo, use better color schemes, and have larger size pictures on webpages. I provided these suggestions to my client so that we can form some targets for improving our website that meet the criteria. By doing so, we can improve the visual appeal for the website and further achieve the objective that me and my client are trying to reach with this website, and allow for a better access and view of information and images from my client's company.

First of all, we needed to change the logo. Me and my client had another verbal discussion, and we came to the conclusion that creating a vector image for the logo would be better, to avoid pixelation of logo. Apart from just using text, we came to a conclusion that making a simple circular logo would also suitable.

To create the logo, we used this photoshop logo tutorial https://www.youtube.com/watch?v=JznIqTDEawo as inspiration.

Using the 3-circle design to create ring inside the logo, me and my client liked the design and decided to use it as inspiration. We also thought that the font used (dodger condensed) was very modern and stylish. Therefore, we made our logo using this design and font in the video.






To start working on the logo, we used a program called "Xara Photo & Graphic Designer 9" which designs a vector image.

Using the ellipse tool in this program, I created 3 circles of different sizes, and aligned each circle center. The outside and inside circles are black, while the one between both black circles are grey, creating a grey ring inside the circles. Then, I used the text tool to create the text using dodger condensed font for the initials inside the logo and words alongside the logo. Then I exported the file as a PNG file. We then used this logo to create a favicon logo. We used http://www.favicon-generator.org/ to create the favicon logo. The logo was a cropped version that only contains the circular part of the one made using photoshop,

This logo simply turns the picture into an ".ico" file, with 16x16 pixel dimensions. Afterwards, I saved it in the root directory of my website and added the following inside the <head> of each webpage: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">







After creating the logo, we started working on our website color scheme, to improve the visual appeal. I contacted my client via e-mail, and we discussed what the color scheme should be:




























After discussion with my client, we decided that it would be best to use a white/black background or a graffiti/black background, and we will experiment with this on our website.

To experiment with this, I used the homepage as a modification webpage to see how it would look like.

What I changed on the website, was the color scheme, logo, navigation size, and image slider size.

I first changed the logo, and the height of the nav so that it would fit the logo size. I added the logo and changed the nav <div> height attribute, so that the navigation bar would fit the logo size. Here is the html/css code for the navgation (for the parts that I changed):





On the HTML code, I used a different file for the logo and changed the height and width attributes. On the CSS file, I changed the height attribute of the nav section. The navigation hover also turns black after it is hovered on, and it's original color is #333333, which is a grey-black color.











Then for the body in CSS, I changed the 'background-color' attribute from grey to white. Here is what the background and navigation bar looks like for now:





The logo has been changed, and the height of the navigation bar has also been increased.

For the photo slideshow, I changed the slideshow dimensions from 320px to 480px (height), and max width from 640px to 960px. This changes the border dimensions for the slideshow. Then, I changed the image height and width of the images in the slideshow, to 480px height and width 960px. Here is what the website now looks like:



















The size of the navigation bar and the image gallery have been increased, and the background has now been changed to white. I will experiment with a graffiti background next time.

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)