Jonathan Moore
I am a designer who lives in code, entrepreneur, and an idea incubator driven to make our world a better place.
I am a designer who lives in code, entrepreneur, and an idea incubator driven to make our world a better place.
Until now the process of prototyping interaction and animations for mobile and desktop applications require you to actually build it, learn Apple’s Quartz Composer or revert to Flash.
Facebook product designer Koen Bok created an alternative that focuses on quickly building prototypes from PSDs and straight forward Javascript. Take a look at some of the Framer examples, documentation and lessons to see how Framer simplifies prototypes.
Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns—not how they look.
For the last several days we have been refining our base Style Hatch framework for all of our theme builds. In the process we have switched over to SCSS from LESS for our CSS pre-processor, Grunt.js for build and testing, and Bower for package management. Typeplate fits perfectly into our new workflow.
“Learn to love the command line. It isn’t scary. You know how to use Photoshop which has 300 buttons. That’s scary.”
A selection of tools, libraries, and APIs for creating interactive and dynamic data visualizations.
It has been only a few short weeks since the Xbox Kinect was released, but already you can find a number of people hacking the Kinect to create really interesting experiences and prototypes. This interactive puppet prototype was put together in one day by the talented Emily Gobeille and Theo Watson of Design I/O. This Kinect prototype uses the opensource packages openFrameworks and OpenKinect.
See these other amazing Kinect hacks…
With the recent 4.2 update for the iPad and iPhone Apple quietly added a number of new features to mobile Safari. Mobile Safari now has direct support for the accelerometer, gyroscope, HTML5 web sockets, updated HTML5 form support, new Javascript data types, updated DOM events, and enhanced SVG and Canvas support.
Also it appears that mobile Safari now has far better support for @font-face switching from preferring SVG fonts to TTF fonts. This one change now opens up the door to using Google Fonts on the iPad without crashing the browser. With some initial testing it looks like I’ll be able to update the Inspire Well theme to re-enable the use of Google Fonts on the iPad.
From the comments:
@font-face has worked for a long time on iOS given some specific caveats. However, the new news on web fonts in 4.2 is that iOS now prefers the TTF version of a font over the SVG version (formerly SVG was the only format supported.)
The other nice thing about web fonts on 4.2 is that they now work in offline webapps. This was a big deal for me and I only discovered it by luck. Still; this will be a pretty handy feature for a lot of folks I think.
Great looking CSS grid framework by Andy Taylor that is designed for 1280px wide monitors, but scales all the way down to mobile resolutions. Don’t be surprised if this ends up in a future Style Hatch premium Tumblr theme.
Next week I’ll post more details about several of the upcoming themes that’ll be launching soon. Lots of exciting projects in the works!
Overlay your design comp on the HTML and CSS build to make sure your site is pixel perfect.
Fantastic! Bookmark this tool.
Reblogged from Jacob
Elegantly developed CSS3 checkboxes that requires no JavaScript. Although it seems that they only work perfectly in Safari. Designed by Mike Bernardo and coded by simurai—the same guy behind the BonBon CSS3 Buttons.
Developed by Andy Graulund, Tweet Nest is “a browsable, searchable and easily customizable archive and backup for your tweets”. The easy self-hosted installation requires PHP 5.2 or higher and MySQL 4.1 or higher. Once it’s installed you can easily setup automated jobs to import your tweets every hour or day. Although Tweet Nest is pretty slick as-is with a bit of customization and extension you could easily come up with something amazing.
I setup a test installation at http://tweetnest.newezra.com/. Tweet Nest does a great job graphing tweets, replies and retweets for each month. Adding in rendering for image services like twitpic and @anywhere integration for Twitter profile cards are both nice touches.
Follow me on Twitter (@newezra) if you aren’t already.
A useful jQuery plugin developed by Dave Rupert and Trent Walton for the forthcoming Operation Condor, that splits an HTML element into its component letters, words or lines for easier CSS styling. From the announcement:
We developed a really simple, lightweight, easy to use jQuery plugin, we’re calling it “Lettering Dot JS”, and we’re releasing it today for free over on Github. Let me demo it for you:
</stevejobs>
Reblogged from Matthew Buchanan
Dominic Szablewski put together an incredibly impressive demonstration of what he’s able to pull of with pure HTML5 and JavaScript with the game Biolab Disaster. Although the graphics and gameplay are on par with what you’d expect out of the NES in the early 1990s it still shows the bright future for in-browser games and applications.
Read more about Biolab Disaster and the Impact HTML5 Game engine on Dominic’s blog.
I first spotted the experimental CSS3 buttons on Dribbble last week, and now the interactive designer, simurai, posted a demo of the buttons on his site. Overall the implementation is well done and all it needs is a few hacks to get it working on older browsers and IE. The buttons also feature Drew Wilson’s font-face icon set Pictos.
Pictos by Drew Wilson is one of my favorite sets of icons that have made their way into virtually every design project over the last several months—including the Inspire Well theme. Converting the icon set into a font file seems like a genius move that lets you embed the icons as @font-face type. This allows the designer to have far more control over size, color and appearance of the icons with CSS text styling. The only downside I can think of would be random letters used for the icon font throughout your HTML.
Reblogged from Cameron Moll
