Design Jargon for beginners

CMYK

CMYK = Cyan, Magenta, Yellow, Black (K) — this is the four colors used in offset printing. Each color is traditionally printed on a separate color plate, with a different screen rotation. When layed or printed on top of each other it forms a dot pattern seen in printing. Think Lichtenstein prints where pictures are made up of dots. The dot pattern can be seen with a tool called a loupe.

The CMYK model is based on the light-absorbing quality of ink printed on paper. As white light strikes translucent inks, part of the spectrum is absorbed and part is reflected back to your eyes.

In theory, pure cyan (C), magenta (M), and yellow (Y) pigments should combine to absorb all color and produce black. For this reason these colors are called subtractive colors. Because all printing inks contain some impurities, these three inks actually produce a muddy brown and must
be combined with black (K) ink to produce a true black. (K is used instead of B to avoid confusion with blue.) Combining these inks to reproduce color is called four-color process printing. We recommend the CMYK model for all, full-color images.


RGB

RGB = Red Green Blue. Which is used in screen (web, presentations, LED light shows/projections or anything not printed on an offset printing press)

The RGB color model is an additive color model in which redgreen and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.

The main purpose of the RGB color model is for the sensing, representation and display of images in electronic systems, such as televisions and computers, though it has also been used in conventional photography. Before the electronic age, the RGB color model already had a solid theory behind it, based in human perception of colors.

RGB is a device-dependent color model: different devices detect or reproduce a given RGB value differently, since the color elements (such as phosphors or dyes) and their response to the individual R, G, and B levels vary from manufacturer to manufacturer, or even in the same device over time. Thus a RGB value does not define the same color across devices without some kind of color management.

Typical RGB input devices are color TV and video cameras, image scanners, and digital cameras. Typical RGB output devices are TV sets of various technologies (CRT, LCD, plasma, OLED, quantum dots, etc.), computer and mobile phone displays, video projectors, multicolor LED displays and large screens such as JumboTron. Color printers, on the other hand are not RGB devices, but subtractive color devices (typically CMYK color model).


SPOT Color

A spot color is custom mix of ink/color that is printed on it’s own color separation plate. It can also be a varnish or gloss plate.


More Jargon coming soon….

UX Design Notes:

UX Design is all about iteration, and design that thinks about humans first. The different problems that a design can solve and ways that people interact that will make the best product.

  1. user research
    qualitative and quantitative. what the competition has and doesn’t have
  2. analysis
    looking at data and desciding on direction
  3. design (wireframe)
    does it fit on a mobile device?
    does it work in touch mode?
  4. prototype
    implementation of idea. do people understand and want to use it?
  5. user testing
    evaluating user feedback

Wireframing

What is a wireframe? It’s a skeletal 2D model using lines boxes to represent an image or set of images which displays the functional elements of a website or page / app, which is typically used for planning a site’s structure ad functionality.

A tool  for communication of a mockup.

Why spend time wireframming?

It’s easy
  • anyone can do it
  • even advanced wireframing techniques are easy to pick up
User testing
  • can show high or lo-fi frames to get users to understand your idea early on
  • participants can still behave the same way as the would with the real product
  • Return on Investment can be in the millions of dollars. Better to learn on paper before sinking money into rebuilding it.
To communicate ideas
  • its easier to show than to tell
  • doing the thing is the thing, not talking about doing the thing.
To try new ideas
  • it’s cheap & easy to try wild things
  • you can try multiple ideas, because your first idea may not be the best idea.
To narrow down ideas to the best one
  • you can see why some ideas may not work
  • can stat to visualize concepts and interaction problems and make solutions
  • you can get feedback quickly and easily.

 

 

 

 

 

Strong Brand Identity

Why it matters

  • A solid brand influences buying decisions
  • creates trust & emotional attachment
  • fences off your customers from competitors
  • communicates a consistently strong message
  • Better articulate’s your value and differentiation

Build a strong brand

  • starts with a quality product or service.
  • develop attributes for your brand to evoke a response
  • build and market “the image”
  • keep your promises
  • measure, build & continue the refinement

File Formats & Descriptions

EPS  (Vector File)

Encapsulated PostScript (EPS) language file format can contain both vector and bitmap
graphics and is supported by virtually all graphic, illustration, and page-layout programs. EPS
format is used to transfer PostScript-language artwork between applications. We recommend
EPS graphics for vector and bitmap images.


TIFF

Tagged-Image File Format (TIFF) is used to exchange files between applications and computer
platforms. TIFF is a flexible bitmap image format supported by virtually all paint, image-editing,
and page-layout applications. Also, virtually all desktop scanners can produce TIFF images. We
recommend TIFF graphics for bitmap images.


JPEG

Joint Photographic Experts Group (J PEG) format is commonly used to display photographs and
other continuous-tone images in hypertext markup language (HTML) documents over the World
Wide Web and other online services. JPEG format supports CMYK, RGB, and Grayscale color
modes, and does not support alpha channels. Unlike GIF format, JPEG retains all color
information in an RGB image but compresses file size by selectively discarding data. Due to the
fact the the JPEG format discards data, we do not recommend it for any images. If you must use
the JPEG format, please make sure all quality settings are at their maximum and the resolution is
at least 300 dpi.


BMP

BMP is a standard Windows image fonnat on DOS and Windows-compatible computers. BMP
format supports RGB, Indexed Color, Grayscale, and Bitmap color modes, and does not support
alpha channels. We DO NOT recommend the BMP format for any images.


PICT

PICT format is widely used among Mac OS graphics and page-layout applications as an
intermediary file format for transferring images between applications. PICT format supports
RGB images with a single alpha channel, and indexed-color, grayscale, and Bitmap-mode
images without alpha channels. PICT format is especially effective at compressing images with
large areas of solid color. This compression can be dramatic for alpha channels with their large
areas of white and black. We DO NOT recommend the PICT format for any images.


GIF

Graphics Interchange Format (GIF) is the file format commonly used to display indexed-
color graphics and images in hypertext markup language (HTML) documents over the World
Wide Web and other online services. GIF is an LZW-compressed format designed to minimize
file size and electronic transfer time. GIF format preserves transparency in indexed-color images;
however, it does not support alpha channels. We DO NOT recommend the GIF format for any printed images.

IMAGE RESOLUTION & FILE SIZES

The quality or “resolution” of the images is important – if it’s too low, your pictures look blurry or be pixelated.
If it’s too high, your file may be too large to upload or take too long or a lot of bandwidth to download.

For best results, it is recommended that images are a minimum of 240dpi but no more than 300dpi.

  • To get the best quality, start off with the largest scanned or downloaded version you can
  • Check your image at 100% on screen to get a good idea of how images will look when printed.
  • If they look clear on the screen they should be clear in print

DPI mean Dots Per Inch, which is the amount of dots per inch of resolution in an image. A higher number of DPI will translate into a larger image file size.

300 DPI is the standard minimum for printing an image on an offset printing press.

72 DPI is the standard for a web image, although that is changing with higher resolution screens such as Apple’s iphone retina displays.


WHAT IS IMAGE RESOLUTION?

The number of pixels per inch in a picture is know as its resolution (or ‘res’ for short). If you zoom into any picture on your computer screen, you can see that it’s made up of pixels (small squares). The higher the number of pixels, the higher the dots-per-inch (aka dpi or resolution)

Low-res images can look blocky, pixelated or blurry on screen and in print, like this:


ENLARGING IMAGES

Whenever you make a picture bigger, you reduce the resolution. The pixels in the picture have to be stretched over a larger area, so if you start off with a picture at 150dpi and you make the picture twice as big, it will end up as 75dpi (half the resolution).

If you want to have a large picture in your newspaper, you need to start off with a higher resolution image. For example, if you start off with a 300dpi image, and enlarge it to twice its size, the resolution will be halved to 150dpi – which is fine for newspaper printing.


SCANNING

Lots of scanners give you the option to scan at 75dpi, 150dpi, 300dpi, 600dpi or higher. This means you can scan a fairly small picture (maybe an old photograph) and enlarge it, without the resolution going below 150dpi.

If you scan in at 300dpi, you can enlarge the image to twice the size and it will still be 150dpi, enough for newspaper printing. If you want to enlarge your picture more, scan at a higher resolution, for example 600dpi.


USING PICTURES FROM THE INTERNET

Pictures on websites are usually low-res (around 72dpi) as this helps a web page to load more quickly. If you try to enlarge a small image taken from the internet, you can quickly end up with a very low-res image, which won’t look good in print. If you do want to use pictures from the internet, try to find the largest versions you can. Once you’ve put your newspaper together, you can check how the pictures look by viewing your PDF at 100% on screen. This gives a good indication of how things will look in print. Our online checker will also pick up any low-res images when you upload a file for printing.


TEXT

We don’t recommend saving text as an image file (eg JPEG or GIF) as it won’t print as clearly as text rendered in ARTHR.

Textjpeg1

If you do want to save text as an image file, or if you have maps, or diagrams that are JPEGs, GIFs etc, it’s really important that you save them at the highest quality you can, so that the text is readable. If saving as a JPEG, make sure that you put the quality up to 100%, and remember, if you enlarge an image you’re going to reduce the dpi (quality) and the readability of the text.

Text saved as a low res JPEG, GIF etc will look blurry or pixelated in print:

If you save text as a JPEG, it can appear with a ‘halo’ around it, and look a little fuzzy. Again, make sure you save it at the highest quality to reduce this effect.