Goodies

• I've loved The Great Discontent and have read almost every interview that they churn out. It amazes me how Tina and Ryan do all of this. They've been releasing an interview every week since 2011 and they do this because they admire these people and because these stories inspire so many of us. But it's a lot of work to do for a side project. This week they've taken the leap and are dedicating their time to TGD full time. I think the community is happy to support them. I know I am and I wish them well. Check out their kickstarter campaign and if you love TGD as much as I do, consider supporting them. Also, follow Ryan as he documents their journey here.

(image: The Great Discontent)

• I love swissmiss' (Tina Roth Eisenberg) friday link pack posts and every now and then I'll check in and see what's she's got in store. This post is inspired by her link pack as it helps me share what I've found this week and keep a record of all these great links, projects, resources, etc. for later reference. If you've never checked out www.swiss-miss.com, check it out. Now. Go.
• Today I found this wonderful video via swissmiss...

• I went to a talk earlier this week at OCADU and was introduced to Jaymie McAmmond's work. I've actually seen her work but didn't know much about her. How have I not known about this local Toronto talent? I have no idea. But if you don't know, now you know. Here's some of her illustration work:

Starbucks Typographic Mural (image: Jamie McAmmond)

Mountain Mural (image: Jaymie McAmmond)

• If you're looking into using SVG graphics for your site–really great for responsive sites and scaling simple graphics–Daniel Mall's post on how to create SVG graphics will help you. Also helpful is Chris Coyier's post on how to use SVG.

• I've recently discovered Type Camp. Where have I been? I dunno, but I was ecstatic to find it! I've been looking for ways to learn more about typography and lettering and this is one fantastic way to learn from some incredible people, in a fun setting, with like minded people. It's also in Toronto. I've found it difficult to find opportunities to learn about type in Toronto, but if you dig, you'll find it! I'm signed up for the Toronto single day camp in April. They're offering the camp on two days and I'm signed up for Friday April 25th. If you're interested sign up soon to get the early bird pricing–hope to see you there!

Seeing (and feeling) is believing

When communicating a proof of concept or a design to potential clients seeing (and feeling) is believing.

Sketching ideas and wireframes is a major part of my design process. Sketching allows me to explore and refine ideas. It helps me to narrow my focus and start to understand the requirements and problems that my design needs to address and solve. It's also a great way to communicate your ideas and collaborate with your team - a picture is worth a thousand words.

After the sketching phase I'll usually take my sketches to Balsamiq so that I can start to create my wireframes digitally and make changes easily. I will share these wireframes with the team and we'll use them to discuss features, workflow, and UI design. This process has worked well when we're developing features to our existing product and discussing the project internally. But when we're creating something new and building a concept from scratch it's been helpful to take our wireframes to working prototypes.

A prototype allows us to test ideas internally and refine our assumptions. Most importantly, it allows us to communicate our ideas to clients and get buy in on the interaction design before development begins. We're able to learn about the technical details of our ideas and how that fits with our current product architecture.

Building a prototype is a lot like designing in the browser. But I'm not interested in the visual design. I'm interested in understanding how the UI behaves, the workflow and how the interactions flow from one part to another. Essentially the user experience. This isn't about aesthetics, this is about getting a feel for your interface.

When I build a prototype, I never start blind. That's what the sketches and wireframes are for. Going directly to code alone distract you from the intent of the thing that you're designing and what the goals are for the interface. So I start with my sketches and wireframes and as I build my prototype I discover things that I haven't considered and parts of my workflow that may have been missing. So I can change my decisions right there and test my designs easily.

HTML and CSS are part of my designers toolset and I recommend designers try to use it in theirs to help clients and your team get a feel for your designs. If you have some JavaScript or jQuery knowledge even better but there's frameworks that can help you with that. If you're not the type of designer to design in the browser, I think you'll still find it useful to take your designs to a working prototype and get a feel for the design decisions you made. You can also get some feedback from your team and test your designs on actual users. The prototype doesn't have to be fancy or pretty, and in fact it shouldn't be. Don't focus on the design details, the color, typography, etc. Just focus on the interactions.

You mentioned frameworks?

That's right, there's help! You don't have to start from scratch. That's what front-end frameworks are for...

In one of my recent projects I discovered HTML Kickstart. It's a very lean HTML framework that allows you to build an interactive web interface really quickly. It took me a couple of hours to create a responsive interface with 6 pages. They also use Font Awesome Icons which adds some great UI elements to communicate your interface to  your users.

Other frameworks...

Twitter Bootstrap - This is a popular one and has a whack load of elements that you can use to build your prototype but bootstrap goes beyond prototyping. You can build a full fledged development project with it. You can definitely do a lot more with Bootstrap but HTML Kickstart was ultra lean and light which is why I opted for it. Update: Bootstrap 3 is now out and a lot of it has changed apparently, I haven't tried this version so read more about the changes here.

Foundation - This one I'm excited about. I haven't fully worked with it (just got it setup and tinkered a bit) because again I wanted something really light and quick to use. Foundation is developed on Sass and can work with Compass, both of which I highly recommend, but that was a lot more more setup than I really needed. As a responsive framework I've heard great things and I definitely plan to use it to start my next web design.

From Me To You

Meet Jamie, a NYC based photographer, whose blog, From Me To You, I was introduced to thanks to Smashing Magazine. I don't have an image here to show you because they are her beautiful images. I wouldn't do them justice anyway because you have to visit her blog and really get a feel for it - everything from the photographs and her tumblr theme is magical :)Just go visit it! NOW...

Her work is clearly a reflection of her interests: vintage cameras and classic images. I absolutely fell in love with her photographs! What's even better is her use of animated gifs to bring to life her beautiful photographs and create a certain ephemeral quality about them. These images move, subtly and beautifully. But the quality of her work is evident in the photographs themselves. Yes they move, but they are beautiful even without it.

Anyone can use this technique by combining jpegs and animated gifs but I love Jamie's work for the images themselves. It's just a bonus when you see a flutter of a piece of fabric on a beautiful dress or a lock of hair swaying across a model's face... And, as a shoe lover, how bout those Louboutins shimmering in all their beauty?! Her images of fashion week are so delicious. I love all the behind the scenes moments and the images of the garments just waiting to be taken down the runway.

Jamie, you have made me a fan. I am in love with your work and I can't wait to see what other images you come up with! I wish I could buy them all - actually I wish I were the creator of those images! Jealousy is the best form of flattery :)

If you want to know how this animated photography technique is done, check out this article Positioning an animated gif over a jpg image.

ActionScript 3.0: getDefinitionByName & getQualifiedClassName

Occasionally I'll post a developer tip/note. As an interactive designer and developer, I use Flash and ActionScript often. These are two methods that I find useful and indispensable when working with dynamic movieclips.

getDefinitionByName

Imagine you need to find a MovieClip in your library or dynamically reference a Class and all you have is the linkage/class String name. You can create an instance of that MovieClip or Class using getDefinitionByName.

This method returns an instance of a Class Object from the Class name you provide. It is defined in the support docs as:

public function getDefinitionByName(name:String):Object

Let me show you an example. To get an instance of a MovieClip or a Class Object with the name "Class_Name" and add it to the stage:

var myClass:Class = getDefinitionByName("Class_Name") as Class; var classInstance:MovieClip = new myClass as MovieClip; addChild(classInstance);

This is equivalent to

var classInstance:MovieClip = new Class_Name();

getQualifiedClassName

Now, to do the reverse - to get the name of a MovieClip that you've dynamically created, use getQualifiedClassName.

This method returns a String which is the name of the Class instance you provided. It is defined in the support doc as:

public function getQualifiedClassName(value:*):String

Back to our example. Suppose we've created the instance classInstance and we want to get the linkage name or the name of the Class:

var className:String = getQualifiedClassName(classInstance);

The result would be, className = "Class_Name".

That's it! Oh and don't forget to import these two methods:

import flash.utils.getDefinitionByName; import flash.utils.getQualifedClassName;