3.7 DESIGNS : Workshop

From time to time we develop tools for web design and development that improve our process and efficiency. Rather than being greedy bastards and keeping them to ourselves we feel that others may also find use in them, and offer them up for download and use here. These are completely open source so feel free to use them as you wish as long as you don't repackage or sell them for profit. If you have any questions, improvements or ideas we would love to hear them.

CSS Style Guide

Style Guide

If you are one of the many developers who use a CSS reset, and/or provide content management systems then this tool is for you. Use this style guide to ensure the most common HTML elements have proper styling. It is easy to forget to style an HTML element, only to find a client has later used it on a page. This of course results in design elements that don't fit.

Mockup Present

Mock Present

Presenting your web design mockups in an efficient way has always been difficult. The problem with printing them out or simply sending JPG's via e-mail is that it isn't an accurate representation of what the design will actually look like with in a browser. The solution is to code them into an HTML document and let the client view and review them online. This has always been more time consuming and clunky than it should be.

Mockup Present fixes this by providing a framework for easy navigation, integration and coding.

Photoshop Grid

Photoshop Grid Template

A Simple 960px grid template for photoshop that easily allows you to divide up columns, see where the fold area is and ensure that you realize that the viewport may be different for different monitors.