Author: uxteacher

Crafting The Mobile Design Experience: Strategy, Reality, Success, The Future!

Imagine if you will the following situation. It’s 2:00 o’clock a.m. You clumsily fumble your way into your Taxi. On the ride home you know you drank a bit more than anticipated. The Taxi pulls up to the curb side and you fall out of the car as you pass the driver some cash. A few moments of mindless stammering and you manage to make your way upstairs and lay down in bed. Before ending the night you want to get a quick post in on Facebook. As you pull out your Iphone you rush to load the app and click on the “menu” icon. Well you thought it was the menu icon and now you are simply punching the phone to do your bidding. Siri comes up to your delight, and you shout out “create twitter post.” Well, that is what you wanted to say. Instead in your state of inebriation you shout out “Thhwwwitter.”  ”I’m sorry I do not understand.”  Frustrated and waiting on the impending morning after hangover  you collapse on the bed.   What does this have to do with creating a mobile strategy? Quite simply, your mobile strategy and success needs to adapt to the most unpredictable situations. What this entails is understanding how a customer will use your mobile application then throwing out half of your expectations. Expect the unexpected and you will...

Read More

Practical Front End Development For UX Designers With Grunt.js & Node & Coffescript – Part 1

What? I’m writing an article on how to use grunt.js & node to help optimize your UX prototyping. development, coding,  and design processes. I usually don’t write technical guides, but a lot of people have asked me  how I use these tools. The last several months I have been knee deep in the trenches practicing what I preach. In that span of time I found the need to write a few complex build scripts  with grunt.js and coffee script. A lot of these I have shared out on github. I figured it was a time to get a bit more technical. Also it’s really hard to find this information online. WHY WOULD I WANT TO USE GRUNT.JS & NODE.JS? Why would you ever want to spend time on the command line? Let’s get right to the meat of why you will want to learn these methods. I’ve listed below a few sample tasks you might optimize, remove, or make better with grunt & node. minify your files automatically convert coffeescript to javascript compile less or sass work with frameworks such as bootstrap 3, foundation, meteor, backbone, the list goes on. run phantom.js or front end javascript unit testing compile component based html compress images create sprite based css images create your own build script built on your process and the way YOU do things keep your front end dev tools...

Read More

Media Queries To Target iPhone 3, iPhone 4, iPhone 5, iPad 2, 3, 4 In Portrait PhoneGap Apps

Regardless of the reason when developing hybrid apps with Phonegap / xcode you may need to target specific IOS devices with media queries. I wanted to share a little bit of my own approach on this subject and try to make this drop dead simple to understand. This does have a bit to do with responsive design but I’m not going to harp on it.  The queries below are primarily for leveraging a portrait design over a landscape. As a side note Landscape media queries in IOS 7 as of this writing actually report the wrong size. HOW DO I MAKE THIS WORK IN PHONEGAP/CORDOVA? These media queries can be used in a mobile html page as well for Safari browser. You can also test these using the new emulation mode int the latest version of google chrome. Let’s assume you are building a single or multi-page app. It’s always good to start out with the correct meta tag.  As of now most people tend to use the following meta tag at the top of their app. The newer target-density helps to pinpoint those displays with higher density. <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0,user-scalable=0, target-densityDpi=device-dpi" /> So here without further delay is my media query css breakdown. /* IPHONE IPAD DEVICE MEDIA QUERIES */ /* IPHONE 3 ONLY */ @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio:...

Read More

UI Design Patterns: Exploration of Data and Visual Imagery in Application Design

I was recently examining some interesting articles on Engadget and noticed  how the web site has been experimenting with different visual representations of data. As many know, Engadget is a high traffic tech blog. While it has not been special outside of the tech domain of knowledge. My eye caught something that was neat when trying to find popular articles and a little bit different. Next thing I knew I was no longer looking at the articles and instead was focusing on the interface design. To begin with study the image to left or visit engadget.com. If you notice “the daily roundup” consists of  a dot representation by hour and volume of comments per article. In this interesting approach a large volume of data is depicted with minimal space. To an avid reader of the site it may not be of much use, but to a casual reader it can help them quickly pinpoint hot topics of the day. And for us multi-tasking tech geeks that is a time saver. As your move your mouse over the dots a hover tool tip displays revealing  the article name, date, and number of comments.  As it is difficult to pinpoint a single dot on the screen a larger transparent circle displays around an area if the mouse pointer is on top of dot. This is important because a large cluster of...

Read More

Book Review: “The Visual Miscellaneum” – Explore The Design World of Infographics In Only A Few Moments

I recently received a review copy of The Visual Miscellaneum A colorful guide to the world’s most consequential trivia.  This was a  great book from the author of Information is Beautiful. The books is a visual exploration of information and contains numerous examples of how to rethink ways in which we interpret data. Not all of the examples are what you would expect. The book is full of brilliant colors, shapes, sizes, charts, scatter-grams, area charts, and eye-popping visuals. It’s a great addition to any UI designers reference shelf. What’s Great About A Book Full of Info-graphics? So you may be thinking, how can this book help me as an interface creator or UI designer? The truth is quite a bit. If you have ever dealt with long boring data tables meant to convey “important data” you can start to see the true power of representing data in a much more dynamic and thought provoking way. This is where inspiration can strike you in new and fun ways. At first glance flipping through the pages of this book was much akin to being at a carnival and having all the vendors shouting at you for attention. The visual imagery can be overwhelming and not all the representations are outstanding. Some pictures are extremely confusing, but in many cases it is the exploration of imagery that provides meaning and stimulation...

Read More