almost 9 years ago from Colm Tuite, Designer/Developer
A while back I posted an alpha version of the design tool I've been working on and got a decent response. So, I put together a quick demo of my progress since then.
I'd love to hear any thoughts/suggestions/feedback.
Bohemian Coding please hire this extremely talented guy and add this functionality to Sketch. Thx.
XOXO, Rolando
Heh, not a bad idea!
If I were you I would show this to them directly (if they aren't checking this out already). Not saying you can't come up with an app like this on your own but why not expanding the functionality of a great app that already exists.
Great job though, the only serious prototyping tool idea I've seen (saw your previous video in the past too.)
Take me money now would ya!
I know it might be a long shot but wouldn't it be cool if there was a GUI timeline to see when the animations happens in relation to the hover/click time?
I am imagining something like an interactive After Effects.
Are you talking about timeline based animations? Timeline based editors don't really make sense for UI design. In UI, interactions happen completely at random. You have little control over how the user will interact with your product, what they will click and when. So in that regard, trigger-based tools are much more useful.
If that's even what you're getting at?
What if the timeline was only used to plan the animation and was not tied to when the interaction happens?
Yeah that makes more sense. Then we're talking about something like keyframe animations tied to triggers. There are tons of use cases for something like that in UI design.
I think this will be that: http://blog.tumult.com/2014/11/20/tumult-hype-3-professional/
So happy to see this progressing so far, it definitely has some real promise. As others have mentioned the prototype market is really warming up right now, and this looks like a real contender.
The workflow for interactions will prove to be incredibly handy for rapid prototypes, as so many devs are starting to play with animations/transition states but don't quite know how to make it all jive together.
Can't wait till the beta is out. Time to get a page up to subscribe for updates :)
whoa ... nice
Been waiting for this since the initial reveal. Very excited to see how far it's progressed!
Would love to see this added into sketch. GL man, really nice work.
I love the idea of defining states for components. Such a simple concept but it seems like it could be really flexible and powerful.
Wow. I'm super excited to see this. The easy interactions will be incredibly useful for creating interfaces and, for designers without the front-end chops, doing web interaction.
Cheers. I also want to help front-end devs who have to relentlessly ask designers, " What should happen when you click this" or "How fast should this thing slide in" etc.
Hi!
This thread was forwarded to me by a designer friend so wanted to introduce www.swikshare.com to this group as well. We just went into beta.
There are many similarities to Colm's ideas, in particular using visual state machines as a natural, intuitive fit for UI prototyping. One of the practical challenges with this approach is achieving scale and managing complexity. For example, we built https://itunes.apple.com/us/app/la-luna-the-story-project/id657554982?mt=8 using some of these same ideas around a visual workflow and no coding.
The DIY swik platform has concepts like behaviors and cross-talk between layers to help manage these issues of complexity and scale. Also, we are now focussing on the HTML5 reader as opposed to the iOS reader we started out with. The author still runs on a Mac. The platform is completely free to use and share.
Tutorial: http://swikshare.com/#interact/Whamix/SwikTutorials Simple Interaction: http://swikshare.com/#interact/Apuzinio/FormDupe A more complex interaction: http://swikshare.com/#interact/Apuzinio/BuildCollage App prototype: http://swikshare.com/#interact/Apuzinio/bo-lay-to_v1
These took anywhere from 15 minutes to a few hours to build. In most cases, you can also download the source to see how they are put together. You can instantly preview your swik as you are building and finally publish, share and solicit comments on the interaction gallery.
I hope you will give it a try and provide us with much needed feedback.
thanks, apurva
I'm 10 points away from a new color.....I was afraid this might happen :(
Yay, seems you can have fun within 2min, looks really cool man. Planning to update the current version soon? Cheers
I'll be working on it over the break, then planning to launch an alpha/beta demo soon.
This looks awesome man! Great work on this so far, can't wait to see more. Is it going to be web based then?
Really nice tool! Any plans for beta testers? :)
Looks really cool. How does it scale with more elements on the page though? (Like a full-fledged web app)
or
Did you mean for it to be used for one snippets/animated elements and prototypes?
I personally split most of my design work into isolated components. Large apps are really just a collection of reusable components, so I think it makes a lot of sense to split things up into smaller chunks.
Having said that, it performs reasonably well with a ton of elements. I don't see much reason for the skepticism toward web apps when it comes to performance.
That. Sounds. Awesome.
Also, GIVE ME BETA ACCESS NAOW!
This looks really great. Are you planning on open-sourcing this tool at any point?
This is seriously cool. Can I be in the beta list? I would love to help.
Of course dude, I'll add you to the list!
Similar tool people may want to check out - https://atomic.io/
Sorry I haven't been following the previous development, Colm but what is the output of the tool?
The tool is meant for designing clickable prototypes and testing design ideas quickly. You can output the CSS for your elements which includes all the properties for each state, plus any transition parameters, which you can then use in development.
The tool doesn't output html or js though. It's meant to be used as a design tool, not a front-end dev tool.
I love the idea of state-based elements - feels very inline with how some of the newer front-end frameworks work. I see that this is a web app, what kind of stack are you developing this on?
Just Rails/jQuery at the moment. It should really be on Angular or Ember, but I'm a noob :(
This looks promising! Will it be a web-based application? I'd love to test it out and give you some real use feedback whenever it's at that point!
Yep, web-based initially. Cool, I'll add you to the list and notify when I get something ready. Cheers mate
This looks really promising. I find that right now there are a lot of startups trying to create the perfect prototyping tool, but they are all missing something (I know this isn't a prototyping tool per se, I'm just thinking about how I might use it). It would be great if you could add a component that would allow you to export your comp to a device easily for preview, thus enabling a rapid prototyping capability. I generally use Keynote for rapid prototypes because of the animation capabilities and ease of use, but exporting to device is tricky.
I look forward to seeing more!
Have you checked out Form or Pixate? Some of those guys are working on live previews. Since this tool is browser-based, you can preview it on the web on any device you like.
But when can I use it? It looks awesome. I really like how it shows the border of the previous state while you're editing another state. Great for context.
I wish I could take credit for that, but it's actually a bug :)
Would be handy though.
Well don't tell me that! Act like it was part of the plan.
Now give me the beta ;)
Looks great and promising. Is there a way to get at the code or have some type of code export?
Sure, just press "CMD + O" and the CSS for the selected objects will appear in a popup. It includes all styling properties for each state, plus parameters for transitions etc.
Awesome. What about for the entire comp?
It depends what you mean - can you give me more details on the use case?
whoa, impressive. i look forward to playing with this further down the line.
one thing i did notice in your transition list, as a non-dev person I'd prefer the list titles to be more layman terms vs. the value that performs the task.
does that make sense?
Yeah, that makes sense, like "Slow", "Fast start", "Bounce" etc.?
I'm planning to build a custom bezier curve graph for setting the transition. Then I could offer a list of presets and you could name them yourself.
exactly.
oh custom ones that's cool!
I'm a designer (although I do a bit of coding on the side) but I'd rather have the actual easing names. EaseInOut, etc. Those are more or less universal conventions and having to "learn" another bunch of names doesn't sound like a good idea. Also easier for devs that receive the doc.
Very impressed by what you're doing, keep going !
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now