Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

October 16 2013


Colors of Fall 2013: 21 Fresh and Free Design Resources


Hello designers, developers, web enthusiasts of the globe. We are back with another edition of our monthly collection of the freshest design resources the month of September had to offer. If you know our series already, you know you can expect the best HTML, CSS and PSD templates, as well as UI-kits for your next great web or native app. All of the resources showcased here are fresh, free and easy to download, suitable for experienced and amateur web designers, so be sure to download the ones you love and share them with everyone you know!

April 24 2012


Breaking Out of the UX Status Quo

As a UX Designer you’ve committed your career to helping people. You challenge the status quo everyday…but are you challenging it enough? How about with your deliverables? Your customers are people, too! Are your common deliverables – personas, sitemaps, user-flows and wireframes – really usable or are they just getting in the way?

It’s no secret to us: user experience designers speak their own language. From personas to user journeys, card sorts to wireframes, there’s a certain vernacular to our profession. It’s something that we learn over the years but that our clientele must overcome immediately.

Frustrated with the conventional deliverables used to communicate our work, I began to reconsider their presentation. What resulted is certainly not “conventional,” but – taken together – they are arguably more usable.

Personas are like resumés

Personas come in all shapes and sizes. Contrary to what they’re designed to do, however, rarely do they convey a good sense of the user. Most look like resumés: sterile and lacking in personality.

When was the last time you hired someone based on their resumé alone? Even with a resumé you still need to conduct an interview in order effectively gauge a prospect. Seeing someone and listening to their words reveals their personality – the key element missing from most personas.

So I started a searching for a better way. The first thing I did was move my deliverables online. This allowed me to link them together so that clients could click between them. For desktop projects I use Axure and for mobile and tablet I use Both of them are great tools as they create clickable, HTML-based output.

Next, I searched high and low for inspiration. This persona, created by User Insight, is definitely different. Therein, the user (Tina) does not consist of mere bullet points; she comes off as a real person. Jason Travis’s personas are infinitely more visual. Being picture-based, though, they lack any descriptive text whatsoever.

Inspired by these (plus adding my ideas and style) I tried to put together a new version of the traditional persona.

Barnabas's persona

You can view a demo here.

This approach paints a much more holistic picture of a person. Not only does it include their goals, it includes important, ancillary information such as their worldview, what they are looking for and their motivation. Further, the overheard conversation adds just the right amount of insight into his/her life. The “questions” section helps identify the areas the target user is unsure of and the “life pieces” section makes the persona human-like with feelings and desires.

Sitemaps are like spiderwebs

Sitemaps are (as most of you know) used to “map” the major components of a website to a rather sparse-looking diagram. Because they’re so sparse, they also tend leave a lot to the imagination. This gives rise to common retort: “What’s this page do, again?” “Can you change this page to that?” “How about we scrap that page”

You know the routine. Because clients come to us for the visual thinking they often can’t turn these sparse diagrams into anything “useful” on their own.

This got me thinking: why not just put the thinking alongside the map?

Barnabas's persona

You can view a demo here.

Even though it’s just a small difference, this approach pays off. It helps our clients understand the internal monologue that drives the narrative. Knowing the reasoning behind your decisions helps others understand (and agree) with your perspective.

User journeys are like electric panel diagrams

User journeys map the steps of a user, correlating goals (explained in Personas) with a site map to better illustrate how users will get things done. As a result, designers can make informed suggestions to the site’s information architecture.

The problem is that most user-flows are very dry. It is difficult to feel empathy with a user and their journey if all you see are boxes and arrows (similar to electric panel diagrams).

After scouring the internet looking for something better I found a couple of good approaches.

Jakub Linowski's user flow

Jakub Linowski’s Grand Narratives & Play Points diagram offers a compelling yet easy-to–understand presentation based on wireframes.

A user journey from the Bluepoint+ deliverable framework

Blueprint+ (Service Design Visual) is great because it includes the persona and a timeline.

Carlos Abler's user journey

Carlos Abler’s Multiuser WireFlows combines the two former ideas.

All of these are good but they all seemed to be missing something.

I’ve been always fan of recycling, so I thought there has to be a way to re-use the sitemap and display the user-flow on it. I also wanted to re-use my personas in order to create empathy for the user’s journey. This led me to the following presentation:

Barnabas Nagy's user flow

You can also view a demo here.

As you can see, I simply re-used my sitemap and added one of my persona with speech bubbles. In the speech bubbles I added the thoughts of the persona at every stage of their journey. This adds a human touch. The thoughts of the persona can explain to clients the reasons for the journey taken and the scenario puts these thoughts into context. It is simple but visually understandable way to show your user-flow.

Clients that already understand your sitemaps and personas will have no trouble seeing the two work together.

Prototypes/wireframes are like abandoned houses

Wireframes created in the absence of personas are broken. Yet we do this all the time. Why do we create personas if we don’t use them?

Looking for a better way, I saw a picture in the essay of Rósa Gudjónsdóttir:

A man working next to two cardboard cutouts of personas.

I was fascinated by the idea of having my personas around me. I started to print my personas and stick them to the wall in front of me. It helped, however, the screen and the wall are two different worlds, analog and digital. No good.

I eventually placed my personas in the margin of my prototype to serve as a constant reminder of who my users are:

A wireframe juxtaposed with persona avatars.

You can also view a demo here.

Not only does this help us to not design for ourselves, our clients and stakeholders are now constantly reminded who will use our design. The time and effort we put into establishing our personas is never lost.

Never stop learning

As I mentioned earlier, these ideas have helped me better convey my work to my clientele. They are not perfect, of course, nor were they intended to be. I am certain that it is possible to tweak them or in fact come up with even better presentations that work for you.

Are you also frustrated with common UX processes or deliverables? Don’t let the status quo get you. Always try to make things better, iterate and optimize. Surprise your users – err, clients – with something new and innovative as this is the way forward. If you’ve tried your hand at something different, be sure to share your result in the comments below!

Sponsored post
Reposted byLegendaryy Legendaryy

February 13 2012


Get Your Kits: Fresh Web and Mobile UI Kits, Wireframe Kits and PSD’s


Today, we have a useful compilation for our readers of fresh web UI kits, mobile UI kits and wireframe kits complete with PSD files that will certainly come in handy when you are designing projects. Some basic user interface elements are always welcome toolbox additions by designers. We need them for a wide range of projects in order to able to easily create an accurate UI model of either a website or app.

We hope that this round up of web and mobile user interface kits will prove helpful for the next mock-ups your projects demand. There were quite a bit of tools crammed into this post, so we have split it up onto two pages. Enjoy!

Get Your Kits!

Butterscotch UI Kit
This free download is a gorgeous UI kit with resizable shape layers in a clean, well organized PSD file.


Free Candy UI Kit
This bright and cheerful user interface kit contains clean, pixel precise elements that are ideal for web and app projects.


Free Dark UI Kit
Each element in this sharp, clean pack has been hand-crafted in Photoshop, and is fully scalable with vector shape layers. Enjoy!


Light UI Kit (PSD)
This kit has a very light look to it and is also very clean. Everything is 100% vector so you can re-scale this to any size needed.


Heads Up Display UI Kit
Here is a collection of over 50 pixel perfect HUD (Heads Up Display) user interface elements, for wire-framing and mocking-up desktop and web apps.


New Twitter Profile Page GUI PSD
The PSD provides the full mockup with all layers in vectors, allowing you to scale up the design elements without loss of quality.


iPhone UI Kit
These fresh iPhone and iPod Touch user interface elements are beautifully simple and elegant. This kit contains menu bars, list styles, buttons, form elements, icons, and more.


UI Kit
This set contains some truly beautiful UI elements. The link will take you to the comment where you can download the UI kit.


The Ultimate Wireframe UI Kit
This set contains over 60 of the most popular elements in web design. And each element has been created from scratch with Shape Layers, meaning that the whole kit is 100% scalable, and super-easy to edit.


Dark UI kit
Everthing in this wonderful, dark kit is 100% vector, so you can re-scale the elements to any size needed. It also includes a Photoshop PSD file.


Wireframe Sketch Sheets
Included in this set of sketch sheets are 10 printable templates for website designs, and iPhone and iPad app mock-ups. The designs are proportional and use a grid of 32 pixel squares for guidance and straightforward translation to Photoshop or Fireworks etc. when you are finished.


Votes & Ratings UI Kit
Here is a set of fully layered, editable Photoshop web elements for voting systems and ratings on the web. Everything in the pack should be scalable without any redrawing or major effort.


Simple UI Kit
This simple kit includes radio buttons, checkboxes, search boxes, regular and rounded buttons, on and off gui switches and more! Everything is 100% vector and can be re-scaled to any size if needed.


Blanc Web Elements
This set of web and user interface elements was created specifically for light, crisp websites and applications.


Minion UI
The idea behind this user interface kit was to make a dark but sleek UI, that borrows on styles from OS X and Ubuntu. Mission accomplished.


Facebook Fan Page GUI PSD
This kit allows you to mock-up fan pages for your clients looking to expand their brand to FB. All layers are vectorized, allowing you to scale up the GUI without loss of quality.


Lion Ui Kit Preview
This Mac OS Lion UI kit is perfect for those who need to create mock-ups in a Lion environment. The link will take you to the comment where you can download the UI kit.


Creamy UI Kit
This kit includes radio buttons, checkboxes, a percent slider, previous/next buttons, rectangular/circular buttons, search boxes, tick/cross buttons, and the on/off GUI. Everything is 100% vector and can be scaled to any size if needed.


Media Toolbar UI
This is a simple, sleek designed media toolbar user interface that’s 100% vector, so you can re-scale this to any size if needed.


iTunes UI Kit
This unique set contains some rather beautiful iTunes based UI design elements that could be just what your next project needs.


More Kits Are Waiting

That’s right more awaits. Now feel free to stretch for a minute, or go on and head over to page 2 of the post to get some more tools for your resource stockpiling.

May 31 2011


Tools for Facilitating Feedback on Prototypes and Wireframes

Tools for facilitating Feedback on Prototypes and Wireframes

Wireframes and Prototypes are an essential tool when building websites and applications for clients. They’re more than just a simple deliverable or milestone—they function as a “common communication language” as Todd Zaki Warfel puts in Prototyping: A Practitioner’s Guide. Prototypes and Wireframes give us the ability to share ideas that can otherwise be difficult to communicate, and sell designs that might otherwise be dismissed.

Also important is the ability for your clients or team members to leave feedback on said wireframes and prototypes. To keep the process quick, to the point, and a two-sided conversation, people have created a lot of clever tools and processes for discussing these early design stages. In this post, we take a look at some useful ways for for facilitating these conversations..


Easily take notes on pages and share them with your team. Also, share a secure link with anyone you want to be able to take notes as well.

Notable has one of the most refined interfaces I’ve seen for taking notes on top of wireframes/designs/prototypes. Using Notable, you can quickly upload pictures to take notes on top of, or take snapshots of a site directly from a URL.

From there, it’s possible to share a secure URL with your team or a client so that they can also leave feedback on a design. Creating annotations over a design is as easy as dragging a box, and leaving a comment.

One feature we’d like to see from Notable in the future is the ability to take snapshots of URL’s that require a user to be logged in. Presently, it’s possible to use a bookmarklet to take quick captures of any page you visit in a browser, but Notable doesn’t seem to be able to capture pages that require a log in.

Notable has a free plan that’s useful for evaluating the service, and various other paid plans that allow you to organize projects, teams, and pages (as well as brand your Notable dashboard).

Visit Notable →

Recurse App

Recurse allows people to make quick notes over a website very easily.

While it doesn’t appear that Recurse App has been actively maintained for a few month, it’s definitely one of my new personal favorite tools for communicating ideas with clients. Interestingly enough, it seems to be entirely free at this point for unlimited projects.

Recurse App allows you to create quick mockups of what your wireframe or design might look like in a web environment. No interactive elements are available (ie: you couldn’t hook together a group of wireframes to create a quick mock prototype or anything), but both you and others you share your project with can take notes on top of the design.

From your user dashboard, you have the ability to create Clients and Projects, similar to other solutions like Basecamp. Projects can be password protected if you need your work to be hidden from the public view. You’re projects are given a link you can share with anyone, and people can view pages in the project, leaving notes without registering for any user account. It’s very quick, very easy to use, and great for getting quick feedback from parties involved with a project.

Visit Recurse →


Protonotes let's you create a note taking environment directly on your server.

Protonotes let’s you create a note taking environment directly on your server.

Protonotes, like Recurse and Notable allows you to take notes over a website, but there are a few differences. In regards to implementation, Protonotes is a javascript that you drop into your site, and it can even be configured to store notes in your database rather than an off-site database. Also worth noting is that Protonotes is really built to be used on prototypes rather than Wireframes.

Personally, I’ve had mixed success with Protonotes. I’m not sure if I ran into a simple error while trying it out, but I seemed to have trouble when viewing a site using different viewport resolutions. Protonotes is free, but I’d want to see consistent note placement before using it to share thoughts back and forth with a client.

Visit Protonotes →


Basecamp is one of the most widely used project management tools online, and is great for handling many types of communications when working on projects.

Does Basecamp need any introduction? One of the most well known project management tools online (perhaps the most popular), Basecamp is used by millions of people to manage nearly every facet of small to large-scale projects.

That said, there are a few reasons Basecamp may not be the most ideal tool for sharing wireframes. For instance, Basecamp is a bit clunky, and by that I simply mean that when you use Basecamp, you get everything that comes with it. For long term projects where it’s essential to stay organized, this is great. For a really fast interaction between a single designer and single client, the initial work it takes to kick-off a project/share a file/& get a first round of feedback could likely be done much more quickly in a more light weight application.

I’m a big fan of Basecamp overall. At work, we use it nearly everyday to manage our projects, and have found it to be extrordinarly useful. What’s more is that we’ve found that a lot of companies we frequently do work with already use it, making collaboration super easy.

Visit Basecamp →

Google Drawings

Google Drawings offers a robust set of tools for creating wireframes, and it’s free!

As a part of Google’s suite of document tools in Google Docs is a Drawing document. I’m not entirely sure if there is a suggested purpose for the drawing tools, but they actually work really well as a wireframing toolkit (and it’s free too!).

If you’re team is on a budget, definitely look into wireframing with Google Drawings. It’s pretty robust for a free tool, has a pretty easy learning curve, and comes with everything you expect to find in Google Docs applications (Revision history, cloud access, integration with other Google Docs apps).

As a communications tool, it’s possible to create speech bubbles over the wireframe (though it isn’t a feature rather than a clever use of shapes). Alternatively, you can drop a Google Drawing into another Google doc, and take notes there. If you take advantage of Google Docs “Collections”, you can setup a collection for a project that everyone in your team has access to, that way new documents in the collection are shared with everyone automatically.

Visit Google Docs →

Skype Screen Share

Skype is a powerful web conferencing tool, and can also be used to share screens.

Skype is a powerful web conferencing tool, and can also be used to share screens.

There are other applications for this as well (for instance, Mac users can use iChat), but Skype Screen Share is a great cross-platform tool for remote desktop viewing.

More than just an effective way to get feedback from clients, Skype actually has proven to be a useful tool for setting up a remote co-working environment. While wireframing and prototyping, we sometimes use Skype screenshare to collaborate as if we’re working side by side. One monitor is dedicated to my partner’s screen, while the other screen serves as my active workspace. Similarly, my partner can watch what I’m doing as we give each other feedback or solve problems together.

I’ve also worked with many clients and project managers who are already familiar with Skype as a conferencing and screen sharing tool. Many of them aren’t afraid to use it to convey a though with me about their product, while many are sometimes a bit hesistant using tools that are new to them.

Visit Skype →

Develop an in-house solution

One thing we’ve started doing in combination to managing projects with Basecamp, is documenting our process using some in-house tools we developed.

While Basecamp is an amazing communications tool, it didn’t include some of the features we were looking for in our own practice. We wanted to share some complex data visualizations and reports that we could discuss with our clients, and also have a place where a client could navigate through research we conduct.

An custom built solution might offer you the flexibility to share more complex ideas with clients and others working on the same project.

Our custom solution is tailored to our process and practice, so it probably wouldn’t work for everyone. However, we are considering creating a possible application that could be used by other practicioners that are looking for a good documentation tool. It’s not available yet, but we have already released a small part of the system that is useful for creating sitemaps.

Any others?

Do you use any tools for communicating ideas back and forth with your team & clients that aren’t listed here? What does your usual communication process look like?

Advertise here with BSA

November 02 2010


Wireframing: Tips, Tools, and Techniques (Pt 1)

Alt Desc

Wireframing isn’t just a pen and paper process any more.
picture: Chocolate Tools by Janne M

Wireframes are an indispensable part of the website creation process. They provide a quick and easy means of communicating aspects of the site, ranging from information architecture to page layout, and they allow everyone involved to consider and, hopefully, agree upon all the fundamental aspects of the design.

EDITOR’S NOTE: This article is part 1 in a 2-part series about wireframing. Be sure to check out part 2 this coming Thursday!

A consensus has arisen over the importance of wireframes during the design process. However, no clear consensus has developed about the best tools or techniques to use when creating wireframes. A plethora of different ways have cropped up. So many that it’s hard to know the best way to go about it. A definitive answer to this seems some way off, and so it could be a while before any one tool becomes the standard.

In the these two blog posts, I’m going to look at some of the relevant tools, techniques and tips available. In this post I’ll give an overview of the tools, while the following will cover some tips and techniques to smooth your wireframing process.


Alt Desc

picture: Chocolate Tools by Janne M


When Adobe acquired Macromedia a few years ago, no one was sure how Photoshop and Fireworks could be reconciled within the same family of products. There was so much overlap between them that it seemed a case of either/or. Quickly, however, it became clear that Adobe was going to push Fireworks in the direction of wireframing and, as a result, the two would complement each other nicely. Adobe intends designers to create rapid, clickable, HTML wireframes within Fireworks and then—once tested on users and approved by the client—move onto creating hi-fi imagery within Photoshop.

And as it turns out, Fireworks is a really great tool for creating wireframes. Through a combination of layers, pages, behaviours, symbols, and an inbuilt library of standard web design elements, it’s possible to quickly create wireframes that can be exported as clickable HTML. The HTML is not the type you’d necessarily want to use on a live site, but it does the trick for a client demo.

The learning curve is moderate but once you’ve got your workflow down it’s possible to create wireframes that leverage common elements, enabling easy insertion and rapid updates across multiple pages. This is a godsend when trying to maintain and quickly refine a set of multipage wireframes.

To get a better insight into how this might work, Adobe have some nice Fireworks wireframe tutorials that are worth reviewing.

Google Drawing

This is a reasonably new option for wireframing. As with a lot of the Google tools, it’s a got a limited set of well worked out features. You can create free form vector shapes, edit fill colour and stroke, insert images, and select from a nice vector shape library. You can group objects, set order (z-index), and group select by click dragging. Basically, it’s akin to a really pared down version of Fireworks, but the lack of layers and ability to lock objects makes it a little fiddly. Despite this, Morten Just believes it beats Visio & Omnigraffle.

5 reasons Google Drawings beats Visio and Omnigraffle

  • It’s live. The entire team can work on the same document and see each other’s work instantly
  • The wireframes live in the cloud, no sending files around, no outdated documents
  • The risk of losing data is zero. It saves for every edit you make
  • It’s free
  • Most people already have a Google account, so no sign up required

Best of all, Morten offers up a number of templates / stencils within Google Docs to enable really rapid prototyping.

The work flow for this revolves around the idea that you access the templates provided by Morten, make a copy and then edit away. The working page area within Google Drawing is conceptually divided into two, the canvas and the gutter (the area outside of the canvas). Morten has created numerous handy stencil shapes (scroll bars, popup windows, close buttons, search boxes etc) which you copy from the gutter and then paste onto your canvas. It’s a little circuitous perhaps, but is still a really nice setup given the constraints of Google’s fledgling drawing app.

While I prefer the workflow for Fireworks a little better, the work of Morten Just highlights a key benefit of the Google Docs platform: the ability to collaborate and share resources. As Google fleshes out their product a little more, and as people share resources, Google Drawing is likely to become a viable wireframing tool.

Best of the rest: other wireframing tools

Alt Desc

Picture: tools of the trade by Muffet

Pencil Project

An opensource Firefox plugin with built-in stencils, multi-page documents and background pages.

  • Platform: Firefox Addon / Linux & Windows
  • Price: Free


Nice wireframe tool focused on interactivity.

  • Platform: Cross platform via Adobe AIR
  • Price: $99 outright purchase, or $24 per month


Collaborative tool for creating UML, process flows and wireframes.

  • Plaform: Flash enabled browsers
  • Price: $5 – $10 per month


Creates clickable, navigable wireframes. Also good for collaboration and task management.

  • Platform: Flash enabled browsers and Desktop via Adobe Air
  • Price: Free limited function demo. $99 per year for single user online (volume discount available). $75 for desktop version


Popular tool for creating wireframes with a nice hand sketched aesthetic.

  • Platform: Cross platform desktop
  • Price: $79


Great web based tool currently in Beta. It’s completely free at the moment but I’d guess they’ll introduce some sort of premium version at some point.

  • Platform: Browser
  • Price: Free

Tall Tree Wireframe Tool

Super simple wireframing tool with low difficulty curve.

  • Platform: Browser
  • Price: Free


The go-to diagramming tool for the Mac. Not dissimilar to Visio in that it’s more than just a wireframing tool and is also great for flow charts, org charts etc. A new iPad version has recently been created and it opens up a whole world of touch screen diagramming loveliness.

  • Platform: Mac & iPad
  • Price: $99


Real time collaboration tool for creating sitemaps, UML, network charts, and wireframes. Produces diagrams that look very Web 2.0

  • Platform: Browser
  • Price: Free (Premium service being introduced in 2010)


Great option if you’re a developer already using eclipse and want to dig into some wireframing.

  • Platform: Eclipse
  • Price: $75 (Volume discounts available)


High-end diagramming tool. Hefty in price, size and feature-set. Quite technical and probably overkill for wireframing in so far as it can do so much more. It’s a good program though and if you’re working in a .Net environment it really comes into its own.

  • Platform: Windows
  • Price: $250 – $1000

Each of these tools have their ups and downs, and their appropriateness is going to be dependent on your project and work flow. I tend to favor Fireworks and OmniGraffle, but your best bet is to find one that serves your needs and stick with it, since knowledge of a program will always outweigh feature sets when it comes to usefulness.

We’re going to continue the discussion on wireframes a little further within a subsequent post. In Part 2, we’ll examine a few different wireframing techniques and round things off with some tips.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...