From the Pixel Mines

Thoughts on design, gaming, and whatever. All content belongs to me unless otherwise noted. Follow me on twitter @TysonKallberg

[tysonkallberg]

  Parallax Lockscreen Concept for iOS 7

I'm going to go on record saying that iOS7's parallax effects, while quite cute, are a lot form and not a lot function. That said, I am pretty interested in the 'dynamic wallpapers' for the lock screen. Alright, so maybe it's all eerily similar to Android of yore, but I don't care.

Right now there are a couple of 'bubble' wallpapers; you'll get a subtle parallax effect on a photo background, and a nifty scrolling effect on a panoramic photo.

This got me thinking about all the things you could do with a few layers of images and some simple parallax.

I whipped up a quick template in Quartz Composer to test parallax. It should actually work fairly well to test parallax effects for apps as well. You can download it here if you feel so inclined. It's worth noting this isn't using 'real' parallax it's exploiting actual 3d transforms, it's enough for the sake of playing with the effect.

Anyways, I fooled around with some quick sketches, you can check out my results in the video. The first example is of the basic parallax effect you'd get today on a photo. The 3 that follow are made up of 4-6 image layers.

(If the video is being funny in the post, it's here as well)

I'm going to run off and explore what could be done with some infographics. I'm thinking calendar, reminder or weather info could be displayed in a really neat way using this effect.

[tysonkallberg]

Figured I'd share a few of my favourite moody night photos from my trip to Japan. You can see the whole set here http://bit.ly/1a5dezs

[tysonkallberg]

Quartz Composer: Part II

It's been about 5 months since my original post on Quartz. I'll admit that my interest waned shortly after writing it due to news that QC was being deprecated (apparently untrue.) 

The good news is: after Facebook Home was announced, Dave O Brien recorded some QC tutorials. Now tutorials on QC aren't especially interesting, but these ones focused specifically on prototyping interactions. Apparently my issues with QC were not unique, and those tutorials sparked a discussion on how it related to prototyping UI.

All this got me excited about QC again, and since then I've managed build up enough confidence to apply it professionally. I can't show any of that work yet, but once I can I'll be sure to post some thoughts.

In the meantime, I've collated a bunch of resources that I found really helpful. Big thanks to those who stuck their necks out and shared their process with us:

Dave O Brien Tutorial Videos

Quartz Composer Branch (Brandon Walkin's sample files are especially interesting)

Brad Ellis' Çingleton Talk

Prabrothers' Quartz Composer Diary

[tysonkallberg]

Okay, one more, since I apparently don't like sleeping.

[tysonkallberg]

Yet another logo for our RPG game – This time for the Guo Yin Society, lenders of money and builders of ships.

(Shout out to the wicked flying junk from Fifth Element.)

[tysonkallberg]

Carranzo, planet under siege by the Lunar League.

[tysonkallberg]

More RPG Logos. Cereo Industries: Medicine / pyscher tech company.

[tysonkallberg]

Another Stars Without Number logo – Some corrupt corp that we owe a lot of money.

[tysonkallberg]

We've been playing Stars Without Number in our weekly RPG group – I've started creating random illustrations for the various groups & corporations our group has encountered.

First up, the Lunar League: Rebel group who shattered their own moon to kick off a revolution.

[tysonkallberg]

Android is to mobile design what IE6 was to web design.

[tysonkallberg]

We watched Dune (from '84). There were some neat little pieces of design in there.

[tysonkallberg]

Icon for a company internal project.

[tysonkallberg]

Patches & Noodles

So, I take these little noodles... and plug them into these patches? And that's going to make... something?

I've been hunting for better ways to prototype interactions for a long time. I've been using Keynote for years for simple demos; when I found myself wanting more, I moved to After Effects for a bit more flexibility. The issue is, I've had to make a choice: something interactive or something pretty. I'm hoping Quartz Composer (QC) can bridge the gap between lame a point-and-click demo, and a glorified slide show.

There have been references to QC as a prototyping tool in a number of articles and interviews over the years. I've opened QC a few times in the past, only to close it a few frustrated minutes later. I decided recently (last weekend recently) that I was going to give it an honest shot. I mean if it's good enough for Mike Matas.

I've found a few interesting things while trying to teach myself QC:

Firstly: the UI is really odd. This is my first foray into 'graphical' programming. I've dabbled in Processing, PHP and Javascript. I was hoping my rudimentary programming knowledge would help me out. The first few hours were spent asking, "How the fuck am I going to use a bunch of boxes and string to make anything useful?". The good news is, once you get past the abstraction, there's a ton of powerful tools.

Secondly: there are no resources. That's not to say there aren't resources for QC — there are a bunch. I just had trouble finding examples, tutorials or articles specifically relating to using QC as a means to prototype UI. People reference it as if it's magic, like finding Jesus. Yet nobody seems to have time to share that knowledge. There are 'rumours' of custom patch libraries at Facebook and Apple; references to groups of designers who only share knowledge with a close group of professionals. Who knows, maybe it's a big inside joke and QC is actually a pile of garbage?

Lastly: creating even simple interactions requires a load of patches; it makes things a bit arduous to setup. I feel QC's sweet spot will be prototyping richly animated, custom interactions. The trick will be to build up a good set of templates and custom patches/macros. 

All this is fairly speculative still, I'm still only in twenty-or-so hours. Here's hoping I get a firm enough grasp of QC to integrate it into my everyday workflow.

(Oh, if I do figure out this is the holy grail of prototyping, I'll do my best to share)

[tysonkallberg]

[tysonkallberg]

Not sure why this is in the shape of an icon. Ah well.

Updated: Had to make the middle bits more 'lighty'

[tysonkallberg]

[tysonkallberg]