When we take that first step in building a new web app we quickly forget about the simple things. We get so immersed in the features and functionality of the application, when we should be focusing on the layout and interface.
Instead of booting up our text editors, graphics application, or latest wireframing software we should simply get out a piece of paper. A wireframe is a screen blueprint or a skeletal layout of a website. Unlike architectural blueprints where the specs need to be precise, web page blueprints are the exact opposite. We only need to roughly estimate where pieces of content will go.
This is why sketching wireframes is so beneficial to you, your team and the end user. There are so many benefits to sketching wireframes. Here are my top five reasons why sketching wireframes is so imperative to building a web application.
Contents
1. Sketching Saves Time
Grab a sharpie or some other sort of blunt drawing tool. This can be anything from a jumbo sized marker, crayon or a craftsman pencil. By using a blunt drawing tool we are diverted away from detail. When we get caught up on detail we waste time.
This is the same reason why we shouldn’t use Photoshop, Illustrator or any other graphical applications to start wireframing with. This also goes for Balsamic, Mockingbird, Framer or any other wireframing app. Don’t get me wrong, these are great tools but they take time to open, save and line objects up. In the beginning stages all we need is a blunt writing utensil and some paper.
2. The Power of Groups
Chalkboards and dry erase boards also work great for sketching wireframes. Its fast, its rough and it works better when working in groups. In most cases the apps we build are a group effort. Everyone has different tasks to complete but everyone is working on the same project. The majority of us all use the internet and we all use applications in our day to day life.
However we all have slightly different opinions when it comes to content placement or content priority. This is why working in groups helps us create a better experience right from the get go.
3. Immediate Communication
In my opinion the number one problem when building an application is communication. This might be the communication from the designer to the developer or the project manager to the client. When we’re able to get everyone in a room to work together the end result forms much faster and we’re able to get to a solid layout much faster. There isn’t a massive email thread of confusion going back and forth.
Now you might be thinking to yourself, “Well this isn’t going to work for me, my team works remotely.” Not a problem, simply set a time where you all can meet up via skype or whatever form of real time communication. Then sketch and post images. You can take photos with your phone and post them to a private tumbler blog or use dropbox so everyone can view the layouts. This process might take a bit longer but your still able to save time and communicate properly.
4. Client Interaction
If you’re fortunate to have a client that has time to sit down with your team and talk content and experience, you’re in luck. The majority of clients want to be hands on. Use this to your advantage. Allow them to discuss, sketch and voice their opinion early on in the project.
If you don’t they will most likely end up changing stuff at the end of the project just because they want to have a part in the decision-making process. Simply let them work on the project early on and make decisions with you. This way those choices are set in stone moving forward.
5. A Better User Experience
When working with a number of people on one project you’ll immediately notice everyone has a different opinion. Use this friction to your advantage. Debate your opinions, reach an agreement then move forward. Don’t let the debate take forever though. Make your points, understand one another and choose the best solution. This group effort creates a much better user experience.
It’s not just one person designing it from one point of view its multiple experts working together to create an elite solution. Also if you’re lucky enough to have your clients involved, you’re able to understand their target market better.
Where do we go from here?
Great, so we have our apps blueprint put together and we’re ready to start building. Now what? The first thing you want to do is document the layouts. This is where using an app like Photoshop, Illustrator, Balsamic, Mockingbird, Framer or any other wireframing app comes in handy.
Make sure to store these in one location so everyone is seeing the same document. You could even use something like Google Docs and share it the whole team. Moving forward you now have a centralized manual for everyone to follow.
In conclusion sketching wireframes in groups saves time and creates a better user experience for everyone. Keep the conversation going and add your own experiences by commenting below.