DEV Community

Cover image for Web design does not need Paid Software
Rene Zorzi
Rene Zorzi

Posted on

Web design does not need Paid Software

Introduction

In this post I am going to discuss what are some options for designing Wireframes/UIs using free tools for self-growth and knowledge improvement. Before proceeding, I would like to note that not all software in here is free for commercial purposes, but for individualistic improvements it is a great start.

In order to proceed, let us make some considerations:

  • tools have to be free or freemium providing a huge amount of features or some extended storage in the platform or website;
  • there has to be no installation process
  • the output wireframe/UI can be downloaded and edited easily

Now that we have setup some basic consideration to proceed on how to assess the tools, I will categorize the post in Online tools, and offline tools.

ONLINE TOOLS

In this category I am going to share the tools that I see as powerful for creating designs on the web. There are many wireframe tools, although none of them are highly customizable or very restrictive.

Canva.com

Canva is definitely one of the biggest players in the online design for website or for other type of formats. In one of my recent videos on Youtube I made a point showcasing that it is possible to design wireframes in Canva by using properties such as shapes and grouping items for the scenario. Here I share my video again:

If you have watched my video, you may see that it is possible to create great wireframes for web design related material. You can also use multiple pages in canva allowing to both do wireframes as well as convert to a design interface with styled items and portions of the site.

An online paint website

In this type of website I am referring to all cloud hostings like google drawings or its alternatives for designing wireframes and UI design. These tools allow users to create great wireframes, unfortunately for ui designs is very bad. Either normally users need to install on their account some stock photos to use for templates or use urls and embed them.

Secondly depending on the tool, there may be some restrictions on file size, cloud size and projects number.
Many website outweigh the benefits from the disadvantages, therefore I added them on this list

OFFLINE TOOLS

There are many offline tool available by default, here are some suggestions by categories.

A writing software

Some writing software allow to write and create sketches from within the application. this is great for wireframes and documenting the purpose or goal of the interface or annotate the components.

An offline Sketching tool

This tools are similar to the online versions such as the Paint, paint3D on Windows or Notes app in macOS/iOS. They are downloaded by default in the operating systems since they are developed by the operating systems companies and have powerful drawing features. For designing the website this is though a limitation and it is probably best to invest into an online tool.

Top comments (0)