57

Show DN: Design Tool Update

4 years ago from , 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.

http://goo.gl/xBXGXr

I'd love to hear any thoughts/suggestions/feedback.

49 comments

  • Rolando MurilloRolando Murillo, 4 years ago

    Bohemian Coding please hire this extremely talented guy and add this functionality to Sketch. Thx.

    XOXO, Rolando

    15 points
    • Colm TuiteColm Tuite, 4 years ago

      Heh, not a bad idea!

      0 points
      • Rolando MurilloRolando Murillo, 4 years ago

        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.)

        0 points
  • Jan CantorJan Cantor, 4 years ago

    Take me money now would ya!

    9 points
  • Taulant SulkoTaulant Sulko, 4 years ago

    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.

    4 points
    • Colm Tuite, 4 years ago

      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?

      1 point
  • Alaik FAlaik F, 4 years ago

    whoa ... nice

    2 points
  • Jaffar KhorshidiJaffar Khorshidi, 4 years ago

    Been waiting for this since the initial reveal. Very excited to see how far it's progressed!

    2 points
  • David SimpsonDavid Simpson, 4 years ago

    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 :)

    2 points
  • Cole TownsendCole Townsend, 4 years ago

    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.

    1 point
    • Colm TuiteColm Tuite, 4 years ago (edited almost 4 years ago )

      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.

      1 point
  • Matt BaxterMatt Baxter, 4 years ago

    I love the idea of defining states for components. Such a simple concept but it seems like it could be really flexible and powerful.

    1 point
  • Brenton RawlinsonBrenton Rawlinson, 4 years ago

    Would love to see this added into sketch. GL man, really nice work.

    1 point
  • Jonathan SvärdénJonathan Svärdén, 4 years ago

    This looks really great. Are you planning on open-sourcing this tool at any point?

    0 points
  • Jonathan YapJonathan Yap, 4 years ago

    Sorry I haven't been following the previous development, Colm but what is the output of the tool?

    0 points
    • Colm Tuite, 4 years ago

      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.

      0 points
  • Sergi MiralSergi Miral, 4 years ago

    Really nice tool! Any plans for beta testers? :)

    0 points
  • Saransh SinhaSaransh Sinha, 4 years ago

    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?

    0 points
    • Colm Tuite, 4 years ago

      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.

      0 points
  • Jonathan White, 4 years ago

    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?

    0 points
    • Colm Tuite, 4 years ago

      Just Rails/jQuery at the moment. It should really be on Angular or Ember, but I'm a noob :(

      1 point
  • Matt SoriaMatt Soria, 4 years ago

    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!

    0 points
    • Colm Tuite, almost 4 years ago (edited almost 4 years ago )

      Yep, web-based initially. Cool, I'll add you to the list and notify when I get something ready. Cheers mate

      1 point
  • Sean GeraghtySean Geraghty, 4 years ago

    This looks awesome man! Great work on this so far, can't wait to see more. Is it going to be web based then?

    0 points
  • Eliot SlevinEliot Slevin, 4 years ago

    Similar tool people may want to check out - https://atomic.io/

    0 points
  • Jordan BJordan B, 4 years ago

    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!

    0 points
    • Colm Tuite, 4 years ago

      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.

      0 points
  • Louis AnsaLouis Ansa, 4 years ago

    Yay, seems you can have fun within 2min, looks really cool man. Planning to update the current version soon? Cheers

    0 points
    • Colm TuiteColm Tuite, 4 years ago

      I'll be working on it over the break, then planning to launch an alpha/beta demo soon.

      0 points
  • Colm Tuite, 4 years ago

    I'm 10 points away from a new color.....I was afraid this might happen :(

    0 points
  • Braden HammBraden Hamm, 4 years ago

    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.

    0 points
    • Colm TuiteColm Tuite, 4 years ago

      I wish I could take credit for that, but it's actually a bug :)

      Would be handy though.

      2 points
      • Braden HammBraden Hamm, 4 years ago

        Well don't tell me that! Act like it was part of the plan.

        Now give me the beta ;)

        3 points
  • Colby BellColby Bell, 4 years ago

    Looks great and promising. Is there a way to get at the code or have some type of code export?

    0 points
    • Colm Tuite, 4 years ago

      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.

      0 points
  • Kyle MitchellKyle Mitchell, 4 years ago

    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?

    0 points
    • Colm Tuite, 4 years ago

      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.

      0 points
      • Kyle MitchellKyle Mitchell, 4 years ago

        exactly.

        oh custom ones that's cool!

        0 points
      • Gabriel LovatoGabriel Lovato, 4 years ago

        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.

        0 points
  • Jonathan MagatJonathan Magat, 4 years ago

    Very impressed by what you're doing, keep going !

    0 points
  • Rafael CondeRafael Conde, 4 years ago

    This is seriously cool. Can I be in the beta list? I would love to help.

    0 points
  • Apurva ShahApurva Shah, 4 years ago

    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

    0 points