As is well known, many founders and young companies create their websites themselves and use one of the website building tools that are now available like sand by the sea. But how does the creation of a really impressive website work? While many companies start designing wildly, a sophisticated process goes much deeper.
As is well known, there are many roads to Rome, so our 7-step process is definitely not set in stone. It is important to respond flexibly to the current state of your own business and to start where it feels right.
To ensure that the next corporate website is a complete success, we have summarized the most important steps for creating it in a guide:
Step 1: Site map and communication
In the first phase, it is defined how and what is being communicated. How do you approach customers? Who are your own customers actually? What is the positioning of your own business? Which pages should there be and why?
It is advisable not to create your own website for your own ideas, but to adapt it precisely to the customer journey of potential customers. For example, a widespread fallacy is that users often come to the website via the homepage and start their visit from there. However, it is much more likely that a well-formulated blog article will be found and that the customer journey on the website will take place via the company blog.
Positioning plays a major (or even the biggest) role in communication. The advantages or pain points of ideal customers should be addressed directly. This increases trust in a business and customers feel that they are being picked up where they are at the moment.
Derived from positioning and customer journey, the site map of a website can be defined. Simply put, the site map is an overview of all sub-pages and the rough content that should be shown on these pages.
Step 2: Wireframing
Based on the specified site map and the positioning from step 1, a wireframing is created. Basically a wireframe of the website. But digitally, of course. Wireframing is used to visualize the layouts of the website and to display where images/illustrations/graphics and where texts are needed. Wireframing defines in even more detail how users are guided through the website and is therefore essential for UX (user experience).
Step 3: Copywriting
There is a lot of debate as to whether the wireframing should be created first or the copy of the website first. We support the statement that the website (with visual content) should support the copy. However, in most projects that we manage, we observe that a rough framework of the website helps immensely to get to the point with the copy. It might end up with a chicken and egg problem. It is best to start with the step that is currently easier for your own team to complete and adapt the other step to the content.
Step 4: Web Design
Only in step 4 is it really about the final design of the website. Mostly in Figma, the wireframing filled with copy is now “cast in color.” Based on the corporate identity of the company (colors, fonts, etc.), the final design is created. The complexity of the layout must always be adapted to the end users. For example, if your own target group is older, more classic layouts that require just a few animations are recommended. For a younger target group, layouts are welcome to go out of line as long as they remain functional. After this phase, the final design of the website is ready.
Step 5: Webflow Development
Once the design has been completed and Webflow has been chosen as the CMS, the static design is now a functional website. With Webflow, layouts from Figma can be transferred to the web quickly and without loss of design.
To ensure that the website remains scalable, a CSS naming system such as Clients First by Finsweet. As a result, the code remains clear, small and all classes remain understandable even after long development breaks. The name comes from the simple naming of classes that are designed to be understood even by inexperienced users.
Once the final layout is on the web and all stylings have been set, it is time for animations. In Webflow, you can create both CSS animations (mostly used for hovers as buttons and similar aspects) and complex iX2 animations. The seamless integration into the Webflow Designer creates dynamic websites. Here, too, it is always important to tailor the level of animations to the end users. In addition, fewer animations are always preferable, as these can result in slower website loading times.
Responsiveness is the last step in Webflow development. At this point, the website is ready for desktop screens, but most users no longer visit websites with computers, but with mobile devices. In order not to immediately lose these users again, websites can be optimized to over 1,000 screen sizes with Webflow. For this purpose, so-called breakpoints are used, which allow individual styles for desktops, tablets and smartphones.
Step 6: Launch and Optimize
In the penultimate phase, the website is fine-tuned. SEO and page speed aspects are particularly important here. To ensure that the website runs like a 1 after launch and is also loved by Google, the following steps are recommended:
- Clean up animations
- Clean up CSS classes
- Favicon and web clip to set
- Assign alt tags to all images
- Compress all images on webp
- Disable subdomain indexing
- To have the site map created automatically
- Set meta titles and descriptions for all pages
- to compress HTML, CSS and JS in the site settings
If you want to know in detail how to implement the individual steps, you can find a detailed overview here: How to optimize your Webflow website before launch.
After the final optimization of the website, the only thing left is the launch. To do this, connect your custom domain to your website in the Site Settings (a hosting plan is required for this) and press “Publish”. A best practice is to test the website again on various devices and browsers after the launch. This allows you to quickly identify overlooked bugs and repair them easily.
Step 7: Webflow Enablement
After the launch, most projects end and the website is a bit idle afterwards. To prevent this from happening, our projects always end with an enablement phase. In this phase, we get teams and solopreneurs fit with Webflow. Video calls and dedicated loom tutorials provide the knowledge that is really necessary. After the enablement phase, teams can manage the website themselves and in particular:
- Publish, edit and delete blog posts
- use the Webflow editor
- Correcting and changing texts
- Exchange pictures
- Change links
In this way, we ensure that websites are kept up to date and for our customers, this means not always picking up the phone to call us for changes. A win-win for both sides.