Intro to Digital Graphic Design: What Every Beginner Needs to Know

Graphic design has its own vocabulary, and it's easy to feel lost in the terminology before you've even opened a tool. This guide explains the fundamental concepts — not the theory, but the practical things that affect every file you create.

The two worlds: raster and vector

Everything in digital design comes back to this split.

Raster graphics are made of pixels — grids of colored squares. Photos, screenshots, and most images from the web are raster files. They look great at their native size, but scale up and they blur.

Vector graphics are made of mathematical paths — curves and shapes defined by coordinates and equations. Logos, icons, and illustrations made in design software are vector files. They scale infinitely without losing quality.

Most design work uses both. A website layout might have a vector logo, vector icons, and raster photographs. Knowing which type you're working with — and when to convert between them — is a foundational skill.

Color modes: RGB vs CMYK

RGB (Red, Green, Blue) is how screens produce color. Mixing red, green, and blue light creates all visible colors. Your monitor, phone, and TV all use RGB. Design for screens in RGB.

CMYK (Cyan, Magenta, Yellow, Black) is how printers produce color. Inks are mixed on paper. Design for print in CMYK, or at minimum convert to CMYK before sending files to a print vendor.

The problem: RGB and CMYK don't map perfectly. Some vivid screen colors — particularly bright blues and greens — can't be reproduced in print ink. If you design in RGB and print in CMYK, colors may shift. Professional print workflows always include a CMYK proof step.

For beginners: Design everything in RGB unless you're specifically producing for print. Convert to CMYK as a final step if needed.

Resolution and DPI

Resolution describes how many pixels are packed into a given space.

72 PPI (pixels per inch) is the historical screen standard. Web design at 72 PPI looks fine on standard screens.

144+ PPI is what modern "retina" and high-DPI screens need. A logo designed at 72 PPI will look blurry on a MacBook Pro. Solution: use SVG (which has no pixels and therefore no resolution limit), or design raster assets at 2×–3× the display size.

300 DPI is the print standard. A business card at 3.5×2 inches requires a 1050×600 pixel image at 300 DPI. Anything lower will print blurry.

Practical rule: Design vector (SVG) whenever possible. For raster, design at 2× the final size for screens, 300 DPI for print.

The core tools

Figma is the dominant web and UI design tool. Free tier is genuinely useful. It works in a browser, supports vectors and raster, has excellent collaboration, and exports to SVG, PNG, and more. Start here if you're new to design.

Adobe Illustrator is the industry standard for vector illustration and logo work. Expensive, but the most capable vector tool available. If your work involves complex illustrations or you need to match industry workflows, it's worth learning.

Inkscape is a free, open-source alternative to Illustrator. Not as polished, but fully capable for most vector work. A good starting point if budget is a constraint.

Adobe Photoshop is the standard for raster image editing — photo retouching, compositing, texture work. Figma has replaced it for UI design, but Photoshop still owns photo editing.

GIMP is the free, open-source equivalent to Photoshop. Less polished, but capable for most raster editing needs.

File formats for your output

| Use case | Format | |---|---| | Logo (scalable, recolorable) | SVG | | Logo (flat, email-safe) | PNG-24 | | Web photograph | WebP or JPG | | Web graphic with transparency | PNG or WebP | | Print file | PDF (with embedded fonts/assets) | | Social media image | JPG or PNG at platform-specified dimensions |

Typography basics

Type is half of most designs. Two things matter most to beginners:

Font pairing: Use at most two typefaces — one for headings, one for body text. A serif and a sans-serif, or a display font with a neutral sans-serif, are reliable combinations.

Hierarchy: Size, weight, and color signal importance. The most important element should be visually dominant. Subheadings should be clearly subordinate to headings. Body text should be legible without straining.

Avoid using more than three font sizes on a single layout until you're comfortable.

Spacing and alignment

Consistent spacing makes designs feel professional. Inconsistent spacing makes them feel amateur, even when every other element is correct.

Work on a grid. Figma, Illustrator, and most design tools have grid and guide systems. Align elements to the grid. Use multiples of a base unit (8px is common) for margins, padding, and component spacing.

Where to go from here

The fastest way to improve is to study work you admire. Open a website or app you think looks good, screenshot it, and annotate it — identify the grid, the type scale, the color palette, the hierarchy. Then try to recreate a simplified version.

For vectors specifically: any SVG you download can be opened in Figma or Inkscape and examined path by path. This is one of the best ways to understand how professional vector files are structured.