Introduction to the Principals and Elements of Design

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

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

Look over these posters, the first addresses the principals, the second addresses the elements and provide visual representation or examples of these concepts. Continue scrolling down for written explanations in more detail, there is an exercise at the bottom of this post as well to work on. Download or right-click on the images and choose "open in new window" to zoom in:

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 designed by Milt Glaser

Principals and Elements of Design Exercise:

Part 1 - Hand Drawing Exercise

• You will need 2 sheets of standard paper and a pen or pencil
• Draw 10 boxes of equal size on your sheets of paper
• Draw and create a representation for each task listed below all artwork must be original no 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. Value / Tone: Draw a box that shows 3 sides and shade it to show a light source
10. Contrast: Draw a "composition" or image that exhibits contrast. This could be contrast in shape or color

Part 2 - Digital Drawing Exercise

• Create an 11"X17" document in Adobe Illustrator
• Layout a grid of 10 equally spaced and sized boxes
• Render your hand drawings digitally. You can scan your drawings and trace over them in Adobe Illustrator
• Use proper drawing techniques. When using the pen tool remember to close your path in order to apply a fill
• Use color, gradients, lines, path effects, brushes or any other Adobe Illustrator tool you need to complete your drawings.
• When complete, add a title to your artwork, save a jpg and post to your blog

How To Write A Good Great Letter of Introduction

Hello Students,
Your next assignment is to create a "Letter of Introduction" that describes you! Your special traits, qualities, hobbies, and personal, educational and career goals. List your top 5 skills and abilities. It should consist of at least one page. Make sure to use correct spelling and grammar.

Letter of Introduction Assignment:

• Must have same name/contact info formatting and font as your resume/references
• This is an introduction letter, about you, written to people that may be viewing your portfolio
• Should be about 1 page long

You letter should include:

• Who you are
• Where you are currently attending school
• What courses you are currently enrolled in aside from standard courses (such as this ROP class your in right now)
• Your top 5 work related skills
• Special acknowledgments from employers/instructors
• Future education plans
• Hobbies or other activities you enjoy
• Discuss what is contained in your portfolio
• Discuss the type of work/projects/activities you enjoy the most in school

Sample Introduction Letter:

-----------------------------------------------------------------------------------------------------------------------------------

John Star

242 Crest St.

Capitola, CA 95010

(831) 553-2323

jostar@yahoo.com

Date

To Whom It May Concern:

I am currently attending Soquel High School where I will be graduating this year in June. I have enrolled in ROP classes, which are business-oriented. ROP classes have given me a closer look at the business world and I have learned excellent work skills. 

My top five work skills are:

• Excellent communication skills with strong listening skills
• Responsible and reliable with attention to detail
• Strong team player who thrives in teamwork situations
• Good computer skills
• Excellent time management skills

I have received special acknowledgement from my employers for strong skills and work ethics.

I recently was accepted to CalPoly and plan to go there in the Fall and pursue a degree in Agribusiness. After receiving my degree, I plan to work in my family’s strawberry farming business. Eventually, I hope to be the president of the business. I have many hobbies including surfing, skiing and playing baseball but most of all, I enjoy riding my horse up in the hills. It gives me a sense of freedom and independence.

My portfolio shows some of the skills and abilities I have acquired in while attending Soquel High School and throughout my work experience. I have always enjoyed landscaping and have enrolled in the Horticulture class for my last semester of high school. From my past experience you will notice that I enjoy working especially when I leave the job better than it was when I first got there. I have been doing tree work for three years and have worked for commercial and residential customers. Thoroughness and safety are some of my favorite qualities.

Included in this portfolio, is my resume summarizing my schooling, work experience, and skills. In addition I have a list of references, letters of recommendation, and samples of my work. I hope you enjoy reviewing my portfolio.

Sincerely,

John Star

-----------------------------------------------------------------------------------------------------------------------------------

Due by Monday

 - Mr.W

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 admissions 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

Grading:

Your resume's and reference lists are graded assignments. For a total of 10 points, grading is as follows:

2Pts - Resume and List of References is complete per Handbook Guidelines

2Pts - Resume and List of References is well formatted and easy to read

2Pts - Resume and List of References contains no typos or errors

2Pts - Resume and List of References are two separate documents with consistent style, font and header

2Pts - Resume and List of References are emailed to me as PDF files with descriptive file names (don't send a file called "untitled.pdf")

Follow Up Lesson: CareerLocker

Students, you can use Career Locker to develop a resume, research careers and salaries and complete assessments. Your follow up assignment to your resume and list of references is to complete the personal globe inventory on careerlocker.com and research details for 3 different jobs using the occupations section on careerlocker.

Go to http://www.careerlocker.com

Enter Registration Code scc-c846

Enter your personal information

Enter your Grade and Gender. For Group, select Wilson and any other ROP instructors you have

Agree to terms

Select "Assessments"

Select "Personal Globe Inventory"

Answer all the questions in the assessment

Analyze the results...

Job Research:

Click on the "Occupations" tab and click on "Browse Occupations"

Search for a job title, something your would be interested in. Research 3 jobs and write a few paragraphs about why you would be interested in those jobs. Tell me information about the job such as:

1. Job Title
2. Job Description
3. Job Activities
4. Education Needed
5. Career Pathway
6. Salary Range

You can write up your research and post it on your blog. When your research is complete, work through these other assessments:

• Work Skills
• Work Styles
• Learning Styles

- Mr. W

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.

Link, right click to download: ROP PORTFOLIO HANDBOOK

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.

Although these resumes contain similar information, styles do vary.

- Mr.W

New Assignment: Custom Banner for your Blog

Hello Students,

Your newest assignment is to create a Banner Graphic to customize your blog with using one of the text effects below. Find out the image size of the banner at the top of your blog and choose one of the tutorials below to work through.

For instance, the dimensions for the banner at the top of this blog is 900 Pixels Wide by 300 Pixels Tall. Create a new photoshop document with those dimensions and create one of the text effects for your own blog banner.

Due at end of day on Thursday

Text Effect: Gold

Text Effect: Jelly Style

Text Effect: Light and Shadow

 - SW

GD2 Advanced Assignment: Logo and Identity Package

This assignment is for Graphic Design 2 students only.

Your first advanced assignment is to create a refined and well designed logo for personal use and then an identity package to accompany it.

GD2 Logo and Identity Package Assignment Details:


Logo:

• Use pencil and paper to explore logo designs, think of things that inspire you and identify you. Your logo should convey your own personal style as well be readable
• Create 10 or more pencil sketches to explore different designs
• Choose one design and render in pencil in full detail
• Scan artwork and render in Illustrator, consider color usage, scale etc...
• A good logo should be memorable, identifiable and readable when small or large

Identity Package:

• When logo is complete, create an identity package that expands on your logo design style and color usage
• Create a business card, letterhead and envelope design, use Indesign for creation

Present your pencil sketches, logo and ID package designs on your blog when complete. Due on Wednesday the 22nd.

Resources:

• Link: Logo design samples
• Link: How to create an identity package
• Link: ID Package design samples

- Mr.W

New Assignment: Juxtaposition Photoshop Collage

Hello Students,

Today we continue our photoshop practice, a powerful tool in our Adobe CS5 arsenal.  It is important to understand and become familiar with the selection tools. Work through the tutorial below and then you can begin your this photoshop assignment, the juxtaposition assignment.

Link: Photoshop Selection Tools Tutorial

Juxtaposition Collage:

A collage is a work of art created by combining different imagery for different sources. Your assignment challenge is to create a collage from different photographic sources to convey the concept of Juxtaposition. Use the selection tools in photoshop to combine different images, you can use other tools like the eraser tool to blend two photo's together. Use whatever tools you need to complete your image.

Assignment Details:

• Your image must be created in Photoshop at a size of 10"X8" with a resolution of 72 DPI.
• You must have a minimum of 6 objects you have cut out and composed.
• Your design must adhere to the concept of Juxtaposition, the arrangement of conflicting elements, ideas or concepts. Such as a car driving on water, or football players in the antarctic, or penguins in outer space.

Have fun!

- Mr.W

Student Work Samples - Place and Trace

It's Bloggin' Time!

How to set up a Blogger Blog

Despite all of the hype with "blogs" in recent years, a blog really isn't anything much more complicated than a means for publishing work on the web in an easy to read and easy to update format. Some blogs are very personal, resemembling a diary, while others seem more akin to newspaper or magazine journalism. For our class this term, you will keep a blog where I'll ask you to post several short writing responses this term. Most of these exercises will be just a few pages long and they should help you working on the longer writing projects this semester.One easy way to do this is with Blogger, a free and easy to use service. Here are the instructions for how to set up a blog with Blogger.

Step 1: Go to http://www.blogger.com and sign up for a blog

Again, it's an easy to use service, but let me give you a few pieces of advice on how to accomplish this:

• At the start page for blogger, click on the orange arrow that says "create your blog now."
• Blogger now is part of Google, so if you have a Google account (which allows for things like gmail) you should use that to set up your new blogger account. If you don't have a Google account, now is a pretty good chance to set one up. Otherwise, it is just a matter of following the instructions on this page.
• Be sure to check the "terms of service" box; of course, you might actually want to read through it a bit first, though the rules are pretty standard for these sorts of services.
• Save your username and password some place. In fact, I would encourage you to write it down some place. Don't lose this!
• When you're done, click on the orange "continue" button, which will take you to another page. If you did something wrong or you supplied a username or password that doesn't work, Blogger will stop you from proceeding until you fix the error.
• The "Blog Title" will be what appears in the title portion of your blog. I recommend you keep it something simple like "My English 328 Blog" or whatever you want.
• For the address of your blog, I'd encourage you to use your username. So, in my case, the blogger blog address would be http://krause328.blogspot.com Unless you know what you're doing with ftp functions, you should use blogspot.com to host your blog.
• The "word verification" section is a security set-up the blogger folks have; simply type in the word you see in the funky font into the provided box. Click "continue" when you're done.
• You can choose any template you want for your blog, and you can also change the template later if you would like. Click continue when you're done.
• After waiting a few moments, you should get a screen that says your blog has been created. Good for you! Click on the "start posting" arrow and get to work!

Step 2: Get posting!

• The posting screen for blogger is pretty straight-forward. Give your entries a title, type in the appropriate window, and use the editing tools for your blog entry as you want. We'll talk about more advanced options for your posting later, but if you know any basic html, you can incorporate most of that code into your blog posts.
• To post or "publish" your post, click the button at the bottom of the screen "Publish Post." If you start writing something but you don't want to post it until later, click where it says "Save as Draft."
• When you publish your post, blogger will process the information and then, if everything worked (and it usually does), it will give you the option to "view blog." Take a look at it; you should notice a couple of things:
  • The address for your blog-- something like http://stevendkrause.blogspot.com-- is the address for your blog. Send this URI (web address) to me! I will link to your blog from the class web site.
  • Readers should be able to post a comment to your post by clicking on the "comments" link.

Step 3: Do some adjustments to your account

There are a number of different things you might want to do to make your blog a bit more useful. But here are a couple of things you really should do no matter what.

Blocking blog spam. I know, hard to believe, but yes, the world of spamming extends to blogs too. Fortunately, Blogger has a pretty decent security feature that will eliminate almost all spam posts from your blog. Here's what to do:

• If you aren't already logged in, log in to your Blogger account. You did remember your username and password, right?
• From the "Dashboard" screen, click on the name of your blog.
• Click on the tab "Settings."
• Click on the link near the top of that page under the tabs labeled "Comments."
• Set "Who Can Comment?" to "Only Registered Users." It isn't essential that you do this, but I'd recommend it.
• A bit further down, set "Show word verification for comments?" to "Yes." This is a security feature that requires the comment poster to type a specific word that shows up as slightly distorted text in a window.
• Select "Save Settings" at the bottom of the page.

Time zone. It'd be nice if the time was right on your blog, right? Here's how to do that:

• If you aren't already logged in, log in to your Blogger account. You did remember your username and password, right?
• From the "Dashboard" screen, click on the name of your blog.
• Click on the tab "Settings."
• Click on the link near the top of that page under the tabs labeled "Formatting."
• Under "Time Zone," select the right time zone (and if you're reading this as part of one of my classes, that'd be "Detroit." Duh.)
• Select "Save Settings" at the bottom of the page.

Doing things to customize your blogger blog. There's lots of stuff you can do customize your blog. At a minimum, I'd recommend including some links to your classmates' blogs or other blogs you like to read, but there are a lot of other things you can do, too-- include pictures, lists of stuff you like, etc., etc.

• If you aren't already logged in, log in to your Blogger account. You did remember your username and password, right?
• From the "Dashboard" screen, click on the name of your blog.
• Click on the tab "Template."
• Make sure the "Page Elements" tab under this is selected, and click on "Add a Page Element." From here, simply follow the instructions. Be sure to save you page element additions and double-check that it worked.

Step 4: Repeat

This is all you need to do to set up your blogger interface (though, as you can see further down on this page, there are some other things you will probably want to try to do sooner than later). Easy, right?

To post to your blogger blog from now on, here's all you need to do:

• Once again, go to http://www.blogger.com
• Log in with your username and your password (you remembered your username and password, right?) DO NOT click on the "create your blog now" because that will just get you back to step 1.
• After you log in, you should get to your blogger "dashboard," which has a link to your blog. Click the link to manage the blog or click on "New Post" to make a new post to the blog.

Trouble-shooting

"Hey, what should I do if it didn't work?!" Well, blogger really is pretty easy to use, and while it does sometimes have bugs that are of course not your fault, usually if your blog doesn't work, it is is because of something that you did (or didn't) do.

So the first thing you should do is re-trace the steps above: are you sure you did everything I outline here? Really? Are you positive?

If you're confident that you did everything right, here are a couple of other thoughts:

"I tried to enter in my blog address into a web broswer but it didn't work"

Then try this:

• Log in to blogger, using your username and password that you used to sign up for blogger in the first place.
• Get to your blogger "dashboard."
• Click on the link to your blog.
• Click on the tab at the top that says "view blog"
• The web address (or URI) that appears in the window is the address to your blog. It will be something like http://something.blogspot.com Copy this information and paste it into an email message to me.

"I wrote my posts but nothing has shown up yet"

If this is the case, then you probably didn't "Publish" your entry yet but you did a "save as draft." Go back to it and push the "publish" button. This should bring up a window with a time-clock where Blogger indicates it is publishing your entry.

Have fun!
 - Mr.W

New Assignment: Place and Trace

Hello Students,
When your Pen Tool Exercise is complete you can move on to this next assignment, Place and Trace. The goal is to further practice your Pen Tool by tracing line art over a photograph.

Place and Trace Assignment:

• Search for a photograph online that you would like to trace... make sure the image is at least 1000 pixels wide so that it contains some good details
• Download your image and "Place" it in Adobe Illustrator
• Lock down the layer that contains your photograph, create a new layer to create artwork on
• Using your Pen Tool, trace line art over your photograph, make sure there is no Fill, Outline only!
• Turn off the photograph layer now and then to see your line art. Keep drawing until your image contains a good level of detail

Have fun!

 - Mr.W

Practice Your Pen Tool Skills

Hello Students,

Pen Tool Tutorial:

Read through this tutorial carefully and follow along with illustrator using the pen tool. You will be required to turn in a pdf file that demonstrates your steps of pen tool practice in each step of the tutorial, additionally at the end of the tutorial there are 10 black shapes. You must trace these shapes using the pen tool. You may download the images, and use the FILE/PLACE function in Illustrator to place the jpg on your artboard for tracing.

View the tutorial here: http://www.vectordiary.com/illustrator/drawing-with-pen-tool


- Mr.W