CategoryWireframing

February 16, 2016 — In this article, Tom Green will describe the methods he uses to get from content to responsive wireframe — and how you can, too. There is no big reveal or other excitement with the creation of content reference wireframes. You can practice content wireframing by deconstructing popular websites into their basic building blocks. Start with rough containers of information, add in the real content, and then start chiseling them into more finalized forms. In doing so, you’ll be better able to design around what users really care about: the content. Read more…

February 17, 2015 — Edge Reflow is one in an avalanche of tools that have come out that make it possible to visually design a responsive website. What you do with that design is up to you (and the capabilities of the tool). Edge Reflow was created to address how responsive design has changed our web workflows. In this article, Brian Wood gives you a quick-ish tour of the features in Edge Reflow CC. Read more…

March 7, 2013 — Popular programs are out there, but many of them have considerable drawbacks, which has led Shalom Goltz to explore alternative apps. As you will soon see, InDesign has a unique set of tools and features that are perfectly suited to designing wireframes and interactive prototypes in a more intuitive way than you ever thought possible. Read more…

May 30, 2012 — You cannot plan for and design a responsive, content-focused, mobile-first website the same way you’ve been creating websites for years—you just can’t. If your goal is to produce something that is not fixed-width and serves smaller devices just the styles they require, why would you use a dated process that contradicts those goals? Read more…

September 6, 2010 — Lately, Apple Keynote has been gaining popularity among designers as a wireframing and prototyping tool. Features like multiple slide masters, styles, grouping, animation and hyperlinks make it ideal for crafting interactive prototypes and UI narratives. Today’s freebie, Keynotopia, is a free set of interface elements for Keynote that makes it possible for anyone to create these prototypes in minutes. Read more…

August 27, 2010 — 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. In this post, we’ve prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. We’ve carefully selected the most useful kits and resources to get you going in the early stages of a project. Read more…

June 16, 2010 — The old adage, “a picture speaks a thousand words” captures what user interface prototyping is all about: using visuals to describe thousands of words’ worth of design and development specifications that detail how a system should behave and look. In an iterative approach to user interface design, rapid prototyping is the process of quickly mocking up the future state of a system, be it a website or application, and validating it with a broader team of users, stakeholders, developers and designers. Doing this rapidly and iteratively generates feedback early and often in the process, improving the final design and reducing the need for changes during development. Read more…

March 29, 2010 — Sketching and wireframing are a specialized style of drawing, used for fleshing out preliminary complex ideas, group brain-storming, a lo-fi method for evaluating interaction concepts, and as a way of roughly perfecting a design technique. Read more…

February 5, 2010 — Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. Read more…

September 1, 2009 — 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. Read more…