Category Archives: Projects

UX:This – Episode 6 – The Compassion of UX

Leave a reply

uxthis-logo300Welcome to another episode of the world’s number one user experience podcast. In this episode, we talk about empathy and why this matters – personally and professionally.

In this episode, we referenced

Also, Ariel invents a new way to brush your teeth, with an iRobot Roomba!

Imagine THIS bad boy in your mouth!

Imagine THIS bad boy in your mouth!

Thank you for downloading, listening, and keeping up on our shows.

Cheers,

Ariel Leroux & Ryan Lane

A quick note for clarification
I (this is Ariel behind the keyboard) mentioned how/why I began following Whitney on twitter and sometimes I’ll see people who post comments about something that I can identify with, and then twitter suggests other individuals like this person, and after looking at their tweets I begin following them too.  So it could have been one of those circumstances.

UX:This – Episode 5: Mobile web – Responsive vs Adaptive

Leave a reply

uxthis-logo300Welcome to another episode of the world’s number one user experience podcast. In this episode, we talk about designing for the web, delivering for the mobile end-user.
References from this episode

      1. Jetstrap
      2. JQT (formerly JQTouch) JQuery goodness for touch interfaces, Ariel’s favorite
      3. JQuery Mobile Another tasty JQuery treat for touch

 

Some of our favorite things

Ariel’s:  UI search results on Pinterest – and – Ariel’s UX recent Pinterest pins
Ryan’s: ProtoSketch – by UI Stencils

 

Episode 4: Wireframe This!

Leave a reply

Welcome to another episode of the world’s number one user experience podcast. In this episode, we talk about wireframe fidelity. The “why”s and “how”s of wireframes.

Old blog post from yours truly (Ryan) on the topic of Wireframe Fidelity 

Old blog post from another yours truly (Ariel) on the topic of Navigation for cherry pickers

Things we talked about:

Some of our Favorite things:

WooMoo’s POP Prototyping On Paper iOS app. Take pictures of sketches and wire them up to make them interactive.

 

UX:This – Episode 3: You have one notification

Leave a reply

What time is it? It’s UX This time!

Another episode of the worlds greatest user experience podcast is available for all our devoted fans.  The topic today is notifications. You know you love it when you get a little red number in Facebook or then again you might dread it because the only reason it’s lit up is because of that questionable picture you posted last night while out drinking.

Getting started – with Ariel Leroux and Ryan Lane

Leave a reply

Originally posted on January 11, 2013.

Tune in as Ariel and Ryan talk about how to get started when handed a project and how to get started at UX in the first place.  These are very different topics while at the same time, very related.

We’ve seen and heard from a number of individuals from many different walks of life.  Some are designers with a passion to understand and make their designs more user-friendly on interactive platforms, others coming from a development background who are either being asked to or are looking to branch out to craft a better experience for their end-users.

 

Wireframe with jQuery plugin

Leave a reply

I’ve started playing around with the idea of creating a plugin for jQuery that makes quick wireframe prototyping easy.  I still need to add more controls, but when combined with jQuery UI, things can be mocked up really fast.

start with some HTML

   1: <body>

   2:   <header>      

   3:   </header>

   4:   <div role="main">

   5:       <div class="content">

   6:           <div class="placeholderimage" style="height: 200px; width: 200px; float:  left; margin-right: 10px;">

   7:           </div>

   8:           <div class="box" style="height: 400px; width: 200px; float:  right; margin-left: 10px;">

   9:               <div class="box" style="height: 100px; width: 90%; margin-left: auto; margin-right: auto; margin-top:20px;"></div>

  10:               <div class="box" style="height: 100px; width: 90%; margin-left: auto; margin-right: auto; margin-top:20px;"></div>

  11:               <div class="box" style="height: 100px; width: 90%; margin-left: auto; margin-right: auto; margin-top:20px;"></div>

  12:           </div>

  13:  

  14:            <div class="placeholdertext">

  15:           </div>

  16:       </div>

  17:   </div>

  18:   <footer>      

  19:   </footer>

  20: </body>

Some CSS

body {
    font-family: sans-serif;
    background: #fff;
    color: #333;
    width: 940px;
    margin: 0 auto;
}
 
div[role="main"] {
    font-size: 1em;
}
 
.content {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}

Then add some of the jQuery plugin code

 

$('.placeholderimage').wireframe('image', {label: 'feature'});

$('.placeholdertext').wireframe('text', {characters: 1000});

$('header').wireframe('box', {label: 'header'});

$('footer').wireframe('box', {label: 'footer'});

$('.box').wireframe('box', {label: 'feature'});

output results look like this.

wireframe_output

Get the plugin code for Wireframe.jq.js