Just like any artist I can stare at a blank piece of paper for hours when I'm bogged down. Sometimes the high level of expectations draw me back from creating anything. When I get to this point, I start developing the project in high details, get too deep in the weeds, and the product comes up short of its potential. I needed another approach to my design process where starting isn't so demanding. So, I created my very own canvases to hash out as many possibilites I can visualize.

If you're an ambitious soul who simply wants to explore ideas on a low cost of time and energy you should try this out. All you have to do is get rid of those hand me downs and cut up some devices!

The phone

I used an Amazon Fire Phone to model this phone. The one thing that Amazon phone is useful for. The best thing about designing on this model is that you can feel what the appropriate sizes of the call-to-actions need to be. It also forces to really think about visual hierachy and prioritize what the necessary elements should be when you resize the screen to this size.

The tablet

This is my favorite of all the models. At 7" of screen size you can sketch out the minimum width of desktop screens and it's the popular option when displaying my iterations to my teammates.

The desktop

Still got some room? Add some post-stick notes as modals. It's quite large at a whopping 20" so it may be very difficult to envision elements here. Normally when I design for responsiveness I just let elements scale up in size and the same structure is maintained from a minimum of 1024px in width. This model forces me to add more features if I have the freedom to do so.

Testing it out

At Major League Hacking, we had a big project of redesigning our events page. As the number of events increased on the old layout it was becoming time consuming to scroll through hundreds of modals on the screen. The goal of the design is to reduce the time it took to scan through the events while enabling users to filter and search.

The mockup went through 7 iterations in 6 business days. Visit the season page

This maintains the same modals as the old layout, but organized by month. The filter options on the left would stay affixed at the top when you scroll past it.

The search was taking up so much space in the underneath the fold so I moved it over to the side with the other features.

The team stated their need for the app to enable hackers to find events based on their location. So why not try a map to visualize them?

I got really creative from the third iteration and expanded more the map functionality. The problem was that a map visualizer could not be executed in V1 of the release.

Much improved on scanning through the events. The problem was that the featured events section was too large in height. Showing 1/6 of the first event was not ideal.

So I reduced the height of the featured events. We want all events to be equal. I tried a different approach of stripping the events page to a minimum where it just shows the necessary data. I put the whole page in a calendar.

The team really liked the structure of 006 because it was in table form. They needed a table with sorting capabilities.