Mini-box Site :

April 5, 2010 § Leave a comment

Reasoning for color scheme?

– Originally I thought it would be a good idea to go onto the official Crayola website to look at the color scheme that they had generated. I knew that I could go off what my box (Crayola chalk) looked like, but I wanted a “second” opinion. I also really wanted to look at the logo to look at not only color but also how they designed it (composition-wise).

…But once looking over the site, I really thought that the colors were a little too opaque for what I was thinking I wanted to do…but I did really like the “elementary” feeling that the colors had. I still wanted to have a really kiddish, playful feel, just not as “strong”.


Looking over Crayola’s site, I knew that I still wanted to keep yellow and green dominant colors, just maybe use the logo as the big piece of color instead of the whole site.

…the Crayola chalk box is what i was thinking more…

…this is what I came up with…

…I kept yellow and green pretty dominant – softer shades of yellow and green though – and made the logo stand out with brighter, different colors. The colors still seem playful and young – but they also seem to have this “old school” feel to them – the opacity being low makes them feel this way.

Typography?

I knew that I wanted to use a font as close to the Crayola font as I could – really bubbly rounded letters, something with the ability to have a stroke and fill added. I went onto google and did a guess-and-check “analyzation” and ended up finding the font “porky” on a yahoo question page…this led to the downloaditization. I found the “porky” font on dafont.com.

Seeing as how I was using a “chubby” font, with lots of swoops anyway, I wanted to find something to pair with it that was more of a Sans Serif font…again, my process was guess-and-check “analyzation”….I ended up with Tw Cen MT, luckily no download was necessary, it looks such as such:

Mixed with the Porky text, it looks like such:

I think both texts mix really well together – they both play off a really young, childish, fresh feel – what I was hoping for.

Do you foresee any challenges in the PSD to HTML/CSS conversion of your site?

One challenge I think I’ll be faced with – that is until I conquer this challenge – is putting my site into the box format of an actual Crayola chalk box, I’m not quite sure how to do this…my other problem that I thought I was going to have was using the font “porky” – it has to be installed to use – but luckily there is some CSS I can use so that the text will work on any computer downloaded or not.

Any changes you need to make?

Not that I’m aware of.

Some interesting things I’ve found with CSS:

April 5, 2010 § Leave a comment

I’ve always been curious about the types of text to use and what the differences are…this site is going to help me a lot.

http://www.webdesignerwall.com/tutorials/typographic-contrast-flow/

I really like the simplicity of webdesignwall’s examples, they’re really straight forward.

…I’ve been searching for a good example of how boxes work with html (not that I really need to know anymore because CSS does the trick now)- but I finally figured it out.

These two sites are really helpful:



…new to me is the inheritance command in CSS (http://webdesignfromscratch.com/html-css/css-inheritance-cascade.php)

…html…

…to CSS…

****some notes for myself…***

  • in stylesheet.css = to inherit a property- must write the element to inherit above the property you wish to change
  • whatever is further down the list/stylesheet = will become dominant
  • padding adds space inside, but makes width larger
  • margins add separate elements from each other
  • top right, bottom left = how CSS reads numbers describing element/property
  • /* comment */ = comment in CSS
  • # = id
  • . = class


Website redo for fourseasonsphotography.com and keenestudio.com

April 5, 2010 § Leave a comment

COMPARISON: fourseasonsphotography.com

WHAT’S WORKING?

  • some of the links
  • they have a really rudimentary logo
  • pictures
  • style/polaroids- its all right, it could be improved

WHAT’S NOT WORKING?

  • some of the links
  • the color scheme
  • navigation- its location and its funky links
  • the info page is WEIRD
  • no organization

COMPARISON: keenestudio.com

WHAT WORKS?

  • nice colors
  • good…enough logo
  • nice table- bad location
  • navigation

WHAT DOESN’T WORK?

  • Placement of main table
  • about tab- awkward
  • colors are a bit boring
  • corporate pg. confusing
  • navigation a little bit more organized

FOURSEASONSPHOTOGRAPHY.COM REDO:

KEENESTUDIO.COM REDO:

Assignment 1: What makes a site successful?

April 5, 2010 § Leave a comment

Features that are successful: NAVIGATION/TOP AND BOTTOM:

  • simple navigation (no drop down menus that drop down a mile)
  • navigation at the top of your page- ascending navigation seems to create clutter and confusion in sites
  • navigation at the bottom of your page- if viewer is at the bottom of the page, not scrolling is necessary
  • needs to be easy to see- make sure its distinguishable from your text/content also on the page
  • navigation that works- make sure all of your pages can be navigated to

CONTENT:

  • pictures- nobody will go to your site if it us comprised of only text
  • text- less is more in this case
  • background images can be depending on the site

PAGES: the essentials-

  • a home page- explains the purpose of he site- it allows your viewer to have a place to return to in case they get lost or just want to go back to the beginning
  • contact page- a way to get a hold of you beyond your site
  • info page- more info that you may need if you couldn’t cover it all on the home page
  • gallery page- its not mandatory, but its more entertaining and allows viewer to break from reading text

COLOR SCHEME:

  • there needs to be cohesiveness to your site- color schemes help to create this
  • makes your site pop out more

LINKS:

  • your site lives off of these- if there are broken links, your site will not perform well= people not visiting= no profit=why did you build the site?
  • keeps viewer attracted
  • allows more information into your site

LOGO/NAME:

  • establishes who you- allows people to recognize what you do and hopefully remember
  • gives your site power, I guess

WHITE SPACE/SPACING IN GENERAL:

  • leads the eye across/down the page
  • lets the viewers eye rest while moving to a new position on the site
  • is more aesthetically pleasing to look at
  • makes sits appear well constructed- compositionally

COMPOSITION:

  • try not to dead center things
  • flow left to right like we read

SITE NAME:

  • choose a name that is appropriate for your target audience- zeldafreak69.com probably won’t cut it
  • the name should be simple

TYPE OF SITE:

  • html- I think its the easiest to use, the quickest to get to (no loading pages), and the most straight to the point
  • flash- Flash works, but I think its more frustrating than successful most times

Features that are unsuccessful: NAVIGATION:

  • no navigation
  • navigation that does not navigate
  • navigation that isn’t proportionately spaced

CONTENT:

  • only consists of text- no images
  • only images- no text
  • crappy pictures- extreme pixelation

PAGES:

  • ten thousand pages
  • no home page

COLOR SCHEME:

  • no cohesiveness with the colors- neons mixed with pastels with super opaque colors

LINKS:

  • broken links
  • no external links

WHITE SPACE/SPACING IN GENERAL:

  • page covered= no white space or spacing

COMPOSITION:

  • everything is dead centered
  • using both left margin and right margin

LOGO/NAME:

  • no name title/logo symbol

SITE NAME:

  • zeldafreak69.com

Summary: A successful site should consist of strong navigation, a logo or name for the site, a good content mixture of text and images, multiple pages, internal and external working links, some kind of a cohesive color scheme, an appropriate URL, and an attempt at good design elements. EXAMPLES OF SUCCESS: http://www.samjonespictures.com/

  • very simple
  • great navigation
  • strong visuals- he’s a photographer so pretty much mandatory
  • little text
  • main focus is on the page- the page doesn’t scroll
  • site is centered, but great proportions
  • clean color scheme of white with light color
  • URL is appropriate
  • lots of white space, really calming to the eye

EXAMPLE OF UNSUCCESSFUL: http://www.shoebuy.com/

  • very busy
  • navigation is all over the place
  • no white space except for vacant space on the far right
  • few images- lots of text
  • littered with advertisements- it really takes away from the site
  • the title/logo almost gets lost because its so busy- not very distinguishable
  • no noticeable color scheme

Where Am I?

You are currently browsing the IM 190 category at Larizaadp's Blog.