Book Advertisement - Hard Lessons Learned: Social Media Marketing

Menu
  1. Consulting
    Previous Next
  2. Management
  3. Marketing
    Previous Next
  4. Development
    Previous Next
  5. Design

    No content

    A problem occurred while loading content.

    Previous Next
  6. Industry
    • All
    • Automotive
    • Pharmaceutical
    • Technology
      More
      Previous Next
    1. Services
    User Menu Search
    Close
    Custom Software Solutions - Wireframes
    James Nagy
    / Categories: Development
     

    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

     
    6685 Rate this article:
    No rating

    Hi, we need your voice and feedback, please comment below and engage with us. Let us know if you agree, disagree or think we missed something important. If you are reading this and found the article above interesting or valuable, please share it with your friends and coworkers. Just click a share button above on your favorite social media channel to easily share this information. Thank you for your help!

    blog comments powered by Disqus
    James Nagy

    James NagyJames Nagy

    Looking for a business consultant, how can I help? As Co-Founder and Managing Partner of J&S Tech Designs, I have three decades of experience and expertise to share with you and help your business, product, or idea thrive.

    Other posts by James Nagy
    Contact author Full biography

    Full biography

    As a strategic leader and entrepreneur, James Nagy has a record of generating growth by leveraging the latest technologies to drive sales, marketing, product development, and profitability. He is known for identifying and capitalizing on market trends, developing effective tactics for implementation, enhancing operating performance, and serving as a trusted advisor and business partner. Skilled at working across operations, James builds strong, cross-functional relationships and communicates complex technical information to diverse internal and external stakeholders.

    A big picture visionary, James identifies and reacts to market trends, providing disruptive strategies that go beyond IT to include sales, marketing, and product portfolio management. Building on his experience as Director of Software Development with premier companies Midas International Corporation and SXC Health Solutions, Inc., James launched two successful consulting companies, Sprocket Websites Inc. and J&S Tech Designs. As the Managing Director, he provides innovative solutions to clients in small- and mid-cap companies.

    When he is not advising other business leaders, James lends his expertise to a variety of organizations. He is a Founding Member & Committee Member of the Greater Conejo Valley Chamber of Commerce; he serves on multiple teams and committees for the Naperville Area Chamber of Commerce; he is a Founding Member of the Chicago Area DNN User Group, and he serves on the Board of Directors of the New West Symphony. In his free time, James enjoys Sci-Fi, coin collecting, traveling and wine tasting.

    x

    Name:
    Email:
    Subject:
    Message:
    x

    Recommended Products & Services

    No content

    A problem occurred while loading content.

    Popular in Development

    No content

    A problem occurred while loading content.

    Previous Next

    Stay Informed!

    Every week we explore the latest in Business Consulting, Management, Development, Design & MORE! If you’re an entrepreneur, developer, business owner, consultant, or marketer be sure to subscribe today! Just one email per week, no SPAM.
    Terms Of UsePrivacy StatementCopyright © 2019 by J&S Tech Designs – Technology | Design | Innovation
    Back To Top