background preloader

20 Steps to Better Wireframing

20 Steps to Better Wireframing
Possibly the biggest mistake in any development project is failure to plan. Recently, the owner of a prospective start-up told me that planning was unnecessary and a good developer could just start coding. This, I promise you, will end in tears. Wireframing is one of the first steps in your planning process and arguably it’s one of the most important ones. This is when the idea starts to take shape as an application, becoming boxes and buttons that users will interact with. This article will take you through a wireframing process; who should be involved, the tools to use and tips to enable you to make better wireframes. 1) Be Clear About Your Objective As a developer I can understand the temptation to jump in and start coding. A wireframe will help you identify many of these issues in a way that is time and cost effective. The process also helps to create a better understanding of the application. 3) Draw on Your Experience You do not need skills in design or development. design Related:  Planning

The Future of Wireframes - Articles - MIX Online As we move into the next decade of web design, it's time for us to reevaluate our understanding of wireframes—a tried and tested user experience staple Riddle me this: How do you piss of a UX professional? The answer: Call him a “designer”. These days, user experience professionals look down on the word “designer” because it implies that their primary role is to paint pretty pixels. Just how much? Holy guacamole, Batman! But wait! It’s time we end this madness! Convergence in the Simulacrum IA, content strategy and visual design are quickly converging on the Web. In 1999, Jakob Nielsen wrote an article that was undeniably ahead of its time: Differences between Print Design & Web Design. Print design is 2-dimensional while web design is 1-dimensional and n-dimensional simultaneously. Fast-forward to 2010 and it’s pretty easy to see how these differences have diminished drastically—or even disappeared. I daresay to God that the Web is finally converging with Print. Bottom line? p.s.

Lorem Ipsum - All the facts - Lipsum generator Context | Culture | Collaboration: The Narrative Design Canvas A few years ago, I took a master class in Toronto with Alex Osterwalder, the visionary author of Business Model Generation and creator of the the Business Model Canvas, to learn how to apply his canvas to organizational and project design. After the class, I spoke with Alex and with his permission, reimagined the canvas into one with fields particular to the use of social impact media for a campaign, project, or organizational program. The result was the project model canvas for narrative design for social impact below. The canvas is a strategic planning tool that allows you to lay out on one page the internal considerations for the design of your narrative-based project for social impact. True to Alex's spirit, my version of his canvas has been freely available to anyone who requested it, but under the demands of my task list, I had never gotten around to releasing it for direct download. Rectifying that oversight now, here it is below and also available at SlideShare.

Wireframing With InDesign and Illustrator By Todd Warfel Published: January 8, 2007 “Our consumers are typically product managers, software engineers, and visual/graphic designers. Most of the time, they want something tangible to take with them, write notes on, and use to build their product or service.” There are a variety of tools used for interaction design. I’ve used them all and have settled on a framework using InDesign® and Illustrator®. With all the wireframing tools out there like Visio®, OmniGraffle®, Illustrator, InDesign, Flash®, Fireworks®, and HTML/CSS, why create a framework based on InDesign and Illustrator? My company, Messagefirst, provides research and design services for other companies. We’ve tried all of the previously mentioned tools—some more than others. Our Needs When selecting a solution, we based our decision on the following seven criteria: collaboration—We work on large, complicated projects. What We’ve Tried Visio We also find the interface and interaction of the application too clunky. OmniGraffle

The UX Series: are UX and design thinking used enough in i-docs? The UX Series is a collaborative research project about UX in i-docs. The point is the following: if we want users to engage in our i-docs we need to work with them from the beginning. This does not mean giving them the full control of our stories, but starting a dialogue that can forge our decisions and design so that the result is inclusive and immersive. I came up with 7 questions that summarise the main issues we are facing when creating an i-doc. The 7 Questions: 1. 2. 3. 4. 5. 6. 7. The Format There are 7 questions. I interviewed one person for each question (making sure that their approach is coming from a Design Thinking prospective). Each interview is a max of 7 min long (just enough for you to be inspired without giving it too much of your time). Then what? For each reply I have asked someone from the industry (i-doc production) to answer back. You are welcomed to contact me if you want to be interviewed, or if you want to add anything. More on my thinking:

Ultimate Guide to Website Wireframing Most designers wireframe their designs in one way or another, even if it just involves them making quick sketches on the back of some scratch paper. Wireframing is an important part of the design process, especially for more complex projects. Wireframes can come in handy when you’re communicating with clients, as it allows them to visualize your ideas more easily than when you just describe them verbally. Marketing is no longer just direct mail and billboards, it’s much more than that. You must be able to impress your clients by showing care and dedication to their marketing efforts, or they will just go to another agency. This is why wireframing is so important. This guide covers what you need to know about website wireframes to get started. Why You Should Wireframe Your Web Designs Wireframing is really the first step in the design process. Wireframes are also cost-effective by saving you potential time lost due to revising a high-fidelity comp. Wireframe vs. Wireframes come first. Cacoo

Tools for Game Design: Game Design Methods Game design method implies an approach to a problem which is likely to lead to a successful solution. It is backed by a certain amount of imagination, creativity and intuition, and a more or less systematic investigation of the problem with the help of techniques, 'best practices', or 'tricks of the trade'. A Brainstorming Toolbox (David Perry)Creativity/ Innovation (Yolanda Verhage)Jumpstarting Your Creativity (Brad Meyer)Visualizing the Creative Process (Daniel Cook) From the Vault – The BioShock PitchHow To Pitch Your GameGame ConceptsHow To Pitch Your Project To PublishersWhat a Pitch! DOCUMENTATION for GAME DESIGN HEURISTICS for GAME DESIGN FLOWCHARTModel-Driven Game DevelopmentThe Chemistry Of Game Design (Daniel Cook)Computer Game-Flow Design Design DiagramsDiagrams for puzzle designConsiderations on flowcharts, dialogues and Design Documents (Cindy Dalfovo) Settlers of catan Flowchart PROTOTYPING for GAME DESIGN

Wireframes Magazine The 12 Apps of Christmas | Mobile learning is for everyone…

Related: