Design layout before coding

Hi…Guys… Any websites suggestions to design (manually) how a website should look, before doing the actual coding?

Some people sketch on paper first, then in an app like Figma (good for going from wireframe to mock up), Vectr (not quite as many options, but still promising and the built in tutorials are nice), wireframe.cc (super basic and simple, but just for wireframing). All of those can be used for free, though Figma has some limitations for free accounts. Wireframe.cc and Vectr can be used without an account. Here’s a tutorial on designing a site with Figma (touches on some design principles as well), and a follow-up that codes it into website.

Photoshop/Gimp can be used, but are a pain compared to programs designed for UI/UX development.

If it’s the design process itself you’re wondering about, here is a tutorial on design, here’s another, and Collect UI is an awesome resource for design inspiration.

4 Likes