8 Web Design Tools to Use in 2018

In the modern web community, there are many tools for web design. There are the classics — graphics editors like Photoshop and Sketch — and programs that combine both design and layout.

In addition to using the main tool, the designer usually uses, as a rule, a number of auxiliary services and tools that simplify the work.

Outline2Design team selected a list of the most interesting and useful resources that we got hooked on.

Rapid UI

RapidUI is the web design platform that allows designers to turn their PSD and Sketch files into fully functional websites without writing a single line of code.

Advantages: automated interface development.

Each element of design can perform an action. For example, you can easily convert maps into interactive maps, squares into buttons, and background images into parallax.

Disadvantages: outdated interface design. However, this is not the most important thing.

The big drawback is that the tool does not read layers and overlay effects well. If you have already chosen it, you should spend some time preparing quality sources.

Webflow

Webflow is a website development tool whose strong side is a visual editor with element management via the drag and drop interface, as well as an unlimited free fare with the ability to host one site.

Website creation does not require special knowledge and programming skills, so the service is suitable for beginners in the field of site building, as well as experienced users.

Advantages: first of all, it is a free tool. The main difference between this service and the others lies in the fact that the designer can make intuitively functional design without the help of a programmer.

Also, as a bonus, Webflow has provided a selection of top designers and an opportunity for you to see the various works.

Disadvantages: you need minimal knowledge of HTML / CSS to work with this tool. On the other hand, it’s not so bad.

Atomic and Proto

We think that these tools are identical in functionality. The main direction is prototyping for numerous devices.

Advantages: you do not need to learn programming to add additional functions. Web-based platforms allow any user to add these elements at once.

Atomic is free. It has an unlimited number of prototypes and all are free.

The great advantage of Proto.io is its integration with three user testing platforms: Lookback, UserTesting, and Validally, which makes it much more convenient for user testing purposes.

Disadvantages: Proto.io has its own plug-ins for both Sketch and Photoshop, but unfortunately, all layers are exported to static graphics, so they are not edited in Proto.io. Another disadvantage is that for Proto.io you have to pay $24 monthly for one person and up to five projects.

Figma

Figma is the cross-platform tool for designers and allows several people to work on the same project in real time. Figma is especially preferred by web developers. It’s a pleasure to make a graphical user interface for a mobile app.

In addition, here, as in Google Docs, it is possible to leave comments directly on the working field, which is very convenient for teamwork.

Viacheslav, a Senior UX/UI Designer believes that:

“One of the most important advantages of Figma is cooperation mode when several designers can work on one layout at a time. I believe that this tool will be useful for junior novice designers. I also want to note that Figma is an online tool and I can use it from many platforms. All that I need for this is the internet.

Advantages:

  • Updates for this tool come out quite often. The last one was released on January 25, 2018. The development team has made many changes, one of which is the ability to drag Sketch files into an open document.
  • Does not require coding knowledge, unlike with Webflow.
  • The design is automatically converted into CSS code.

Prototyping on Paper

“Most UX designers start the design process with sketches on paper, only now you can test some hypotheses basically when creating an interactive prototype. POP allows designers at the stage of sketches to create working prototypes and shares them with the team for testing and identifying erroneous solutions in the initial stages. I believe that this application facilitates and accelerates the process of designing mobile interfaces and outputs the standard process to a new modern level.”
Roman, Senior UX/UI Designer at Outline2Design

If you prefer the old school methods, when the prototypes were drawn by hand due to the lack of a variety of modern tools, the POP will become a real friend for you.

Everything is simplified to a degree: you sketch the ideas of the application in your sketchbook, take pictures and add links between buttons and layouts. After that, synchronize the prototypes with Dropbox and get a ready-made prototype.

Advantages: minimum expenses on time and resources. It is very convenient for testing paths for mobile apps.

Disadvantages: we did not find any global flaws. One thing that we would like to note is the uncomfortable drawing function inside the application. But this does not apply to the main POP function. Most likely, this is an additional feature.

Web tools for VR

A-Frame

Virtual reality evolves at the speed of light. And we could not pass by the tools that help create it. We have reviewed some open source tools.

A-Frame is a web framework from Mozilla that was created for the easy and powerful creation of VR content. It is an independent open source project, which has a big VR community. There is even an interactive course for Web VR from A-Frame. There is an HTML-based powerful entity-component framework embedded into the core of the tool.

Advantages:

  • Really powerful tool that supports most VR headsets such as Vive, Rift, Daydream, etc.
  • Cross-Platform VR: Build VR applications for Vive, Rift, Daydream, GearVR, and Cardboard with support for all respective controllers.
  • Compatible with most libraries, frameworks, and tools including React, Preact, Vue.js, d3.js, Ember.js, and jQuery.

Disadvantages: you need knowledge of HTML to work with this tool.

Hologram

Creators present this app as an all-in-one web VR creation tool. It is actually a desktop application for creating and prototyping VR for anybody. This tool contains several interfaces for multiple goals:

Scene

3D visual interface tool designed for those who know nothing about 3D and VR. It is easy to use and very intuitive. This interface helps create 3D environment as a first stage before going into coding and turning 3D scene into VR.

Coding

This is the main interface where the magic happens. Hologram creators prove that there is no need to know how to code before starting off. The language really turns out to be pretty easy to understand.

Assets

This interface allows you to quickly browse the project assets and it is integrated with Google Blocks, so it is easy to use 3D objects created by this community.

Advantages: easy to use, an enjoyable tool for VR creation. It doesn’t require much knowledge to begin.

Disadvantages: preview animation takes a long time.

As you can see, these tools are more than enough. Each of our team chooses one or the other. Our advice — choose the one that is right for you, depending on the tasks.