Skip to content

Chapter 7 of 7

Design Process, Tools, and User Experience

Behind every finished design is a process — research, sketching, iteration, and refinement — supported by specialized tools that translate ideas into deliverables. Whether working on a poster, a website, or a mobile app, designers follow a recognizable workflow that moves from understanding the problem to testing the solution.

The process often begins with a design brief, a document outlining the project's objectives, target audience, deliverables, timeline, and constraints. It serves as a roadmap that aligns the designer and client on expectations before work begins. Moodboards help translate the brief into a visual direction: collages of images, colors, textures, and typography that capture the intended look and feel. From there, designers explore ideas through thumbnail sketches — small, rough drawings used to test multiple layouts quickly. As the work matures, fidelity increases. Wireframes are low-fidelity layouts that outline structure and content hierarchy without colors, typography, or imagery. Mockups are high-fidelity, realistic representations of how the design will appear in its final form, often shown applied to products, packaging, or device screens. Prototypes go a step further, simulating interactivity so users can click through screens and experience the flow before development begins. A style tile is a related deliverable that communicates visual direction — fonts, colors, interface elements, textures — without committing to a full mockup, bridging the gap between moodboards and complete comps.

Specialized tools support each stage. Adobe Photoshop is the industry standard for raster image editing, excelling at photo retouching, compositing, color correction, and digital painting. Adobe Illustrator is the standard for vector graphics, used to create logos, icons, illustrations, and scalable typography. Adobe InDesign handles multi-page layouts like magazines, books, and brochures, combining text and images with precise typographic control. Figma is a browser-based collaborative tool that has become the leading platform for UI/UX design, prototyping, and design systems, prized for its real-time collaboration and component-driven workflow. Sketch, an early macOS pioneer in symbols and reusable components, remains widely used for interface design, though Figma has gained significant market share. Canva offers a web-based, template-driven platform aimed at non-designers and small businesses, providing drag-and-drop tools for social media graphics, presentations, and basic marketing materials.

Modern design also requires fluency in user experience. UI (User Interface) design focuses on the visual appearance and interactive elements of a product — buttons, icons, and layouts. UX (User Experience) design focuses on the overall feel and usability, encompassing research, information architecture, and user flows. Responsive design ensures layouts adapt fluidly to different screen sizes and devices through flexible grids, fluid images, and CSS media queries. A design system is a comprehensive collection of reusable components, guidelines, patterns, and standards that ensure consistency across a product or brand; Google's Material Design, Apple's Human Interface Guidelines, and IBM's Carbon Design System are well-known examples. In web design, calls to action (CTAs) are buttons or links that prompt specific user actions like "Buy Now" or "Sign Up," made effective through contrast, clear copy, and prominent placement. The principle of Occam's Razor reminds designers throughout this process that the simplest solution is usually the best: unnecessary elements and decorations should be eliminated so that clean, focused design communicates more effectively than cluttered work. This balance of simplicity, intentionality, and systematic thinking is what separates thoughtful design from decoration.

All chapters
  1. 1The Elements of Design
  2. 2Principles of Design
  3. 3Composition, Layout, and Spatial Design
  4. 4Typography
  5. 5Color, Branding, and Identity
  6. 6Digital File Formats, Resolution, and Vectors
  7. 7Design Process, Tools, and User Experience

Drill it

Reading is not remembering. These come from the Graphic Design Principles deck:

Q

What are the seven elements of design?

The seven elements are Line, Shape, Form, Texture, Space, Color, and Value. These are the fundamental building blocks used in every visual composition, from pai...

Q

What is the element of line in design?

A line is a mark connecting two points. Lines can be straight, curved, thick, thin, dashed, or implied. They guide the eye, create shapes, define boundaries, co...

Q

What is the element of shape in design?

A shape is a two-dimensional enclosed area defined by line, color, value, or texture. Shapes are classified as geometric (circles, squares, triangles) or organi...

Q

What is the element of form in design?

Form is a three-dimensional shape with volume and depth (height, width, and depth). In 2D design, form is implied through shading, perspective, and overlapping....