Microframe Template

Microframe is a micro (200px wide), grid based wireframe PSD template for mocking up website and app layouts. The repo includes:

A Microframe PSD Template with a 12 column grid and 3 sample layouts (12 column, 6 column, and 4 column layouts).
A Blank Microframe PSD Template with 12 column grid (empty so you don't have to delete layers every time).
A Microframe Detail PSD Template which you can place your Microframe PSDs in to explain/present to clients, or simply detail components for your own reference. The Detail PSD also has a view for laying out your layout variations (as seen in the two screens below).

Features

Grid Based

The PSD uses guides to create a 12 column grid which you can use to align your elements all pertty like.

Includes 3 Layouts for Responsive Designs

There is a 12 column layout (for standard laptop/desktop views), a 6 column layout (for tablet views), and a 4 column layout (for mobile views). Each layout is grouped into a Photoshop group.

Questions

Why Should I Wireframe?

Because it helps you isolate the abstract challenges of layout design from the aesthetic details of UI design. If you really want to know more about why I'm a big proponent of wireframing as the second or third step (markerboard and/or pencil and paper should always come first), read Markerboard Mentality.

Why Do I Need Your Template?

To save you time.

Why Is It Micro?

Great question. I've simply found that working in very small pixel units helps me to focus on the overall layout more than nudging pixels one way or another. Also because it makes creating SASS forumulas for percentage width layouts really simple. ;-)

Should I Modify The Template?

Yes! It includes a sample layout to get you started, just so you get a feel for how to use the thing. But once you grok that just delete all the layers that you don't want and just start using the space to create your own layout.

You also might want to save out a blank copy as your own template. Then, each time you go to start a new project open your personalized starter template, save a copy of it for your new project, and start laying out your page elements for that project.

Can I Fork Your Repo?

Um, yes! That's how this open source stuff works, my friend. Please fork and make it your own, or make it better and share with the world!

Can I Submit Issues or Feature Requests?

Yeah buddy! Just use the repo issues tracker and I'll address things as I am able.

License

jglovier/microframe

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Error
Looks like something went wrong!

Packages