Our last blog discussed how to take your learning UX and UI to the next level. This week, we’re going to take a slight diversion from the learning sphere to an area that we all experience as a user at some point or another – the web. Increasingly, though, we’re becoming not just web content consumers but also creators. It’s easier than ever for the user to become the designer, with a multitude of cutting edge web and app UI and UX design tools available to make that transition happen effortlessly. In this article, we’ll take a look at some of the best.
1. Google Web Designer
A free HTML5-based design and motion graphics creator.Google are masters of releasing feature-packed tools that draw in users through ease-of-use. Their free Web Designer tool allows you to create responsive, elegant HTML5 content with minimal coding skills required. This includes animation and interactive elements, and integrates with the rest of the Google suite, such as Google Drive and AdWords.
One of the coolest features is the ability to use Events to assign actions to physical gestures. You could create a completely responsive site that reacts to touch gestures when viewed on a mobile, all without having to code at all. The Google Web Designer even allows manipulation of 3D content using CSS3, so you can let your design imagination run wild.
Despite the ease of use, one of the limitations of the tool is that, consequently, room for customisation is limited. Another drawback is that Google’s analytic and advertisement platforms are pushed within the tool, so you may struggle if you use different ones.
2. SnapPages
Powerful all-round drag and drop website builder
SnapPages has been redesigned from the ground up, with the latest release making it faster and easier than ever to create up-to-date, responsive websites. SnapPages’ drag and drop tools make it simple for even relative newcomers to the web design scene to build a good looking website. Its professionally created website template designs are easy to customize, and you can host on their site.
As a user, you’re able to store your website and design files in the cloud, and there’s a special app for blogging which allows spam filtering for comments, so you can spend less time monitoring your site. The drag-and-drop HTML5 editor is optimized for touchscreen use, so you can use it in your tablet right in the browser.
SnapPages offers a good balance between customisation and ease-of-use, although its drawback may be not specialising in either.
3. Wix
Feature-packed easy to use drag and drop editor
If you’re willing to relinquish a little of the creativity and go more template when designing your site, then look no further than Wix. Having seen a massive surge in popularity thanks to its simplicity and impressive free offering, Wix is a serious contender. It represents a decent option for those looking to ease their way into the UI and UX design arena.
Wix’s biggest strength is the sheer number of templates available, meaning you’re sure to find one that suits your needs. They also have a huge range of plugins to make that user experience even better, from Facebook Stores to 360° images.
However, one thing to bear in mind is that Wix have a tendency to oversell a lot of fairly basic design elements as revolutionary premium features. Despite this, the overall feature list is strong; just beware of the limited options for customisation.
4. Webflow
Versatile, customisable design tool
If you want to go all the way in the other direction and make your web UI and UX even less template and more creative, take a look at Webflow. Webflow gives designers the ability to develop responsive websites visually — without writing a single line of code. And unlike similar tools, you’re not bound into using pre-made templates. Instead, you can start from a blank canvas and build exactly what you’re envisioning.
Even better, you can create a custom database for every website you build using Webflow’s CMS — again, without writing code. So you can design around your client’s or company’s content, letting your design decisions be driven by actual requirements.
If you’re a freelancer, you can build and launch a site without the need to subcontract to a developer, so you’re always in control of the design process. And if you’re an in-house designer, you can use Webflow to build high-fidelity, fully functional prototypes to hand over to developers, run user testing, and even launch landing pages.
The drawback here is that Webflow can be a bit less intuitive and easy to use for novice designers. One to look at when you’re beginning to spread your UI and UX wings, perhaps.
5. Antetype
UI-specific design tool
All of the aforementioned tools have been fairly general in scope. If you’re a designer at heart, though, you may want one a little sharper and more specifically design-orientated. In this case, you need to look no further than Antetype.
Antetype was itself developed by UI designers and provides all the tools you need to design rich, hi-fidelity prototypes. More than 400 widgets are available for all major platforms, but you still have the option to add additional widgets, including your own. Integrated interaction and annotation features allow you to demonstrate ongoing design work, and make comments and feedback available to team members and stakeholders.
Antetype is the first design and layout software focused on visual design, built by UI designers for UI designers. It saves you a lot of time creating and optimizing high-fidelity prototypes. Using Antetype definitely requires a little design flair, though, so it may not be the best option for those with less of design background.
6. Proto.io
App prototype creator
If you’re feeling more adventurous still, you could forego the website entirely in favour of creating a mobile app. Proto.io has shaken up the scene of mobile and web prototyping to go way beyond wireframes and mock-ups. With interactions, transitions, and animations it helps bring any static design to life, making it the best option for those looking to move into app UI and UX design, as well as web.
The tool allows designers to create visual interactive prototypes that work and feel exactly like the final versions without any coding skills required. You can either design directly within Proto.io, or import your designs from Sketch or Photoshop and magically view them as screens and assets.
Supporting all mobile touch gestures, prototypes can run on the actual mobile device; making the experience as realistic as possible. Want to test your prototypes and share with potential users? No problem, as Proto.io’s usability testing capabilities extend far beyond that, as its integration with popular user testing platforms allow you to see and hear what users are saying while trying out your prototype.
Proto.io is not as strong as the tools listed above for web design, though, so it’s better used for the app and usability testing side of things.
7. User Testing
User experience research platform
Now that you’ve crafted your (we hope) beautiful, engaging, and responsive UI and UX with the minimum of fuss, you need to test just how well that user experience flows. It may look spectacular, but with any UI and UX design, the proof is in the pudding.
User Testing is a user research platform that can be used to test either released or unreleased websites and apps. User Testing will design a test for you, or you can design a test yourself. You can run the test in minutes, and have the results within an hour. The cool thing about this is that feedback is not only in the form of metrics but also videos of real people commenting on the usability of your app.
It’s a great example of how modern tools not only simplify the UI and UX design process, but also add new features that were unimaginable only a tech generation ago.
Conclusion
Though we’ve provided a whole range of tools that allow stress-free UI and UX design, they all have several things in common. They let you get a website up and running and online quickly. They require no coding or special technical skills to work with. And they all make it possible for you to deliver high-performing, high-quality websites that perform well on any device.
Whether it’s hosting your learning or business, writing a blog, or creating a focus-group for your embarrassing hobby, these tools help place the power in the user’s hands, so get out there and grab it!
While you’re at it, why not check out our Six awesome design hacks for elearning?
