Wirementor? If you build websites, then you know that prototyping fast is crucial when it comes to completing your projects.
Now instead of going the traditional way, I decided to shorten the process and just do wireframes and prototype with Elementor Pro.
So I looked for a dedicated tool. But there was none.
So… I built one.
Wirementor… Why?hello, I’m your host Kaycinho, I’m a digital alchemist, and today I will show you why it makes more sense to wireframe and prototype with Elementor Pro, if the final website is built with Elementor Pro anyway. But I didn’t always think like that, but that’s because, with experience I often do the wireframes mentally, but in some cases, that’s not enough. I will talk about the tool later on in this video, and by the way you can find the purchase and demo links in the description below, but right now, let me show you where the problem lies, and which solution I came up with.
Wirementor: The ContextNow, first things first. What’s the difference between wireframes, mockups and prototypes, and why do you need it anyway? If this is the first time you hear about it, it may sound confusing but it’s actually very simple. The problem comes from the fact that people sometimes interchange the words wireframes, mockups and prototypes. What’s more, sometimes, the lines are actually blurred between those. So let’s take a look at each of these.
WireframesWireframes is the first step in the design process. They are basic layouts. They are low-fidelity representations of a final layout. Wireframes consist of structural guidelines and do not focus on design at this stage. Basically, wireframes are often sketched with pen and paper and it can actually work really well that way. That’s a matter of personal taste, but as you’ve probably guessed it, I prefer digital wireframes, but I can totally understand that in some cases, pen and paper are the way to go.
MockupsMockups are static layouts, usually built in Photoshop or similar software. So basically, once the wireframes are approved, then comes the design phase. And in that phase, the wireframes will be used as structural guidelines and the elements will be sculpted to form a design.
PrototypeThink of prototypes as functional demos. And by that I mean, when you click on a button, something actually happens. Transitions are visible as well as interactions. For example, hovering over a button in desktop mode should reveal the hover color. Now prototypes are not websites, but they simulate the final website. Prototype can be created with great tools such as Figma, Sketch and Invision App just to name a few
Why would you to go through that process?Well, when creating a 4 pages WordPress website, it can definitely seem overkill to go through all of these phases. You just need 4 pages right? And with the amazing amount of free themes and layouts for page builders, you can import full designs in just a few clicks and take it from there. If the story ended here, it would make total sense to skip wireframes, mockups and prototypes. But as you may have guessed, the story does not end here. So let me give you a few reasons why some kind of plan is crucial:
1. BlueprintWould you consider building a house without any kind of plan? Nope, right? Well in some way, building a website is kind of similar. If you don’t plan ahead, you may find yourself with issues that will double, triple, quadruple or even more, the time spent finishing the website. For example, even for a four pages websites, without a plan, I bet you’ll start diving into design right away. But there are so many design possibilities and directions, even with a defined brand identity, that you will probably waste a lot of time. So even if you just do the wireframes with pen and paper, that will help you tremendously!
2. Project ManagementLet’s say you start building a website for yourself, then you move onto selling small four pages websites for very small businesses, and one day you get offered to re-design a big website. We’re talking sixty to one hundred pages, with complex forms and so on. Well, if you are not used to working with wireframes, mockups and prototypes, that dream project may turn into a nightmare, in terms of project management, time waste and finances. Because if you charged a certain amount but end up spending 10 times the amount of time you initially thought you’d need, then you’re in big trouble.
3. Custom = moreIf you want to charge more money for the websites you create, you need to deliver more. And just downloading free layouts, or even popular premium ones ain’t gonna cut it for some clients. Initially clients do not typically care as long as it looks good. But when they see that their website seems to be the exact same replica of a competitor’s website, trust me: they won’t be happy.
I actually landed a new client just like that, because he was so angry at the web design studio he used to work with because basically they used a popular design that many other companies were also using.So if you want to stand out from the crowd, custom design is a good direction to take.
4. Outsourcing / collaborationLet’s say you decide to outsource part of the project to another web professional. More than likely they will expect at least the wireframes, in case they take care of the design, or even the mockups or prototypes, if they only take care of back-end development. And I could go on… So, as you can see, there must be some kind of preparation and customization ahead of building a website. But if it was all working well, I wouldn’t be making this video, and I would not have built a tool to address the issues with the current process. Right?
So, what’s the problem then?
1. Learning new toolsAs mentioned, there are great tools out there to create wireframes, mockups and prototypes. So this is a possible stack:
- for wireframes: Figma. Figma is an amazing tool and I’ve created beautiful wireframes with it.
- for mockups, Photoshop or Affinity Photo.
- for prototypes: Sketch, Adobe XD or Invision.
2. It’s not that practicalOnce you’ve learned to use the software, now you need to take into account the responsiveness of the website you’re going to create. So let’s say you’re preparing a 10 pages websites, so actually you’ll need
- 30 wireframes (10 for desktop, 10 for tablet, and 10 for mobile)
- 30 mockups and a responsive prototype.
- And each times there is a revision on a page, you will need to edit 3 wireframes, 3 mockups and the prototype.
3. Waste of precious timeLet’s take a look at the process. You know you will create the final website with Elementor.
- so you start doing the wireframes with pen and paper or a tool like Figma.
- once you’ve done that you go through revisions
- once the wireframes are approved, you move onto creating the design mockups with Photoshop.
- another couple round of revisions at best
- you export your mockups image assets, and start working with Figma, Sketch, Adobe XD or Invision
- a few rounds of revisions later, you finally can start building your website in Elementor Pro.
- you can export and import some of the css but for the rest, you’re just going to have to start building from scratch, with the final approved mockups as reference
So… What’s the solution?After realizing that this process made no sense, it all became clear to me. Why not wireframing, designing and prototyping straight in Elementor Pro? So I decided to go look for a UI Kit for Elementor, but I couldn’t find any. Well, to be fair, I did find some, but they were actually designed layouts, which is not what I was looking for. What I was looking for was a way to use Elementor Pro to create neutral wireframes. Then once approved, I could move straight to design inside of a fully functional Elementor website prototype.
So as mentioned, I went to look for such a tool, but to my surprise, there wasn’t any. So … I built one.
Wirementor!Let me introduce WireMentor, which is basically a Wireframing and Prototyping Kit for Elementor Pro that I created to help make the whole process much faster. At the time of recording this writing this post, Wirementor packs around 430 pre-styled items:
- 49 pre-styled widgets with hundreds of variations
- 17 pre-styled blocks with light / dark variations
- 26 pre-styled layouts and more will be added monthly
I did not build a tool just to build one, I built it because I needed it, and I couldn’t find it. So my hope is that it can help some of you out there.
Wirementor BenefitsSo here are the benefits of using WireMentor if you know the site will be built with Elementor Pro :
1. One tool onlyYou need to know only one tool: Elementor Pro. Chances are you already know it, and if you don’t, it’s super intuitive. There are countless tutorials on the web and especially on Youtube, and many on my channel alone.
2. It’s practicalNo need to use 3 different softwares. You only use Elementor Pro.
- You start using the pre-styled Elements, Blocks and Layouts and create the digital wireframes.
- Each revision is done in straight in Elementor. My advice is to clone the website for each revision or at least make a backup. That way, you can always go back if needs be.
- Once the wireframes are approved, no need to start from scratch. Clone the latest revision and start designing straight in Elementor.
3. A precious time saverIt’s much more effective because at this stage, you don’t have to guess where to place things. You can focus on the design, and cherry on the cake: all the structure and responsiveness is already done! And did I mention there is a one page layout, ready with the scrolling navigation? In a previous post (& video), I showed you how to create a one page website from scratch. And that took a long time! Now bear in mind, that all the pre-thinking process had already been done. I’m talking about:
- the main content guidelines
- the order of the sections
- the search and optimization of the images
- the definition of the brand identity
Wirementor: what’s the big deal?Now, you may think: what’s the big deal? Just a bunch of pre-styled widgets, sections and layouts right? Not quite:
- on top of the widgets, sections and layouts, you also get website headers among which the hybrid headers with fullscreen navigation, which by the way I teach you how to do for free in one of my most popular videos at the time of recording this one
- the Elements (which are pre-styled widgets) and the Blocks (which are pre-styled sections) often come in variations with light and dark backgrounds so instead of the 92 items announced, you actually get around 430 pre-styled items as of today
- WireMentor will grow with Elementor: for example when new widgets or functionalities are added to Elementor Pro. New blocks and layouts will also be added periodically
- I spent countless hours planning, desiging, and refining the hundreds of items for desktop, tablet and mobile modes, to make sure it saves you a lot of time
So – Wirementor in a nutshell:
- huge amounts of time saved between the built-in responsiveness, taking away the guesswork, and the phased process, just to name a few
- working by phases allows for better time management, and thus more profit, but it comes with an added benefit:”Instead of asking 50% upfront and 50% at the completion of the project, for a website I usually ask 50% upfront, then 30% to 40% when the prototype is first shown, and the remaining 10% to 20% when the project is complete.“.This allows for more cashflow whether or not you receive the final content in time
- if you are not a designer, WireMentor can also help you, whether you just want a good starting point, or whether you plan to outsource the design phase