Giter VIP home page Giter VIP logo

microframe's Introduction

Microframe Template

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

  1. A Microframe PSD Template with a 12 column grid and 3 sample layouts (12 column, 6 column, and 4 column layouts).
  2. A Blank Microframe PSD Template with 12 column grid (empty so you don't have to delete layers every time).
  3. 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).

Sample Microframe Detail Image Sample Microframe Responsive Views Image

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.

microframe's People

Contributors

jglovier-okta avatar

Watchers

mntz avatar James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.