Webflow Web Design Tips for Beginners by a Creative Director

Discovering Webflow as a designer who has never dabbed with development was pretty revolutionary for me. It enabled me to bring my designs to life through Webflow Designer.

The more I explored it, the more I realized that Webflow requires a unique approach when you’re a designer, as it comes with its own principles. A designer must be aware of them before jumping into their first Webflow project.

That’s why I decided to share several useful tips that can help beginners kickstart their Webflow web design journey.

{{cta}}

Is Webflow Good for Beginner Web Designers?

I’ll be honest: if you’re completely new to web design, you shouldn’t pick Webflow as your primary tool. 

Here’s the trick:

Webflow is actually more development-oriented. When you think of it, the whole “visual development” movement is what helps developers the most by streamlining the process.

If you’re a designer, you’ll still have to do your work from scratch, with no shortcuts in the process. Moreover, you’ll have to learn the basics of Webflow to understand how to approach web design.

Does that mean you should give up on Webflow? Of course not. You’ll have to try a little harder and learn web design and Webflow simultaneously.

Best Webflow Tips for Beginner Web Designers

At Flow Ninja, we understand that Webflow can be used for both design and development, but we decided to separate the two.

Our design team mainly works in Figma, while our developers implement it via Webflow Designer.

So, our designers can completely neglect Webflow? On the contrary, Webflow is still at the heart of it. We’re designing to get the most out of Webflow’s capabilities.

That’s the reason I’ve decided to come up with a set of tips that could help designers who are just starting out and want to use Webflow.

#1 Understand General Design Principles

Mastering design principles is like learning the alphabet before writing a novel. These principles provide a framework for creating visually appealing and effective designs. Here are some key principles to grasp:

• Balance: Visual equilibrium in design. Symmetrical balance mirrors elements on both sides of a central axis, while asymmetrical balance arranges different elements strategically.
• Contrast: Highlight differences between elements using color, size, shape, texture, or typography. Effective contrast guides the eye and emphasizes key elements.
• Alignment: Visually connect and organize elements for readability and order. Align elements horizontally and vertically to a grid or a key element for a cohesive design.
• Hierarchy: Establish the order in which elements are perceived. Use size, color, typography, and placement to guide users through content intuitively.
• Repetition: Foster consistency by repeating elements like colors, typography, and patterns. Creates a cohesive and memorable visual identity.
• Proximity: Group related elements together for visual cohesion. Helps users understand relationships between content pieces and navigate easily.
• Whitespace: Empty space between elements. Provides breathing room, enhances readability, and adds elegance. Whitespace is as important as content.
• Typography: Convey information and set tone using fonts. Choose fonts aligned with the brand's personality for readability across devices.
• Color theory: Pick perfect colors that evoke emotions.. Consider contrast, complementary colors, and cultural associations when choosing colors. Cultural associations require understanding one's culture and the emotions they evoke. Here's the famous example - red may result in positive emotions in China but not in some other countries.

Of course, design basics cannot be explained in a single blog. Instead, I suggest reading books that cover them in detail, my favourite being Don't Make Me Think by Steven Krug. Krug advocates for clear, self-evident navigation and layout to minimize the cognitive load on users, making their interactions with the site as straightforward as possible. The book provides practical insights and guidelines on usability testing and iterative design to enhance user experience.

#2 Understand the Basics of HTML and CSS

Even though Webflow is a visual builder, the websites created with this tool are still written in code, just like any other site out there, all based on HTML and CSS.

Don’t get me wrong: I don’t expect you to know how to code a website, but understanding how HTML and CSS work and how they complement each other is vital for your web design.

HTML (Hypertext Markup Language) is what we use to organize and label the parts of a web page, like headings, paragraphs, and pictures. CSS (Cascading Style Sheets) is what makes those parts look nice by adding colors, fonts, and spacing.

In other words, HTML will help you understand how pages are structured when you’re designing, while CSS literally does the same thing as you do via your design software: it applies style to your website.

Once you know how your designs translate into HTML and CSS, you could consider yourself a web designer. Of course, there’s also Javascript, but I’ll leave that for advanced tips.

#3 Explore Webflow Designer

The initial two tips could apply to anyone starting as a web designer. The third one is only for those who want to focus on Webflow.

Webflow Designer is the main tool where all the magic is made. Although it’s called “Designer,” I believe the name is a bit misleading, as you’re basically developing websites in it.

As a web designer, you don’t have to master this tool, but you should understand its capabilities and how that can affect your design process. 

If you know a Webflow expert, ask them to watch the entire website creation process, from adding initial elements to publishing the website on Webflow.

#4 Don’t Develop Your Webflow Sites; Designers Should Stay Designers

During the early days of Flow Ninja, I wanted to do it all: design and develop websites from scratch. Needless to say, I failed.

Webflow is a robust development tool that requires professional devs if you’re building anything bigger than single-page portfolio websites. That’s why we have two separate teams: design and development.

If you manage to become a professional DEVsigner, great job! Unfortunately, few people can achieve that. In most cases, they become jacks of all trades but masters of none. 

The reasoning behind this is simple: design itself is a pretty complex branch, and professionals should only focus on it while leaving the implementation to Webflow developers. On the other hand, Webflow devs shouldn’t trouble themselves with the aesthetics. They should only ensure that the applied design is functional and serves the intended purpose.

#5 Understand Who You’re Designing For

Creating a successful website isn't just about aesthetics; it's about delivering a meaningful experience to your target audience. Understanding your audience's needs, preferences, and behaviors is the foundation of user-centered design.

For example, a website for a tech-savvy audience might feature cutting-edge design elements and interactive features, while a site targeting an older demographic might focus on simplicity and ease of use.

Successful web design isn't just about what you like; it's about making something that your website visitors will enjoy. When you really know who your visitors are, you can make a website that they like and that makes them want to stay and do things on your site. This helps your website do better in important ways, like getting more people interested and leaving a strong impression.

#6 Explore Other Design Software

Each design software has its own strengths and weaknesses. By experimenting with different tools, you can discover new design techniques and approaches to integrate into your Webflow projects.

If you’re new, we recommend starting with Figma, as it’s already accepted as the industry standard for web designers and offers great collaborative capabilities. We’re making all of our designs in Figma, which are later used in Webflow and turned into live websites.

Of course, you can go beyond just web design and explore other design tools for various types of designs. This will definitely help you see the big picture and make you a better designer in general. Before you start exploring any tool, make sure to be inspired by some of the best designs, as chosen by DesignRush. These should be enough to get you started.

#7 Webflow Showcase is Your Friend

Webflow Showcase features hundreds of websites made by users. By exploring it, you can get an idea of what Webflow can do and, more importantly, what you can do with Webflow.

One of the great features of this section is that some sites are cloneable, meaning you can clone them in your Webflow Designer and explore how it’s made.

But that’s something you should do if you’re focusing on the development part of Webflow. As a designer, I suggest the following course of action: find a website you like and design it from scratch in Figma.

#8 Get Inspired Outside Webflow; Even Outside Web Design

As a web designer using Webflow, it's easy to get caught up in the digital design bubble. That’s why it’s important to stay inspired by exploring various types of design, including different typography, book covers, and videos. 

Inspiration can be found in different places: movies, music, comics, and more. 

#9 Understand How Styleguides Work

A styleguide is a guideline collection that designers need to come up with when designing a website. They are particularly important for Webflow, and especially in Flow Ninja. Webflow developers use the information from the styleguide to apply our Figma design in Webflow Developer and make it come to life.

#10 Understand the Basics of SEO

SEO is a practice that ensures that your website is visible on search engines, such as Google. Even though it seems SEO has nothing to do with web design, the two have a lot in common.

Poor web design means unhappy users, which is a big no-no for Google, as the main goal of search engines is to deliver content where users will find what they are looking for.

This is particularly true for mobile design. Google's emphasis on mobile-first indexing means that having a responsive and mobile-friendly design is crucial for SEO. A well-designed mobile experience improves user engagement and can lead to better search engine rankings.

We already covered Webflow SEO and technical SEO in separate articles, so I recommend reading them if you want to learn more about it.

Conclusion: Learn Hard, Design Harder

I’ve saved the most important tip for the very end, and it’s this: get down to work. Tutorials and workshops are cool, but that knowledge doesn’t mean much if you’re not actively using it. Even if you don’t have an actual project to work on, make sure to create one yourself and work on it until you feel comfortable enough to start offering your skills to clients. Simply put, nobody ever became a designer only by watching others do it.

{{cta}}