These are the Instructions for the Ninth module of this course:

We are going to be investigating on issues around Web Design.
We will become familar with basic tems and concepts around web design that will facilitate a more professional process next time we need to build a site.

Some information on basic Web Concepts that you should be familar with:

http://soma.sbcc.edu/users/ajarabo/intro_Multimedia/web_concepts.html

Anatomy of a URL:
https://www.lynda.com/Web-Foundations-tutorials/Anatomy-URL/158666/158680-4.html?

How browsers work:
https://www.lynda.com/Web-Foundations-tutorials/How-browsers-work/158666/158681-4.html?

The classic way of using Text on the web on web (using a system-font or converting the text into an image):
http://soma.sbcc.edu/users/ajarabo/WEB_authoring/text_forweb.htm

Computer fonts and text for web. How to embed web fonts. How to use Google-fonts (bottom of page):
https://soma.sbcc.edu/users/ajarabo/interface_design/typography4.htm

Web concepts have been radically changing the last few years with the use of mobile devices for web browsing, the implementation of html5 and CSS3.

Lynda.com has new great videos on these topics but can only be accesses with a subscription.
I am giving you links for those of you That can access their Online training library

Volume "Web Technology fundamentals" by James Williamson.HERE
Volume "Web Development Foundation" by James Williamson.HERE

Practical training video: Exploring an HTML document: http://www.lynda.com/HTML-tutorials/Exploring-HTML-document/170427/196135-4.html
Basic HTML syntax: https://www.lynda.com/Web-Development-tutorials/Basic-HTML-syntax/170427/196130-4.html

This week we will do an Introduction to Typography through basic concepts.
Typography is the use of text for a visual purpose, and the art of choosing the right fonts, font combinations and creating a succesful image containing text
Please make sure you expand your ideas about font use. Those are the pages I have built for this class.

http://soma.sbcc.edu/users/ajarabo/interface_design/typography.htm

https://soma.sbcc.edu/users/ajarabo/interface_design/typography2.htm

Web-layout:
http://soma.sbcc.edu/users/ajarabo/intro_Multimedia/designlayout1.htm

Complete this module's assignment for this class.

You will have to Create a color-palette for an imaginary site as an assignment for this module.

Before you begin the task, refresh your memory on what is an hexadecimal value (to define web-colors),

http://soma.sbcc.edu/users/ajarabo/WEB_authoring/color_general.htm

Do a little search on the importance of using a color palette for your site.
I have built 2 pages to familiarize you with color theory and how to create a Color-palette or color-theme:

http://soma.sbcc.edu/users/ajarabo/intro_Multimedia/color_theme.htm

http://soma.sbcc.edu/users/ajarabo/intro_Multimedia/color_palette1.htm

When working on a color palette you can find a picture that defines the color-mood for your site and extract some colors from it in Photoshop to come up with a series of Harmonic colors or you can work backwards: Define some HUES in a color palette application and let the application create a harmonic family of colors around those hues. The objective in both methods is to find a combination of subttle colors that can translate a visual mood for a site.

http://colorschemedesigner.com/

This is an interesting engine that can assist you designing a color palette.
Play with the interactive interface: it can create a group of colors that are harmonic, using different color- principles: mono-hue (mono), complementary colors (complement), 3 colors being 2 adjacent in the color wheel and the other complementary (triad), 4 colors (tetrad), scheme of adjacent colors (analogic) and a mix of adjaccent and complementary (accented analogic).

Your choice on the left of the interface will generate a "fake rectangular page" on the right where to see the colors combined.Click on "light page" or "Dark page" to see a sample of how those colors could work on a page designed. You can select the colors that will integrate your color-palette and obtain the hexadecimal value by rolling over the block colors on the upper-right side of the page.

Great movie on color theory: http://www.lynda.com/home/Player.aspx?lpk4=96148&playChapter=False
As you might know, in painting and traditional color theory we use an ADDITIVE color palette, Red, Blue and Yellow being the primary colors.
When working for PRINT those will be replaced by slightly different tones: Magenta, Cian and Yellow, that will still work by "adding" one color to another to create different shades. The combination of all of them produce black.
In video lighting and screen color (colors seen through light) we use a SUBSTRACTIVE palette, with Red, Green and Blue as the basic light colors that combine all others and produce white light in combination.

Your color palette assignment

In this week's assignment I have asked you to import a picture to Photoshop and select colors from it with the eye-dropper. Using a color-scheme engine is an alternative to this. The important thing is that you end with 4-7 color values that will chromatically define your site.

In Photoshop you will create squares (marquee tool) and fill them with each one of the falues (with square selected fo File< Fill).
You will also write down the hexadecimal number underneath the colored square (Type tool).

Then you will create a bigger rectangle with one of the colors (in a new layer), smaller rectangles for text blocks or navigation bars on separate layers and text for the navigation items and the bulk text. You will do this 3 different times for each one of the color-mock ups.
(I advice you place all your layers for the fist mock-up inside a folder in photoshop _layers window_. Then duplicate the folder and modify elements for the second mock-up. Rename folder. Duplicate again a folder to create the third mock-up. Alter colors again)
Type font, size and color are important parts of the design. Try to make each page-mock up look different by playing with colors.

If you worked with a picture to obtain your colors, include the picture in the mock-ups.

You can submit a photoshop file (.psd) or a JPEG.

Assignment specifications:

• Use one picture to create a color scheme of 4-7 colors (the picture should be incuded in the file).
  
  
• Build a little rectangle filled with each color and write down the hexadecimal value.
  
  
• Try then 3 different possibilities of background color and text color whithin your chose values. Because web pages need to include so much content very often you have to create several blocks of text within a page. Those visually different areas usually have different background colors.
  Section names, section names on rollover, block-headings, block sub-headings and bulk text usually have different color and font treatment. A color palette treatment doesn't have to have finished design but it needs to have enough to create a visual mood the client can use to choose a design for their website.
  
  
• Save your test in Photoshop. You can send me a jpeg of it.

Links to free training movies on Basic Photoshop skills (I am linking to old versions of the software because it is more likely to find free movies at lynda.com)

Working with layers, Link to the whole volume
http://www.lynda.com/Photoshop-CS4-tutorials/layers-in-depth/776-2.html
Selecting portions of artwork,
http://www.lynda.com/Photoshop-CS4-tutorials/selections-in-depth/52106-2.html

Typing in Photoshop: point type,
http://www.lynda.com/home/Player.aspx?lpk4=85697&playChapter=False

Color for designers. If your have a subscription to Lynda.com ($25 a month) the first chapter has videos on how to use KULER: Adobe's tool to create color palettes.
http://www.lynda.com/Photoshop-CS5-tutorials/Photoshop-for-Designers-Color/89042-2.html

Using the free transform for scaling, rotating or skewing.
http://www.lynda.com/home/Player.aspx?lpk4=65604&playChapter=False

Complete tour of Photoshop interface,
http://www.lynda.com/home/Player.aspx?lpk4=65922&playChapter=False

Little present: page on best creative sites. Most of them are bult with flash. Not with html nor html5. Creative sites