Bis 220 Week 2 Individual Assignment Rubric

Graphic Design1

Please don't work ahead. I sometimes change the assignments or provide additional information.

Week 1 - Jan 25 & 26

Thursday:
Intro
- Hello, about me, the lab and the program.
Any graphic design 2 students in here?
​Art Institute here next Friday (Feb 2).

Read the syllabus

Notes - This is a note taking place. Use the Cornell note layout. Be sure you have a Graphic Design section in your notebook.
Take notes that cover all software techniques you learn in class.  There is WAY to much to try to remember in your class. I will grade these regularly.  You can use your notes for any tests or quizzes. I will occasionally grade these.

Read all links. Links are underlined red text.

Sample Files: You can download or copy from this web page when you need them.

What is Graphic Design? Watch the above videos. We will talk about them in class.

Online Website - Almost everything you do in class will be put on your Weebly website for critique and grading. We will go over how to do this in class. If you don't want your site to be able to be found on the internet I will show you how to do that.
Be sure to write down your user name and password somewhere. If you forget them you will need to rebuild the site - not fun. 
Sample Here 

Click here to get a Weebly account.

Setting up your site:
Creating pages: Click HERE
Assignment Page: Click HERE
DOW Page: Click HERE
Calendar Page: Click HERE

Website Requirements - I want your navigation set up exactly this way: Home page (optional) Assignments, DOW's, Calendar and Portfolio. We will go over how to do this in class. Your site address should be: firstnameLastnamegd1.weebly.com. Example: bobpotaskygd1.weeble.com. If that name is taken see me for help. If you don't want your website to be searchable I'll show you how to set it up that way. No illegal images on your website. You can't use pictures from the internet (except research ideas). They do not belong to you. This is a professional website, not a personal website. It is a place for me to evaluate what you are learning and potential employers or colleges to see what you are capable of.

Andrew White's Graphic designers portfolio on You Tube - Check it out : ) 

Intro to Graphic Design Applications - You will be using Photoshop, Illustrator and InDesign this semester.

Photoshopwill mostly be used for image manipulation. It is primarily a raster program. You will use this program to crop, color correct, re-size and combine images.

Illustratorwill be used to create vector artwork as well as designing single page projects.Some good raster vs vector info. Read it.

InDesign will be used to make multi-page documents like magazines, electronic and print books. You will combine things you have worked on in Photoshop and Illustrator in InDesign.

After Effects is a motion graphics program. We will use it to animate your designs.

Check this out - super cool!

Video about color

By David Carson
Ray Gun (Design Of the Week) Write at least 25 words describing what you do or don't like about the design. Use at least 2 of the design terms from the list below. The more terms you use and understand the smarter you will get. Include a copy of this picture with your critique. Make the picture about 2 inches wide. Put it in the DOW section of your website. Due at the end of next week.
We will do this first one together in class.


Terms to use: center of interest, typography, grid, tracking, leading, warm colors, cool colors, primary colors, texture, line, shape, form, balanced, unbalanced, movement, pattern, repetition, rhythm, variety, unity, positive space, negative space. Look up the terms on the internet. ​
We will be spending a few days working with Photoshop. If you are new to Photoshop this will be difficult. There is too much to remember without taking notes. You can use notes on any tests or quizzes.

Friday:
You will have a syllabus test next Thursday.
Sample Files: You can download or copy from this web page when you need them.

Cool quote:“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away”

— Antoine de Saint Exupéry
Please don't work ahead. I sometimes change the assignments or provide additional information.

Week 2 - Jan 29 - Feb 2

Monday: Resizing pictures in Photoshop. We will always use a resolution of 250 for images for print.
People don't usually use Photoshop for text and shapes, BUT, a lot of times people don't have Illustrator or InDesign. When you have the choice you would usually use those programs (like we will for most assignments in class).

Photoshop for graphic design: You need to be able to:
Make a new document (8.5 x 11 inches, 250 ppi)
Use the zoom tool
Understand how layers work
Crop photographs

Manipulate text (family, style, size, color, leading, kerning, tracking
Make boxes
Make lines


Exercise:Make a new document 8.5 x 11, 250 ppi in Photoshop. Add a picture that is 5x4 inches (also 250ppi). Place the name of the object at the top with a colored box behind it. Put some body text (gibberish) below the picture. We will do the first one together. Do 2 more. Use a different picture for each. Experiment with different font families, sizes, leading kerning tracking, etc.

Be sure you put what you leaned each week on your Weebly website.

Graphic Design Info.
The goal is to communicate a message. Everything in the design should help to communicate the message. If something is distracting from the message, don’t include it. If something is distracting from the message, don’t include it. If something is distracting from the message, don’t include it. (Yes I meant to write that 3 times : )

Leading, kerning, tracking info.

Thursday: Syllabus test

Concepts to learn: Using the type tool, using the character panel, font family, style and size, leading, kerning and tracking, changing colors and opacity, rotating objects, using layers, making lines and shapes.

Terms to use: center of interest, typography, grid, tracking, leading, warm colors, cool colors, primary colors, complementary colors, texture, line, shape, form, balanced, unbalanced, movement, pattern, repetition, rhythm, variety, unity, positive space, negative space. Look up the terms on the internet. ​
Assignment layout example:
Friday: 

Sampling colors, deleting solid colored backgrounds behind images, making colored backgrounds in Photoshop.

Magazine Cover Assignment - Due next Friday
Find a magazine cover on line. Completely redesign it using the same "copy". Your cover design should look nothing like the original. YOU NEED TO HAVE AT LEAST 40 WORDS ON THE COVER!

Make the document 8.5 x 11 inches, resolution, 250ppi. Add 1/2 text safe guides around each edge. Add these guides to every assignment this semester.
Your design must include a picture. Be sure to crop it. It CAN fill the entire page, but it doesn't need to. Vary the color, size, font families, etc. You CAN use boxes and lines. Design with what you know. Look on the web for design ideas. Don't COPY other designs, just use bits and pieces of ideas.

Design grading rubric HERE.

Watch these videos for magazine cover info. BEFORE you start your design.

Good mag cover video 1

Good mag cover video 2

Put this assignment on your Weebly site. Also put the original magazine cover that you got the copy from with it. Turn on the light box option and label it: Designed by your name. As with all assignments, if you finish, make another copy and try different things. Art isn't like math. There is more than one right answer. If you have time keep trying new things. The more you design, the better designer you will be.

Cool quote: "I would show my graphic design jobs to my mother, and she would always say the same thing: “That’s nice dear.” And then she would say, “Did you write it?” or “Did you do the drawing?” or “Did you take the pictures?” I’d always answer “no,” then I realized the problem. My answer was then, “I made this happen. It’s called design.”

— Brian Webb
Photoshop basics:
Photoshop CC 2017 overview and setting up a custom work space. Click HERE.
Zooming in Photoshop CC 2017. Click HERE.

Basic file prep tutorial videos:
Cropping in Photoshop CC 2017. Click HERE.
Color correcting, brightness, and contrast in Photoshop CC 2017. Click HERE.
Adding a dark vignette in Photoshop CC 2017. Click HERE.
Dodging and burning is Photoshop CC 2017. Click HERE.
Sharpening in Photoshop CC 2017. Click HERE.
Saving in Photoshop CC 2017. Click HERE.
Website check Monday next week (week3). You should have the website made, and something on the calendar (like the syllabus test, DOW, and the website check).
Please don't work ahead. I sometimes change the assignments or provide additional information.

Week 3 - Feb 5 - 9

Monday:
Continue working on Magazine assignment. When you are done, grab a grade slip, call me over to grade it.If all is good, save a jpg version of your file. Upload it to your Weebly website. Watch a tutorial video HERE.

Read all links. Links are red text. At some point I will give you some sort of quiz over the links. Read or watch them.

Change your browsers download preference.

For Chrome: Go to preferences, choose settings, then scroll down to show advanced settings, scroll down to downloads, click on change, choose desktop.
For Firefox: Go to preferences, choose general, then downloads, save file to, choose desktop.

Look up the word "copy" as it pertains to graphic design.


Skateboard Assignment - Template here -  Design at LEAST 2 completely different skateboard design ideas  using  Photoshop brushes. You can also use other PS tools (text, boxes, etc.)This is one website where you can get the brushes. Another one HERE. Be sure you are in the BRUSHES section. Put these on the assignment page of your website. Make the background of the skateboard files transparent. Save them as .png files.

Click HERE if you want to create some graffiti to add to the board.

Skateboard tutorial HERE.

Design grading rubric HERE.

To see larger sample click on image.
DOW - NOTLD (Design Of the Week) If you already did this with the old example, that is fine - don't redo it.

​What is this design trying to get you to do?
What color theory do you see?
Do you think the font family is important to the design? Why?
Include a 3 inch copy of the design, the questions and answers in the DOW section of your Weebly site. Present it in a way that looks professional. You ARE a graphic designer ya know : )
Due the end of next week.


Grid examples:
Top: arranged shapes with a grid
​Bottom: arranged shapes without a grid
Examples of using grids HERE.

Friday: Magazine Cover Assignment due.

Cool quote: “Simplicity is the ultimate form of sophistication”

Leonardo da Vinci

Week 4 - Feb 12 - 16 

Update your website. Make everything correct.
We are about to embark into the world of Illustrator. Before we do, I want to be sure we are all caught up. If you are caught up, do the next assignment. If you are not caught up do the old assignments including website stuff (DOW's).
Remove Background Assignment (optional if you are not caught up) - Sometimes you will want to remove a busy background and fill it with a solid color.
Watch the tutorial. Cut this picture of HC Weaver out of the background and replace it with a solid color in Photoshop. This should look perfect at 100%. Upload the before and after versions to your Assignment page of you sire and label it: Remove Background.

Selecting with a quickmask

Download file below:
Example courtesy Jacob Boyle:
Rotated Text Assignment (optional if you are NOT caught up) 1: Put this on your Assignment page on your website. Name it Rotated Text Assignment 1.
Only do this if you are caught up. If you are caught up you HAVE to do it.
Take facts about you: name, age, birthday, address, favorite color, height, hobbies, etc.

Arrange them on 45 or -45 degree angles. Only 45 or -45 degree angles. No 90 degree or other angles. Use different size and weight text. Use the same font family. Use different styles. No lines or boxes. No color, just use black.  Be creative. Make it 6 x 6 inches. 250ppi.

Rotated Text Assignment 2 (optional if you are NOT caught up): Put this on your assignment page on your website. Name it Rotated Text Assignment 2.
​Only do this if you are caught up. If you are caught up you HAVE to do it.

Take facts about you: name, age, birthday, address, favorite color, height, hobbies, etc.

Arrange them on 0, 90 and -90 degree angles. Only 0, 90 or -90 degree angles. No 45 degree or other angles. Use different size and weight text. Use the same font family. Use different styles. You CAN use boxes boxes in your design. No color, just use black for text or boxes. You CAN experiment with opacity (to make gray).Be creative. Make it 6 x 6 inches. 250 ppi.
If you have a design or image that has white on the edges you need to place a border around it (not the skateboards, make the white, clear). The white background bleeding into the white background of your web page does not look good.
Weebly can easily do this for you.
Import the design or photo into your Weebly page. Select the image to bring up the image editing options. Make sure Lightbox is on. Click on ADVANCED. Select a border and border color. Experiment to find the combination that works best for your design.

Example: No border on the left (bad) border on the right (good)

Illustrator

Start working in Illustrator.

What is Illustrator

Why Illustrator

Raster vs Vector

Illustrator basics: new documents, file management, placing graphics, scaling graphics, link vs embed, using text, simple shapes, using layers, fills and strokes, lines, select/direct select tools, pathfinder tools.

Some videos I made:

Starting an Illustrator project

Using text in illustrator

Making lines and shapes in Illustrator

Placing images in Illustrator

Some videos I found online:

Illustrator Interface

Setting up a new document

Drawing with Illustrator

Using the Blob and Eraser Tools

Creating Objects with the Shape Tool

Using the Appearance Panel

Cropping with Clipping Masks

Cropping with Opacity Mask

All of the Adobe Illustrator videos here


Grid Assignment 1: Make a letter sized document in Illustrator CC2017. Include 2 columns of filler text, a headline, and at least 2 pictures. Remember to add an alley (space between the columns of text, usually about 1/4 of an inch. See illustration below.). Line them up using a grid. I'll show you how in class. Put this on your assignment page on your website. Name it Grid Assignment 1.
​Everybody HAS to do this.
ALL ILLUSTRATOR PROJECTS SHOULD BE IN THEIR OWN FOLDER!!!
​Assets are linked, NOT embedded.
DOW - 08 (Design Of the Week)
What is this design trying to get you to do?
What colortheory or color theme do you see?
What decade do you thing it was made? Why?
Do you thing the font family is important to the design? Why?
Include a 3 inch copy of the design, the questions and answers in the DOW section of your Weebly site. 
Due the end of next week.


Week 5 - Feb 19 - 23 :: Mid-Winter Break

Week 6 - Feb 26 - March 2

Please don't work ahead. I sometimes change the assignments or provide additional information.
Monday: We begin working with Illustrator. Basic layout exercise (same as with photoshop: picture, text box and title at the top, paragraph at the bottom. Be sure you crop photo in PS, all assets need to be in a folder BEFORE placing them. ALL ILLUSTRATOR PROJECTS SHOULD BE IN THEIR OWN FOLDER!!!
​Assets are linked, NOT embedded. Assets are the elements that go into your project - usually the pictures.

​See last week for tutorial videos.
Wednesday: Illustrator basic layout quiz? We'll see where we are at.
Check this out about the pathfinder tool. Really powerful tool in Illustrator.
Packman Exercise: Experiment with Pathfinder tools. Make a Pacman. Make an evil Pacman : ) Don't put these on your website.
Watch this about the blob brush BEFORE you do the snowman exercise..
Snowman Assignment
Tips: To use the snow brush: Select the brush tool. click on WINDOW on the top of the screen. The brush panel will pop up. In the brush panel select the preferences (little lines at the top right of the brushes panel), go to: Open brush library, then Decorative, then Decorative scatter. The snowflake brush is at the bottom of the brushes. Click on it. Paint with the brush. You should see a sea of snowflakes.

To make the bottom snow, use the blob brush. To trim it you have 2 options:
1 - use a clipping mask. Put a rectangle over the part you want to keep.Select the rectangle, select the snow (both need to be selected). Go to: object, clipping mask, make. Bingo.

2 - when you export it as a jpeg (FILE, EXPORT), be sure the "Use Artboards" box is checked. It will only save the stuff that is in the artboard. This will go on your website in the assignment section. The title will be: Snowman. Caption it: Designed by "your name".

Design grading rubric HERE.
If you would like to be able to watch the tutorial videos at Lynda.com for free, click THIS LINK to watch the video that will show you how to get an online library account and then get to Lynda.com through the library website.
Josh Reiner is an old graphic design student. He always worked hard, he always did his best. There are a lot of different career options for artists and designers.
Click on the thumbnail
Check out some of the stuff he does in the YouTube video.
Hierarchy/Grid Poster - Due Thursday next week - Get a visually interesting photo from the internet. Add words that describe it. On the one I did I Googled , "facts about cows". Place them using everything you have learned the last couple of weeks. Use different angles, weights, colors, sizes, shapes. lines, transparency, etc., to add visual interest and control what is read first, second, third etc. Leave some negative space. Use a grid. Don't use too many techniques in this assignment. Pick and choose the ones that create the best design. Only use techniques you now know. Make it letter sized. Make a folder for the assignment. Put any pictures you are using and the IA file in the folder BEFORE you place the images. Create four layers: Type, Images, Shapes, Background. Type would be on top, Background on the bottom.

​This should look nothing like my design.

Some color theory info HERE.

Put this in the assignment section of your website. Name it Hierarchy/Grid Poster
Things I will look for when grading this:
Can I easily read the text? The whole point of GD is communicating a message.
Is it a good quality image (high enough resolution). Try to have the small side at least 1000 pixels.
Are elements lined up using a grid?
Do the colors work well together? 
Have you used leading, kerning, and tracking as well as you can?
Are you using the best fonts for your design? The correct size? Body text should USUALLY be 12pts. Don't make text smaller than that. You can make some of the text larger.
Does your hierarchy make sense? Do I read the most important thing first? Second most important thing second, etc.
Does this look professional? Like something a professional designer would have done.
Does it have layers?
Does it have a folder with assets in it?

Design grading rubric HERE.

MUST BE DONE USING ILLUSTRATOR - Click on the picture to see a larger version.
Some grid examples:
​Click thumbnails
Column Grids: Very common. One way to use grids; CLICK HERE.
Visual Hierarchy - When you look at a design you tend to read things in a particular order. That order in determined visually using variations in scale, value, color, spacing, placement, and other signals. The most important information should be read first, second most important second, etc.

Concepts to learn: Transparency, resizing, designing with a grid.

Read this from Vanseo Design

and this from Web Style Design

and even this about El Lissitzky
Read about this 8 step graphic design process - Due - Last day of week 8. Create a  document that lists the steps. Write a sentence or two (no more than that) that summarizes each step. Have your name, class and period on the top of the document. Start with the Gather step, end with the Revisions step. That means you will only be listing 6 steps. Save this file as a PDF file. See me for help. Load the file on your assignment page under the title heading: Design Process. Use the FILE not the DOCUMENT element. 

Or, you can base it on the one below.

This is one I developed for a web design class. Also applicable for graphic design. If you base your design process on this one there would be 4 steps, but each step has a little more info than the six step process.
DOW - 7up (Design of the week)
What is this design trying to get you to do?
What color theory or color theme do you see?
What decade do you thing it was made? Why?
Is this a balanced or unbalanced composition?
If it IS balanced, is it symmetrical, or asymmetrical?
When is the last time YOU had a 7up?
Why do they call it 7up?
Include a 3 inch copy of the design, the questions and answers in the DOW 5 section of your Weebly site.
Due the end of next week.


Make your website look like the sample: same page order, have lightbox turned on for all images, put black borders on images with white backgrounds, titles should be capitalized, only required assignments on the site, your name and class as a header on all pages. Look at the student example and copy that. Sample student website here
Friday: Work on current assignment. Snowman due today.

Week 7 - March 5 - 9

Please don't work ahead. I sometimes change the assignments or provide additional information.
Monday: I'll go over how to make the shapes you will need for the Angry Bird Assignment.

Green Groups Los Angeles Marketing

Watch this to see how to join paths to create longer paths and shapes. Watch/Learn/Use : )
I would change your selection preferences in Illustrator. I think the rubber band preview is confusing. It is up to you though. Go to Illustrator (at the top left of your screen),Preferences, Selection and Anchor Display, and uncheck the boxes in my screen shot.
​Click thumbnail
You will need to be able to make and manipulate these shapes on your own. Practice, ask for help, take notes. There will be a test. You can always use notes for all tests and quizzes in here.You need to make them the way I show you in class. There is always a method to my madness : )
Tutorial video HERE.
 Step by step non video tutorial HEREThis is more accurate than the tutorial video. Watch the video, then follow along with the non video tutorial.

I did this in about 20 minutes. You can too!!! Just follow the tutorial step by step.

Don't give up!!!!!!!

FYI, A few steps were left out of the video tutorial.

This will go in the Assignment section of your website.The title will be: Angry Bird. Caption it: Designed by your name.
Make it a thumbnail about 2 inches wide. Turn on the light box option.
Things I look for when I grade this:
Is it proportionally similar to the original?
All elements placed in the correct place? (The eyes AREN'T in the center horizontally for instance, How much of the beak is covering the eyes, etc.)
Are the colors similar?
Did you include ALL of the shadows (people always forget the beak shadow : )
You Don't NEED the background color. Make the background whatever you think is appropriate.

Design grading rubric HERE.
Wednesday: Symbols in graphic design are very important. Read this.
Thursday: Work on Angry Bird
Watch this about converting corner points to smooth points. Very helpful technique. Be sure to drag in the same direction as you did when you created the original shape. If you don't, the path will twist. I'll show you this in class. Hard to explain in words.
Note About Earbuds - If someone is taking to you, take them out. Not one , both. I'm surprised I need to talk about this, but...
read THIS.

Week 8 - March 12 - 16 :: Friday no students

Please don't work ahead. I sometimes change the assignments or provide additional information.
Color Wheel Assignment -  Do this in Photoshop! - Download the color wheel HERE. Label it. Instructions are on the color wheel file. Upload it to your Weebly site. Label it, yes you guessed it, "Color Wheel" : )
Tutorial video HERE.
Finish this by the last day of week 11.


Creativity - What is it and where do ideas come from? It's not magic. It's very simple - look at what other people do, take bits and pieces that you think are interesting, and put those things together in your own way.

John Lennon - Being For The Benefit Of Mr. Kite. Click HERE to hear the song. John saw the poster, took bits and pieces of the words to create the lyrics for the song.

Click on the thumbnails to see larger versions.
Picasso - Cubism. Picasso went to Africa, saw some  African masks, saw some of the paintings his friend Braque was making, put bits and pieces of those together in his own way and - bingo!

Click on the thumbnails to see larger versions.
Rain Forest (Design Of the Week) Write at least 25 words describing what you do or don't like about the design. Use at least 2 of the design terms from the list below. The more terms you use and understand the smarter you will get. Include a copy of this picture with your critique. Make the picture about 2 inches wide. Put it in the DOW section of your website. Due at the end of next week.

Instructor: Jeria Quesenberry
Course: 67-250: Information Systems Milieux, Information Systems Program, College of Humanities and Social Sciences
Assessment:Grading Rubric for a Group Project

Purpose:

I had assigned group projects before, but I struggled to give detailed feedback and often realized that students had not included components that I had expected. My goal was to clarify my expectations for student performance and to develop a rubric that I could use to grade the projects. I was especially interested in providing detailed feedback to students about their projects’ strengths and areas for improvement.

Implementation:

I created rubrics for each component of the group project, which included a group project proposal, a systems analysis and design deliverable, an application demonstration, a presentation, and an individual reflection essay. The students receive these rubrics with the assignment guidelines for the group project, and I score these components using the rubrics.

Results:

Using the rubrics allows me to evaluate the projects more quickly and concisely, which in turn makes it easier to provide timely feedback to the students. Using these rubrics also helps my students because they know my expectations for each component of the project.

Comments:

Creating the rubrics was time-consuming, but they are worth the effort. I give more productive feedback, and my students are more confident knowing the performance criteria in advance. I have also learned that rubrics are dynamic documents. I have revised the original rubrics that I developed, and I expect to continue refining them.

CONTACT US to talk with an Eberly colleague in person!

0 Replies to “Bis 220 Week 2 Individual Assignment Rubric”

Lascia un Commento

L'indirizzo email non verrĂ  pubblicato. I campi obbligatori sono contrassegnati *