UX, Apps & Web Design Blog

By: Agne Lund | 22 May 2016

Web design is changing, the lines between designer and developer are increasingly becoming blurred. For instance, static mock-ups are becoming less useful and increasingly, clients and stakeholders want to see more dynamic prototypes. The client because of the look of the design and furthermore, the developer for the coding that can be required during the process. There has been an explosion of web design tools that enable collaboration between all parties to create some really charming design.

Whether you are a website owner who wants a better way to create mock-ups for sharing ideas with your designer, or you are a freelance web designer who is seeking a more efficient way to build prototypes for your clients, the design tools below should be able to make your life easier.

The web designers at Opus have compiled a list of web design tools they can recommend. Furthermore, these are the tools the team feels could change the way you think about web design, and possibly establish new innovative design processes yourself as well.

1. Pixate

Pixate aims to simplify the process of creating realistic mobile app and mobile-first website prototypes, all without the need to write any code.

By connecting your iOS or Android mobile device, you can create the designs on your desktop and then use your smartphone to either demo or preview. Pixate is a free of use app that is part of the Google portfolio of apps.

The mobile demos you can create with Pixate are 100% native, ensuring that your audience can test-drive your ideas in a realistic environment.

Pricing: free

2. Affinity

Affinity by Serif has been dubbed the ‘Photoshop killer’ by some, and it’s easy to see why. The 1,000,000 percent zoom is way over what Photoshop (32,000) can do. This is particularly useful when working with vector art, as you can examine up close. The undo and history features in Affinity allow you to go back over 8,000 steps!

What Affinity has done well is kept the layout familiar while tightening everything up and hiding distractions. It is no wonder that is was the Mac App of 2015. A worthy competitor to Photoshop or Illustrator.

Pricing: from $49.99

3. Avocode

Avocode aims to be the bridge between designers and developers. With this web design tool, you can easily export your Photoshop and Sketch designs into Avocode, with all elements and layers kept intact. Therefore, if you are a front-end developer who is looking for an easier way to get your work over to your back-end coders, Avocode could be just what you need.

The collaborative nature of Avocode means that all of the work takes place in a central location, rather than searching for new revisions. Avocode is very flexible, working on Windows, OS X, and Linux

Pricing: from $9 per month but it does have a 14-day free trial

4. Antetype

Antetype is a new tool for creating responsive user interfaces for apps and websites. Its aim is to create high-fidelity prototypes, but not production files. This is actually a good thing – the team is focused on exactly what it is creating, and it’s not trying to make an app that replaces developers.

On download you’re given a fairly basic widget library, which you can use to quickly create prototypes and start designing. Antetype provides a library of devices and OS designs including iOS, Android and Windows to start with. There is also an active community section on the site, where you can download UI kits from other Antetype users.

Pricing: $189.99 one off fee with a 30-day free trial

5. Sketch

Sketch has gained a massive following since it launched in 2009. The speed at which Bohemian Coding (the creator of Sketch) is moving is very impressive. The latest version includes great new features such as improved exporting, symbols, new grid tool and simplified vector modes.

Sketch has incorporated CSS logic into the app. This makes converting your designs into CSS much easier, as you have to use CSS logic when applying styles. Another feature which is really handy for speeding up the design/development crossover is Automatic Slicing. Without having to manually add slices, Sketch can create assets using one-click export, which will be exported at 0.5x, 1x, 2x and 3x and in various file extensions such as PNG, JPG and TIFF.

Pricing: $99 one off fee with a 30-day free trial

6. Atomic

Atomic is a web design tool that allows you to create a design in your browser, on both PCs and Macs, and then share them for viewing on a range of devices, even the Apple Watch! This is great for showcasing clients and stakeholders your mock-ups or sending your developer an overview of what you need them to create.

Atomic allows you to pull in designs from Photoshop or Sketch. You can then add the interactive elements to the designs before sharing them with your team or clients to obtain feedback. By using the collaborative abilities of Atomic, you can quickly thresh out a framework and send it off to your designer with the app or to your client for approval.

Pricing: from $15 per month

7. UXPin

UXPin aims to be the one-stop design tool that you take from the planning stage, through to collecting feedback from clients, and beyond. From plotting out rough wireframes, through to creating fully interactive prototypes, UXPin is excellent.

Whether you prefer to begin with your own designs or choose a pre-built template, UXPin can do both. Through the UXPin library of elements, you can easily add popular features to your prototypes. This could include animated navigation drawers that are popular in mobile sites and apps, or animated carousels and fading menus. If you want the ability to create basic wireframes and turn them into high-fidelity mock-ups that really convey your ideas to your clients, the powerful UXPin should be on your list.

Pricing: from $19 per month

8. Macaw

Macaw is a billed as a code-savvy web design tool, built with designers in mind so ideal if you have not yet learnt to code. Designed to help you rapidly construct wireframes, prototypes, and mock-ups, the Macaw user interface looks similar to that of Photoshop. Therefore, if you are familiar with Adobe’s flagship image manipulation app, you will like using Macaw.

As you work, Macaw generates the underlying HTML and CSS in the background. The code the app produces is actually really well constructed and semantic. While the code might not be that useful to WordPress developers using a drag and drop structure, it does give you a quick and easy way to demonstrate the user interface of your proposed web design without using a WordPress theme.

Another key feature of Macaw is its ability to create fully responsive designs so it looks and works great across all devices. Adding your custom breakpoints is very easy and helps you to test out how your layout will look on a range of different devices.

Pricing: free

9. Marvel

Marvel is a code-free design, prototyping, and collaborative tool, it transforms images and sketches into interactive prototypes that look and feel like real apps and websites. When creating your prototypes, you can make use of timers to handle the transition between slides or pages. You can also view your mock-ups on a range of devices, including Apple Watch.

When you first open Marvel you’re asked to connect it with your Dropbox, which allows the app to grab the files it needs to create your project(s). If you don’t use Dropbox, there’s no other way to get your files into Marvel.

Pricing: from free

10. Webflow

Webflow takes a bit of a more simplistic approach to wire framing and prototyping by doing away with the drawing tools and instead giving you access to a collection of drag and drop elements. So in essence this is similar to use of WordPress. Webflow is actually part-CMS, web design tool and hosting platform in one. Due to this, there are a number of free and premium templates (like WordPress) that you can use to build your prototype.

If you stick with WordPress, you can simply use this drag and drop page web design tool to create fully interactive website and theme prototypes. After that, you can recreate your designs by hand for WordPress or use your favourite drag and drop theme to build your new WordPress website.

Pricing: from free

11. Frontify

Frontify is a neat piece of software that helps designers create branding and style guides for their projects. There is plenty of scope for coloration with this tool, so if you want to ensure your team are all singing from the same hymn sheet while working a project, this branding guideline publishing tool is well worth taking for a test drive.

As well as being a Style Guide tool, Frontify also has a prototyping tool called Workspace, where your team can share designs, add comments, approve changes, and give presentations, all through the online app. Frontify Style Guide gives you an easy and attractive way to document the fonts, colours, and everything else for your project while the Workspace tool makes it easy to create and share your designs.

Pricing: from free

12. Origami

Origami has been created by the Facebook team and they have reportedly used this tool to design and build some of their most well-known products, including Instagram, Slingshot, Rooms, Groups and Messenger.

Origami will be available for free, possibly as another way of Facebook entering a new market but at present it is only available on iOS. The concept behind Origami is to create prototypes and export code snippets to your engineers.

Pricing: free

13. PowerMockup

PowerMockup is an add-on for the ubiquitous PowerPoint platform. This makes it a web design tool that would be great for delivering presentations and collaborating with less technical clients. In the package, you will find over 800 user interface elements, each of which have been made from PowerPoint shapes. Simply drag and drop these elements into place to create a PowerPoint presentation that will demonstrate or share your website or app prototype. PowerMockup is ideal to demo prototypes on a commonly used platform like PowerPoint that is trusted and regularly used by all.

Pricing: from $59.99 with free trial available

14. Invision

Invision is a powerful prototyping tool that is excellent for collaboration with your clients. It allows you to quickly and easily create interactive mock-ups for your designs. When you are ready, you can share these mock-ups with your team or clients. It makes presenting your designs a breeze, and is much more effective than sending out a .PDF or screen shots.

You can discuss the mock-ups right inside the app by leaving comments, that are connected to a point on the screen that you are discussing. You can annotate and comment on your designs whether you are the lead designer, team member, client or other stakeholders.

Pricing: free for one project

15. Wire Flow

Wire Flow is an impressive tool that allows you to quickly sketch wireframes on a mobile device. Once you start to think about the many ways you could use Wire Flow, you will soon see how it could become one of the most invaluable web design tools.

Whether you want to plot out a new UI on the go or pull out your smartphone in a client meeting and kick start a project, the Android-only Wire Flow has many uses. However, if though this app has a code-free design, you still have to understand how code works in order to create a design with superb functionality. Do not let that put you off, it is still a wonderful prototyping tool.

Pricing: free

From sketching out a rough wireframe through to building functioning prototypes, the right web design tool can speed up production time and remove a lot of frustration that can arise from sharing your work within your team and clients.

With emphasis on collaboration and communication found in these web design tools, annotating and approving comments can be done with a few clicks. However, in case these web design tools are a bit too challenging or time-consuming for you to navigate, and you are looking for a compelling design indeed, why not contact the team at Opus and tell us what you need? The team would be happy to partner with you.

Share this article:

  • Estonia

    • Pärnu mnt 141, Tallinn
      11314, Estonia
  • US

    • 600 First Ave, Seattle
      WA 98104, US
  • Germany

    • Wattstrasse 11
      13355 Berlin