• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Mokup - new cross-platform ui prototyping & animation tool.


#1
Hello creators, I'm Max - developer of Mokup cross-platform interactive prototyping tool.
It's similar in functionality to Principle or Flinto, but it approaches some aspect of prototyping differently.
Right now it's available for Windows and Mac, Android and iOS players are comming very soon.
It's free to use while in beta. Please grab it here http://mokup.me/download/

I'm happy to hear your feedback.
 

Paul Murray

Moderator
Staff member
#2
I'll download it and give it a try. What will your pricing model be? I'm looking into some animation/prototyping software, but they all have recurring license fees. Will you be doing the same?
 

fisicx

Active Member
#4
I'm a little confused. I watched the first tutorial and all it seemed to be was an application to create layouts for websites. What makes this any different to the gazillions of other applications that do the same?

In any case, all the transitions in the second tutorial are easily done with CSS3 so not at all sure why you would want to spend all that time on a mockup when you could build the real thing in the same amount of time.
 
#5
Yes, there are many prototyping tools on the market, but there are only 2 that match Mokup in terms of functionality: Principle and Flinto. Both are for mac only, Mokup is fully cross-platform.
Probably you can recreate the first tutorial in pure css in the same time.
But how much time do you need to recreate something like this: http://mokup.s3.amazonaws.com/marketingMaterials/tickets.gif (give it a time to load - it's a gif)?
Or like this http://mokup.s3.amazonaws.com/marketingMaterials/instagramm.mp4 ?
And such a prototype will be fully intractable. You can show it to your customer, make a user test, verify different hypothesis. Everything on a real device (iOS, Android, Win, Mac).
You can export it to gif and add it to your dribble portfolio.
 

fisicx

Active Member
#6
But how much time do you need to recreate something like this: http://mokup.s3.amazonaws.com/marketingMaterials/tickets.gif (give it a time to load - it's a gif)?
A lot of that can easily be done with CSS3 animations but that's not really the point. Suppose you develop an animated prototype, you would still have to replicate everything using CSS and/or jQuery so why not just start with the environment to want to finish with.

It's also worth pointing out that people are moving away from dedicated apps and more towards responsive websites. It's far easier and cheaper to manage a single data source than it is to keep a website and app updated.

So while is it a clever tool I can't quite see how much use it would be. Or am I missing something.
 
#7
A lot of people use tools for prototyping and find them useful. I see you approach it from the developer prospective. But it's not a tool for developers. It's a tool for UI engineers and designers.
When you create something at the beginning you don't have a whole picture of what you are creating.
If you, instead of prototyping first, will create everything with css/js you will spend weeks of developers work on each trial-error cycle.

With Mokup you can prototype->test on users->fix ui->test on users->create 3 different versions of UI->test on users->fix errors->show to customer->get final version blazingly fast.
With Mokup you don't need to use expensive developers time for each trial-error cycle. And you can shorten those iterations to hours instead of weeks.
 

hankscorpio

Moderator
Staff member
#8
I can see the value of it - would suit me to the ground should I need to sort out a quick layout or prototype something. Then hand it over to a developer.

Either trial it or don't - use it or not - the fact is it's here.
 

fisicx

Active Member
#9
OK I get it now.
If you, instead of prototyping first, will create everything with css/js you will spend weeks of developers work on each trial-error cycle.
But I disagree with this. A good front-end developer could replicate the animations in your second tutorial in a few hours. There is nothing complicated about the layout in your tutorial as the animations and transitions are standard CSS3 and jquery effects. One created, editing the CSS to show different options is a doddle.

But I've had a play with the demo and do agree it's very clever. But it would be nice if you could export the results as HTML/CSS
 

fisicx

Active Member
#10
I can see the value of it - would suit me to the ground should I need to sort out a quick layout or prototype something. Then hand it over to a developer.
Been mulling this one over and been in discussion with others.

The idea that a designer does the prototype and lobs it over the wall to a developer is a very inefficient way of working. Most websites and apps are built from elements that integrate to form a whole. Each element is tested and refined to make sure it is fit in form and function.

The examples in the tutorials on the mokup site miss a lot of the components needed to built a successful website. Look at the second tutorial. It’s a desktop demo with a number of features that wouldn’t work on smaller screens. A developer would want a lot more information on how the layout would work on all devices. Which comes back to my earlier point that beginning with an html/css wireframe is a much better starting place.
 
#11
The discussion "Is prototyping needed" has no point. It's here. Hundreds of thousands people use tools like Principle&FIinto. You don't find it useful? It's OK. Don't use it.
People don't build just "websites" and "html/js" is not the only technology. People build very different products and use very different workflows. And for many of them my tool is a perfect fit.
 

hankscorpio

Moderator
Staff member
#12
Been mulling this one over and been in discussion with others.

The idea that a designer does the prototype and lobs it over the wall to a developer is a very inefficient way of working. Most websites and apps are built from elements that integrate to form a whole. Each element is tested and refined to make sure it is fit in form and function.

The examples in the tutorials on the mokup site miss a lot of the components needed to built a successful website. Look at the second tutorial. It’s a desktop demo with a number of features that wouldn’t work on smaller screens. A developer would want a lot more information on how the layout would work on all devices. Which comes back to my earlier point that beginning with an html/css wireframe is a much better starting place.
Whether you like that work flow, or it's efficiency is irrelevant. Typically, we would work in prototypes until fully designed. Then hand it over. A lot of people work that way.

So let's move on, and critique the app itself rather than the idea.