
Ask HN: What is the best way to build a decent web design? - gyvastis
Hi everybody.<p>I&#x27;m a web developer for over 6 years or so, but my focus is mainly backend. Once in a while, every one of us developers comes up with a concept that they&#x27;d like to pursue. Not a startup, just a side project that&#x27;ll help someone else out more than yourself.<p>What I encounter mainly is I can spend a few weeks making the concept work but then when I need to actually make it look good design-wise - I struggle. Is there any tools&#x2F;hacks&#x2F;suggestions you&#x27;d have for these scenarios to become easier to accomplish?
======
rfvtgbyhn
form follow function :) Start by answering those 4 questions, in this order:
\- WHY are you doing the website? \- For WHO are you building it? \- WHAT will
be the content? (that define the pages layout) You can use the Moscow
technique \- HOW you will design/build it.

It will be difficult to do a good design (the last question) if you dont
answer the 3 first questions. Please, dont just buy a theme on themeforest, it
will be bloat with features that you wont use, you will have to make sure it's
always up to date(which is difficult because the theme creator wont update
everytime a plugin has an update) and you will need to modify it to adapt it
to your needs...

Here is an example. Let say I want to make a tutorials website about Git.

WHY - Because alot of people feel it's too complicated (GIT) - Because it's an
important part of dev and everyone should use it - Because we dont always have
access to a GUI version, so we should know the CLI version - Because it's
actually easy to use and we should not be scare of it.

WHO - For noob dev - For freelancers that will work with agencies - For
students who are looking online for infos about Git

WHAT - A simple interface - A serie of tutorials that explain git in the
terminal - Exercises to understand how to use it - Links to other online
references - links to books - links to Youtube videos about git - Maybe a
Jekyll page?

HOW - Mainly dark to fit with terminal colors - Small and concise paragraphs -
Maybe a Jekyll website? - Monospace font for titles to fit with terminal -
etc. - etc. - etc.

------
rtcoms
Just buy a suitable theme from
[https://themeforest.net/](https://themeforest.net/) or
[http://wrapbootstrap.com/](http://wrapbootstrap.com/).

------
daleholborow
I'm in a similar position (mostly backend Dev but realize that users need
front end). Look into fuze, or metronic UI themes, for example, and then wire
in your functionality. You'll save yourself hundreds of hours and it will look
good.

------
pcmaffey
Unless you want become a decent designer, don’t even try to make it ‘look
good’ because you don’t really know what good design is or entails (and I
don’t mean that condescendingly). Bad design is worse than no design.

Instead, just make it as simple as possible. Pick 3 colors, and assign them a
function (background, text, and highlight). Pick 1 font. Don’t add shadows or
flair of any kind. Align things so that it makes sense the order of
operations, A goes to B goes to C, and so on. That will get you most of the
way there.

------
Mz
Limit colors to no more than 7.

Important stuff should be "above the fold" \-- aka should be visible without
scrolling down.

Less is more. Shoot for an engineering type "looking good" rather than an
artsy "looking good." _Form follows function_ will serve you well here.

Think about sites you use a lot and enjoy using (such as Hacker News) and why
they work so well. Borrow inspiration from them.

------
togusa2017
Copy copy copy. My 2 cents would be copy a design from a website you use and
feel is good looking and more importantly functional . After you have your MVP
starting making smaller design changes while testing the app. This way you
dont get blocked as well as you move away from the parent design.

------
brudgers
Copy another design...err...I mean find a design precedent for inspiration and
use that as a guide. For the same reasons you probably don't start by writing
your own programming language, be pragmatic.

