Guides
14 guides on ux design. Practical writing from the team building Atlas, useful whether or not you buy anything.
A wireframe shows a screen; a storyboard shows a life. Telling the story of a user's experience in context reveals whether a design solves a problem that actually matters to them.
A wireframe shows structure, but structure alone leaves questions. Annotations answer them: carrying the behavior, rules, and intent that the boxes cannot, without cluttering the design.
The gap between a finished design and working software is where intent gets lost. Diagrams close that gap by communicating structure, behavior, and edge cases developers cannot see in a mockup.
A customer journey shows what users experience. A service blueprint shows everything behind it that makes the experience happen: the frontstage, the backstage, and the line between them.
A flat backlog hides the shape of the product. User story mapping arranges the work into a story users can follow, so the team sees what to build, why, and in what order.
A site map diagram is the blueprint of a whole product on one page. It shows every screen and how they connect, so the team can agree on structure before anyone builds a thing.
Information architecture decides whether users can find anything. An IA diagram makes the structure of your content and navigation visible so you can get it right before building.
A UX flow diagram turns a product from a pile of screens into a journey you can reason about. Mapping the paths reveals the dead ends and detours that break the experience.
A mobile app lives on a small screen driven by thumbs, and wireframing for it is its own discipline. This guide covers screens, flows, and the patterns that make an app feel native.
A website wireframe settles structure before anyone argues about color. This is the step-by-step process for going from a blank page to a set of screens you can build on with confidence.
Wireframe, mockup, and prototype get used interchangeably and should not be. Each answers a different design question, and using the wrong one wastes effort: this guide draws the lines clearly.
A user flow diagram maps the actual paths people take through your product to accomplish a goal. Drawn honestly, it exposes friction and dead ends before your users find them.
Lo-fi and hi-fi wireframes are not competing styles; they are different tools for different moments. Choosing the wrong fidelity is one of the most common and costly design mistakes.
A wireframe is a deliberately plain blueprint of a screen. Its plainness is the point: it forces everyone to argue about structure and priority before anyone falls in love with a color.
Ready when you are
Atlas brings tasks, projects, CRM, contracts, e-signature, PDF tools, and analytics into one workspace. Start free.