Last week I was invited by Audi to discover today two pieces of performance oriented products … the Audi R8 5.2 FSI quattro and the new Forza Motorsport 3 game.

Microsoft Game Studios and Turn 10 Studios have promised big changes for Forza 3. For a start, the graphics have been completely overhauled with ten times the number of polygons used than in Forza 2 and each car now has even more detail, including beautifully rendered interiors. There are over 5o manufacturers featured in the game with a choice of over 400 cars, including new supercars such as the Audi R8 V10 and the Aston Martin DBS. There is also a big improvement in the number of tracks, with over 100 real-world locations to test your cars on. Another new feature is the ’season mode’ that creates a personalized racing calendar with more than 200 events including Circuit, Oval, Drag, Drift and Timed Events. The best features of Forza 2 have been carried over to the new game. There are extensive tuning options, custom liveries in the paint shop and, of course, a multiplayer mode on Xbox Live.

Featuring the Audi R8 5.2 FSI quattro (wow … what a car!) prominently on the cover as its “hero” car, the creators of Forza 3 have worked closely with Audi engineers to model the R8 V10 to an intricate degree. Important, but often overlooked aspects of motorsport, details such as gear ratios, tire deformation, and track telemetry are tightly integrated throughout the entire game making it the most exhilarating experience you can have off the track. The new game also feature exceptionally realistic renderings of race courses that Audi has dominated in recent years, including home of the 12 Hours of Sebring and several others.

“What we love about the R8 is the car stands for much of what makes Forza Motorsport 3 the ultimate racing game – powerful but refined, sophisticated yet inviting, the perfect blend of design and performance,” said Dan Greenawalt, Game Director, Turn 10. “It’s that blend of design and performance that makes Audi the ideal partner for my team. It mirrors the way we approach the development of Forza.”

By releasing on October 23rd Forza 3 is going to steal a lot of sales from Gran Turismo 5, helped by the fact that an Xbox 360 is significantly cheaper than a PS3. I honestly don’t know which I prefer, but looking at the screenshots I do find myself tempted to put an order in for Forza… and later on the real Audi R8

Getting a design to click can take time. In many cases, it takes several rounds of revisions to even get to an effective starting point. What can you do to give yourself a better chance at designing something great sooner?

In this article, I’ll take a look at a pre-design process known as wireframing. It’s used by designers to help define a website’s essence before working on the time consuming details.

What is a Wireframe?

Chances are that you’ve already done a wireframe before without even realizing it. It might have been in the form of a rough doodle in the margin of a notebook or a series of boxes in Photoshop, but the principle is the same. You’ve simplified a website design down into fundamental elements and shapes.

A wireframe is breakdown of a website layout into simple shapes and text to represent unique elements. This allows a designer to plan a site without having to worry about anything but the size, proportions, and arrangement. Details in the design is not the focus of a wireframe.

The Difference from Site Maps

It’s important to remember that even though both part of planning stages, a wireframe is not the same as a site map. A site map helps plan links by showing how pages relate to each other. The wireframe takes that one step closer by individually plotting page content.

Wireframes separate the design from the structure. This is important, because we often blend the two together in the opening stages of a new project. Design is the aesthetic of a sidebar, where structure is the positioning of it.

Why Do Wireframes Matter?

Laying out a site in simplest terms makes focusing on the usability intuitive. With gray boxes representing complex elements, you’re less likely to get distracted by a visual nuance that might not even be in the final product.

Bringing focus back to the basics is a wonderful asset to productivity in web design with clients. It’s less overwhelming, and allows the designer to guide the client’s attention to the task at hand.

The only thing needed to start a wireframe is general idea. This means that you can start building before receiving any content from the client.

They Organize

By displaying the flashier elements of a site in terms of grayed out boxes, you’re making it easier to arrange objectively. Layout becomes an exercise in spacing and grouping rather than contrast and color palettes.

When you’re ready to bring the layout to a full Photoshop composition, you’ve already got a blueprint to design over. With some forward thinking, you’ll have a lot less measuring to do. Discovering at the last moment that your entire design is physically impossible is highly overrated anyway.

They Simplify

Wireframes strip away the extra thought and intricacies of “3 pixels further right” when getting started. It’s easier to plan a slideshow when you only have to worry about positioning.

Wireframes are easy to present because they’ve stripped away many of the “preference” elements. By breaking a layout into the fundamental building blocks, you’re more likely to discuss about the font placement than the font choice.

They Save Time

“But spending time doing wireframes add an extra step!” This is not entirely true. Which of the following would take longer? Putting together a full design in Photoshop? Or drawing out a series of monochromatic boxes?

After slaving over a design for hours, few things are more frustrating to a designer than hearing “I don’t like this direction” from the client. It’s a major setback, and in many cases, it is avoidable with some basic discussion on layout before producing a near-finished design.

Build Your Own Wireframes Online

Digital wireframes are the step between a rough sketch in a Moleskine, and a full mock-up in Photoshop. They translate a hand drawn design into an almost pixel perfect scale model of the final page.

It’s not easy finding a tool that allows you to quickly build wireframes on the computer. I’ve read similar posts with a dozen links to possible tools and web apps showcased. Your time is valuable, so I’m going to save you the trial and error by just recommending one.

Meet HotGloo

HotGloo is designed by IA’s for IA’s. With the help of the elements you can create a whole world out of wireframes. Just drag and drop, scale, link, name and rename them – it’s super easy and intuitional.

Their servers host all wireframes, so sharing work with clients or fellow teammates is incredibly easy. You are also able to add users with “Editor” or “Reviewer” roles to each project. The allows them to participate and add notes directly on the layout at any time.