Tag Archive for: prototyping

Why Prototyping Tools Shouldn’t Keep You From Sketching

,

Blank gridded notepadConceptualizing a mobile or desktop site has never been as easy as it is today with the huge range of wireframing and prototyping tools at our fingertips. Long gone are the days of sitting down with pen and paper and tossing away pages every time you wanted to change a small detail. To many designers out there, that is a relief, but Lennart Hennigs, writer for Smashing Magazine, suggests it may be better for the final product to revert back to the old ways and undertaking hours of sketching.

Hennigs suggests that these tools which have made getting started on a website faster than ever before are also making us skip over key step that leads to the best results possible: taking to time to actually understand the problem.

Many designers are afraid of white or empty space. The pressure to start from nothing can sometimes be intense, especially on important projects, but when we start to map out the project and work out the problems we also start to create solutions. We aren’t just fixing problems on the paper when we sketch, though. We also generate new ideas out of the lack of established details. Your brain automatically fills in the blanks, and you can often be surprised by what you imagine. The best part of all of this is exploring these options without being forced to commit.

With sketches, you can have three our four different options for a single screen on a single page, all in progress at the same time. You can explore every option you want, and if something goes wrong, mark that design out or throw it away. With prototyping, it isn’t so easy. Prototyping is slower and when it takes more time to create something, we get more attached to it even when it isn’t the best possible design. It is hard to outright throw away a prototype you’ve spent an hour or more on.

The big reason some designers were so happy to see prototyping tools become widely available is they were sketching wrong. Your sketches don’t have to look good, and you definitely don’t need to spend hours cleaning up lines or making them look good. You are conveying ideas, not the final product. You don’t need to be Rembrandt, you just need to get the ideas on the paper. Think of it like writing, you have to be legible enough to communicate the information, but sloppy penmanship doesn’t matter if it is still legible. Similarly, you’re sketches don’t need to look pretty so long as they formulate ideas and could communicate them to collaborators.

If you’re sold on stepping back one step in your design process and opening yourself to new ideas you normally wouldn’t get during the prototyping step, don’t worry about your artistic skills or anything like that. Hennigs suggests more than a few tips in his article for getting started and how to approach the new old part of design.

/0 Comments

The Best Tools For Wireframing and Prototyping

,

Despite public perception, web designers and developers know their job is part of a system that relies on multiple people doing their jobs to create a finished product. Web design isn’t just throwing things onto a site in away that looks pleasant and matches the subject matter.

You have to know how to make a website work in a way that users will want to use. Layout, functionality  color palette  and different features are all part of the website as a whole and a single weak part will drag down the entire thing.

That’s why most designers now rely on prototypes and wireframes to work out their designs with clients and coworkers before leaping into a full site design. With prototypes you can lay out potential site maps, application flow, and general makeup of the site without wasting countless hours building the real thing.

rsz_wireframesite

While you can do a lot of this type of work on pen and paper if you want, there are tools out there designed strictly to help with this process which will make your clients feel impressed by a simple idea for a webpage and showcase how the site will function.

John Conor at Designmodo collected ten of the latest and best of these tools for wireframing and prototyping. They all have their own strengths and weaknesses, but that means no matter what problem you are having with brainstorming your website, you have a tool made to fit your needs.

/0 Comments

Prototyping Is One Of The Most Important Steps Of Design

,

Prototyping your web designs can come in many different forms, from sketches on a napkin or in a notebook, wireframes, or high-fidelity mock-ups. No matter what way your prototyping takes shape, it is critical that the prototyping process is treated as an important part of your workflow.

Wireframe

Source: Flickr

There are quite a few reasons prototyping is integral to the web design process, but the main point is that they can save you extra effort you might otherwise use on creating a design that may not work. This is because prototypes take relatively little time to create, and they can help you identify issues in your design early on. Instead of spending hours laying out a page and tweaking it to find what works best, you can start crafting your design with a solid idea what you want, if you’ve spent the time beforehand to plan it out.

Prototypes also allow you to create variations on designs and compare them much more easily. Instead of coding different designs and layouts to compare. Using sketches or high-fidelity mock-ups, you can easily put the different iterations side-by-side. This means no switching between tabs and saved layouts and designs.

Jacob Gube points out more reasons prototyping is a must for any designer’s work process. Most importantly, putting your ideas on paper before investing time and energy allows you to cut any bad ideas at the beginning of the process. It also makes it easier to communicate your ideas to clients or employers who may need to approve a design.

/0 Comments