10 best premium UI kits for web designers

Get your new web design project started with these amazing UI kits, or copy and paste elements into your existing projects to give them a creative boost.

Kate Donnellan
October 29, 2019
Web design

A good UI kit can make your life as a designer so much easier. They streamline your design process, save you time, and help ensure your designs look amazing and perform incredibly. With Webflow, you can use UI kits to quickly design and build full websites — eliminating the need for design tools like Figma or Sketch.

We’ve selected 10 beautiful UI kits designed by the Webflow community to help you take your projects to the next level. Each UI kit template on this list is CMS-ready. This means you can design, add your content, and launch your site in (almost) no time!

1. Quicksmart

quicksmart

Whether you’re designing for a big tech company, a small startup, or a mobile app, Quicksmart is the perfect UI kit template. It offers a huge selection of software-as-a-service (SaaS) and app-focused landing pages, as well as a robust library of ready-to-use interface kits and components.

The vast array of flexible UI elements included in this kit are all designed to fit seamlessly together, no matter where you decide to place them on your site. Quicksmart makes it really simple to tweak the colors of your site. Thanks to its handy use of global color swatches, you can easily experiment with different looks, or apply your brand’s unique colors.

One amazing feature of this UI kit is its multi-use legal page for your terms of service or privacy policy. As online users become more aware of how their data is collected, it’s important for all websites to have this.

2. Forest

forest ui kit

The Forest component library is a fast and convenient way to build and launch websites in Webflow. This UI kit is perfect for beginners and professional designers alike. The component-based approach makes it simple to use all of the kit’s pre-built UI elements. Forest is an excellent UI kit to bring your wireframes to life, and quickly create mockups. This means that you can share designs and prototypes with clients and teams in a matter of hours rather than days.

If you’re looking for a wide range of cloneable components and fast, the Forest component library is for you. It contains over 300 beautifully designed components that work well together in any environment, and can integrate seamlessly with your existing website. Don't believe us? Preview it in the Designer.

3. Timber

timber template

Elegant and simple, the Timber UI kit is a flexible, component-based template — perfect for your next design project. With a focus on growth and lead generation, Timber is the perfect UI kit for startups or fast-growing companies. With a variety of effective CTAs and well designed micro-interactions, each element in Timber works hard to ensure that the visitor remains engaged with your site.

As we all know by now, landing page design can have a huge effect on conversion rates. Timber contains a number of strong inner pages that can be customized and used as compelling landing pages for your online brand. Timber also allows you to integrate your own brand color palette easily.

4. Ollie

ollie template

Ollie provides you with everything you need to design a stylish website. This UI kit consists of an assortment of building blocks that you can control and apply as you wish — allowing you to build a polished website fast. You can also create your own, unique pages from modular UI templates.

ollie pricing pages

Ollie packs in a huge range of UI elements — multiple navigation and footer options, a full suite of inner pages, landing pages, different blog layouts, checkboxes, icons, and more. One of the strongest features of this UI kit is the variety of pricing package elements that it offers — ideal for any company selling a service online.

5. Fortis

fortis template

With 5 pre-made demo designs, Fortis is the ultimate UI design kit for startups, SaaS companies, or mobile apps. Packed with multiple elements and symbols, Fortis offers a great start for your next project.

Fortis is an extremely comprehensive UI kit. It offers a massive range of editable UI components and elements — all aimed at making your life easier when designing websites. All elements can be dropped within your preferred grid system. With 5 different homepages and the option to select between different navigation types, you're able to mix and match what works best for your web design.

fortis homepage

A UI kit like Fortis also speeds up the entire design process. You can use Webflow to prototype, rather than using Figma or Sketch, and get designs out to clients insanely fast. Fortis contains lots of elements that have become standard for SaaS websites. This includes clear, informative pricing plan pages and interactive growth metrics.

6. Designio 

designio

Designio is a fresh and highly adaptable ecommerce UI kit with some incredible features. It contains over 250 components, 4 home pages, 27 inner pages, 3 shop pages, and a slick mega-menu.

Each shop design offers different categorization options, which is fantastic because you can choose the user interface that will best suit your products and your users. If you use the Designio UI kit, there's no chance of you having a boring UX or UI — all elements are designed to work perfectly with one another.

Designio also has a strong focus on seamless interactions — something that’s time-consuming to create in JavaScript. This adds to the kit’s fantastic UX. Having a strong and intuitive UI on your ecommerce website will lead to higher sales and happy customers.

7. Floria 

floria

Floria is a simple yet elegant UI kit, suitable for any business or agency website design. With Floria, you can create a stylish website, showcase your favorite projects, and quickly add new blog posts. Filled with useful components, this kit ensures that you can design a unique website, tailored perfectly for your needs.

Floria can also provide a perfect starting point for a new blog. With 6 terrific homepage options, as well as a variety of different blog grid layouts, you’ll be spoilt for choice when deciding which elements and components you want to use on your new site.

floria homepage

The blog pages’ micro-interactions and categorization elements help ensure fantastic UI design, meaning that your site will hold the attention of your visitors and urge them to take action. This UI kit also includes sleek social media integrations, so it’s easy for your  readers to share and discuss your blog content online.

8. IndieGo

indiego template

IndieGo is a beautifully designed, and of course, fully responsive web UI kit template. It’s perfect for startups or SMB’s (small and medium-sized businesses) focused on growth and lead generation. The seamless hover animations and clear, yet unobtrusive, calls to action are perfect for your digital-native audience.

You can easily create a stunning Webflow website from IndieGo’s range of landing pages, or mix and match elements from its comprehensive list of UI components to create your own custom website design. Whatever you choose, IndieGo is the perfect starting point for your next online project.

One of our favorite aspects of IndieGo is the fact that it comes with a style guide. This helps you lay the groundwork for your brand messaging online — ensuring a cohesive and seamless user experience all across your new site, without manually coding CSS!

9. Zense

zense template

Zense UI kit is a powerful Webflow UI kit, made specifically for design agencies and freelancers to whom time is of the essence. This template allows you to focus more on designing your content strategy while building less, bringing your web design skills to the next level.

With Zense’s beautifully pre-built elements, designing a site with this web UI kit is literally as easy as dragging and dropping. You can create a great-looking and hard-working site just by adding your own imagery and brand palette to this template. By customizing further, you can integrate your own design system and create something truly unique.

Our favorite elements from this kit include the unique navigation and mouse hover effects that allow you to feature your most impressive projects.

10. Fortun

fortun template

Fortun is a really playful and versatile ecommerce UI kit that emphasizes creativity, efficiency and diversity. The sheer number of different elements and components it contains is pretty amazing — 200+ components, 4 agency pages, 2 store pages, and 27 inner pages. It also has a fantastic standard color scheme. 

This UI kit will allow you to create a unique, creative, and enjoyable UI for each and every one of your website visitors. It also features some of the best animations of any kit on this list — including awesome parallax scroll effects as well as tiny effects such as the scroll prompt hover state, a sticky contact sidebar, as well as countless other gems.

The 2 different store pages give you lots of flexibility, and allow you to use the most effective elements for your products. Store 1 uses a more content-based approach, while Store 2 takes more of a featured product approach.

Bonus: Prospero

prospero ecom ui kit

Prospero is a clean, modular — and free — UI kit for ecommerce and beyond. Within this ecommerce UI kit you can find over 85 sections divided into 9 categories, all the way from hero to blog elements. There are also 10 different layouts that you can mix and match to create your own designs.

As a bonus, Prospero also comes with 2 fully functional templates for free — which can be accessed in the free section of the Webflow template marketplace.

The web design possibilities are endless

If you want to check out more of our amazing UI kits and website templates, check out our template marketplace. There you can find some free UI kits and templates as well as our premium templates.

Also, checkout our post about free cloneable wireframe kits from the Webflow showcase. Get prototyping and let us know what you think in the comments below!

6. Networking and word of mouth

The number-one way to find quality clients is to get out and meet people (figuratively and literally) at non-design events

Once up a time, I’d spend all day at home, applying for mechanical engineering jobs in isolation. I was unsuccessful for months.

I did, however, make serious headway on my Netflix backlog. Serious progress, people.

Eventually, I gave up and focussed on pursuing a career in web design and development (which I was much more passionate about), and started getting out and socializing. 

Within weeks, I had job offers coming in from my loose-knit network of new acquaintances. It’s not rocket science: People prefer to hire people they already know and like — not the faceless folks clogging their inbox with links.

Notice how I didn't specifically describe who the people I met were? That’s because you need to meet all kinds of people. You have no idea who your next client will be.

But they probably won’t be at a web design meetup — those are filled with jobless designers. 

All of this is worth repeating: Go to any and every meetup that matches your interests, and simply tell people you’re a web designer. Watch what happens. Everyone needs a website, or knows someone who does. That's what’s so great about freelancing in this industry.

people eating and talking
Get outside. Talk to the humans you meet there. Repeat.

Some places to start meeting people:

  • Meetups
  • Sports events and classes
  • Cafes
  • Abroad (for some reason, people are a lot more open to talking to strangers while traveling)
  • Parties
  • Twitter
  • Slack groups
  • Conferences and conventions

Just keep in mind that, no matter the event type or place, you have to actually talk to people you don’t already know. 

Tip: Don’t be the typical “business networker.” Don’t bounce from person to person shaking hands, fake-smiling, repeating first names every sentence, and handing out business cards. Be legitimate. Make real connections. 

The other side of the networking coin — word of mouth — comes from building up a client base, having lots of contacts, and building your personal brand (with your blog, portfolios, and templates). This takes time. Do great work, treat your clients with respect, keep in touch with past clients, and follow the rest of the advice in this article, and you'll absolutely be fine.

With networking and word of mouth, you can easily reach a state of having more work offers than you can sustain—without ever actually working for it. When this happens, you can increase your rates. Ka-ching.

Personally, I turn down contract offers on a weekly basis. And they’re all the result of word of mouth and networking I did months ago.

It honestly doesn't take long to get to this point if you produce quality work and put yourself out there.

7. Hustling

Hustling is the art of working extremely hard and extremely smart. In the context of freelancing, hustling involves going out and finding work directly. For example: finding websites or businesses that desperately need your services.

Does your favourite pub have a terrible site? Why not talk to the owners and convince them they need you to fix it?

If you have the right personality, and the drive, this can be an extremely effective way to whip up some initial work. It just isn’t particularly glamorous. It also requires your repeated, hands-on time and energy. (In contrast, writing blog posts or setting up a portfolio one time can attract customers for years to come.) The success rate of in-person contact, however, is much higher. The trade-off is lower volume.

Bonus: Freelance.tv

Fresh out of the studio (or maybe his cool van) Dann Petty released Freelance.tv. It’s a series of 10-minute interviews with freelancers that explores how they find, work with, and keep clients (and much more).

As you may have noticed from reading this post (or maybe not), hearing from other freelancers about their experiences can be extremely helpful. Check out his new episodes and also his upcoming documentary, Freelanced.

Now get out there and find your next gig

If you’re sitting at home, desperately hoping clients will come to you, I have news for you: They won’t.

You have to put yourself out there to start, and show prospective clients that you have tangible, valuable skills to offer.

Luckily, this is an industry where skill and contacts trump all — education is irrelevant. So take advantage of that.

So to summarize, here are your next steps for getting clients and building your freelancing business:

  1. Build your portfolio. Make it gorgeous. Share it everywhere. You can use Webflow to do it yourself without coding.
  2. Create profiles on Behance, Dribbble, and Webflow to connect with other designers and potential clients. Use their SEO advantage to drive more traffic to your website.
  3. Create a profile on Upwork and Design Inc, and bid on contracts. Be confident, and don’t be scared by inexpensive competitors. Also use AngelList to find contracts with promising or established startups.
  4. Start meeting people. Get out, meet, and befriend as many non-designers / developers as possible. Be legitimate.
  5. Start a blog to complement your portfolio. Write thoughtful, useful content to establish yourself as an expert in your discipline. Let your personality shine through.
  6. Convert your websites designs to templates, and release them on sites like Webflow, CreativeMarket, and ThemeForest to earn passive income and awareness.
  7. If it’s your style, start hustling. Find people who legitimately need your services and tell them why.

But most of all:

"Do something! Even if it's wrong."

– My friend's dad

When you’re starting out, it can be better to do the wrong thing than nothing at all. In the process, you’ll learn, and you might just stumble into something that works beautifully.

Just try to not to be so wrong nobody will ever work with you again. Ever.

Now, stop reading, and get out there and land some clients!

Oh — and If you’re a freelancer, how do you find clients? Is there anything I missed?

Kate Donnellan

Growth Marketing Associate at Webflow. Irish, living in San Francisco. Takes photos of other people's dogs. Follow me on Twitter.


You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.