Moqups: HTML5-Based Mockups On Steroids

Before you detail the design of your next website project you need to determine where should be what. You will have to place your navigation, images, texts, forms, whatever will be part of your site. Especially essential parts such as the navigational concept have to be planned very thoroughly. The information architecture decides if your project will be usable or not. Also important in your early concept is that nothing should be forgotten. The established way to deal with all of these challenges is creating one or more mockups of the project. Mockups are small models, sometimes even prototypes, sometimes only scribbles of the website under construction. They do not determine the design aka looks of a site but they define its structure and the navigational concepts. The brand-new web-app Moqups has been created to help you do just that, build early mockups of your next big web-thing. Moqups With one first look at Moqups you are immediately convinced, that the app is nothing about design. All the elements for screwing together a mockup are simple, unpretentious even. This is exactly the right approach as you do not even get tempted to start with a stylish design right there, which might well be the case while using Photoshop for first mockups.

Moqups Helps Build Mockups with pre-built Modules

First thing to define in a mockup should always be the position of the navigation. Also you should determine how your forms will be structured and where they are likely to sit. Then you will sketch areas to hold logo, pictures and texts. All these standard elements are available via the use of modules inside Moqups. Modules only need to be dragged from the toolbar and dropped anywhere inside your mockup. That way creating a mockup can be done at a fast pace. Headings or text-examples with changeable lorem ipsum dummies are as easily positioned as dummy images are. If you need charts, maps oder media-players, all of these are available for simply dragging them in. Images and texts are comfortably added and edited If you plan to have more than one navigation Moqups allows you to title them individually. That way you can integrate not only navigation dummies but your real-life navigational topics as far as you have them figured out already. Complex websites often come with a horizontal main navigation and a vertical sub-navigation depending on the chosen main-navigation topic. You might as well have two independent horizontal navigational bars, all of which can be created in your Moqups mockups… Navigation (left) can be edited via double-click (right) If you want your mockup to look a little more realistic for your not so creative client, you are able to embed logos or images from your harddrive. You will have to upload them first though. Your client will find his way around better when he recognizes key elements of his corporate identity.

Store And Edit a Mockup

After you have finished your mockup you could send it as a link-ressource to as many email-addresses as you like. Alternatively you can export the mockup as PNG or PDF. Choosing PDF creates a vector-based output which could be printed in decent quality and used for one of these real-life presentations in the client's conference room where they do not have internet access, for security reasons usually… While you can use Moqups without the need for creating an account you will need to register as soon as you want to share of export the mockups. Registration is free. Once your account is created you can administer as many different mockups as you like. Moqups may become your central place to go for all your early project sketches. As every designer has the need to create mockups of upcoming projects, Moqups comes in handy for all of us. Moqups has a wide variety of modules that extend its possibilities beyond website design. The app itself is built based on HTML5 with the stencils created in SVG. Moqups is free while in Beta. Additionally, the main use cases will always be free with some reasonable limitations. Premium features will revolve around collaboration, feedback, annotations and other things. For the time being pricing information is not available and seems still undecided. As the service promises to keep the basic usage free, you should not hesitate to sign up for it today.