No Coding Required! With Webflow You’ll Create A Sexy And Creative Website That People Always Love

Rahul Raman
7 min readFeb 9, 2022

--

Source: Dribble

Seeing how so many website builders are poorly designed, it’s no wonder that people are so wary of putting their trust in one.

While they work fine for the average inexperienced user to quickly get a personal website up and running, these tools are not appropriate for professional use.

Webflow is an exception to that rule. Exceptional when compared to other all-in-one web design tools, Webflow allows users to design, build, and launch responsive websites visually.

We have spent the past year using Webflow too. We’ve also tried many other platform options like WordPress and Squarespace, and we feel confident in saying that Webflow is the best.

Although we don’t think it is perfect, the software does some things very well.

Regardless of this, Webflow is a fantastic tool that enables designers to bring their designs to life without relying on outsourcing the development process to front-end developers or having to use poor-quality DIY software.

Disclosure: “This Article Contains Affiliate Links”

What Is Webflow?

Since its debut through Y Combinator’s startup accelerator in 2013, Webflow has been a drag-and-drop tool for creating websites that are both responsive and fast.

Wix and Squarespace both offer DIY software to create websites, but websites built with those programs are not completely customizable. WordPress provides users with a CMS but isn’t great for creating visually unique, bespoke designs.

The Webflow’s design is intended to surpass competing products in terms of ease-of-use, flexibility, and performance, and it largely achieves that goal.

This is how it does all of that.

Webflow Home Page
Source: Webflow

Designer and Editor

The Webflow Designer enables users to dynamically design and generate websites by simply dragging HTML elements and CSS properties onto a canvas.

Differentiating itself from DIY site builders and all-in-one WordPress themes, like Divi, Webflow exports clean code that is immediately deployable. Webflow can also be handed off to developers for further customization.

Learning the Designer interface can seem daunting at first, but it will teach inexperienced developers a great deal about basic development.

For example, if you work in Webflow, your thinking will change — from designing as a graphic designer to thinking more like a front-end developer.

CSS has evolved, and developers now have more tools at their disposal than ever before. Instead of “absolutely positioning” a bunch of elements onto a blank canvas, users can use CSS to create <section> and <div> elements, define classes, and use modern layout modules like flexbox or grid. All using a visual WYSIWYG editor.

For these reasons, Webflow — combined with its excellent tutorials on Webflow University — can serve as an excellent stepping stone for designers looking to break into front-end development.

Plus, the platform includes an Editor that lets clients make basic edits to their site … without breaking the entire site structure!

Webflow CMS Page
Source: Webflow

Webflow CMS

While setting up a Webflow blog may be more work upfront than using a native platform like WordPress, the result will likely be well worth your effort.

Despite its many strengths, WordPress has never excelled in terms of user-friendliness or ease of customization.

The platform’s default templates (even with Elementor)and styles make it difficult to customize individual elements such as post fields. Adding a third-party plugin to customize a single element or rewriting the underlying template files is not only time-consuming but also detrimental to your website’s performance.

Webflow CMS, by contrast, claims to let designers define the structure and style of their dynamic content without messing with plugins, PHP, or databases.

Choose how you want to manage your content — you can create it yourself, import it from a . CSV file, or connect Webflow to one of your existing CMS systems.

Use Collections to develop reusable templates for dynamic content types. For example, a website could have collections of blog posts, authors, clients, projects, products, categories, and so on.

No more database management for you, Old Sport! Just use Webflow CMS — it’s that simple.

Webflow Interaction 2.0
Source: Webflow

Interactions 2.0

Although this may be the coolest feature Webflow has to offer, it can also be one of the most frustrating.

Interactions 2.0, a new tool released in late 2017, allows designers and developers to create custom CSS transitions and JavaScript animations based on page states and user interaction.

It is, mostly, a successful attempt to diminish the struggles faced by JavaScript DOM manipulators.

Webflow’s new interactions feature means you can create complex animations without writing a lick of custom JavaScript, but the experience could still use some work.

If you’ve never worked with code before, especially JavaScript, the first few chapters of this book will likely present you with the greatest pain point while learning Webflow… so come prepared for that.

For all the technical limitations of this tool, you can create some breathtaking animations if you’re willing to spend a little time learning it. (Just check out the landing page advertising Interactions 2.0!)

Though we are not 100% comfortable with the Interactions panel, we are much more at ease with it than we would be writing our own On.Click functions.

Webflow Hosting
Source: Webflow

Deployment and Hosting

Webflow provides innovative, user-friendly hosting for designers and developers wanting to easily build a web presence. Webflow is powered by Amazon Web Services (AWS), the leading cloud computing platform, and a global content delivery system that uses Fastly and Amazon Cloudfront to host your content more securely and scale more efficiently.

In the end, you’ll reap the rewards of lightning-fast page loads and the peace of mind that comes along with never having to worry about server maintenance or updating PHP.

With all hosting plans, you’ll get free SSL certificates, HTTP/2 compliance, site search, form control, password protection, an automatically-generated sitemap, and automatic backups.

What you sacrifice with this hosting choice is price. Compared to other managed hosting providers, like WPEngine and Kinsta, Webflow hosting prices are higher.

The $15-per-month Basic plan includes the basic features, but you’ll need to upgrade to the $20-per-month CMS plan for Webflow CMS.

However, if you do want to spend the money and aren’t interested in any of these plans, it’s not a problem!

The fact that all websites are coded in basic HTML, CSS, and JavaScript means you can easily download the files and deploy your site to whatever hosting provider you like.

Webflow Ecommerce
Source: Webflow

Webflow’s latest and greatest addition is here. Feast your eyes on this. Webflow Ecommerce gives online merchants complete control over web store design and visual components by offering flexible, drag-and-drop CMS tools.

Webflow gives you the freedom to choose how you want your Ecommerce site to look and feel. No matter what kind of visual style you’re going for, you can build it with Webflow, since it doesn’t impose any limitations when it comes to Ecommerce.

The only way you can achieve this level of customization with a tool like Shopify is to pay thousands of dollars each month for a plan dedicated to high-volume businesses and then spend hours learning the ins and outs of their Liquid templating language.

For retailers, the platform offers an integrated suite of tools used to manage complex functions including shipping, taxes and inventory. The newer version has supported the development of new digital products and subscriptions, customer accounts, and extensive product variants.

Final words after using it for many years

Webflow, a powerful new platform for web design and development, stands out from the pack of low-quality DIY design software currently flooding the market.

With features like the Webflow Designer, CMS, and Ecommerce, you can create full-featured, performant websites without needing to learn how to code or contract with developers.

Though the platform has a number of drawbacks, the ease with which it allows you to create visual masterpieces, combined with its robust interface for building complex animations and a tool for adding e-commerce functionality to your sites, make it well worth your time.

Regardless of whether you’re a professional designer or simply a business owner looking for a more powerful, customizable, and robust solution for your web presence, today’s marketing automation software solutions can make it happen.

Still not convinced? Test drive it to see why Webflow is the best option for your design, development, and hosting needs!

Coming up next: The absolute beginner’s guide to Webflow (Coming Soon)

Written by the founder of the Republic of Designers Rahul Raman

Read more on the psychology of shapes 👇

Web designers on Medium are worth following 👇

Ryan Irelan, Bogdan Sandu, Webflow, Veerle Pieters, Meagan Fisher, Faydra Deon, Daniel Howells, Chris Hedges, Filiz Özer, Mark Johnson, Osvaldas Valutis, Anton Liubushkin, Roman Nurik, Alisher Yakupov, Peter Nowell

--

--