Description: You are looking at a screenshot of a website I created to showcase a logo I designed for my Comm130 course.
Process (Programs, Tools, Skills): I created the web page using TextWrangler text editor. I used tutorials found at w3schools.com to assist me with the html and css coding. I also used the markup validation service at validator.w3.org.
Using Photoshop, I resized my logo image and I converted the file from an Adobe Illustrator file to a png file. I also used the eyedropper tool in Photoshop to identify the hex colors used in the logo, so I could duplicate them in the web page. I created my own background image for the web page using Photoshop. This was a little complicated because the cookies on the edges of the background had to be placed just right so they would line up perfectly when the background tiled in the web browser.
I used TextWrangler text editor software to open an existing text file, and I inserted html tags to create a web page. I created a div tag for the image to align on the left side of the page and a portion of the text to align next to image on the left side of the page. I added styling to the web page with an existing css document, which I altered to suit my design. In the css document I changed the font family and colors of several elements. I also adjusted the padding so the elements would be in alignment and not too close to any edges.
Message: I can use software and html & css codes to create a visually appealing web page. I can design logos.
Audience: This is for anyone looking for web page designer and developer or logo/branding designer.
Top Thing Learned: The web page background repeats depending on the size of the browser. A designer needs to take into account how the background will tile so the images remain fluid.
Color Scheme: The color scheme is complementary with shades and tints of teal and brick.
Hex colors: Brick #bf4e25, Dark Teal #005c81, and Medium Teal #57abc6.
Title Font Families & Category: Arial Black, Gadget, sans-serif.
Copy font Families & Category: Georgia, serif.
Changes made to the CSS: I changed the colors and font families in the css file to match my logo. I also inserted some styles to allow the text and image to float next to each other at the top of the page. I then cleared the style so the large red header would not alight to the right side of the image. I changed the link color from the default purple color to brick red, and then assigned a style to change the appearance of the link when a cursor hovers over it. I included some individual styling in the html file to adjust the top margin on one p tag.
Word Count: 460 words.