Konigi

SketchMine: Sketch app templates

jibbajabba — Mon, 20 May 2013 16:12:16 +0000

Sketchmine provides .sketch files for use in Bohemian Coding's Sketch app for Mac. The files are free to download and are contributed by the Sketch community.

PowWow

jibbajabba — Mon, 13 May 2013 17:23:40 +0000

PowWow is a free simple service for scheduling user research using your Google Calendar. The fine folks at Pointless Corp (aka Viget) created this as a side project for handling scheduling of user interviews and testing, but could be used for any kind of event.

There are other apps like this that remove the fuss of coordinating schedules via email. PowWow does it simply, and provides a polished and pleasing experience. You pick the times that work best for you and send out a calendar with available appointments and any additional information to potential participants. Participants can select the appointment time that works best for them and you will be sent a confirmation with their contact information.

Link Drop, Apr 2013

jibbajabba — Mon, 06 May 2013 19:09:05 +0000

No to NoUI – Timo Arnall
Flat UI Free - PSD&HTML User Interface Kit - Designmodo
10 Apps to Help You Tame Your Monitor at Night | Mac.AppStorm I don't tend to use my computer at night, preferring the iPad, but apparently using a computer screen can have an effect on getting to sleep using the default brightness and color settings you have now.
Chrome Web Store - OneTab Better ways to sweep tabs under the rug and pull them back out.
Inconsolata An excellent monospace font for coding and terminal apps.
Design Process In The Responsive Age | Smashing UX Design
Designing For The Empty States | Codrops Design of empty states: First use, User cleared and Errors (e.g. no internet connection).
How Colors Affect Conversions Infographic on the psycological influence of color on the human brain and how it can affect conversions.
Define :: Responsive nice illustration of scaling and breakpoints if you want to explain responsive design to someone.
Installing and Updating : Statamic Static PHP site builder.
CODING.FM Nothing like the sound of an angry coder to motivate you.

Sticky Jots

jibbajabba — Thu, 18 Apr 2013 23:58:14 +0000

Sticky Jots is a set of storytelling sticky note paper and paper prototyping kits for designing mobile and tablet interfaces. The product is designed by Rae Milne and Pamela Jue, two grad students in the SVA Interaction Design program.

Pam writes about the thinking behind Sticky Jots.

The idea came from our constant prototyping and ideation process in almost every project this semester. While it’s great to do, it’s still frustrating how time consuming it can be. We started thinking more of how we can we integrate a better experience with our process so that it could be more collaborative and efficient with time.

They're going to be offering storyboard sticky notes, as well as mobile or tablet dot grid pads. There are also iPhone and iPad backs, which look like they'd be great for paper prototyping and testing. They've already surpassed their production cost goals on Kickstarter, which ends on Apr 24. Find out more about how to back the project.

Conferences and Events

jibbajabba — Mon, 15 Apr 2013 17:35:18 +0000

GoodUI Newsletter: Ideas for getting good conversion rates

jibbajabba — Thu, 11 Apr 2013 22:16:22 +0000

Jakub Linowski, creator of Wireframes Magazine just started writing a newsletter called Good UI on how to design sites that are easy to use and also yield high conversion rates.

He's looking at how to employ practical ideas that satisfy the business side as well as the people using it, which I'm sure is something we all want to do on sites that sell a product or service. He plans to publish the newsletter monthly. Check it out.

Protosketch

jibbajabba — Thu, 11 Apr 2013 00:04:25 +0000

Protosketch is a new free app for iOS from UI Stencils to convert sketches to interactive prototypes. The app is made to work with their sketch pads and stencils. Sketch your screens, add them to the app, define hot areas for links, select link destinations, and prototype.

Sketch Template for Mac App Design

jibbajabba — Wed, 03 Apr 2013 19:54:23 +0000

About this template

This is a template for doing desktop application design using Sketch, a vector illustration tool for the Mac.

The idea for sharing this template is to give a quick starting point for anyone who wants to create their visual design comps in Sketch. When I started using Sketch to design and export controls for an iOS app, I quickly started liking the application, particularly the styling properties, simple vector editing and combination features, and the well thought-out grid and export capabilities. Moving on to a Desktop project afterwards, I started to experiment with using Sketch for design comps as well, and have decided to try using Sketch rather than Photoshop.

How to use it

NOTE: This file was created using the latest build of the Sketch Beta, so you will have be using the Beta to open it currently.

The template provides the starting point for creating visual design comps and includes an application window with a few basic elements: window, scrollbars, window title and several icons, sidebar, some styled text, system buttons, radios, and checkboxes. You can copy the styles for some of the elements and save them to your style presets to create others.

The template provides a 1024px x 800px artboard with a Comp slice that's ready to export your entire app window. There's a 12 column grid with 60px columns, 25px margins, and 12px padding on the horizontal edges.

You will likely need to modify this template—it's only meant to provide a demonstration of what you can do, and a starting point for new projects.

Download the zip file and extract it on your Mac. Open the file in Sketch.

You can use the menu File > Save as Template... if you want to save it to your templates.

Download the Template
This template is free to use, but may not be distributed without permission. If you like it, a donation is appreciated.

Teaser:

This is a template for doing desktop application design using Sketch, a vector illustration tool for the Mac. The template provides the starting point for creating visual design comps and includes an application window with a few basic elements: window, scrollbars, window title and several icons, sidebar, some styled text, system buttons, radios, and checkboxes..

More info...

Image (AWS S3):

sketch-mac-app.png

Mixture

jibbajabba — Mon, 01 Apr 2013 21:39:10 +0000

Mixture is a rapid prototyping and static site generation tool for Mac and Windows. It works with the Liquid templating system, supports includes and smart paths, handles HAML and SASS comilation, CSS and JS minification, and provides a simple model system for global and custom data, and supports access to form and query data in their request model. It can produce static HTML that you can push to a hosting service, and allows use of your own domain. Service integration for testing with BrowserStack and other services is planned.

Via Ryan Riatno

Static HTML: The new old school

jibbajabba — Fri, 29 Mar 2013 21:57:51 +0000

I've been looking for ways to energize my creativity in between the longer stretches of time spent on difficult, routine, and less creative work. The thing that has been doing it for me lately is working with static html on some of my smaller production sites.

I was playing around with static html tools for a little side project I've been toying with. I was tinkering with Stacey and Kirby. Awesome tools for static PHP page building. I was also playing around with CodeKit, which looked like the most promising tool for little projects. But I figured it was all just playing and there wouldn't be a real static site project for me to work on for a while probably.

Then last month we launched UX Apprentice using WordPress. We were on a stable server that hosts some pretty massive sites, so I was happy. But then, as web hosts always do, it went down for a short period. Some rare issue on load balancers was the cause we were told. Downtime happens. But then while discussing this issue I said, "Fuckit. This site is so simple, let's make it static and put it on an S3 bucket."

A week earlier I was playing with Hammer for Mac, the latest static site builder I had found. Among my options, including just doing it all by hand, this was the simplest of them all. I looked at what I would need to port the site to Amazon's S3 service for websites with no fuss. All I needed to do was suck the WordPress site down and convert it to static HTML.

I know this is small potatoes compared to the bigger things people are doing out there, but I got a kick out of doing this.

Here's how I did it, in case anyone out is considering doing the same:

1) Download
SiteSucker pulled the site down for me and converted it to static HTML. You can do it on the cheap with wget.

2) Create a Hammer Project
Look at your downloaded site, and clean out the cruft. Open Hammer for Mac and create your project. Open the source folder.

3) Organize files, use HTML editor to convert PHP to Hammer-smart stuff
I then moved my img, css, and js folders to the new project's assets/ folder. When Hammer builds, it reads your entire project and then knows where everything is so you can use the @path directive to reference files only by name, and include styles and css simply by name without paths using the @stlylesheet and @javascript directives. I cleaned all files up to use this.

I did the find/replace grunt work using Coda on my CSS and html files. Replaced the PHP that I use in my header to use the @include directive and the $title variable. My SCSS files got picked up and compiled with no problems. I then used the @path helper on images in my SCSS.

About two hours of this clean up and it built with no errors.

All my SCSS was compiled, my includes worked, and my CSS and JS were optimized (combined and minified).

4) Testing
I set up my hosts on my machine so I could test locally in the browser so all the TypeKit would work after I added that domain. I also learned that you can't test Typekit with a url using the file:/// protocol. Bummer. I already use VirtualHostX which makes simple work of managing multiple hosts on your local machine. It edits your httpd-vhosts.conf and hosts file. I had bought it originally because the web sharing option went away in OS X, and I'm too lazy to edit files just to turn PHP on.

Then of course, I tested on all my browsers and tested the responsive layout. We were ready to go.

5) Publish
Publishing on S3 is pretty simple. A normal person just needs to set up a bucket and use an S3 aware FTP app like Transmit and you're done. We ended up commiting it to a repository that is watched by a server that kicks off updates to S3 for pages that have changed.

That was the whole mini-relaunch that happened quietly after we launched UX Apprentice. We were live on WordPress for a week, and now we're hosted on an AWS instance and I expect the uptime will be awesome—as good as any S3 site. We do the same for our main balsamiq.com site and every time I see our blogs report downtime, I feel this wave of relief knowing our static pages on S3 are happily being pushed out without issue.

Anyhow, that made for an exciting day last week. It's energizing to feel frustrated by something and quickly turn something around that's better. And for anyone that's doing UX work that's looking for a decent HTML prototyping workflow and knows enough SASS and JS, Hammer may be the thing for you.

Hammer for Mac

jibbajabba — Fri, 29 Mar 2013 21:11:26 +0000

Hammer is a static web site builder for the Mac that lets you build out sites quickly with no server side requirements.

Hammer does includes without PHP, compiles Coffeescript to JS, SASS/SCSS to CSS, has an auto-refresh feature for never having to reload the browser, and provides some simple to use helpers. Since it knows about all of the files in your projects, you just reference names and it knows how to build out paths. It has a helper for selected link classes in your navigation elements. When you're ready to share your prototype you can upload to your own server, zip and send the Build folder, or use their own built in publishing system.

Drawscript: Generate vector code from Illustrator

jibbajabba — Fri, 22 Mar 2013 18:11:11 +0000

Drawscript is an extension for Adobe Illustrator that generates graphics code from vector shapes in realtime. Generates OBJ-C, C++, JavaScript for HTML5 Canvas, Processing, Actionscript 3, JSON, and Raw bezier points.

Redacted Font

jibbajabba — Wed, 06 Mar 2013 20:08:13 +0000

Christian Naths' Redacted is a set of fonts released under SIL Open Font license with block and scribbled font faces. Main difference between Redacted and BLOKK (which the font is copies/is inspired by) is that Redacted uses smaller widths so your text blocks won't end up wider than your normal font setting.

Git it for free.

Tapotype Transition Library

jibbajabba — Mon, 25 Feb 2013 20:05:09 +0000

Tapotype is a reference library of transitions for mobile prototypes created by Gene Lu using Fireworks and the TAP platform, a framework for iOS prototyping developed by UNITiD. Gene provides tutorials on building prototypes with Tapotype and TAP, and shows how to integrate InDesign and its documenting capabilities into your Fireworks/Tap prototyping workflow.

Responsive Sketch Pad from UI Stencils

jibbajabba — Tue, 12 Feb 2013 20:13:08 +0000

UI Stencils' responsive design sketchpad is made to help figure out breakpoints and how your product might translate to mobile and tablet versions. 2 device silhouettes on the front and 3 on the back. 50 pages on 70# paper in Letter or A4.

Navigation Patterns for Responsive Design

jibbajabba — Mon, 11 Feb 2013 20:15:05 +0000

I like Brad Frost's examples for handling both complex navigation and simple navigation needs on responsive designs.

Via Leisa IAI Members

BLOKK font

jibbajabba — Wed, 06 Feb 2013 01:27:54 +0000

BLOKK is a font for quick mock-ups and wireframing for clients who do not understand lorem ipsum. Awesome.

Text Snippets

jibbajabba — Tue, 05 Feb 2013 19:02:54 +0000

About

This is a work in progress. I'm copying over my commonly used text snippets and wireframes as I go.

People's Names, Sorted

10, First Name

Andrew Lincoln
Chandler Riggs
Danai Gurira
Jon Bernthal
Lauren Cohan
Laurie Holden
Michael Rooker
Norman Reedus
Sarah Callies
Steven Yeun

10, Last Name

Jon Bernthal
Sarah Callies
Lauren Cohan
Danai Gurira
Laurie Holden
Andrew Lincoln
Norman Reedus
Chandler Riggs
Michael Rooker
Steven Yeun

20, First Name

Adam Minarovich
Andrew Lincoln
Andrew Rothenberg
Chandler Riggs
Danai Gurira
David Morrissey
Emma Bell
Irone Singleton
Jeffrey DeMunn
Jeryl Prescott-Sales
Jon Bernthal
Lauren Cohan
Laurie Holden
Madison Lintz
Melissa McBride
Michael Rooker
Norman Reedus
Sarah Callies
Steven Yeun

20, Last Name

Emma Bell
Jon Bernthal
Sarah Callies
Lauren Cohan
Jeffrey DeMunn
Danai Gurira
Laurie Holden
Andrew Lincoln
Madison Lintz
Melissa McBride
Adam Minarovich
David Morrissey
Jeryl Prescott-Sales
Norman Reedus
Chandler Riggs
Michael Rooker
Andrew Rothenberg
Irone Singleton
Steven Yeun

Wireframe Symbols

Download Balsamiq BMML file

Teaser:

Text snippets for wireframing and HTML prototyping.

More info...

Image (AWS S3):

text-snippets-thumb.png

AirServer: Airplay receiver for iOS devices

jibbajabba — Thu, 17 Jan 2013 00:18:03 +0000

AirServer is an AirPlay receiver for Mac/PC that allows you to receive AirPlay feeds in up to full 1080p HD. It works similar to an Apple TV, so you can stream content or Mirror your display from your iOS devices or Mountain Lion to your desktop computer. The app was made for game and video streaming, but would work perfectly for application demos and presentation or usability testing, when coupled with a concurrent video recording of the user's face and hands.

Thanks to Kevin Cheng for the tip!

Wisdom from a dog

jibbajabba — Wed, 16 Jan 2013 18:28:06 +0000

This is a good bit of advice for kids and adults alike from Jake the Dog. Adventure Time is my son's favorite show, and one of mine as well. I made the print for his birthday, and will put it on of our walls. I like having the reminder every time I feel discouraged when starting something new.

You can see the extended version on YouTube and purchase a print at Society6.

The 99U	New York, NY
ACM SIGCHI Conference	-
Adaptive Path UX Intensive Workshop	-
Ampersand	Brighton, UK; New York, NY
Beyond Tellerand	Düsseldorf, Germany
Big Design Conference	Dallas, TX
Brooklyn Beta	Brooklyn, NY
Build	Belfast, Northern Ireland
Business of Software	Boston, MA
Circles	Grapevine, TX
ConvergeSE	Columbia, SC
ConveyUX	Seattle, WA
Cooper Workshops	San Francisco, CA
dConstruct	Brighton, UK
Euro IA Summit	-
An Event Apart	-
eyeo	Minneapolis, MN
ffwd.pro	Zagreb, Croatia
fluxible	Kitchener, Ontario
From the Front	Bologna, IT
Future of Web Design	-
Gel	New York, NY
Hybrid Conf	Cardiff, Wales
Lean UX Denver	Denver, CO
Lean UX NYC	New York, NY
Midwest UX	Grand Rapids, MI
MobX: Mobile Experience Design	Berlin, Germant
IA Summit	-
Interaction	-
Interlink Conference	Vancouver, BC
Steve Krug's Usability Testing Workshops	Boston, MA
LessConf	Panama City, FL
Managing Experience	San Francisco, CA
Mind the Product	London, UK
New Adventures	Nottingham, UK
Northern User Experience (NUX)	Manchester and Leeds, UK
Prototype Camp	Chicago, IL
RE:DESIGN/UX Design	Menlo Park, CA
Ready to Inspire	Leiden, The Netherlands
Remix South	Atlanta, GA
Rosenfeld Media Workshops	-
Smashing Conference	Freiberg, Germany
Sud Web	Avignon, France
SXSW Interactive	Austin, TX
User Interface	-
UX Australia	Melbourne, Australia
UX Brighton	Brighton, UK
UX Immersion - Mobile (UIE)	Seattle, WA
UX London	London, UX
UX Scotland	Edinburgh, Scotland
UX Week	San Francisco, CA
UXcamp Ottawa	Ottawa, Canada
UXcamp Europe	Berlin, Germany
UXLx	Lisbon, Portugal
UXMad	Madison, WI
UXPA	Boston, MA
UXPA User Focus	Washington DC area
UX STRAT	Atlanta, GA
Valio Con	San Diego, CA
Web Visions	-
World IA Day	-
XOXO	Portland, OR