Prototyping. There is a bunch of articles out there that raise some of the problems, disadvantages and limits behind wireframing. Here are at least four such write ups that I’ve come across lately. Although many of the authors invoke “death” analogies, please don’t be put off as most articles are quite constructive. :) I doubt wireframes will disappear altogether, but instead are probably undergoing a transition of sorts.
Wireframes. Today, we have a useful compilation for our readers of fresh web UI kits, mobile UI kits and wireframe kits complete with PSD files that will certainly come in handy when you are designing projects. Some basic user interface elements are always welcome toolbox additions by designers. We need them for a wide range of projects in order to able to easily create an accurate UI model of either a website or app.
Wireframes. Had to whip up an OmniGraffle stencil for jQuery Mobile. I submitted it to Graffletopia, but it isn’t live yet. You can download it here in the meantime. Just put in the user name > Library > Application Support > OmniGraffle > Stencils folder and unzip.
Wireframes. Hannah just started the Fireworks Wireframing Kit resource site. It’s still hot of the press, but the blog is gearing up to be a collection of freely submitted PNG files submitted by the public to help with wireframing. So far there are a few grey scale files already with such components as: modal windows, login boxes, and buttons of various shapes and sizes. Right now you have to download each component individually, as you see fit.
Wireframes. PJ recently took another stab at making gesture icons more comprehensible and released Cue under Creative Commons. It’s a proposed system for representing gestures more clearly that makes use of thumb like icons. He explains his motivation for the project in a blog post as well. The icons come in PNG (4 sizes), SVG, Omnigraffle and InDesign formats.
Mobile design. As the demand for iPad applications increase, more and more designers will need to wireframe for the iPad. There’s no better way to speed up your wireframing process than to use a user interface tookit. These toolkits have all the standard iPad interface elements pre-designed for you.
Tools. @nickf called me out for not having iPad templates in the Konigi OmniGraffle Wireframe Template, so I got off my lazy ass and added some since this thing hasn't been updated in over 2 years! Added iPad Portrait 1 up, iPad Portrait 2 up, iPad Landscape 1 up. They have guides for 2x2 or 3x3 grid. Note, this is for OmniGraffle Pro ONLY. You will not be able to edit shared layers to modify the headers and other templates.
Tools. I've been asked several times in the past to add iOS stencils to the wireframe stencil set I make. These are some that I know of, and have been recommended to me by @OmniGraffle and @jmk. iA's OmniGraffle port of the Teehan+Lax iPad Stencils David Morford's iOS Design Stencils iPad and iPhone Design I prefer to link to these than to throw together something myself until I actually work on an iOS project.
Wireframes. Wireframes come in different fidelities. On one hand, you have low-fidelity wireframes that don’t resemble the final product as much, but still capture the user interface layout and controls. On the other hand, you have high-fidelity wireframes that look closer to the final product because they display the user interface in greater detail.
Wireframes. I will never start from scratch in Photoshop again. Seriously. * (*Okay, maybe that's hyperbole, but I bet I'll do it less frequently). Like a lot of folks, my standard web design workflow started by opening a new file in Photoshop (or your design program of choice) and getting a basic guide structure put into place.
Featured
Prototyping. The goal of preparing wireframes is to solve design challenges regarding layout, and priority. This is usually done in wireframes through experimenting with layouts and the application of contrast, similarity and some other principles. By applying the Gestalt principles to your components, you can quickly prepare concepts.
Wireframes. As part of our work with clients, we're often called upon to explain our process and why we do things the way we do: it's good practice for us, keeping us sharp, and always evaluating whether we can do things better. Recently, we found ourselves explaining why we wireframe, and what it brings to the project: clarity of purpose, a streamlined set of features, and a focused, compelling way to communicate with users.
Featured
Prototyping. "That should have been brought up when we looked at wireframes" Whenever I hear remarks like this, I usually feel it's not the client's comprehension that's at fault – but how the materials were presented. As UXDs, our job is to communicate and if the message isn't coming across, then that's our problem. And let's face it: most people never come across a wireframe or any of our other arcane documents.
Wireframes. Wireframing is an extremely important phase of the web development process. While it’s tempting to skip this step and proceed from the design brief and information architecture directly into design, it pays huge dividends to create wireframes somewhere in between of conceptual site planning and actual development of a site.
Wireframes. Adding this iPad Omnigraffle Stencil to the list for all those MAC users out there (thanks Ivana for finding it). The set looks pretty decent with a great deal of popovers, buttons, bars, icons, keyboards, alerts, and so on. As an added bonus the set also comes with a few blank and printable PDF sketchsheets – handy for all those times when you don’t feel like drawing out hundreds of screen outlines over and over again. Enjoy.
Wireframes. Following-on from our previously popular Web UI and Wireframe Resources articles, in this round-up we felt we should bring you right up to date by taking a look at some of the freshest freely available UI resources. All of the templates, kits, stencils and even the Photoshop Actions we have in this post have all been designed to help make the initial rapid prototyping stages of web and mobile development that little bit easier, quicker and smoother.
Wireframes. I have a love hate relationship with wireframes. In the last 10 years they’ve been a part of every web project I’ve worked on. There have been times when I can’t imagine how we would have solved a particular problem without them. Yet there are also times when I’ve been completely exasperated at the amount of time and energy they’ve consumed, seemingly to very little reward.
Wireframes. By Cameron Chapman Wireframing is an important part of the design process, one that shouldn’t be overlooked by even the most experienced designers. Wireframes can save development time by outlining exactly how a site should look and function, in a manner that can be shown to and approved by your clients. But wireframing can be confusing, especially to new designers.
Wireframes. Yet another wireframing kit up for grabs. This time for Adobe Fireworks. In Jonas’ own words: Dragnet website wireframes kit v0. 9 is a common library for Adobe Fireworks and contains over 25 objects that are useful for rapid prototyping of websites.
Tools. To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details.
Wireframes. One of my most dreaded tasks as a program manager has been writing product specifications. It seemed unintuitive that, after brainstorming and discovering the details of the user interface and interaction, the best way to describe it all would be screenshots and endless pages of pre-conditions, action, post-condition, edge cases, etc… I wasn’t surprised that .
Tools. Amir Khella just described his experience of building an interactive prototyping for an iPad application using Apple’s Keynote. Along with a thorough post, he release a template available for download (requires blog subscription). The post also comes with a video screen cast showing the final result and interactions. Here is an interesting quote around what he has to say on prototyping: Remember that a prototype doesn’t need to be perfect.
Tools. An awesome Adobe Illustrator library has just been released for designing user interfaces. The set contains hundreds of vector shapes for GUI form elements, 260 vector based interface icons, and 200 graphic styles. Best of all, it’s available to use for commercial projects. Nice work Vincent! Credits: Vincent Le Moign .
Resources. Mike Lohrman's Wireframe Showcase is a user-contributed wireframe and UI sketch gallery. I'm hoping, since there is some space on the individual pages for content, that we'll see a little more discussion about process and design thinking here rather than mere visuals of design artifacts. It's always good to see more people showing how they explore ideas with sketches and wireframes. .
Oldie but goodie
Wireframes. Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design. But if done inefficiently, it can end up costing more time and can even create bigger headaches for both the client and the designer.
The end