Webflow

Our Pro Tip: Designing on Webflow - What Not to Do and How to Do It Right

Haja

March 30, 2023
4
 min read
Devhaus: Digital Transformation Growth Guide
Step 1
Step 2
Step 3
Step 4
Step 5
Read Growth Guides

Gain insights to our library of actionable growth guides!

Download Strategy Templates

Accelerate your progress by downloading our strategy cheatsheets!

Download Webflow Components

Use our pre-built webflow templates to create your campaigns.

Launch your Campaigns and test

Get the ball rolling with your new innovative digital campaigns!

Subscribe to our newsletter

Never miss out on another insightful content from our team!

01
Read Growth Guides
02
Download Strategy Templates
03
Download Webflow Components
04
Launch your Campaigns and test
05
Subscribe to our newsletter
×

Are you ready to unlock your company's growth?

We promise not to spam you. You'll only receive sweet content from us, including updates on our products and services.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Creating a website can be a daunting task, especially if you're new to web design. There are numerous design elements to consider, such as layout, typography, and color schemes. Webflow has become a popular platform for web designers to create responsive and dynamic websites without coding. However, not everyone is familiar with the best practices and common pitfalls when designing on Webflow. In this article, we'll cover what not to do when designing on Webflow and how to do it right.

Not to do list

Not paying attention to responsiveness

  • Responsive design ensures that a website is optimized for different screen sizes and devices
  • Tips for designing responsive websites on Webflow include using breakpoints and testing on different devices.
  • Override cascading styles for a specific breakpoint by changing values on that breakpoint. Breakpoints inherit styles from desktop (base) by default. You can override desktop styles, such as changing body background color on tablet breakpoint. Styles applied on tablet breakpoint cascade down to smaller breakpoints (mobile landscape and portrait) but not larger breakpoints (1280px and above).

Don't Overcomplicate Navigation

  • Navigation is a crucial element of any website, and it should be easy to use and understand. Avoid overcomplicating navigation by using too many links or confusing menus.

Ignoring web accessibility

  • Web accessibility refers to designing websites that are usable by people with disabilities.
  • Tips for designing accessible websites on Webflow include using proper alt text for images and ensuring that the website can be navigated using a keyboard.
Press Alt/Option + U on your keyboard to quickly expand or collapse all items in the Audit panel.

Forgetting about website speed

  • A slow website can negatively impact user experience and SEO.
  • Tips for optimizing website speed on Webflow include compressing images and and video files to reduce file size and improve loading times. Consider using a content delivery network (CDN) to speed up the delivery of your website's content to users.

Neglecting SEO

  • SEO (Search Engine Optimization) refers to designing a website in a way that makes it more likely to appear in search engine results.
  • Tips for designing SEO-friendly websites on Webflow include using descriptive URLs and meta tags, and optimizing website content for keywords.
Optimize your SEO in the page setting

How to do It right

Pay attention to your target audience

  • Understanding your target audience is important in order to design a website that meets their needs and expectations.
  • Tips for designing websites that meet the needs of your target audience include conducting user research and creating user personas.

Focus on user experience

  • User experience refers to the overall experience a user has when interacting with a website.
  • Tips for designing websites with a good user experience include creating clear navigation, using white space effectively, and designing for readability.

Keep it simple and clean

  • A simple and clean design can make a website more visually appealing and easier to use.
  • Tips for designing clean and minimalistic websites on Webflow include using a limited color palette and avoiding cluttered layouts.

Use high-quality images and graphics

  • High-quality visuals can enhance the visual appeal and user experience of a website.
  • Tips for using images and graphics effectively on Webflow include optimizing image sizes and choosing images that are relevant to the content.

Conclusion

In conclusion, designing on Webflow requires attention to detail and consideration of best practices. By avoiding common pitfalls and following our tips for doing it right, you can create stunning and functional websites that meet the needs of your target audience.

What this article is about, in a nutshell.

Subscribe to our newsletter

Subscribe to receive the latest blog to your inbox every time we launch!

By subscribing, you agree to our Privacy & Policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Get up to 70% subsidy for your next project

Build your perfect growth systems and processes today

To ensure our call will be productive, ensure you’re prepared the base materials below. Can't wait! We're sure it'll be fun!

  • Prepare your problem statements
  • Align on your desired outcomes and the timeline
  • Let us know your budget constraints if any
By subscribing you agree to with our Privacy Policy.
Related resources

Here are other related resources to help get you closer to the end outcome

Make sure you subcribe to our newsletter to be the first to know about our strategy templates and our Webflow components

No items found.
Coming Soon
Related blog

Continue reading our other blog!

Knowledge is power, there’s nothing wrong with indulging more and drowning yourself in our resources, we’re sure it’ll help.

Transform your Brand & Marketing ecosystem

For Companies operating in Singapore - get up to 70% on your next project with us

View other resources

Find the best tech stack you need or Growth Strategy to grow organisation.

Search here
Filters
Clear all
Showing 0 of 100
Resource Category
Resource Topic
Featured Resource
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
close icon
Filters

You come for our services, you leave with everything else you need. Everything.

Enough of us going on about our business. Let’s talk about yours - and how we can add value to it.