Comps for Website

Comp 1

Comp 2


Week 9 re-cap

Week 8 re-cap


– Taking type to the web

– The safe list

– Arial

– Arial Black

– Comic Sans MS

– Courier New

– Georgia

– Impact

– Times New Roman

– Trebuchet MS

– Verdana

– Problem with the safe list is it doesn’t provide much variety.

Week 7 re-cap

Week 6 re-cap

Week 5 Re-cap


  • Anything that gives a distinctive appearance or feel to the surface of a design or object.


  • Unit of measurement.
  • Pixel is short for picture element

Point or dot

  • Fundamental element of graphic design
  • Can be used to build any graphic element
  • Have no scale or dimension unless they have a frame of reference
  • When points are grouped together they create a lines, shapes, and volume


  • Two or more points connect they make a line
  • Most common element in graphic design and most expressive
  • Foundation of drawing, and design

Diagonal lines

  • Evokes a sense of movement and excitement. It has potential energy
  • Pattern of diagonal lines makes the design feel more “on edge” causing your eyes to move around constantly

Horizontal lines

  • Provides texture and interest to a design
  • Line thickness
  • Jagged lines with sharp angels can feel dangerous and frantic
  • Gently rolling, curving lines can feel relaxing and smooth
  • 90 angle lines feel sharp and mechanical
  • Lines with lots of curves and angle’s feel very expressive


  • Two end points of a line come together, a shape is created
  • Basic geometric shapes are circles, triangles, and rectangles to name a few
  • Feel technical and mechanical

Freeform shapes

  • More abstract than geometric shapes
  • Consists of non-geometric curves, random angles, and irregular lines
  • Free flowing nature that conveys a sense of informality and spontaneity
  • Can represent an outline of a product, human gestures, or organic doodle

– Light and shadow are important in creating depth and volume

Final Project Proposals

Name of the business, organization, etc., that you would like to work with;

How you are affiliated with the organization;

  • With all the organizations listed I sign petitions and call members of congress to try persuade politicians to back certain ideas.

How you would gain information, photos, and content for the website;

  • I would look through the websites they have now, as well as look online for other information about these organizations.

Anything else that would be of interest;

  • A website portfolio of my work

If one of your ideas involves a portfolio website, please include whether or not you have current digital content, and what type of portfolio it would be.

  • I do have digital content, it’s mostly assignments from other CAT classes I would be displaying, as well as some of my Photoshop work I’ve done.

Week 4 re-cap

Color –

Red – stimulation of blood pressure and adrenaline. Known to increase human metabolism. It’s an exciting, rich dramatic color,  the color of passion. Darker shades of red (burgundy, maroon) have a rich and indulgent feeling about them. Earthy, brownish shades of red are associated with fall and harvest. Can provoke anger.

Orange – attractive, energetic color. Promotes happiness and represents sunshine, enthusiasm and creativity. More informal, less cooperate feeling. Stimulates metabolism and appetite, great for promoting food and cooking.

Yellow – highly active and visible color. Associated with happiness and energy. Pure yellow is a visibly active color. Too much yellow can be overpowering.

Green – associated with nature. Very soothing that symbolizes growth, freshness, and hope. Easy on the eyes and less active. It’s a very versatile color.

Blue – symbolizes openness, intelligence, and faith. Calms people down, can reduce appetite. Not good for promoting food products. Sometimes viewed as bad luck and trouble. Universal appealing due to the blue sky and sea. Conveys a sense of stability, and clarity of purpose

Purple – Historically associated with power and royalty. Represents wealth and extravagance. Least commonly used color.

White – “clean”, color of perfection, light, and purity.

Black – color of power, elegance and strength.

– There is no wrong color to use for a Website.

Color Temperature –

Warm Colors – From red to yellow, including orange, pink, brown, and burgundy. Because they are associated with the sun and fire. Represents both heat and motion.

Cool Colors – from green to blue, including some shades of violet. Violet is the intermediate between blue and red. Cool colors can calm people down and reduce tension great for background and larger elements within a website because they don’t overpower your content.


–     – is a special character. & is the beginning ; is the end. None breaking space (nbsp). This is a standard element

– < nobr > < / nobr  >  – no break

–  < blockquote > < / blockquote >  used to indent text.

– < q > </q > – used for quotations

– <  pre  >  < /pre > – block level tag. Displays in the browser how it is in the text editor.

Bad Websites –

Week 3 – recap

Image Files for Web –

– There are 2 mainstream file formats for the Web:

– JPEG = Joint photographic Experts Group

– GIF = Graphic Interchange Format

– PNG file format

– Less standardized, but is sometimes used

XHTML Structure –

– Block Level Elements

– hi (header tags) – most important heading

– Paragraph tags

– Unordered lists or ordered lists

– div tag (divided content)

– Inline Elements

– Strong tag

– em (Embed tag)

– img tag (creating links)

– span tag

– Consistent structure throughout your site is very important

In our book (The Principles of Beautiful Web Design) chapter one, it talks about layout and composition. The process of creating a design comp includes two things

– Discovery

– Implementation

Discovery – Finding out what the client does, and how they run their business. This helps you come up with an appropriate and effective design. Some good questions to ask are:

– What does the company do?

– What is your role in the company?

– Does the company have an existing logo or brand?

– What is your goal in developing a website?

– What info do you wish to provide online?

– What comprises your target audience? Do its members share any common demographics, like age, sex, or physical location?

– What are your competitors and do they have websites?

Implementation –

You should then start sketching out possibly layouts. You can then move onto Photoshop and create a simple mock up of the layout, messing with color schemes and things.

Defining good design –

Usability standpoint and aesthetic perspective are two main standpoints for defining good or bad design. The design should be about communication.

– Users should be pleased by the design but drawn to the content. The design should not be a hindrance; it should act as a conduit between the user and the information.

– Users can move about easily via intuitive navigation. The main navigation block should be clearly visible on the page.

– Users recognize each page as belonging to the site. A cohesive theme or style should exists across all the pages of a site.

Web Page anatomy –

– Containing Block, every web page has a container.

– Logo, It’s the identity.

– Navigation, essential the navigation system is easy to use and find. Users expect to see navigation at the top of the site, even if you have navigation on the right or left hand side as well.

– Content, content is king. Keep main content block the focal point of the website.

– Footer, at the bottom of page, contains copyright, contact and legal information.

– Whitespace, is every bit as important to the content on the page. Helps the design to breathe, so it isn’t cluttered. Creates balance and unity.

Grid theory –

– A grid is essential to graphic Designers. Used to make things square or lined up but also, helps proportion things.

Balance –

– Symmetrical Balance, otherwise known as formal balance, when the elements of a composition the same on either side of an axis line.

– Horizontal symmetry, centering content or balancing in between columns.

– Bilateral symmetry, composition is balanced on more than one axis

– Radial symmetry, elements are equally spaced around a central point.

For the web the best image is images with little file size but the best quality possible.

Dreamweaver CS4

Image Accessibility Preferences

– Images should have alternative text in order to meet accessibility guidelines

– Alterative text is added using the “alt” attribute of the <a> tag

– This text is often referred to as “Alt Text” or “Alt Tagging” your image.

– Text should be descriptive and short

– If the image is a link, or represents data, the text should give direction or information.

– Dreamweaver allows you to enter Alt text for an image in the Properties Inspector.

– Missing Alt text is the most common accessibility error

Week 2 re-cap is a great site for learning XHTML

java script –

– Interactivity

– Functionality

– Created in 95 by Netscape

– JavaScript has nothing to do with the programming language java

– JavaScript is easier to learn but can’t be used to create stand along applications or server components

– JavaScript is intended to provide dynamic web content


– Or Cascading Style Sheets

– Separates structure and presentation

File naming conventions –

– No spaces

– Shorten file names if you can

– Don’t use special characters

– Don’t mix upper and lower case together

– Use consistent extensions

Working with hyperlinks –

– How you create a hyperlink in HTML (<a , </a>) It’s an anchor tag


–  ULR (Uniform Resource Locator)

– Scheme:    //host   :port   /path   :parameters   ?query   #fragment

– Scheme: (website URL’s it’s HTTP)

– //host ( ex –

– :port (number, it’s rare to see anymore)

– /path (path to the file, with html code in it)

– :parameters (not used very often)

– ?query (interactive sites)

– #fragment (takes you to a portion of the page)

– The scheme, host, and the path is what you will usually see

– target = ”_blank” makes the link into a new blank page or in some web browsers another window or tab.

Using relative URL’S –

– Don’t have all the parts

– Relative links are relative to the current location of the file that have the links in them

« Older entries