Wireframe Tiles

Lay out responsive wireframes for everything from blogs and landing pages to apps and dashboards using flexible tiles.

Building blocks for your ideas

I loved playing with blocks as a kid. (In fact, I still do.) Even with a limited set of basic components, it felt like I could build almost anything. I think that’s why I love patterns and design systems just as much. By distilling each component to its essence and finding ways to make it flexible and reusable, it feels like those powerfully simple blocks all over again.

I built the Wireframe Tiles library as a reusable, responsive, and flexible set of interchangeable blocks that you can use to quickly mock up almost any concept, from basic content sites up to complex, interactive apps. These tiles aren’t meant to replace your final design, but they’re a great way to start the conversation about what’s important and where it belongs.

Tiles of all kinds

Animation:
Content

From text and tables to events and ecommerce

Animation:
Forms

For logging in, sending messages, and more

Animation:
Media

From audio and video to all kinds of images

Animation:
Widgets

To capture various interactive components

Animation:
Data

For charts, graphs, numbers, and more

Animation:
Social

From profiles and comments to feeds and chat

Featuring …

60 Unique tiles
13 Responsive bars
43 Custom icons
Possibilities

Through the magic of Sketch symbols

Responsive by design

Each tile is painstakingly designed using Sketch’s built-in smart resizing tools so that it can be scaled from 320 pixels wide to as wide as you like. Individual elements are positioned and sized appropriately to fit the right context.

Animation: A map tile is resized from 320 pixels wide to 960. The map scales outward, but the icons remain fixed in size.
Animation: A user changes symbol overrides to change the colors of a donut chart from shades of grey to blue, green and yellow, then changes the overall symbol background color from white to a light grey.

Flexible by nature

The tiles make use of Sketch’s symbol overrides to allow deep customization. You can change colors for individual elements, change border colors and backgrounds for the tile, choose alignment on text placeholders, and even swap between icons. This flexibility makes even the simplest tiles powerfully reusable.

See it in action

wireframe-website
wireframe-website
wireframe-website
wireframe-website

Like what you see?

There’s more where that came from. Lots more! The UX Compendium is a cohesive collection of useful templates and libraries for Sketch to round out your design process beyond the UI.

Buy it now Learn more

Explore the rest