Portfolio & blog of Front End Developer, Designer & Illustrator, Noah Robison-Cox

Pressing From the iPad

I’m writing this post mainly to test out the WordPress app for iPad. There aren’t any features in it that couldn’t be accessed through the browser instead (and many features aren’t available in the app), but it has a nice clean interface that makes it easy to fire off a quick post.

Wireframing in the Cloud

In web design, wireframes (or user interface wireframes or mockups) act as the blueprints of a site. They define the information that will go on a page and how it will be organized before any design or coding takes place. Wireframes can be created in a number of different applications or even drawn by hand. In the past, I used Omnigraffle and Powerpoint for wireframing. Omnigraffle has a library of free templates you can pull from and Powerpoint is easy to present and share with clients, especially if they want to make their own modifications. Another popular wireframing tool is Balsamiq, which offers some nice collaboration features, but I personally can’t stand the way it looks, especially the Comic Sans font.

Within the past year or two, a number of online tools for wireframing have popped up. They offer the benefit of easy collaboration, since the wireframes are stored in the cloud. Over the past few months I’ve tried a number of them, including mockingbird, Hot Gloo, cacoo and MockFlow. Of that group, I’ve been the most impressed with MockFlow and HotGloo. Both have a similar feature set, and while Hot Gloo might be a little more advanced, MockFlow is currently a bit cheaper and it’s what I’ve spent the most time with. Here are some of the advantages I’ve noticed with cloud-based wireframing in MockFlow:

  • You can chat and add notes to a wireframe while you’re presenting it online
  • Older versions of the wireframe are backed up online as you save
  • You can access a library of user created templates in addition to the standard ones
  • You can add link functionality to make the wireframe act as a prototype
  • You can make changes to the wireframe as you present it

Online wireframing is still relatively young, so there’s still plenty of room for competition and the features are evolving. One feature I would love to see added is instant updates that appear to a team as you work (without hitting save), like in Google Docs. Regardless, I would definitely recommend online wireframing to any team that needs to collaborate and present online.

New Site Design

Today I’m launching a redesign of the site, which was built as a theme for the blogging tool, Word Press. I will be adding more work to the portfolio and updating this blog as time permits. If enough people express interest in using the design for their own WordPress sites, I might release it at some point in the future.

One of my goals with the redesign was to make the work in my portfolio stand out as much as possible. I didn’t want the design of the site to compete with the screenshots of my web work, so I went with a neutral, dark theme and used color sparingly.

On the tech side, my goal was to create a site with animation, custom typography and rounded corners without relying too much on Flash or custom images.  I wrote some javascript (in jQuery) to create an animating slideshow on the homepage that rotates the colors behind the logo and featured text areas to match the colors in the featured design. I used sIFR to add non-web-safe fonts to some headings. I used CSS3 to apply drop-shadows to text and rounded corners to the page without creating extra images.

Feel free to share your thoughts on the design or any questions you might have. You can post comments in the blog or on any portfolio page.