Web Design

 

final_draft

DESCRIPTION:

This project was to create a website to showcase our logo design.

PROCESS:

  1. The first thing I did was pull up In Design and started creating a rough draft in there of what I thought I would like to create. I moved things around and had to remember that my coding skills are limited.
  2. I drafted up my text in Word and then placed it in my In Design rough draft.
  3. I used Illustrator to create my color pallet.
  4. I then used notepad ++ and started coding the html. I used my coding book quite a bit and referred back to some of my previous web projects to see how things worked especially the background.
  5. I looked up font sets in my book and picked some of the standard sets.
  6. I created two folders; one for images and one for my css.
  7. I placed my images in the image folder.
  8. I created a new css page in the css folder and began coding in there.
  9. Here are some of the challenges I faced.
    1. Floating my two images.
    2. Getting my background to show up.
    3. Getting my footer to stay stick to the bottom.

 ROUGH DRAFT:

roughdraft

Rough Draft

CRITIQUE PROCESS: 

  1. Huyett: Hi Toni! I like the paper texture you’re using in the sidebars and the overall look suits your logo nicely. Your screenshot is a little blurry on my screen so you might want to see if you can get a better one for Sister Tranberg to critique. There are a couple of things that jump out at me here – the images and captions all seem to be aligned differently, the captions in particular although the color scheme image jumps out as well. It also looks like the “Images” heading is larger than the others (maybe? hard to tell with the blurring), but I think it’s falling trouble zone of being just different enough to feel off, but too close for contrast. I think I’d probably shrink it to match the other headings or possibly take it out entirely just to help clear the whitespace a bit.

    Oh, and you might try increasing the yellow header and title at the top – I think it could give it more weight on the page and help anchor the viewer’s eyes there as a starting point to scan down the page. With all the bars the same size it’s actually drawing my eyes around the page rather than into it. I like that you added your name on the bottom bar, btw – nice touch and finishes it off well.

    Not sure if it’s required or not to link to our blogs specifically (and I think the link you’ve included makes more sense then a blog link anyway), but that might be something to double check.

  2. Adam Harper: He suggested that I move the color scheme image lower on the page, remove the image header and have consistency with the red headers.
  3. Sister Tranberg: She suggested to make all headers in red to be the same type for consistency, and to move the color scheme image lower on the page.

CHANGES

  1. I made the top header a little larger.
  2. I moved the color scheme lower on the page.
  3. I changed the red headers to the same sans serif font for consistency
  4. I added a link at the bottom of the page to my blog page.
  5. I changed the background to a plainer blue.

TOP THINGS LEARNED:

  1. I gained more confidence in my coding skills.
  2. I learned more about floating elements and clearing them.
  3. I learned more about relative positioning. I had to use this to get my footer to stick to the bottom of the page.
  4. I still don’t fully understand the difference between the margin and padding, but gained more experience using these.

MESSAGE:

The message was on how I created my logo.

AUDIENCE:

My audience is people wanting to know how to create a logo.

COLOR SCHEME & COLOR NAMES:

Primary color scheme red(ED1A38), yellow(F3CE1D) and blue (28419A).

TITLE FONT NAME & CATEGORY:

  1. Title and text: font-family: Times, Georgia,serif;
  2. Headers: font-family: Helvetica, Arial, Verdana, sans-serif;

IMAGE AND SOURCE:

blue
Blue Wallpaper for background

Advertisements

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