Type Families

The different options available within a typeface, such as roman, bold and italic, make up a type family. Times New Roman and Helvetica are examples of type families. These families are extremely useful because a designer can use just one or two within a project, but still have a wide variety of styles to choose from. This helps to achieve a consistent design.

Roman

Roman is the standard style of a typeface, not altered by weight, width, angle or any other characteristic. This is often used for large blocks of text, such as the text of a book.

Italic

Italic type is at an angle, generally slanting to the right from bottom to top. Italics are specifically designed within a typeface, meaning certain letters may be significantly different than the roman version to improve appearance and legibility. Oblique type, on the other hand, is the roman type slanted at an angle, as-is. The two are often confused.

Bold

Bold, or boldface, type is a heavier weight than roman type. As there is no official standard for naming typeface style, bold is often referred to as black or medium, or other names depending on the weight and the preference of the typeface designer.

Light

Light type is thinner than the roman option. Depending on how light the type weight is, it will often be used at large sizes so it is legible, or to achieve a specific style. As with bold, there are light varieties such as ultralight.

Extended

Extended type is wider than the standard type of a family. It is useful for headlines and other large type areas, and provides even greater flexibility within a family.

Condensed

Condensed type is a narrower face, which can fit into small spaces. Like extended, it provides more style options while staying within the same family.

Combined Styles

Most type families will not just provide bold, italic, condensed, light, and so on, but combinations of each. This gives the designer even more options to work with. For example, Helvetica Neue is availabl e in Regular, Italic, Bold, Bold Italic, Light, Light Italic, UltraLight, UltraLight Italic, Condensed Bold and Condensed Black. By using the options with a type family, and the combinations of each, designers can achieve a consistent layout while using a variety of styles.

Sources:

Gavin Ambrose, Paul Harris. "The Fundamentals of Typography." AVA Publishing SA. 2006.

Color Separation

Definition: Color separation is the process by which original artwork is separated into individual color components for printing. The components are cyan, magenta, yellow and black, known as CMYK. By combining these colors, a wide spectrum of colors can be produced on the printed page. In this four color printing process, each color is applied to a printing plate. When the colors are combined on paper (they are actually printed as small dots), the human eye combines the colors to see the final image. The use of plates for printing is part of the process known as lithography.

Also Known As: Four-color Process

Common Misspellings: Color Seperation

Using Swatches to Insure Desired Color Results in Printing

The Problem

When designing for print, a common issue that has to be dealt with is the difference between the color on your computer display and on paper. Even if your monitor is calibrated correctly the match them as best as possible, your client’s will not be, and so a third “version” of the color comes into play. If you then print proofs for your client on any printer other than the one that will be used for the final job (which is often the case), more colors join the mix that won’t match the final piece.

The Pantone Matching System

To deal with this problem, you can use the “Pantone Matching System,” or PMS. The PMS has an industry standard book of color swatches with reference numbers that you can give to the printer, who will then use ready-made inks that match these numbers to complete the job.

The PMS Swatch Book

The PMS swatch books come in many versions, made for different papers such as coated and matte. For this reason, it is important to talk to your printer first about what paper will be used, so you can refer to the proper book. The books are available for purchase directly from Pantone as well as on Amazon, other web sites, and in art stores. As the swatch book sets are expensive (especially the full reference library), you may want to start with the “Formula Guide” set, consisting of the coated, uncoated and matte swatch books, which are sufficient for most standard jobs. It is important to remember that books can “expire,” meaning they are no longer applicable to the current ink sets.

Working with the Client

To get the full value out of your swatch books, meet with your client to discuss the colors that will be used in the project. Once you have an idea of the project design, you can discuss exact colors for backgrounds, type and other elements. Remember that the swatches are for determining solid colors, and do not help to insure that elements like photos (which can contain millions of colors) will print as desired. For this reason, among others, it’s a good idea to always get a proof from a printer before they finish the entire job.

Applying the Selected Colors to Your Designs

Once you have selected PMS colors, what do you do with them? For starters, you need to use the matching colors in your design projects. You do this by selecting the appropriate swatch library, and colors, in your graphics software.

• In Photoshop: Open the swatches palette by clicking Window > Swatches. The standard swatch palette will be displayed. Click the small arrow on the top right of the swatches window, and you are presented with a long list of color libraries to choose from, include several Pantone collections. Select the set name that matches the swatch book you are using. Photoshop will ask you if you want to replace the current palette or add onto it (Append). Choose “OK” to replace the palette so you are only seeing your Pantone colors.
  
  
• In Illustrator: The process is basically the same, except when you click the arrow to bring up the swatches list, you must first choose “Open Swatch Library” to see the full list of Pantone and other color libraries.

Once your Pantone swatches are displayed, you can see the reference numbers by rolling over each color swatch with your mouse. Now you can select the colors that you have already picked out in your books. This process might vary slightly depending on what version of Photoshop or Illustrator you are using. The swatch palettes are also available in most standard graphics software, so be sure to select the right palette for the job.

Supply the Colors to Your Printer

Even though you have selected the appropriate colors in your design, it is important to let the printer know which colors are used where. You can do this by marking up a printed example of your design…simply label each PMS color with its reference number. Again, it’s a good idea to get a proof so you can approve the colors before the entire job is finished, which are much more likely to appear as you expected if you use the Pantone Matching System.

_Sources:

_{David Bann. “The All New Print Production Handbook.” Watson-Guptill Publications. 2006.}

Color Properties and the HSV Color Space

HSV Color

The HSV color space is important to look at because it describes color based on three properties: Hue, Saturation and Value. As you edit these values, the full spectrum of colors can be created.

Hue

The Color Wheel

Hue is another word for color. Red, blue, and yellow are the primary hues, and when combined in equal amounts they create the secondary hues orange, green and violet. When primary and secondary hues that are adjacent on the color wheel are combined, you get the tertiary hues. These colors are shown in the color wheel diagram. When you mix the primary colors in different amounts, you get a limitless number of colors.

Saturation

Saturation is the intensity of a color (or hue). When you mix colors or add black to a color, saturation and intensity drops. If you add white, color becomes lighter, but not necessarily more intense. The image below demonstrates this; the first box is fully saturated, the second has black added and the third has white added.

Value

The lightness or darkness of a color is its value. Like saturation, adding black or white to a color affects value. Tints are colors with added white, and shades are colors with added black. The image above shows tints and shades of the hues of the color wheel.

_Sources:

Rob Carter. “Digital Color and Type.” A RotoVision Book. 2002.

Color Models: RGB

RGB Color

There are many models used to measure and describe color. The RGB color model is based on the theory that all visible colors can be created using the primary additive colors red, green and blue. These colors are known as primary additives because when combined in equal amounts they produce white. When two or three of them are combined in different amounts, other colors are produced. For example, combining red and green in equal amounts creates yellow, green and blue creates cyan, and red and blue creates magenta.

As you change the amount of red, green and blue you are presented with new colors. Additionally, when one of these primary additive colors is not present you get black.

RGB Color in Graphic Design

The RGB model is so important to graphic design because it is used in computer monitors. The screen you are reading this very article on is using additive colors to display images and text. Therefore, when designing websites (and other on-screen projects such as presentations), the RGB model is used because the final product is viewed on a computer display.

Types of RGB Color Spaces

Within the RGB model are different color spaces, and the two most common are sRGB and Adobe RGB. When working in a graphics software program such as Adobe Photoshop or Illustrator, you can choose which setting to work in.

• sRGB: The sRGB space is best to use when designing for the web, as it is what most computer monitors use.
  
  
• Adobe RGB: Because the Adobe RGB space contains a larger selection of colors that are not available in the sRGB space, it is best to use when designing for print. It is also recommended for use with photos taken with professional digital cameras (as opposed to consumer-level), because high-end cameras often use the Adobe RGB space.

_Sources:

_{”The Little Know-It All: Common Sense for Designers.” Die Gestalten Verlag GmbH & Co. KG (dgv), Berlin 2007.}

_{”Working Space Options.” Adobe.com. 20 Sep. 2007.}

About the CMYK Color Model

The CMYK color model is used in the printing process. To understand it, it is best to start with RGB color. The RGB color model (made up of red, green and blue) is used in your computer monitor, and is what you will view your projects in while still on screen. These colors, however, can only be viewed with natural or produced light, such as in the computer monitor, and not on a printed page. This is where CMYK comes in.

When two RGB colors are mixed equally they produce the colors of the CMYK model, known as subtractive primaries. Green and blue creates cyan (C), red and blue creates magenta (M), and red and green creates yellow (Y). Black is added to the model because it cannot be created with the 3 subtractive primaries (when combined they create a dark brown). The K, or “key,” stands for black.

CMYK in the Printing Process

The four-color printing process uses four printing plates; one for cyan, one for magenta, one for yellow and one for black. When the colors are combined on paper (they are actually printed as small dots), the human eye sees the final image.

CMYK in Graphic Design

Graphic designers have to deal with the issue of seeing their work on screen in RGB, although their final printed piece will be in CMYK. Digital files should be converted to CMYK before sending to printers, unless otherwise specified. Because of this issue, it is important to use “swatches” when designing if exact color matching is important. Swatches provide a designer and client with a printed example of what a color will look like on paper. A selected swatch color can then be chosen in Photoshop (or a similar program) to insure the desired results. Even though the on-screen color won’t exactly match the swatch, you know what your final color will look like. You can also get a “proof” from a printer, which is an example of your printed piece provided before the entire job is run.

_Sources:

David Bann. “The All New Print Production Handbook.” Watson-Guptill Publications. 2006.

How to Create Website Wireframes

The Benefits

With website wireframes, you have the benefit of tweaking a simple line drawing to achieve the desired layout. Rather than move complex elements around a page, it can take very little time to drag a couple of boxes into new positions. It is also much more productive for you or your client to focus on the layout first…you won’t start out with comments like “I don’t like that color there!” Instead, you will start with a finalized layout and structure on which to base your design.

How to Create Website Wireframes

How to Create Website Wireframes

OmniGraffle Screenshot

There are a variety of ways to create a website wireframe. They include:

Drawing it by hand on paper
This method comes in handy when face to face with a client. Sketch out your layout ideas on paper, with a focus on what elements should go where.

Using Adobe Photoshop, Illustrator, or other graphics software
Most graphics software packages come equipped with all of the basic tools necessary to create wireframes. Simple lines, shapes and text (to label your elements) are all you need to create a presentable wireframe.

Using software created for this type of task
While Photoshop and Illustrator can do the trick, some software packages are developed specifically for this type of work. OmniGraffle is a piece of software that simplifies the creation of wireframes by providing shape, line, arrow and text tools to use on a blank canvas. You can even download custom graphics sets (for free) at Graffletopia, which gives you more elements, such as common web buttons, to work with.

How to Create Website Wireframes

What to Include in a Website Wireframe

Simple wireframe example

All of the important elements of a web page should be represented in your website wireframe. Use simple shapes instead of actual graphics, and label them. These elements include:

• Navigation: Buttons for users to visit the main sections of your site.
• Company logo: Can just be represented by a box.
• Content areas: Where will your different sections of content appear?
• Search boxes
• User login areas

How to Create Website Wireframes

The Focus of Website Wireframes

Website Wireframe

Website wireframes are simple line drawings that show the placement of elements on a web page. You can save yourself a great deal of time by editing the layout of a simple wireframe at the start of the design process instead of a complex design later.

Using wireframes is a great way to begin a web site project, as it allows you and your client to focus on layout without the distraction of color, type and other design elements. Concentrate on what goes where on your web pages and the percentage of space that each element takes up, which can be determined by your client’s needs.

How to Use the Grid System in Graphic Design

A Basic Grid

The grid system in graphic design is a way of organizing content on a page, using any combination of margins, guides, rows and columns. It is commonly seen in newspaper and magazine layout with columns of text and images. One grid, or a collection of grids, may be used across an entire project to achieve a consistent look and feel. In a finished product, the grid is invisible, but following it helps in creating successful print and web layouts.

Types of Grids

There is really no limit to the grid layouts that can be created. Common types include equally sized two, three and four-column grids with a header across the top, as well as a full-page grid of squares. From these building blocks, the variation of column widths, borders, page size and other features of the grid will lead to unique page design. When starting a project or even just practicing, try using a grid system to help position the elements of your design on the page.

Breaking Out of the Grid

Once the grid is established, it is up to the designer when and how to break out of it. This doesn’t mean the grid system in graphic design will be completely ignored. Instead, elements may cross over from column to column, extend to the end of the page, or extend onto adjacent pages. Breaking out of the grid can lead to the most interesting page designs.

_Sources:

_{Jim Krause. “Design Basics Index.” HOW Design Books, 2004.}

The Elements of Graphic Design

The elements of graphic design are used, and often combined, to create graphic works. They should not be confused with principles of design, such as balance and white space, but rather components such as color, type and images. Presented here is a list of the most commonly used elements in graphic design.

Shapes

From ancient pictographs to modern logos, shapes are at the root of design. They are used to establish layouts, create patterns, and build countless elements on the page. With graphics software such as Illustrator, creating and manipulating shapes is easier than ever, giving designers the freedom to create them at will.

• Using Shapes in Graphic Design

Lines

Lines are used to divide space, direct the eye, and create forms. At the most basic level, straight lines are found in layouts to separate content, such as in magazine, newspaper, and website designs. This can of course go much further, with curved, dotted, and zigzag lines used as the defining elements on a page and as the basis for illustrations and graphics. Often, lines will be implied, meaning other elements of design will follow the path of line, such as type on a curve.

• The Grid System
• Creating Wireframes

Color

Color is an interesting element of graphic design because it can be applied to any other element, changing it dramatically. It can be used to make an image stand out, to show linked text on a website, and to evoke emotion. Graphic designers should combine their experience with color with an understanding of color theory.

• Color Models: CMYK
• Color Models: RGB
• The Properties of Color
• Using Color Swatch Books
• Color Separation

Type

Type, of course, is all around us. In graphic design, the goal is to not to just place some text on a page, but rather to understand and use it effectively for communication. Choice of fonts (typefaces), size, alignment, color, and spacing all come into play. Type can be taken further by using it to create shapes and images.

• Type Families
• Typography Terminolgy
• Letter Anatomy
• Top Font Picks

Art, Illustration & Photography

A powerful image can make or break a design. Photographs, illustrations and artwork are used to tell stories, support ideas, and grab the audience's attention, so the selection is important. Graphic designers can create this work on their own, commission an artist or photographer, or purchase it at all price levels on many websites.

• iStock Photo
• Shutterstock
• Veer

Texture

Texture can refer to the actual surface of a design or to the visual appearance of a design. In the first case, the audience can actually feel the texture, making it unique from the other elements of design. Selection of paper and materials in package design can affect actual texture. In the second case, texture is implied through the style of design. Rich, layered graphics can create visual texture that mirrors actual texture.

• Texture in Graphic Design

Sources:

Jim Krause. "Design Basics Index." HOW Design Books, 2004.

Poppy Evans, Mark A. Thomas. "Exploring the Elements of Design" Second Edition. Thomson Delmar Learning, 2008.

Texture in Graphic Design

Actual texture is implied through a layered style.

Texture in Graphic Design – Using Texture in Graphic Design

Texture can refer to the actual surface of a design or to the visual appearance of a design. In the first case, the audience can actually feel the texture, making it unique from the other elements of design. Selection of paper and materials in package design can affect actual texture. In the second case, texture is implied through the style of design. Rich, layered graphics can create visual texture that mirrors actual texture.

Actual Texture

While most elements of design such as color and type are simply seen by the audience, people can actually feel texture. The most common instance of this is with paper. The feel and weight of paper can significantly impact the perception of a design, making the designer’s selection a crucial decision. Business cards or brochures on a heavy weight paper may be seen as more professional than those on a lighter weight. A promotional piece on newsprint may cost less, but also bring about a desired feel of a grassroots campaign. Budget comes into play here as high quality paper can greatly increase the cost of a project, so it is important to find the balance between cost and the image you are trying to achieve.

Texture is also a key element in packaging. The feel and weight of the metal, plastic, glass and other materials that make up packages affect the consumer’s opinion of a product.

Visual Texture

Texture can also be simulated through the style of a design. Layers of text, shapes and lines can bring about the feeling of texture on a page or on screen. Photography, illustration, and fine art combined with graphic elements can also help to achieve the appearance of texture. Commonly, photographs of an actual surface such as paper are used as backgrounds in a design. Modern design software such as Photoshop makes experimenting with layers and visual texture easy.

Sources:

Poppy Evans, Mark A. Thomas. "Exploring the Elements of Design" Second Edition. Thomson Delmar Learning, 2008.

Using Shapes in Graphic Design

Shapes are at the root of graphic design. They are figures and forms that make up logos, illustrations and countless other elements in all types of designs.

Using Shapes

Using shapes properly is one of the keys to successful graphic design. The form, color, size and other characteristics for the shapes in a layout can determine its mood and message. Soft, curved and rounded shapes are perceived differently than sharp, angled shapes. The “white space” or negative space left between shapes will also significantly impact a design. Experimentation and altering of shapes within a design can ultimately lead to the desired result.

Shape Creation in Modern Graphic Design

Current graphics software has transformed the way graphic designers can deal with shapes. Adobe Illustrator is the most useful tool for shape creation and manipulation. Simple shapes such as circles, squares and triangles can be created with a click and drag of the mouse. Adjusting lines and curves using the tools in Illustrator and similar programs can create more complex shapes, of limitless dimensions. Colors, patterns, opacity and other characteristics of shapes can easily be altered. It is important for designers to master the shape tools within their favorite software, as almost any shape that can be imagined can now be created.

Design

From Wikipedia, the free encyclopedia

All Saints Chapel in the Cathedral Basilica of St. Louis by Louis Comfort Tiffany. The building structure and decorations are both examples of design.

All man made products are in some way designed. Above is Poul Henningsen's PH5 lamp, designed in 1958.

Design, when applied to fashion, includes considering aesthetics as well as function in the final form.

Design is used both as a noun and a verb. The term is often tied to the various applied arts and engineering (See design disciplines below). As a verb, "to design" refers to the process of originating and developing a plan for a product, structure, system, or component with intention. As a noun, "a design" is used for either the final (solution) plan (e.g. proposal, drawing, model, description) or the result of implementing that plan in the form of the final product of a design process. This classification aside, in its broadest sense no other limitations exist and the final product can be anything from socks and jewellery to graphical user interfaces and charts. Even virtual concepts such as corporate identity and cultural traditions such as celebration of certain holidays are sometimes designed. More recently, processes (in general) have also been treated as products of design, giving new meaning to the term "process design".

The person designing is called a designer, which is also a term used for people who work professionally in one of the various design areas, usually also specifying which area is being dealt with (such as a fashion designer, concept designer or web designer). Designing often requires a designer to consider the aesthetic, functional, and many other aspects of an object or a process, which usually requires considerable research, thought, modeling, interactive adjustment, and re-design.

Being defined so broadly, there is no universal language or unifying institution for designers of all disciplines. This allows for many differing philosophies and approaches toward the subject. However, serious study of design demands increased focus on the design process.

Graphic design

From Wikipedia, the free encyclopedia

Graphic symbols are often utilitarian and anonymous,^[1] as these pictographs from the US National Park Service illustrate.

term graphic design can refer to a number of artistic and professional disciplines which focus on visual communication and presentation. Various methods are used to create and combine symbols, images and/or words to create a visual representation of ideas and messages. A graphic designer may use typography, visual arts and page layout techniques to produce the final result. Graphic design often refers to both the process (designing) by which the communication is created and the products (designs) which are generated.

Common uses of graphic design include magazines, advertisements, product packaging and web design. For example, a product package might include a logo or other artwork, organized text and pure design elements such as shapes and color which unify the piece. Composition is one of the most important features of graphic design especially when using pre-existing materials or diverse elements.