3 New Tools for Creating Website Mockups on the Fly

by on 14th April 2011 with 7 Comments

screenshot

Web developers are constantly churning out free tools that are incredibly useful in reducing the amount of small, annoying tasks that you have to deal with when building a website or mockup.

Today we’ll look at three fresh tools that you breeze through layout, placeholder images and text styles on your next site.

Griddle.It

screenshot

The first tool that we’re going to look at helps us quickly spec out a page layout based on a grid. I know what you’re thinking, you hate grid frameworks right? Tons of fluff, non-semantic class names, unnecessary complexity; all make CSS frameworks hated by many developers.

Fortunately, Griddle.It isn’t a CSS framework at all! It’s merely a customizable background graphic that helps you align your content by inserting columns and pixel widths.

How to Use It

The instructions for using Griddle.It are right on the website and couldn’t be simpler, but just so you can really get a feel for how the tool works, we’ll start today’s project with it and build further with the next few tools.

All you need to do to implement Griddle.It is set the body background of your CSS file to a custom URL that builds the grid for you. The structure of the URL is as follows:

http://griddle.it/[total width]-[number of columns]-[gutter size]

So let’s say you want your website to be 1,200 pixels wide with 12 columns each with a gutter of 20 pixels. Just drop the following CSS into your document:

body { background: url(http://griddle.it/1200-12-20) repeat-y center top; }

See how the “1200-12-20″ defines the terms that we were shooting for? Now, if you wanted to change this to something a little more typical, say 960 pixels wide with 12 columns and a 30 pixel gutter, the snippet would be:

body { background: url(http://griddle.it/960-12-30) repeat-y center top; }

This automatically applies the following image to the background of your web page. It’s pretty difficult to see in the small preview below so click here to see an actual example. Try messing with the numbers in the URL to see how they update the image.

screenshot

There are a few more basic features like changing colors and adding horizontal lines, but for our purposes this will do just fine. From here we can start to flesh out a basic web page layout.

Adding Content Based on the Grid

To start off, we’ll toss a div into our document that will hold three columns of text. For now, we’ll just include one placeholder paragraph and then throw in some CSS to nudge it into place.

Lorem ipsum dolor sit amet…

Now, given that our grid is 960 pixels wide with 30 pixel gutters, we know that we’ll want to set the width of our div to 960px with a margin of “auto” to center it. Likewise, by looking at our grid image, we can see that to split the page into three even columns, we’ll want to go with a width of 300px for the paragraphs.

#threeColumns { margin: auto; width: 960px; } #threeColumns p { float: left; margin: 20px 30px 0 0; text-align: justify; width: 300px; }

I’ve done a few other important things here as well like setting up my float for the next few paragraphs and throwing on some margins. Notice that the right margin is equal to the column gutter.

This code gives us the result below. As you can see, our text is lining up nicely with our background grid. The justified setting has made for some ugly gaps in the text but we’re just busting out a quick mock-up so I can live with that.

screenshot

This structure is pretty good and works well with our grid, but look what happens when we add in two more paragraphs. The margin on our last paragraph is screwing up our layout.

screenshot

This can be easily fixed by using the last-child pseudo selector, but from what I can tell, IE support on this is zilch, so I essentially just did the same thing with a class that we can use again later.

Lorem ipsum dolor sit met…

Lorem ipsum dolor sit met…

Lorem ipsum dolor sit met…

#threeColumns { margin: auto; min-height: 450px; width: 960px; } #threeColumns p { float: left; margin: 20px 30px 0 0; text-align: justify; width: 300px; } #threeColumns .last { margin-right: 0px; }

With that we have a nice three column layout. Could we have done it without the background image? Certainly! But Griddle.It helped us to visualize our layout so we could skip the math involved with splitting up three columns into a 960px wide space with uniform gutters.

screenshot

It’s important to note that our CSS here is super minimal when compared to what you get using a standard grid system like 960.gs.

Lorempixum

screenshot

Our plain text website is looking pretty boring! At this point though we don’t really have any images to spice it up, so what can we do to flesh out our layout?

Enter Lorempixum, a really cool little service that is conceptually almost identical to Griddle.It. You use a customizable URL to insert an image, this time though the image will be a content placeholder, not a background grid used for layout.

Using the web app shown above, you can generate an image that’s just the right size. You can also just drop in the URL below. The first number is the width and the second is the height.

http://lorempixum.com/400/200

There are a number of ways to make this more specific. You can choose between color or black and white or even specify your category from a pool of eleven options. For instance, here is the URL for a random city image that’s 510px wide by 310px tall and the resulting image.

http://lorempixum.com/510/310/city

screenshot

Let’s put this to use on our little web page. For starters, we’ll add a large header image that’s 960px wide by 350px tall. The width is obviously that of our site but the height is something I just grabbed at random. Here’s the HTML:

And of course we want to add a little styling to make the image line up with our grid. This is accomplished in basically the same way as the paragraphs we did before.

#mainPic { width: 960px; margin: auto; margin-top: 20px; }

This code gives us a nice header image that sits on top of our paragraph. Because we didn’t set a specific image from the category, every time the page is loaded, a new random image will pop up here.

screenshot

I’m going to take this one step further and show you how easy it is to use this service for all of the pictures on your page. Let’s add a small image to each one of our columns.

#littlepics { width: 960px; margin: auto; margin-top: 20px; } #littlepics img { float: left; margin-right: 30px; } #littlepics .last { margin-right: 0px; }

This HTML and CSS follows the exact same layout model that we used on the paragraphs and utilizes specific images within the Lorempixum set. Here’s the result:

screenshot

Type-a-file

screenshot

The final way to improve our site mockup is to add some more text and ditch the default text styles. Type-a-file provides some pre-built stylesheets that handle a lot of the styling for you. Many of these use Typekit, which is a bummer if you’re not a member of the service, but fortunately there are a few that are plain old web fonts.

All you really have to do here is find a style that you like and download the associated CSS files. I chose “Swissface” for our project. This gave me two CSS files, one for the typography and one that serves as a general typographic reset. I linked to these in my HTML file and added the following code:

Design Shack: Awesome Tools for Creating Websites

Lorem ipsum dolor sit amet…

#headline { width: 960px; margin: auto; margin-top: 20px; text-align: center; } #headline p{ margin: 0; font-style: italic; }

The result is a greatly improved typographic presence on our page. Note that we haven’t used a fraction of what’s included in the Type-a-file styles, be sure to poke around and check out everything the stylesheet has to offer. After you’re finished, you might also want to run a CSS cleaning service such as Unused CSS to clear out all the properties in the Type-a-file download that you didn’t end up using.

screenshot

Conclusion

Keep in mind that this tutorial isn’t presenting a workflow for you to follow as you build your own sites. The intention is merely to make you aware of some great free tools that you can use to speed up the creation of website mockups or wireframes which can later be expanded into full-blown sites.

With Griddle.It you can skip complicated CSS frameworks and quickly build a custom grid based on your own CSS. Lorempixum then jumps in and helps you fill those image gaps until you finally receive the photographs that your client promised to get you two weeks ago. Finally, Type-a-file provides a bunch of handy preset text styles that you can quickly implement to make all the typography on your page look pixel perfect.

Leave a comment below and let us know about any other cool web tools that you’ve come across that make your job just a little bit easier.

Comments & Discussion

7 Comments

  • http://www.mcpdesigns.net mcpDESIGNS

    Lorempixum is ridiculously awesome!!! Can’t wait to use that :)

  • http://www.alexedwards.net Alex Edwards

    Thanks for the great write up about Griddle.it :) Really nicely explained.

    I hadn’t heard of Type-a-file before, looking forward to trying it out!

  • Char

    Lorempixum is REALLY awesome!! And the name is so clever :)

  • http://www.jogosdelogica.net Saullo

    Amazing! I’ve learnt a lot playing with these websites!

    Thanks for the tip!

  • http://sepiarivercreative.com YJ Tso

    Great roundup of really useful tools. I’ll definitely be using some or all of these on my next project. Thanks!

  • Pingback: Il punto della settimana #49 | Francesco Corsentino .net()

  • http://extofiles.com/equideow-pirater/ http://extofiles.com/

    Hi there, yup this paragraph is genuinely nice and I
    have learned lot of things from it regarding blogging.
    thanks.

    Feel free to visit my blog post http://extofiles.com/

Subscribe

Membership
About the Author