Project 7: Web Page

P7JonCattronScreenshot

Description:
This is a webpage for showcasing my personal logo.

Process (Programs, Tools, Skills):
I created this web page with Notepad++.  I had very little experience with HTML/CSS before this project. I was able to see how things can come together with just text. There are a lot of different options in what you can do with CSS, so I’ll be happily learning more about it.

First, we made the general content and design for the page by writing about our logo process in HTML, then inserted my image. After, we attached a pre-made CSS document as external styling. I changed the colors to the webpage to match my scheme. I had to use Photoshop and the eyedropper tool. I changed fonts, and added a few other shapes by using DIV’s and learning what I can do with those. I centered the logo and experimented with columns for the text and also how to make a NAV for the page. I learned how to make the nav and get it on the page, but was unsuccessful in making it look how I wanted. I will work on this later, so for now, I have it commented on my CSS, so it is not on this screenshot.

Programs/Tools Used: TextWrangler & Photoshop

Message: This is something that represents me.

Audience: Anyone who is interested in the skills that I have to offer in design, art, writing, or music.

Top Thing Learned: How to add shapes to a design and how to change fonts, borders, etc.

Color scheme and color hex: Monochromatic Lime Green #A4C421;  White #FFFFFF; Black #000000; Grey #666666, #444444, #333333

Title Font Families & Category: (all names)  “Palatino Linotype”, “Book Antiqua3”, “Palatino6”, serif

Copy Font Families & Category: (all names) “Abadi MT Condensed”,  “Geneva”, sans-serif

Changes made to the CSS: I changed the font families, the colors in order to coordinate with my logo, I added an extra div shape and subtitle, and a second picture at the bottom of the page.  I started on a NAV also, but left it out for the final.

Advertisements

2 thoughts on “Project 7: Web Page

Add yours

  1. Great job, Jonathan! The color choice is what stood out to me initially and I think it was a good choice in color scheme. I also like the use of the logo at the top and bottom and how you switched the coloring to add variety. I can tell you put a lot of thought into your first heading with the change in color, lines, and extra text. Great use of white space too. Overall, you did a great job!

    Check out Joe’s webpage!
    https://josephstay.wordpress.com/2016/03/13/project-7-web-page/

    Like

  2. Great job on your project! I thought that the colors do a great job at catching attention and bringing focus to your company. I like that you added in a double header and a little slogan to bring focus there. I also thought it was a smart idea to add in your logo a second time, but in a different format. It might have worked better if you had more body copy so that the images were farther apart, but regardless of that, it turned out great! https://bridgettegarrison.wordpress.com/2016/03/13/project-7-web-page/

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: