Week 11 Day 2 - Wednesday, Oct 31 - Homework

1. Using the CSS3 font techniques covered in class today, create an new HTML document that presents an existing Halloween themed poem or short story of your choice. Code wise, your Poem exercise should include the following code examples:

• Use of 1 serif font (not one used in the demo today) stylized via Google Font
• Use of 1 sans-serif font (not one used in the demo today) stylized via @font-face CSS3 property

Upload exercise to your class homepage by start of next class (2:30pm, Monday, Nov 5).

2. Continue design layout for Project 2. PDF of final design layout for all pages due next Wednesday, November 7, 2:30pm. All intended content (text copy, imagery, additional media) must be placed in this design layout, no placeholder content.

3. Continue visual blog entries for the week.

Typography and the Web

Typography Articles
List of Web Safe Fonts
List of Special Characters in HTML
Typography Speaks Louder Than Words
Why Typographic Choices Make a Difference
How to choose a Typeface
What Font to use?
Combining Typefaces
Type Guidelines and References for the web {great article by Smashing Magazine}
I Love Typography {articles, resources, fonts}
Web Font Services: The Good, Bad and Ugly

Web Type Services

@font-face kit generator

Google Web Fonts
Adobe TypeKit

More Web Font Embedding Services {via Smashing Magazine}

Font Foundries {not all fonts are created equal, and should not have been created at all}
Emigre
League of Moveable Type
Berthold Types
Font Shop

Don't Know What Font it is? Try WhatTheFont.com

Week 11 Day 1 - Monday, Oct 29 - Homework

1. Upload Shadowbox exercise that includes the following code examples with your own images

• 5 different image thumbnails, when clicked opens up a corresponding larger image
• 2 different text links, when clicked opens up a functioning absolute URL
• 2 different text links, when clicked opens up a functioning relative URL (not in a shadowbox)

Upload exercise to your class homepage by start of next class (2:30pm, Wednesday, Oct 31).

2. Begin design layout for Project 2. PDF of final design layout for all pages due Wednesday, November 7, 2:30pm.

Modal Boxes

Shadowbox (not compatible with JQuery)
Fancybox / Fancybox v2 (some video playback bugs with IE 7-8)

Justin Molloy: EGD lecture Thursday, Oct 25

Great lecture happening this week, Thursday, October 25, 2012, 5:00pm in TLC40.

Justin Molloy is a designer and educator who has worked for various Architecture Studios and Environmental Graphic Design firms in New York, Connecticut, Seattle, and Cincinnati. Currently the Director of Education and Professional Development for the Society for Environmental Graphic Design (SEGD), Justin Molloy will be sharing ways in which Environmental Graphic Design (EGD) encompasses the full spectrum of design, including branded environments, wayfinding, and navigation apps.

**Those who attend the lecture have the option to write up a 1 page summary about your experience and what you learned from Justin. Submission of lecture summary can result on make up points/extra credit toward Studio Practices portion of course grade (via Visual Journal Entries). Summary must be printed and submitted to instructor no later than Tuesday, Oct 30.

Week 10 Day 2 - Wednesday, Oct 24 - Homework

1. Create a Mood Board for Project 2. Save as  PDF and upload on your class site by start of next class, Monday, Oct 29. Mood board should consider inspirational design elements that will represent your visual language to be used in your layout design (to be started next week).

2. Continue visual journal blog entries.

Mood Boards

Mood boards are an important and essential step in designing a website. It allows you take into consideration how typography, color palettes, photography style, textures choices will provide ways to effectively communicate an appropriate tone and message in a website.

Download lecture PDF

Why Mood Boards Matter (via webdesignerdepot.com)

Create Mood Boards with these 20 Pro Tips (via creativebloq.com)

Pinterest

6 Things Designers and Illustrators should be doing with Pinterest (via creativebloq.com)

Mood Board App for iPad (by A Tiny Tribe)

Week 10 Day 1 - Monday, Oct 22 - Homework

1. Complete flowchart and wireframe for Project 2 (Portfolio or Informational Website). Both process files will be reviewed at start of next class session.

2. Modify Javascript Demo to include:

1. Image Gallery that includes as least 6 thumbnails and large images using Image Map javascript
2. 4 background color or background image links that fit with the image content of your image gallery
3. 10 possible random image thumbnails (all same size 300x150) that load at bottom of your page, created with random image javascript

Javascript Exercise due on your class website by start of end of next class session.

Project 2: Portfolio Site/Informational Site

Download Project 2 specifications

Objective:

 Design and develop either a 1) portfolio website to showcase your work to potential employers/clients or 2) an informational

site for a topic of your choice.

Specifications:

+ Project scope should include a minimum of six finely tuned “pages”

 + Design layout should meet usability standards and current web design best practices.

+ All art work and media assets must be original and/or copyright free. Imagery should be optimized via Fireworks.

+ All web pages are to be generated with Dreamweaver or a text editing application.

+ Scripting languages to be used: HTML, CSS (external document), and JavaScript. No table, td, tr tags allowed.

+ If using other programmer’s code, please cite author and source

+ Your code (CSS) should work (be browser compliant) in at least Mozilla Firefox.

Deadlines:

Concept Phase: PDF of Wireframe, Flowchart due Wednesday October 24, 2:30pm.

Design Concept Phase: PDF of Moodboard due Monday, October 29, 2:30pm.

Layout Design Phase: PDF of final design specs due Wednesday, November 7, 2:30pm.

Development Phase: Week 13-16, Final project review due Monday, December 10, 2:30pm.

Grading criteria:

Design Aesthetics  —30% of project 1

Technical Skill —30% of project 1

Usability —20% of project 1

Accuracy in Project Requirements —10% of project 1

Process (Flowchart, Wireframe, Sketches, Research) —10% of project 1

Week 9 Day 1 - Monday, Oct 15 - Homework

On Wednesday, Oct 17, 2012, instead of meeting in Admin 221, each of you are scheduled to stop by my office (AA North Rm 306) to review your Midterm Grades.


2:00-2:10 Kate Murdock
2:10-2:20 Emalee Long
2:20-2:30 Robin Lopez
2:30-2:40 Sierra Spain
2:40-2:50 Tara Wimer
2:50-3:00 Lindzey Grasmick
3:00-3:10 Lydia Williams
3:10-3:20 Andrew Jensen
3:20-3:30 Becca Derry
3:30-3:40 Tanner Riles
3:40-3:50 Kyle Richards
3:50-4:00
4:00-4:10 Whitney Bell
4:10-4:20 Daniel Johnston
4:20-4:30 Christian Sanchez



It is expected that you spend the remaining of the class period revising (on your own) your CSS Zen Garden Projects according to feedback given at today's class critique.

Extended Office Hours this Thursday + Friday

Available for office hours

Thursday Oct 11, 2012 @Art & Architecture Rm 100
11:30am-12:30pm, 2:30-4:45pm

Friday Oct 11, 2012 @Art & Architecture North Rm 306
(You must make an appointment if stopping by Friday)
1:30-3:30

Centering Layout

To center web content in a browser window (always center content no matter the size of the broswer window), involves the following steps (to be applied only after all development issues have been resolved):

1. Opening and closing div with id name added  to contain all page content (opening div goes right after opening body tag, closing div goes right before closing body tag)

<body>
<div id="mainwrapper">

[all other code that creates page content (images, text, links, etc)
should go here between opening and closing wrapper div]

</div>
</body>

2. CSS Rule for wrapper should at the very least include these properties and values. Value for min-width and max-width will be unique based on your design layout width

.mainwrapper{

max-width:600px; 
min-width:600px; 

position:relative;

margin-left:auto;
margin-right:auto;
}

Michael Hosaluk - Lecture tomorrow and workshop Saturday

Great lecture happening tomorrow, Thursday, October 11, 2012, 5:00pm in TLC40.

Michael Hosaluk is a Woodturner, Furniture Maker, Artist, and Designer from Saskatchewan, Canada. Hosaluk's work has been exhibited throughout Canada, in Europe, China, Japan, Australia and the United States.

For more info on Michael: http://www.michaelhosaluk.com/

He will also be exhibiting at the Pritchard Gallery, in addition to giving a woodturning demo on Saturday Oct. 13, 1-5 pm. Space may be limited, so be sure to register follow the "Register Now" link from the Prichard's demo page: www.uidaho.edu/caa-turningdemo

**Those who attend the lecture and/or workshop have the option to write up a 1 page summary (per each event attended; if you attend two events and want extra credit for both, you must write 2 pages in total) about your experience and what you learned from Michael. Submission of lecture summary can result on make up points/extra credit toward Studio Practices portion of course grade (via Visual Journal Entries). Summary must be printed and submitted to instructor no later than Wednesday, Oct 17.

Week 8 Day 2 - Wednesday, Oct 10 - Homework

Final Critique for Project 1 will take place next class, Monday, Oct  15 at 2:30pm.

What to submit:

1. USB Flash Drive with following Proj 1 files (organized and labeled similar to the screenshot below)

>>Main Project folder with naming structure: FullName_Project1_ART271
      + "Design Files" folder (save final Design Layout as a PDF)

      + "Process Docs" folder (with PDF or JPEG scan of wireframe and thematic concept sketches)

      + "Web Files" folder (with appropriate HTML, CSS and images related to CSS Zen Garden)

2. Transfer web files to your personal website (via UI webspace server) by start of Monday's class. We will review all student work online (via UI webspace) using the instructor computer station.

Transfer of web files to personal website (via UI webspace server) and submission of USB drive must be completed by start of class session (Monday at 2:30pm). Late work (even 5 min late) will be subjected to penalties.

Make Up Quiz

Using the the provided Keith Haring image files in the DropBox, create an HTML and CSS document, that when viewed in a web browser, looks identical to the Keith Haring design layout (below).

Design Layout 

• You have 1.5 hours to complete this quiz 
• You must create an HTML and external CSS file (all CSS rules must be saved in this external CSS file)  
• Use the images posted below (available to download via dropbox) 
• You may use any handwritten, digital notes or dreamweaver files, but are not allowed to use a the internet/web browser other than for testing purposes 
• Based basic technical skills with HTML and CSS, you will be graded on appropriate use of divs, class/id names, as well as effectiveness of CSS rules (no excessive redundancies)
• Submit all appropriate files in a "Quiz1" folder on your personal class site via uidaho webpages (server space). 

Design Specifications

Resource Images

Text Copy:


KEITH HARING

Biography

Early Work

Video Work

Collage

Painting

Death

BIOGRAPHY
Keith Haring was born on May 4, 1958 in Reading, Pennsylvania, and was raised in nearby Kutztown, Pennsylvania. He developed a love for drawing at a very early age, learning basic cartooning skills from his father and from the popular culture around him, such as Dr. Seuss and Walt Disney.

Upon graduation from high school in 1976, Haring enrolled in the Ivy School of Professional Art in Pittsburgh, a commercial arts school. He soon realized that he had little interest in becoming a commercial graphic artist and, after two semesters, dropped out. While in Pittsburgh, Haring continued to study and work on his own and in 1978 had a solo exhibition of his work at the Pittsburgh Arts and Crafts Center.

Later that same year, Haring moved to New York City and enrolled in the School of Visual Arts (SVA). In New York, Haring found a thriving alternative art community that was developing outside the gallery and museum system, in the downtown streets, the subways and spaces in clubs and former dance halls. Here he became friends with fellow artists Kenny Scharf and Jean-Michel Basquiat, as well as the musicians, performance artists and graffiti writers that comprised the burgeoning art community. Haring was swept up in the energy and spirit of this scene and began to organize and participate in exhibitions and performances at Club 57 and other alternative venues.

In addition to being impressed by the innovation and energy of his contemporaries, Haring was also inspired by the work of Jean Dubuffet, Pierre Alechinsky, William Burroughs, Brion Gysin and Robert Henri’s manifesto The Art Spirit, which asserted the fundamental independence of the artist. With these influences Haring was able to push his own youthful impulses toward a singular kind of graphic expression based on the primacy of the line. Also drawn to the public and participatory nature of Christo’s work, in particular Running Fence, and by Andy Warhol’s unique fusion of art and life, Haring was determined to devote his career to creating a truly public art.

Week 8 Day 1 - Tuesday, Oct 8 - Homework

1. Continue HTML/CSS development for Project 1: CSS Zen Garden. Due date has been extended to Monday October 15.

Week 7 Day 2 - Wednesday, Oct 3 - Homework

1. Continue HTML/CSS development for Project 1: CSS Zen Garden. Due date has been extended to Monday October 15.

2. If you would like more HTML/CSS practice, use the images found in the Francis Bacon Files folder in the handouts folder of the class dropbox to create an artist website (very similar to Marcel Duchamp Exercise)

Week 7 Day 1 - Monday, Oct 1- Homework

1. Begin Slicing and image optimization for Project 1: CSS Zen Garden.


2. Revise Marcel Duchamp Exercise with different artist information and imagery, revisions due by end of week (to be posted on your class website).

See Example Here