Lost your Mockups key?
Retrieve Your License
Log In to myBalsamiq
Already have a monthly subscription for our cloud-based web app?
Log In to myBalsamiq
"Our team uses myBalsamiq a lot," writes Danelle Bailey in her blog post "How our Design Team uses Balsamiq as a Project Hub". But rather than showing off her team's design work, she describes how myBalsamiq has become a central repository for a variety of common project artifacts.
A typical myBalsamiq project for her team will start with an overview page created in Mockups describing the project and listing the other assets in the project folder. Think of it as the cover page and table of contents in one. It then progresses deeper into specifics, from user flow diagrams, to UI wireframes, and finally architectural and database details relevant to the developers.
A sample overview page
We are often asked about the difference between Balsamiq Mockups for Desktop and myBalsamiq. Our short answer is usually that the first is installed locally on your computer and the other runs in a web browser, but Danelle's blog post highlights how the built-in collaboration features of myBalsamiq can be used to make it more than just a tool for wireframing. It's a great case study and we're thankful she took the time to write it.
I work on the Blackboard Community Engagement solution for K-12. I’m a Sr. UX Designer in our Product Design and Innovation Team. I have been designing on the web for 12 years and for the past few really focused on mobile. I am passionate about designing experiences that integrate seamlessly into everyday life.
Mobile Interaction Design work for Schoolwires mobile feed, collaboration with Sara Hardy
Within the design and technology field, I’m excited to help push technology into becoming a truly helpful enabler of daily lives outside of highly technical users. When I focus on how many don’t have high speed internet and just need to get simple tasks performed, automated, or enabled, I think there is so much opportunity to innovate using common sense backed with technology. It’s a matter of being better informed, which I’m learning to do better myself.
Within the education technology space, it’s awesome to see how learners are expecting to guide their own educational pathways. This expectation raises the bar for not only design, but for content providers and learner results. One thing we want to facilitate is strong support of learner organizations. When these organizations are enabled to their potential, everyone wins. To get there, it helps to think about the end goals which can be higher learner output, or as simple as more time with family. Using technology by deeply engaging community and families can change our future.
Learn ways to research users. Listen. Try out new tools constantly. Listen. Learn to learn, and network. Think of design as more than simply visual design. Listen.
Education is typically slow moving when it comes to changes in methodologies and technology. I think consumption of learning material is already changing drastically (on demand), but there is also much room for community engagement innovation. Whether that is facilitating conversation about changes or simply being involved and aware of student success, that's where our team focuses.
Our team uses myBalsamiq online because we have a lot of remote collaboration and cross-platform sharing that needs to happen on a regular basis. As a visual designer, I really like the simplicity of the low fidelity tools. It’s easy to convey designs and interactions without getting caught up with the width of a line, or specific typographic hierarchy early in the process. Further, it helps everyone to focus on how a design works.
Another way we use this tool is as a project hub. You can read more here, but basically we have a method (by modifying reusable Site Assets) that promotes consistency across designs. This allows engineers and stakeholders to know what to expect and where to find what they need for their part of the project. The elements we provide each time is ever-evolving as process and business needs change.
The model templates created by Danelle's team
While each project is different, these are the different types of models we use over again:
Danelle at work. Photo credit Katie Carpenter of Ryn Creative.
I am involved in the Balsamiq forums regularly, pushing for ideas to help shape the future of this software we use as such an important piece of our process. A few ideas we have submitted and are eager to see facilitated in the online version are:
Basically, this book points out how too often, we designers think about solving problems using apps. It encourages the reader to think about problem solving from a wider mindset and not to use the screen for the sake of making a "cool interface" or "having an app". There is so much we can leverage with technology that our device already know abouts us. Apple Pay is an example of this and I hope to see more of it as a consumer and in my own work where it is the best solution.
Thanks, Danelle, you're a Champion! Thanks so much for sharing your process.
Are you a Champion who wants to be featured on our Balsamiq Champions blog? Send an email to email@example.com with your stories or blog posts!
We now offer a free course on Udemy called Wireframing with Balsamiq Mockups. It's designed to cover the basics of what Balsamiq Mockups is and how to get started with it. It will walk you through the primary features and show you how to create a simple project.
The course contains 8 video lectures that build on each other to get you feeling comfortable and confident with Balsamiq Mockups in less than one hour. It's designed for anyone who is just getting started with Balsamiq or wants to learn how to use it more effectively.
All you need for the course is the free 30-day trial of our desktop version (or a registered version if you already have it).
Head on over to Udemy and start learning now. 🙂
"How do you know you're coding the right stuff?"
That's the central question in Jeromy Wilson's recent blog post called "The Most Important Skill of the Decade". He believes that for a technology company to be successful they need great programmers, but even more importantly they need to know how to prototype and test what they want to build before creating it.
Jeromy says that prototyping is a skill that must be learned, that it's not "just putting pretty pictures together." He writes that learning prototyping includes developing "listening skills, innovation skills, UX skills, critical thinking skills, and tech savvy skills."
Successful prototyping is what leads to successful products today, which is why he calls software prototyping "the most important skill of the decade." He also believes it's a skill that everyone involved in the process of creating software should learn, not just designers and developers.
He has developed a comprehensive course on software prototyping called Master Software Prototyping on the learning platform he created, Niche Academy, which he built as a place for people to teach their own "niche" subjects that may not be available elsewhere.
I spoke with Jeromy, a long-time Balsamiq user, about prototyping as well as his recent leap from corporate employee to entrepreneur, which he described to me as "the right time and the right thing."
My name is Jeromy Wilson. I’m the founder and CEO of Niche Academy - which is a Software As A Service (SAAS) platform which allows anyone to create their own “niche” online learning academy. I’m also an instructor at a Niche Academy called “Everything but Coding”, an okay ping pong player, a lousy singer, and a Balsamiq aficionado.
I built Niche Academy because it was something I wanted to use but couldn’t find. I wanted a better way to teach software prototyping and other related skills. Hence, my “Everything But Coding” academy. I know there are a lot of other people out there with their own niche expertise to share. Education is changing because of the way eLearning tools like Niche Academy are making knowledge more accessible than ever before.
We want to be the best at helping individual and business experts teach what they know. We want the software to essentially disappear in front of their students eyes and have them only see what they need to do to learn. We have made it extremely easy to create your “niche” academy, create your courses, and reach your learners. We are doing everything we can to make the platform disappear and help the instructors and learners shine.
We are also infusing creative ways for the learners to learn. Like allowing the learners to learn based on their current learning style (which isn’t necessarily the same day to day).
It’s a process, but our development style is ever striving for simplicity, clean interfaces, essential and effective features, and happiness. 🙂
My first experience with prototyping was at a company called Dynix (now SirsiDynix). I took some requirements I had written to one of the lead developers. After looking them over for a few seconds he handed them back to me and said, “Could you draw me a picture?” I immediately went back to my desk, grabbed a pencil and a blank piece of paper and I drew him a picture. By the time I had finished that first wireframe, I was hooked. The creative and inventive process of coming up with something new was irresistible to me. I eventually graduated to PowerPoint and Visio.
I worked for Dynix for several years before accepting an invitation to join a startup called Alpha Bay. I was the first official employee at Alpha Bay and one of my first tasks was to create a high fidelity prototype of the retail system we intended to build. That prototype was too good, as it turned out. The first time we showed it to a customer, they wanted to know how long it would take to roll it out in their stores. They were ready to buy. When we told them it was just a prototype, they felt like they’d been tricked. Lesson learned about high fidelity prototypes: make sure everybody knows it's just a prototype.
When I’m creating a new product or design, the Balsamiq mockup is the first thing I create after going through the understanding and brainstorming phase. When I first start building a new product, new design, or new feature I start by first understanding my audience and what they are trying to accomplish. I then brainstorm about how I will solve their issue or fulfill their need - which usually includes a whiteboard with initial workflow and layout ideas. I then create my first Balsamiq mockup, get feedback, change the mockup, further validate, etc. Then I write the acceptance criteria after the mockup and validation are complete.
I put together mockups because it is the best way to get everyone on the same page and the only way to start getting real feedback. Plus, it’s so much easier to look at a picture than to read a bunch of requirements, use cases, or user stories. That being said, I write some great user stories - filled with plot twists, suspense, and sometimes humor (which my bosses hated, but the developers and customers loved).
I also used Balsamiq to create a test for graphical designers we were interviewing. They had to create a functional webpage based on the balsamiq mockup. Here it is:
It’s been helpful with every project I’ve worked on. Here’s a good example though. I built an app for the Apple App Store several years ago that didn’t do very well. Great product, but I didn’t market it very well. So, to solve that problem for my next app, I found a blogger that had a lot of influence in her market and asked her if I could build an app based on her approach. She had written a book as well. So I bought the book, read through it, and then put together a Balsamiq based on what I had learned from the book and how I proposed to convert that into an app. She gave me feedback and I made the proper adjustments and then we built it. It did much better than my first app and even broke into the top 30 in it’s category.
I use the quick add religiously. You can get to it by simply hitting the “+” or “/” key and then type name of the UI component you want to use. So simple and fast. I also use the markup components quite a bit. You can make notes and put arrows all over the place to remember decisions you made and why and then with a click of a button you can hide them.
Besides Balsamiq I use Basecamp for project management, Camtasia for screen recording and video editing, SnagIt for screenshots and quick videos to send to developers explaining bugs, Dropbox for all my files, Pixelmator for image editing and manipulation, and ProtoShare for medium fidelity prototypes to name a few.
When done right it gets the right product out faster, it fuels innovation within a company or for a startup, and it unites teams with a process that helps everyone be successful.
In my course I teach about three types of fidelity in software prototyping. Low fidelity (LoFi), medium fidelity (MeFi), and high fidelity (HiFi).
LoFi prototypes are rapid sketches, mockups, and wireframes. It’s everything from drawing on a whiteboard or napkin to putting mockups together in Balsamiq. It’s where ideas are born and begin to be fleshed out. It’s very iterative and fast changing.
MeFi prototypes incorporate a look and feel closer to what the actual product will look like with links, buttons, and UI elements that actual work, but data isn’t being saved. Look, but don’t touch.
HiFi prototypes allows actual users to use the prototype as they would in real life. Not everything may work perfectly and some things might not work as they will in the actual product, but this gets you the feel of the product or feature.
I think the first mistake people make is falling in love with their prototype. They put all this effort into creating something and then get defensive when someone gives constructive feedback. Prototyping is all about validating, failing fast, iterating, and eventually getting to the right solution.
One of the misconceptions is that prototyping slows the process down. Why not just start coding and make changes along the way? Prototyping actually speeds up the process to getting the “right” solution done. It’s much more difficult and expensive to make changes to code.
Note: If you are interested in Jeromy's master prototyping course you can save 50% using this link.
Thank you, Jeromy. You are a Champion!
Nick Pettit loves learning. Learning as a way to survive in an ever-changing business landscape; Learning as means of breaking into a new field; Learning as a tool for personal improvement. He recently wrote in an inspiring blog post called "Learning, Every Day" that "learning is a necessity that should be built in from the onset of any project."
His justification is that ongoing learning not only helps you stay ahead of your competition it also pays dividends as an approach to all endeavors in life. "Learning saves time, and time is the most precious resource available. We all have a limited life to lead, so it’s important to make the best of it."
He channels this passion into his role as a teacher at Treehouse, the online learning website that offers over 100 courses in the latest technologies. He teaches all areas of web design instruction and co-hosts the fun, informative free weekly talk show "The Treehouse Show."
His recent article called "How I Rapidly Prototype Websites" caught my attention not only because he mentions his use of Balsamiq Mockups but because he advocates for bypassing high-fidelity tools and jumping from rough wireframes straight to code, very much inline with our philosophy.
He's written some other great articles for the Treehouse blog, both for practicing web designers (such as "Bootstrap 3: Why all the hype?") and newbies (some of my favorites: "Things I Wish I Knew Before I Started Making Websites", "Beginner Web Design Mistakes You Should Avoid", and "How to Keep Up with the Web Industry").
I contacted him to discuss his design approach, his use of Balsamiq Mockups, and insights from his work at Treehouse. Read on for our interview.
[Treehouse] is the best way to learn about web design, web development, mobile, and business topics. [It] is a self-serve learning platform where students learn via videos, quizzes, and interactive code challenges. We also have a robust community around our Forum, where students, moderators, and teachers all help one another. As students unlock badges and earn points, they're able to show their work on their public profile. I think Treehouse stands out from the crowd because our standards for quality are extremely high and we provide a guided path for learning any topic.
Growing up I was interested in both the arts and technology. I would paint or play the piano, while simultaneously learning how to program or make websites. I found the web to be the perfect intersection of all my interests, and luckily for me, web design and development is a skill that's in demand right now.
After I graduated college I started to become interested in sharing my knowledge with others. Even though I have more than a decade of web experience behind me, I'm still a beginner at many other topics, so I know how difficult it can be when you're just starting out. Helping others overcome this frustration is what motivates me; I love empowering people to achieve their goals. I started out sharing my knowledge via blog posts and podcasting. I partnered with my friend Jim to create a video podcast that strived for quality over quantity. We became pretty skilled at talking about technical topics on camera, so when the opportunity to work at Treehouse came up in early 2010, it was a pretty natural transition for both of us.
The best part about my work is interacting with our students. Every day I receive emails, tweets, and forum posts from our students telling me how Treehouse has changed their life. It's pretty amazing when we get to hear from our students about how they were able to use their Treehouse education to land a job or get a promotion. In many cases, this has been a huge boon for individuals that need to provide for their families or pay off student loans and mortgages. These are the stories that make me jump out of bed in the morning!
A recent episode of "The Treehouse Show"
My biggest challenge as a teacher is to constantly stay on the cutting-edge while simultaneously thinking like a beginner. I need to know about what's new in the web space so that I can teach our students at Treehouse the modern-day best practices. However, I also need to understand what it's like to be an absolute beginner with no coding or design experience.
I solve both problems at once by learning something new every day. Most of the time this relates to web design and dev, but even completely unrelated topics can help. It's important for me to immerse myself in areas that I'm clueless about, because it helps me understand the struggle that new students go through when learning something for the first time.
Sometimes specific concepts are so complex to explain in a beginner overview that we later break them out into individual courses. One example is CSS layout, which we decided should be its own course, so we created CSS Layout Basics. I also rely heavily on metaphors and analogies to explain how ideas map to similar concepts in other areas.
Absolutely. I think anyone can learn to program just like anyone can learn how to read and write. There's something to be said for "natural" talent in any field, but programming certainly doesn't require it. If you like solving problems and expanding your mind, then programming might be for you.
I'm so glad you asked, because no Treehouse student is typical! That's just one of the big challenges we face every day. Some are looking to change careers, get a promotion, supplement their college courses, or just start a new hobby. Sometimes students want to zero in on something very specific, or just gain a general appreciation for work that's being done by their team members. We strive to provide an education that trains students for a specific job role and maps to real world problems.
I use rapid prototyping tools because nothing ever looks the same in the browser. This could be a result of technological limitations, responsive design considerations, screen calibration, or just product evolution. Designing high-fidelity mockups can still be a valuable exercise under specific circumstances, but even if they're absolutely necessary, they're still a big time suck. I try to jump straight from low-fi mockups to the browser as often as I can.
At Treehouse, our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world. We take pride in our remarkably high quality videos and our amazing community, and in the future, we plan to expand our platform in ways that have never been done before. We firmly believe that university education is entirely too expensive and time consuming, and often, it's just not suitable for the challenges that businesses face today. Treehouse aims to provide a better solution.
I've been using Balsamiq Mockups for many years now, and I've continued to use it because of its simplicity. I've tried using more general purpose drawing tools, but they never quite match the focused speed and power of Balsamiq. It's wonderfully convenient to just drag and drop commonly used design patterns into a mockup to quickly illustrate an idea.
I love the rough and squiggly lines. To some it might not really seem like a feature necessarily, but I think it's a powerful visual idiom for demonstrating that the mockup does not represent the final result. Some clients may not have exposure to the general idea of wireframing, so the rough lines are great for making the distinction between a "blueprint" and a real product.
Balsamiq makes teaching people about wireframing very simple. A general purpose drawing tool might be more powerful in certain areas, but the tools are designed to be flexible rather than focused. When I show people how fast they can iterate on an idea with Balsamiq, they're usually convinced almost immediately. I've used Balsamiq in several Treehouse videos over the years because it's so effective at outlining a project before teaching how to build it.
Balsamiq makes rapid iteration very, well, rapid. When I'm working on an important project, I always try to draw the same screen several different times without looking at my previous work. I force myself to do something completely different every time, even if it feels "wrong" at first. Sometimes my first pass is pretty rock solid, but often I'll stumble into another design direction that I had not previously considered. It's also fun when elements from different iterations combine together to form a better final result.
I have two ideas. The first one is a little crazy and complicated: I'd love the ability to jump from Balsamiq to browser using some sort of "wireframe" theme in a framework like Bootstrap or Foundation. The technical implementation might be pretty complicated if exporting directly from Balsamiq, but even just some companion CSS for designing in the browser might be a nice complement to the app.
My second idea is to actually take Balsamiq into more a "blueprint" style aesthetic. Even with the squiggly lines, sometimes clients are still confused about whether or not a mockup represents the final result. However, many people are familiar with the idea of architectural blueprints, so that metaphor could help. Even if it's just an optional skin that can be swapped in, it would be pretty cool to see.
I remember anxiously awaiting Retina support when I first used Balsamiq on my Retina MacBook Pro. I'm so glad this has been added!
I feel a bit unusual from many other web professionals in that I don't actually use a ton of tools for design. I generally stick with pencil and paper, Balsamiq, and a front-end framework. Sometimes I'll pop into Photoshop or Illustrator, but that's only if I'm working on an important project with lots of stakeholders that really need to see a pixel-perfect comp before coding begins. That's pretty rare though, and I find that it generally slows things down more than it's worth.
I like to lift weights and exercise, but I also play a ton of video games. As a hobby, I've actually started programming a game of my own in C# using the Unity game engine. I'm writing it for Mac, PC, and the Oculus Rift, and I hope to release sometime in early 2015. It's a lot of work though, so we'll see how I do!
Thank you, Nick, for sharing your tips and experience. You are a Champion!
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.
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!
Subscribe to our Monthly Newsletter and learn what we're up to before everyone else!
Live outside the Americas? Use our European shop.