Semester Review

Write a reflection on your process for the semester:
How was your progress?
What are your strengths? What did you struggle with?
What project was your favorite and why?
What have your learned?

Design Challenge Final

Self- Directed Project The Plan

1. Brainstorm- post inspiring examples/visual ideas and post to your blog.
2. Select your favorite idea- Identify what you are going to try.
3. Project Plan- Write a proposal about what you are hoping to learn and achieve throughout this project. Note how challenging you think it is for you (maybe on a scale from 1 to 10).
4. Research ways to do the project. Find a tutorial or steps to try.
5. Post tutorial web address(es), rate the tutorial. How was it useful for you? 

 /5

The Process

1. Describe your process- write notes while you are learning the program/how to do or teach others. Post an update of your progress each class. Post reflections, what have your learned? Post images. Consider goals of what's next... how are you challenging yourself?

 /25
  
The Results

1. Post your finished work to your blog. 
2. Reflect on your process.- Did you achieve your anticipated results? how well did you do? what did you learn?
3. Give your self a mark out of 10 and explain why you are giving it to yourself.

/10

Ted Talk: Rory Sutherland

Everyone watch the Ted Talk: Rory Sutherland's Life Lessons from an Ad Man.
https://www.ted.com/talks/rory_sutherland_life_lessons_from_an_ad_man
Write down 10 or more observations/notes/quotes/ideas from his discussion.

We will have a class discuss next day.
Then work in your personal design challenge.

Self-Directed Design Challenge

You are to choose a medium, concept, or program to challenge yourself in a direction that you are interested in. The project is up to you. The level of challenge is up to you, but make sure that you are learning something that is valuable to you.

1. Brainstorm- Find inspiring examples/visual ideas and post to your blog.
2. Select your favorite idea- Identify what you are going to try.
3. Plan your project- Write or sketch out how you are going to teach yourself how to learn the techniques. Write a proposal about what you are hoping to learn and achieve throughout this project. Note how challenging you think it is for you (maybe on a scale from 1 to 10).
4. Research ways to do the project. Find a tutorial or steps to try.
5. Post tutorial web address(es), rate the tutorial. How was it useful for you? 
6. Start your project.
7. Describe your process- write notes while you are learning the program/how to do or teach others. Post an update of your progress each class.
8. Post your finished work. 
9. Reflect on your process. 
10. Teach others how to do the techniques.

 

Style Sheets

HTML CSS (Cascading Style Sheets)

What is CSS?

CSS is a language that means cascading style sheets. Cascading style sheets are used to change properties like font face, size, font in tables, scrollbar color, link color and hover color, and other style attributes on Web sites, without having to use long HTML codes. The coolest thing about CSS is that you can link to an external style sheet, and this sheet can change the style (font size, color, link color, link hover etc.) on your whole Web site just by editing the one style sheet. The problem with CSS is that some properties are supported by both Netscape and Internet Explorer, some are just supported by IE and some are just supported by Netscape.

What does a style sheet look like?

The following example is the WORLD'S BIGGEST style sheet. Well, maybe that's an exaggeration, but I tried to include all the important stuff in this sheet. Attributes are placed between brackets [ and ] and need to be removed, including the brackets, for the code to work. Substitute your attribute for the word "value." Your finished style sheet will be placed between the tag:

Begin style sheet:

A:link
{ text-decoration: value [underline, overline, underline overline, line-through, blink, none]; color:#000000 }
A:visited
{ text-decoration: value [underline, overline, underline overline, line-through, blink, none]; color:#000000 }
A:active
{ text-decoration: value [underline, overline, underline overline, line-through, blink, none]; color:#000000 }
A:hover
{ text-decoration: value [underline, overline, underline overline, line-through, blink, none]; color:#000000;

background-image:url(yourimage.gif);
background-color:#000000;

cursor:value [default, auto, wait, crosshair, hand, help, text, move, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize }

body
{ background-color: #000000;
background-image:url(value); [url of background image to be used, i.e. background.gif]
background-repeat:value; [repeat, no-repeat, repeat-x, repeat-y]
background-position:valueI valueII; [valueI: top, center, bottom, percentage, pixel number]
[valueII: right, center, left, percentage, pixel number]
background-attachment: [scroll, fixed]

font
font-family: Tahoma, arial, verdana;
color: #000000 ;
letter-spacing: value; [any number value (3pt, 5pt)]
font-weight: value; [lighter, normal, bold, bolder, any number value (100, 500, 900)]
font-size:value; [xx-small, x-small, small, medium, large, x-large, xx-large,
any number value (12 pt, 18 pt)]

scollbar
direction:rtl; [this reverses the entire site so the scrollbar is on the left]
scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000; scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000; scrollbar-track-color : #000000;
scrollbar-arrow-color : #000000 }

td
{ font-family: value; [arial, tahoma, verdana, common fonts]
color: #000000;
padding-left: value; [2cm, 4cm etc.]
padding-right: value; [2cm]
padding-top: value; [2cm]
padding-bottom: value; [2cm]
padding: value; [2cm this is for all four sides]
padding: value value [2cm, 4cm : two values for four sides, add numerical value] }

input, text area
{ background: #000000 url(yourimage.gif);
font-family: tahoma, arial, verdana;
color: #000000;
border-style: value [dotted, dashed, solid, double, groove, ridge, inset, outset];
border-color: #000000;
border-width: valuepx [numerical value, 5, 6, 8...] }


In angle brackets: /style

End style sheet

CSS Vocabulary

Link: regular text link
Visited: link that has already been visited
Active: link that you click on
Hover: link with your cursor over it

background-image: background image of your link on hover
background-color: background color of your link on hover

By changing the link attributes above you can remove the underline from links, add a background image on hover, etc. You can substitute underline, overline etc. for the word "value" in the above style sheet and remove everything between [ and ] including the brackets.

• underline
• underline overline
• overline
• line-through
• none
• blink  (this is for Netscape only =)

body: all of your body attributes go in this CSS tag
background-color: the color of your background
background-image: the image you want in the background
background-attachment: If you add "fixed" here, the text will scroll and the background won't
background-repeat: attributes of your background

Here is a list of the attributes you can use in the background-repeat tag to change how your background will appear on your page:

• repeat Adding this tag just makes your background image tile like it does with the regular background tag.
• no-repeat Adding this tag makes your background image appear in it's regular size in the upper left hand corner of your page, the image shows only once.
• repeat-y Adding this tag makes your background image tile vertically on your page, along the left margin.

• repeat-x Adding this tag makes your background image tile horizontally on your page, along the top margin.

You can place your background image anywhere on your page by using percentages and a background-position attribute:

 In angle brackets

STYLE TYPE="text/css">

BODY {background-image: url(your file name.gif); background-repeat: no-repeat;background-position: 0% 0%}

In angle brackets /STYLE>

The first percentage is for your horizontal alignment. The second percentage is for your vertical alignment. For instance, if you wanted your background image to be in the top center of your page, your percentage would be 50% 0%.

CSS Vocabulary Fonts

font-family: the font type you would like to use on your site
color: font color
letter-spacing: amount of space in between the l e t t e r s of your font
font-weight: You can change the text attributes to bold, bolder and specific font weights in the above code by adding the font-weight tag:

• lighter:  font-weight:lighter
• normal:  font-weight:normal
• bold:  font-weight:bold
• bolder:  font-weight:bolder
• 100:  font-weight:100
• 600:  font-weight:600
• 900:  font-weight:900

font-size: You can change the font attributes from xx-small to xx-large in the above code by adding the font-size tag:

• xx-small:  font-size:xx-small
• x-small:  font-size:x-small
• small:  font-size:small
• medium:  font-size:medium
• large:  font-size:large
• x-large:  none; font-size:x-large
• xx-large:  none; font-size:xx-large

Or you can just use pt. sizes for fonts:

• 12pt:  font-size:12pt
• 18pt:  font-size:18pt

Setting up A Basic Style Sheet

You start your style sheet with this tag:
In angle brackets: style type="text/css">


and end it with this one:
In angle brackets /style>

All of your attributes will go in between those two tags. For instance, if you wanted just a style sheet to remove the underline from your links, you would use this style sheet:

HTML Exercise~ Local Style Sheets

Set up a local style sheet. Using the supplied code replace the code with your oun text. Then set up an internal style sheet.

Designer Research 5x5x5

Stefan Sagmeister

Look up the work of 5 or more of the world's top designers. Find out 5 interesting points about the each of you 5 chosen designers related to their career as a designer and 5 designs by them that shows off their distinct style.

You can select from the list below of graphic designers or any genre of design: graphic design, fashion, costume, jewelry design, furniture, industrial design, architecture, landscape, interior, urban, game design, skateboard/skate park, amusement park,  board game design, web design,  product, packaging, brand, communication design, user interface/experience design,...


You will share your favourite designer with the class- 5 interesting points related to their career, and 5 images.

Later, we are going to try to adopt their style to create something cool.

Share your favorite designer with the class in this Google Doc:
https://docs.google.com/document/d/1NLQctSb3KuQGZ35cDddZGkIl0whvjQL5HnhDq7ixudw/edit?usp=sharing.

Here are some famous graphic designers:

1. David Carson
2. Armin Hofmann
3. John Maeda
4. Michael Bierut
5. Saul Bass
6. Stefan Sagmeister
7. Paula Scher
8. Paul Rand
9. Peter Saville
10. Massimo Vignelli
11. Jessica Walsh
12. Shigeo Fukuda
13. Erik Spiekermann
14. Rick Poynor
15. Wim Crouwel 
16. Matthew Carter
17. Wolfgang Weingart
18. April Greiman
19. Abram Games
20. David Airey
21. Louise Fili
22. Seymour Chwast
23. Irma Boom
24. Marian Bantjes
25. Lester Beall
26. Henry Steiner
27. Anton Stankowski
28. Susan Kare
29. Jon Hicks
30. Katherine McCoy
31. Shepard Fairey

TED: Designer Stefan Sagmeister-shares happy design

CSS- Cascading Style Sheets

Style Sheets

STYLE Sheets: A type of template file consisting of font and layout settings to give a standardized look to web based documents. Design attributes are embedded in the STYLE Sheet so the whole document takes on a specific intended look. A STYLE sheet can be either Local, Internal, or External.

Anatomy of a style sheet:

Different Types of Style Sheets

Different type of style sheets

1. Local Style Sheets: Information goes within the HTML tags like this for example
   "P STYLE"=
2. Internal Style Sheets: Information goes in the "HEAD" " /HEAD" tags and also between "STYLE" "/STYLE"  tags.
3. External Style Sheets: Information is saved on a separate document and attached to each sheet via a link within the HEAD tag.

Learn CSS with the Code Academy:

https://www.codecademy.com/learn/learn-css

Here are a few attribute links:

www.w3schools.com