Ask HN: How do you design a website in 2017?

[littleweep]

I know how to BUILD a website but I'm curious to know modern workflows for designing a website before build out.

A decade (and a half?) ago, I was comfortable using Photoshop to mock up designs but that seems to have fallen out of favor for vector-based programs/web apps like Sketch, Webflow, etc.

So, HN, what are the tools you use for designing websites in 2017?

[mattkevan]

Pen and paper first, get it all worked out before touching a computer. There's nothing better than a big A3 pad to quickly iterate and try things out.

Once I've got a good idea of how it all fits together I'll create detailed wireframes in Axure to hand over to the developers. Then I use Sketch for design and Marvell for presentations. I also use Zeplin for hand-off to front end.

[matbram]

I first start with learning as much as humanly possible about what the client wants, is looking for, and is expecting.

Next I then go looking for inspiration from websites like

https://www.awwwards.com/ https://dribbble.com/ https://onepagelove.com/

Use that inspiration to figure out a general layout of the site and it's different pages, wireframe that up.

Choose a color palate based on what industry the site is in and other factors.

After that the rest is pretty much details and feedback from the client.

[herbst]

I am developer, never considered myself a designer. But some years ago i would spend days building a overall design. Today i just build with Bootstrap and let the design grow with the code. I do this for personal projects as well as customer projects (sold as agile design process).

[narak]

I've tried a lot of the newer tools, of which I like Sketch and Framer the best. However, nothing seems to beat paper+pencil and then directly going to code. Somehow, static design tools have never been able to capture what's possible in web, and what's possible now with canvas, SVG, CSS3 transforms, etc is even more than before. Recently, CSS Grid Layout went gold in major browsers, and Flexbox has been supported for a while, so there's no good reason for CSS frameworks anymore either (would read http://jensimmons.com/ for more on this). Exciting times in web!

[mod]

I was recently involved with an app that used MaterialUI components, and that went fantastically well. Given that I'm a developer, not a designer, it lets me pick the appropriate component, fill in the blanks, more or less, and have a nice-looking, responsive website.

It, of course, has the prerequisite that you're working with React.

[davidbanham]

There are lots of material UI libraries for other frameworks. I like Materialize which is just HTML, CSS and a little JS. Totally framework agnostic.

[zoria]

Pen and paper, then quick mockup using a lightweight and easy framework like mini.css (https://chalarangelo.github.io/mini.css/index.html), then actual design. Sometimes I stick to mini.css, sometimes I use something heavier like Bootstrap or Semantic UI, but mini.css is pretty good for building simple mockups for me and sometimes I actually stick with it for some simpler designs.

Photoshop is just not my style, however I have friends that do use it and are very productive with it. It all comes down to preference.

[wingerlang]

You could still use Photoshop though, just because Sketch is popular doesn't mean PS won't work. That being said, Sketch is super easy to use.