I’m working on designs and a user interface for a clients new website app called ‘gt2go’. It’s a responsive website app, designed for mobiles and will offer detailed city guides for relocation companies and their employees.
As part of the branding and design, I’ve been sketching mobile screen layouts for the app and I came across this handy tool to preview and demo how the basic functionality of the app will work.
It’s called Marvelapp and is a great new prototyping tool for designers. It lets you link up your sketches, wireframes and designs to create realistic prototypes in seconds, no matter what your technical level.
FIrst, I sketch out the layouts in my dotgrid book:
Then take pictures of each of them to upload into the app.
I use the Dropbox sharing and once linked up, you can add any image and start linking them together. Marvel automatically recognises when you make changes to your designs and updates prototypes in the background.
Once you have uploaded your screens, you can add hotlinks, set animated transitions – like the iPhone’s.
Below are the current sketched roughs of the screens I’m working on within the Marvelapp previewer. You can play around with it, scroll, click the links. I find it a great way to quickly show the client what I’m trying to design without having to work up a real prototype.
It is previewed live inside an iPhone frame. Or within the Marvel app. Note: it is a work in progress – so what you see below may get updated.
Move your mouse or finger over, and click or scroll:
This is the first design file I’m now currently working on from the sketches:
I also use Invision which is a similar – more popular – prototyping tool for web designers. Marvelapp is new to the scene and I prefer it for mobile design.
What tools do you use to help you design for the web?