The first thing that you should do if you have a topic in mind for a web-based visual essay is compile a list of websites that you’d like to emulate in some way and have serve as inspirations for your project. Having these websites in the back of your mind and beginning to outline the content of your website like you would a paper — main idea, supporting media, conclusion — can help you build a preliminary vision for your visual essay as you move forward in learning the tools you need to realize this vision.
Before you go any further in the process of building your website, it’s important that you learn about Webflow’s components. What better way to gain proficiency with Webflow than from its makers? Webflow offers a comprehensive yet concise introductory video tutorial available for free. I highly recommend that you start with more beginner tutorials before trying more advanced tricks in Webflow because I found that the tutorials build upon each other and having a firm understanding of Webflow's interface and lingo is essential.
Below are some tools and terms that I discovered through watching the above tutorials and that I wish I knew sooner in my Webflow journey:
Box model - the layout of everything in Webflow follows a box model. This means that if you were to storyboard your visual essay, at its core, it would really just be a bunch of boxes in or on top of each other.
Nesting - when you place a box in another. The inner box becomes the child to the outer parent box. Children elements inherit styling from parent elements. In other words, changes made to parent styling in the Style panel (which you can access by pressing ‘S’ or the paintbrush on the upper right corner) changes styling of all of its children. Changes to text styling for children elements won't affect parent elements, as they can override parent styling changes. The navigator (which you can access by pressing ‘Z’ or the three bar icon on the left-hand side) is very useful for seeing and interacting with your website’s hierarchy of elements.
Div block vs. Container vs. Section - identifying which layout element I should use and when was perhaps the most confusing experience I had in the beginning stages of building my visual essay.
To break it down, containers and sections are both just div blocks with presets. Sections stack page contents vertically and are just like chapters in a book. Containers are like smaller sections of a particular chapter and help keep content in sections organized and centered. Containers are designed to keep content from going edge-to-edge of your computer screen.
You can easily change the presets of a section by adding margin to make it look like a container or reducing the margin of a container to make it look like a section. However, you cannot nest sections the same way you can nest containers, so it’s important to at least partially adhere to the section-container dichotomy if you’re planning to build webpages on the more complicated end of the spectrum.
Div blocks can help keep containers organized and often take the shape of various lines, blank spaces, and text. I didn’t really use div blocks in my project and only used them to add the occasional shape or object that would give my website’s layout a nice final polish.
Classes - elements with the same class name (which you can edit at the top of the style panel) allow you to reuse various styles throughout your project. For example, if you were creating a section with a grid based layout, and wanted the styling to be the same for each grid, assigning the same class to each grid element would ensure continuity. If you make a change on one class then all elements using that class also get changed. Classes are in blue and you can use the Style Manager (click ‘G’or the three teardrops in the upper right corner) to get a running list of all your website’s classes.
Combo class - overrides a particular class if you want to add a more specific style. Do this by just typing a new class name beside the old class name in the Style panel selector field.
Tags - these are similar to classes and are made specifically for text. Tags help you set default typography presets. You can access tags through the style panel, and they show up as pink in the style manager. If you want to set font, size, color presets for all of the various text and headings in your project, it might be helpful to do so at the outset or all at once. This brief tutorial details how to change tags.
Most of the websites that are built to catch user’s attention, such as the Apple website, have a boatload of interactions that essentially help the content of a webpage come alive. Interactions manage everything from elements changing positions, hover and reveal effects, and more. I used interactions to change the opacity and size of some of my media, reveal text at specific moments in scroll position, and play and pause lottie animations. Lottie animations are helpful for animating videos or other objects such that users can scroll through the media at their own pace.
Interactions can be a rabbit hole, but the most important thing to know is that you can either apply animations to an entire page or a particular element (section, container, etc.). Access interactions by clicking the lightning rod in the upper right corner or clicking H. The process of adding and modifying animations varies greatly depending on the animation. This is where having a link list of all your website inspirations comes in handy! If there’s a particular move that you’d like to implement in your website, there are many Webflow tutorials available to help you do just that. Browsing through these showcased websites specifically created on Webflow could be useful in identifying specific animations that interest you and viewing other websites that use that animation. Some users even let you clone their websites so that you can more easily apply certain moves to your project.
Here are some tips and pointers that I picked up in the Webflow process that might help you stay organized and efficient as you build your website!
You need to have After Effects and the Bodymovin plug-in installed on your computer. Also, make sure that you modify your ‘Scripting & Expressions’ preferences on AE such that “Allow scripts to write files and access network” is checked. Webflow cannot import large lottie files, so make sure the video you hope to animate is trimmed to about less than 3 seconds. When you add the .json file to your project, click on the name of the animation and the gear icon, make sure that render is set to SVG (in light gray) so that the animation doesn’t flicker.