Elements of Design

Here is the quick list of the fundamental principles and elements of design.

Elements

  1. Point
  2. Line
  3. Shape
  4. Forms
  5. Space
  6. Color
  7. Texture
  8. Text (An added one Graphic Designers use that never show up in the “traditional” list)

Principles

  1. Balance
  2. Proportion
  3. Perspective
  4. Emphasis
  5. Movement
  6. Pattern
  7. Repetition
  8. Rhythm
  9. Harmony
  10. Unity

As you become more familiar in making the software do what you want it to do, these elements and principles will guide and inform your work to make it structurally sound and aesthetically pleasing. Every drawing, painting, print, poster and brochure utilizes these fundamental elements and principles. Learn and use them with purpose and intent in your designs and artwork. These elements and principles are simple and straight-forward to use – they are utilized and necessary in any media, traditional or digital and will take years of experience to master.

 

Advertisements

Vocabulary

I am going to keep a running vocabulary list of terms I talk about in class. These are brief descriptions – please google or go to wiki for more complete explanations of the terms.

  • Registration: (or Register) relates to the importance of precision alignment and placement. Proper registration means that any impression on the paper – ink, metallic foil, embossing, die cut shape, etc. – occurs in the precise position as intended. Conversely, the register is said to be “off” if any element of the print job is misaligned or displaced.The registration of printed pieces is affected not only by the initial settings on the production equipment, but also by any movement of the paper as it runs through the equipment. You may have seen a mark on a scrap printed piece that looked like the crosshairs of a rifle scope, these marks are alignment aids to ensure proper register as the paper runs though the press.
  • Signature: A printed sheet with multiple pages on it that is folded so that the pages are in their proper numbered sequence, as in a book.
  • Process Colors: Cyan, Magenta, Yellow and Black (aka: CMYK)
  • Spot Color: Offset Lithography printing ink mixed to a specific hue. Colors are categorized by the most commonly used Pantone Matching System (PMS).
  • Benday Dot: a small dot (solid circle) used to convert continuous tone images into line art for reproduction with offset lithography printing.
  • Halftone screen: a pattern of Benday dots of varying size.
  • Separations: a pattern of Benday dots for each of the four process colors.
  • Subtractive Color: printing inks (CMYK and Spot) are subtractive colors – subtract from 100 to 0 of the 4 process colors to get to white.
  • Additive Color: projected color on screens and projectors (RGB) are additive colors – add from 0 to 255 of the three colors to create white.
  • Raster-based software: Photoshop – images comprised of pixels
  • Vector-based software: Illustrator – graphics created through mathematical computations of paths to create shapes with color fills and edge strokes.
  • Pixel:  a minute square area of illumination on a display screen, one of many from which an image is composed.
  • DPI: Dots per inch – used to describe the resolution of a half-tone and separation screen
  • PPI: Pixels per inch – used to describe the resolution of a digital/raster-based image.
  • Continuous-tone image: Generally referring to pictorial images where there is a non-broken range of tones from white to black that may have every shade of gray represented. There are theoretically an infinite number of tones. Traditional photography (photochemical photography) produces continuous tone images.
  • Alignment: To line up letters or words on the same vertical or horizontal line.
  • Anti-aliasing: Blending techinque used in raster images that smooth jagged edges in an image. Soft transition from 100% tone or color to 0% over a given number of pixels from the edge of the shape.
  • Point size: the measurement of height of a letter form.
  • Leading: the space measurement (in points) between lines of type.
  • Tracking: the space between letters in a block of text.
  • Kerning: the space between two letters of type.
  • Bit: a basic unit of information in computing and digital communications.[1] A bit can have only one of two values, and may therefore be physically implemented with a two-state device. These values are most commonly represented as either a 0 or 1.
  • Nibble: one nibble contains 4 bits.
  • Byte: the basic unit of computer memory representing a single alpha-numeric character; one byte contains the equivalent of 8 bits.
  • Kilobyte (KB): A Kilobyte is 1,024 bytes.
  • Megabyte (MB):  Megabyte is 1,048,576 bytes or 1,024 Kilobytes
  • Gigabyte (GB): A Gigabyte is 1,073,741,824 (230) bytes. 1,024 Megabytes, or 1,048,576 Kilobytes.
  • Terabyte (TB): A Terabyte is 1,099,511,627,776 (240) bytes, 1,024 Gigabytes, or 1,048,576 Megabytes.
  • Petabyte (PB): A Petabyte is 1,125,899,906,842,624 (250) bytes, 1,024 Terabytes, 1,048,576 Gigabytes, or 1,073,741,824 Megabytes.

Welcome to DSP

Hello students of DSP. It is very nice to be teaching ART201 again, the course I initially designed for the Visual Communications (Design) program. Since that time, DSP has been added to the foundation skill-sets in which all Art majors are expected to be proficient. We will be covering a ton of information about design (elements and principles), software (the Adobe Creative Cloud suite of software, html and possibly tickling some initial 2D animation) and a range of creative process that will help designers and artists to find and pin down that creative muse.

It will seem overwhelming and daunting, but don’t freak out. We will get over the learning curve and you will soon be producing art and design work using your newly acquired super-powers.  Use them only for good.

Read the next few posts (both from January 2018 – don’t worry about any of the posts from last spring 2017). See you in a couple of weeks.

Hardware and software

As you are subscribing to Adobe Creative Cloud… here are some things to be aware of. The Adobe software is memory, processor, and storage intensive. If your computer only has 4GB of Random Access Memory (RAM), you are going to have problems. 8GB is minimum and 16 – 32 GB is better. For storage (Hard Drive space), you will need at least 500GB if not 1TB.

Backing is a major issue you need to address from the start. Are you going to back up your computer/files to an external hard drive or to a Cloud drive. If you are backing up to an external drive you will need a 1TB or bigger drive. Backing up to the Cloud is a matter of how much space you buy with whatever supplier (Google, Amazon, iCloud, etc…). Do something to protect the files you create.

Working with the Adobe software on under-equipped hardware is very slow and frustrating. So, upgrade existing hardware or buy new hardware, souped up to run this design-based, memory, storage and processor hungry software.

Make a blog

Here is a little project you can do over the holiday break… make a blog to use in this class. You can use any blogging platform you want – wordpress.com, blogger.com, wix.com, typepad.com, etc… Just send me the link to your blog when you get it built, so I can add it to the class blog.

First assignment

OK, Get subscribed to lynda.com. You can do the monthly subscription (not the annual – unless you really like Lynda and plan to use it beyond this class). I just checked, You get 30 day free trial to Lynda.com, I don’t see any discounts for students on the site.

You are going to begin watching the essential training videos for Adobe CC Photoshop, Illustrator and InDesign. I want you to get into each video far enough to familiarize yourself with the three different (yet very similar) work space interfaces. I find having the software open and doing the things going on in the video while it plays is useful. I stop and rewind quite a bit too. But, everybody works/learns differently.

There are only five computers in the lab, so get subscribed to Adobe CC too and get it installed on your computers and bring them to class to work on (or you can also after the demos, go into OP1210 Beta Computer lab and work there – if/when I cut you loose).

If you are getting frustrated and/or overwhelmed at any point during the semester, please feel free to stop by and talk. My door is always open and there is a ton of information to cram into our noggins and the potential for getting frustrated is high. I know, I’ve been there and done that.

New Assignment: Putting it all together

So you new assignment, and probably the one you will work on until the end of the semester is…

Concept:
You are going to tell a story. Make one up or re-imagine an old story. Something simple though. Maybe a fairy tale, or a nursery rhyme. Pick your poison.

Devices:

  • 12 page “booklet” design, four-color, full-bleed, saddle-stitched. The story happens in 8 to 10 pages
  • 12 page storybook website: retask your print design into a website – 12 pages (hyperlinks, yeah)
  • 30 second animation (Adobe Animate or Photoshop Cell-frame)

Graphics:
You can use Adobe Illustrator and Photoshop to create the assets to correspond with your text in the story. You must include a photograph of yourself as the designer, illustrator and/or author.

Process/Deadlines:

  • April 19: Story determined with rough storyboard or a rough “dummy” of the booklet (roughly sketched out ideas of the imagery needed in the story)
  • April 28: Mid-assignment critique: all components
  • May 5: Booklet and Website due
  • May 8 (Final): Animation due – we’ll watch them in class.

Tip:
This is a big assignment, but you have developed the skills this semester to pull it off… if you keep it simple, focus on the story and if you utilize design (Big D design and little d Design) to solve the problems. We have roughly four weeks to accomplish these three devices (print, web and animation).

You should have questions tomorrow about this assignment.