
A Guide to Minimalist Web Design (2017) - smail
https://ismailelazizi.com/blog/a-guide-to-minimalist-web-design
======
defanor
I keep checking those minimalism-related websites and guidelines, as well as
software projects, just to find out how much views on such a seemingly simple
thing vary.

For instance, this article argues against unnecessary elements, yet it's about
1.8 MB, has rather useless (IMO) pictures, and I had to scroll down 1.5
screens (in a desktop FF) to see the beginning of the article. And then there
are regular vague advices.

Apparently some focus on visual minimalism, others -- on pages being
lightweight, yet others -- on minimal technologies. And what some would see as
necessity others see as bloat.

~~~
godshatter
Agree. Shouldn't a "minimal" website have everything it needs on one page?
Huge images you have to scroll past to read anything useful isn't being
minimal, it's just cruft. Surely it's possible to build a website that doesn't
take up a lot of screen real-estate, has everything necessary to function, and
still looks professional and aesthetically pleasing?

~~~
MaxBarraclough
> Surely it's possible to build a website that doesn't take up a lot of screen
> real-estate, has everything necessary to function, and still looks
> professional and aesthetically pleasing?

Given that we're on HackerNews, I think we can answer that with certainty.

Well, I suppose _looks professional_ and _aesthetically pleasing_ are
subjective, but I wouldn't change HackerNews's look.

------
swiley
It's strange how different things mean to different people; Some people see
web pages as images and so minimalism is an aesthetic decision while others
(most people here probably) see a tree of boxes and the aesthetic minimalism
should (usually) be a consequence of a simpler description of that tree.

------
thdrdt
I like a data-first approach when designing websites. Or another way to think
of it: how HTML was intended.

You write HTML and later use CSS to give that data a nice look.

Let's say you want to create a blog. Then you might have the following HTML
tags in your page: H1, H2, TIME, P, A, IMG

That's it.

Then style those element and you are done.

Now ofcourse the above is an extreme simplification.

But with frameworks like Bootstrap you take the complete opposite approach.
You fill your HTML with loads and loads of DIVs just to make something look
good. Imho this is a mistake.

It also makes people to add data they don't need because 'every bootstrap page
has a hero'.

As for a minimalistic design: just use 1 or 2 margins/paddings and around 3 to
4 colors everywhere.

~~~
oneeyedpigeon
Although I mainly agree with you — I pretty much take exactly that minimalist
approach with my own site — I think you're being a bit unfair on Bootstrap.
Using just your example tags in conjunction with Bootstrap is perfectly
acceptable, and it would only really take a single DIV (container) to wrap the
content. Bootstrap gets more complicated when it comes to layout, navigation,
and additional content, though, but this also becomes an issue in plain HTML
anyway.

I would, though, like a really good 'minimalist' framework that just works —
almost as a reset — with no classes at all. '<table class="table">' has always
bugged me in Bootstrap, and there are other examples with certainly feel
overengineered, that lead to spaghetti HTML.

~~~
johnday
The difficulty here is that the word "div" is still highly overloaded in CSS.
That said, I can probably put something together which satisfies what you're
asking for - a set of "sensible defaults", like halfway between normalize.css
and bulma. It might be an interesting design challenge!

------
plg
[http://motherfuckingwebsite.com/](http://motherfuckingwebsite.com/)

~~~
juped
Let me just preempt the whole comment thread:

[http://bettermotherfuckingwebsite.com](http://bettermotherfuckingwebsite.com)

[https://thebestmotherfucking.website](https://thebestmotherfucking.website)
(actually significantly worse)

[https://bestmotherfucking.website](https://bestmotherfucking.website) (the
best design of the lot)

and probably other niche ones

~~~
eropple
"Significantly worse"? Just getting away from a serif font makes the third you
linked way better to me. The text contrast is still good (to head off the "but
it's not pure black on white!" cargo cult) and colored headers are distinctive
but not obnoxious.

~~~
defanor
> Just getting away from a serif font makes the third you linked way better to
> me.

The original one doesn't use CSS at all (and doesn't set fonts with serifs),
while all the others try to alter fonts and/or their sizes, potentially
changing them from ones set/preferred by a user to ones set by a webmaster.
thebestmotherfucking.website also tries to override colors. I think these are
good (simple, hence easy to reason about) examples of the awkwardness that
comes out of styling (and complexity of relatively simple decisions): some
would assume certain user agents and settings, and possibly that users don't
configure those. Not to mention that some may actually prefer serifs and other
common defaults.

Would be amusing if that progression of websites grew even further, to heavy
and heavily styled SPAs, completely reversing the original message.

~~~
eropple
Oh no, they used CSS! Heaven forfend one delicately and with restraint use
something supported in nine thousand, nine hundred and ninety-nine out of ten
thousand browsers. Heaven forfend. A pox on their house.

"Sets fonts" is misleading--the creator knows and must know that the default
in virtually every browser is whatever dog's-breakfast default serif there is.
(Yes, yes, "the browser can change it," because we all know that every user is
an artisanal crafter of browser preferences and truly, deeply cares to do that
instead of go to a site where somebody thought that through in its
presentation.)

It's not 1997 anymore. HTML is no longer a document markup language, it is an
application-and-presentation toolkit, and whether or not you or I like it--I
don't particularly, there are better ones--doesn't excuse doing _bad_ work
because we pretend users who happen to be fully congruent with ourselves want
it.

------
tomxor
Unfortunately, everyone else is not reading this... and for those bastards
that make you click through 3 popups and then scroll jack you in the middle of
reading etc: I really frickin love FireFox's "reader view" (top right in your
address bar), it's also beautifully minimal text.

Now my first reaction to a popup opening as soon as I navigate to an article
or a terribly illegible and busy design is to reach for the reader -
guarantees one click, minimal, legible text.

In other words, if you can't trust the designers, remove the design.

~~~
Nadge
Turn on reader view with either F9, or Ctrl+Shift+R, depending on your version
of FF :)

------
ericsanchez
hacker news has been incredibly influential on me in exemplifying what a site
could be.

I too have been thinking about the philosophy of a minimal amount of "design."
After a certain point or certain amount of "design" I feel like we have to ask
ourselves, "what's it all for?" I've been getting into more front end
territory and have been delighted with how much HTML does.

For me, it's not so much about minimalism. I feel that minimalism semantically
conveys, "the absolute bare minimum possible." Whereas I like to see the
design goal as, "what is necessary to fulfill the required purpose."

Shameless little plug here, this is a little experiment I've been working on:

erictheread.org

~~~
ggm
if it had [?] == list of keyboard accelerators, and honours the vi hjkl/asdf
type keying for steerage, it would be better.

if it did that, and had some elements at top and bottom of the list, so you
can [more] even from the top of the new view..

~~~
ericsanchez
I could not agree more; especially with the vi advice. I'm still a work in
progress, but I agree this would be cool. (I have `ESC` remapped to `JJ` and I
find myself trying to exit insert mode in emails, papers, etc. all the
time...)

I've also structured the site in a way so that it kind of has a schema for
each article and the next step was to write a little client so one could read
from a terminal.

Baked into my design philosophy is "reuse" hence not opting for a custom
light-to-dark-toggle. Thanks for this though, I'd just reminds me I gotta keep
it up ha. Do you think browsing in the terminal would be a hassle for people?

I'm also trying not to go too far overboard, thanks!

~~~
ggm
_Do you think browsing in the terminal would be a hassle for people?_

No. the basics of the site make this close to zero cost and proof-by-example
is the alternate textual views of the site which just work (tm)

I am trying not to be a google fanboi, but the ubiquitous consistency of
keyboard accelerators in gmail, photos, docs, &c by google is one of the
reasons I enjoy using their tools. They "get" keyboard warriors, in the
browser.

~~~
ericsanchez
I like that. I feel similarly towards apple products. The consistency of these
google products &/or the seamless-ness of apple products means that I can
focus on what's important to me.

Good tools feel like good tools. Had to re-read,"ubiquitous consistency,"
nice. Thanks for the value added.

------
Minor49er
Search for "minimalist design timeless google" and you'll find an endless
number of posts exactly like this one. Bloating the web with these copycat
posts isn't very minimalist.

~~~
rchaud
The same could be said about pretty much every link on Hacker News. Do we need
more posts about:

\- The death of personal websites?

\- Decentralized social networks?

\- Setting up a static website with Hugo/Jekyll?

\- Why we did X in Julia/Rust/Go and not [commonly used framework]?

------
sibane
I'm going to be honest, one thing I wish we could leave behind as we enter the
2020s is this obsession with flat/material and minimalist design as some kind
of profound one size fits all design ethos that you can build your entire
professional self around.

Don't get me wrong. There are plenty of occasions where so-called minimalist
layouts are perfectly appropriate. Most of the lessons at the core of it are
absolutely fundamental to design. And what it replaced, the very brief period
of corporate skeuomorphic design was never that great and in my opinion had
much more to do with companies wanting to showoff their fancy new technology
than designing anything great in its own right.

However, I despair when I think of the amount of young designers who know
nothing else and can barely imagine a life without the strict framework of
minimalism and its accepted practices. They will never know the feeling of
going off the beaten path and discovering something cool and valuable, because
your inner minimalist has long since shot down that line of thought as
frivolous self-indulgence. Only minimalist self-indulgence is accepted.

I'm sure most people here can agree that the web is kind of in a sad state
right now. We're using staggering amounts of man-hours to run this thing. An
enormous bloated stack of technologies maintained by a horde of programmers
just so that designers can spend their days meticulously handcrafting
minimalist websites that pretty much look the same and do the same thing,
while being far heavier than they have any reason to be.

I can appreciate the programmers who build perfectly optimized "programmer
minimalist" personal websites, but at the end of the day, I think that just
amounts to a lot of really nice sandcastles. How do we translate that to the
real world?

I'm hoping 2020s could be a decade when people get real about moving forward.
Less aping of aesthetics and technologies from the 60s and 70s. More of
productive experimentation, like in the 60s and 70s.

------
deftturtle
Here’s my take on minimalism, expressed as website design goals:
[https://www.calebyers.com/blog/website-design-
goals.html](https://www.calebyers.com/blog/website-design-goals.html)

------
rchaud
The article doesn't say anything about considering the needs of your users.
It's a design choice unencumbered by the realities of your business.

Google's home page. What is this, 1999? Users spend just as much time on
Youtube as they do on Google, and YT's interface is the opposite of "minimal".
Even Google's SERP is littered with ads, and they're shown inline with regular
search results.

------
LordAtlas
Website with white body text on black background wants to lecture me on
design. Pass.

------
TickleSteve
The website does not implement what it advocates:

\- Scroll bar on left.. why?

\- superfluous links

\- messy typography

\- overly contrasty colour scheme.

~~~
chacha2
Plus a javascript pop-up that shows when you highlight text with an option to
copy the selection. Isn't that what the right click menu is for?

------
tehjoker
It looks like the playable version is down now, but this was my favorite game
in 2014: [https://www.awwwards.com/sites/flat-design-vs-
realism](https://www.awwwards.com/sites/flat-design-vs-realism)

Edit: 2014

------
zzo38computer
Be minimal design to avoid CSS and JavaScripts and usually pictures too. Do
not specify your own fonts or colours. (There are sometimes cases to do
otherwise, but normally you should not need to add all of that stuff.)

------
davedx
My personal/company website is pretty minimalist, I wish I could keep all my
sites and apps this simple

[https://redskyforge.com/](https://redskyforge.com/)

~~~
theandrewbailey
That background is a bit heavy. That 2 MB image could be less than 400k and
still look OK.

------
AlexDragusin
Shameless plug
[https://www.leanternet.com/principles/](https://www.leanternet.com/principles/)

------
meerita
I really like data-first approach. For example, I scaffold everything in
Rails, make it work with all the features then I proceed to edit fully the
views, etc.

------
ErikAugust
[https://beta.trimread.com](https://beta.trimread.com)

No JS. Actual minimalism.

------
daureg
Except Google, all the websites listed as example got more crowded in the last
3.5 years

------
jstimpfle
Personally I think the line spacing in that article is too much.

