How makers stay productive

Sketch. And I start my designs with a set of requirements. After understanding such requirements, I add the basic layers, tabs and navs bars if needed and then I take a basic structure like a cell and iterate it

For me everything starts on paper with a pencil. It's a great way to just play with my ideas. Then if I need to I will move to balsamiq if I want to work out a few things.

But I always go to html and css next. Usually I just create a folder and drop a index.html file and css into the folder and start to play around with the idea there. It lets me lay it out and just load some test data into it. I have spoken before how I have my own CSS template I'll either use that or copy the css from the current project.

I have a trick. I have a file I drop into the folder to turn it into a webserver thanks to nodejs this includes browsersync so every save the html updates in the browser for me.

It's a great way to just work through a design of an idea or how an element should work or flow. I just load my data as I want it.

Then I start building it into the full project, updating tests and away we go.

I draw a sketch of my idea (content and structure) with graphic tablet and Illustrator. I also make the logo in Illustrator.

Because no software can exactly emulate browser rendering, for the last couple of years I've been doing my designs directly in css.

Google Drawings, forces me to wireframe before I design / mockup.

I have 2 type of method. For technical process and sprinting process.

For Technical:

1. Paper/Pencil (Notebook)
2. Photoshop/Illustrator/Figma
3. Print it out (If needed for better visual)
4. Browse other mock up for examples/reference
5. I create each page/screens differently
6. I go from black & white, to colour to gradient

For Sprinting:

1. Notepad App to write notes
2. Photoshop/Illustrator/Figma
3. Use/Buy a template (Hack the design)
4. Create as many same pages/screens, then i change each of it like home, about, etc.
5. I go straight to colour and create different versions too

I'm still going back and forth between Figma and XD. Tbh, I think I prefer XD.

Almost never anymore for my own projects.

As Maker… I "paint it" in my head and hack it down directly in HTML. Not always good. Very rarely I use paper. At work, where directly hack is not an option I use Balsamiq WF's

I think there’s something to be said when starting out a new project for the first mocks to be without any “style”, that is focused only on the user journey, positioning of various features on the page, etc.

I feel if you add visual design elements too early it can distract you from the actual experience the product is giving as it’s hard not to focus on the way it looks and wanting to improve that.

So generally I’ll use pen and paper for early mockups or Sketch with only grayscale and really simple shapes. For high fidelity prototypes I haven’t really found a tool I enjoy yet. Have used InVision in the past, that works okay as an intermediate step

Nothing beats pen and paper. I'm very fast at both Figma and Photoshop, but the ease of just dribbling on a piece of paper lets you quickly dump what's in your head without putting minutes into each component.

Once I have the idea down on a paper, I go straight into coding. I used to use Photoshop/Figma in between, but it kind of feel like a waste of time after doing it so many times.

I sketch them, and Use Figma

I try to spend a week just thinking about it before putting anything down. Then pen and paper.

Paper and pen all day errday !

I use no-coding tools, mainly bubble.is and carrd.co :D

It depends on the mood I'm in :^P

Usually, I find it much quicker to sketch it out on paper. Just doodling with a pencil and quickly erasing the shit I don't like is always the fastest method for me. I don't have to learn how a specific tool / program draws boxes, I already know how to draw a box!

But, sometimes I do actually find it a little more helpful to plan out my designs in Figma. That's definitely my digital-tool-of-choice for mockups.