Sketch

As explained in Web Design Playground

A rough preliminary drawing or outline used to plan the structure and placement of content.

A sketch is a quick, rough plan for a web page. Before writing HTML and CSS, use pencil and paper to move the design from your head onto a surface you can inspect and change. section 5.2 section 10.2

Keep the sketch simple:

• Draw the page's main sections. section 5.2
• Mark each section's approximate location and size. section 15.3
• Add a phrase describing the content each section will contain. section 10.2
• Use the result to plan typefaces, colors, and the initial HTML and CSS structure. section 10.70

A quick page sketch

For a photo gallery, draw a header with the logo and title, a navigation area, a main area for image thumbnails, and a footer with copyright and social links. The drawing only needs to show the page's rough arrangement and contents. section 15.3

Use the figure as a visual model for a rough layout sketch before coding. section 5.2

How Web Design Playground covers it

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 it assumes

Assumes only a writing surface and a page idea, while introducing layout planning before coding.

What you can do after

Build a clearer initial page structure by sketching sections before choosing styles and writing markup.

How it connects

Connects page layout with HTML, CSS, typefaces, color schemes, and responsive section styling.

liveBookmanning.com

Read Web Design Playground on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Everyday Data VisualizationSketching is the practice of quickly recording visual ideas in a low-fidelity form before committing to development.

Compare how 2 books explain sketch →

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.

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground. The section links point to the parts of the book it draws on.