46

Does anyone here actually use UI kits?

4 months ago from , Head of Design

There's a ton of UI kits available, with seemingly more every day. For the most part they're well done, but I don't get their utility.

Surely anyone with the skills to use Sketch with a UI kit could design their own? If they don't, then that's what Wordpress themes and Squarespace are for.

The ones I've seen are so specifically designed that they must be almost as much work to customise as to create. Unless you want project to look exactly like it.

For example, when I worked for a web agency I tried to create a UI kit to use across all projects. I found that as each client was so different, it took more time to customise the kit than just starting again.

Also, they don't address the development side, meaning they may cut down a few hours in Sketch, but still have to be implemented from scratch in code.

I'd love to be proved wrong.

Where have UI kits helped you? How have you used them? Do you use them in production?

43 comments

  • Tyson KingsburyTyson Kingsbury, 4 months ago

    sure. I've used them a time or two.

    For me, it's along the lines of: I've got a project, and the turn around time is incredibly tight for the 'first pass' ....as in, the client wants to see a mockup or idea in the next few days... happens more often than I'd like, but that's the business. So, you start coming up with your general ideas, layouts etc... but, you just so happen to come across a UI kit on your travels... and it's very close to what you're trying to accomplish...or more likely, there's 'aspects' of it that do.

    so.

    you buy that thing, or download it or whatever, and use the pieces that you liked, in order to create the project.

    it's not that mysterious really.

    It all depends on the situation, or the place you work. Sometimes you need a head start on a project, sometimes you need a few pieces that you don't have time to make yourself...but they're crucial to your project, so you buy em.

    It's honestly not necessary to rebuild the wheel for every single project that comes across your plate.

    26 points
    • Sylvain MarettoSylvain Maretto, 4 months ago

      Couldn't be more accurate. Just start thinking at home many websites have been built with Bootstrap and are still online, your project will survive using some components from a (usually a lot) nicer kit than Bootstrap's.

      1 point
  • Steven CavinsSteven Cavins, 4 months ago

    No, but I like to look at them.

    13 points
    • Louis-Xavier Lavallee, 4 months ago

      I'll bounce on Steven's comment.

      Honestly, when I was Head of Design at Sharegate, we built our UI Kit, the most useful thing we found from looking at other's UI Kit is looking at the way they built it. That gave us a lot of insights as to what are the best practices to maintain them as well.

      In reality, the real game is maintaining the DEV kit in sync with the UI kit. That takes a whole lot more than just tools. You need disciplined people, and you need easy processes.

      4 points
  • Bobby WomackBobby Womack, 4 months ago

    As a developer, I've got a positive experience of using UI kit even without design skills at all. It really saves a lot, if there're a lot of components offered for every case. Specs, grid, indents. Nothing to worry about. For our small team without hiring a designer it was lifesaving! Purchased some kits from Greatsimple before, but after we've moved to Figma finally those guys are the best at building UI systems, IMHO

    9 points
    • Jonathan ShariatJonathan Shariat, 4 months ago

      This has been the main use from what I've seen. Devs and startups who don't/can't spend on design at the stage they are in.

      2 points
  • Max Quinn, 4 months ago

    I never used to see the point but am definitely coming round.

    When I've found them most useful is when working with frontend frameworks on products where we're designing quickly and don't need something heavily customised. Eg: A company admin system that's in no way customer facing.

    The developer is using Semantic-UI frontend framework for example, with only minor styling tweaks to bring it on brand. But the thing still needs designing in terms of putting all the components together in a logical way. Having a well set up Sketch file with all the elements of Semantic-UI helps me speed up my workflow while also ensuring I stick within the constraints.

    I can also see the use outside of that context when creating a big design system, but only really for the sake of smaller components. Having all buttons, fields, dropdowns, calendar pickers, etc all ready to go in well constructed symbols saves a tonne of time, and by editing just a few colours they can be full customised to the large majority of brands.

    As a slight side note: they can be really useful to learn Sketch techniques, particularly in terms of how to best nest symbols and create components that are very responsive and customisable. They're largely created by people who are in the nuts and bolts of UI every single day, so as someone who's spread across UI/UX/Strategy I'm delighted to be able to work off their deeper expertise.

    5 points
  • Cameron Vaea, 4 months ago

    Hey man,

    Wanted to share my experience. Currently using Figma to turn around designs quick in a startup whilst also simultaneously trying to:

    1. Minimise future design debt while we work rapidly to get a product to market
    2. Works cross-platform and cross-product
    3. Has available react resources to help our developers work more efficiently

    This came in the form of:

    1. Free Material UI Kit resource for Figma - which I can use to spit out the UI for patterns quickly
    2. material-ui.com - which has a large part of these components + interactions built out for our devs

    --

    Half my career has been split in agency and product and can't really find a use for a UI kit across multiple brands, I believe they're necessary when it's 1 brand across multiple applications when the brand meets some form of maturity.

    4 points
  • Kasper J, 4 months ago

    Where do you get your UI kits from? I've tried a few from UI8, but found the quality to be disappointing.

    2 points
    • Mike A.Mike A., 4 months ago

      Can you elaborate on the disappointing aspect?

      0 points
      • Kasper J, 4 months ago

        It looked like it was put together overnight, spacing was all over the place with sub-pixel values and inconsistency throughout. Maybe I was unlucky but the first two attempts made me question whether I can find anything that won't require me fixing it afterwards.

        1 point
    • R. KamushkenR. Kamushken, 4 months ago

      Indeed! UI8 turns into a resource where's quantity gets over the quality... Mostly! But the exceptions exist. By the quality I am not considering the graphics, It's more about to care of further implementation for possible production.

      0 points
    • Sjors TimmerSjors Timmer, 4 months ago

      Quite a fan of the work Great Simple Studio has been putting out, such as https://files.design/

      1 point
  • Alexandru NăstaseAlexandru Năstase, 4 months ago

    I never used already made UI Kits, and I'm not really keen on starting. Instead I use what I call a UI Kit Methodology - I have a personal set of steps built over the years that I follow which include usage constraints, design constraints and development constraints which helps me focus on design.

    1 point
  • CTodd LombardoCTodd Lombardo, 4 months ago

    Heck yes. Why reinvent the wheel? Though I rarely ever use them without customization or tweaking. Actually, I've never used one out-of-the-box. They save me and my team a ton of time as the components are mostly designed.

    The counter argument is you still need to edit/tweak and this could actually take more time then creating from scratch, but I believe we still save time in the long run.

    1 point
  • Kyle ConradKyle Conrad, 4 months ago

    I think the "wireframe" UI kits are the most useful, as I can easily spin up a bunch of wireframe options without worrying about styling.

    1 point
    • Erin GwozdzErin Gwozdz, 4 months ago

      Came here to say this. I'm really not a huge fan of using Balsamiq so having a wireframe UI kit helps make sketching faster.

      0 points
  • Benito Vergara, 4 months ago

    I use them all the time.

    1. For quick mockups/proof-of-concepts.
    2. To fill-in nips and tucks, especially for MVPs.
    3. For clients that don't have a budget.
    1 point
  • Yigit PinarbasiYigit Pinarbasi, 4 months ago

    Time to time, yes but official GUI kits of Apple / Google are much more helpful for me actually.

    1 point
  • Ahmed Sulajman, 4 months ago

    I use free UI kits, especially when I need to mock something very fast.

    0 points
  • A. N.A. N., 4 months ago

    Apple or Google UI kits I use all the time. But design UI kit never. Don't really see the point since you're being paid to do exactly that, that's just being lazy or you don't have the skills, and looking from a client point of view, I wouldn't want to have a generic product or website.

    0 points
  • Bugsy SailorBugsy Sailor, 4 months ago

    Absolutely. I'm more developer than designer, so when I need to build a site quickly I love to use them. Designing slows me down, so I love just being handed something and doing what I know how to do.

    0 points
  • Joacim NilssonJoacim Nilsson, 4 months ago

    I use the goodies then design the rest myself :)

    0 points
  • Tait BrownTait Brown, 4 months ago

    There are two main types I use, an in-house UI kit and a third party one. When I was consulting with big enterprise companies I would often build a UI kit from scratch in Sketch to greatly accelerate the prototyping and mocking phases. Now that I'm back in a product company, it's the same kind of deal, only I've got more time now to flesh it out. What is the official, branded way of presenting x information, or y data.

    With third party ones, I find they're only really useful as a consolidated Pattern Tap replacement. If I want to see some interesting ways of presenting a chat UI, I can generally find 3 variants per broad-based UI kit that are somewhat grounded in the real world. If I do the same search on Dribbble I will find a lot of unrelated tag matches, and a lot of fanciful, impractical ideas.

    0 points
  • Jan SemlerJan Semler, 4 months ago

    Sometimes, it is good to kickstart a project. When you need a visual concept to show it to the clients for pitches. The others are templates.

    There are two kind of kits. One that works with the visual appeal the other one are template kits.

    If i work for a company who has to build up a new system it would be worthy to have look on new template kits where you have the groundwork setup. You would have cheaper development costs and when the template is flexible enough to alter the design. The other ones are just visual comcepts where color fonts work in harmony, you know the drill.

    Be aware some of them might look good but lacking of systematic or are complex to use and to unterstand.

    I come to the conclusion to build my own template and habe all nessecary elemtns as template. I use kits to have a look on how others build up their systematic to learn an adapt it to my template. My goal is to habe a flexible template for my needs.

    0 points
  • Jon MooreJon Moore, 4 months ago

    I'm biased because I'm one of those UI kit creators, but I absolutely could not do my job without the kit I've created.

    I've used it every single day for 2 years for dozens and dozens of client projects. It has saved me thousands of hours of work.

    The distinction I make between UI kits and what I call a starter kit is that my starter kit is much more akin to a boilerplate like Bootstrap.

    I spent a ton of time perfecting the basic elements and components of a design system, constructing everything with styles and symbols. When I start a new project, it might only take me 20 minutes to customize the system to look the way I want it to look, then I'm ready to start building pages.

    It's a fantastic place to start. It eliminates 100% of the set up work, and gets me about 90% of the elements and elements I'd ever need.

    UI kits are usually overly stylized, or too designed toward a particular use case. If you're not designing that very specific music app, then it's a useless UI kit. And don't get me started on how poorly they're constructed from a layer/naming/organization standpoint. They're all show, but no support.

    If you're interested, can check out the system I designed called UX Power Tools.

    We're gearing up for a massive update in the next week or two with detailed documentation and usage examples...all tied directly to symbols and styles. As you make updates to colors, fonts, and symbols, 35+ pages of documentation update automatically.

    0 points
    • Tait BrownTait Brown, 4 months ago

      I didn't downvote, I'm only reading this now at -4 votes. My guess is people are probably reading this as self-promotion or spam. Shrugs.

      1 point
    • Mike StevensonMike Stevenson, 4 months ago

      Hey Jon,

      I've checked out Power Tools before but I never pulled the trigger because I didn't see what it included for the price that's different or better than other UI kits.

      I'll admit I don't use them often, but it seems like yours is pretty bare bones in that it allows a lot of creative freedom when making customized designs. Kind of like a boos-trap for Sketch.

      Can you explain why yours is different/better than other kits?

      Thanks!

      1 point
      • Jon MooreJon Moore, 4 months ago

        Hey Mike,

        We've designed an intentionally vanilla system more akin to Bootstrap because every business has different needs, a different brand, and different requirements.

        UX Power Tools is a collection of ingredients, not prepackaged meals.

        At our agency, we use it every time we start a new client engagement. We spend a hour or two customizing it to fit their brand and/or matching their existing product (down to specific button and field styles), then jump right into production design. Because it's built with styles and symbols, it's incredibly scalable and easy to maintain.

        Last month, a client wanted to update the font and brand colors of the entire app. Our designers used to have to spend days updating hundreds of screens. Now they make a couple changes on the style sheet in UXPT and the changes cascade throughout the file. What took days literally takes minutes.

        We don't want our designers wasting time recreating the same components over and over again. So we built them perfectly (for us) once, and reuse it over and over and over again, making tweaks to fit the client's needs at hand.

        Here's a peek at our forthcoming update.

        https://imgur.com/a/b8DiR07

        -1 points
    • Bart S, 4 months ago

      It's downvoted because half of your post is self promotion. You even put extra attention on the link to your product by making it bigger and bold.

      -3 points
      • Mike A.Mike A., 4 months ago

        What happened to DN that it is wrong to talk about stuff you create? Jon's comment was relevant, he has a HUGE experience in this area and I don't understand why it gets downvoted.

        6 points
        • Jon MooreJon Moore, 4 months ago

          It’s okay. I appreciate your kindness. I took an opportunity to share something I created and it came across as too self-involved.

          It can be pretty discouraging though as it relates to sharing anything you create though. I can only hope my contributions to the community help at least someone do their job a little better, or work a little smarter.

          Thanks for your comment, Mike.

          0 points
        • Bart S, 4 months ago

          I'm not trying to downplay his product in any way, I actually used UX Power Tools a long time ago myself and I liked it. Hell if I think of UI kits, UX Power Tools is one of the first that comes to mind since I've seen it everywhere for quite a long time already. But if I'm looking for genuine opinions on why I would use something, I wouldn't be interested in hearing a creator of that something praise his product to me. Of course he's going to tell me it's awesome and the best and it improves his workflow in every single way possible. Why wouldn't he?

          If I'm asking 'why would I watch TV on a TV screen and not on my phone?' and Philips would respond 'well we've watched countless of hours of TV on our TV's and it's been awesome looking at our HD 4k screens because they're the best' it wouldn't make sense to me either.

          I do have to mention that the big self promotion link has been edit and toned down aswel since I posted my comment.

          2 points
    • Francezka KuwalskaFrancezka Kuwalska, 4 months ago

      Not losing any last chance to put the link to your average product. And there's nothing related to UX, you're misleading a user

      -4 points
      • Jon MooreJon Moore, 4 months ago

        Could you explain what you mean by your last sentence?

        0 points
        • Selv Grimm, 4 months ago

          I think I can take that: What part of the package has anything to do with UX? It's all just visual elements of various quality. I don't even see anything about the context in which a specific element should be used, guidelines etc. And yet you call it a "UX Power Tools" which suggests some kind of Design Language/System, with study backed patterns of interaction, best practises for personas etc. Anything that would be usefull or even usable from a UX Design perspective.

          0 points
          • Jon MooreJon Moore, 4 months ago

            https://imgur.com/a/b8DiR07

            I appreciate your tact and thoughtful response. Thanks for sharing your opinions.

            In my personal view, the design community has taken up a great deal of gatekeeping around design terminology. They spend more time arguing about "what is" and "what isn't" than they do improving their craft. There was never any intention to mislead anyone. It's simply our name for a collection of tools that will help you spend less time fiddling with UI so you can spend more time on the user experience.

            1 point
  • Febril CuevasFebril Cuevas, 4 months ago

    UI Kits were incredibly useful while I was in school. These day's at work they're not as useful but I still appreciate them.

    0 points
  • Craig McLachlan, 4 months ago

    I use them very occasionally for design pattern inspiration or for visual inspiration. I've never used one as it's intended, as a drag and drop library for your project.

    The initial draw of UI kits is if you need to work quickly. But you soon find that, as you mentioned, customising for your brand identity, your content etc leads to more work than actually just creating your own assets from scratch.

    0 points
  • John PJohn P, 4 months ago

    I kinda understood them in the Skeu days where you're basically paying for someones artistry who knows how to make nice looking buttons or whatever. I can understand that someone has the skill to drag and drop a UI together but doesn't know enough Photoshop tricks to make these sort of controls.

    But these days all you're buying is a bunch of colors and flat rectangles, I don't really understand what person would be able to make something with a UI kit like that successfully but not just make the elements themselves (excluding icons).

    0 points
  • Thomas Michael SemmlerThomas Michael Semmler, 4 months ago

    I don't see much any in a UI Kit for people who get paid to deliver design work. Maybe if your product doesn't have a designer?

    0 points