Monday, October 24, 2011

Principals and Elements Of Design

Students,
Today we begin a deeper study and understanding of design, and what it is made of. By studying the individual components we can identify why a design works, or doesn't work.

Principals and Elements of Design Exercise:
  • Create an 11"X17" document in Illustrator
  • Layout a grid of 10 equally spaced and sized boxes
Draw and create a representation for each task listed below all artwork must be original, no copy-pasting or tracing:

  1. Texture: create a representation of texture
  2. Line / Rhythm and Movement: Draw a composition of lines that express rhythm, movement or energy
  3. Line / Variety and Emphasis: Draw a composition of lines that express emphasis and variety
  4. Shape / Organic: Draw the outline of an organic shape, such as a tree or an apple
  5. Shape / Geometric: Draw the outline of a geometric shape, such as a house or city skyline or mechanical objects
  6. Shape / Pattern: Draw a pattern such as a brick wall, the grain in wood or a kitchen tile
  7. Shape / Overlapping: Draw two or more shapes that overlap such as a person in front of a tree or house. this shows depth.
  8. Perspective: Draw a box that shows 3 sides
  9. Contrast: Draw a composition that exhibits contrast
  10. Value / Tone: Draw a box that shows 3 sides and shade it to show a light source

This project will be due Thursday


"People ignore design that ignores people." — Frank Chimero

Design elements are the basic units of a visual image. The principles of design govern the relationships of the elements used and organize the composition as a whole. All imagery, art, design and photography alike, are comprised of elements that can be broken down and analyzed. 




The Elements of Design
Space: Space refers to the distances or areas around, between or withing components of an image. It can exist in two or three dimensions. Space can refer to positive space(a shape, such as an apple) or negative space (the absence of an apple shape). It can also refer to elements in the foreground, mid or background of an image.

Line: Line is the basic element and refers to the continuous movement of a point along a surface, such as a pencil or brush. Line can also be created by the edges of other shapes. Lines can vary in length, thickness and direction.

Balance: Balance can either be symmetrical or asymmetrical. The balance of an image can affect the focal point of an image. The location of objects, their sizes and colors, textures and shapes all affect the perception of balance in an image.

Color: Color and particularly, contrasting color is used to draw the eyes attention to certain areas. It can invoke mood and emotion. Color is created in many different ways... but in all color spectrums, there are primary colors, which all other colors are derived from, and secondary and tertiary colors. Certain formula’s exist for choosing colors that are pleasing to the eye, one way is using Complimentary Colors, which appear opposite each other on a color wheel. Colors can be perceived as “Warm” such as reds, yellows and oranges, other colors are “Cool” such as purples, greens and blues.

Shape: Shapes are what give objects their definition. Think of the silhuoette. Shapes can be organic (curved, soft, random) or geometric (angular, sharp, organized, complex).

Texture: Texture is perceived surface quality. In art two types of texture exist, tactile and implied. Tactile texture is the way a surface actually feels, such as sandpaper or tree bark. Implied texture is the way the surface of an object “looks” like it feels. This is created with different pencil and brush techniques. In the modern digital realm, texture is a strong ally in design.

Value: Value is an element that refers to the relationship between light and dark. It can also be referred to as tone or shading. The value of an object helps give it form and depth. 

The Principles of Design
Unity: Unity refers to a sense that everything in a piece of work belongs. It can be referred to in the literal sense of course, or just by the way balance, repetition and other elements acheive a design harmony.

Variety: The use of dissimilar elements. Differences in shape, texture, color, line etc.

Repetition: This refers to the recurrence of elements within a piece. Color, lines, shapes and other elements can be echoed, often with some subtle variation to maintain interest. Repetition can be random or organized, or express rhythm and patterns.

Harmony: Harmony is acheived through the sensitive balance of variety and unity. Harmony in color can be acheived by using complementary or analagous colors. Harmony in design is reflected in consistency in style, similarity of components. Harmony can also extend to the use of texture, color, scale etc.

Contrast: Contrast is the occurrence of differeng elements, such as color, value, scale etc. It creates interest and helps direct the focal point. Contrast helps define depth and space as well. Objects that are closer to use appear lighter, and objects that are farther away often appear darker.

Proximity: This refers to the physical placement of objects or elements in a piece. Proximity is used to communicate ideas like relation, importance or hierarchy.
Proportion: Proportion involves the relationship between objects. It is relative to size and scale. Proper proportion is important in implying realism, and skewing proportion can force the viewers perspective to change. One classical expression of proportion is the “Golden Ratio” in mathematics and the arts. Throughout history, the ratio for length to width of rectangles of 1.6 (roughly) has been considered the most pleasing to the eye. 

Functionality: In the design world, good design is created for a purpose. This is the difference between art and design. Art is created for the aesthetic value, while design is created to communicate. Art is developed by artists often to satisfy personal motivation. Design is created by designers, for clients, to communicate a message or information. Good design must be aesthetically pleasing as well as informative.
Poster design by Milt Glaser

Wednesday, October 19, 2011

New Assignment: Vector Skills - Sugar Skull Tutorial

Follow this Multi-Step Tutorial to create your own Sugar Skull design. This tutorial will teach you how to make geometric patterns, how to use masks, color and patterns in adobe illustrator. Use the skills you have developed to make your Skull design unique and eye catching. Read the requirements below:

- Your design must be created in Illustrator on Letter size (8 1/2 inches wide by 11 inches tall).
- Your design must be colored using limited colors, 3 colors maximum (black and white count, my skull below uses blue, orange and white only).

You will have 3 days of lab time to complete this tutorial. Any work turned in late will have points deducted. Failure to meet the above specifications will result in point deduction. The deadline is Tuesday at end of class.



Below is my own sugar skull design, I followed the tutorial but made subtle changes to the shapes. Think of all the different themes we can draw shapes from. I used diamonds instead of teardrops for instance. Make your skull look unique.

Mr. Wilsons sugar skull design, 3 colors, diamond patterns...
Examples from previous students sugar skull designs

Have fun! - Mr. W

Tuesday, October 18, 2011

How To Write A Good Great List Of References

Students,

It is incredibly important to develop a great list of references. These references will help you obtain jobs, college admission or acceptance into special programs.

Who makes a good reference?

  • Teacher
  • Coach
  • Counseler
  • Present or past employer
  • Family friend
  • Anyone that can speak highly of your abilities, skills and worth


References to avoid:

  • Anyone under 18
  • Personal friends
  • family members
  • Anyone who cannot speak highly of your abilities or skills

Important Tips:
The format of your references should match your resume exactly, same header, same fonts.
Do not include references on your resume
Include at least three references
All references should be responsible adults who know you well and can speak to your character and skills
Always ask whether or not someone is willing to be a reference before including them in your list
Verify the contact information before handing over to an employer

Format:
Use the following format for your references

Persons Name:   Bob Smith
Address:            123 Fake Street
                          Santa Cruz Ca, 95060
Phone #:             (831) 555-4321
Title and              Business Owner
work place:         Moland Spring Bottled Water

- Mr.W

Sunday, October 16, 2011

How To Write a Good Great Resume

Hello Students,

Having a solid resume is the cornerstone to your job future. A well written and well designed resume is what sets you apart from other job applicants. A perfectly written job application, a quality resume and a list of positive references is the job seekers trifecta. In this class we will teach you these skills and more. Below is a list of writing tips, read over it before finalizing your resume.

Resume Writing Tips:
Have an objective:
Know the purpose of your resume and edit it for different job scenarios. Having a focused job objective listed on your resume will help you with attaining an interview and getting hired.

Back up your special skills with job experience:
List your skills but make sure your listed job experience, training or education reflects those skills. Are you really good at making websites? Let them know how and where you learned that skill.

Research and use the right keywords:
Every industry has its own language, research job offerings and pay attention to the keywords that are used. If you put your resume online with a job placement service they will often use certain keywords to search their database for potential hires.

Be descriptive with job experience:
A job title will communicate your role, but not the details of your work experience. List the duties, tasks, activities, skills and achievements that were part of your job.

Format your text:
Use bold text to start each section. Use bullets for lists. Make the document easy to quickly scan and read. Clarity of format is crucial, you have ten seconds before the employer will move on to another applicant.

List most recent job experience first:
This also goes for education, list the most recent first. If your still in High School you can say "future class of 2012", or "Currently attending HS".

List most important skills first:
When writing out your skill list make the most important skills the first ones on the list. If you are applying for a web design job, list your web skills first. Change and edit this for different industries/jobs.

Leave out the obvious:
It is not necessary to add "available for interview" or "references available upon request". References are standard and expected, and of course you are available for an interview. Thats the whole point!

Avoid negativity:
Don't trash talk past employers or state that you didn't like a past job. Simply state that you were looking for future opportunities.

Go with what you got:
If you haven't had work experience yet, just list any summer jobs, volunteer experience etc. If you have hobbies that are relevant to the job you can list those. If you don't have a diploma or degree then just list your estimated date for completion.

Proofread your resume:
Have your neighbor or classmate read your resume. Sometimes the spellchecker doesn't catch typos. The more eyeballs that see your resume before it gets in the hands of the employer the better.

- Mr.W

Thursday, October 13, 2011

Introduction to Indesign and Writing A Great Resume

Hello Students,
ROP stresses a strong foundation in the basics of career development skills. We will introduce that foundation today by learning how to write a resume. This is just the first part to your career skills portfolio. In this class you will develop:
  • A Website Portfolio containing three of your best work examples and a written explanation of each piece
  • Letter of Introduction
  • Resume
  • List of References
  • Letter of Recommendation

Introduction to Indesign:
Indesign is a powerful document layout and creation software. You can create everything from simple 1 page documents to tri-fold brochures and even entire books. We will learn the basics of Indesign and use it to create our resumes. Watch the screencasts below and work through the tasks in each video, I will play these for the class as well.


Writing a Resume:
A resume is the first key piece you need to begin a successful job. 
It should describe:
  • Who you are
  • Your job objective
  • How you can be contacted
  • Your level of education
  • Your work history or experience
  • You special skills and abilities
Make you resume well written, without typo's, mistakes or incorrect or misleading information. You resume's appearance will reflect your ability to organize. Use bold text and clean formatting to highlight the different sections of your resume. Make it easy to search out the information that your potential employer wants to see...
A resume is meant to convey an impression of your skills and experience, it's appearance also says a lot about your organizational skills and attention to detail. Note the difference in layout styles above.

You should use a document layout program, such as Indesign or Word, so you can control the appearance of your resume. Additionally you should save your resume in a format that can travel over the internet or email easily, such as a PDF file.

Download the ROP Portfolio Handbook and begin working on your resume. The handbook has an example of a resume and a good list of information to include in yours.


If you have advanced skills, use this tutorial to create a grid-based layout for your resume: Grid Based Resume Layout Tutorial

Resume's are due on Monday

Have fun!

 - Mr.W

Wednesday, October 5, 2011

YFIOB 11th Annual Business Education Luncheon

Students,

YFIOB is hosting a business education luncheon at the Coconut Grove, if you would like to attend please see me to register. Seating is limited so please express your interest ASAP or speak to our ROP counselor Julie Levy. Any students that attend can write a short summary of the event for extra credit.

It's an inspiring event and Your Future is Our Business is a great supporter of ROP and provides us with the inspiring career panels we get to have each year.



- Mr. W

Sunday, October 2, 2011

New Assignment: Create A Graphic Based Website With Photoshop and Dreamweaver

Hello Students,

You newest assignment is to create a small website (based on your previous html project) using the "Photoshop to Dreamweaver" technique. This is your first graphic based website and will prove challenging. Use class time wisely, missing class time or wasting time will severely impact your ability to complete this project. Your Photoshop design should reflect the class time given for the work. Minimum effort will yield a minimized grade.

I will demonstrate this technique, take notes!

The Photoshop to Dreamweaver Process:


1. You will create a homepage template complete with your name at the top, photo banner and a graphic menu bar. Leave an area below to use for content.

2. Then you will use the "slice tool" to cut up and output an html file and compressed graphics ready to edit into a website with dreamweaver.

3. Add any extra formatting to your template in Dreamweaver, center your page and elements and begin programming your buttons into links. Do not stretch or move any of your image tiles or graphics, this can break up your tables.

4. Create copies of your template and rename into the appropriate file names for your menu navigation. Do not do this step until all programming and edits are made to the template page. Any errors will have to be fixed 4 or more times otherwise.

5. Edit each page for content, such as your home page, contact page, links, about me etc... each page should have unique content to test your navigation. 

PSD To Dreamweaver Project Details:
• You must use Photoshop to create your original design and Dreamweaver to insert the proper HTML tags.
• Each page must contain a simple menu at the top for navigation
• Must have a total of 4 pages, more is allowed for extra credit. Page titles can be "Home, About Me, Contact, Favorite Websites" or your choice.
• Include 1 image or photo on each page.
• Include at least 3 links to external websites (for instance your blog, the class blog etc...).
• You must include your email address either on your contact page or in your menu.

Deadlines:
4 Days for Graphic Design and Photoshop Work
4 Days for Programming and Testing

Extra Credit:
- Create rollover buttons for your menu
- Create an animated Gif for your page banner
- Create a seamlessly tiled background for your page template
- Use one of the tutorial links below to create your website

Inspiration:
Check out these links for help with the PSD to DW technique or if you are looking for some website design inspiration

100 Great Simple Website Designs

Workflow Video:
PSD- Dreamweaver Website Part 1 - How to "slice" up a design to prepare for coding
PSD - Dreamweaver Website Part 2 - How to code your sliced up PSD page