BLOG

Tools

Wednesday, February 01, 2012

The iPad in Education

Never before have I been so interested in an announcement aimed at the education-sector as I was with last week’s announcements from Apple.  Having children has changed that, just as they’ve changed many aspects of my life.  When the iPad was first announced in 2010, I put together a short list of areas in which it could be affective, and education was one of those.  With the launch of iBooks Author, the iTunes U app, and the updated iBooks 2 app, that opportunity has been cemented.  However, the educational benefits of the iPad have shown their face long before this announcement.

I read a post earlier this month questioning why adults are amazed when children, even as young as 2 years old can pick up an iPad and use it with ease.  Surely these are superior children that possess Mensa-quality intellect and will be running the country by the time they’re 7!  As much as I’d like to think that, again speaking as a parent, I no longer believe that’s the case.  That’s not to say I don’t think my children aren’t intelligent (or even above average). The truth is, the iPad is easy to use.  Period.  As I’ve written before, I’ve seen both of my kids use the device, navigate through the screens of apps, find their favorites and use them with ease.  So simple, so elegant, so…what’s next.

The announcements from Apple, iBooks 2, iBooks Author, and the refined and retuned iTunes U (making it’s app debut) are all amazing elements when you look at them on their own merit.  But it’s when you lump them all together that a truly-inspired vision of what the future of education could be.  While the approach from Apple locks schools into one platform and one device, it’s an approach that I’ve not seen rolled out on such a promising scale.  These items aside, I’ve seen my own children use the iPad as more than just a gaming device, but rather an educational tool.  My youngest son has two favorite apps, AlphaTots and TallyTots and after using them he’s now able to easily recite the alphabet and count to 20.  What’s the draw to these apps?  They’re engaging, they’re entertaining, and they’re able to present lessons in an easy-to-understand format.  Who knows what role, if any, the iPad (or similar devices) will play in education, but it appears to off to a good start.

Posted on 02/01/12 at 08:59 PM - Categories: Apple Design Tools

Monday, January 02, 2012

5 Informative and Entertaining Design Podcasts

If you were to look at the music on my iPhone, you’d find that a good chunk of it isnt even considered music.  I’ve been a fan of podcasts (and podcasting) ever since it hit the scene.  I’ve found it to be a great way to learn about topics that interest me or to get acquainted with new ideas and I can listen to them no matter what else I may be doing.  If you’re looking to bolster your design knowledge or just want to soak up some great talk about the topic, here’s a list of design-focused podcasts you should subscribe to.

  1. The Web Ahead - A relatIvely new show, I’ve enjoyed what the host, Jen Simmons brings to the table.  The guest list has been an impressive variety of design professionals.
  2. The Boagworld Podcast - I’ve enjoyed Paul Boag’s show for quite some time.  He covers topic that are central to the business of web design and uncovers some areas that may be forgotten from time to time.
  3. The Big Web Show - Jeffrey Zeldman and his guests cover the gamut of design topics in a fun yet informative way.
  4. Media Artist Secrets - This podcast by Franklin McMahon may be one of the first design podcasts that I subscribed to.  Usually focusing on one topic an episode, the show length is manageable and can be the perfect fit for your morning commute.
  5. TEDTalks - This is a series of podcassts created from the amazing TED (Technology, Entertainment, Design) events that take place throughout the year.  Rather than focusing on how-to’s and techniques, these “episodes” focus on concepts, ideas, problems, and ultimately solutions that apply to all walks of life.

I hope you’ll find that these selections are not only informative, but are a pleasure to listen to!

Posted on 01/02/12 at 08:45 AM - Categories: Design Tools Tutorials Inspiration Podcast

Wednesday, December 28, 2011

Mobile UI Sketching Templates for iPad

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.

iPad Sketching Templates

What styles are included?

  1. Large phone (portrait)
  2. Large phone with grid overlay (portrait)
  3. Small phone (portrait)
  4. Small phone with grid overlay (portrait)
  5. Small phone two-up (portrait)
  6. Small phone with notes (portrait)
  7. Small phone two-up with notes (landscape)
  8. Small phone two-up with grid (landscape)
  9. Small phone three-up (landscape)
  10. Small phone three-up with grid (landscape)


Special New Year 2012 pricing: all template packs reduced to $.99 (ends 1/31/12)!

10 Mobile UI Sketch Templates for iPad (.png) - $.99 (Reg: $1.99)
10 Mobile UI Sketch Templates for iPad (.ppr Penultimate) - $.99 (Reg: $1.99)
20 Mobile UI Sketch Templates for iPad (.png & .ppr Penultimate) - $.99 (Reg: $2.99)

 

Posted on 12/28/11 at 12:40 AM - Categories: Design Tools User Interface Workflow Mobile

Monday, December 19, 2011

Building an online project board with ExpressionEngine: Part 3 - Putting the pieces together.

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.

 

Posted on 12/19/11 at 11:27 PM - Categories: Design Tools Tutorials User Interface Workflow

Friday, November 25, 2011

Building an online project board with ExpressionEngine: Part 2 - The Interface

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.

Posted on 11/25/11 at 10:31 PM - Categories: Design Tools Tutorials User Interface Workflow

Page 1 of 6 pages  1 2 3 >  Last ›