quick summarry
There are plenty of site builders out there that claim to be the end-all, be-all answers to your design problems, but in reality they fall short on the fronts of both design and development. Few tools deliver what they promise. This article is Nick’s review of Webflow, the next-generation tool for creating sophisticated web experiences with a focus on visual design, development, and launch.
(Please note that this is a paid advertisement.) Rapid time to market is a major consideration in today’s website development processes. The goal of most development teams is to speed up the process by which an idea is transformed into a marketable product without compromising design quality.
Teams usually employ several distinct programmes when developing a website, including one for visual design, another for prototyping, and yet a third for actual coding. By letting you design and code in tandem, Webflow makes it easier to create websites.
Typical Problems That Web Designers Face
To begin, it is crucial to comprehend the difficulties encountered by web design teams during the development of websites.
- A disconnection between visual design and coding.
Visual designers create mockups and prototypes in a visual tool (like Sketch) and then pass them off to programmers. Given that developers will need to go through yet another round of coding iterations, it will lead to more back-and-forth. - Complex interactions are challenging to programme (especially animated transitions).Hi-fidelity prototypes are a great way for designers to showcase new features, but it can be difficult for developers to replicate a prototype’s layout or special effects in code.
- Screen resolution optimization.
Your initial layouts should be mobile-friendly.
What Is Webflow?
Webflow is a visual website builder that works within your browser. To put it simply, it’s a unified environment for design that facilitates the entire process, from brainstorming to finished product.
A few key distinctions distinguish Webflow:
- There is no partition between the visual design and the code.
The markup languages HTML, CSS, and JavaScript power the content you develop in the visual editor. - You can use the same CSS class in multiple places.
Once a class has been established, it can be applied to elements that require the same style or used as a basis for a new style (base class). - Because it is a platform, it also provides hosting packages.
You can host your HTML site and connect a custom domain for a monthly fee of $12. The Webflow content management system is available for an additional $4 per month.
Building A One-Page Website Using Webflow
Creating something useful with the tool is the best way to learn about its capabilities. To test out Webflow, I’ll make a basic product page for a made-up smart speaker.
DEFINE THE STRUCTURE OF THE FUTURE PAGE
Although you can use Webflow to build your layout’s framework, you should consider using a different tool instead. Why? For the simple reason that you can’t just jump in and assume which method will work best; you need to do some experimenting first. To define the page’s framework, it’s best to use paper or another prototyping tool.
It’s also important to know exactly what it is you want to accomplish. Discover a model that comes close to what you’re after, then recreate it on paper or in your software of choice.
A high-fidelity design is not always necessary, so don’t stress if that’s not your forte. Lo-fi wireframes can be useful in many scenarios. An outline/prototype can serve as a guide as you develop your website.
The following outline is what we need for our website.
- The hero of the page, featuring the featured product alongside copy and a call to action button.
- Our product’s advantages are listed here. We’ll be employing a zigzag pattern (this layout pairs images with text sections).
- A brief section of voice commands that will help the reader get a feel for using the device.
- Include a section for contact details. Rather than just giving out an email address, we’ll provide a contact form for people to use if they have any questions or comments.
CREATE A NEW PROJECT IN WEBFLOW
When you first log into Webflow, you’ll see a humorous illustration accompanied by a single line of helpful text. It’s a perfect illustration of how a state can be left intentionally empty in order to guide users and set the tone from the get-go. The urge to select “New Project” is strong.
Webflow gives you several options to work with when you click the “New Project” button: a blank site, three common presets, and a long list of templates. Webflow allows you to create content managed by a content management system (CMS), and some of the templates on this page can help you get started.
Since our goal is to learn how to make the design ourselves, we will select “Blank Site,” even though templates are great for getting started quickly.
After initiating a new project in Webflow, we are presented with its front-end development environment. Webflow includes a video tutorial library for new users. Helpful for newcomers to Webflow, they are a great resource.
After watching the introductory videos, you’ll be brought to a blank screen with navigation options on either side. You’ll find structural and functional elements to add to your layout in the left panel. Modify the elements’ styles in the right panel.
First things first, let’s figure out how our page will be laid out. To insert new symbols or elements into the canvas, click the plus (+) sign button in the top left corner. Dragging the appropriate item onto the canvas is all that is required to insert a new element or visual block.
Symbols, unlike elements, may be foreign to some website developers. Similar to the components in other popular design tools like Figma and XD, symbols are a staple of Symbol. Symbols can be applied to any element, including children, to make them into reusable building blocks. If you update one Symbol, all of the others will automatically reflect the change. If you have a recurring element, such as a menu, that you want to feature throughout the site, a symbol is your best bet.
Webflow provides us with a few tools to define the layout’s structure:
- Sections. With the help of sections, you can divide up your page into manageable chunks. For the most part, we layout a page by conceptualising its various parts. There are many different kinds of Sections that can be used for different purposes.
- The content of a Section can be neatly divided using a grid, columns, a div block, or a container.
- Components. Some parts (like the menu bar) are already assembled for your convenience.
Let’s tack on a menu bar at the top of the page using the prefab component Navbar, which provides three menu options and room for the site’s logo.
Let’s make our menu structure reusable by turning it into a Symbol. To do this, we’ll need to navigate to “Symbols” and then “Create New Symbol.” We’re going to call it “Navigation.”
The section background is now green. The frequency with which it appears in a project is also tracked (1 instance). A menu can now be quickly added to a blank page by selecting “Navigation” from the Symbols panel. All occurrences of the Symbol will be updated uniformly whenever we make modifications to it (for example, renaming a menu item).
The next step is to outline the format of our hero’s introduction. Let’s do it with Grid. The process of making the right grid is simplified by Webflow’s powerful Grid editor, which allows you to change things like the number of columns and rows and the spacing in between each cell. It’s also possible to create a nested grid structure in Webflow, with one grid inside another. To create a hero section, we’ll nest a grid inside another; the parent grid will define the image, while the child grid will hold the Heading, body copy, and CTA button.
Let’s start putting things in their respective cells now. We’ll be making use of Heading, Paragraph, Button, and Image elements. As you drag and drop elements into the grid, they will expand to fill the available cells.
Although we could modify the text and image styles and replace the empty placeholders with real content, we’ll skip that and focus on the zig-zag structure instead.
The grid for this design will be a simple 23 with all text cells split across three rows. We have no trouble making the first cell of the master grid using a 3-row grid, but we run into trouble making the third cell using the same structure. Webflow will attempt to apply the 3-row child grid to the third element because it automatically fills in empty cells with new ones. Manual is required to modify this action. We can make the right layout after we switch the grid selection to the manual setting.
The grid sections will get the dummy context treatment, just like the hero section did. After we are finished with the visual design, we will alter the data.
We need to specify a section for voice input now. The carousel is a space-saving device. Webflow’s Slider component was designed specifically for this very purpose.
When we have everything we need, we can set up a vertical rhythm by shifting the location of each element. We must first tweak the grid spacing so that elements fit more snugly. To centre an image in a cell, simply adjust the margin and padding and use Align self.
It’s time to swap out the placeholder text for actual information. To begin including images, we should go to the Content Editor, locate the Image element, and then click on its settings cog.
Observe that in Webflow, Assets is where you’ll find all of your uploaded images. In this section, you’ll find any videos or pictures we upload.
Adding an image to the design necessitates adjusting the heading and text.
Every component of our design has its own look and feel thanks to Webflow. We can see this in action with a heading: Variables such as font colour, font, weight, spacing, and shadows are all within your control when working with this item. Now imagine this with some actual text and some fun font adjustments.
Once our hero section is polished, we can start adding content to the zig-zag pattern.
Be aware that whenever we apply a style to an element, we tag it with a Selector (a class) to let Webflow know that this particular style should be applied to this particular element. The same class can be used to apply a style to various components. For our purposes, we require an identical visual aesthetic to that of the zig-zag layout’s images, headings, descriptions, and links.
Combination classes, in which one class serves as a foundation for another’s styling options, are also possible to create in Webflow. Use of the Zig-Heading-Second class to override the Heading’s default font colour is demonstrated in the following example. By eliminating the need to develop a unique look, combo classes are a time-saver.
We’ve attached a draught of the revised layout.
If you’re having trouble getting things in order on your Webflow pages, the “guide overlay” option in the left menu will come in handy. When the aid is activated, off-grid components become visible.
Once the ziggurat design is complete, the Slider will need to be updated with details on how to use voice commands. Insert a new slide with a Heading section and modify its visual appearance.
Yes, it’s literally that easy!
At long last, we have to implement a proper online inquiry form for visitors to use. A new subheading should be added below the Slider.
In order to incorporate a form into the site, we can do so in one of two ways. To begin, Webflow’s Form Block is a dedicated web form element. There are three parts to a form built with Form Block: the submit button, the name field, and the email field. Adding a Message field to our form is a must. To make one, we need only copy the element Email Address and give it a new name. The Form Block is set to 100% width alignment by default, so it fills the entire width of its parent element. To modify the width of the form, we will use the Grid options.
As a second advantage, Webflow permits inline coding customization. In other words, if we make a form in a programme like Typeform and then copy the embed code it gives us, we can paste it into the Embed component we added to the section. Keep in mind that embeds won’t show up until after the site has been exported or published.
Once everything is in place, we can focus on making our design mobile-friendly. Around the world, mobile web traffic accounts for nearly half of all visits. Within Webflow, you can resize the browser window to preview your design at different breakpoints.
Let’s switch to the mobile view by selecting the Mobile – Portrait button.
The layout is clearly not optimised for mobile devices. However, Webflow makes it simple to tweak the design for mobile display by letting you modify the alignment of elements, the size of their fonts, and other visual attributes.
After finalising the design, we can either use Webflow’s provided hosting or export the design for use on our own web hosting (i.e., integrating it into your existing CMS). If we go with the second choice, we’ll need to hit the Publish button and choose between publishing to webflow.io or a custom domain.
Webflow will bundle your HTML, CSS, and all the assets you’ve used in your design into a single zip file if you choose to export the code. The code you export will serve as the bedrock upon which you can build your product.
Conclusion
Webflow is a great platform for creating high-quality prototypes and soliciting input from stakeholders and team members. If you give reviewers access to a working prototype, they won’t have to guess how the final product will work or look; they can see and use it for themselves.
Instead of designing products with clickable mocks in Sketch or any other prototyping tool, you’re designing products with real code, which makes the transition from prototype to finished UI much smoother. Avoid unnecessary delays by integrating your prototyping and production software. Because of Webflow, you no longer have to worry about this.
