WEEK 1 (1/20-1/25)

Lecture:

• Syllabus Overview
• Introduction to Color
• What is a styletile?
• Using Google Drive to share.

A review of HEX and RGB values (lemasney):

Color can be represented in many ways. You can say “That’s blue” or “that’s rather red.” That’s not enough in web design, or any final design. We want the right red.  So if we want a particular red, we can use several classification systems for color to be able to share the right red.

We could express it in RGB values, from 0-255, where higher is more. RGB 255,0,0 is pure red. HEX #FF0000 is pure red. A mixture of numbers results in a mixed color: RGB 255,0,255 (full red plus full blue) is bright purple.

HEX ranges are 16 values per color, zero through F: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F and can be expressed in 2 digit pairs per color (white is #FFFFFF), or one digit per color (white is also # FFF). each character (0-F) is an increasing value of that color, Red, Green, or Blue, expressed singly (#F00) or in pairs (#DF00FF). Purple in HEX would be #FF00FF.

But the most interesting bit is you don’t need to know any of that. You just need to use tools to determine your colors, and record the value as hexadecimal or RGB. Either one works.

About Color Models

One of you shared that you were not sure why the primaries of Red Blue and Yellow are different than RGB and Hex values, and my answer is that Red Blue and Yellow are about color theory (for working out palettes) and RGB is about the digital interpretation and classification of color in light. One is ideological, the other is about recording color. The real difference is that RYB is additive color (pigment based) and RGB is reductive (light based).

“Colour values tend to be originated by designers (such as myself) who would never encounter hex notation anywhere else, and are much more familiar with the decimal notation which is the main way of specifying colour in the apps they use — in fact I have met quite a few who don’t realise how a given hex value breaks down into RGB components and assumed it didn’t directly relate to the colour at all, like a Pantone colour system reference (eg PMS432).” found in colors – Are there any good reasons for using hex over decimal for RGB colour values in CSS? – Stack Overflow at http://goo.gl/0M8nYa

INTRO: Project 1

Personal [Historical Biography Page]

For this project you will pick a historical figure who died before 1923. You will create a webpage in the style of wikipedia for that figure that conveys who that person was through the text and through the design. You will use the text from wikipedia and create your own images in Photoshop or from public domain images. The only requirements are that you can only use one representational image of the person, the rest of the images must be non-representational.

Project 1 Rubric

The reason for the death pre-1923 restriction in the assignment is to avoid copyright issues. Photos taken before 1923 are typically in the public domain, as per US copyright law:

“In the United States, determining whether a work has entered the public domain or is still under copyright can be quite complex, primarily because copyright terms have been extended multiple times and in different ways—shifting over the course of the 20th century from a fixed-term based on first publication, with a possible renewal term, to a term extending to fifty, then seventy, years after the death of the author. The claim that “pre-1923 works are in the public domain” is correct only for published works; unpublished works are under federal copyright for at least the life of the author plus 70 years.” found in Public domain – Wikiwand at http://goo.gl/1wbGnd

Demo:

• Course Site in WordPress
• Course site in Google Classroom
• Adobe’s Color Wheel tool: https://color.adobe.com/create/color-wheel/ (Adobe)
• ColorLovers.com http://colorlovers.com (ColorLovers)
• Using Google Drive to Create a Styletile http://drive.google.com (Google)

Resources:

Basic Color Theory: https://www.youtube.com/watch?v=lqzYUIh0Dcg (YouTube)

Color Palettes for Branding: https://www.youtube.com/watch?v=d1a1fun6OfA (YouTube)

Using Google Drive to Create a Styletile:

https://www.youtube.com/watch?v=5mJNFp1-uw8&feature=youtu.be (Sweeney)

StyleTiles explained:

http://styletil.es/ (Styletil.es)

How a Web Site Design Goes to Hell:

http://theoatmeal.com/comics/design_hell (The Oatmeal)

Review:

• Give an example of a complementary color scheme.
• How do you use color tools to establish strong palettes?
• How do you share a publicly accessible link to a Google Doc?
• How does color affect your design?
• How does a StyleTile help you to visualize your look and feel?
• Ideas to know: complementary color, analogous color, style tile, Google Drive, Google Classroom, WordPress, Syllabus, Agenda, Contact info.

Due Next Week (1/27):

Discussion Question:

1: Color:

Pick the website of a musician, writer, athlete or artist that has an compelling design and identify the message or personality that is communicated by the website. Describe the way that the dominant color, color palette, chroma and value contribute to this message. (In the future you will use Google Classroom to submit your answer, but for now, please just leave a comment here.)

Weekly Assignment:

1: StyleTile:

Create 3 styletiles using Google Drive’s Drawing tool. Use 3-5 images, colors, and fonts in each styletile. Look at the example for guidance, You should look for images that have textures or patterns that you will be able to use in the design of your historical figure website. Provide variation in your tiles and play with the style.

Share your StyleTile in PNG format in Google Classroom in the StyleTime assignment listed there. The colors and images should work together to convey the messages you chose to describe your historical figure’s brand.