6 awesome tips to create a wireframe with Justinmind
The foundation of awesome web & mobile user experiences starts with wireframes. Let’s show you how to create your own wireframe in 6 simple steps
UX and UI designers have their own approach when it comes to designing mobile apps and websites. These idiosyncrasies are what make designers so interesting and what keeps the field of web and mobile interface design vibrant and alive. There is always something to learn.
Whatever approach a designer takes when it comes to making awesome web and mobile user experiences, however, should always include a wireframing stage. The wireframing stage of design is where you get to plan and create without distractions like color and imagery.
We are mad for wireframing at Justinmind (couldn’t you tell?) and we think you should be too. Let’s cover how to create a wireframe in 6 steps. Then when we’re done — go make your own and experiment.
What is a wireframe?
Let’s keep it short and sweet: a wireframe is the skeletal structure which is used to demonstrate the functionality of a mobile app or website. They look primitive, especially in contrast to something more visually robust like a mockup. But that’s the point.
As you develop your wireframe, that is to say as it becomes more defined through iteration, it will evolve into something else, like an interactive wireframe. A wireframe should be stripped-back, simple and easy to understand.
Why create a wireframe?
Think about your house. Does it have walls? Separate rooms? Doors, even? Most likely. These are essential elements of a home. But they weren’t put there by magic. An architect will have scribbled the floor plan down on a large piece of blue paper, like in the movies.
You can’t get to the cozy home with doors and walls without first having the blueprint. And that’s what a wireframe is, at its most basic core. A blueprint for what will hopefully become a great website or a cool mobile app.
A wireframe is the foundation upon which you build your design. It’s best practice is many companies (check out our insightful Q&As — interface designers from big companies will tell you how vital wireframing is) and can give you clarity, concision and focus as you create user experiences.
6 tips for successful wireframing with Justinmind
Use a grid
The power of the grid should not go unmentioned. Grid master extraordinaire, Joseph Muller-Brockmann put it best in Grid Systems in Graphic Design (great book, by the way) when he said:
“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”
Whenever you design, place your designs within a grid. Have a look into the 960 framework. Grids give your design a consistent structure and layout — essential for any cohesive design.
Justinmind comes with its own 960 grids, found in the Templates palette. 12 columns and 16 columns are available by default. They’re entirely editable so if 16 isn’t enough columns for you, you can make your own or import guidelines from your company or client.
Use drag and drop widgets as UI placeholders
A wireframe is skeletal. It doesn’t use fleshed out visual elements. Instead, you’ll see a lot of rectangles which represent UI elements and content. Change the color of the widgets in the Properties tab to help you distinguish between differing elements.
Don’t miss out on our Special Component widget library either — it has special widgets like Document, HTML, URL and Table widgets which help you bridge the gap between your wireframe and software files from other sources like Adobe, Microsoft Word and Youtube.
Why not try out our free Sketching UI kit? It’s perfect for the type of bare-bones wireframing you’re about to do.
Create a template to save time
Time is money. There’s nothing more boring and arduous than dragging a navbar onto individual screens. Snooze fest.
To save you time, create your basic wireframe structure in Justinmind — drag and drop all the UI elements into their rightful place and then make that into a Template.
A Template allows you to re-use the same structure over and over again without having to re-create it every time.
Use Masters
Masters, another feature in Justinmind, are a powerful way to apply global changes to groups of UI components. But, hey, isn’t that what Templates are for?
Like Templates, a Master is a way for you to replicate and distribute content across a prototype’s screen. Every change you make to a Master will be applied all throughout your wireframe.
Both Templates and Masters apply changes across your prototype but they have different purposes. Templates centralize content and events whereas Masters replicate and distribute content.
Use a Template for screen structure and a Master for UI elements (toolbars, nav menus etc).
Create links for added realism
Even though wireframes are simple and are used to demonstrate functionality, you should still link UI components. For example, clicking a button to go to another screen should actually take you to another, albeit, wireframed screen.
Bidirectional linking gives your wireframe a sense of flow — great to understand the navigational elements of what you’re creating. In the Screens panel, you can drag a link there and voila — chain created.
Some widgets, like the button widget, will have a modal appear when you drag it onto the canvas. The modal explains that you can create links by selecting and dragging the item to one of the screen in the Screens panel. Once dragged, in the Events panel, you’ll see the link interaction appear.
Bonus: experiment with interactive wireframes
Wireframes are essential and making them for your projects will make the entire design process a lot smoother.
But Justinmind has a lot of features that are irresistible. You can change the aesthetic properties of your UI components in the Properties palette so why not experiment with color choices or font styles? Or look into using animation or SVG files?
What’s stopping you from building on your wireframe after you’ve created it? Experimentation lends itself to innovation, after all.
Conclusion
A wireframe provides the foundation for your end design. They’re easy to make, don’t take much time at all and can really bring your ideas to life.
With a few basic design tips, like the ones above, you’ll be on your way to becoming a wireframe expert in no time. Go have fun and create your own wireframe!
Originally published at www.justinmind.com.
