Ask HN: What is the best way to build a decent web design? | Hacker News Reader

Ask HN: What is the best way to build a decent web design?

11 pointsgyvastis7 comments

Hi everybody.

I'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'd like to pursue. Not a startup, just a side project that'll help someone else out more than yourself.

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/hacks/suggestions you'd have for these scenarios to become easier to accomplish?

View on HN

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.

Just buy a suitable theme from https://themeforest.net/ or http://wrapbootstrap.com/.

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.

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.

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.

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.

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.

Reply on news.ycombinator.com