This Wireframe Kit is initially inspired by the this website which provides a “color block” based mockup. For example:

ColorBlock mockup example from <code></code>” /></p><p>This toolkit aims to help facilitate the building process of this kind of mockup.</p><div id=

Table of Contents

Wireframe Kit Contents

The current toolkit includes the following components:

  • Flat UI Color Palette
  • OmniGraffle Stencil
  • OmniGraffle Example

Flat UI Color Palette

The Flat colors collected are from the project Bootflat.

Flat Color Palette

It has the following formats:

  • Srouce file (.cs) from the Mac App ColorSchemer Studio 2.
  • Export version (.clr), used by the Mac system. Once it is imported, it can also be used inside OmniGraffle.

From the source file, it can be also easily exported into other formats like ASE, AI, CSS, PNG, etc.

OmniGraffle Stencil

The stencil includes the basic elements that are usually used in this “block mockup” process.

  • Basic Frames for web and mobile.
  • Buttons
  • Content Blocks
  • Layout Components

It also include all color pickups just in case.

OmniGraffle Examples

Inside the stencil file, it also includes several examples which are built right upon this stencil.

Here is the example copied from

FlatBlock - Full Stack Example

Here is another example for mobile only.

FlatBlock - Mobile Layout

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>