How to Wireframe a Website in Excalidraw (Product Page)
Sketch a website wireframe in Excalidraw before anyone builds it. Draw a header, a photo placeholder, a title and price with the text tool, a button, then save the button to your library and reuse it, on a made-up online shop product page.
Step by step
Why wireframe
- Wireframes for BAs. A rough wireframe settles more questions in a workshop than a page of requirements. Excalidraw keeps it rough on purpose, so nobody argues about colours. Here's the product page we'll sketch.
- excalidraw.com. Open excalidraw.com with an empty canvas.
Page layout
- Header. Start with the header. A long, thin rectangle across the top, with the logo, search and cart.
- Photo. A big box on the left is the product photo. Just write what goes there.
Text
- Text tool. For plain text, pick the text tool, choose a large size, click and type. Blue rain jacket. Switch back to the medium size for the price under the title.
- Button. Buttons are small rectangles with a label. Add to cart.
- Details. A box for the product details under it. Press Enter for each new line.
Buttons and library
- Main action. Give the main button a green background, so it reads as the main action.
- Library. You'll draw buttons on every screen. Select it, open the library on the right and click the plus. Then click the item to drop a copy, and drag it into place. Change the copy's label. Save for later.
- The finished wireframe. Click an empty spot to see the whole page. Header, photo, title, price, two buttons and the details.
Recap
- The rules. So, boxes for areas, the text tool for words, and the library for anything you draw twice. Keep it grey and rough, and save colour for the main action. Subscribe for more Excalidraw tips for business analysts.
