The 20 best wireframe tools

 

Creative Bloq lists 20 best wireframe tools.  The selection varies from free, through cheap, to expensive, and covers web-based, desktop, and mobile solutions.  Quite handy for those of us not involved in web design on a daily basis, but needing a sketch / mockup / wireframe tool once in a while.

The list includes the following:

  1. Wireframe.cc
  2. Moqups
  3. UXPin
  4. Fluid UI
  5. Balsamiq Mockups
  6. Axure
  7. Pidoco
  8. Visio (surprise, surprise)
  9. InDesign CC
  10. Photoshop CC (no surprise)
  11. Photoshare
  12. Penultimate
  13. Pencil Project
  14. OmniGraffle
  15. Gliffy
  16. MockFlow
  17. Frame Box
  18. FlairBuilder
  19. Justinmind
  20. HotGloo

 

My lightbulb moment with modular design

Cameron Lock, of Yammer fame, describes the complexities involved that led her and the team to a simpler, more modular approach to the mobile application design.  The most important bit after grouping everything into modules, practically, I think, is this:

We stopped defining margins between modules. Instead, all the spacing in the app would come from padding within the modules — specifically, top padding. Bottom padding would have worked, too; just not both. The key is to choose one of the two and stick with it.

What’s the best framework for building mobile apps?

It’s been a while (a few years actually) since I looked at building a mobile application.  I don’t have the need to build one now, but I like keeping an eye on what’s going on that domain.

Even back when I was involved with mobile applications, the better approach was to use a framework, rather than building the app from scratch.  The frameworks that existed at the time would help with building a cross-platform (Android, iOS, Windows Mobile, etc) application, and have a better integration with the mobile’s hardware and features (touchscreen, networking, vibration, camera, etc.)

As with many other cutting edge technologies, things move very fast and things get outdated pretty quickly.  So it was interesting to read – What’s the best framework for building mobile apps? – which covers today’s options.  Some of the solutions survived the last few years, some didn’t, and there are a few new ones.  The frameworks covered in the article are:

The article is a good quick overview of what’s out there and why to pick one over the other.

How Voice Search Will Forever Change SEO

Search Engine Optimization is not one of my favorite subjects to talk about. But I think this article is worth the time.  It explains some of the challenges with voice search in very simple terms, and shows how voice search is growing and affecting the web.

Voice search is the fastest growing type of search, according to the keynote speech given by Behshad Behzadi at SMX West in March, Principal Engineer at Google Zurich. Already, 55% of teens and 41% of adults use voice search on a daily basis, and that number is only growing. The allure of voice chat is undeniable—it’s faster, it’s hands-free, it lets you multi-task, and (especially among millennials) it’s considered cool.

Voice chat is also becoming increasingly reliable as technology improves. In fact, two years ago word error rate was over 20%, but current speech recognition word error rate is as low as 8%—a huge leap in a short amount of time.

On the future of apps and mobile web

It’s been a while since I expressed my point of view on the apps and the mobile web.  (It hadn’t changed much though.)  While reading through the “Why Britain banned mobile apps” article, I caught myself nodding my head in agreement.

So why did the GDS ban apps? It wasn’t because they weren’t technically savvy enough to build them.

Cost, he says. Apps are “very expensive to produce, and they’re very very expensive to maintain because you have to keep updating them when there are software changes,” Terrett says. “I would say if you times that by 300, you’re suddenly talking about a huge team people and a ton of money to maintain that ecosystem”.

How did the UK reach an increasingly mobile population? Responsive websites, he replies. “For government services that we were providing, the web is a far far better way… and still works on mobile.”

Sites can adapt to any screen size, work on all devices, and are open to everyone to use regardless of their device. “If you believe in the open internet that will always win,” he says. And they’re much cheaper to maintain, he adds, because when an upgrade is required, only one platform needs recoding.

I think that the initial boom of mobile apps was caused by two major factors:

  1. Native applications had much better capabilities – user interface, performance, features, offline mode, etc – than their web counterparts.  Mobile browsers used to suck big time.
  2. The competition in the app market was much smaller than the competition for the “first page of Google”.

These two reasons were significant enough for a whole lot of people to go into the mobile application development.  So much so indeed that a whole new industry appeared.

But I never thought this would be permanent.  Unless, of course, there would be other reasons.  Which I don’t see.  And both of those reasons aren’t valid (to the most part) today.

Smartphones got smarter, stronger, and faster.  Mobile browsers improved a whole lot.  So unless you are doing something really pixel perfect or resource intensive (like some of the games), the mobile browser is more than enough for you.

And look at the competition in the app markets!  There’s like a hundred apps for whatever is that you want.  Endless lists of recommended, featured, and sponsored apps for ever growing list of app categories.  No matter what your app does – there are a few dozen of others that do the same exact thing.

If you absolutely definitely have to build a mobile app, don’t start with the native one straight away.  Do the hybrid one first.  Build a web application and package it into the native one with something like Apache Cordova.  This will save you tonnes and tonnes of time, money, and pulled out hair.  (I learned this the hard way!)

With all the hype mobile apps have generated in the last few years, they have some momentum.  They aren’t going to disappear.  But just because you can build one, doesn’t mean you should.  Build a web app.  It’s simpler, faster, and easier.  It scales better.  It works better (except for very few edge cases).  And it will cost you a fraction to support and maintain.

CSS Hamburgers

After spending years and years in close proximity to web and user interface design, I’m still amazed sometimes at a variety of ways to solve even the simplest of problems.  The growth of the web users on mobile devices has brought us the hamburger icon, which usually hides the collapsed navigation menu.  It looks like this:

hamburger

Now, when you click on that, something happens.  The menu expands or collapses, usually.  But what you don’t often notice is a tiny bit of animation that is applied to the icon itself.  Here is a collection of such animations.  There are 14 different effects, both in 2D and 3D.  Wow!

css hamburgers

Google Design : Resizer

resizer

Here’s a very handy tool for anyone in web design and developer – Resizer, from the Google Design team.  It allows you to preview your site in different resolutions, helping with all kinds of responsive issues.

This is an alternative to Am I Responsive?, which I mentioned a while back.

Chrome DevTools : Remote Debugging Devices

remote-debug-banner

Remote debugging on Android with Chrome DevTools sounds like the best thing since sliced bread for anybody involved in web development.  TL;DR version:

  • There’s no substitute for debugging your site on a real device. Debug browser tabs on your device from your development workspace using remote debugging.
  • You don’t have to shift attention between your device and development screens. Use screencasting to display your device’s screen along side your developer tools.