Posts Tagged ‘wireframe’
The use of wireframes is a great way to create a mockup of the website you are designing or as you add new functionality to your existing site. The mockup can then be used to give your users a way to envision what the site might look like in order to give you feedback. Does it meet their needs? Does it do more than they need? Do they find it over complicated? All good questions to use in getting it right.
One of the more recent articles I could find, Mashable’s July 15, 2010 10 Free Wireframing Tools for Designers lists, you guessed it, free tools. I must say first that I haven’t used any of these tools. I include the article as it provides both background to wireframing and examples of tools to use without spending money.
My wireframing tool of choice is Balsamiq Mockups. Built on the Adobe Air platform, Balsamiq does have a cost of $79 for a single user and $379 for 5 users (both desktop installations). A cloud based version is also available for team design as well as other apps for integration with 3rd party web apps. The basic version I use includes mockup components for creating iPhone apps.
The following screen shots should give you an idea of how Balsamiq works:
The first screen shot is of the mockup viewed within the tool. This is edit mode. You can see some of the various components that can be used to mockup a web page across the top of the page. I like the ease of use - a drag and drop feature that allows for the addition of any component as I work. I also like the notes feature that allows me to provide information to team members or users I can’t meet with.
Click on image for larger view
The second screen shot is the same mockup but viewed in full screen – great for showing the mockup to users. It includes a pointer (the blue) arrow that can be used to draw attention to a feature.
Click on image for larger view
As the author of the article mentioned above states:
Wireframing is a crucial step in web design and development as it allows for rapid prototyping and helps to pinpoint potential problems early in the process. It can be invaluable to have a visual representation of content, hierarchy and layout.
Sounds like a process worth its weight in gold. See 18 Wireframing, Mockup, and Prototyping Tools to Plan Design for more suggestions of these web site tools and/or Free Wireframing or UI Design Kits for mocking up mobile applications.
Do you use a wireframe tool that you find useful and would recommend?
Even if you’re a seasoned intranet professional, there’s always something you haven’t heard before. Sometimes, the very nature of the intranet (being internally focused and heavily customized to your corporate culture) lends itself to being cut off from the outside world. I read an article recently called 12 Workplace Phrases You Probably Don’t Know…But Should. Many of the phrases are applicable to the intranet world and are worth repeating. Below are a few of the phrases the authors listed, but I added my own thoughts on how they apply to intranets.
Holistic: No matter what you’re doing with your intranet – redesigning, building, planning, maintaining – you must always keep the big picture in mind. That means taking into consideration things like the number of users affected, other practice groups involved, resources you might need, time for development and testing, other projects happening simultaneously, the external website and any duplication of effort or content, etc. Look at everything around you – this is what a “holistic” approach means.
Running in parallel: If you’re developing something new for your intranet, it’s always good to keep the old system around for a period of time, even if it’s just as a backup. I’m not saying that you should allow people to use both old and new for very long, but running in parallel until the new system is stable is a good idea.
Use Case: These are critical for intranets when developing something new and testing. Use cases are documented situations that explain a specific situation to follow in order to determine if the solution will meet the needs. You should write multiple use cases for various situations in order to thoroughly review the solution.
Wireframe: Wireframes are especially helpful for intranets when you are in the beginning stages of a new design. They are simple pictures to show your developers how you’d like the screen to look. They should be low-tech and low-cost. Draw a picture, if you must! Creating wireframes is a way to ensure that the project is programmed they way you envision.
Now here are a few more phrases you should know that I’m adding to the intranet list:
User-centered design: Involving users in every phase of an intranet project enables the team to effectively prioritize features and functions, select the right tools and design the most efficient ways to accomplish tasks online. During each phase of development it is critical to engage, involve and interact with users. Asking basic questions and documenting findings will enable the team to make better decisions throughout the project.
Needs assessment: Exploring they way things are in the current intranet is critical, as well as determining where things should be. An assessment in my mind is different than an evaluation, which occurs after the fact. You might be locating gaps, assigning priorities, finding causes and identifying solutions. Again, intranet end users are critical to finding this information, so involve them early in the process.
Do you have some intranet phrases of your own to add to the list? If so, I’d love to hear them!
Join our LinkedIn Group
Purchase Creating a Successful Law Firm Intranet
