To all devs making their own products. What is your design process?

I make quick wireframes by hand at first to test different layouts and then design using Sketch. I found I tend to lose less time coding when I already have a design to guide me.

I don't like designing using prototyping apps because I can't, instead of that I just open code editor and start coding what I wanted to build then improve it based on feedbacks of friends.

Move fast and break things.

I look for some ready to use template for landing pages. For the application part I use material design system. It's not that glorious but it works fine for a start

it doesn't matter what you use. just use the fastest way you can make a mockup. for most it's something like Affinity. If you are faster with plain html/css also good.

Creating a ux/ui is more for yourself in the early stages. It can give you quickly a feeling of right or wrong. But a good ux is not everything and the risk is that it's a huge rabbit hole and you can spend months on building a nice looking product/ui. more important is to have an actual product market fit.

I don't tend to use wireframes. I have a rough idea of what it will look like in my head and pretty much start coding and tweaking the layout as I go.

Sometimes I find that the UX works ok during the development stage but then when I start using it for real I realise the UX doesn't work as well I thought during development but not I know what it feels like in a real usei cab tweak the UI and UX until I am happy

• collect data from clients
• solve the data modeling issues
• mock up entire project in whimsical
• est time and select a end date
• develop with whimsical open

My go to -

Design Inspiration:
• https://dribbble.com
• https://www.behance.net/
• https://www.pinterest.co.uk/

Mockup:
• Pen & Paper
• Adobe XD https://www.adobe.com/uk/products/xd.html

I build all my web applications in tailwind and vueJs and for mobile I use NativeScript.

Open Sublime. Write Bootstrap.

If it's more complex than that: Open Google. Type 'Free Bootstrap X template' and hack something together based on that.

For the project that I am working now I am using Bulma but with my own design style. Https://www.colorsandfonts.com

For this site I don't do mockup or nothing. I just go straight to the browser, it goes quicker for me this way.

But for example images, icons n stuff I do use figma.

There's something that you could use too they are in Beta but is a stunning product by @alexeeo, https://persp.info/?ref=caf

You design in the browser and then you can render it by pressing one single button.

I am a bit BS here because the are sponsoring my site this month but IMHO persP is coming strong.

Hope it helps

# Clarifying Definitions

The UI (meaning appearance and aesthetics) can typically be left to your framework (e.g. Bootstrap) for individual components. You still have to attend to this at the page-level though because although frameworks give you the tools for building out the page (grid system, etc...), you've got to think through the appearance.

The UX (meaning how the user perceives and interacts) is, again, often a matter of the framework when considering individual components:

• Are the buttons appropriate sized (Fitts's Law)
• Are foreground/background colors sufficiently contrasting
• Are keyboard/accessibility input functional

And like UI, the framework may give you some good tools for page-level (or cross-page) UX, but it won't give you any of the following:

• Your users' mental model of the problem domain you're offering a solution in
• Information Architecture (how things are logically arranged)
• Navigation paradigm (sure, you've got nav widgets, but how to use effectively?)
• Ensuring you've using proper input types (so easy to get wrong when developing on a laptop because it often doesn't matter until you're on mobile)
• Ensuring you've used proper aria tags for accessibility

# Overlap

Obviously there is a lot of overlap between UI and UX - they both need to be user-centric :) For example, color has an aesthetic quality and a usability quality. Together both impact my ability to experience, and the experience itself.

e.g. not-dark-enough grey text in a light font-weight on a white background - it might look classy, but I can't read it.

# My Process

1. Sit down with pen(cil) and paper
2. Write down the information architecture
3. Draft the page copy (if content-driven)
4. Sketch an overall layout of the page(s)
5. Build (using a framework - typically Bootstrap for me)
6. Refine/Repeat

I hope that helps a little :)

As probably evidenced by my lengthy response, I love this topic! I've been doing UI/UX Engineering for 20 years (15 years professionally). What further questions can I answer?

P.S. If you're interested in a UX crash course, you can check out the-ux-mini-course.com

UI Design: Lay down on a beach, close eyes, put on awesome music.
UI Testing: Get really drunk and then try to use the prototype UI.

What's been working for me:

Paper => Figma => Webflow => Export Source and Add Variables

I use a whiteboard (or paper and pencil) to sketch out the first UI design. I've used Figma, and it's a great tool, but I'm not sure it helps me very much when I'm designing and implementing everything myself. If I were designing something that another developer had to implement then something like Figma might be more useful.

Then it's just a lot of iteration on the implementation. Something doesn't look right, is too complicated/confusing, you're inspired by another app, etc.

I also write user stories: "As a ____ I want to ____ so that I can _____".

Some basic principles I follow are:

• Make commonly-used things in your app easy to find
• If you have to explain how to use something then it isn't easy enough to use
• Don't make your customers guess what something is going to do when they tap/click it (e.g. use familiar icons, label things well, etc)
• Be consistent: wording, spacing, colors, fonts, etc
• Good use of whitespace is important (don't jam everything too close together)

Currently my tendency is to use a material design library (e.g. Material-UI for a React web app, material-components-web for a static web app, etc). I like using styled-components in my React web apps too.

I have Balsamiq and Figma installed, but admitted: I do not use them whenever MVP'ing my own projects. For clients I do use them, because I want to set expectations, before getting into coding.

I use Bulma as a framework and got so used to it, that I stick to its conventions. I also get my inspiration from Bulma Builder. Isolated components (e.g. password strength meter today), I do draw out on paper. Just to get a feel of the elements needed.

My two cents.

Working alone, I just start coding having a mental design of what I want to do, that design continously changes based on the new ideas that I have.

For me this is the fastest way to work and also yields best results. I have tried creating a UX/UI mock-up or exact list of features, the problem is that whenever I start implementing it I get better ideas or I see new issues with the design, which would then have to be updated.

It really depends what we are trying to accomplish.

For prototypes or proof of concepts we dive straight into code. Then if we want to move forward we will polish it up with an Adobe XD design to flesh out the UX better.

For redesigns of existing screens the process is a little bit more traditional.

1. Create content / wireframe
2. High fidelity design in Adobe XD
3. HTML/CSS build

I use Affinity Photo as well, but only if I really need to create something custom. For the most part, Adobe XD takes care of all my needs and I appreciate how quickly I can create high fidelity layouts and designs.

Look up top color schemes: https://visme.co/blog/website-color-schemes/

Pick one that works great for your use-case. define those colors in a file to change later:
Primary, Secondary, Tertiary, Detail, Alternative.

Great, now you can just focus on layout. Most of the other comments here have you covered in that regard.