> For the complete documentation index, see [llms.txt](https://docs.launchboard.app/cxd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.launchboard.app/cxd/intro-to-informatics-and-web-development/3-2-sketching-interfaces.md).

# 3-2 Sketching Interfaces

Sketching is a powerful activity for many reasons. It is a quick and inexpensive way to visualize ideas and discuss ideas with others. Sketches can easily be annotated or altered as needed, allowing for rapid experimentation.

![](https://3718926237-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDgX-RgU994GjN7nvcR%2F-LDgX6N0pHKbYL1KWUWR%2F-LDgX7H3MrrrSHYmuXSN%2Fsketch.png?generation=1527608018791287\&alt=media)

We are going to practice sketching a few web interfaces. **It is important to understand that you do not need to be an artist to sketch.** It is not a competition on how pretty the sketch is, but on how well it explains an idea. While there are few, if any, particular rules on how to create interface sketches, here is a video on sketching the parts of interfaces to get you started.

Also, take a look at [this short slide set](https://docs.google.com/presentation/d/1gYXSzIRncpgtbSwgZu3nfoUfRhnAWd-_r162-5XVwMA/edit?usp=sharing) demonstrating the progressive building of a sketch.

## Standard Deliverable ✓

Choose two web sites or mobile apps to sketch. Start with a rectangle to outline the screen and draw the basic structure of the site depicting the major elements of the page. Visually differentiate elements so that someone could tell the difference between things like the Title, Navigation, Headings, Paragraphs, Buttons, Images, Videos etc.

Take a photograph or scan of your sketches for submission.

## Advanced ✓+

Choose one of your sites and create a simple ‘interface storyboard’ of three linked pages similar to [this linked example sketch](http://courses.csail.mit.edu/6.831/wiki/images/thumb/a/a8/MOD-Storyboard-4.png/300px-MOD-Storyboard-4.png). Add this to your document.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.launchboard.app/cxd/intro-to-informatics-and-web-development/3-2-sketching-interfaces.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.