Webflow is the tool par excellence to create a tailor-made web page. Indeed, Webflow boasts of being able to recreate any web design with pixel ready unlike its competitors Wordpress, Wix, Shopify which are based on a template customization system.
.gif)
It is then better to prepare in advance This design stage on a separate software. It would be a mistake to start creating a website without knowing in advance what you include (take a look at our processes for creating a website). For this first prototype stage, at Elias, we use 2 professional software who no longer need to prove themselves.
Adobe xd (from the Adobe suite) which is very easy to use and which specializes in creating interfaces. There is also Figma, which has browser access And who is a collaborative prototype tool (and which also has numerous plugins). Whether you are working on one or the other, the steps will be similar.
Be aware (if that's what you're looking for) that there are no simple online converters to switch from Figma to Webflow. The two software being way too complex and requiring a lot too many settings.
First of all, you will have to ask the webdesigner for a clean and finished model before considering starting with the creation of your web solution (even if it remains static). To do this, you do not necessarily needIt is available in desktop and mobile (even if it is preferable). Another + is also the addition of a prototyping part, just to agree with the developer on the animations and redirections to be implemented in the future website.
Once your design is complete, you will need to export it. For this, the developer will need visuals of each interface. It will also need to have in a separate file each of the images that can be seen in the Model (he will then have to implement them in Webflow, it is not possible to just “copy and paste” these elements).
Watch out for weight and size of images when you export them. You will have to find the right compromise so that they are of high quality, without slowing down the loading time of your website. We recommend To prefer jpg when possible (image without transparent background). If they are small icons or illustrations you can use a vector.SVG format. Finally, if you have no choice, you will use The extension.png which is often quite heavy.
You will also remember to provide the previews in this asset list Webclip and Favicon (in the right format 32x32px and 256x256px for the preview of the icon in the browser), the font files, the hamburger menu icon for mobile.
Here is a complete article that explains Why choose Webflow if you are not yet convinced.
From this stage on, you are supposed to no longer need the UI/UX designers (he can come and test the pages at the end of the project). So you will be able to start the development of your site on Webflow. Note that your designer should not start integrating the model right away; you may waste time. Better is good set up and structure your entire site before you start.
The Webflow expert (s) will have to start by creating a Styleguide page, where you can design your default style attributes (like titles, buttons & links, paragraphs, colors used etc.). After that, you can add all your assets. You can also start setting up the site by indicating the title of the project, by customizing the test url, by adding favicons, Webclips, and fonts.
It will only be after having done all these steps that you can really start the development of your site on Webflow. We recommend that you, if you are not comfortable with the Web design (that you think is complex), to think carefully about indentation and to the structure of the elements before you start customizing them.
Also, be sure to always use the good classes and to use Combo classes so as not to waste too much time. You can also use a class system to Similar animations. The web convention wants all of your classes to be written in English and that they use logical names.
Indenting your elements should also be simple: each section contains a container with a “container” class. This will allow you to more easily adjust the responsive of your site later on. For this part, be sure to respect the hierarchy of formats: start with desktop, then iPad, then telephone. Do the same with the biggest screens.
Webdesign is not everything: creating a site to create a site makes no sense, there is always a purpose to be reached behind a web project. To achieve this project, you will need of an efficient website.
You will be able to offer him visibility by properly setting up the SEO of your site (Google natural referencing). You will be careful with the choices Headings tags : each page contains a single H1 then several H2, H3 etc... You will not forget to add the meta data in the parameters of each page. Finally, it will be necessary to indicate to the search engines The meaning of each of your images by adding an alternative tag.
Be sure to test your site several times and to respect the RGPD rules in force.
And then all you have to do is put your site online.
Today it is more and more difficult to create the “wow” effect on the user. Here it is some techniques to attract the attention of your users as soon as they arrive on your Webflow site.
This will be directly linked to your branding (yes, web design is not everything). Do not hesitate to include in your brand image strategy some 2022 branding trends.
