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. 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. The final output will be a blueprint from which designers, developers, architects and project managers will work and makes sure everyone is in sync. 2) Make it Functional, Not Pretty There are variations in how wireframes are presented and this is reflected in the various tools available. 4) Decide Who’s in Charge? design Related:  Planning

9 Common Usability Mistakes In Web Design | How-To | Smashing Ma Advertisement By now, all good designers and developers realize the importance of usability for their work. Usable websites offer great user experiences, and great user experiences lead to happy customers. Delight and satisfy your visitors, rather than frustrate and annoy them, with smart design decisions. Here are 9 usability problems that websites commonly face, and some recommended solutions for each of them. 1. Hyperlinks are designed to be clicked, so to make them usable, it makes sense to ensure that they’re easy to click. Here’s an example of the same interface element, the comments link, but this time with a much larger clickable area: Newspond comments link. Why would we want a larger clickable area? <a href=" style="padding: 5px;">Example Site<a> You can read more about padded link targets for better mousing in a 37signals article on padded link targets. 2. Pagination refers to splitting up content onto several pages. 3. 4. The Basecamp landing page. 5.

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. UX is more than that, they clarify. 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. The Problem with Wireframes Today Bottom line? p.s.

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. You're free to Share and Remix the Canvas. Please let me know how it works for you.

Bargain Basement Usability Testing | Think Vitamin The subject of usability generates a dichotomy between what we think and what we do. We know it is good to focus on usability. We need only look at Apple and the iPod to know that it provides tangible benefits. The Perceived Losses of User Testing There is a wide-spread perception that user testing is time-consuming and expensive, and to some extent with good reason. A usability consultant, testing in a lab, with carefully selected subjects is effective. The Real Profit of User Testing The benefits provided by user testing cannot be understated. The benefits of user testing include: Fast problem detectionIncrease user satisfactionReduced support costsIncreased efficiency Bargain Basement Usability The bargain basement approach to usability testing was pioneered by usability experts Steve Krug and Jakob Nielsen. Test a little but oftenUse a limited number of testersDon’t become too concerned with who you test Test a Little but Often Key to this approach is the principle of “little but often.”

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. 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 While I don’t have time here to do a comprehensive comparison of all the tools we’ve used, here’s a brief comparison of some of the more common ones. Visio OmniGraffle General Tips

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. With the UX Series I want to question how/if using UX design methodologies could help us produce better interactive factual narratives. 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.

Top 29 Free UX Tools and Extensions Ever wonder how usable your site appears to someone with a disability, slower connection, or different setup? This list of tools highlights some of the most useful tools and extensions for making your website more usable. Accessibility Tools Web Accessibility Checker The accessibility checker evaluates your Web page and produces a report of all accessibility problems for your selected guideline. The checker identifies known problems, likely problems, and potential problems. Worldspace Accessibility Analysis Worldspace is an accessibility analysis tool designed to identify errors with Section 508, and the Web Content Accessibility Guidelines. The Flicker Rate Test for GIF images helps designers test images to ensure they won’t affect users with photosensitive epilepsy.Flicker Rate Test for GIF Images People with photosensitive epilepsy can have seizures triggered by flickering or flashing. Validators CSS Validation Service Validate your CSS or CSS documents or HTML with CSS. Color Tools

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. 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. By taking the time to create at least a simple wireframe, you can make sure that your designs will take into account all the different page elements that need to go into the design, and that they’re positioned in the best possible way. Wireframes give your page layouts a great starting point and a solid foundation. Wireframe vs.

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