Not a designer? Not a problem!
Everyone is welcome here and in the wireframing process. Creating an effective wireframe is necessary if you want to have a killer final product. And who doesn’t want that?
By 2020, customer experience will overtake price and product as the key brand differentiator. That being said, it’s everyone’s job to make sure your app provides the best experience possible. Wireframing ensures the user interface (UI) design improves the overall user experience (UX).
We asked eight industry experts and design pros for their input on what makes a great wireframe and how they start their own process.
“Beginners need to keep in mind that a wireframe is a high-level skeleton or outline of what a mobile product will be without getting too granular. Essentially, it’s a visual brainstorm of how the user experience (UX) will interact with the user interface (UI), but stripping it away of visual elements like color, fonts, and imagery.
Before starting the process of wireframing, it is important to have a clear understanding of the target audience. This will allow beginners to have a better understanding of how necessary information will play out on screen before branding and visual elements come into play.”
-Shelly Jameer, UX Designer at Clearbridge Mobile
“Always start with a succinct user story. Your user story will bring the team to the fundamental task at hand and help cut out feature creep and clutter. What is the user trying to accomplish? Who are they, and what else is going on as they try to get this done? If you can’t easily explain, in writing, what your users are trying to do, you shouldn’t expect to do a great job designing a delightful user experience for them.”
-Healy Jones, Co-Founder of FinvsFin
| DID YOU KNOW? One in three people will abandon a purchase because they can’t find the right information. While you’re creating a wireframe, make sure you know what information your users will need on every page. |
“I start with wireframing an app with a pencil and blank 3x5 notecards. This gives me the freedom to get ideas out without actually thinking about specific screen sizes or elements. Don't worry about how crude the designs are; it's not about the presentation at this point. Think of it as just rapid concepting.
From there, I'd seek input from people on the most basic elements (text/element placement, etc.). By seeking feedback along the way, you don't end up with versions to choose from. Instead, you have a strong idea and can keep iterating once you get into your design/prototyping app.
-Chris Karnes, Head of Growth at Going Merry
|
After you've gotten your thoughts down on paper, consider using wireframing software to organize your ideas and take them to the next level. These tools often have deep libraries of elements, to help you create beautiful wireframes.
|
“We often start with a flowchart that shows the relationship between all of our screens. Each screen would have a quick list of bullets on what components or interactions it contains. Once everything’s there on one page, we start creating interactive wireframes–no color or copy though!
Every stage of the wireframing process is an opportunity to get feedback. In the beginning, from other members of the product team (developers, designers, business analysts), and towards the end, from actual users.”
-James Lockrey, Executive Producer at Chaos Theory Games
“Wireframes are used for communicating ideas, not a final product. Remember, this means that every aspect is merely a draft or concept. For example, wireframes don't have to be digital; it can be a sketch behind a napkin. They also don't need to have final copy or graphics.
Color or no color is a preference and doesn't matter as long as you feel good about what it’s representing. Iteration is the golden rule of wireframes, iterate until it reaches the goal that you are trying to achieve while maintaining the structure of the page.”
-Sidharath Chhatani, Product Designer at ClutchPrep
| RELATED: Wireframing is an essential step, but it’s only the first of many. Learn more about what goes into the app design process and how to keep your brand consistent with your app UI. |
“I start with writing an outline of content types to create early information architecture needed to guide my wireframing. It's a common misconception that wireframes are step one! Keep in mind the length/size of pieces of content. That's important.
Remember that wireframes are a hybrid between guides and first drafts. You can scrap them or have the end mockup resemble little of what you started out with. Designs evolve.”
-Mira Zyra, Senior UX Designer at Amethyst Design
“I'd just limit the initial planning to the marketing and strategy team. The wireframe has to be created by someone who knows what the user wants. Most of the time, this is the digital marketing strategy team. Once the wireframe is ready, it can be passed onto the creative design team for bringing the back and white lines to life.
Making sure the whole process follows a waterfall model for wireframing and creative design is super important. I would stress the importance of having a strategy person create the wireframe. The problem with the UI team creating the wireframe is that they don't know what the user thinks. They simply don't have the data to make that decision.”
-Abhijith VM, Digital Marketing Team Lead at ClaySys Technologies
“Wireframes are a cost-effective technique used early on in digital product design to identify issues and pivot before too much time and money is spent. A wireframe typically includes key page elements, site features, and navigation. It is easy to get started by drawing boxes for the different types of content a page should display. This also helps establish the relationship of elements to one another. Wireframes are as simple as paper sketches or diagrams on a whiteboard.
Because the goal is rapid iteration, spending a ton of time on details or visual styling up front is not needed. The most important thing is getting the wireframe out in front of other people so that issues can be identified.”
-Kristen Krueger, Junior Experience Designer at Mentor Mate
Every designer is different, and their creative processes vary, too. However, one commonality we’ve seen is that team collaboration and feedback are key to a successful wireframe.
Learn more about how to make an app, where wireframes fit in, and what all goes into the process.
Help your peers and grow your personal brand by contributing to the G2 Learning Hub. Sign up in seconds and, like these five industry pros, share your knowledge in tech, design, or development with 1 Million monthly readers.
Turn your passion projects into a full-time job.
by Bridget Poetker
Believe it or not, coming up with your app idea was the easy part.
by Bridget Poetker
