How do you mock up your projects?

Sketch, Figma, paper, you name it. How do you get started with the design process?

What's it like for you?

Kevin Flores

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

0 Likes
Sergio Mattei Author

Do you draw it out physically first?

0 Likes
Kevin Flores

@sergio I draw it out on a giant whiteboard, and define each component as i go along.

0 Likes
James Kenny

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.

0 Likes

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.

0 Likes

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

0 Likes
Fajar Siddiq

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
0 Likes
Ryan Bell

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

0 Likes

XD

0 Likes
Tomas Woksepp

XD

0 Likes
Micah Iverson

Almost never anymore for my own projects.

0 Likes
Stefan W

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

0 Likes

I 100% agree with this reply

0 Likes
Stefan W

thanks @akash , But don't get my post wrong. I don't mean, that "as a Maker we should do so". That's just how I do, when I am in Maker (Side Project) mode. I don't think it's really so good one, but can be very productive, as long it "paint's in head in right direction" :-)

0 Likes
Erik Griffin

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

0 Likes
Tomas Woksepp

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.

0 Likes

I sketch them, and Use Figma

0 Likes
Ryan Glass

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

0 Likes
Carl Poppa 🛸

Paper and pen all day errday !

0 Likes
Luca

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

0 Likes
someone

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.

0 Likes

Please sign in to leave a comment.