Month: February 2014

Still in love with Balsamiq Mockups

I hate using paper. I just do. I could never cut anything straight and had an ever present fear of lead poisoning drilled into me by catholic nuns in elementary school. You can imagine my elation when I discovered Balsamiq (now called Mockups by Balsamiq). At the time I was tasked with creating wireframes to show the CEO/Art director (don’t get me started) some ideas. Seemed like the perfect solution to keep his mind off the aesthetics and on the larger issue of pain points, flow, and user stories. What have I used this program for since? Everything! Wireframes, personas, prototypes, even design critiques. The funny thing is that I was raised using Adobe Illustrator for anything that involved the smallest amount of layout. Talk about overkill. Typically I’ll end up exporting the bmml files out as PNGs and dropping them into Keynote or whatever I’m using to present.

Advertisements

Seductive Interaction Design by Stephen P. Anderson

Seductive Interaction Design

Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences (Voices That Matter)

I would have liked it more if it had some “before and after” examinations. Instead there’s a lot of success examples throughout; “look what Amazon did here” type stuff. Makes for an easy read but I really enjoy the details of problem solving. It has a lot of general explanations as to why IXD’s do some things that we learn in class or in the field. There’s hardly anything in here that Steve Krug didn’t cover in a more concise manner, IMHO.

Flojuggler iOS Explorations

Now that we’ve got an MVP ready to submit to the store, it’s time to start iterating on improvements. The app works, it’s intuitive for the majority of testers, and it even has a bell and whistle (singular) but now we need to make some moves to make it a bit more seductive.

Each of the following are non-functional prototypes and are being used to test before narrowing down any viable ideas. Click on each to read a description of the whys and hows.

Jade > HAML… or why I use Jade more than I ever used HAML

jade-greater-haml
Many years ago I was leading a small team on the presentation layer of a Rails app and it was suggested that my team start using HAML in strict mode. We had all been writing HTML/CSS/JS by hand for years and just could not see the value in learning shorthand syntax because we’re not Rails devs and we know how to write markup. Sure it’s more efficient and cleaner looking for a back end engineer but why add a layer on top of something that’s not a problem for us? That said, we tried it anyway. It was a disaster. The strict indenting slowed down the dev cycle and while the syntax was fairly close to raw HTML it looked more like Ruby than markup. We ended up dropping HAML and productivity sky rocketed.

Years later the landscape has definitely shifted. It’s not just about writing human readable code. It’s about semantic markup and accessibility compliance. These shorthand languages provide a system for reducing hacks in the markup and provide templates for a larger application.

It’s 2014 and I’m looking at Jade as a shorthand HTML markup language and… well… I actually like using it. The syntax is very much like HAML but I find it so much more digestible. Why? Probably because it writes like JavaScript and not Ruby. I spend a lot of time in JavaScript land so the syntax just works for me. There’s no % all over the place.

doctype html
html(lang="en")
	head
		title="selino"
		link(rel='stylesheet', href='index.css')
	body
		#container.flex-con
			p Item 1
			p Item 2
			p Item 3
			p Item 4
			p Item 5
			p Item 6
			p Item 7
			p Item 8
			p Item 1
			p Item 2
			p Item 3
			p Item 4
			p Item 5
			p Item 6
			p Item 7
			p Item 8
	script(src="js/reload.js")
	script(src="js/prefixfree.min.js")

The real sell for me was the ability to throw JS conditionals into the mix. I love JavaScript so it feels like home.

if youAreUsingJade
        p You are amazing
      else
        p Get on it!

Koala Brings SASS to My iOS Project

I’ve been using SASS in Rails projects for years. How I wrote CSS before is hard to imagine but I didn’t have to imagine it for long. As I began work on the Flojuggler iOS app I realized that I had to write some raw CSS. Was not a problem but… kinda sucked. So, I looked around for a tool that would let me write SASS without needing a server side interpreter. I shopped around, tried a few, and decided that Koala is the marsupial for the job.

Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.

Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.

As you save files, Koala compiles the code and writes another file. You include the written file in your project. Not just CSS either. This tool makes it super easy to compile and minify JavaScript files, too. Check the feature list.

  • Multi-language Support: support for Less,Sass, CoffeeScript and Compass Framework.
  • Real-time Compilation: listening files, compile automatically when the file changes, that everything is running in the background without user action.
  • Compile Options Support: you can set the compiler options for each file.
  • Compression: auto compress code after compilation is completed.
  • Error Notification: if encountered an error during compilation, koala will pop up the error message.
  • Cross-platform: koala can run in Windows, Mac and Linux.