Headings range in size from h1 /h1 (the largest) to h6 /h6 (the smallest)
Empty Elements
In HTML and XHTML only a very few elements are declared as EMPTY. This means two things:
They do not contain any text. They are used simply as markers (and in some cases are used for whatever is contained in their attributes.
Empty attributes are not permitted to have an end-tag.
Common empty elements include.
• hr / Horizontal rule
• br / Line break
• img / Inline image
Wednesday, February 8, 2012
Lecture 4 Notes
The HTML Markup Language
• HTML is a language of tags. Think of tags as instructions written in a text document (ASCII) such as Notepad, SimpleText or Pico.
• Tags are always enclosed in angle brackets: <>.
• Tags can be thought of as 'containers', because there is usually an opening tag <> and a closing tag .
• Some tags are not containers, though. They are empty elements. These stand-alone tags include the line break and the image tag.
html
head
title /title
/head
body
/body
/html
Paragraphs
p.../p
The blockquote tag
• Used for setting off quoted text from the surrounding text
• The text in the blockquote tags is indented and there is a space above and below the quoted text.
Character Formatting:
Bolding/Strong
b.../b
strong.../strong
Italics/Emphasis
i.../i
em.../em
• HTML is a language of tags. Think of tags as instructions written in a text document (ASCII) such as Notepad, SimpleText or Pico.
• Tags are always enclosed in angle brackets: <>.
• Tags can be thought of as 'containers', because there is usually an opening tag <> and a closing tag .
• Some tags are not containers, though. They are empty elements. These stand-alone tags include the line break and the image tag.
html
head
title /title
/head
body
/body
/html
Paragraphs
p.../p
The blockquote tag
• Used for setting off quoted text from the surrounding text
• The text in the blockquote tags is indented and there is a space above and below the quoted text.
Character Formatting:
Bolding/Strong
b.../b
strong.../strong
Italics/Emphasis
i.../i
em.../em
Wednesday, January 25, 2012
Lecture 3-Design Principles
C ontrast
R epetition
A lignment
P roximity
Using the principles of C.R.A.P. provides consistency and unity
Contrast
Avoid blending elements that are merely similar
If elements are not the same, then make them VERY DIFFERENT
This goes for typeface, color, size, spacing, line thickness, etc.
Contrast is often the most important visual attraction on the page
Go for bold contrasts
Repetition
Repeat visual elements of the design throughout the piece
Repeat color, shape, texture, spatial
relationships, line thickness, size, and typeface
Creates organization and unity across the design
Alignment
Nothing should be placed on the page arbitrarily
Every item should have a visual connection with something else on the page
Make sure each elements lines up with something else on the page (use a grid)
Aligning type and graphics adds readability and intentionality, and cohesiveness
Proximity
Group related items together
Place items physically close to each other, so the related items are seen as one cohesive group rather than a bunch of unrelated pieces
Proximity creates a bond between between elements on a page - establishes a visual hierarchy
Proximity organizes the design and content
Workflow Process
1. Define: design statement, vision board and creative brief
2. Architect
3. Design: mockup, site structure
4. Build: XHTML and CSS
5. Deliver: post online
R epetition
A lignment
P roximity
Using the principles of C.R.A.P. provides consistency and unity
Contrast
Avoid blending elements that are merely similar
If elements are not the same, then make them VERY DIFFERENT
This goes for typeface, color, size, spacing, line thickness, etc.
Contrast is often the most important visual attraction on the page
Go for bold contrasts
Repetition
Repeat visual elements of the design throughout the piece
Repeat color, shape, texture, spatial
relationships, line thickness, size, and typeface
Creates organization and unity across the design
Alignment
Nothing should be placed on the page arbitrarily
Every item should have a visual connection with something else on the page
Make sure each elements lines up with something else on the page (use a grid)
Aligning type and graphics adds readability and intentionality, and cohesiveness
Proximity
Group related items together
Place items physically close to each other, so the related items are seen as one cohesive group rather than a bunch of unrelated pieces
Proximity creates a bond between between elements on a page - establishes a visual hierarchy
Proximity organizes the design and content
Workflow Process
1. Define: design statement, vision board and creative brief
2. Architect
3. Design: mockup, site structure
4. Build: XHTML and CSS
5. Deliver: post online
Wednesday, January 18, 2012
Class Notes 1-19-2012
Heuristic Evaluation Requirements
1. Visibility of System Status
Probably the two most important things that site visitors need to know are:
“Where am I?” and
“Where can I go next?”.
2. Match Between the System and the Real World
ex. Trash can = delete
3. User Control and Freedom
4. Consistency and Standards
Keyboard trends
5. Error Prevention
Avoid Errors of Custom 404 page
6. Recognition Rather than Recall
Recognizable Symbols
7. Flexibility and Ease of Use
8. Aesthetic and Minimalist Design
9. Help Users Recognize, Diagnose, and Recover from Errors
10. Help and Documentation
1. Visibility of System Status
Probably the two most important things that site visitors need to know are:
“Where am I?” and
“Where can I go next?”.
2. Match Between the System and the Real World
ex. Trash can = delete
3. User Control and Freedom
4. Consistency and Standards
Keyboard trends
5. Error Prevention
Avoid Errors of Custom 404 page
6. Recognition Rather than Recall
Recognizable Symbols
7. Flexibility and Ease of Use
8. Aesthetic and Minimalist Design
9. Help Users Recognize, Diagnose, and Recover from Errors
10. Help and Documentation
Wednesday, January 11, 2012
Notes 1/11/12
THE PROCESS
1. Define
Gather requirements and understand business and audience objectives. (Both strategic and project requirements)
Creative Brief
2. Design (Including site specifications)
Architecture
Copywriting and Visual Design
User Testing
3. Build (The Final Site)
Code
Usability Testing
QA
Launch
4. Maintain
Marketing Plans
Communication Plans
1. Define
Gather requirements and understand business and audience objectives. (Both strategic and project requirements)
Creative Brief
2. Design (Including site specifications)
Architecture
Copywriting and Visual Design
User Testing
3. Build (The Final Site)
Code
Usability Testing
QA
Launch
4. Maintain
Marketing Plans
Communication Plans
About me :-)
HELLO!!!
My name is Jessica and I am currently working on a major in Communications and a minor in Marketing. I am a Senior, planing on graduating December of 2012. I am interested in the Advertising field, especially the creative side of things. I m also a full time employee at Taco Bell, and have been thee for 7 years and running. It is my first and only job until recently when I was accepted as an intern (unpaid) at a Design Studio downtown called StudioJ 17.
In my intern I am learning all aspects, hands on, with creating and producing both print and video production. I am expecting my internship to expose me to a wide variety of things that deal highly with video, photos and design.
Final Project Ideas....
NO CLUE!!!
My name is Jessica and I am currently working on a major in Communications and a minor in Marketing. I am a Senior, planing on graduating December of 2012. I am interested in the Advertising field, especially the creative side of things. I m also a full time employee at Taco Bell, and have been thee for 7 years and running. It is my first and only job until recently when I was accepted as an intern (unpaid) at a Design Studio downtown called StudioJ 17.
In my intern I am learning all aspects, hands on, with creating and producing both print and video production. I am expecting my internship to expose me to a wide variety of things that deal highly with video, photos and design.
Final Project Ideas....
NO CLUE!!!
Subscribe to:
Posts (Atom)