HotGloo: Online Wireframe Application

When starting on a relatively large web design project, it is vital that you are organized and efficient from day one. I had previously spoken about the 960 GS which is an ideal solution for building your website on a reliable framework, particularly because they provide you with templates for design applications (such as Photoshop and Fireworks). The earlier you start planning/organizing/building on frameworks, the better. That’s why for large, extensive websites, a wireframe is crucial.

HotGloo Logo

HotGloo is a free online application that allows you to create multiple wireframes before designing any websites. It is entirely online and allows you to pick up where you’ve left off regardless of computer/location. Wireframes take pre-designing sketching to the next level, and are incredibly useful for various reasons:

• Layout/Structure: It is impossible to design (properly) if certain aspects of the content are not accounted for. With wireframes, you can visualize the most logical way of laying out the content of a given website
• Client communication: You can talk all you want, but most clients won’t be on the same page. Wireframes clearly illustrate the basics of the website, consequently prompting any client rejections at an earlier stage, which avoids delays and saves on pain killers
• Save design time: in many cases, HTML elements play a significant role in the look and feel of a website design, sometimes even more so than graphical elements. When you layout your wireframe to see where everything goes, you’ll design more efficiently as you’ll be familiar from the start

The trick is to be able to “sketch” your wireframe to its full potential via an application on the computer screen, and that’s what the Germans at HotGloo have attempted. Although still in beta (and is yet to incorporate basic funtionality such as a direct login function), HotGloo is very promising, as it already saves overwhelming amounts of time and energy – while looking very professional.

HotGloo work area

The interface is very intuitive, so unless you’re on a smaller-then-average display, accessing the tools and laying out the different elements is a straight-forward process. They’ve also taken into consideration all of the different HTML components that you would need for any website, and if you can’t find it, you can always create your own (although you’d be fooling yourself if you thought it was something you’re willing to do on a regular basis).

A project can be a collection of pages, which means you can create the wireframe for an entire website. The pages are listed on the right sidebar so you can browse one after the other to view the flow of the site map. You can also get other users to collaborate with you on the project, which in turns makes HotGloo an ideal platform of communication between designers and developers, and avoids misunderstandings.

One of the strongest features is the simplicity of the alignment of the different objects on the stage. It is almost like a stripped-down version of the Smart Guides feature in Photoshop, giving what you need, without the extra lines. Moreover, you can use the buttons across the top to align several elements with a single click.

HotGloo properties window

Any object, when clicked on, will prompt the properties window, which gives you full control over the appearance of the given item. In doing that, HotGloo has removed unused functionality from the sidebar that would’ve cluttered the work area and damaged the usability aspect. With the attributes made available, the end result could be considered a basic design draft, not just a wireframe.

Save your projects as part of your online account, and when you’re done with any page, export it to a .png ready to be reviewed by the client, or simply kept for your records.

If working on a small, simple project, investing time on a wireframe could be a waste of time. However, any medium to large website requires planning and organization from the very beginning, and that is exactly what HotGloo offers you. When the website is out of beta, and the comments in the built-in feedback system are applied, HotGloo will become an essential tool for any designer who wants to “do this right”.

1KB CSS Grid: Your Basic Framework

It has become evident that the best way to build a new website is to do it from scratch, and using proven frameworks. That saves you a lot of time and effort, and allows you to focus on the actual design of the website instead of having to worry about whether or not your layout is developed properly. I have previously discussed the 960 Grid System as an ideal CSS framework to build your website on, and while I still hold my stance towards it, I believe that in some cases, a solution such as the 1KB CSS Grid could be more appropriate.

1KB CSS Grid prides itself in its simplicity. You want to develop a relatively basic, straight-forward website, and do not feel it necessary to spend a significant amount of time setting up and building the foundations. With the 960 GS (or for that matter, the Bluprint CSS, which I have also talked about), you can construct a reliable foundation to your website. That includes a CSS reset to remove any default values that would cause inconsistencies between the different browsers, and another CSS file with all of the possible values of the columns, giving you complete freedom of using different-sized columns in any order you want. More importantly, with the 960 GS, you can download the Photoshop template, for example, and design your website with the exact coordinations of the columns in mind.

However, in many cases, you just want to build a simple website, without having to go through so many decision-making processes, and without investing an entire afternoon for features that you couldn’t care less about. For those of you working on quick and easy websites, 1KB CSS grid gives you the power to create the necessary CSS file in less than a minute, and start developing on top of that. No CSS reset, no limitless possibilities, just a light-weight file with the various column sizes that you are going to use.

The 1KB CSS Grid website

You won’t even need to enter the values. Just drag the indicators to your desired number, and you will see what the total width will be. The CSS file with the standard 960px values looks like this:

/* ================ */
/* = The 1Kb Grid = */
/* 12 columns, 60 pixels each, with 20 pixel gutter */
/* ================ */

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column {
margin: 0 10px;
overflow: hidden;
float: left;
display: inline;
}
.row {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
margin: 0 -10px;
width: auto;
display: inline-block;
}

It is recommended that you use a CSS reset, but if you’re doing something simplistic, the above code will work fine on its own. Creator Tyler Tate took into consideration the main values everyone’s after. At the end of the day, in many cases, particularly in this one, less is more. So if you are working on a relatively large project, start from scratch with the 960 GS, for everything else, there’s the 1KB CSS Grid.

Blueprint: A CSS Framework

There has been a massive movement towards “frameworks” through the Web 2.0 territory.  It only seems logical as it facilitates the work of designers and developers, saving them a lot of time and effort. I had talked about the 960 Grid System in a previous post, and now I wanted to discuss a more comprehensive solution.

The Blueprint CSS framework

While PHP has produced numerous open-source frameworks to build your website on, few people (myself included) would’ve imagined that the a similar strategy would be adopted for CSS. For that reason, when I first heard about Blueprint, I was skeptical, but after looking into it, I would actually recommend it as a tool to be regularly used.

The website has very good documentation (it seems very uncommon nowadays, but for the first time in a while, I found a document that was straight, to-the-point, and informative). But basically, it reset the CSS, allows for a grid layout, sets standards for fonts and forms appearance. This means that it is an ideal starting point. All you have to do is go to the website, download the .zip file, call on the CSS files in your XHTML document, and start building.

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
   <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->

The package comes with the following:

1. CSS reset: which resets all of the defaults, avoiding a lot of the browser compatibility issues you always come across
2. Grid: a default of 24 columns with 10px gutters to set up the division of the entire website
3. Typography: a set of attributes to set the standard for all types of texts, appearing properly across all browsers
4. Forms: saving you loads of time by creating the appropriate classes so that all of the forms appear properly

In all cases, the classes are over-ridden by your own. That’s why it’s ideal: is sets new defaults that look great and identical on browsers, but still allows you to shape everything as you normally would.

As for the grid layout, it works similarly to the 960 Grid System:

<div class="container">
    <div class="span-24">
        Header
    </div>
    <div class="span-4">
        Left sidebar
    </div>
    <div class="span-16">
        Main content
    </div>
    <div class="span-4 last">
        Right sidebar
    </div>
</div>

Blueprint also ships with a validator and compressor to make sure your CSS code is clean and light-weight (but you’ll need to have Ruby installed on your local machine for the tests to run, otherwise, you can use the Web Developer add-on for Firefox, or the W3C validtor when the site is on the Internet).

If you are developing a complex website with numerous diverse pages, Blueprint is a solution you should seriously consider: it takes everything into consideration, and saves you a lot of time and effort.

However, the downside of it is that it is bit complex. If you’re not going to take advantage of at least half  of its features, it might not be worth it. If you’re building a CMS-driven micro-site for example, than the 960 Grid System seems like the logical choice as it specializes in resetting, and laying out the grid.

Blueprint themselves put it very nicely when they said that it is not really a framework, it is more like a CSS tool box. Yet another beautiful product from the open-source community.

960 Grid System

When designing a new website, it is always important to be extremely organized and plan everything out from step one. That will avoid complications, and more importantly, help produce professional, sleek results.

The 960 Grid System is free CSS template that creates a 12-column style sheet. This allows you to organize the placements of the divs throughout your web page. The reason why it’s called 960, is because the majority of the websites created now are optimized for users on a 1024 x 768 screen resolution. Therefore, the maximum width would be 960 pixels.You can find examples of websites that are built on the 960 GS on the homepage.

If you are not going to stick to the standard 12-column template, you can always use the Custom CSS Generator available that will produce the file for you. Or you can just use the alternative 16-column style sheet, also freely available on the website.

One of the aspects I like most about the free service/tool, is the ability to download templates to incorporate while you’re in the design phase. Therefore, when you’re starting a new project, if you’re working with Photoshop, for example, you can download the .psd file that shows the columns, and base your design on that infrastructure. That way, when you get to the development phase, everything is a lot easier, and you’re website will be compatible with all modern browsers.

Along with the CSS file carrying the different-sized divs that you’re going to be working with, the 960 GS also includes a reset CSS file. If you haven’t been resetting your CSS when developing websites, that you should read this article to know why you should. But basically, resetting avoids a lot of browser incompatibility issues.

The downfall is that the CSS file holds a lot more classes than you’re going to be needing. But the easy way out is to erase all of the classes that you haven’t used after the initial code has been laid out. Realistically, however, you probably have more important things to worry about, than the few extra bytes produced by the style sheet.

After you’ve called on the CSS files, your markup will look something like this:

<div class="container_12">
   <div class="grid_7 prefix_1">
      <div class="grid_2 alpha">
            ...
      </div>
      <div class="grid_3">
            ...
      </div>
      <div class="grid_2 omega">
            ...
      </div>
   </div>
   <div class="grid_3 suffix_1">
        ...
   </div>
</div>

Overall, a great base for your websites, and a tool that we should all be using.