Getting started with Webflow: Part 1 — Introduction

So, you're an entrepreneur with a nice feel for UX and website design. You already have some content in mind, and even have some stock images or video you feel would greatly compliment your website to best communicate your idea. Unfortunately, you don't have a developer in your team yet, or don't want to have your technical staff to lose focus on that product.

Well, there's one tool I'd recommend to develop your custom website that actually gives you access to a Content Management System. This tool is called WebFlow.

Why WebFlow?

Alternatives like Weebly, Squarespace, or Strikingly let you create websites easily, but the content you can display on your page is actually burned into the website text. These are useful for landing pages or one pager designs with content that won't require to much future maintenance or data management, but if you're a web designer and want to constantly update your UI without looking at the code ever again, Webflow actually provides much more flexibility.

Who can benefit from Webflow

So, in order to actually dip into Webflow, we'll design a real company's website together. Behold Ecuadorian Goods, an Ecuadorian import-export company. They asked me for help on a new website today, I wanted to share how non-technical entrepreneurs can easily create a website in their browsers using Webflow. So with their permission, we can start going through the main features. Ready? Let's Go!

Before We Start: Sketch Your Site

Many UX designers will tell you that the best experiences start on paper. For this case, my client and I sketched simple website ideas on paper. Most designers being very visual, drawing web pages with the client will give you much better sense on how the website should look, how many pages it will have, and how information should best be presented.

Creating a Webflow account

First things first. We need a Webflow account to get started. Let's go ahead and visit webflow.com, and create a new username and password. After that, Webflow will send you a confirmation email to verify your identity.

Create a Webflow account. Don't forget to use a password you'll remember. :)

Starting a site: The Dashboard

Once inside Webflow, you'll arrive at the My Sites Dashboard. The Dashboard will show you all the websites you've created before using Webflow. From here, you can enter any site you've started to then edit its contents and layout. You'll see something like this, but with an empty website list.

The My Sites Dashboard page. As you can see, sites we've created before appear listed here.

Next to the Dashboard text, you’ll find some options. The first dropdown will let you switch between Webflow accounts, just in case you had a team to work on the site with you, or if you wanted to work on personal sites. Next to it, you’ll find another drop down to sort all the sites you’ve created by Date Created, Alphabetical Order, or Last Modified. Fianlly, in order to get started, you’ll have to click the blue New Website button:

Create a New Site: Selecting a Template

After clicking the New Website button, we'll move to another Dashboard section, the Create a New Website Page. Here, we'll give our project a working Website Name, we'll set our site's Visibility settings to make it publicly available or private, and select among different template options Webflow has prepared for us. We can scroll down and explore the beautiful templates for one we may like, or we can start our site from scratch using a Blank template. You'll also notices some templates have a CMS logo in their upper right corner.

This means these templates will be connected or binded to Webflow's Content Management System (CMS) Platform. If you have sketched a website on paper, you can look for a Free or Paid template that looks like your original design, or if you’re a bit more experienced in UX, you can always try the Blank Template. After we select a template, the Create Website button will activate in the upper right corner.

On the Create a New Website page of the Dashboard we can pick a template that suits our needs.

This article will be continued in Part 2: The Webflow Interface. Please keep in mind that due to the many features Webflow offers, I'll go into documentation mode.

EDIT: A year after I posted these tuts, Webflow approached me and asked me to join their affiliate program. If you're finding these posts useful, I'd be grateful if you used this link to give Webflow a shot.