With one inexpensive solution, you can eliminate unnecessary emails cluttering your inbox, communicate so effectively with your team that you actually get work done faster and make more money, all while delivering a higher quality product. Find out how here.
March 18, 2019
Top 10 Methods To Improve Your Wireframing Skills
We’re going to talk about practicing and mastering your designing abilities. This article is about setting yourself up for success. Your ability to deliver the highest quality, on time is what will determine your skill level in the eyes of your clients. Thus, assuming you have cultivated a strong set of design skills already, how can you best make those shine in every project?
Top 10 Methods To Improve Your Wireframing Skills
Table Of Contents | The Bug Squasher
- 1 Top 10 Methods To Improve Your Wireframing Skills
- 1.1 1. Know The Project Inside And Out!
- 1.2 2. How Will The Website Function Technically?
- 1.3 3. Get Examples From The Client
- 1.4 4. Know The Competition
- 1.5 5. Move Quickly And Get Feedback Often
- 1.6 6. Ask A Lot Of Questions
- 1.7 7. Start With A Pencil And Paper
- 1.8 8. Use The Right Tool For The Job
- 1.9 9. Make Your Wireframes POP!
- 1.10 10. Use Advanced Wireframe Prototyping
- 1.11 Final Thoughts
1. Know The Project Inside And Out!
Anyone could be made to look incompetent when they don’t deliver what is expected. This has nothing to do with your wireframing abilities, and everything to do with communication and having the criteria for “success” clearly defined.
Know what the requirements are precisely. To design a website mockup you need to define and precisely describe its tasks, goals and target audience. Don’t forget about choosing the right content. Clearly define what you’re going to do to your client.
Build out a clear and well-conceptualized brief of the project’s details. This will become the agreed upon rubric by which your success is determined. Ascertain the purpose of the project/website. Understand why you’re being asked to build the website in the first place. What is the goal and the main purpose this website will serve. Is it to act as a digital calling card, a lead generator, or a portfolio of work? Is it a little of all three? Knowing this before you put pencil to paper will help you make crucial design decisions necessary to achieve the agreed upon objective.
Who will be viewing this website? Keeping the target audience in mind is important to the design elements and the messaging of the site. Understanding where your users will be coming from, what drove them to the site, where they are in their understanding of the client’s business, and where they are in the sales funnel all determine the design of the site and in crafting the ideal first impression for the target audience.
2. How Will The Website Function Technically?
Before you get started mocking up a slick web design, understand how the website will work. How will the website literally function, map the structure of the site and know what content will get top billing. Are there any client specification or special requests that you need to include?
All of this will need to be included in your wireframing to give the client a well fleshed out understanding of their site and what you’re expecting to produce.
3. Get Examples From The Client
We haven’t started drafting just yet. This is all part of the information gathering stage. The more information you can pull out of your client, the better mockup you can deliver on the first pass. We’re very visual people and your client probably communicates better in pictures than words. Either pull some examples that fit your client’s requests or get your client to share screenshots of other sites she likes.
Taking abstract ideas and using visuals to solidify the project in everyone’s mind will help everyone involve to “see” the project clearly. Gather a collection of fonts, graphics, site designs so everyone involved can have an opportunity to understand the level of requirements involved in the project.
4. Know The Competition
Your design must surpass the competitions’. The pre-planning stage is important for this. How are you going to deliver something that can compete against others in the industry? Dissect and analyze what they’re doing. Why are they doing it that way? What do they know that you don’t? What are they excelling at and how can you implement their approach to achieve the client’s goals. What doesn’t the competition know that gives you a competitive advantage? What are they doing wrong that you can do better to steal market share and blow them out of the water?
Knowing what your website is competing against by analyzing competitors’ websites in the same industry is important to your client’s success as a business. All of these decisions dictate various design elements on the site.
It’s not a matter of merely copying the competition. The gains are made by understanding why the competition does what it does then finding a smart way to appropriate what works and take advantage where they are lacking.
5. Move Quickly And Get Feedback Often
This might sound like contrary information to what many designers want to hear, but having a highly involved client throughout every step of the project is important for a number of reasons. First, it encourages client to “buy in”. Your ideas become both of your ideas, and the client is more receptive to your thoughts along the way. It grows organically rather than having a finished product that gets torn apart in the end.
Secondly, the client checks off on each decision every step of the way. This saves you from putting hours of work in on something that the client will later veto. Getting regular feedback allows you to identify potential issues early on and resolve them as not to send you too far down the wrong path. Strong communication allows you to deliver a better end product that is well aligned with your client’s wishes.
The Bug Squasher was designed just for this. With a single line of code, you can add it to any website in progress to communicate change requests to your dev team and quickly receive and organize feedback straight from your client without getting lost in never-ending email threads.
6. Ask A Lot Of Questions
Use “why” questions to illuminate the reasoning your client has behind a specific note or request. Understanding the motivation behind a decision is crucial to executing on it effectively. If you find that your client is all too generous with their feedback to the point of it falling into the realm of micro-managing, ask probing questions such as, “what is the challenge you are hoping to solve with this…”
What these kinds of questions do is two-fold. If the client has a really good reason for the note, then they share it with you and you can assess whether their request is a good solution or you can work with them on devising a better solution for that challenge. Additionally, if the client has zero reasoning behind the note, you can use data and your expertise to stand up for your current design. If it’s purely a subjective aesthetic issue, you learn what to avoid in the future to help cut back on the number of change requests you receive from your client.
7. Start With A Pencil And Paper
It is so tempting to jump straight to the computer and draft. After all, you have a pretty clear idea of what the client wants after asking so many questions and using visual examples. If this is you, I suggest you stop! Make your first sketches with a pencil and paper.
There are many reasons why the old-fashioned method can be superior, but this isn’t a tradition vs modernity fight. This is a matter of practicality. Starting on paper allows you to mock up a site with the smallest time investment possible. It’s faster and there’s less emotional investment. It’s still an abstract idea, and that’s a good thing.
Drawing allows for a high level of flexibility. Drawings allow you and your client to change things drastically from one idea to another in just a few strokes. This freedom can help you quickly explain your ideas to your client without getting too invested. Digital mockups tend to have a more polished and permanent feel very early on. This can get everyone involved to tunnel visioned too early. There might be a better way, and drafting in pencil encourages the freedom to play with it a bit more.
8. Use The Right Tool For The Job
This is a quick side note about tools. Some programs and tools can make your life easier, while others are better suited for other stages of wireframing and prototyping. The idea is to work efficiently for the stage of the project you’re currently in.
As we’ve stated above, using a pencil and paper for preliminary sketches allows you to easily collect and convey first ideas without wasting much time, energy, or emotional investment. Next, compile all of these sketches for easy reference. Put all of your data in one place. Being organized and prepared will make it easy for you to create stellar wireframes. Bring your notes, examples, and sketches into a program like Evernote so you can easily refer back to them while creating your digital wireframes.
Wireframes and mockups! After all of the preliminary information gathering it’s finally time to start your wireframe, but are you using the right wireframe program? Many designers find photoshop or illustrator too overbuilt for quickly drafting their initial mockups. Using tools like Balsamiq or Moqups can be very handy to building out that first wireframe.
9. Make Your Wireframes POP!
Yes, it’s just a wireframe. However, as we stated above, moving from an analog form into the digital breads a sense of permanence. Your wireframe will have a feeling of finality. By this stage, that’s okay. You’ve already addressed a lot of concerns in the previous stages, got all of the information necessary, and even sketched out your preliminary design ideas on paper and got your client’s input every step of the way.
In order to improve your wireframing skills, and to make those wireframes pop You’re going to want to elevate it to the next level. Build the picture in your client’s mind of what the site is going to look and feel like from your wireframe. Make the vision clear by delivering more than a rough draft. Use high-quality stock images and video where you can to make your mockups vivid.
10. Use Advanced Wireframe Prototyping
This gets its own section because the impact is huge. A prototype is a detailed interactive representation of the final product based on wireframes. This is the final step before handing it off to developers. Above we suggest making a wireframe that feels as close to the finished product as possible, what could feel more like that than an interactive wireframe prototype. This will allow your client to experience the website before it’s built. Menus will pop out and the client can navigate between pages. There are various software you can use to build this and none of it requires any coding.
Building a wireframe prototype will not only clearly communicate the finished product to your client before spending money on development, but it will also clearly communicate the requirements and functionality of the website to the developers.
Success in this business is dependent upon meeting client expectations. Your competence and overall reputation is built around you delivering what is expected. The best ways to convey just how good you are is to get all of the information up front, so you are solving the right problems, and focusing your talents on the right things.
Delivering high-quality mockups require a complete understanding of client expectations. Thorough pre-planning will aid you in presenting a stellar high fidelity mockup to your clients. Ask enough questions early on so you can address all of your client’s requirements in the very first mockup. Knowing everything upfront will eliminate unnecessary changes and lengthy email threads, and it will communicate to your client the true level of expertise you have.
– The Bug Squasher Team
P.S. You’re only as good as your work. Take the necessary steps to ensure you deliver the quality you know you’re capable of.
Tell Us What You Think: