Another article in my series on design tools. We use Framer quite a bit to build prototypes that use real data, would love to hear about how others are using it!
Josh Puckett Sorry for the nooby question but, Is the tool on that post Framer?
Mauro - it's a concept of a tool.
@Josh Pucket - Nice exploration. Did you ever use Expression Blend? I saw a few demos and it delivered some of what you're asking for. Was for windows apps only though, which is why it didn't take off.
Oh man... Josh Puckett. So true so true... so true. Back in the day... like 2006 or 2007... we would always request content (and variations of that content) from our clients very early on in the design process... That way we would always be sure we were designing with real / actual content in mind... It definitely influenced and guided our design decisions... and helped us educate them as well.
It was a hard sell, and something I pushed pretty hard for... but in the end the clients always ended up seeing the value from rough coded grey frames as their site design transitioned through smaller steps into the final build before launch.
The fact they could see what was happening with their content, helped them understand and see the differences as well as be much more tied to those in-between states in critiques.
Mauro Kevin yea, the prototype tool shown in this post was built in Framer. It has basic logic and works but there's a lot of hard coding going on. A lot of what we've built internally here is done in either pure JS or some combo of Framer/JS.
Great post Josh!
When I worked on the CSS framework and rebranding for Groupon... we used their deal API to pull in randomized content to help us understand the scope of the content we were pushing around with CSS.
Check out the bottom of this screen shot: http://jrdn.io/be5f
One thing we did was make sure we had some known states in there so we could make sure all our known edge cases were covered as well as giving us the ability to load up random deals as well so we could get any type of content on the site.
This is hands-down the coolest Framer prototype I've seen. Great example of thinking way outside of the box. Thanks for sharing!
I keep throwing money at my screen, but the software isn't downloading. How do I fix this?
I relish the day the design tool and prototyping tool become one. Axure had a similar feature (in table format) I used it a ton. but you have executed it much better.
what Callil Capuozzo said
Thanks for sharing! Similar to the Instagram approach, here's a sketch plugin I wrote that grabs photos from a folder (eg shared Dropbox) and use in your mockups: https://github.com/awt2542/ImageFiller no API support though...
I really like the design approach you are aiming at. Reminds my on Bret Vicotr's prototyptes (http://worrydream.com/). I would really enjoy seeing such tools coming true in the near future!
Real data? Yeah ideally. But the tool to handle all this would have to be probably way more complex than the concept shows. Probably a mix of XCode and Sketch, which sounds scary :-) Considering how few visual designers can code and how few developers can design, I'm not sure such a tool is actually a good idea.
There's a Sketch Plugin for that
Josef Richter why do you need a more complex tool? As long as you have some data source and an api to work with, it's quite simple to parse the json... And feed it into your framer prototype. And I'm a designer not a developer.