Description:
A web page designed to showcase a personally created logo.
Process (Programs, Tools, Skills):
By using only TextWrangler I was able to produce this simple webpage. I had never before written in HTML or CSS. It was interesting to learn how the different tags work together to create the final outcome. I liked having the HTML and CSS validators, found on the web, to help me see where a mistake was made. When deciding the design process I considered the importance of the FOCUS design principles I have learned: Formulate a Plan, Organize the Layout, Contrast the Elements, Unify the Parts, and Simplify the Message.
I actually began this process by updating a previous logo I had made. I easily did this by opening Illustrator and modifying an existing design. I added a new company name underneath an existing image and then selected a new color scheme. After doing this, I was ready to mark up my content in HTML and import my new design, then I attached a pre-made CSS document to my HTML. I then went into Photoshop and used the eye dropper tool to find the correct hex code to correctly match the colors from my logo. I inserted the correct hex# to where I wanted the color. I also changed my fonts to Tall Dark and Handsome and PT Sans. I declared some backup fonts just in case the viewer’s browser didn’t have these fonts. I also used breaks before and after the logo and so that it would not be too close to the body. I eventually coded a table in my HTML document so as to move my body text inward and allow enough room from the double border without effecting the H1 in the body. Understanding how to mark the HTML and CSS together to make this happen was the most difficult part of the process for me.
Programs/Tools Used: TextWrangler, Illustrator, and Photoshop
Message: That lioness communications is a resource for those seeking “only the good report”.
Audience: Anyone in the world desiring a positive or uplifting message.
Top Thing Learned: How to use CSS and HTML together to design a basic web page.
Color scheme and color hex: Complementary: Brick #eb652f; Teal #47a69d; White #FFFFFF; Gray Gradient: #555555 to #2e2e2e; Black to Gray Gradient: #000000 to #555555.
Title Font & Category: Tall Dark and Handsome; Sans Serif
Copy Typeface, Font, & Category: PT Sans, PT Sans Regular, Sans Serif
Changes made to the CSS: I changed the font families, and I also changed the colors to match my logo. I added a gradient background to both the body and background. Additionally a double border was instituted to complement the design. I noticed that my websites default color was set to a purple, which conflicted with the flow of my color scheme. I did some asking and found out how to make that brick so as to repeat my color scheme. I also found it necessary to bring the text in the body in on both sides and used a table to accomplish this task.
Word Count: 286