1 PSD and 2 Web Tools for Better Web Design

While designing a Web project is best approached from an “Agile development” standpoint, preparing for the job should be more than pure agility—you should make sure you have some proper, time-saving tools easily accessible.

Starting a project should be considered almost as a ritual where everything is already set and ready to deploy without any excessive brain strain.

Over the years, you’ve probably amassed quite a collection of tools for text, design, layout, and framework. You’ve also probably accumulated multiple problem-solving apps and template documents. Every once in a while, I run into a set of tools that would really streamline your daily routine. Here are a few that will help cut down the clutter on your desktop.

Web Starter Kit

A little while ago, I ran into a neat Web Starter Kit by Quommunication that really does the job for the developer and designer (and finally for the client). It’s everything any of us wanted to do but “just didn’t have the time” to do it, if you know what I mean.

What’s in the Web Starter Kit?

  1. Grids and boxes – for content presentation
  2. Gui parts – to add your own flavor
  3. Web color scheme – to add if it’s too sparse
  4. Dummy text – to show placeholder copy (or put the real text instead)
  5. Banner placeholders
  6. Browser chrome – clients love the way this looks
Picture 1.png

Web starter kit - partial screenshot

Why Should I Use It?
Probably because you want to present yourself—and your work—to the client in the best possible way, and then translate it quickly into a working HTML/CSS. If you’re using some of the current CSS Frameworks, this provides the missing part of design presentation for the client.

HTML Ipsum

Picture 2.png

HTML Ipsum - partial screenshot

Speaking of frameworks made me think of another tool that many of us wanted to use but “just didn’t have the time” to: a placeholder text generator.

Simply put, this tool creates HTML tags with “lorem ipsum” text in it. This great time-saver can be downloaded as a Coda clip, Textmate bundle for Mac, or as a Gedit snippet for Linux. Or for those who use Windows®, here is the original Web page where you can copy/paste the code any time you need it.

Grid Designer

Picture 3.png

Grid Designer - Partial screenshot

This Web tool is actually two tools in one:

  1. Calculates column widths, gutters, and margins
  2. Defines typography on a per column level (if needed)

When you’re done, you can export the file with one handy extra option—you can select whether you want the scalable grid or not.

Although there are many tools already on the market (and many yet to come), these are a few that are highly functional and fit nicely into everyone’s workflow. At the very least, using these will increase your efficency and productivity.

TIP: If you’re using Mac, you can put the the last Web tool inside a Fluid.app to make an instant desktop app.

You made it all the way down here so you must have enjoyed this post! You may also like:

Magento tip: Get a small sized version of a large production database Tsvetan Stoychev
Tsvetan Stoychev, | 10

Magento tip: Get a small sized version of a large production database

(Not only) Magento .gitignore generator Darko Goles
Darko Goles, | 12

(Not only) Magento .gitignore generator

Magento with xDebug, web services API and testUnit Darko Goles
Darko Goles, | 5

Magento with xDebug, web services API and testUnit


  1. Thanks for
    sharing your tools(hmm… I could have re-worded that I guess)
    Had problems downloading the
    starter_kit.psd file.
    It timed out a few times.
    but eventually downloaded(slowly)…
    I don’t have fasted machine so
    I’m limited to ps cs2(doesn’t have all the same fonts)
    turned off most of the
    layer effects & re-saved it.
    Opens little quicker now.
    I’m yet to try the other tools…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.