Binder Clips


I did these vector drawings in the spring of 2012. The assignment was to first do up close photos of an object then draw the object. I choose a binder clip because I thought it would something you see once it is mentioned. Being really detailed orientated I actually used the paint tool to paint in the black.


Week 9

For 20 years font type layout has remained the same. There is a new trend to use web fonts. They have been using arial, Georgia, times new roman, trebuchet MS, and verdana. In 2008 Safari allowed web browser to use open type fonts then in 2010 web fonts number in the tens of thousands.

Top Web Font services

  • Typekit
  • Webink
  • Webtype
  • FontsLive
  • Font Deck
  • Google Web Fonts

Google Fonts

  • 506 Font Families
  • Custom Preview
  • Sort by popularity/date
  • Filter by characteristics/style
  • Copy and pasting into code

Good Web Fonts

  • Le Monda Courrier
  • Utopia Standard
  • Open Sans
  • Ubuntu
  • PT Serif
  • FF Tisa Web Pro
  • FF Meta Serif Web Pro
  • FF Meta Web Pro
  • Ratio
  • Merrieweather
  • Minion Pro
  • Bitstream Vera Sans
  • Myndraine
  • Droid Serif
  • Droid Sans
  • PT Sans Regular
  • Serif 6 Beta
  • Deja Vu Serif
  • Calluna Regular
  • Museo Sans 500
  • Museo Slab 500

Combing Fonts

  • Use font families
  • Use a few fonts
  • Contrast is king
  • What is appropriate for the page

Good Combination Fonts

  • Lobster and Cabin
  • Raleway and Goudy
  • Dancing Script and Jusefin San
  • Molenge and Lekton
  • Corbin and Nobile
  • Allerta and Crimson
  • Arvo and PT sans
  • Allan and Carde
  • Droid serif and Sans
  • Ubuntu and Vollkorn

Five Essential Principles of  Interaction Design

  • consistent
    • People are sensitive to change so do not change too much
  • visible
    • They need to know where the interaction is at
  • Learnable
    • Easy to learn and remember
  • predictable
    • Should show an accurate exceptions before it occurs
  • Feedback
    • Provides location, status, future events, and closure
    • Allows undo to reverse choices and correct mistakes

My wireframes


Link to my design document pdf

Burning Forest

I took this picture at Patapsco State Park. I was working on a collection of photographs that were inspired by Ansel Adams. I turned in this photograph as a black and white but I wanted to take it a step further. What I was trying to do, besides change the color, was to have the main tree pop out from the background. I was able to make the main tree darker while the trees in the backgrounds are grayer. It was simple change in Photoshop but this is one of my favorite photographs.

Week 8

Options for images:

  • Client supplies
  • Client hires a professional photographer
  • Can offer to take images for the client
  • Purchase stock photos

Stock Photography

Existing photographs that can be licensed for uses. Have to pay licensing fees.

Rights-Managed- More expensive, individual licensing agreement.

Royalty Free- Use the image in unlimited ways for one fee, no exclusivity, and it is cheaper.

Can get stock photography from:


Mistake of web design

  • Bad Search
  • PDF files for online reading
  • Not changing colors of visited links
  • Non scan-able text
  • Fixed font size
  • Page titles with low search engine visibility
  • Advertisements
  • Violating design conventions
  • Opening new browsers
  • Not answering users questions

Mystery Meat navigation– Random navigation buttons that do not explain navigation items.

Examples of Bad navigation:


  • Have to roll over the squares to find out where to go.


George’s Township Civil Defense EMS

  • The picture is not high quality, the red is an ungodly color, and not readable at all.
  • There are links everywhere.

Maison Martin Margiela

  • Links looks like web pages and they cover the other links so it hard to click if it is behind other links.
  • Just an odd website





The faculty art show was filled with some amazing works of arts. There were also a large vary of works from clay vases to photographs from film and everything in between. The art show showed how very talented Anne Arundel Community College faculty is and showed what hard work can achieve.

James Fitzsimmons “Skill and Milk Can #2” is a rather regular painting except for when the eye reaches the top of the funnel. There was a skull that looked to be hanging off the funnel like it was meant to be there. The artist was not there to ask what made him want to paint this painting.

Software art “Extreme Greenies” by Peter Williams was a confusing piece. At first, “Extreme Greenies” looks like something that went horribly wrong with a computer. Peter Williams stated that the piece has to do with major traded companies on the stock market; when the company goes up the brand turns greens and gets bigger and when the company goes down it turns purple and gets smaller. His inspiration came from a tweet from Sarah Palin blaming environmentalists for the BP oil disaster.

Rick Malmgrem had three pieces in the show, two were vases called “Blue Raku” and “Bronze Raku”. Both vases were made from a Raku clay that was flashed fired in a few hours instead of many hours like a regular kiln process. After that they were dripped in two different medals; cobalt and bronze. The metals created two very different effects, the cobalt was a beautiful dull color and the bronze was a shiny metallic color. Malmgrem third piece was “Three Moons Rising Over Black Mesa” which is a heated treated steel. The three pieces were not made but found when cleaning out a machine. Malmgrem decided the pieces were beautiful and went about setting up the order the three pieces should be in and described the wholes in the middle as little moons.

Matthew Moore untitled photograph is by far my favorite piece. The photograph is mostly black with a women with no expression coming out from the darkness. That is what the photograph was all about, coming out the darkness. Moore used film cameras with a really long exposure at night. He would start the people he would use at thirty seconds and move up to two or three-minute exposures. It took dozens of pictures to achieve this one photograph. 

Week 7


Two types of animation methods on the web:

Gif Animation

  • Low band-witch/low tech
  • Introduced in 1989
  • Simple format
  • Decoding start before data is downloaded
  • No additional software
  • Browser deployed receiver and decoder
  • Treated like a static gif file in code


  • Adobe Flash
  • Rich Media application of Vector image for animation
  • The SWF file format and free flash player
  • Uses vector and bitmap graphic, sounds and program code
  • Bring in typography, video, sound, scripting language, and animation.

Chapter 1

First part of design process is meeting clients and learning what they do
Research the business

  • Is there an existed brand/logo or do they already have a website
  • Target your Audience
  • Then put yourself in the visitor shoes
  • Organize thoughts and start designing the site

Good Site

  • Viewer likes the site but are more interested in the content
  • User can move about easily
  • Recognize the page belongs to the website

Web Page Anatomy

  • The basic web page has a container, logo, navigation, content, footer, white space.
  • Should use the rule of thirds in web design.

A morgue file is saving inspiration of websites you like or are good for a site you are designing.


  • Navigation-less
  • Expandable Footers
  • Minimalism