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.
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.
With any project, the design of the interface can make or break the usefulness of the final product. During the process of laying out the project board, I was in a state of constant flux, adding elements, removing elements, adjusting their size and visual weight to find the right combination that worked.
Starting with Panic.
The seed for this project was planted, as mentioned before, when I read about the Panic Status Board. This thing is amazing, and I’m still in awe of how beautiful, and more-importantly, how functional it is. It was the benchmark. I went to my drawing board with many ideas, possibly too many, flowing onto the paper. Before long, I had a mess on my hands. I didn’t like any of the ideas that I was coming up with. I didn’t want to do a complete hack-job and rip off the Panic design. I did (often) check back to their project board post and studied their images feverishly, comparing them to my sketches and wondering why solutions didn’t have the same impact. It didn’t take me long to understand the reason.
I wasn’t focusing on what I needed, instead I was cramming the items that Panic had employed into my board, where they didn’t belong. My needs for this board were simple, a quick view of my projects that were in progress and on the horizon. Simple as that. Back to the drawing board.
With a much clearer vision in place, I laid out the items that I needed and tossed the “wish-list” items onto the back burner. The result was a clean solution that would give me the information I needed at a glance. Just as planned.
The more things change.
After diving into the Photoshop layout and markup stage, I discovered more adjustments were needed so the look (once again) underwent another round (or two) of changes. The flexibility of ExpressionEngine let me quickly make changes on the fly, review them and go on without wasting too much time. Now that things were taking shape, it was time to fine-tune and refine.
When I set out to create an online project board powered by ExpressionEngine, I wasn’t sure how the project would turn out. After seeing the setup that the guys at Panic created, I immediately lusted after it, but quickly realized that I didn’t need all of the bells and whistles that they were implementing. My solution needed to encompass two main aspects. It needed to be simple and it needed to be clean.
Before working on any of the interface elements I made sure this project had a solid foundation and would be able to give me the information I was looking for when I needed it. As mentioned in my latest Thinking Out Loud post, preventing scope creep was important, but some additional items did find their way into the process.
Custom Fields are your friend.
The main reason I opted to build the project board with ExpressionEngine rather than creating my own front and backend system was the sheer power that’s under the hood of an EE system. I can create a custom template, a custom input channel, and top it off with custom fields that will do exactly what need them to do. In short, it’s the smart thing to do.
Making a list and checking it…many times.
After setting up the template and the channel for the project board, I needed to set up the fields that would make everything work. After jotting down some initial ideas that I needed, I began thinking about this project down the road and had visions of where I could take it and what it could turn into. The result was a list of entry fields that go beyond what a project board needs, but laying this ground work in the beginning will make expanding the functionality easier in the future.
Power and flexibility.
I’ve never paid too much attention to the Custom Field possibilities that ExpressionEngine offered until I began working on this project. Once I started looking around, I was shocked at the variety of field-types I could choose from. I had wanted a dynamic, JavaScript-driven date box to handle my project Start and Due dates, figuring I’d need to either build one myself or find a suitable option through searching. No need. One of the field types is a calendar-style date selector. Here’s a brief list of other custom field-types:
Text Input
Textarea
Checkboxes
Radio Buttons
Multi Select
Date
File
Relationship
There are some additional field-types that become available when you install select plugins and modules.
If you’re one of the many, many people that purchased the iPhone 4S last Friday, you’ve no-doubt played around with Siri. While this feature does have some useful and potentially beneficial uses, there’s the irresistible urge to find out just how much information and thought Apple and the Siri team have put into this service. The answer: A whole-heckofalot.
