5 Free Design Softwares to Create a Website Mockup

5 Free Design Softwares to Create a Website Mockup

You are a web designer. But you didn’t know how to create a free mockup website design? Of course, a web designer will make a sketch or prototype paper design from website design or can be known as Wireframing.

In doing wireframing or making a website mockup, Web designers must pay attention to the appearance and following customer needs. Some web designs go through the phase of the Wireframing process or make sketches or prototypes but instead directly apply information architecture and design briefs directly into the design.

The process of wireframing or creating a website mockup can be directly designed on a piece of paper or using a website mockup design software. For now, most web designers use online software to create website mockups. So what are the software and how to create a website mockup?

1. Figma

Figma is a free website mockup software that you can use to do wireframing. Figma makes it easy for web designers who want to create a website mockup online.

With Figma, you can do website design, and do layout styling easily because Figma has a simple menu, so the lay designer web can use Figma easily without any difficulties.

2. Balsamiq

Balsamiq Mockups is one of the most popular website mockup software, the main reason Balsamiq Mockups is cloud-based software, along with a desktop application that allows you to quickly and easily create website designs.

This software is often used to focus on developing and solving larger UI problems. So you can more easily develop user interfaces because the content created in Balsamiq mockups is like a hand drawing. This software focuses more on developing and solving larger UI problems, rather than website details.

3. Canva

Canva is one of the most popular design software. Canva provides a variety of designs that you can use to create a prototype web design. Canva even provides design templates according to your needs that you can edit and use.

Canva has free assets but also premium and paid assets. But don’t worry, friend, there are a lot of free assets provided by Canva. Supported by the templates provided by Canva, you can do a website mockup by looking for inspiration from existing templates.

4. Mockflow

Mockflow is a service that allows buddy buddies to create and collaborate on interactive wireframes and UI prototypes for websites and other applications.

Similar to Balsamiq, Mockflow is a cross-platform desktop software that is supported by Adobe Air, so you can build the concept of the User Interface efficiently. MockFlow also features two options, which are free and paid.

5. Mockplus

Mockplus is a tool for wireframing that provides facilities for designers to create mockups (mockups) websites, mobile applications, etc. This software comes with over 3,000 icons and 200 components that you can use to make mockups.

By using Mockplus, my friend can share projects or can be said to support many users who work on the same project. Just one click to sync projects to the cloud and the work of different designers can be combined.

6 Ways to Learn UX for Students

6 Ways to Learn UX for Students

Working in the field of user experience or UX is fun and challenging. I have been working for for almost eight months as a UX researcher. I enjoy this work and get a lot of lessons in the real world. In the first few days, I was somewhat confused in various ways, for example, making a good research plan or interviewing people I did not know. But over time, I began to get used to and confident in my work.

I have to admit, studying UX in college requires more effort. This is because the knowledge and practices in UX are not all taught in lectures.

Therefore, I want to share six ways of learning UX that can be done while still in college.

1. Read a book about UX

On the internet, articles are scattered about UX, but I prefer books for learning because the discussion is deeper. From a number of books about UX that I’ve read, I suggest the three books below to read:

The Design of Everyday Things (Author: Don Norman). This book is considered a designer book because it does introduce the fundamental principles of design. It contained most of the theories and, compared to the two books below, in my opinion, the English was heavier.

Observing User Experience (Author: Elizabeth Goodman, et al.). This book is my favourite about UX research because the discussion is broad and deep, starting from making a research plan, conducting research, analyzing, to presenting the results of the research.

UX for Lean Startups (Author: Laura Klein). I feel this book needs to be read because it explains the product design process in the agile development environment that many startups use. After reading this book, we come to know the role and activities of UX in agile development.

2. Take an online course about UX

Just like the article, online courses about UX are also pretty much found on the internet. Some online course providers have material about UX, such as Lynda, Coursera, and Udemy. I personally prefer studying at Lynda because the video content is dense and clear, and the price of the subscription is affordable. It’s different from reading a book, I can’t really watch videos long, so I don’t really like online video courses that are a lot of small talks.

Two online course playlists in Lynda about UX that I recommend:
Foundations of User Experience. Collection of online courses that discuss basic UX knowledge such as information architecture, prototyping, usability testing, and others. The online course here is really easy for beginners to understand.

UX Design Techniques. The online course in this playlist explains step-by-step the user-centered design process, starting from data analysis, creating a persona, to planning implementation. Just like the previous playlist, in my opinion, the content is quite easy to understand.

3. Join the community about UX

Community is a fun place to get information and meet people who are also passionate about UX. I like to come to meetups and chat to share about how the UX team at other startups works.

4. Internship in position about UX

An internship is an opportunity not to be missed to learn UX. Why? Because here, we can learn to apply our UX knowledge with the guidance of a supervisor. In addition, just like joining a competition, the results of work while being an intern can be our experience portfolio.

It should be noted above I wrote ‘position about UX’ because indeed, the position that has the ‘UX’ appendage can vary, for example, UX designer, UX researcher, UI / UX designer, or interaction designer. Even with the same position name, job descriptions in different companies can also be different. I suggest asking more questions during the interview to make sure the work is as expected.

These Six Steps Will Let You Design Your Website With Ease (Part 2)

These Six Steps Will Let You Design Your Website With Ease (Part 2)

Step 4: Make a Mockup for Website Design

At this point, you already have a WordPress-based website, an activated theme, and a page builder plugin that is ready to run. Now prepare paper and pencil or pen (yes, we will use the traditional method). You will sketch the appearance of the desired website. This sketching is then called mockup.

You don’t have to be that detailed to create a web design mockup. Just enter all the elements that you want to display on the website. Of course, you can add as much detail as possible to the desired element. A later mockup will act as a visual reference when you start website design on WordPress.

Make a mockup on a computer if you prefer digital sketches instead of writing pencils on paper. Unfortunately, making a mockup on a computer is not as easy as imagined. There are various processes that must be gone through and cannot be done in just a minute.

Step 5: Make and Sharpen the Design Prototype

When you are done with the web design mockup, the next step is to ‘move it’ into digital form. In other words, you will do a website design prototype.

Open a website builder that has been installed and activated using the WordPress editor. Add the elements that you want to the web page and start to arrange it as it was made in the previous mockup.

The design prototype process depends on the type of plugin installed. There will be various details there, but don’t think too much, for example, choosing the color or font size you want to use. After this prototype is finished, you even have time to manage these things.

The most important thing to do now is to complete the website prototype, which contains all the elements that you have previously planned in the mockup. With prototypes, you can find out which layouts are right and which layouts don’t need to be included and make some changes to improve website design. It is this point that you must pay close attention to.

When transitioning to a prototype, sometimes, you will be a little ‘deviated’ from the original mockup. Actually, this is a natural thing. In fact, you need a lot of time for web design, depending on how perfectionist you are. You are given various elements to customize and layout options to use. So, no need to rush.

We emphasize once again that for now, you don’t need to worry about website text and other types of content. If you want the prototype process to be done faster, please use the placeholder’s text and stock images. If the layout has been set and other things desired have been managed in accordance with the wishes, then that’s when you replace the prototype with the content you want to use.

Step 6: Check if Website Design Looks Good on Mobile Devices

You have already learned how to design a web. The final step, check whether the appearance of the design looks good and functions properly on a mobile device or not.

Lately, mobile traffic has a very significant influence and impact. For this reason, you must ensure that web design looks smooth even in low resolution. If someone opens your website via a smartphone, but a second later, only a corrupted display is found, then it is very likely that he will never come back again. This situation only results in a high bounce rate, something you should avoid.

Luckily, some WordPress page builders (including Beaver Builder) are mobile-friendly. This means that the website design that you create using the plugin will look good on a mobile device.

Even though you have used a mobile-friendly plugin, you should still check the appearance of the website on the mobile device. There are many ways or methods of checking. For example, try accessing your website through a smartphone or other mobile device. Another way to try is to use Chrome’s Dev Tools, a tool that allows you to visualize websites in various resolutions.

We recommend trying all the resolution options provided. This way, you can know in what resolution your web design is not performing well. If there are problems or errors, return to the prototype and use the website builder to change or fix it. If there are no more errors, the website is ready to be online.


To attract high traffic, you must create an attractive and professional website design. With slick web design, people will be more comfortable reading the content that you provide. Not infrequently, the conversion will go up.

You don’t need to be a developer to make a beautiful appearance. Just search for as much information as possible about how to design the web. Many tutorials (including this article) convey the steps and ways to design a website in great detail. Practice by following the steps in the guide. In a few moments, you can achieve a website with an attractive design.

Do you have a question about how to design a web? Please write the question in the comments column below!

These Six Steps Will Let You Design Your Website With Ease (Part 1)

These Six Steps Will Let You Design Your Website With Ease (Part 1)

There are two important things that make your website a success and are able to get high amounts of traffic: quality content and unique and attractive designs. Neat and cluttered website design affects the chance of content being read by site visitors. Surely they will not continue to read the content of the web design that you make ‘damage’ the eye. If you have this, the number of visitors who access your website will be reduced. Therefore, you must be careful in managing the layout of the website. Look for as much information as possible about how to design the web to help you find the right style.

Step 1: Finding the Right and Reliable Web Hosting

Before discussing how to design a website further, there are the most important things that should not be missed. Look for quality web hosting to make your website online.

Our habit is to choose something based on price. Which is the cheapest, that’s what has ‘lots of fans,’ and this also applies when we choose to host. Unfortunately, this action is wrong. A web hosting provider may not necessarily provide the same services or features as a web hosting provider B. So, we recommend that you do quick research to find the right web hosting to create an online website.

Here are some things you should consider when choosing a hosting provider:

Has a fast response to customer service.

It offers a high level of performance for every website created on its hosting service.
It provides additional features to make it easier for you to create a website, for example, automatic backups.
It has a guide, articles, and a knowledge base that contains technical questions and answers so you can quickly find the information you need.

Compatible with the platform that you will use to create a website.
Most of the web hosting providers claim to have all the criteria above. You are free to choose and decide which hosting provider to use. Also, read the reviews written by users both in the blog and forum community.

If you buy a Business and Premium hosting package, then immediately, you will get a free domain. The conditions are easy, buy one of these hosting packages with a duration of 12 months (or multiples). Don’t forget to complete the process until checkout, yes!

Step 2: Choosing a Platform to Create a Website

After getting the desired hosting service, the next step is to choose a platform to create a website. Actually, you can create a website by implementing coding. However, this method sounds difficult for beginners. Website creation methods by applying a variety of coding or programming languages ​​are only for experienced developers.

If you followed our blog from the start, surely you already understand that we often mention Content Management Systems (CMS) as one of the best platforms for creating and online websites. This tool allows you to create websites with a professional appearance and manages a number of content. It sounds complicated, but this tool is really beginner-friendly alias easy to use by beginners in the field of website development.

This platform is the ‘home’ for more than 30% of websites. It is truly proof that can claim that WordPress will help you in achieving success online. In addition to offering ease of use, WordPress also provides a number of customization options, thanks to the plugin system and themes.

This platform is more complex and complicated than WordPress. However, this is all covered by the default Search Engine Optimization (SEO) feature and security settings that are arguably quite capable. You can even manage various types of content in Joomla, something that can’t be run on WordPress unless you have to do a number of customization processes.

Another tool that you can use for web design is a website builder. The website builder has been equipped with a drag-and-drop visual builder and also various elements that can be directly installed and activated:

Although you have to struggle with various customizations, website builder makes it easy for you to create and online websites in a short time. If you are interested in using web builder tools, maybe you can look at the packages we offer.

WordPress is the most widely used platform for creating websites and offers a variety of tools for website design. For this reason, we use WordPress as a platform in this tutorial.

Step 3: Install the Tools Needed

After installing WordPress, you are also required to activate the additional tools needed for web design. First and foremost, you need a theme that matches the style of the website that was previously conceptualized.

WordPress has thousands of themes, so you won’t run out of choices. If this is your first time using WordPress, we recommend that you choose a free theme to familiarize yourself with this platform.

So that you don’t ‘get lost’ and finally install the wrong theme, you should first read various reviews or reviews from users and check whether the theme is always updated. Don’t choose a theme that reaps too many negative reviews and is completely or rarely updated. Insisting on using a theme that doesn’t meet the criteria will only give you a headache. If you have found the right theme, immediately install and activate it.

Also install the WordPress page builder plugin. With this plugin, you can more easily design a website. WordPress does offer ease of use, but in terms of how to design the web, expertise and creativity are needed. Installing and activating a website builder plugin gives you the opportunity to modify the appearance of the web.

What is UI and UX?

What is UI and UX?

UI and UX. What do ordinary people think about it? Is it the name of any food? Or the name of a planet in space?
First, let’s try to understand the length of UI and UX. UI is the User Interface, while UX is the User Experience. Both relate to the appearance of a website or the appearance of an application.

From its length, we can know that the two are different things. Before discussing UI and UX, let’s first understand the HCI Concept. HCI is a Human-Computer Interaction. This relates to UI or UX Design.

What we do with devices, computers, or laptops so far is part of HCI. When you move the mouse, press the keyboard, move the smartphone screen, gesture, and you can get full control of the device, which is called interaction.

Learning UI / UX Design, we also need to know the interaction of these two things. USER & DEVICE. We have to design how apps, web, and other platforms can be more easily used by users/humans from the interface that is served.

User Interface (UI)

User Interface Design or the Indonesian language User Interface Design is:
Interface design for machines and software, such as computers, household appliances, mobile devices, and other electronic devices, with a focus on maximizing user experience. For simplicity, UI Design is how a website or application you make looks like. People used to call it the appearance or design of a website. You can get design inspiration from behance.com, dribbble.com, or webdesignserved.com.

User Experience (UX)

User Experience Design, or commonly called UX Design, are:
The process of increasing user satisfaction (application users, website visitors) in increasing the usability and pleasure provided in interactions between users and products.

In simple language, UX Design is the process of making a website or application that you make easy to use and not confusing when used by users.

You can learn the basics of User Experience Design on the uxapprentice.com site (in English). But if you want more advanced, you can try to take lessons or any workshop around your city.

Many people misrepresent that UI is the same as UX, even though the two things are different but connected to each other. And the task of the UI / UX Designer itself does not mean that it can only design an app or website that is cool and nice, but how to make the application look simple and easy for people to use in general.

Recent Posts


Contact Us

Social Sharing

Follow by Email


Get new posts by email