Volunteer Opportunities for UX Designers or Developers

· Posted by Mike in community and tagged , · 2 Comments

code-for-americaPhoto Credits: Code for America

We spend years developing skills and craft to further our careers. That experience becomes a valuable resource that may be put to good work in the form of volunteer time or pro-bono work for nonprofit organizations.

Individually, some of us get opportunities to help others by word of mouth referrals. If you're a UX designer or developer looking for ways to provide your expertise to organizations needing assistance, or a nonprofit in need of some design time, try some of these sites that may help you find the right match.


Conferences focussed on matching design/development expertise with nonprofits are a great way to see who's doing what, and talk to a lot of people in one place. There are a handful of well-known events that draw a diverse crowd.

The Feast, for example, inspires with the stories of organizations successfully doing work to improve the world, and then puts immensely talented tech people in the same room with organizations focussed on this meaningful work.

The Nonprofit Technology Conference (NTC) is a conference focussed on Tech projects in the nonprofit sector. The event brings together a large number of organizations in its network, to foster sharing information and collaboration. Networking events at the conference, we're told, are one of the best ways to find out more about a lot of organizations in the nonprofit sector doing work that may interest you.

Searching for Volunteering Opportunities

If you're just starting to do your research about volunteer opportunities, or simply know what type of organizations and work you'd like to contribute to, these sites feature events or listings of volunteer opportunities.

  • Code for America - Organizes and builds open source software to improve government services using volunteers. One page provides specific issues that can be worked on.
  • Community Corps - A skills-based volunteering program that matches technology professionals with schools and nonprofits. Organizations request volunteers and the Community Corps lets volunteers search for specific opportunities related to skill. Mostly technical, but there are some categories like website review, which would be relevant for people who do usability evaluations.
  • Geeklist Hack4Good - Organizes hackathons to build solutions to humanity’s greatest problems.
  • Hackathon for Social Good - Organizes hackathons to build web and mobile applications for nonprofits.
  • Volunteer Match - Volunteering site that lets volunteers search for opportunities by cause and locale. Doesn’t provide any match of ability to need.

If you know of any other resource that would be helpful to include in this list, please email us at support@balsamiq.com! We'll be maintaining an ongoing list of resources for volunteering and finding volunteers for nonprofit work.

Tips for Creating Great Screencast Recordings

As a UX team, we're always trying to improve the work we do to support our customers. Video has become a big part of that.

Video is a resource we provide in Tech Support and in our regular release announcements. Screencasting technique is one thing we continually improve, so when Leon and I were recently asked to create online courses on Skillshare and Udemy, we took the opportunity to go a little deeper into expanding our recording knowledge so we could deliver higher quality video.

Here's an example of a video we recently produced, with help from Skillshare.

In this article, I'll share tips for getting the best out of your screencasts. Many of the tips are aimed at those looking to record multi-video courses on a Mac, but you can apply most of the advice to shorter recordings and on Windows. I've gathered these pointers from articles over the years, as well as from the great support team at Skillshare.

Screencasting for courses with multiple lessons was something that was new to me. We typically do short recordings for intro videos, demos, and tutorials. They're typically a single video and are relatively short. Often times they're designed to be digestible in under a few minutes. A class was a different kind of challenge, as its goals are to teach a new user a lot over the course of many different videos organized around building up skills they need to produce the desired outcome—create a product's user interface deliverable.

I got a lot of good advice from the team at Skillshare about how to approach the task, most of which I applied in the recordings. If you're interested in screencasting for online courses, they offer a free class, "Teach a Skillshare Class: Screencasting." It's very useful if your goal is to record an online course for their platform.

Now, on to the tips!

Organizing your Content

1) Start with an outline and break it down into smaller pieces.

The first task at the outset is to describe what the product is. I defined who my audience is, and what I expect them to get out of the course. This started as a discussion about product development and trying to understand how the video could frame the course in terms of real needs. This turned into the course description, which became the mission for the video.

Here's the description I used for the course.

Learn how to successfully create wireframes for early stage product design with interaction designer Michael Angeles, as he shows how to use Balsamiq Mockups to design interfaces with product teams. Balsamiq runs on the desktop or in a web app, and also as a plugin for Google Drive, Confluence and JIRA.

In this 51 minute class, you'll see how concept selection can be tackled with low-fidelity wireframes, learn to create rough sketches to explore ideas, and then transform them into interaction design solutions that can be refined quickly, and polished for presentation. The class is perfect for product managers, developers, and those new to designing with wireframes. No prior knowledge or experience with interface design is required. By the end, you'll be able to present wireframes for a finished product idea and demonstrate a clickable prototype.

After nailing down this summary, I started with Skillshare's template, breaking down what I wanted to teach in the course into these main sections: Intro, Key Concepts, Project, Summary. Sections can have multiple units or videos.

The idea is to start with the broad sections that you want to cover, and then work from that to define what you'll show in each section. My outline consisted of an introductory lesson at the beginning, a short summary at the end, and in the middle were 2 large sections for what I intended to teach. As I worked on an outline, I made guesses at how long it would take to cover a part. I was able to see where I could break the topics up into smaller videos from this, and broke parts up when my guesstimate was longer than 7 minutes.

I then added more detailed notes to my outline about key things I wanted to show and say, and in some cases, intro/summary messages that I thought would help. More on that in the tips.

As with designing a product, organizing in the planning phase also provided a very good opportunity to see what could be eliminated and edited down.

2) Introduce the topic and set expectations.

Tell the audience a few key things about the video.

  • Who is the course designed for? For example, talk about roles, types of needs of the person who will learn from this instruction, etc.
  • What can viewers expect to learn? If this is for a course, talk about what skills they'll acquire, what types of things they'll be able to create (show examples!).
  • How long will the course take?

3) Do a short intro in each section.

If this is a multi-video course, a sentence or two to introduce each video is helpful. You can use a title slide along with a little overview of the topic, feature, procedure, etc. that you plan to show.

4) Add transitions at the end of each unit.

Transitions are short summaries to remind what was covered and introduce what's next. This was a great tip from Skillshare and it's something you may not notice when you take online courses, but it really helps to cement what the watcher just viewed into their mind, and give them a sense of continuity through the process.

For the wireframing course, I was trying to establish a process or way of thinking about discrete tasks, and how to get from one task to the next.

5) Vary the video content.

This was another great Skillshare tip. Their teacher's outline suggests using different types of video styles throughout your recordings for a course. Anything you can do to mix it up makes it feel more engaging.

For instance, you can show some video where you're directly talking to the camera. Other times, you'll talk over demos. You can also change the pace now and then. You could go slow after a section when the pace has been very packed with information. Where a natural break or change in topic occurs can be a good place to insert a pace-change.

6) Don't rush through the screen recordings.

The one regret that I have is that I may have covered too much and went too fast in parts of my course. If you find that you're having to rush to complete recordings, reduce what you're going to cover, or break it up into even more smaller pieces so you can take your time. If people are using your video to learn something completely new, they'll want you to go slow enough for them to see what you're doing and then try on their own.

Video Recording

1) Choosing screen recording software.

We use a few different tools for recording the screen on our Macs. The simplest tool is Quicktime, but editing is limited with that tool, so you won't be able to easily add titles, transitions, and do complex editing. We tend to use Screenflow ($99) because it gives us some easy to use editing tools for these needs.

2) Set up your screen.

What screen resolution do you plan to record? For HD video, you want to record at a 16:9 aspect ratio. Aspect ratio is the proportion of width to height. Making sure your video is recorded at the right HD aspect ratio will prevent having pillar boxes, the black bars that are shown on the sides of video if it doesn't fit into an HD-proportioned video player.

A common video resolution is 720p (1,280px wide × 720px tall). I created a template file to re-use when starting each video. Now to make things easier, you can set your computer display resolution.

On a Mac you'll go to System Preferences > Display. You want to select the "Scaled" option. You can choose any of the 16:9 options that you see. I record our video at 1280 x 720 and set my display resolution to match so that the graphics are sharp. On my 13" Macbook retina screen, I choose the closest scaled option of 1280 x 800px This means that the bottom 80px of my recording may be cropped, so that's something to be aware of as you're recording.

3) Create a template.

Once I have my display set, I create a new document in my Screenflow software and set the size of the recording to 1280x720px. I save that to use as a template. Later I can set the defaults for elements I'll re-use, like callouts.

4) Prepare your desktop.

Turn off notifications. On a Mac, you can CMD click the Notifications icon in the upper right of your menubar.

Clear off your desktop of files and icons that can be a distraction and pick a neutral desktop wallpaper. Alternatively, you can use a utility like Backdrop for the Mac that will hide the content of your desktop.

If you have a crazy menubar, you may want to turn off some of the icons to remove distractions there. I use a utility called Bartender to just hide them under a hidden menubar.

5) Use titles, text captions, and callouts.

Title Screens are useful not only to introduce a video, but as text elements to introduce parts of a multi-part video series.

Captions are useful when we want to re-iterate what's happening on the screen. This can a good idea for new users who aren't familiar with terminology you may be using, or if you just want to point out something of particular importance that you may be doing in your screencast. In our course, I also use this opportunity to show things like alternative ways of performing the task, like keyboard shortcuts or where to find the action in an alternate menu.

6) To be consistent with visual elements, create a style guide.

Create a style guide for yourself. We tend to go light on internal documentation, so a single page in a wiki that defines how we will use text elements, graphics, and transitions will goes a long way in ensuring some consistency in our presentation. We created a style guide for the following.

For each type of graphic you'll use (titles, captions, and callouts) define the font, font weight, text color, background color and opacity, and position on the screen. For transitions, when changing from one clip to the next, we simply define the timing and easing we want the software to use when we add a transition.

Audio Recording Tips

1) Get clean audio in.

Consider using a decent dynamic microphone. I used a Rode Podcaster USB Dynamic microphone ($230), and recorded directly into Screenflow for the course units, and into Logic Pro for the Intro video. iPhone headphones also work pretty well if you can't buy a USB mic. Just be sure to use a clip to isolate the mic so that it won't create noise by rubbing against your shirt.

2) Reduce noise.

A boom arm with a pop screen really works well to reduce noise, and anything you can do to remove background noise from the original recording will save you pain later. Ideally you can put a sign on the door when you're recording to reduce environmental noise, and turn off notifications on your phone, for instance. I use a Tonor Microphone Suspension Boom Scissor Arm Stand that attaches to my desk, and attach a Dragonpad pop filter to that. Runs about $24 for both.

The boom arm helps to reduce noise that your mic might pick up from vibrations like tapping the table, for instance. It also makes the mic highly positionable.

I position the microphone slightly at an angle below my mouth and talk outward to help reduce plosive sounds, which are already reduced by having the pop filter. Words starting with P and B sounds tend to pop and spike in your audio recording, which can be very loud to a listener, so the pop filter keeps them controlled.

3) Record screen first, record voiceovers second.

This helps to get fewer "ums" and "uhs." They can be very difficult to remove afterwards, so get good audio in. Record the screencast, watch the video once, do a voiceover recording in one take, starting over in parts when needed and edit.

4) Warm up your voice.

I learned this after hearing my voice and hating it. Voiceover tutorials talk about this a lot. I'll spare you the Googling and just tell you what I do.

Drink water before voiceover recordings to avoid dry mouth sounds. Warm up your voice, lips and tongue before voiceover recordings by making faces to stretch out your mouth and utter a few "la la la la la's" out loud. You'll feel like a fool, but believe me, both things help.

5) Clean up your audio.

Ideally you're recording in a noise-free environment and isolating your mic from noise using gear like a boom stand. Background noise can be unavoidable, whether it's because you're recording in a city with street noise, or because you're recording at home like me and the sound of a computer fan or refrigerator kicks in. You can't prevent all that noise, so you might have to use some noise reduction, but aim for a clean background, and if you use background noise reduction, use it carefully. "Ducking" and the coming and going of noise can be a distraction.

In the past, I've surrounded my mic inside a box to create a quick and dirty isolation shield to prevent noise. You can buy these as well. Search for "microphone acoustic enclosure" or "microphone isolation shield" if you want to go that route.

If your voice recordings sound really dry and clean, it can also help to add some slight reverb, which will make your vocal recording sound like it's coming from inside a room where sound typically lingers slightly as it reflects in a room.

In Screenflow I just select the audio inspector, check the Effect checkbox and add a little "Plate" reverb. For recording in Logic Pro X, I like the Library presets for Voice > Natural Vocal. I adjust the Plate Reverb send until it sounds natural without being over the top.


Screencast recording can be a time consuming task if you do them often, but to us video demonstration is invaluable for classes, tutorials, and even in our case for feature announcements. Seeing and showing is usually better than simply telling, so we try to do both.

We'll keep trying to improve how we do this to help our customers. Maybe this set of tips will help if anyone in our community is thinking about doing the same or looking for ways to improve their own screencasting technique. If you have tips you'd like to share, please add them to our comments below!

Free Course on Rapid Wireframing with Balsamiq Mockups on Skillshare

We published a free course for Balsamiq users on Skillshare. The course, Rapid Wireframing: Finding the Right Product Design, is designed for those new to Balsamiq Mockups, but also features some demonstration of new features like Quick Draw and Alternates. If you're a veteran user, you may be interested in checking that out, and updating to the latest version to take advantage of these useful new ways of working on projects.

Here's a trailer to give you an idea of what to expect.

You'll learn how to successfully create wireframes for early stage product design as I show how to use Balsamiq Mockups to design interfaces with product teams, using the example requirements from UX Apprentice.

In the 51 minute course, you'll see how concept selection can be tackled with low-fidelity wireframes, learn to create rough sketches to explore ideas, and then transform them into interaction design solutions that can be refined quickly, and polished for presentation.

The class is perfect for product managers, developers, and those new to designing with wireframes. No prior knowledge or experience with interface design is required. By the end, you'll be able to present wireframes for a finished product idea and demonstrate a clickable prototype.

Start taking the free course at Skillshare now!

Creating Polished Wireframes

You land on one of those "12 examples of beautiful interface design" articles and admire the screens of polished wireframes. In some photos you see monitors shot at an angle with screens askew, receding into the distance, and a slight vignette burning away the edges. Perhaps you think to yourself, "Maybe I should make my UI design look like that?"

It's easy to get seduced by these creatively presented shots of user interface deliverables. If making clean wireframes does cross your mind, we think you can do so successfully provided that you don't put aesthetics before the goals and purpose of wireframing. There are valid reasons for not using sketchy wireframes. Sometimes low-fi aesthetics gets in the way, whether its due to the baggage of hand-drawn fonts or confusion over sketchy lines. That's why we made the wireframe skin, and its minimalist aesthetic is right for these occasions.

We advise caution. I know, I may be preaching to the choir, but humor me. It bears repeating because people new to wireframes may not know this.

Wireframing is not meant to be doing visual design, and this is why people make their wireframes as devoid of designed elements as possible.

Overly "designed" wireframes may ultimately lead to having to provide disclaimers as you deliver them. So get comfortable with this phrase: "Disclaimer: This is a wireframe and is not meant to convey visual design." You may even put that in your wireframes. We've seen that done plenty of times.

Stepping off the soapbox. Let's get started. We'll be working with Balsamiq Mockups Version 3.


Just because you're working on wireframes and not visual design, doesn't mean you have to throw your design sensibilities out the window. If you're already steeped in design principles, it'd be hard to make a wireframe without that knowledge influencing where and how you place elements on the canvas.

Let's start with a few examples of what you might do with wireframes and basic diagrams.

Desktop App Wireframe

Mobile App Storyboard

Journey Map Diagram

You can download all of these examples in this Project file.

These examples eschew sketchiness and the hand drawn look. They're mostly grayscale with an accent color. There's obviously a little bit of alignment, arrangement, hierarchy, and repetition there.

The features in Balsamiq Mockups for non-sketchy aesthetics are easily accessible once you know what to look for. Let's dig into how to create wireframes like this.

Basic Tips

The Wireframe Skin and Font

We start by switching to the Wireframe skin. To do this, select the Project Information panel from the menu, "View > Project Information" or by pressing CTRL+, on Windows or CMD+, on the Mac.

At the bottom of the panel, select Wireframe Skin and choose a different font. A solid sans-serif font like Helvetica works well on the Mac, for instance.

Think Minimalist

Flat design is a nice trend for people who do wireframes because our work has traditionally been devoid of surface decoration. If we look closer at how that first wireframe is created above, we see how the shape control and some subtle use of color can go a long way in organizing elements and suggesting hierarchy.

Here are some design principles and techniques that help when doing minimalist wireframes.

Favor Minimalism
Keep colors at a minimum. Consider using flat areas of color rather than boxing everything and putting noisy borders adjacent to each other. Stick to a monochromatic palette of mostly white, black and grays with an accent color.

Use Contrast Wisely
Use contrasting font sizes to denote hierarchy. When elements are distracting, consider reducing contrast in visual elements to reduce their importance. Elements like separators, HRs and border boxes are good examples that sometimes draw attention away from more important parts.

Use Proximity and Alignment for Visual Organization
You may not need to box every element and add a strong HR between everything. As above, use contrasting font sizes or color. Put like things close together and add white space to separate groups. As a general rule, look to align almost everything with something else in the canvas.

Employ Functional White Space
Again this goes with the previous technique. White space helps to separate, to help direct the eye, to suggest the order of scanning and reading the page, and to help make text legible. The eyes like to have space to rest as they move between blobs of objects.

To get a little meta, I made a wireframe of our wireframing tool in order to show you these tips. (Hopefully that recursion doesn't make your head explode.)

The Shape Control

The most common control you'll use for simply blocking out areas with solid grays will be the Rectangle. But also consider the Shape control as one of your tools for polished wireframes.

The Shape control is a Swiss Army knife of an object. It was originally meant for quick and dirty flow diagramming, but in reality it's more often put to use for general-purposes. We'll look at some examples, but first let's discuss how shapes can be useful.

Consider how drawings are made to understand how to use the Shape Control. This fun video shows how manga illustrator Mark Crilley uses the basic shapes of circles, triangles, arcs and straight lines to build up the anatomy of a face.

The good news is that in Mockups you don't have to know how to draw a circle. You can, however, layer shapes in a similar way to make other objects. Making design elements with the shape control is something that many experienced Balsamiq users do when they want to create an object that doesn't exist, or make a control that looks different from what we provide in the UI Library.

Let's look at an example created by Balsamiq user Georges Raad. Georges created a great symbol library using the Shape control extensively to make some interesting elements like ribbons. Let's break down his controls to see how he made them.

The basic idea is to look at the overall form of a thing, then try to break it down into simpler geometric shapes. This is what Mark Crilley demonstrates above when he draws a face. You can do lots of interesting things with just the Shape control. Here are just a few examples of the kind of thing we see people doing using the simple technique of layering shapes that we show above.

[Common Controls by Georges Raad; Doughnut Chart by Henning; Apple Watch by Ben Norris, Map Controls by Michael Gaigg; Margarita Recipe by Jim; Bootstrap, TR808, TV Remote, and Moockups Cow by me]

You can see more useful examples of what people have built by getting creative with shapes at Mockups to Go.

Must You?

Most people who use Balsamiq don't have to create polished wireframes. Low fidelity keeps the conversation centered on figuring out the problem and communicating the functional solution.

A wireframes vs. high-fidelity prototype vs. visual design debate is not what we're after here. We're interested in giving suggestions for making clean, minimalist wireframes if you must, whether it be for client presentation or other reasons. I admit that we occasionally do this at Balsamiq when we're working on an existing feature, or if I'm going to be doing visual design work using the design language we're already using in our products.

As you make polished wireframes, the slope becomes slippery as visual design decisions creep in. Be sure to stick to the same rules you've always known for wireframing with Balsamiq.

  • Focus on Function over Form
    Focus on communicating functionality; wireframes are not for visual design.
  • Illustrate Flow
    A minimalist approach does not mean that you should drop elements that communicate your ideas. Arrows and annotation are great ways to indicate flow, and you should still use them.
  • Don't Neglect Content
    Lorem ipsum only gets you so far. In Sketchy or Wireframe style, you may want to make it reflect real content when you can. It will help to know how your rules will work with real content.
  • Use Graphic Design Principles
    This is a broad suggestion, but it's more important when you're not doing the lowest fidelity work. The Sketchy skin, by design, is meant to be forgiving when it comes to details like alignment and precision. When you start using the finer shapes and lines of the Wireframe skin, hastiness in laying things out may come across as being sloppy and be a distraction in your wireframe. Even though you aren't doing visual design, design principles always help communicate ideas. Contrast, alignment, repetition, etc. are tools for creating hierarchy, organization, and flow in your interface. If you're new to design principles, a book like Robin Williams' very short Non Designers Design Book is a great primer.

A last reminder is not to let aesthetics get in the way of rapid idea generation. If it does, maybe you should be sticking to the Sketch skin. For the majority of our customers and for us, it is still a tried and true way of focusing on what's important.

There's no single "right way" to wireframe. What you should deliver depends on your circumstances. In the end, ask yourself, "Does this help or hurt me in trying to explore, find, and communicate the problem and solution I'm presented with?" If it helps, use it, but do it carefully. Hopefully this gives you another way to go out and make something awesome.

Creating Project Templates and Examples for Polished UX and Bootstrap Projects

We created a tutorial to give you some ideas for how to create project templates that contain elements you commonly use in your projects.

Along with this tutorial, we created two example templates.

The UX Template is designed for people working on UX Design projects who typically need to present a polished deck to clients. Here's a preview of what you'll find in this template.

The Bootstrap Template is designed for people who know they're going to be using Bootstrap, and want to use the text elements, and components common to the Bootstrap framework. Here's a preview of what you'll find in this template:

You'll find more information, including videos for how to get started in the tutorial.

div.gallery a.thumb {
display: block;
position: relative;
float: left;
height: 200px;
width: 200px;
margin: 0 12px 12px 0;
border: 3px solid #eee;
div.gallery img.thumb {
display: block;
width: 400px;

Ben on the Balsamiq Customer Experience

Supporting customers is such a huge part of what we do as company. Everyone contributes to customer support in one way or another, and our awesome team keep working to improve that experience.

Recognizing that we don't just care about support, but live it, GetSatisfaction interviewed Ben for their Customer Experience Series of videos. Our forum powered by GetSatisfaction has been one of the primary resources we've relied on for keeping close to our community. We're huge fans.

It's a wonderful feeling knowing that our connection to the community is in such good hands.

Meet UX Apprentice

Hello friends of Balsamiq, we have a very exciting new resource to announce today!

Balsamiq Mockups has helped democratize interface design in the communities who use it. A broad range of people coming from different roles and fields have adopted sketch-style wireframing. Making ideas come to life quickly with wireframes is a revelation. Your newfound power to create user interfaces is exhilarating!

Soon enough though, all beginning UX designers realize that creating products that are easy to use is actually quite hard! You have to know about information architecture, interaction design, copywriting, and lots more.

Meet UX Apprentice, a new site we created for people learning about User Experience Design.
UX Apprentice

We worked with Theresa Neil on developing a learning resource that covers some of the basics of the practice, and provides links for digging deeper and perfecting the craft.

We feel very lucky to have joined up with Theresa, who wrote the content and helped us design this site. She is a design consultant, and author of two O'Reilly books on interface design—Mobile Design Pattern Gallery: UI Patterns for Mobile Applications, and co-author of Designing Web Interfaces: Principles and Patterns for Rich Interaction. We called on her depth of teaching experience as an author and as a consultant who educates companies about UX Design to bring this knowledge to our awesome customers in the Balsamiq community.

We hope UX Apprentice helps many people who are getting started with interface design to both broaden and deepen their knowledge about UX Design.

Ready to dive in? Let's go!

New Keyboard Shortcuts Cheat Sheet

We've updated the Mockups Keyboard Shortcuts cheat sheet to reflect new shortcuts in 2.2.

You can view the HTML table and download the printable PDF here.

Refining the Roughness of 2.2 Controls

If you've been following along with updates to Mockups, with 2.2 out we now have a UI Skin switcher that allows you to use either sketchy controls or straighter wireframe controls.

In preparing the skins to work well with each other, we had to optimize the rectangle shape that’s the basis for many of the controls. This makes it so the transition was smoother when switching between skins—we needed less variability in the positioning of controls, and we needed to remove the artifacts around the edges of shapes that resulted from the bitmap rendering of the hand-drawn graphics. The downside to this is that in doing so, we cleaned up the sketch skin too much, and we've heard a lot of feedback that it should go back.

We agree on that point. The sketch skin is too refined now. I think I was waiting to hear more feedback during the beta and just waited too long rather than roughening up the lines, and we shipped it as it is now. I've been spending some tweaking the rectangular shape to roughen up the controls again and I think it's closer to what we have before.

Here's some screenshots to give you an idea. It's subtle, but the boxy lines have a slight bit more jitter and are thicker. Click the thumbnails to view larger.

Testing RectanglesTesting Sketch Skin

If you compare it to the controls from 2.1, I'd say it's pretty close. We'd love to hear your feedback. You can try this now in the Next Release Preview.

Wireframing Responsive Designs with Mockups

Responsive layouts using media queries and CSS on the web are exciting. Many Mockups users are doing responsive layouts on their projects or are planning to. We've been talking with the Balsamiq community about how Mockups can work with responsive web design concepts, and we thought we'd explore some techniques that might help.

We wrote up a short tutorial with some techniques that may be useful if you're exploring how you will approach wireframing with responsive design in mind. I used the Bootstrap Symbols Library I blogged about previously as a grid system. Check it out and if you have other ideas, let us know!

You can find out more about responsive design, check out the post by Ethan Marcotte in A List Apart, or more generally in the Wikipedia entry.

Next Page »