Uploaded March 2020 | Updated September 2026, 4 minutes ago

---

Document set up: 00:00:46
Grids & Layout: 00:01:16
Align & Distribute 00:03:30
Placing Elements on a Grid: 00:07:26
Wireframe Tips: 00:07:54
Summary: 00:10:48

- - - -
In this video we’ll create a simple low to mid-fidelity wireframe using Adobe XD.
We’ll apply some really basic layout rules, like setting up grids, using the alignment tools, and distributing space for page elements.
We’ll also use basic shapes as placeholder elements for our wireframe, while applying colour, and labelling our page elements with XD’s text tools.
After completing our wireframe in XD, we can duplicate our layout and use it as a foundation to build our mockups for desktop and responsive layouts.

Exercise Files:
dropbox.com/s/r4cr1duvtr2iaiq/wireframe-mockup-ex-files.zip?dl=0

Music by: Profound Beats (RIP)