- contact@sourceone.io
- +61 401-713-724
Designing on WordPress vs designing on Figma
Latest News
Recent Posts
Designing on WordPress vs designing on Figma
Websites have transformed into a product. Like most products they need to be created quickly and efficiently, all the while maintaining the highest quality in terms of the user interface and user experience (UI/UX). The current rustle and bustle environment makes the process of prototyping a web app extremely important.
Criteria for Comparisions
A software is compared on its capabilities as a prototyping tool, development path, and the ability to collaborate remotely between designers.
The following is the explanation for the terms stated in the criteria.
1. Prototyping Tool
As the word prototyping suggests, this is the initial phase of either your WordPress design or Figma wireframe. As is with prototyping in any industry, it should enable the designer to quickly whip up a basic look of their product. Allowing them to interact with it and decide a development path for the product.
2. Development Path
These are the steps required to build a finalized product. Ideally, there should be as few steps as possible towards the final product. This saves time, labor, and ultimately cost for pushing out anything new into the Web-Ecosystem. The tools used to design a website are what decide the development path.
No one wants to use anything that is extremely complicated and has a lot of steps involved just to create a prototype, let alone a final website. Even if that software is the most capable on the market. The time and effort just make it an inefficient tool to use
3. Remote Collaboration
With remote work and collaboration becoming a norm, design software must have the ability to allow several users to work and discuss a design in real-time. If one user creates an approved edit, it should automatically change the design. Rather than the old way of manually uploading every change.
All three criteria are dependent on each other and cannot be compared in isolation for either Figma wireframes or WordPress designs.
Prototyping on WordPress
WordPress was not developed as a website prototyping tool. But that does not mean you cannot use it to begin the development of your website. Since the basic version is free for everyone, you only need to do the following
- Create a free account on WordPress. Each free account can only create and maintain 5 sites. So, if you already have 5 websites on an account, make a new one.
- Open Block editor. This will enable you to make quick changes to the basic layout of your website. After all, that is the requirement of a prototype.
- Add any initial content as needed.
That is about all you need for a live prototype. Because this will become a live website, allowing you to visualize it from your future users’ perspective.
Even though WordPress technically enables rapid initial modeling, it does have limitations. Using a free account means you do not have access to the huge suite of plugins offered. WordPress does not allow rapid designing of UI, unlike the counterpart Figma.
Prototyping on Figma
Unlike WordPress, Figma is a dedicated rapid prototyping tool. That means you can quickly create wireframes for your pending website. Its suite of tools in this aspect is far greater. Wireframes made on Figma can be developed with greater dexterity than any WordPress Design.
The steps required to create a prototype are not as straightforward as that of a WordPress Design but, that is because you have far greater customizability in Figma. Its interactive and clickable models allow designers to connect UI elements in any way they like. Simulating the feel of their final product or at least allowing them to feel it out during the initial phases
Creating a simulation of your product using Figma is as simple as:
- Upload your UI elements onto your team or personal project
- Drag and drop them onto your Artboards in any position you like
- Create interactive relations between the different UI elements by simply right-clicking on them.
A prototype on Figma is far more complex than anything that you can whip up in WordPress. With the notable exception that the latter has a live testing feature, while Figma has no such thing.
Development Path note: Both tools alone will not enable you to design a high-quality website or web app.
Development Path on WordPress
A staggering one-third of the websites on the internet have been made using WordPress Design elements alone. One can understand why that is the case by just peeking at the suite of tools, plugins, themes, and community support available when creating a website via WordPress.
A majority of the WordPress tools are not available for free. Necessitating the need to buy at least their Premium package ($8/month billed annually). If your website requires premade plugins then you need to pay for their business package ($25/month billed annually).
Placing costs aside, creating bespoke UI elements for your website still require other software that can develop vector graphic components.
Your workflow using WordPress as your primary design element will be as such:
Design UI elements > upload and integrate onto WordPress > Create Live website > Record Ux data and feedback > repeat.
This is a bit cumbersome because you must ensure your site is live every time to get the correct Ux feedback or any such data. A pro of this approach is that you are iterating on your website itself. So, what you see is exactly what you get. No need to worry about any incompatibility issues
Development Path on Figma
Since Figma is only a prototyping tool (albeit a very capable one), you need to use it in conjunction with a platform that can understand HTML or integrate it into WordPress. But unlike a WordPress design, the development path is much shorter. That is because you can design quite a lot of your UI elements and test all your UX features on Figma.
Your workflow using Figma as your primary design element will be as such:
Design UI elements > rapidly prototype all UX elements > Upload finalized version on platforms such as WordPress or bespoke coding using HTML
Figma basic is free to use and has a lot of functionality. But if you want more than 2 people to work on a project or need to save more than 3 projects, you must buy Figma premium ($18/month billed monthly).
The reason the definitive version can be immediately made into a website, without any back and forth is that Figma handles all aspects of Ux within its own environment. Since it can simulate how your website will actually function on the internet. This is enabled through its ability to allow elements and sprites to interact with each other.
Remote Collaboration on WordPress
To enhance your WordPress design, the foundation has released a beta version of the software called P2. It is a free-to-use social medium of sorts. It allows work environments to collaborate and comment with each other.
P2 is to a social media site as WordPress is to a blogging website. You can create it however you want. If the requirement is completely work-related then you can design on P2 to cater to those needs. Although it is still in its beta version. P2 has a lot of potential to enhance collaborative WordPress design. At the moment it does not have such a thing. So, you will not be able to live-collaborate on designs and work on them simultaneously. For now, you are stuck with the cyclical iterate-upload process.
Remote Collaboration on Figma
This is Figma’s strong point. Where it knocks out most other prototyping software. You can live-collaborate on a design, removing the time-consuming iterate and re-uploading process altogether.
If any of your team members upload a UI element or save a UX flow, it is automatically made available for everyone on the team. Saving time and the headache of writing emails to constantly ask and download updates. Basically, any changes that you have made will be updated and everyone on your team will be able to see them.
To stay ahead of the game Figma also launched its creative collaboration space called FigJam. This is akin to the entire design team sitting around a table and hashing out ideas on a whiteboard. Allowing your team to move more of their workflow onto Figma, decreasing its complexity and saving your team’s time.
Verdict
Whether you use WordPress Design tools and their associated workflow or Figma, understand that these tools in isolation will not provide the full software solution you require to build a high-quality website.
If you are solely just a UI/Ux designer then it is recommended you use Figma. It will handle the sheer majority of your workload quite easily. But if you are a Freelancer who also designs and uploads websites for your clients, then use both WordPress and Figma. That will provide a near full design solution for you. Saving you time and smoothing out your workflow
Share this post:
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on google
Google+
Web Development Agency
In the times of today, it is nearly impossible to even imagine that a company or business can survive and compete without an online presence in the market.
sourceone
August 6, 2021
How to Become a Successful Full Stack Developer
The development of a software application can be broken down into 2 parts. The two areas of expertise are known as front-end and back-end development.
sourceone
September 15, 2021
How To Setup A WordPress Development Environment?
Are you working on WordPress development frequently? 5 Steps to Setup a WordPress Development Environment
sourceone
August 13, 2021
Connect with us to find out what true value added services are.
contact@sourceone.io
Headquarters – Ho Chi Minh city, Vietnam
(+84) 353 197 427
Brand – Sydney, Australia
(+61) 401 713 724
About SourceOne
Privacy
Terms of Use
Mobile application
Website and API Services
UI/UX Design
Next – Gen Technology
NEWSLETTER
Join us for get latest updates
