Essential Tools, Resources and Examples for Creating Better Web Design Wireframes and Mockups
Essential Tools, Resources and Examples for Creating Better Web Design Wireframes and Mockups
Before developing a website, you need to visualize it using various types of sketches because is more easier to have a mockup rather than a full design which will cost time and money. Nowadays you can find a lot of great tools that can help you create functional sketches in no-time so you and your team can focus on more important tasks. In this article you have a collection of the best tools for creating wireframes and mockups, useful articles about these techniques and also about user experience and web design, and at the end of the article you have some examples of real mockups used in different projects.
iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications. Create a project, add wireframe pages with design components and discuss your creations with others.
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. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloaded in PDF and EPS formats. The kit is completely free, which means that you are allowed to use it for personal and commercial projects.
You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly by using its very easy to use drag and drop interface.
For website, mobile and application development, ProtoShare delivers better digital projects in less time. ProtoShare lets you express ideas visually, so the entire team can understand what you’re trying to say. ProtoShare helps your team make good ideas great and ensures that bad ideas will fail early. You can create while ProtoShare automatically manages feedback, documents decisions, and keeps everyone on the same page before money and time are sunk in various development dead ends.
A documentation system to produce wireframes, maps, flows, storyboards, plans, style guides, specs, usability testing reports, and prototypes too!
Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.
Mockingbird is another web app with a focus on collaboration. It allows you to link multiple mockups together and preview them interactively to get a feel for the flow of your application.
This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x (Mac OS X). It consists of most of the basic elements you’ll need to create user interface specifications. The screenshots below show all of the stencils in this set.
HotGloo combines all the functionality from a classical desktop software with the comfort and benefits of a web app. From low- to high-fidelity, from wireframes to prototypes – with HotGloo you can finally achieve great concepts in a fast, simple and beautiful way. Mock up an idea, gather feedback, review and improve over time. With just one click you can receive feedback on a particular element or interaction, helping you to adjust accordingly.
Using Mockups feels like drawing, but because it’s digital, you can tweak and rearrange easily. Teams can come up with a design and iterate over it in real-time in the course of a meeting.
The Pencil Project’s unique mission is to build a free and open-source tool for making diagrams and GUI prototyping that everyone can use.
SketchFlow, a feature of Expression Studio Ultimate, gives you the ability to quickly and effectively map out and iterate the flow of an application UI, the layout of individual screens and perhaps most importantly for modern applications the transition from one application state to another. This ability to explore and test multiple ideas without investing large amounts of time ensures you are able to find the right solutions for your clients.
Before my current incarnation as a UX Architect I was a Flash developer. I spent five years coding all kind of games, sites, and apps, and gradually progressed from simple bits of script to full-on applications and fully abstracted object-oriented code[...]
Wireframes have become an intrinsic part of the way we work at Headscape. In this post I want to explain why we are so enthusiastic about them, and how we use them in our process. However before we do that, lets take a step back and look at exactly what we mean by wireframes
It’s an exciting time to work in the digital universe. We face more possibilities for creating content than ever, from video to infographics. We also have more places to put digital content than ever[...]
With a not-uncommon sense of despair, I recently read an article on a hack for jailbroken iPads, allowing desktop-like layered window management. The hack is called Quasar, and was created by Pedro Franceschi. It’s unquestionably an impressive technical achievement, and on those grounds he’s to be congratulated[...]
What happens when all the things we based our icons on don’t exist anymore? Do they just become, ahem, iconic glyphs whose origins are shrouded in mystery?
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.
I’ve been doing a lot more wireframing lately and it has me thinking about the usefulness of both the form and the term. What is a wireframe?
Website wireframes are simple line drawings that show the placement of elements on a web page. You can save yourself a great deal of time by editing the layout of a simple wireframe at the start of the design process instead of a complex design later.
Information architecture is an often misunderstood job title. Are they Designers? Developers? Managers? All of the above? In this article we’ll discuss what information architecture is, why it’s related to usability, and what are the common tools/programs used in information architecture.
“To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.” – Paul Rand
I’ve been a user experience designer for the entirety of my career. And in the decade I’ve spent doing this work, I have discovered that there is only one universal truth about how to design an extraordinary user experience: you must design an extraordinary company first [...]
Last week I was asked to start the initial user interface design of a fairly large web application. I took out my sketch pad to start plotting and planning, I wasn’t drawing buttons or thinking of colour schemes – I was wireframing.
All designers say simplicity is important, but what does it really mean to make something simple? Most of the time we think it means less, that by removing stuff we achieve simplicity. We think by keeping content above the fold we’re helping people focus, or by using bullets instead of paragraphs more people will read it, or by cutting text in half it becomes more clear [...]
I recently presented at a conference on the humble wireframe and thought it would be a good idea to run through some key points. I have also noted that some feel the wireframe is dead, though if anything its more alive now than ever.
This is a great example of usability.
I’ve been an ‘indie’ for about 7 years, but I’m no expert. I came to the session hoping to learn how other independent designers handle important issues like process, pricing, managing clients, finding the right clients. Instead I am alarmed that there may be a whole group of people out there posing as UX designers who don’t know their ass from a tea kettle and another set of professional, dedicated designers who could be very successful working independently now scared to try it.
People swear by their design processes. Rachel Glaves insists on sketching by hand; Dan Brown urges extensive wireframing; while Ryan Singer goes straight to HTML. Heated debates arise at conferences as advocates staunchly defend their favorite techniques.
The argument for “designing in the browser: seems very seductive at first glance. The web is an interactive medium that defies the fixed canvas of traditional layout tools, so why not use the browser as your primary design environment?
I was recently fortunate to work on interactive storybooks for preschoolers and toddlers (ages 2–5) for the iPad and Android tablet platforms. Designing for young kids requires looking at things from a child’s perspective. I learned some important lessons by observing kids and reviewing applications while working on these projects.
Bob Walsh, author of the MicroISV books, interviewed nine people with varying backgrounds and job titles to learn how Mockups fits in their workflow, how it helped them, but even more importantly how it did not help them, or what parts of it they wish we could do better, or do more of.
This is an amazing (intentional) portrait of the world’s worst website. Every UXer and designer should see it. An oldie but goodie.
They seem to love it in the US. Many blogs write about the latest trend: Responsive Design. With the arrival of smart phones and tablets, this is a logical solution for those who do not want to invest in various versions of a website for all those different devices. This phenomenon also starts to appear in the Netherlands. Is responsive design a keeper or a temporal hype?
I am a fundamentalist when it comes to wireframing. Its almost like a religious furore. To me they are utterly indispensable and when they are not used it makes me want to smite people!
Sketching is one of the many ways humans have adapted to, to express and expand on ideas. A sketch is more like bringing an idea to a three dimensional view rather than imagining it in the head, which causes our idea to evolve over time as we forget certain elements of our ideas, and replace them with things we thought were part of the idea or ideas.
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 and Mockups examples
UI for SonicSeeds
iPad app design project
Articles Page Wireframe
Wireframe Spotify OS X
Table booking interfaces
Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.