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?
This post describes how I set up a mockup of a simple intranet using WordPress, which you can browse at FirmNet.
I am often asked for suggestions of inexpensive tools for small firms to use to create an intranet. There are a number of different tools that can be used but one I would suggest first is WordPress.com.
You can’t beat the cost
The first 35 users are free. Unlimited private users is $29.97/year.
Additional costs may include:
Custom CSS (Cascading Style Sheets) – You will need this if you want to make changes in the look & feel of the template you choose to use. Some of the templates have limited functionality to make changes but most changes will require the Custom CSS for $29.97/year.
Domain – If you want to add a domain (other than *.wordpress.com) you can do so for $12.00/year. You will need to register a domain to use this and then map that domain to your WordPress site.
No-Ads – Another $29.97 will remove all ads from your site.
Space upgrades – The site include 3 gigabytes of file storage. If you need more space, it starts at $19.97/year and up.
Before we start exploring that idea, there are a few caveats to mention when suggesting WordPress.
- This would be a hosted intranet which some firms might not want to use. You can keep it private, but it may mean logging in to use it. WordPress will save your username and password but you will need to enter it on occasion for security purposes.
- WordPress does not have the ability to integrate content without you doing the coding. If you want to integrate your DMS, accounting system, etc. and don’t want to spend time and money coding, you will be better off using something like SharePoint.
- Consult with your users before creating even the simplest intranet. While I’ve provided suggestions, no work should be done developing an intranet without a requirements analysis.
I created a site using WordPress called FirmNet as seen below (click to enlarge):
I started out by choosing a name for the site (firmnet.wordpress.com) and then choosing a theme (Fusion) which can be found under the Appearance label on the site (click image to enlarge).
Once the theme was chosen, I used the other settings to customize the site. Widgets allowed me to add both the search and Quick Links function while the header and theme options allowed me to customize the layout and header. After that was done, I started to add pages.
WordPress has Pages and Posts. Pages are just that – web pages. On a WordPress blog they are generally used to add an About page and or other pages of content. The Law Firm Intranet has 6 pages plus the home page. Posts are what bloggers use to add each entry or article. When you are building a site like FirmNet, you will want to use Pages.
I added both pages and sub-pages as seen in the example above where the Practices page has three sub-pages – Banking, Corporate, and Tax. To do this I needed to use a theme that included the ability to create a hierarchical structure of web pages.
I also used a table to create the various sections on the home page. To do this, I simply used MS Word to create the table, edited the content in word and then copied and pasted into my home page. Once I had the table to work with in the WordPress edit window, I continued to mas my changes there.
WordPress allows editing in both Visual and HTML modes. I use the HTML mode when I run into formatting that I can’t get right in the Visual Mode.
Here are examples of other themes I looked at while creating the site:
INove - Click to Enlarge
Notepad – Click to Enlarge
Nuetra – Click to Enlarge
Structure – Click to Enlarge
Twenty-Ten – Click to Enlarge
You can see that you can create fairly professional pages without too much work. If you want to do more to customise it, you will need to engage someone with CSS skills to edit the style sheet. Even so, it is a quick and inexpensive way to create a website.
About FirmNet: I’ve included the content that has been covered in the series of posts on content and functionality. It provides a very visual way of exploring a simple intranet. You may notice a tab “About FirmNet”. That tab is there to explain the source of the site to those readers who stumble across the page through a search engine.
Our intranet expert review services are outlined in the INTRANET REVIEW: USING AN EXPERT REVIEW TO CREATE YOUR INTRANET STRATEGY (PDF). To learn more about our other Intranet Services, use the contact form on the NPCI website.
It looks like I skipped posting the Bad Usability Calendar last year. I’m not sure how I missed it, it’s one of the most interesting ways to demonstrate easy ways to avoid bad usability. Developed by Netlife Research, a user experience consultancy firm based in Oslo, Norway, the calendar is in the 6th year of publication and available in 16 languages. The 2010 calendar included a blog post each month that focused on the usability issue of that month. They included:
- January: You only know 10 percent of your website. Take control.
- February: Users are seldom as loyal as you think. Check your statistics!
- March: Go through the top 100 searches in your log. Make sure they all give good results.
- April: Add calls-to-action to all relevant pages. Start with the 5 top important pages.
- May: Do you need all the menus? Put more navigation in the content field.
- June: Link names should be meaningful. Remove “Read more”-links.
- July: Don’t let news get in the way of what the users want. Cut news.
- August: The most important first. Use the reverse pyramid and rewrite your texts.
- September: Put your website on a diet. You can cut 50–90%.
- October: The job starts once you have launched. Iterate to increase the quality.
- November: Test your website on at least 5 users. They will find errors you have overlooked.
- December: If you’ve done it all right you can add a little extra to you website.