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.

Balsamiq mockup tool

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.

Balsamiq mockup full screen

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.

Caveats

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.

FirmNet Example

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:

Make sure you click on the links on the calendar, they take you to some very funny videos, blog posts, etc.  You can download the calendar and print on 8 1/2 x 10 or purchase for $17 USD.

« Previous PageNext Page »



Follow

Get every new post delivered to your Inbox.

%d bloggers like this: