Top 10 Tips to Improve Your Webflow Skills

1. Use Webflow shortcuts

‍

Learning about shortcuts is the first and foremost step in becoming a better Webflow developer. Working faster and more efficiently will allow you to be more precise with projects you take on and deliver quality service. Using shortcuts can save you up to 8 full work days per year.  

‍

General keyboard shortcuts will help you navigate more smoother. Some examples are:

‍

• Show shortcut cheatsheet: Shift / +
• Deselect element or exit: Esc
• Delete element: Delete

‍

View shortcuts will help you switch between preview mode and designer faster. Some examples are:

‍

• Preview mode: Shift + Command + P 
• Guide overlay: Shift + Command + G 
• Show element edges: Shift + Command + E 

‍

To learn about Webflow shortcuts, follow this link and learn all the essential Webflow shortcuts to speed up your workflow. 

‍

2. Add a compelling copy

‍

For a superior user experience, copy and design should work hand in hand. A great web design should have a compelling copy that adds value to the customer journey. Many respected marketing companies like Hubspot suggest that website building should start with a copy first. The idea is that copy should dictate design and not another way around.

‍

Thus, collaborating with your marketing department in the initial phases of website building will play a crucial role in the website's success. Get a copy, build a wireframe, and only then build to Webflow. 

‍

Following the copy first, design second principle will also help you improve your website structure for SEO. The copy will determine the heading hierarchy and set proper keywords and meta information. 

‍

When building a website, always use a user-centric approach. Make sure who you are building your site for and how to communicate with a target audience. Will your audience appreciate playful colors and communication, or should you take a more classy and formal approach?

‍

Ask yourself:

‍

• Who are my users, and why are they here?
• Will this resonate with the user?
• Does this keep them engaged and get them to their goal faster?
• Will this make sense?

‍

3. Improve your site footer

‍

A section that does not get enough recognition is a website footer. Footer represents a collection of elements found at the bottom of a web page. The purpose of a footer is to help users make the desired action and keep them engaged on the site. 

‍

Footer can play as an important extension of the top navigation. Its role can act as a safety net for lost website visitors and help them navigate through the site as a strong roadmap. A well-structured foot can even help you rank better on Google and make your site better discoverable on the web. 

‍

As you can see, the footer is an important section of your site. But still, don't overdo it and keep it minimalistic. A footer crammed with excess content is a bad user experience. Thus avoid staffing in too many unnecessary links and irrelevant pages.

‍

A good practice to follow when constructing a footer is to include:

‍

• The privacy policy is mandatory by law for everyone collecting personal data from users. You must draft a legally compliant Privacy policy and ensure this policy is easy to locate and access.
• Copyright notice to deter anyone from copying your website assets. You will need the copyright symbol © (or the words "Copyright" or "Copr.”), the year of the website’s publication or most recent update, and the name of the copyright owner.
• A sitemap serves as an additional roadmap for the multiple parts of your website. Sitemap encourages visitors to keep browsing the website and helps them discover different page sections.
• Business information including contact details, registration numbers, addresses, and logos. 
• Social media links to keep users engaged by linking off to other platforms you are present on. 

‍

4. Use white space

‍

White space is an empty space around the content and page elements. Its role is to let your design breathe, help with user focus, and make their website journey easier. White space improves user experience and allows them to digest your content more efficiently. 

‍

White space is not necessarily white. It can be any type of space used as a background for the web content and elements. Its elements are line spacing, letter spacing for text, and margins and paddings around functional elements. 

A proper way of using white space will:

‍

• Make the content more readable.
• Create connections between individual elements.
• Drive the attention of visitors to particular objects.
• Improve visual hierarchy.
• Make a design look and feel more premium.

‍

5. Understand the color theory

‍

As you create Webflow pages, you should be familiar with the color wheel and how complementary, contrasting, and analogous colors work together. Findings show that 21% of visitors will leave a website with absurd colors. Using a proper color palette thus definitely play a vital role in web design. A good starting point is to follow the 60/30/10 rule. When you select a color palette, 60% of the design should be the dominant color, 30% secondary, and 10% accent color. 

‍

Website color schemes will reflect your brand personality and help you stand out from the competition. Consumers often associate brands with certain colors, so keeping your color scheme consistent will improve your brand recognition.

‍

6. Use content management system (CMS)

‍

One of the best features that make Webflow special is its content management system. Leveraging CMS will enable you to edit, tweak and update large blocks of content without much hassle. 

‍

CMS is where all the dynamic content is stored and maintained. Dynamic content includes blog posts, landing pages, recipes, or events. Using CMS means, that anytime you change the content in the CMS, the change will be visible on all the pages where its referenced. 

‍

Leveraging CMS will enable you to create structured content, and design around that code without ever having to write a line of code. 

‍

Check out the Intro to Webflow CMS article and learn everything you need to know about Webflow CMS. 

‍

7. Double down on the class naming convention

‍

If you have ever worked with CSS before, you probably know how important semantic class naming convention is. Webflow’s classes work exactly like classes in CSS. Naming things correctly in CSS will make your code easier to read and maintain. 

‍

One of the more popular ways to go about naming classes is to use the BEM naming convention. BEM stands for block, element, and modifier. It helps us divide the user interface into small reusable components that help us tweak and modify design across all our pages. 

‍

• Blocks represent high-level, self-contained elements, such as navigation, menu, and hero elements.
• Elements are part of blocks and have no standalone meaning. Block contains elements like navigation links and social link.
• Modifiers indicate variations of or changes to the elements. Pressing a button will change its appearance from blue to white for example.

‍

BEM convention is popular in Webflow because of enhancing the cross-site copy / paste feature. Using BEM helps you make elements reusable elements that you can easily copy and paste to other pages.

‍

8. Follow best UI practices

‍

UI design refers to the aesthetic design of all visual elements of a digital product's user interface. Simply put, UI design is the design of the product's interface - what the user actually sees.

‍

To create a great UI, most designers follow established design principles. Those principles represent high-level concepts that guide designers in creating a customer-centric UI.

‍

A good practice is to follow Jakobs Nielsen's 10 general principles for design. His top 10 UI heuristics talk about:

‍

• Visibility of system status. It keeps the user informed on what is going on through appropriate feedback.
• The design should speak the user's language, making information appear in a natural order.
• User control and freedom enable them to abandon unwanted actions without hassle. 
• Consistency and standards provide better clarity and understanding of the page. 
• Eliminate error-prone conditions to avoid users facing website failures. 
• Information required to use the design should be visible or easily retrievable when needed. 
• The aesthetic and minimalist design makes understanding a website as easy as possible.
• Error messages should be expressed in plain language to help users recognize, and recover from errors.
• Help and documentation can help users understand how to complete their tasks. 

‍

9. Include a clear navigation

‍

We have already written about the footer, now let's tackle the navigation. Creating clean navigation will lead to more website conversion, a lesser bounce rate, and an overall user experience. 

‍

Imagine landing on a website and could not figure out the way around it. Sooner or later, you would bounce without intending to come back. Clear and hierarchical website navigation helps your visitors find what they want instantly.

‍

CrazyEgg has a great rule of thumb for good navigation: ‍

‍

Your website navigation structure should allow someone to land on any page on your site and find what they need within 3 clicks.

‍

The fundamental steps of creating great website navigation are:

‍

• Put the navigation on the top of your page. Visitors should be able to navigate around the website without giving much or any thought. Your top navigation should thus be visible at all times.
• Avoid too many drops drowns that force users to spend more time finding the content they are looking for.
• Keep the navigation simple and minimalistic. Too many links will overwhelm the visitor and potentially lead to them bouncing from the website. 
• Think through the navigation links hierarchy. The primacy effect is a real thing meaning users will put more emphasis on links they see first. 

‍

10. Ask for feedback

‍

Last but not least is to ask for constant feedback. How will you improve if you don't know what you are doing good and what you are doing wrong? 

‍

Let visitors and other professionals give you constructive feedback that will help you glance and improve your Webflow skills. Make sure the critics understand the scope and purpose of the project. 

‍

Some questions you may ask the people analyzing and critiquing your work are: 

‍

• Does my page miss any important design elements?
• Can the content be better organized to improve readability?
• Does the UI functionality make sense?
• Does the visual hierarchy work?
• What can be done to improve user experience?
• Are my classes named correctly?
• How to improve my page performance?
• What does a visitor journey look like on my page?

‍

Make sure to ask for feedback from people from various industries. After all, your visitors will have different backgrounds and work in different roles. Hearing the perspective of different people will give you a better overview of what to double down on and what not. 

‍

Final thoughts

‍

Web design and web development are constantly evolving. Webflow bridges both disciplines, making the no-code space evolve even faster. To stay competitive and produce high-quality projects, you will have to put in the work and learn constantly. While there are many more skills to master, we outlined the top 10 skills that can help you stay on top of things and become better at Webflow.  

‍

To go over those skills once again, those are:

‍

• Use Webflow shortcuts.
• Add a compelling copy.
• Improve your site footer.
• Use white space.
• Understand the color theory.
• Use content management system.
• Double down on the class naming convention.
• Follow best UI practices.
• Include a clear navigation.
• Ask for feedback.