Categories: Utilities

UI Prototyping Tools

In this post I wanted to look at some UI (User Interface) prototyping tools. These are tools that are extremely important for individual web developers and for large teams of developers. For a solo developer, the prototype user interface shows what an app (whether it’s a desktop or web or mobile app) should look like. For a large team, it defines a vision that everyone can align around.

Product managers and product designers will want to get familiar with these tools because they are essential to developing mobile apps, web apps and websites

Here are the tools that I have used for prototyping user interfaces.

Balsamiq

Balsamiq is the original user interface prototyping tool. It includes stencils and examples of user interface items like buttons and tables and menus.

The key feature, at least for me, is that the interface looked like a sketch and not the final product, the interface really looks like a prototype. This makes it easier to sketch out ideas and not be too tied to one idea for an interface and leads to rapid iteration.

Balsamiq is now available in the cloud and for Google Drive (one of the online business tools that I use) along with the original desktop version. It’s also available for JIRA and Confluence.

They now offer courses for aspiring UI/UX designers to learn how to develop wireframes for products:

Pencil

Pencil: an open source tool similar to Balsamiq and it comes with stencils for designing Android and iOS apps along with stencils for designing web apps.

It’s possible to combine Pencil with a tool like InVision to make an interactive set of wireframes for UI prototyping. Check out SourceContribute for a more in-depth look at the usefulness of Pencil as a UI prototyping tool.

InVision

InVision is a web-based tool that integrates with the workflow of designers who use tools such as Sketch and PhotoShop. With InVision, you create wireframes for your user interface in graphic design apps like Photoshop (or Illustrator or GIMP or Inkscape) and then upload it.

InVision lets you connect buttons and clicks on the user interface to other screens. This allows you to create an interactive prototype to see how navigation between screens will work and to test the UI’s effectiveness and see how the UX (User Experience) feels.

For product designers, InVision helps you work with product managers to rapidly iterate on the interactivity and the design of a feature or the entire product.

Categories: Life

How to write down your top priorities

In the past year I’ve been trying to get my system for productivity and organization done. I have read and re-read Getting Things Done and things are slowly coming together. As I mention in a previous post, I’m using ZenDone for the list of next actions and the contexts that I can do those next actions, and I’ve been using Evernote for storing all sorts of notes and more details on the things I have to get done and for organizing projects.

[Update: 17 November 2018. I started to use Todoist in the past year to keep track of project to-dos. What I like is that it can show all TODO items scheduled for today, and it has another view showing all TODO items for the next seven days, so there’s a good agenda view.]

However, I’ve been missing something: a list of priorities for the day. This is different from a list of next actions and from calendar events; you may have to do some chores today but they aren’t a priority, you might have to go to three meetings but only one of those meetings is a priority.

The list of priorities for the day is an idea inspired by the book The One Thing. It proposes that we have to discover the one thing in life that we want to do and align everything around that. Ideally all of your priorities will be related to and aligned with the one thing that gives your life purpose and meaning.

Continue reading “How to write down your top priorities”

org-doing

org-doing

Inspired by the doing command line app for logging progress on to-do items and tasks, I decided this would be a neat feature to add to Emacs. The org-doing add-on lets you track what you are doing now, what you want to do later, and anything you have made progress on or completed.

It is an add-on for Emacs that hooks into org-mode. This means that, with timestamps, you can create an org-mode agenda-view that displays the tasks you have done in the last day and the tasks you have remaining to do. From there, you can add more notes or clock in the time or do whatever else you can do with org-mode.

The idea is to keep a worklog and notes for each task as you are completing them or making progress on them with just a few keyboard shortcuts.

Feel free to check out the code or the site.