Do you create designs first?

I wouldn't say design but definitely some mocks. It's easier to code when you have a good idea of how you want your final product to look like, otherwise you drift into uncertainty.

Where’s the “sometimes” option?! 😄

I used to code first and that's how I ended up with wonky designs. Investing in learning Sketch or Figma is one of the best things you can do as an indie developer.

It allows you to iterate on your designs much faster than writing code as soon as you're familiar with the interfaces. I personally find Figma particularly intuitive.

I don't create designs before coding. I'm just like you. 😄

I sometimes look for inspiration on dribbble.com and then incorporate my ideas with HTML/CSS. That's my workflow for most of my HTML themes on buildfaster.co!

I mostly do a wireframe at least, It forced me to take all the layout and product decisions before I start coding, and it's easy to iterate over comparatively.

I mostly use whimsical for it

I would prefer design first, especially for complicated interactions. As you pointed out, that allows you to decouple design considerations from implementation details, i.e. I'm gonna center that section horizontally, but right now I don't care how (possibly using Flexbox later).
One thing I learned and began to appreciate more and more is that you need to come up with a design system first. This includes the available palette, fonts, spacing, border radius, etc. that you define and will use throughout your site / app.
In fact, I've been thinking about building a prototyping app, like Figma, but one that focuses on maintaining and enforcing such a system. What do you think about this?

I learned code on school and learned desiging at home. I love desiging, that's maybe why i always design first. I can code so i know what can and what not. If you are just a coder, if you enjoy designing, learn to design. If you do not like it, learn the basics and apply it while building!

What I've done in the past on personal projects that worked really well as to develop the entire site as a front end SPA (I personally prefer Angular) with no backend. This lets me play around with designs and iterate on the look and feel without committing much time and code.

Basically create all the Angular components with a service that mocks the underlying objects, but no API's, database persistence etc. This lets me fine tune the UX and design with real data, so helps with empty states, variable list lengths etc.

Once I'm happy I'll then replace the mock service with a functional back end.

I draw sketches(have a graphical drawing tablet on my desk), that helps plan the interface, architecture, database schemas, etc... not pretty but good to conceptualize.

When were were building Uclusion what we did was to wire frame out the basic flows to proof the technical side worked. After that we had design come in and do their magic. I figure It's much easier to figure out a design when you can see live stuff than completely in your head.

I'm all for building quickly... But without a design phase, you're building a house without a blueprint.

Design isn't just for the beauty of what you're building, but it also can help you make sure you understand every endpoint and page you will need in order to handle every case.

Sometimes I find myself designing and realize I completely underestimated the scope of an MVP, etc. Without a design phase, it's difficult to see the full picture in concrete form.

On top of that all, designs help you show off your product before you've spent all the time actually coding it. Even an incredibly quick dev (I think I'm fairly quick) will take a lot longer to code a UI than a bad designer will take to design it.

I used Ms paint if that counts.

I think you can create much faster by designing first.
Even if you use a piece of paper

More important than visual design is the underlying app/website design. What do you want to communicate to viewers? How do you want users to interact with your tools? What's the core value prop, and how do you maximize/emphasize it? How do you reduce unnecessary friction? These are questions that can be answered by iterating through mockups, but they can also be written down on paper, or mapped out through user flow diagrams.

Here's a writeup I did a bit ago on design process for static websites (i.e. landing pages): https://www.samsonzhang.com/2020/06/25/the-most-important-step-in-web-design-happens-before-you-push-a-single-pixel.html

My day job is being a designer and I usually recommend our costumers to finalize the design before coding anything – to keep budget as low as possible. On side projects I love to jump directly into the code and technically explore my design. It’s a passion project and I recommend doing what comes easy and makes you happy.

Designing first helps me make an idea concrete. It also helps me realize if the idea is bad. Basically another layer of validation.

When I'm sure I know what I want, then no. When I'm not sure, confused, or thinking about multiple options then yes – either with pencil/paper or Adobe XD.

I am more of a technical person, so I develop first and then go my way into designing. Everytime I have started designing first, I do a lot of improv.

I put a lot of effort into visuals, so it is not surprising I generally start with pen and (digital) paper. That helps with quick iteration for layout. Depending on the project, I will spend time on a few mockup iterations. Rarely do I mockup every screen, but after I get going, I reuse design components and elements.

Max hi! Interesting question. I would say def design. It allows you to think through the user experience, the logic of the product (and in some cases, you could even show it to the users).

I would say that first figure out the copy, then design, then development.

Interesting poll result so far, it's almost 50/50! While trying out some design tools this morning, I've found framer.com to be my favorite so far. It lets you add code components that can have state, which is super nice for making and showcasing prototypes. It also makes it super easy to create cool animations in framer itself and then implement these animations with code using the framer-motion npm package.

Does anyone have more experience with framer? What are your thoughts?

Edit: Just realized that I sound like a marketer, so just to make sure: I'm not affiliated whatsoever! 😄