18
39 Comments

Design & UI/UX takes me so long- am I doing everything wrong?

It always takes me forever to figure out how I want my UI/UX and then implement it.

My general tactic is

  1. Find inspiration UI/UX. For example if I want to create a market place I look at fiverr. Or if I'm just adding a small feature to my existing product, I might look on dribble or one component of some site.

I have to make sure I have a mobile version and desktop version.

  1. Sometimes I then take the inspo to photoshop to build a mockup based on the inspo I found, unless the inspo is identical to what I'm making.

  2. Sometimes I have to create illustrations in illustrator if the ui calls for it. To speed this up I sometimes find svg's online and alter them.

  3. Build from there. I'm using material UI. If I got the inspo from an actual site and not just a screenshot I can try to look at their code for help.

This takes a while and doesn't always come out great if I can't find good inspo.

Does anyone have any advice for how to cut down or speed up any of these steps in planning and implementing your UI/UX?

  1. 4

    For a fully custom design that looks very unique and polished compared to what’s out there, probably no fast way of doing it.

    However, there’s still usefulness in learning UX patterns. There’s universal web design patterns that are regularly used—best way to make a form, best way to make navigation, etc. that make you faster at designing and making user friendly experiences. But, the more you use patterns, the less unique your site will look. So, it’s a tradeoff. The opposite end of the spectrum is using a pre-built theme.

    One other part to consider is when you build many pages, you will want to design your own cohesive theme. You may be using a color system, grid system, typography system, etc. that help you narrow down the choices you make. That way, you aren’t starting with a blank page, you’re starting with existing design tokens and components that you compose into a layout.

    Definitely would recommend https://www.refactoringui.com/book and https://designingui.com/ (among other resources)

    1. 2

      Exactly, like everything in life, if you want something great, it takes time. There's no way around it.

      Those info products look amazing 😮 Thanks for sharing those resources 💪

    2. 1

      Thanks I haven't tried a pre-built theme. It would definitely help for common components like navigations and landing pages.

      I also get stuck on things that are more rare components that I'm not even sure if ui kit would have or I can't even visualize it myself. But maybe some of these dashboard kits would have lots of ideas I could piece together or could inspire me.

      Thanks for the resource recommendations too

      1. 4

        Unless you are targeting devs and react folks I think pre-built component libraries like Chakra or Tailwind should shorten your time to market. They are very oversaturated in our bubble, but for outside world it is still kind of a unique look :)

        1. 1

          Tailwind components also look amazing. Because of customization, I'm rarely noticing the use of tailwind components on SASS websites (even though I'm pretty sure many of them do).

        2. 1

          yea my users definitely would not care! they just want a working usable site that looks nice. By "more rare components" I just mean sometimes there's a feature I want to make that isn't common so I have no clue how to design it. Like in my wishlist app I wanted to give wishlist owners the option to update gift givers on the status of the gift. But it was hard to find similar features on other sites for inspo and a good flow for this processes. But maybe tailwind or chakra can help, I haven't tried them.

  2. 2

    I run an Designjoy.co by myself and manage 30-40 clients, so needless to say I've mastered the art of designing fast.

    I'm constantly surrounding myself with good UX/UI. Most everything I do is simply a version of what I've already seen. And naturally, the more you see, the more ideas you'll have when you approach a given scenario.

    Constant exposure is key. There really is no other way.

    1. 1

      Any recommendations for how to surround yourself with good UX/UI? I find it hard to find examples of things that you might not see if you're just a visitor of a site, like dashboards.

  3. 2

    You start with the problem. Design is creating solutions for users specific problems. When you take inspiration at the beginning, you can miss the real problem and solution. You can read "Design Sprint A Practical Guidebook for Building Great Digital Products by Richard Banfield, C. Todd Lombardo, Trace Wax"

    When you reach the wireframe stage and decide what you do you can use Figma (figma.com) and any UI kit. At this stage, I can offer to start creating a design system. Colours, fonts etc. After that when you need to use components (reusable elements) take them from UI kit. You need input filed? Take it form material design. Etc.

    This process could look longer but believe me it will shorten your product design time.

  4. 2

    In fact, sometimes, a good designer is a designer who have the relevant inspiration sources.

    Check Awwwards, Mindsparkle Mag, Creativereview. Dribbble is nice but most of designs are not deeply crafted for functional purposes, only aesthetic.

    Btw, as a designer, a cutting edge copywriting is way more important than fancy visuals. Brings a subtle personality in your ui bu spending time on typography.

  5. 2

    You need to take inspiration from this instead:

    "If You're Not Embarrassed By The First Version Of Your Product, You’ve Launched Too Late"
    —Reid Hoffman

    Also: https://www.instagram.com/startupwithhammad/p/CWz9WMVlBzt/?utm_medium=copy_link

  6. 2

    It' worth it. I spent a lot of time building out components like Navbars and Landing Page Sections and I felt really bad/insecure spending that time.

    But now I can reuse those components and build out UIs very fast. So think of it as an investment. :)

  7. 2

    If by material-ui you mean the React material ui library at https://mui.com, then depending on what you're building have a look at https://mui.com/templates/

    Particularly for admin dashboard layouts (not sure if that's relevant to your product) I find using boilerplate like that saves a lot of time. Although some of them are too fully featured so it becomes a pain to remove stuff and clean up the code base!

    UI/UX is hard (UX in particular)... my advice is take your time initially really thinking it though will save you time in the long run... maybe that doesn't fit with the super quick to MVP idea around here... but bad UI/UX will kill your product and personally (as a 'full stack' dev) I think bad UX is often one of the harder things to refactor late on and can even lead to a messy code base to non obvious UI/UX stuff, e.g. if you start changing back-end/API code to adjust for the weird UX logic. A landing page or something, sure spit it out as fast as you can, it's easy enough to change later on, but heavily functional web based software... it will take a while to get the UI/UX right. I suspect you're likely building products that require a more thought out UX than the 'I made it in a day' crowd, so don't feel rushed, if anything UX mistakes will only add time in the long run.

  8. 2

    ui design is most crucial part because you are giving birth to an idea. Your workflow is slow, prefer figma or xd over photoshop, create components like header footer blocks sidebar etc. First start with a limited color palette, leave every illustration/picture work to later. You dont need images to be ready texts to be ready, quickly place boxes and iterate ideas.

  9. 2

    It is better said in other comments but I want to reinforce that designing UI/UX in advance of validation of the solution is only good for pure research projects.

    If you are trying to achieve revenue, you want to implement some preexisting interface.

    I have used bootstrap-based wrappers. The first and only SaaS I have built and sold I used a theme from WrapBootstrap. It had ever possible user-recognizable element.

    Sure there are cooler looking ones but all the hard work was done. You can change the colors, but you don’t even have to do that.

    On my last saas, I didn’t even rebuild the JS or CSS bundles. I just overrode the css classes I needed to customize the color.

    Again , if you are interested in ui/UX and are learning and practicing by all means experiment. But otherwise just use well understood interaction and pay $14/$30 for a complete library.

    If getting hung up here is an issue, you’ll be confronted with multiple times prior to actual “launch” that will make you feel the same way. Landing page design, copy, etc.

    1. 2

      Thank you! I wish I knew about this UI kits before I launched. Maybe it would have saved me a lot of time.

      Even after revenue, I still have very limited time and money, and so I think a ui kit might be really helpful to try to incorporate in. Although I have never tried one.

      " just use well understood interaction" what do you mean by this?

      1. 1

        You are welcome. Yes, I highly encourage this. There is a mantra among design people that “you can always tell a site designed with bootstrap.”

        This is said with scorn or derision. I think these folks have never brought a product to market on their own, and/or their salary depends on this FUD. They want people thinking they need some custom layout to be successful.

        By “well understood interaction,” I mean, if you have a setting with four options, use a drop down widget. Don’t create a new four way toggle.

        Or if you need a way for the user to choose a time, don’t create an analog clock where you can drag the arms into the right place. Use whatever the most successful consumer facing SaaS does.

    2. 1

      So you use a theme- this is like a library of compenents with the code for all the components? Some people in the comments are also talking about UI kits for like figma, it sounds like figma ui kits are not the code, just visuals. If you use a theme do you also need a ui kit to map out the design first?

      1. 1

        I'm talking about completely finished webpages and every UI element / widget you could possibly need to put on them.

        Look here for an example set of Form Elements included in the ColorAdmin theme by Sean Ngu. (I have no affiliation with this dev or the site, I've just bought this and other themes like it for myself and clients for building SaaS.

        When you buy this theme, it includes all kinds of ways to build it using SASS and proper tree shaking of only the JS you want. But it also includes a fully rendered copy of this live preview that uses a large but all-inclusive .js bundle you can just use with no further steps.

        You can disassemble the above linked page into templates, starting with a base template. Then you factor the Sidebar and main body into their own sub templates and include them in the base.

        Then you have basically have blanks you can fill up, creating new pages just duplicating a prior and say, updating the body template.

        Once you have that high level templating set, let's say you wanted to have a page with an inline form like at the very bottom of the above link.

        You can go to this Form Stuff -> Form Elements page on your local machine, right click the box, and literally Copy Outer HTML on the entire row. This will get you a bunch of stuff you don't necessarily need. But you can just strip it out

        If you don't want it in a panel, you can use bootstrap's row and class system to lay it out anyway you want. These themes have included utility classes like p-t-10 to add 10 pixels of padding to the top of an element since way longer than Tailwind re-popularized utility classes.

        Django is particularly well-suited to this kind of page building because of the inheritance-style of templating it uses.

        I am sure you can use Figma to render code from UI elements but frankly WHY?

        On the SaaS I sold, I literally used jQuery and another template from that site the entire time. It did not matter!

        On the site I'm using now, I have zero jQuery, only ES6+ vanilla JS. But I'm still using a template just like this because I can always click through the set of UI elements here and just pick out what I need with perfectly laid out copy.

        And while you can do a lot to make your template look different or even use a lot of swifty js to make normal UI widgets offer AJAX validation etc, you mostly don't have to. You don't even have to change the colors.

        But most importantly, you don't spend time wondering. You just build the pages the app needs and focus on the value.

        I really enjoy working with React, but this kind of method is a major unfair advantage over SPA applications.

        SPAs are cool sometimes but a huge pain all the time.

        You rarely need to manage state on a loaded page SaaS page and when an effect-like state is needed some basic JS / ajaxy stuff can handle it.

        People sink tons of time and IMO the wrong direction for starting out a bootstrapped SaaS product.

        One. more. thing: templates like this often include landing pages and the above is no exception. see here which again you just copy paste this whole thing, properly include the css and js and start cutting out unwanted sections and editing the copy.

        This kind of stuff is how people "build it in a day." They know how to quickly modify stuff that is well built / responsive etc.

        1. 1

          Thanks for the in depth answer. I'm still taking in a lot of what you said.

          "I am sure you can use Figma to render code from UI elements but frankly WHY?"

          I haven't used Figma yet so maybe I'm misunderstand it's purpose. But wouldn't it help to map out the ui and user flow before you use the templates you're referring to? Isn't that what figma is for?

          For example, I'm trying to build dashboards for wishlist owners on my wishlist web app that needs to be responsive. I'm NOT looking to make it extra cute, just functional and clean. But I feel like I would need to map that ui and user flow out first before grabbing pieces from a template because it may get complicated especially on mobile.

          So if you don't use Figma, is there another way you visual map out what you want to do with parts of the template before you start?

          I hope what I'm asking makes sense, this is all new to me!

          1. 2

            I think it is good to rough out user flows.

            However, even if you aren't hooking anything up or breaking up the templates, you can just literally copy/paste the entire pages I linked above, and start hacking the content and layout in a static HTML view.

            Ex. change the content in the menu. Put your brand image in. Write your own value proposition statements. etc.

            For the dashboard, literally just cut out all the Form stuff on that page and then put it back in so it has the things you want.

            As static HTML that doesn't do anything, you'll have a "high fidelity" design of your product that you can open locally in a browser that you can then go and make dynamic. All of those templates are mobile responsive! So you can immediately test how it looks.

            Maybe figma does something like this, but by using the web templates from the very get go, you get practice doing the same css / class changes you'd need to do to the final code anyway.

  10. 2

    It seems like you're trying to make everything look very good. You don't want to cut corners.

    IMO that's a great strategy, but the reality is that it will take more time. There's no way around it.

    Or there's the ship fast at all cost strategy, which I also appreciate.

    Both are valuable. 💪

    1. 2

      I'm not trying to make it look REALLY good, I would definitely settle for OKAY! I just don't even know what approach would look like.

      I'm always seeing people who are like "I built this in a day" and to me their ui looks great. I just don't know how they do it.

      Some people in this thread here have suggested ui kits which I've never tried. I'm making everything by hand, except for material ui which the free tier isn't much of a ui kit. I think being self taught I might not know about some of the common approaches to speed things up.

  11. 2

    I think your tactic is fine and the mistake makers can make sometimes is to focus too much on the uniqueness of their website/product and not enough on the clarity or usability.

    What you want is to put it online as soon as possible, so spend time on what bring the most value the quicker to your users. So my biggest adivce is not to reinvent the wheel, check how others did, put your touch on it and let's go. It'll be good enough for a first version (and if it resonates to your users, you'll be able to improve it over time).

    (shameless plug) I'm running a website that has this exact purpose: let you find UX/UI inspiration from the best web apps so you don't spend time looking for the right one → https://nicelydone.club

    1. 1

      "is to focus too much on the uniqueness of their website/product and not enough on the clarity or usability"- this is a good point that I learned early on.

      Your product looks cool. It sounds like something I could use. Does it also have mobile views? It's really important for me to see how the same flow should look on mobile.

  12. 2

    I do get stuck quite often with the UI/UX - for me the problem usually stems from going straight into high-fidelity designs without giving it too much conceptual though beforehand. The solution usually is putting a hat of a product owner / designer and booking (with my own boss - me :) a day or two to do design only and not touching code at all. You seem to be doing the same mistake by going straight to look for design inspiration or reviewing illustrations.

    When I'm stuck, the process I usually follow is zooming out and going into more details step by step, asking the following questions:

    1. What is that I'm actually trying to build? What is the main goal for the user? This could take a form of writing some general user stories that apply to the product that I'm trying to build. This is text only, no design. (Thinking as a product owner)

    2. Assuming that the result of the step 1 is acceptable - how will the user flow look like? Do I need to collect any data on the way? How will the solution fit into the application? If I have a couple options, which one will have the lowest engineering cost to build? This step involved literally a rough story-board of sketch different screens, how they connect and what data flow looks like. The UX patterns that someone else mentioned in the comments might be useful here. (Thinking as an UX / Engineering person)

    3. Going into a more high fidelity design. The research beforehand might involve looking at competing / similar products (they invest a lot into A/B testing and probably solved a lot of problems before) and looking at Dribble for some design inspiration if needed (for colours and styling only). I do designs in Sketch but usually jump into code at this point as I have most of the UI elements coded up from different features and quite often it's an exercise of gluing things together quickly. (Thinking as a UI designer at this point)

    4. User testing what I've built. Throwing someone into the feature live and seeing how long does it take them to find and understand what I've designed / built.

    Two more things to mention:

    1. In general my advice is that it's better to have a product first that has very minimalistic and simplified design but works well than having something beautifully designed but overcomplicated and working like crap. If you're building the thingie yourself, you have limited time and energy resources. Done is better than perfect and if you get stuck on polishing the designs / look and feel too much you might get nothing done at the end (been there done that).

    2. As for inspiration source - using Dribbble / Fiverr as a source for how things should be done UX wise might not be the best idea. Very often they will focus on design over function. They're good for look and feel but shouldn't be a source of truth. To see how actually features should work go to products of big established successful companies that have spent a lot of money on UX and marketing research. Very often, you'll get answers immediately and then style it the way you want.

    1. 2

      Thanks for this in depth answer!

    2. 1

      Why would fiverr not be good to look at for UX? They are a big established company, I'm sure they've spent a lot on developing their UI, no?

      1. 1

        I thought you meant private portfolios of Fiverr's sellers, not the company itself. Fiverr itself is pretty well established.

        1. 2

          Ok I thought that's what you meant, just wanted to clarify as I copy fiverr's UI a lot and wanted to make sure I wasn't making a mistake. But yes I see what you mean and how that applies to to Dribbble/portfolios.

  13. 2

    Hi Dashiell,

    You dont mention Figma or similar app? So I am wondering if I fully understood your question.

    I was using Balsamiq but then found Figma. It has a load of kits, windows, buttons, screens and enough templates to build reasonably quick designs.

    The final Figma result, also doubles as a prototype, a presentation and even some possibility to use as instructional material. But the most useful, the actions between screens and functions.

    I got a sense that effort in design slows you down in the immediate or short term, but it sure as heck speeds you right up in the long term. :)

    Cheers

    1. 1

      This is a great suggestion. Seems a lot of people are using some sort of kit and I am not. I think that would speed the process up a lot. It's not only that design slows me down but sometimes I feel like I do the design really wrong because I don't have a good example but a kit would probably help with that.

  14. 2

    I personally find a theme I like that is in line with what I am doing. Then I just get that and force myself to only use elements that are there in the theme. Only if I really need to do something different do I start playing around with custom parts.

    I found that really speeds up things and give you a good foundation in terms of looks and usability. A lot faster than starting from scratch.

    1. 1

      What do you mean by theme?

      1. 2

        Something like @Michael_Andreuzza Wicked Templates or something like Themesberg's dashboard theme.

        Those are just two examples I have used, there are TONS of options out there depending on which frame work you want to use.

        I find those premade templates really useful. They usually cut down my time by 70-80% especially for apps. Website illustrations still take a little time, but it is a lot faster this way.

        1. 2

          thanks! I've never tried themes/kits

  15. 2

    well, first of all make sure you have your copy written, the you can start designing.

  16. 2

    I often struggle with the same thing. Often I get really stuck on these things and simple features take way longer the build.

    I haven’t really found the answer to your question, but when I find my self in that situation I just try to forget about it and make it work. I’ll focus on the UI / Design later

  17. 1

    I am a frontend developer. Contact me and I will help you.

Trending on Indie Hackers
Share your product or landing page, and I'll give you product design advice 126 comments How do I transition from a wantrepreneur to an entrepreneur? 48 comments Share your project below👇 and I'll share it with 3,000 newsletter subscribers 36 comments Building a microsaas in public 18 comments App Stores are powerful search engines 15 comments Working towards an MVP 10 comments