
Ask HN: How do you design a website in 2017? - littleweep
I know how to BUILD a website but I&#x27;m curious to know modern workflows for designing a website before build out.<p>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&#x2F;web apps like Sketch, Webflow, etc.<p>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://www.awwwards.com/)
[https://dribbble.com/](https://dribbble.com/)
[https://onepagelove.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/](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](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.

