Week 15

Linking Web pages together

Once you have completed the template and all the pages associated with your web page you can link them together. To do this all you have to is go into your template and link each navigation to its page that you made. Save everything and now when you bring up your homepage you should be able to click-through all the other pages.


Week 14

Domain Name

The domain name has three parts. The first is the name of the site, that is the part that the owner comes up with. The second is the extension, the most popular being .com. Some other extension are .us or .co for countries, .biz is for business, .net is for internet related.

Tips for picking a domain name

  • Keywords your site makes you think of
  • Choose a .com extension
  • Make it easy to type and remember
  • No hyphens

Common Registrars

  • Godaddy.com
  • register.com
  • netsol.com

You save a template in Dreamweaver by going to file save as template.

Week 13

PNG 32

  • It uses flexible JPEG RGB color model
  • Completely loss less compression method
  • PNG image is much larger file size then a JPEG
  • Reproduces complex transparency setting


  • Uses palette based color model like GIF
  • Can not animate life GIF files
  • Offer transparency but either solid or completely transparent

Take pictures into Fireworks, change the file format to PNG8. Switch to alpha transparency to help with picking colors. Older version of browser won’t show the transparent parts but will render it without as to not know it was supposed to be transparent.

Week 12

Search Engine

This website has great links with definitions on search engine results, page rank, keyword tools. The page title is what Google uses for their searches while Bing does not use page title always for the results. Search engines are the main way user find websites. A good listing will increase traffic; most websites don’ t consider how search engine work. Google is a crawler based search engine. Human power directories are things like open directory. Hybrid search engine is like MSN search.

Good Host Sites

  • Blue Host
  • Chrystal Tech
  • GoDaddy
  • Network Solution

Keywords are the words the user might use to find your site. Should be at least two words long. Include title and atl tags.

Use Fireworks and Photoshop to make slices to define and create buttons and images. Does not create HTML code or account for incorporation of text/background images. For Fireworks to export css, html, and images import into Dreamweaver. When using PSD, smart objects importing to Dreamweaver. Photoshop save for the web and use CSS in Dreamweaver.

Week 11

Low Cost Images

Can go to micro stock sites for .20 cents to $10 per image.

Can get the images from:

  • istockphotos.com
  • Bigstock.com
  • stock.xchng
  • Dreamstime.com
  • shutterstock.com

Creative Common

A set of copyright licenses and tools that create a balance inside traditional all rights resources. Can get them at Flickr or Fotopeds.

Design Comps

Free Icons

Designer Toolbox

Web Fonts In Photoshop

Five Principles to Design By

  • Technology serves Human
  • Users are always right
  • Design is not an Art
  • Web Design is first technology and gotten right of when it is not needed.
  • The experience belongs to the user
  • Designer creates things for the user to use and does not work until the user uses them
  • Great design is invisible
  • Works so well the design goes into the background
  • Simplicity is the ultimate sophistication
  • Know what to keep and what you don’t need.

Chapter 5

Images should be relevant, interesting, and appealing. Can create the picture yourself. purchase the photo, or hire a professional. Rights managed are professional quality but costly. Can use CC Flickr. Don’t get images from google or hotlinking. Use Photoshop for adjustment. Save as jpegs, gifs, pngs. Can use CSS to enhance images with things like boarders.







Week 10

Common Mistakes Print Designers Make on the Web

Putting Design before Content

  • The user is not thought of.
  • Websites are context first than design second.
  • Wire Frame the content.
    • Three Document Layers
      • Structure
      • Presentation
      • Behavior

Designer for a specific Browser

  • Leaves out consideration for other devices and sizes.
  • Assertive technology needs to be thought of
    • Large Text
    • Navigation on-screen
  • Create pages to web standards
  • Preview in Many Browser

Naming & Styling Element Based on appearance

  • Use appropriate tags
  • Name CSS based on function

Believing the tool is Smart

  • You use the tools not the computer
  • Don’t forget the code

Misunderstanding linking, naming, and server codes

  • Uploading everything to the server
  • Use lower case letter

A Picture is worth a thousand words, isn’t it?

  • Don’t reply on pictures
  • Gif for flat color area
  • jpg for photos, gradient and drop shadows
  • Transparent png when you need transparency

Putting all the image directly in the page

  • Put images in CSS

Being a control freak

  • Colors vary from monitors
  • Web is not Print
  • No <Br> in headers

Think inside the Box

  • Using fluid method
  • Use 3D instead of 2D
  • Use navigation space

You Don’t have to wear all the hats

  • If you need help ask for help

Dao of Web Design

Web developing out of old medias like radio and tv. Radio to tv saw voice overs when voice overs were no longer needed. Don’t copy but be influences by old medias. Designers are not in control of the web. Deal with the facts and be creative in the box. Think why you do things.

Planning and Implementing Website Navigation

  • Primary: Content most used navigation
  • Secondary: Other things that may have interest to the user
  • Carding: sorting information that will on the page.

Wire Frames clarify exacting which you want to look like.

Mock up focuses on visual design elements and includes graphs

Prototypes: Semi-functional webpages, give you and the client a feel of what the webpage will look like.

Wire Frame:

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
  • Fonts.com
  • 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  http://bcts-potomac.aacc.edu/ARTClass1/23/final-project/profile.pdf