Layout

This app is a Grand Prize Winner in the Apptivate.MS developer contest!

Layout is an application for creating interaction designs for Metro-style apps.

This app can be used to create a visual representation of a real world app without having to write any code. Interaction designs can be quickly prototyped, tested, discarded and redone without long development cycles.

Current status

The second beta of Layout has been released to the Store.

We've fixed a lot of bugs form the first beta.

While still not v1.0 ready, this version already demonstrates most of the functionality of the first "real" version.

The beta can be downloaded for free from the Store: http://apps.microsoft.com/webpdp/app/layout/ff9ae06a-fa5a-44d2-a056-d8a244dc5e56

Features

  • Create projects with multiple screens
  • Link controls on a screen to different screens
  • Use "run mode" to click through an application to get a feel for the flow of the app
  • Design apps for multiple screen sizes
  • Get a perspective on your project via sementic zoom
  • Support for Windows 8 controls
  • Duplicate projects/screens to quickly create variations
  • Pin a project on the Start screen to test your project via "Run mode"

Future work

Some ideas we have for future features:

  • A better editing experience, especially with dragging and resizing controls
  • A "hub" control, instead of manually positioning tiles, have them be positioned automatically
  • More screen sizes, design the 'snapped mode' version of your app

These are just ideas, we don't know when we'll get around to these. If you have other requests for features, let us know!

Windows 8 features

The app is written in C# and XAML, we use a bunch of Windows 8 features, including:

  • Semantic Zoom
    see all screens of your project at once
  • Secondary tiles
    pin your projects to the Start Screen to test out a design in "run mode"
  • Share contract
    share your projects with other Layout users
  • Search contract
    find stuff in your projects
  • File association
    open a .layout file in Layout!
  • Snapped mode
    navigate projects while doing something else...

Videos

Screenshots

Comments

Luke Lowrey Dec 20 '12 at 22:05
Well done on the win, hope you can take the app to the next level (would love to see web mockups in there too!)
Tom Lokhorst Dec 20 '12 at 21:05
Oh, I just noticed there's no reference to our website on this page. I forgot to mention that in the original submission. Anyway, you can find news about Layout at layoutapp.net
Tom Lokhorst Dec 20 '12 at 14:58
Yay! Thanks to everyone who voted. And especially thanks to the people who left reviews and send us email with useful comments and suggestions.
Software Developer Dec 20 '12 at 14:59
Congrats to your team, great job!
Sandra Walters Dec 20 '12 at 15:37
Congrats! This is an excellent app, very worthy winner.
1
AnkMannen Dec 20 '12 at 14:50
Congrats to you!
Ankit Dec 5 '12 at 19:38
Its Sketchflow for Windows-8.
Sandeep V Dec 5 '12 at 10:58
Great, must have tool for Windows Store developers.
Software Developer Dec 3 '12 at 16:23
Be sure to upload your demo video. :)
Tom Lokhorst Dec 4 '12 at 9:54
Done! Just in time for the deadline ;-)
user1606266 Dec 3 '12 at 11:47
Nice One !! Would like to read more about the app
SchmitzIT Nov 28 '12 at 13:55
I can see this easily becoming one of my favourite Windows 8 apps :)
Stefano Driussi Nov 11 '12 at 9:26
Great tool. It's fantastic for prototyping, particularly in ealry stages of development.
Ryan Roper Nov 30 '12 at 21:13
Anything that makes prototyping easier is a big plus in my book. Especially if I can do it from anywhere.
Kostas Mavropalias Oct 19 '12 at 14:59
Phantastic, I would love to have this tool while I'm developing my app for the contest - upvoted :) Will give it a try when you upload the first beta. Do you plan some kind of 'export to code' functionality for when one is done creating a UI?
Tom Lokhorst Oct 22 '12 at 6:54
Thanks for your upvote! We are not planning on having a 'export to code' feature. Primarily because this is a tool for creating and experimenting with interaction designs for high quality apps, not for generating prototypes. But also because generating good code is really hard. And while we could generate bad code, that would encourage low quality apps, which is opposite to our goal. Also, in my experience it isn't too hard to write the code yourself once you have a well thought out interaction design to work from.
MatthewThepc Oct 15 '12 at 1:06
WOW, that looks like just the app I'll need while deving my apps :D when will it be in the Store?
Tom Lokhorst Oct 15 '12 at 7:55
We're trying to get a beta version in the Store by October 26th.
Tom Lokhorst Oct 26 '12 at 5:43
It's in the Store now! :-)
KevinM1 Oct 14 '12 at 23:48
Looks like the perfect prototyping tool without needing to dive into XAML.
Tom Lokhorst Oct 15 '12 at 7:58
Exactly. The XAML part can come after having done several UX protoypes, once you've decided on what direction you want to go in with your app.
1
Ranjan Dailata Oct 14 '12 at 16:42
I would like to know the design details about this App