Freebie for Designers

Hello Designers!

Tired of doing the same things again and again? Why not use my personal Lazy Kit, filled with useful time savers and ‘best practice’ principles. Give it a download and try it on your next website design mock-up.

960 Grid system

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

Web Safe Area

960 x 600

This ‘safe area’ is based on a 1024 x 768 Resolution and applies to maximized browsers (in their standard UI configuration, e.g. no Google toolbar etc…)

The idea is that you want to fit your header, navigation, key messages, and a
recent piece of content into the safe area.  This will maximise the impact of your page.

We all want users to spend a long time on our sites, but the reality is that people hit your page and do a quick visual scan to decide:

  • What the page is about, is it relevant?
  • Is this interesting enough to interact with anything?
  • Should I leave immediately?

Your goal in using the safe area is to entice users to scroll and discover the rest of the page and content,  click on your content, navigate through the site.

Mouse Cursors

Pointer, Finger, Grab & Grabbing

Spare Parts

Close Icon, Dropdown Arrow, Search Icon, Left and right Gallery Arrows,
Play Icon, Top Navigation States

Video Sizes

16:9 –  80×45, 160×90, 240×135
4:3   –  80×60, 160×120, 240×180

These are place holder boxes for video content that will work well within the 960 grid system


Nice Multi-point soft Gradients with curved falloff

Button and Styles

A few Styles that I use all the time in my mock ups

Lorem Ipsum Text Box

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Every Web Designer needs place-holder text boxes to be able to balance the weight of the page properly. Having the real copy would be even better but most of the time that luxury is not available, as the copy is still being written whilst the designer works out the look and feel.

Try and at least get a hold of realistic Titles and Headings (this can help a great deal in conceptual thinking and planning of page).

This text Box has about 5 paragraphs worth of text in it, just click on the text box with text tool to expand size of box and reveal more dummy text.

Enjoy & Feedback

Let us know how helpful this is to you, the more we hear from you, the more we can give you what you want for free!

Leave a Reply

Your e-mail address will not be published. Required fields are marked *