A rendered mockup showing a white iMac in clay style. Fully layered and organized PSD file in print-ready resolution (5800 x 4000 px at 300 dpi). View Details. Free – Download. Isometric Devices Showcase Mockup A showcase mockup for presenting apps or responsive web design. Super high-res PSD file (8000 x 6350 px at.
Mac tool for capturing presentation. So you've just taken some killer photos with your new DSLR, or you captured a great video with your iPhone — what's next? While it feels natural to just post media quickly to your Facebook Page, sometimes great photos or video need their own home in the form of a personal website.
But on the other hand, it's not easy to make a website layout that complements rich media. In order to make a great website, professional web designers take advantage of mockup tools to analyze layout, design and functionality. Taking advantage of these applications (some of which are 100% free) is a wise move — especially if you're interested in creating a professional website for your photography or video.
We've rounded up nine applications that can help you get the most out of designing your web layout. What's your tip for displaying photos or video on your website? Let us know in the comments.
1. Balsamiq Mockups
Perhaps one of the more well-known and popular mockup tools, Balsamiq Mockups is a cloud-based mockup service (with accompanying desktop application) that enables you to quickly and easily create fun and interactive website mockups. With its trademark sketchy, hand-drawn look, Balsamiq Mockups lets you focus on solving larger UI problems rather than obsessing over the details.
The application comes with a huge collection of drop-in components and reusable libraries, and an easy drag-and-drop interface. Since it is cross-platform and has full offline support, you can create mockups anywhere.
Pricing for the desktop application starts at $79 for a single-user license, but a 50% discount is available when you sign up for a monthly subscription to myBalsamiq (plans start at $12 per month).
2. Mockingbird
Mockingbird is another popular web-based wireframing application, with some great functionality baked in for linking and sharing your mockups. Designed for rapid prototyping, Mockingbird lets you create interfaces quickly with the drag-and-drop editor, either alone or in collaboration with a team.
By linking pages together, you can then create interactive mockups and wireframes — perfect for sharing with your clients, reviewing workflow and streamlining your user experience.
Mockingbird subscription plans start at just $9 per month for a personal account (which allows you to have two active projects), and team plans ranging from $20 to $85 per month, depending on the number of projects.
3. Mockup Builder
Mockup Builder is a free web application built in Microsoft Silverlight that is designed to let you create software and website mockups, then easily share them with clients or coworkers.
The library of available elements is diverse (supporting desktop, browser, iOS and Android components) but limited in quantity. For a free tool, however, Mockup Builder certainly has its bases covered and offers a great starting point for prototyping simple ideas and concepts.
When you're ready to share your mockup, projects can be exported as both PNG and PDF files or shared directly. Those with access can then leave feedback and comments on the project.
4. MockFlow
MockFlow is a 'super-easy wireframing' service that enables you to create and collaborate on complex interactive wireframes and UI prototypes for your web sites and applications.
As with Balsamiq, MockFlow includes a cross-platform desktop application (powered by Adobe Air), so you can build your UI concepts in a streamlined, clutter-free environment with full offline support. MockFlow also includes a free mobile application that is perfect for presenting prototypes to clients and accessing your mockups on the fly. A number of other add-ons are also available.
MockFlow has two pricing options — a free plan that gets you one small project (four pages) with two collaborators, and a Premium package at $99 per year for unlimited projects, several add-ons and a few additional perks. With a price point at under $100 annually for the premium account, Mockflow is one of the more affordable professional solutions.
5. HotGloo
With more than 26,000 projects created, HotGloo is another wireframing and website mockup tool that's been around for quite a while. This web application sports a large library of components, a feature-rich, drag-and-drop interface and tools for both collaboration and review.
The service has one of the more polished web-based authoring environments we've seen, making this application a pleasure to use. With HotGloo, you'll be able to create entire user interactions — you can design, test, revise and review your complete application workflow. Other tools include the ability to create master templates (which can be applied across an entire project), smart element stacks for organizing your UI and role-based access for authors and clients.
HotGloo's pricing plans range from $14 to $54 per month, with a 15-day free trial for new accounts.
6. Invision
Invision is another online tool aimed at helping you design, share and test your user experience. More than just wireframes, Invision lets you create fully featured and highly interactive mockups with as much polish as you want to put into them. Great collaboration tools make it easy to share projects and work together as a team, and mobile support is quite good.
Whether you're creating high-fidelity prototypes or interactive wireframes, Invision makes authoring and sharing projects easy. The wireframing tools include a large element library, and more detailed mockups give you complete control over images, colors and layout via a streamlined and clean editing environment.
Invision boasts a network of more than 30,000 designers, including some big-name companies. Subscription plans range from free (for up to two projects) to $75 per month for up to 20 active projects. There's also a 30-day free trial on all accounts.
7. JustProto
JustProto is a wireframing web application with a few features we haven't seen in other products. Like many similar offerings, JustProto has a large library of wireframe elements and widgets, accessible via a simple drag-and-drop interface. However, there are a few other key features that set JustProto apart from the crowd.
Not only can you share projects via a single share link, JustProto also enables you to collaborate in real-time with other designers, chat with clients and collaborators, and keep a history of all chat communication. With JustProto, you can create fully featured, interactive wireframes in real-time and then gather instant feedback.
JustProto plans range from $19 to $99 per month, with custom packages available for large-scale and enterprise customers. A free 15-day trial period is provided, and there's no credit card required to sign-up.
8. Proto.io
Proto.io is an application prototyping platform designed specifically for prototyping mobile applications. This web app helps you to create mobile mockups with ease for iPhone, iPad, Android and a number of other devices. Proto.io gives you full control over colors, fonts and layout, and it comes with a large element library to make building rich prototypes easier.
Proto.io also lets you share projects and collaborate with other designers. Proto.io mockups can be viewed directly on your mobile device, giving you a better feel for how your application will look and function in a real-world setting, or you can view projects via the Proto.io web player.
There's a free plan available, which is good for one small (five screen) project, and paid subscriptions are $24 and $49 per month, with fairly generous offerings on disk quota, screens, collaborators and other resources.
9. inPresso Screens
Last, but not least, inPresso Screens is a prototyping tool for both desktop software and websites. One of the things we like about inPresso is the ability to skin applications using popular window manager themes from a variety of operating systems. This is great if you're mocking up a desktop application and you need to get a real feel for what the final product will look like.
inPresso is available as a free desktop application or via subscription, with some pretty important distinctions between the two. The free version gives you a desktop tool for authoring application prototypes and wireframes which can be saved and edited locally. In addition to the base tools, the subscription package also allows access to an online library of UI elements, and enables instant online publication and sharing of your prototypes as well as a web player for presenting prototypes to your clients.
The desktop application itself is cross-platform and annual subscriptions are only $29 per year.
Image courtesy of iStockphoto, kryczka
This series is supported by Ben & Jerry's Joe, Ben & Jerry's new line-up of Fair Trade and frozen iced coffee drinks. Learn more about it here.
Wireframing is a crucial step in web design and development as it allows for rapid prototyping and helps to pinpoint potential problems early in the process. It can be invaluable to have a visual representation of content, hierarchy and layout.
Wireframes make it easier to communicate ideas, reduce scope creep, cut down on project costs (due to fewer design revisions later), and enable greater upfront usability and functionality testing.
This post highlights 10 of the best free wireframing tools available, including standalone applications, web-based tools and browser add-ons.
If you're partial to a particular wireframing tool available for free download, let us know in the comments.
1. Mockingbird
Mockingbird is a web-based beta software based on the Cappuccino framework to create, link together, preview and share wireframes of your website or application.
It's a clean and user-friendly interface, with drag and drop UI, interactive page linking, smart text resizing and the ability to easily share mockups with clients or colleagues with a direct link, make Mockingbird one of the best wireframe tools available.
As it's web-based, it means you can create and share mockups from anywhere. It will be interesting to see just how good Mockingbird is when it comes out of beta and the full version is released.
2. Lovely Charts
Lovely Charts is an online diagramming application, that allows you to create flowcharts, sitemaps, organization charts and wireframes.
One of the key features is the application's ability to make assumptions based on the type of diagram you're drawing, and thus streamline the drawing process. The History management feature is extremely useful, keeping 20 states of your diagram in memory should you wish to go back to an earlier version or undo any changes. https://omgpond.netlify.app/best-all-in-one-free-clean-up-tool-for-mac.html.
There is a powerful yet simple tool set provided, with an extensive library of crafted symbols to suit most requirements.
3. Cacoo
Cacoo is a user-friendly online drawing tool that allows you to create a variety of diagrams, such as sitemaps, wireframes and network charts.
Website Wireframe Tool Mac Free
The drag and drop UI means creating diagrams is relatively simple; there are also a number of stencils to utilize which could make the process even more efficient. Unlimited Undo is a neat feature with the history of all modifications saved, meaning you can undo right back to the start.
Numerous users can also work on and complete the same diagram simultaneously with the application supporting real-time collaboration.
4. Gliffy
Gliffy is a web-based application which allows you to create process flow diagrams, org charts, floor plans, business processes, network diagrams, technical drawings, website wireframes, and more. It uses a drag and drop UI with the ability to add boxes, buttons, and lines from the tool shape library to anywhere on the page. Then you can easily add text to create a clear, concise mockup.
You have access to a complete library of shapes and can even import your own images, like logos and backgrounds, to complement your diagrams. You can share and collaborate with anyone, on any platform, in any location, while having the ability to protect and track changes.
Website Mockup Software Mac
The Gliffy API (beta) also makes it possible for developers to add Gliffy diagramming features to their existing web-based applications based on a simple to use framework.
5. Lumzy
Lumzy is a mockup and prototype creation tool for websites and applications. You can add events to controls, place controls inside other containers and emulate your project with easy page navigation triggered by user actions.
Real-time collaboration is one of the key features, with tools for team editing, a chat engine for deliberating over designs and file versioning. Lumzy is also the only mockup tool with a real image editor built-in — simply grab any picture from your drive and edit it, apply hue, saturation, adjust contrast, and so on, and then add it to your project.
The Pro version is white label and can be integrated into an existing platform or hosted on your own server which may be of interest to companies working with confidential information.
6. Mockflow
Mockflow is a web app based on the Adobe Flash Platform. It has a clean, minimalistic, organized interface and the editing feature-set set is extensive.
You drag and drop components into a mockup to create the wireframe with the ability to add pages and map out an entire site and it’s structure. The built-in components are extensive, from charts and ads to menus and dropdowns. The ability to upload your own images to use, as well as the option to choose from a set of stickers of common site elements, such as social networking and e-commerce images, make the process of ‘building’ the mockup pretty efficient.
You can talk over the real-time chat and invite others as editors or viewers, depending on the level of editorial power you'd like each member to have. Editors have the ability to make changes to the wireframes, while viewers are limited to reviewing and commenting.
The MockStore is a wonderful add-on service that provides third party components and templates shared by the user community.
7. Pencil Project
The Pencil Project is an open source tool for making diagrams and GUI prototyping that everyone can use. It's available as a Firefox add-on or as a standalone application (Linux and Windows only). Pencil essentially installs an entire drawing application into your Firefox browser and gives you the ability to display, save, and load an external canvas, together with a palette of shapes.
Of interest is the Stencil Generator which allows you to create your own collection of stencil shapes by pointing the generator to a folder of image files. The Clipart tool lets you search through the library at openclipart.org and directly drop the images right into your Pencil document. Pencil also supports the use of external objects; both raster and vector images can be imported using copy-paste or drag and drop.
The final prototype can be exported as a PNG image, web page, OpenOffice file, PDF or DOC file. If you're a dedicated Firefox user, then Pencil could be an essential tool for visually expressing conceptual ideas on the fly. It even won the Mozilla award for 'Best New Add-On' in 2008.
8. SimpleDiagrams
SimpleDiagrams is a small desktop application that helps you express your ideas quickly and simply with just enough functionality to describe a thought or capture a process. It's built on the Adobe AIR platform, so will run smoothly on Mac, Windows and Linux.
You can drag, drop and size symbols from libraries, add photos and post-notes and export your diagram to PNG.
It may not be a fully-fledged diagramming tool, but because SimpleDiagrams is so basic, you will be creating wireframes or diagrams within minutes.
9. Denim
Denim is a free multi-platform desktop app that supports sketching and allows design at various refinement levels. It's an efficient tool for early stage brainstorming and wireframing.
Two main features within Denim are Components, which enable you to create widgets that can be reused and Conditionals, which allow you to create transitions between pages depending on the end-users' actions, resulting in a more interactive experience.
It's a simple yet effective tool and allows for easy annotation using editing gestures.
10. Website Wireframe
Website Wireframe is a very simple web-based tool for building wireframes in a matter of minutes. A link to view the wireframe can be sent through email, instant message, or mobile phone, and then the wireframe can be easily updated based on feedback, discussion, ideas and suggestions.
The key to this tool is the simplicity of usage, lending itself to speed, both in wireframe creation and sharing. It is free to register and use and works in most modern web browsers.
Free Website Mockup Template
It may not be particularly sophisticated, however it's simplicity and efficiency is perfect for those who want an alternative to tools with a higher learning curve.
Are you currently using any of these tools? If so, please share your thoughts and experiences in the comments below.
Series supported by Ben & Jerry's Joe
Easy Website Mockup Tool
This series is supported by Ben & Jerry's Joe, Ben & Jerry's new line-up of Fair Trade and frozen iced coffee drinks. Learn more about it here.