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 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.
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.
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”.