If you want to focus on mobile app and mobile web design in 2012, here are a few sketching assistants I’ve created to help as you head into the new year. With your iPad or other tablet device, you can choose from an assortment of 10 Mobile UI design and sketching templates to assist you in your design process. These work well with many drawing apps and I’ve included a set that is created specifically for Penultimate. You’ll find both portrait and landscape layouts with and without grids. There are also two and three-up configurations with optional lines for notes (single & two-up). This first round of templates was based off of the iPhone, but I am working on other visual styles as well.
Posted on 12/27/11 at 11:40 PM by Tim - Categories:
DesignToolsUser InterfaceWorkflowMobile
Tags: iPad, Design, User interface, Penultimate, Sketching, App design, Layout
So you got an iPad for the holidays but you aren’t quite sure where to start with it? Here are a few great resources that can help you get the most out of your new iDevice.
Well, I didn’t get too far down the “new” hobby path without finding a shortcut back to my previous one. After spending some time digging around the recent changes in Penultimate (a great sketching app for the iPad), I had an idea to create some importable papers and images that can be used on many sketching apps for laying out paint scheme or modification ideas. Below are a variety of flat PNG files that you can use while sketching with your favorite tablet device or desktop design software. I’ve also included a series of Penultimate “paper” files as well if that’s your sketching app of choice.
With the project board pieces complete, it is time to put the elements together and apply the finishing touches. To get things moving, I set the board up to run on my office’s 40” TV. From there, I went smaller. Much smaller.
The big screen.
Making a digital project board is quite easy, if you’re only planning on having it used in one location. Since my plans called for the board to be displayed on a TV, laptop, Cinema Display, iPads and an iPhone, I had to set up a few stylesheets to cover all of the bases. The first implementation that I had set up was for the TV in my office. On the surface, this appeared to be an easy task, but after tossing a few variations of sketches up onto the screen I realized I needed to modify my approach. After playing around with the font sizing using standard Web fonts, I made a few trips past the TV to make sure I could easily read my project list at-a-glance.
After a few passes I changed my typography plans for the board and went the Web Font route. FontSquirrel.net carries a font by the name of Chunk Five, which has become my font of choice for my site headers and that remained true for this project. I finally had things set up for the TV display and could shift my focus to how the status board would appear on other devices.
Templates
When people ask why I like ExpressionEngine, one of the first answers I give them is “templates”. Templates are, by far, the best asset of EE (in my humble opinion). They’ve allowed me to quickly create a mobile version of my site, create and test different layouts and design options, and give clients quick previews of site adjustments without much time investment (or headaches). My project board relies heavily on them, specifically around the stylesheet switching for desktop, iPhone, and iPad viewing.
To assist with the user agent detection for style sheet and other functionality switches, I installed the MX Mobile Detect plugin. I recommend this plugin for anyone needing to handle mobile devices in various ways. It’s easy to implement and can be used in a variety of situations. In addition to controlling the specific stylesheets, I used this plugin to control certain interface and layout elements.
Holding my project list in my hands.
A breakthrough moment came when I began reviewing the project board on my iPad and iPhone to determine what changes needed to be made to the stylesheets. Although the main intent was to build a display for large-format viewing, being able to easily glance down at my status list from smaller devices quickly became a priority. After much experimenting and real-world testing, I found layouts that worked for me on every device that I had. I also noticed the potential for expanding the status board into a project management tool.
To streamline the appearance of the project board on the iPad and iPhone I set the page up to use the “apple-mobile-web-app-capable” meta tag to eliminate the address and Mobile Safari navigation bars.  This not only maximized my screen real estate, but it cleaned up the overall look of the project board and eliminated unneeded distractions.
Making it Fluid
This project was a perfect application for Fluid, a great app with which you can run any Web site as a standalone Mac OS X app. Not only can I have my project board open when my laptop or desktop start up, I can run the app in full-screen mode and also take advantage of Spaces within OS X.
