Skip to content

Tools

  • in Tools
  • 6 min read

Creating wire frames and mockups

Communicating web concepts for user experience and site structure is a challenge. Wire frames and interactive prototypes are great for this, and over the years, I have been using those with many designers and developers in a variety of web projects. But creating and sharing such mockups still is a laborious task, so I went around the web again to look for a tool that truly makes that task easier. Pidoco seems to offer the best way forward for me.

Supporting the design process

So far, I have worked with a variety of tools to document site structures, page mockups, use cases, and interaction flows: pen and paper, Powerpoint, diagrams (Chartist, Visio, Dia), HTML pages (Dreamweaver, plain text, even out-of-the-box Drupal and Typo3 sites).

The design process ends up being frustrated on at least one of these criteria:

  • Sketch a mockup with standard page elements: Powerpoint and HTML pages suck.
  • Demonstrate the navigation through the site: pen and paper and diagrams don’t work.
  • Collaborate with several design team members, all on different platforms: only pen and paper in a workshop setting seems to do that
  • Share the results with the wider project team, or even a wider general audience: usually this is done with static images via email or on a website.

I took Saturday afternoon to find and compare a couple of “wire frame mockup tools”, and to review the whole work flow around design. Last month, Andreas Norman compiled a nice list of 12 tools that offered a great starting point.

My basic requirements:

  • Should be usable on all platforms: I’m using Linux, designers usually want a Mac, and project clients often are still stuck on Windows.
  • Should not require software installation, or expensive subscriptions to participate for people outside my organisation.
  • Software as a service (SaaS) is ok, if I can take my data with me.
  • Integration of the whole work processes with how I work would be great, specifically allowing offline work on designs.

There are two I will evaluate in a pilot project (Pidoco and WireframeSketcher) and a few I’ll keep an eye on (Balsamiq Mockups, iPlotz, and Pencil Project).

Reflections

  • The sketchy style of such tools clearly conveys it’s just a design and a work in progress, but it also makes it feel a bit like there’s no effort in there. I definitely like the more “formal” styles.
  • Once you build an interactive model, you really would like the tool to “just create the site”: it would be great if a mockup model could be used to configure an existing CMS, or generate the basic MVC classes in a framework of choice.
  • Only WireframeSketcher seems to have a simple way to create “Lorum ipsum” dummy text. It would be great to see that in more of these tools.
  • None of the tools offers process or work flow design features. Wouldn’t it be great if you could create diagrams to illustrate the flows through the pages?

This is just an overview of looking at a handful of tools from a slightly longer list. I discarded all Windows-only or Mac-only products from the start. I know there are software development tools (especially for Java) that help move from interface design to code, but I haven’t seen such tools for web-based projects yet.

I’ll probably be looking around again in a few months, so any suggestions for other tools, services and approaches are more than welcome!

Reviews

Pidoco

  • An online suite of modules to visualise, create prototypes, and review; can also work together in real time.
  • No offline versions, but the export feature offers a simple way to get all pages in (x)html and svg to publish for instance on your own server.
  • “Walk the talk” demo, using the wireframes for their own website. Cool! Uber-cool would have been to use those wireframe as the company website 🙂
  • Pricing is from $7.50-$30 per month with a year-long subscriptions, but it’s not quite clear how many people will have access.
  • Easy to quickly get first results, and to use “content overlays” to set up interactive navigation. Limited collection of widgets and standard elements
  • Use Case feature to highlight navigation between a sub-set of all pages.
  • HTML/javascript

Verdict: worth to try in a next project. These guys do a few things right: preview without registration; the export feature is wonderful; real-time online collaboration is great to have; and the Use Case repository could become a very useful feature (but doesn’t do a lot at this point).

Wire frame Sketcher

  • Support for story boarding and master templates, but with a limited set of standard items. I like the style, but there are very few formatting options to tailor it.
  • Offers free licenses for open source developers and reviewers; and if you’re a Java developer, it can import existing SWT dialogs to as mockup designs.
  • No interactive options, limited presenter mode (no online presentation).
  • Will need to export each image (but perhaps using Eclipse’s build options can automate creating and uploading of images).
  • Eclipse plugin: great to integrate in my work environment (have sketches included in Mylyn task contexts, use version control to share designs within my organisation), but basically preventing collaboration on designs.

Verdict: maybe worth a try in a project, and at least at hand in my Eclipse workspace now. Not really answering my needs, except the integration with how I work.

Balsamiq Mockup

  • Has a true sketchy nature, including “sketchy” import of images
  • No page “templates” or master layouts
  • Has a good preview mode for meetings where everyone is in the same room, but not for online meetings (the web-based version that they’re working on might cover that)
  • There are plugins to integrate it with some wiki software (Confluence, Jira, Xwiki, Fogbugz), but “our license agreement specifies that we as Balsamiq employees are the only people allowed to build such integrations.” Very bad policy.
  • They seem to have relaxed requirements for “do-good” organisations to get a free license; otherwise, it’s $79.
  • Adobe Air

Verdict: not suitable for me yet; the upcoming online version might change that.

iPlotz

  • Available online and as desktop application.
  • Page snippets and public projects help to extend the standard version.
  • The online version has a project management environment (yet another one… no integration with other trackers or to-do managers).
  • Seems to be limited in formatting options. No auto-snap (aligning objects to each other) while editing. Can’t get the tab bar working interactively.
  • Adobe Flex

Verdict: maybe will check again in the future, but doesn’t feel right at the moment.

Pencil Project

  • Open source
  • No library of shapes for standard stuff (of course: open to add stencils)
  • Seems to be a limited diagramming tool.
  • Firefox addon

Verdict: revisit again later, for now too limited in its features. But open source!

ForeUI

  • Offers a few drawing styles (hand drawing, more formal drawing, Windows, Mac)
  • Interactive simulations based on DHTML, no additional effort on side of occassional participants, but no support to upload the HTML automatically.
  • Mock text consists of gray lines instead of “real” dummy text, doesn’t work good enough for me.
  • Adding interactive behaviour quickly becomes messy: there is no copy&paste or sharing between pages, and keeping tabs/menus and their linked actions accurate quickly becomes a hassle.
  • One-time license is $79

Verdict: not suitable for me, Pidoco does most of it too, and does it better.

ProtoShare

Verdict: not suitable. The answer to the question “How can I backup my data?” basically already disqualifies ProtoShare. Trying to export the example project resulted in a Word document of 50 pages, and it just feels too heavy.

Flairbuilder

  • Several widgets are actual true widgets: they are only really visible in preview mode. Watching a random YouTube video actually is not what wireframes and mockups are all about.
  • Anyone wanting to view designs, needs to install a (free) player or this software.
  • Adobe Air

Verdict: not suitable for me.

OverSite

Verdict: a Java-based product, but somehow the web pages and screen shots kind of push me away from this tool.

Plumbing on the web

Social Media Plumbing:

../../../assets/posts/19356120bac308f4517a384baf1364b8_MD5.png

Flow chart

A post by Robert Scoble made me have another look at rooms in FriendFeed. I set things up over the weekend, and decided to document it, to maybe succeed in explaining what this is all about. Here’s my situation:

  • I post content on various social media sites through various tools
  • I want some of that content to appear on my own website
  • I switch platforms quite often, or start using them in a different way, so keeping it up to date should be easy

So I decided to start a FriendFeed room with content that I want to appear on my site 1, and use their feed widget to then display it on my home page. It still took some effort (to get the styling how I wanted it), but it’s done, and here’s how.

Connecting the pipes

The schematic picture 2 shows how things connect:

I surf the web and come across pages or sites that interest me.

I collect all the stuff in a FriendFeed room from various sources:

My next steps will be to set up similar aggregators other collections of life streams, to feed into other places. And to draw some more pretty pictures on how it is all connected 🙂

1 My website runs on Drupal, which could aggregate things directly, but Drupal still rarely delivers the “should be easy” part, and I wanted to move forward with content, not code or config.

2 I’ve made this scheme in Xmind, a mind-mapping tool that recently went (partly) open source. I’ll post the source file soon.

Update: the source for the image is now attached.

First look at Tasktop

Today I took a first look at Tasktop (claiming it "takes the effort out of being organized"). It didn’t quite take the effort out of being installed, but I’ve kind of grown used to that with Eclipse, and it is still in beta. Tasktop is taking Mylyn, the "task-focused interface" to a whole new level. First geeky impressions from an Eclipse user.

Mylyn starts…

  • Creating and scheduling tasks: define the things to do, and schedule them for a particular day. Then work through the list.
  • Provide "context": activate a task, and Mylyn keeps track of which files you open and edit. You can then "focus" the interface, showing only those files, and store the context with the task. Next time you activate the task, it will only show those files. (I still have to get the hang of it, though)
  • Integrate with several issue trackers (Bugzilla, Trac, and also Mantis). So I have the issues in our tracker that are assigned to me available as tasks in Mylyn.

Tasktop continues…

The thing I like the most so far is the integration with Google Calendar, since I already use that to share information with my colleague.

  • See items from selected Google calendars in a week overview, and post the tasks I schedule to a calendar of choice. Makes it easy to share more detailed workplans, and to reschedule from either Google Calendar or Eclipse with Mylyn and Tasktop.
  • Have a week overview with all the tasks from various calendars.
  • Easily navigate to either a browser window for a calendar appointment, or the issue ticket in a tracker. Tasktop nicely stores a link to the issue tracker in the Google Calendar appointment.

Tasktop also can link to your Outlook tasks and emails. I can only hope someone will make that work for my Palm desktop too… I’m still not ready to start using Outlook.
Ever since I read the first bits about Mylyn (called Mylar in the old days) I have been eager to see each next step. Eclipse makes it easy to connect to different version control repositories, work in different languages, and on different servers. Mylyn makes it easy to connect with various issue trackers to work as task repositories, and now Tasktop starts adding more scheduling options too. Having a single, uniform, and consistent interface to work on a variety of projects and backbones is getting closer.

  • in Tools
  • 1 min read

How does Google see your site? Their Webmaster Tools will tell you.

I just discovered Google’s Webmaster Tools, which is a nice addition to Google Analytics: add your site (or sites), and Google will give you insight in how it sees your pages:

  • See when Googlebot last indexed your home page, and how many pages per day it crawls.
  • Analyse your robots.txt, add a sitemap to help Google index your content.
  • Find out in what queries pages from your site were returned (and in what position), and which links people clicked on.
  • Check out how the PageRank of your pages is performing.
  • Learn about all the trouble Googlebot had with your content: HTTP errors, links not found, URLs timing out or unreachable, restrictions by your robot.txt.

An interesting toolbox for webmasters, to help you optimise your site, and get an idea of how you’re performing.

  • in Tools
  • 1 min read

More Firefox

With the version 1.0PR of Firefox, two more noteworthy extensions have popped up!

ColorZilla

Sits quietly in the status bar, and offers an "eye dropper" style colour picker, with the option to copy the selected colour to the clipboard, ready to be pasted into a stylesheet. It also offers a better zoom function. Facilitates re-creating a site look and feel!

QuickNote

Available for Firefox and Thunderbird, adds a simple notepad and an easy way to copy selected text to it. The notepads are just text files. Especially with the option to add the current URL at the end, it makes it very easy to read and "take notes", and be able to find the source again afterwards when processing the text.

  • in Tools
  • 2 min read

Firefox essential extensions

After using Firefox for a while, it’s hard to imagine still how "normal people" surf the web. By now, I tweaked my Firefox behaviour with several extensions.

Webdeveloper toolbar
Essential for developing web pages! The toolbar offers too many options to list all, but to name a few that I would not live without anymore:

  • CSS tools: edit the style sheet of a page on the spot, great for testing and debugging. Mark links as visited or unvisited to test styles here too.
  • Clear HTTP authentication or session cookies: means not having to restart the complete browser to test the start of sessions and such.
  • Resize the window to any format, to see how things look at good ol’ 800×600.

Tabbrowser Extensions
The Tabbrowser Extensions by Shimoda Hiroshi are an important tool to make Firefox really work completely in a single window, with all browser tabs neatly organised. The extension offers a lot of finetuning to open new tabs for links to other sites, search queries, and so on.

Linkification
Listed with other extensions, this one looks at your page after loading, and "fixes" the web and email addresses that are not yet clickable links. Too often, someone refers to an interesting resource but without linking to it.

BugMeNot
In the same list: getting tired of registration forms just to see a single item that is free anyway? Reclaim your privacy. Install this extension, and with a simple right-click it’s possible to query the BugMeNot database for an account someone else already made. Maybe it doesn’t work, try again for a different account. Maybe there is none available, then you still have to create an account (and add it to BugMeNot, to perhaps save someone else the trouble).

Browser compatibility testing

While trying to find good resources for browser compatibility, I came across some interesting services to check the output of a web page on different platforms and browsers.

  • Browser Photo delivers pictures of a page in different screen sizes on WebTV, iMac, and PC (Windows 2000), for IE and NS mainly (no Mozilla…). $150 for a year unlimited checking.
  • ScreenShotService offers a very similar service, and includes Linux and Mozilla, but only IE from version 5 on. €480 euro for a year. It’s in German.
  • BrowserCam is more sophisticated, and also offers VNC to check mouse-overs, forms, and so on, with more browsers, different Windows versions, Linux, etc. $480 for a year unlimited checking.
  • ieCapture is an attempt to create snapshots of a site in several iMac browsers. It’s very alpha still, and not always available.

Related resources:

  • AnyBrowser offers a SiteViewer for browser compatibility testing. They created an HTML specification that represents the lowest common denominator across browsers, so the idea is that if it shows up ok in the SiteViewer, it shows up ok in any browser. They also promise to have a desktop version available again.
  • Download older versions of browsers from the browser archive. And find out how many browsers there are 🙂 Another site offers stand-alone versions of IE to be able to have more IE versions on one machine. And at Deja Vu you can read more about browser history.

Tracking time and expenses

In my previous job, I simply had to keep track of time spent on some project. I used SDS Time for years: simple, straightforward, and with the data in CSV format on my desktop, quite easy to fill out the company time sheets. We didn’t monitor anything beyond “hours on a project”, and with categories and so, I could also keep track of time spent on certain private projects and boards and so.

When I started working as freelance consultant, I wanted to track time, and expenses as well, in more detail: what kind of activities do I spent my time and money on? SDS Time no longer fitted my needs, so I started to look around. Surfing around, it’s obvious we’re moving into a category where there’s money attached 🙂

  • Standard Time offers a lot, including project management, integration with M$ Project, and so on. But it seemed a bit too much focused on pre-determined plans, and have an overlap with my more general notes and task tracking habits. Also, during my trials, it seemed to eat up a lot of processor time when it started up, making other work almost impossible.
  • Project Companion also is quite a beast. It even needs Internet Information Server on my desktop to be useful at all… And then it just didn’t really feel as if it would help: not too responsive in behaviour, and not fully supporting my idea about linking projects, tasks, and activities.
  • The best match so far is iambic’s Time Reporter, the most expensive solution, but with some nice features: importing from my calendar, and the ability to change the data model a bit (switch off milage tracking as I’m not racing around in a car, link projects to clients, and some tasks to specific projects, and the best interface to add new items to lists while I found out what I really want to track).

Agenda and contacts

For a long time, I have used DateBk4 and DateBk5 as my agenda on my Palm. But I was always unhappy about the lack of support at the desktop, and I slowly concluded that I was not really using the full potential of an electronic agenda when I constantly had to either type in all information on my Palm, or enter half the info on the desktop, then sync, and add the other half on my Palm. Things like categories of appointments.

It took me a while to be ready to switch, but now I’m a happy user of Agendus. It really works well on both my desktop and my Treo, and suddenly the contacts database has become much more useful too. The contact history on the Treo even includes entries from the call log.

  • in Tools
  • 1 min read

Access to the SD Card from the desktop

I intend to use my Treo as a kind of ultra-light weight "laptop" for certain trips. Often I can use some computer in an office or internet cafe for more extensive work. So it would be nice to use the SD Card as a memory stick. Apart from that, being able to directly work with the files on the card from my regular laptop would really help too. With Softick’s CardExport II ($15), this is now reality. Just start the software on the Treo and click "connect".

Before, I also tried the first version of Card Export, and BlueSync by Blue Squirrel also was an interesting product to test. But they both needed software to be installed on the PC, and didn’t really allow me to completely free access to the card.