Sketch
A sketch is a rough, low-fidelity drawing or outline used to record ideas and plan content structure before development.
Everyday Data Visualization
Sketching is the practice of quickly recording visual ideas in a low-fidelity form before committing to development.
- How it is used
- Uses rough visual exploration to shape design directions before development.
- How deep it goes
- Describes a flexible routine of roughing out, waiting, photographing, comparing, and selecting, without prescribing a formal method.
- Examples
- Uses whiteboards, dry-erase markers, photographs, single-color drawings, and sets of three alternative ideas.
- What you can do after
- Practice/perform rapid visual ideation and compare alternatives before developing a design.
Web Design Playground
A rough preliminary drawing or outline used to plan the structure and placement of content.
- How it is used
- Uses a rough layout plan to guide web-page design before HTML and CSS coding.
- How deep it goes
- Explains sketching through section placement, approximate dimensions, and content labels, then stops before detailed visual rendering.
- Examples
- Uses home pages, landing pages, photo galleries, and portfolio pages with labeled structural sections.
- What you can do after
- Build a clearer initial page structure by sketching sections before choosing styles and writing markup.
Related concepts
- prototypingalternative to · Prototyping is the practice of creating and evaluating a preliminary or partial implementation to explore or validate an idea, design, or approach.
- layoutuses · A layout is the arrangement and positioning of content or interface elements within a page, screen, or other visual area.
- Adobe Photoshopalternative to · Adobe Photoshop is a raster-graphics editing application for creating, manipulating, and compositing digital images.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.

