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
Jodi GREAT JOB!
I loved how you used the gradient to add more texture to your webpage. It is very modern and fun. I love your color choice, and the orange and teal contrast nicely with the background. I also love your logo. Great job! Its easy to see you put in alot of time and effort.
Check out my blog:
https://kelliepitchforthcomm130.wordpress.com/about/project-7-webpage/
Jodi, Your web page has a clean simple appeal to it. The teal and brick complementary color scheme against the grey is striking. A lioness is a striking animal, gestalt is working well here. Another thing working for the overall feel is the way you designed the lioness, she looks to be made up of diamond faucets. Diamonds are a girls best friend, lions are at the top of the animal food chain. These are two of the reasons gestalt comes together on a website/webpage designed to be “seeking only the good.” Thank you for your demonstration of great design principles Jodi!
-Tamara
Karina Wilde designed a lovely webpage. You can see it here:
https://karinawilding.wordpress.com/category/design-projects/
Nice job! I like the logo in the page. I also like the darker colors and the background. But the blue and orange make a good contrast. I also like how you made those two colors the same colors of your headings. That creates repetition and adds to the gestalt. It all looks professionally designed and well put together. Keep up the good work!
Check out my blog:
https://communicationsbrianstanfill.wordpress.com/2015/03/15/project-7-web-page/
Jodi! I LOVE your webpage! I really love your lion logo! It looks like Nala off of lion king! The gradient background is subtle yet it adds a lot of depth. I really like your color scheme also! I think you did a great Job! check out Alex’s Webpage! http://xfactorutah.com/2015/03/p7-web-page/