.png)
In the previous blog post we talked all about you can prepare for a new website. Customer research, choosing a design, creating mockups and embracing friction are all part of this process.
In this post we are going to give you our tips and tricks on how you can make the actual website building a success! Let's take a look.
How To Decide on a Webflow Template
After the mockup, you are going to have a beautiful design and good layout in mind. The only question remaining is: "how are we going to translate that into reality?"
We had already settled on Webflow, so it came down to their options: a custom build or a template.
Top tip: know the limitations of your team.
For us this meant acknowledging that even though our VP of design Emile knows how to code and how to translate designs to a functioning website, he is only one person. It would take him too long and be too labour intensive to create a custom design. On the other side, paying an agency was outside out budget, so we went with a good template.
How to find a template that will work for you:
- Look at templates that suit your company type (E.g., we picked a SaaS template)
- Look at the building and content blocks (E.g. e-commerce stores need different things than a SaaS business)
- Look at the customisability of the template
- Compare your mockups to the template and find similarities and differences. (This makes the whole style-matching process so much quicker)
- Go for it!
If you have trouble deciding or visualising how it is going to look, use the Showcase-area for inspiration.
We picked the template we are currently using with these criteria in mind:
- No need to build custom content blocks (so a template that had it all)
- Easy to customise the existing blocks
- Not limits when it comes to styling
And we might be biased, but we love our website we built on this template!
How To Build a Page in Webflow
Here is why the mockups are important!
First, you need to start with the page you have the clearest vision of, which is usually the homepage.
Top tip by Emile: start filling in the template before you start tinkering with the structure.
When you ask for feedback, most people tend to notice the fonts, the colours and the content before the structure. Getting those things even remotely looking like they will in the end, makes feedback rounds go way faster.
For example, when Emile created the homepage in Webflow, the team got stuck on the fonts. Not much else got productively done. By the next meeting he had filled the page up so we could get a feel as to what it would look like. Things went so much better after that!
It is going to take a couple of feedback rounds to get your first page to look how you want to. And here we give the save advice as we did last blog post: don't be afraid of friction. Embrace the dialogue and focus on constructive criticism.
Once you get the homepage in a shape you like, you can get started on the other pages.
When you start creating new pages, create an easy to navigate structure in your editor from the start. This way you don't waste time trying to find pages when your website grows.
How to Use the Elements in Webflow
The reusable elements are a great feature in Webflow, but they can become annoying fast. If you overdo them. You might run into the problem that you want to change it up and you can't without messing it up in a lot of other places.
In other words, you might plan to reuse a component on a bunch of pages, but as you go along, you are likely to reconsider that.
The elements are all connected so if you change something on one page, it changes on all pages. This also means that it becomes quite a limitation on your creativity!
Some examples of a good place to use elements are:
- your header
- your footer
- buttons
- CTA's
Of course you can use elements more if it suits your needs, but be careful with them!
To Wrap It Up
When you start building your website in Webflow, don't feel like you need to do everything at once.
- Start with one page
- Get the visual look (almost ready) before you fix the structure
- Give honest feedback
- Create an easy to navigate page structure
- Use elements sparsely
You're now ready to build beautiful Webflow websites! And if you're still looking for new projects to take on, our friends at Jooble have a list of front-end developer jobs you can check out.
In the next part, we are diving deep into SEO, website optimisation and more, so stay tuned!
