Mockups To Go

A user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups.

Browser at 1024*768 with 960 grid included

Contributed by Olivier Obuchowski

This is a browser sized for a 1024*768 resolution.

It is made so that the “real” space available (without the scrolling bar) is 998 pixel wide.

This correspond to the  Web Safe Area as described on this website: http://www.designerstoolbox.com/designresources/safearea/

I also included a 16 columns grid (960.gs) which fits perfectly in it.

Whenever I start a new web mockup, I just start with this, ungroup the grid (so that the other components snap to it) and block everything.

It saves me a bit of time each and every time and I’m sure my mockups fits correctly.

Click here to download:
16col960grid_1024x768.bmml (7 KB)

Browser Controls At Standard Sizes

Contributed by Peldi of Balsamiq.

Eric S. asked how to resize Browser controls to standard sizes here, so I thought I'd share them here.

What I did was to create two Rectangle controls, size them with the "position and size" property inspector, then put two Browser windows below them, so that the inside of the browsers would match the rectangles.

The result is below, ready for your copying/pasting pleasure.

Click here to download:
standardbrowsersizes.bmml (1 KB)

960 grids centered in browser

Contributed by Benjamin Gray - http://www.theworldallaround.com

 A starting point for those designing against the 960.gs grid system.

 (re-posted by Peldi so that it no longer use an image)

Click here to download:
960grid.bmml (11 KB)

960 Grid System (revised)

Contributed by Derek McLoughlin

This template fixes minor problems with Peldi's original one - the grid sizes are now 60 pixels (12 col) and 40 pixels (16 col) with spacing of 20 pixels in each.

Click here to download:
960grids.bmml (11 KB)

Blueprint CSS Grid

Contributed by Geoffrey Dagley

Grid based on the Blueprint CSS framework, 950px wide with 24 columns.

Click here to download:
blueprintcss.bmml (9 KB)

YUI Grids

Submitted by Marco and Peldi of Balsamiq.
 
The YUI Grids, but done in Balsamiq Mockups.
 
http://developer.yahoo.com/yui/ for more info.

Click here to download:
YUI_grids.bmml (34 KB)

960 Grids

Contributed by Peldi upon request by Andraz Kozelj.
 
Two grouped grids. Both 960px wide, one with 12 columns and one with
16. Based on Nathan Smith's 960.gs work.

Click here to download:
960grids.bmml (11 KB)