Pages tagged wireframes:

iPlotz: wireframing, mockups and prototyping for websites and applications
http://www.iplotz.com/index.php

iPlotz offers a Web-based tool for quickly sketching wireframes of Web sites and demonstrating navigation between pages.
create mockups of your website design
test drive websites
User Experience Deliverables
http://semanticstudios.com/publications/semantics/000228.php
Fluid 960 Grid System | 16-column Grid
http://designinfluences.com/fluid960gs/
Mockups To Go - A user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups.
http://mockupstogo.net/
Mockups To Go A user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups.
A user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups.
Eclipse plug-in for creating wireframes and screen mockups - WireframeSketcher
http://wireframesketcher.com/index.html
WireframeSketcher is an Eclipse plug-in for creating wireframes, screen mockups and UI prototypes.
WireframeSketcher is an Eclipse plugin for creating wireframes, screen mockups and UI prototypes. * Create UI mockups in no time * Communicate your intent * Get feedback * Build better software!
an Eclipse plugin for creating wireframes, screen mockups and UI prototypes
Het webdesign schetsboek - Webdesign Inventis Web Architects
http://www.inventis.be/blog/het-webdesign-schetsboek
Mockup grids for the 960 framework with a browser bar.
Sketchbook à imprimer avec entête de navigateur et grille
20 Steps to Better Wireframing | Think Vitamin
http://thinkvitamin.com/features/20-steps-to-better-wireframing/
Hmmm, I haven't tried Balsamiq. Is it any good, I wonder?
RapidRabb.it - Accelerate your Prototyping
http://rapidrabb.it/
OmniGraffle Wireframe Icons | Konigi
http://konigi.com/store/product/omnigraffle-wireframe-icons
OmniGraffle Wireframe Icons
Great set of icons!
Get Wireframing: The All-In-One Guide | Hi, I'm Grace Smith
http://www.gracesmith.co.uk/get-wireframing-the-all-in-one-guide/
Wireframing is a great tool to incorporate into your projects as it allows for rapid prototyping and helps to pinpoint any potential problems. I personally find it invaluable on projects to have a visual representation of content, hierarchy and layout. Overall it’s an excellent step to incorporate into your project before the design process begins for both you and your clients.
The Importance of Wireframing — 45royale Inc. — A web design studio in Atlanta, Georgia
http://www.45royale.com/blog/articles/the-importance-of-wireframing/
an gi
adaptive path » blog » Dan Harrelson » Rapid Prototyping Tools
http://www.adaptivepath.com/blog/2009/03/24/rapid-prototyping-tools/
See list of Prototyping Tools. Most are paid. Real tools are: 1. Axure RP Pro 2. RapidRabb.it The rest are BS i.e. Flex, Flash, Visio, Dreamweaver etc etc
16 Design Tools for Prototyping and Wireframing [Design Practice]
http://www.sitepoint.com/article/tools-prototyping-wireframing/
Prototyping and Wireframing
Wall of Deliverables
http://www.wallofdeliverables.com/
(projeto EAD - px)
I ♥ wireframes
http://wireframes.tumblr.com/
Presentations, videos, photos
EightShapes Unify
http://unify.eightshapes.com/
Templates for deliverables such as document starting points, element libraries and page libraries.
The Evolution of a Website Design | Think Vitamin
http://thinkvitamin.com/features/the-evolution-of-a-website-design/
Germ - thought you might enjoy this as much as I did
Last week I was presented with a design brief. It was to design and build a site to promote our new Stack Overflow DevDays event that’s happening this October. Ryan gave me a rough wireframe detailing the content that needed to be included. The layout and design was down to me. As usual I didn’t have a bloody clue where to start… and I didn’t have long to do it. The initial hope was that I get it all done in just over 2 days. So I thought it might be interesting to share with you the various stages of design the site went through before arriving at the finished design. Here’s the wireframe Ryan put together for me wireframe Ok so here goes. Stage 1 Stage 1 Stack Overflow DevDays is mainly gonna be a US tour + a gig in London. So I want a map or something to show where the dates are gonna be. I was going to use a flat map but decided a globe was cooler. I drew the globe based on one I bought from istockphoto.com (Note: Dates and cities shown in these designs were just provisional
The future of wireframes? | Made By Many - London based next generation social media digital agency
http://www.madebymany.co.uk/the-future-of-wireframes-00991
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.
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 rewa
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. This frustration has forced me to change the way that I approach wireframes. And as my approach has changed, I’ve been able to extract more and more value from black key lines and grey boxes…
FlairBuilder - Interactive Wireframes and Software Prototypes
http://www.flairbuilder.com/
FlairBuilder is a cross-platform tool for rapid authoring of interactive wireframes and software prototypes.
Wireframe Magnets (DIY Kit) | Konigi
http://konigi.com/tools/wireframe-magnets-diy-kit
ウェブパーツ
Make your own laminated magnets of UI elements for putting together and markering with text. Obviously isn't faster than just hand-drawing, but certainly looks more polished, ...and would be fun.
The 7 wonders of wireframes « Boagworld
http://boagworld.com/design/the-7-wonders-of-wireframes
.
Using Wireframes to Streamline Your Development Process | Webdesigner Depot
http://www.webdesignerdepot.com/2009/07/using-wireframes-to-streamline-your-development-process/
Creating a wireframe is one of the first steps you should take before designing a website. A wireframe helps you organize and simplify the elements and content within a website and is an essential tool in the development process.
Infromación para generar wireframes, muy utiles para los proyectso web...
The Importance Of Wireframes In Web Design And 9 Tools To Create Wireframes | Onextrapixel - Showcasing Web Treats Without Hitch
http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/
The Art Of Applying Rule Of Five Plus Or Minus Two For An Effective Wireframe | Onextrapixel - Showcasing Web Treats Without Hitch
http://www.onextrapixel.com/2009/07/20/the-art-of-applying-rule-of-five-plus-or-minus-two-for-an-effective-wireframe/
When presenting any kind of information on a page, avoid overwhelming your visitor with too many choices. Its best to use no fewer than 3 and no more than 7 groupings of elements.
The Art Of Applying Rule Of Five Plus Or Minus Two For An Effective Wireframe |
Napkee - make your mockups come alive
http://www.napkee.com/
Napkee lets you to export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3 at a click of a button. * Balsamiq's perfect companion * No coding skills required * Pays for itself after one use launch price 79 dollars Napkee Install it, Version 1.0.6 (August 5th, 2009) - problems downloading? By installing this software you are agreeing to Napkee Labs' End User License Agreement Try it, Once you have installed Napkee you can try it for as long as you want. Import Balsamiq Mockups files (BMML) and see all the features of Napkee. The export functionality is the only thing that is not working in the free trial, but you can enable it by buying Napkee! Buy it! $79/user Tried and liked what you see? To unlock the export feature just follow the instructions on the buy it page. We are also giving out licenses for free.
••• hello | Hot Gloo •••
http://hello.hotgloo.com/
Hot Gloo is designed by IA's for IA's. With the help of the elements you can create a whole world out of wireframes. Just drag and drop, scale, link, name and rename them - it's super easy and intuitional.
Sitio para hacer wireframes
Para hacer wireframes de sitios web
ForeUI - Easy-To-Use UI Prototyping Tool
http://www.foreui.com/
software de prototipos de software
Quick Wireframe Prototype ForeUI can rapidly create wireframe prototype of your software or website by dragging predefined elements to the plot. You can also customize your own elements. More...
EaSynth ForeUI is an easy-to-use screen mockup tool, you can use it to create prototype of software or website.
原型制作工具,比较有意思
Android GUI PSD Vector Kit | Freebies | Smashing Magazine
http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/
"In this post we release Android GUI Starter Kit, a set that comes with several button elements as well as different interface options for Android GUI."
In this post we release Android GUI Starter Kit, a set that comes with several button elements as well as different interface options for Android
35 Excellent Wireframing Resources | Developer's Toolbox | Smashing Magazine
http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
MockFlow - Easy Wireframing for Software and Websites
http://www.mockflow.com/
Create and collaborate interactive mockups for your software and websites.
Pwireframing: Paper Wireframing - mStoner - Blog
http://www.mstoner.com/index.php/blog/comments/651/pwireframing_paper_wireframing
근데 꼭 이렇게까지 해야하나?
an article on how to wireframe using good old paper.
JustProto - Prototype your world!
http://www.justproto.com/en/
Online, diagramas de processo, elementos padronizados, bom controle de texto, poucos eventos interativos.
Why Your Next Website Should be Designed with Wireframes | Build Internet!
http://buildinternet.com/2009/09/why-your-next-website-should-be-designed-with-wireframes/
Getting a design to click can take time. In many cases, it takes several rounds of revisions to even get to an effective starting point. What can you do to give yourself a better chance at designing something great sooner?
Integrating Prototyping Into Your Design Process - Boxes and Arrows: The design behind the design
http://boxesandarrows.com/view/integrating
Grand Theft Auto: Chinatown Wars is one of the most subversive, provocative video games of recent years. It may also be one of the most important, not because of its content but because of how it is delivered.
Briefs: A Cocoa Touch Framework for Live Wireframes
http://giveabrief.com/
Let's you use a wide variety of wireframe/mocks/protpe graphics to begin testing your app a bit before going to the full development phase.
Sounds like this could be a killer app for designers.
A Cocoa Touch Framework for Live Wireframes
adaptive path » blog » Dan Harrelson » Rapid Prototyping Tools Revisited
http://www.adaptivepath.com/blog/2009/09/16/rapid-prototyping-tools-revisited/
How to create your best website layouts ever | News | TechRadar UK
http://www.techradar.com/news/internet/how-to-create-your-best-website-layouts-ever-643905
Using Wireframes to Bring Your Site Together | Design Reviver
http://designreviver.com/articles/using-wireframes-to-bring-your-site-together/
Wireframes are the blue prints that define and allocate a Web sites content and behavior. They are not bound by colors, fonts, and anything that may surface on the site as part of any content.
Inhoud rammelt wat, voorbeelden zijn okay
Mockingbird
http://gomockingbird.com/
Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.
A Collection of Useful Web Design Wireframing Resources : Speckyboy Design Magazine
http://speckyboy.com/2009/11/23/a-collection-of-useful-web-design-wireframing-resources/
Browser windows, UI elements and more essentials. Good resource post.
Browser templates for wireframing
Essential. It has safe area templates, browser templates, OS Form Elements, buttons, iPhone GUI Elements, Wireframing icons and even proof reading marks.
There are templates for, possibly every browser in every size, there are form and button templates for all browsers and a hell of a lot more.
Design View / Andy Rutledge - Where Wireframes Are Concerned
http://www.andyrutledge.com/where-wireframes-are-concerned.php
While there remain certain specific contexts where it is advisable to craft and present wireframe layouts for client evaluation and approval, this practice is often a really bad move and one made at the wrong moment in the design process, and for the wrong reasons. Wireframes can be useful, valuable artifacts for informing the designer’s process. But they often fail miserably as a first-step deliverable for clients.
Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge
before you create a wireframe for client evaluation and approval, ask yourself: how will this help my client in the project process? Again, evaluate your answer carefully before you decide to craft a wireframe for your client’s evaluation …and before you commit to do so as a part of the project deliverables. Context matters.
Some good points here. Sometimes wireframes are necessary, but other times they get in the way.
Free Sketching & Wireframing Kit
http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.
10 Beautiful Sketches for Website Prototypes – woorkup.com
http://woorkup.com/2009/12/28/10-beautiful-sketches-for-website-prototypes/
When you start designing a new website it’s very useful to sketch out a first idea of page layout using paper and stencil. This approach help you define easily a working draft of the final version of your website. In general this is a top-down process: you can start sketching first the main sections and then adding more details progressively. In this post I want to suggest you some interesting examples of beautiful sketches for website prototypes for your daily inspiration.
geekchix.org - Ivana Jurčić – Lilit » Blog Archive » A Collection of Printable Sketch Templates and Sketch Books for Wireframing
http://www.geekchix.org/blog/2010/01/03/a-collection-of-printable-sketch-templates-and-sketch-books-for-wireframing/
Blog for designers with useful resources - templates,
esto le gustaría a @kmerino
10 Completely Free Wireframe and Mockup Applications : Speckyboy Design Magazine
http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/
10 Completely Free Wireframe and Mockup Applications
Sketchy Wireframes - Boxes and Arrows: The design behind the design
http://boxesandarrows.com/view/sketchy-wireframes
Omnigraffle has some empty circles here
explanation of pros & cons of sketching wireframes vs. computer, plus computer apps that look sketchy. p: Sketchy wireframes allow practitioners to guide creativity and problem solving in the early stages of projects, rather than getting lost in a sea of documentation. Hopefully, this trend will continue as software manufacturers focus on enhancing their tools for creating computer-based sketchy wireframes.
"...there is a growing trend toward hand-drawn [wireframe] styles, as evidenced by an expanding amount of literature and workshops on the subject. This is a positive step in the evolution of our field. Sketchy wireframes allow practitioners to guide creativity and problem solving in the early stages of projects, rather than getting lost in a sea of documentation."
Describes a alternative for user interface wireframes between computer-generated boxes and handdrawn versions. "Computer-based sketchy wireframes. These allow computer wireframes to look more like quick, hand-drawn sketches while retaining the reusability and polish that we expect from digital artifacts." Lists popular tools and how well they support sketchy wireframes. Author: Aaron Travis, Boxes and Arrows website, Dec. 5, 2009.
Gliffy - Create a Website Wireframe with this Free Wireframe Tool. Gliffy Free Web Wireframe Software!
http://www.gliffy.com/free-wireframe-software/
Create a Website Wireframe with this Free Wireframe Tool. Gliffy Free Web Wireframe Software!
gliffy.com: create website wireframe
How wireframing makes your website designs better
http://briancray.com/2009/12/02/value-of-wireframing-website-design/
50 Free UI and Web Design Wireframing Kits, Resources and Source Files - Smashing Magazine
http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/
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:
Guidelines, Tools and Resources For Web Wireframing | W3Avenue
http://www.w3avenue.com/2010/02/03/guidelines-tools-and-resources-for-web-wireframing/
The Life Cycle of a Wireframe | Blog | Nick Finck | UX/IA Pro, Speaker, and Community Cultivator.
http://www.nickfinck.com/blog/entry/the_life_cycle_of_a_wireframe/
For those who are looking for my slides from the Puget Sound SIGCHI lecture and for those who missed it but are curious, here is my presentation. It focuses specifically on my personal process for creating wireframes. There are 4 parts to my process, each has a series of deliverables that feed into it and principals I try to keep in mind, the outcome is either a single or a series of IA deliverables. My overall strategy for IA is 3 step process; understanding the problem (note: not merely identifying the problem but really understanding it), find a solution (there may be more than one solution, but there is often only one right solution), and present the solution (a large part of your job as a IA is presenting your work so the client can understand the results).
iA » iPad Stencil for Omnigraffle
http://informationarchitects.jp/ipad-stencil-for-omnigraffle/
This is the first version of an OmniGraffle template for folks designing iPad apps.
Free Web UI Wireframe Kit | Fuel Your Interface
http://www.fuelyourinterface.com/free-web-ui-wireframe-kit/
15 Quality Web-Based Applications to Create Mock-Ups and Wireframes | Spyre Studios
http://spyrestudios.com/15-quality-web-based-applications-to-create-mock-ups-and-wireframes/
Wireframe Icons, Royalty Free EPS and PNG | Konigi
http://konigi.com/store/product/wireframe-icons-royalty-free-eps-and-png
Minimal Icons BW
15 Desktop & Online Wireframing Tools | UX Booth
http://www.uxbooth.com/blog/15-desktop-online-wireframing-tools/
mocking web pages., wireframes
Lumzy
http://lumzy.com/index.cfm
ブラウザ上でモックアップを作る
Mockup and prototype tool
Lumzy is a Mockup and Prototype creation tool for websites and applications.
Sketchbooks of a Web Developer | LOOKS GOOD Design Magazine
http://www.looks.gd/design/sketchbooks-of-a-web-developer
te by Nathan Smith
设计好东西
Free Printable Sketching, Wireframing and Note-Taking PDF Templates - Smashing Magazine
http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/
Free Printable Sketching, Wireframing and Note-Taking PDF Templates
10 Excellent Tools for Creating Web Design Wireframes | Tools
http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes
A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio - Morten Just
http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/
Wireframe kit for Google Drawings & why it's better than Omnigraffle & Visio - http://bit.ly/aK9UVn
The future of wireframes? « Made by Many
http://madebymany.co.uk/the-future-of-wireframes-001992
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...
It’s time designers stepped up to the plate and claimed wireframes as their own.
18 Wireframing, Mockup And Prototyping Tools To Plan Designs | Graphic and Web Design Blog
http://www.1stwebdesigner.com/design/wireframing-mockup-prototyping-tools-plan-designs/
Useful (Offline) Utensils and Toolkits for Designers | Tools
http://www.hongkiat.com/blog/useful-offline-utensils-and-toolkits-for-designers/
Official Google Docs Blog: Rapid wireframe sketching in Google Docs
http://googledocs.blogspot.com/2010/05/rapid-wireframe-sketching-in-google.html
Cool tutorial on using Google Docs for creating mock-ups.
Official Google Docs Blog
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups
18 Great Examples of Sketched UI Wireframes and Mockups
手書きのワイヤーフレーム。まとめ。
10 Free Printable Web Design Wireframing Templates | Freebies
http://webdesignledger.com/freebies/10-free-printable-web-design-wireframing-templates
RT @ppixels: Useful: 10 Free Printable Web Design Wireframing Templates http://j.mp/cT1ruS
Výběr
Wireframe Showcase - Home
http://www.wireframeshowcase.com/
RT @ppixels: #Webdesign Wireframe Showcase http://j.mp/9PPurS
Keynote Wireframe Toolkit - Get your Keynote Kung-Fu on
http://keynotekungfu.com/
How to make wireframes using keynote.
线框图工具包
Make more of your mockups - Mocksup
http://mocksup.com/
nice application which turns static designs into clickable prototypes.
Make more of your mockups - Mocksup
http://mocksup.com/
nice application which turns static designs into clickable prototypes.
20 Free Web UI Element Kits and Stencils :Speckyboy Design Magazine
http://speckyboy.com/2010/07/21/20-free-web-ui-element-kits-and-stencils/
20 Free Web UI Element Kits and Stencils :Speckyboy Design Magazine
http://speckyboy.com/2010/07/21/20-free-web-ui-element-kits-and-stencils/
Web-based prototyping software for interaction designers: quplo
http://quplo.com/