Engineering ReferenceEngineering Reference

Graphic Design

On this page

Graphic design uses type, image, color, and layout to communicate ideas. It spans branding, print, packaging, motion, and web — and in engineering contexts, it shapes everything from product labels to HMI screens to technical reports.

Overview

Good design is invisible: it gets the message across before the viewer notices the craft. Bad design fights the reader.

Design Principles

  • Hierarchy — what does the eye see first?
  • Contrast — size, weight, color separate important from secondary.
  • Alignment — every element on a visible grid.
  • Repetition — consistent treatment of similar things.
  • Proximity — group related items.
  • White space — breathing room is content.

Typography

  • Serif (Garamond, Caslon), sans-serif (Helvetica, Inter), monospace (JetBrains Mono).
  • Body text 14–18 px on screen, 9–11 pt in print.
  • Line length 45–75 characters; line height 1.4–1.6.
  • Limit to 2–3 typefaces per piece; pair display + text faces.
  • Use proper marks: — em dash, – en dash, ‘curly quotes’.

Color

  • Color modes: RGB (screen), CMYK (print), Lab (color-managed).
  • Pantone (PMS) for spot color matching.
  • Wheel relationships: complementary, analogous, triadic, split-complement.
  • Accessible contrast — WCAG 2.2 AA = 4.5:1 body / 3:1 large text.
  • 60–30–10 rule for proportion.

File Formats & Prepress

  • Vector — SVG, AI, EPS, PDF (scales without loss).
  • Raster — PNG, JPG, WebP, AVIF, TIFF.
  • Print: CMYK PDF/X-4, 300 dpi at final size, 3 mm bleed, registration marks.
  • Embed or outline fonts; convert spot to process when needed.
  • Color profiles: sRGB (web), Adobe RGB (photo), GRACoL/SWOP (print).

Tools

  • Adobe Creative Cloud — Illustrator, Photoshop, InDesign.
  • Affinity Designer, Photo, Publisher.
  • Figma, Sketch, Penpot — UI / collaborative.
  • CorelDRAW.
  • Free: Inkscape, GIMP, Krita, Scribus.
reference page