Custom Software Solutions - Wireframes

Custom Software Solutions - Wireframes

It is now on to my favorite phase in the process –wireframes. This is where things begin to take shape and you can start to see what, whatever it is that you are building, is going to look like. I like to use analogies, so picture this if you will: Think of a wireframe design just like walking through the new house you are having built when just the studs are up. You can begin to see room designs, layouts, sizes, etc. In your new home, you begin to see navigation –this is what I will see from the front door, this is what the view from the kitchen will be, this is how many steps from the master bed room to the nursery that it really is. Prototypes only get you so far, like new home blueprints, but wireframes really give the project some life.

Team:  Typically, in my experience, the same team that worked on the initial prototype ideas should gather to work on the wireframes.  Same meeting formats, multiple times per week during high creativity times. A meeting facilitator, note taker, and now someone with the skills to use a wireframe design tool. Be sure to allow for time to review the designs from the last meeting and don’t be afraid to make changes and adjustments here or there.

Step 1: Navigation – How will users get around in your new application?  Menus, buttons, icons, tools, guides, directions, help are starting blocks. Then fields, labels, tables, data structures begin to emerge. Finally, you get to data grouping, refactoring, and hard decisions about what goes where, what is needed, what is useful and the hardest part, what is unnecessary and what can be eliminated.

If you think this is an easy process, then you are probably doing it wrong. It takes time and revisions to get things laid out just right. Don’t let one person wireframe everything in a vacuum, create opportunities to share designs and ideas with the rest of the team. Involve development, quality assurance, training, sales, support, business development, i.e. any department that has a stake in the product should be involved in the design and development phases. Wireframes are the easiest and earliest place to assemble your stakeholder team. Be sure to get them and keep them involved in the process.

Step 2: Layouts – Now that you have some basic navigation, it is time to begin laying out some structures. These begin with data elements, fields, labels, buttons, tables, grids, etc. Getting the right information on the screen at the right time and in the right place is the key here. Focus on what you need and not what it looks like. Spend some time thinking about how each screen will be used, when it will be used, and what can be accomplished with this information. Finally, after several iterations, you should have a good understanding of what is needed and where it is best organized.

Remember that changing the layouts and designs at the wireframe stage are the easiest they are going to be. So try not to get married to one design idea and then become resistant to change. Use this phase to try out ideas and work through scenarios with your stakeholders and your user personas. Ensure that you have looked at the designs from multiple perspectives and seek out other opinions.

Step 3: Workflows and Interaction – You have some basic navigation and you have some rudimentary layouts.  Now, how do things interact with each other? This is where you start to duplicate navigation and layouts and create stories using them in various ways. What are the workflows that users will take? What are the steps necessary to complete a particular process? What does someone need to do to complete a specific set of procedures? 

[Be sure to use a professional wireframe tool like Balsamic Mockups (my favorite), Omnigraffle, Axure RP, Microsoft Visio, etc. Save yourself some time and engage with J&S Tech Designs, we can help you put your wireframe designs together quickly, efficiently and professionally.]

Think of this like a comic book, you are laying out the steps necessary to move from A to B to C. Try to answer specific questions that are relevant to your custom software application. Give good illustrations using the navigation and layout elements that you have designed. Tweak them as necessary to show a process. For example, if your process starts with an empty screen and the user fills out some data, show that.  Then, show the users clicking the appropriate button or action to take the next step. Be sure to show before / after wireframes to illustrate change.

Make sure that you use lots of callouts in your wireframes to explain what is happening on the screen. This is good solid built-in documentation that helps to explain the process to others. Use highlighting for emphasis. Only try to show one thing happening at one time as you move through various workflows. This helps keep things simple and more easily understood.

Review & Feedback: Now you are headed back to the customers again. This is where things begin to develop in their minds as well. You have some semblance of screens and layouts, you have workflows that can illustrate process and show usage, and you have visuals that are beginning to paint a picture in their minds of how all this is going to work for them. Don’t be surprised if the level of feedback and engagement is higher than in previous steps. Before you were talking in concepts and showing only very rough outlines. Now things are beginning to take shape and more people can start to see the applications and usage of your software. If a picture is worth a thousand words; then a wireframe is worth thousands of lines of code for sure!

Next Steps: Ok, so we are now done with wireframe designs and layouts. We have a good idea where things are headed, we have talked to customers again, and they are getting excited. It is now time to move on to some initial software designs.

Read: Previous Article

Read: Next Article

blog comments powered by Disqus
  • 6 May 2013
  • Author: James Nagy
  • Number of views: 3566
James Nagy

James NagyJames Nagy

Need a consultant today? How can I help? As Co-Founder and Managing Partner of J&S Tech Designs I have nearly three decades of experience and expertise to share with you to help your business, product, or idea thrive. If you like this article, please sign up in the “stay informed” section!

Other posts by James Nagy

Full biography

Full biography

James Nagy is managing partner and co-founder of J&S Tech Designs - a business consulting organization that specializes in providing software and website design, development, and management expertise to organizations. He is also Managing Director and one of four co-founders of Sprocket Websites, Inc. and Chief Executive Office and one of four co-founding members of Clinical Collaboration Software, LLC.

James has over twenty-five years of experience in the information technology field, spending twenty years in software development, sixteen years in executive management and the last six years as a serial entrepreneur launching and running several successful technology organizations.

Throughout his career he has led companies, divisions, departments and teams to successful outcomes. He has executed process reengineering within organizations that were struggling to produce. He has provided strategic vision and organization planning in situations that needed direction. He has built complex systems in several unique marketplaces that required thorough knowledge and expertise to be successful. It is his passion for excellence and desire for success that has enabled him to meet the challenges presented and continue to exceed expectations.

James’ passion for delivering innovative solutions and creative strategies enabled him to develop strong business foundations for long-term success. He is an active member of the Conejo Valley Chamber of Commerce, the North of the River Chamber of Commerce and the Naperville Area Chamber of Commerce where he served on several teams, advisory committees, and legislative groups. He is a founding member of the Chicago Area DotNetNuke Users Group that has held several large, successful Website design and development events. James has donated time, money and expertise to many volunteer, fundraising and charitable organizations like KidsMatter of Naperville, The Naperville Film Festival, Summer Place Theatre, TEDxNaperville, Neuqua Valley High School Senior Spectacular and many others.

Contact author


Stay Informed!

Every week we explore the latest in Technology, UI/UX, Software Development, Consulting, Business Management, Social Media Marketing & MORE! If you’re an entrepreneur, developer, business owner, consultant, or marketer be sure to subscribe today!
«July 2017»

Consultants: The Importance of Being an Expert

​As a consultant, you’ll run into situations nearly daily where you are meeting new people who want to hear about what you do. I get questions regularly on topics that I consult on. Many times these conversations come up on the spot and out of a normal business environment.  So, what do you do when you’re approached, totally unprepared, and you have to talk about your business out of the blue? Do you know your business well enough that you can stop whatever you’re doing and come up with an intelligent informed conversation? As a consultant, this is a must.
Read more