Casters' Blues Avatar
This is the base/stack tablet wireframe from which I’ll begin designing my process flow charts as I plan the interaction and finer details of the dashboard.  It combine aspects from the both the mobile and desktop view in an arrangement I feel will serve a table user best

This is the base/stack tablet wireframe from which I’ll begin designing my process flow charts as I plan the interaction and finer details of the dashboard.  It combine aspects from the both the mobile and desktop view in an arrangement I feel will serve a table user best

It’s sunny in Portland and I get to leave and enjoy it in 15 :)

It’s sunny in Portland and I get to leave and enjoy it in 15 :)

This is a stack focused wireframe. There some notes and interaction points but mostly this is the basis for the mobile wireframes and process flow charts to come. It’s my initial point of reference and gives me insights into quirks and problems I may encounter.
Everyone starts off their designs differently I like to do a wireframe from the get go once I have the basic requirements. This allows me to visualize where I’m going.
Next up is the tablet stack/base
Then some more interaction testing of the basic features on both
After that process charts and detailed interaction focused wireframes
Finally a in-browser mockup

This is a stack focused wireframe. There some notes and interaction points but mostly this is the basis for the mobile wireframes and process flow charts to come. It’s my initial point of reference and gives me insights into quirks and problems I may encounter.

Everyone starts off their designs differently I like to do a wireframe from the get go once I have the basic requirements. This allows me to visualize where I’m going.

  • Next up is the tablet stack/base
  • Then some more interaction testing of the basic features on both
  • After that process charts and detailed interaction focused wireframes
  • Finally a in-browser mockup

After talking with OpenSesame’s head of engineering Aaron Bridges, I made a small change to the stack here. We noticed a proximity and global control reference issue on the sidebar feed and the navigation toolbar. We reduced the screen span on the nav toolbar and increased the height on the left hand sidebar feed. 

Course cloud content hierarchy stack~ I’m exploring this for the mobile stack which I’m designing next. Even though mobile usage is less than tablet, I’m starting here because I still need to address my smallest use case after addressing my median use case. I’m trying to prep for outlier extremes so they don’t blindside me.

Course cloud content hierarchy stack~
I’m exploring this for the mobile stack which I’m designing next. Even though mobile usage is less than tablet, I’m starting here because I still need to address my smallest use case after addressing my median use case. I’m trying to prep for outlier extremes so they don’t blindside me.

Finished testing initial ideas for stack order and basic interactions of the regions yesterday. As I develop the css/html/js for the dashboard framework I want to ensure that each hoped for interaction will work in ie7 a requirement for our enterprise customers.

I will proceed layer by layer in my dom stack with the interactions. By using simple colored divs, I can catch initial rending issues early on with floats, overflows, the adding and removing of dom elements, ect. I hope this process will reduce the amount amount of inevitable debugging later.

After ordering the content hierarchy I decided to create a rough outline of that hierarchy in a simple desktop Wireframe. This wireframe is the basis for my initial design approach serves as an estimation of the intial stack order of the DOM elements.

My reason for going desktop first is because this is an B2B product, and analytics show that over 90% of page access comes from screens width resolution over 1200px in width on windows OS. 

I’m redesigning OpenSesame’s user dashboard. First step is to organize the content to be covered into a hierarchy. I’m basing this on the current information we wish to convey to users across the 4-7 pages they currently find this data on.

I’m redesigning OpenSesame’s user dashboard. First step is to organize the content to be covered into a hierarchy. I’m basing this on the current information we wish to convey to users across the 4-7 pages they currently find this data on.

Nuff Said

Nuff Said

On the other side of stackoverflow

I love stackoverflow. This post if not really about that. When I can’t figure something out it’s where I go. Developers from all over helping each other out and solving problems. I’m not a developer/engineer. I can write script but not at the level of the people giving out advice their really. Yet for the first time I think I got an idea of what’s it like to be the one helping someone else solve their own dev problem remotely. 

A couple of weeks ago a french photographer Nicolas Kalogeropoulos came across autodesk interactive flowchart I created while working for Opus Creative.  I had posted the code for on github and submitted some tips to the forum for  the tool I used to create it in Hype by Tumult. Using Hype for some of the html5 animation I was able to call on jquery plugin scrollto, shadowbox, and add custom javascript to make it all work smoothly on an iPad in portrait mode. 

While Nicolas wasn’t using Hype he was using a similar tool, Adobe Edge. I was able to help him work out his own interactive flowchart which he is using to help digital camera buyers find the device that’s right for them. I really enjoyed our exchange and the  opportunity to see someone else benefit from all the hard work and sweat I put into the original execution of the idea.