To me, minimalist design is as little design as possible (Dieter Rams). All design elements need to serve and enhance usability/functionality of the product. That doesn't mean that the total functionality of something needs to be minimal. E.g. you can still have tags, recommended articles and a comment section.
In the website you posted, I see design elements that don't serve the usability of the website, but are there just for design sake. E.g. the background image, the colour of the toolbar or the right alignment of the text
Every single thing you listed has a purpose.
> the background image
is a blurry gradient of colors magenta and orange, angled off-axis. In other words, the complete opposite of the page contents: Sharp black and white precisely-aligned text.
The purpose of a background is to contrast the foreground. Mission accomplished.
> the colour of the toolbar
is one of the only persistently consistent visual elements across the entire website, which features many very different color schemes in its content. Take this page [0] for instance; as the menu elements you refer to lie on a higher level of interface hierarchy, this color of the toolbar sets the topmost brand tone of the entire website.
[0] https://hypertele.fi/d9a64d59472ad05b
> the right alignment of the text
Quoting the very page under discussion:
When your eyes read to the end of a line of text, they have to jump to the beginning of the next one. Left-justified text causes all lines to start at the same vertical, making your eyes sometimes miss the jump and begin reading a wrong line. This is why you're sometimes reading the same line twice by accident. By right-justifying instead, the left edge of the text is made variying, and your eyes have an easier time picking the correct next line.
Are you saying that right-aligned text is easier to read? Are there any studies on that? If that's the case then why isn't everybody like HN for instance already right-aligning their content?
It's not. It's black and white and grey, which makes it look cleaner than the other one, which is a mess of colours, although I think that's on purpose. But it has a lot more going on on. Granted, most of it is at the top of the page (which is a _mess_) and the rest is okay, but the way some of the links are presented (with the icons) bothers me a bit too.
Eh, disagree. hypertele-Xii's website gets out of my way when I'm reading, and that's key. Gwern's website litters the body of the post with all kinds of stuff that the average reader won't use.
> Less is more. Simple as possible but not simpler. Good design elevates the essential functions of a product.
https://en.wikipedia.org/wiki/Dieter_Rams#%22Good_design%22_...
THIS is minimalism: https://manuel.kiessling.net
Precisely in the sense of "NOT a lot going on at all times". Just the content, presented pleasently.
And importantly, it's not only minimalism in look-and-feel, but also technically: even a long post with an embedded image like https://manuel.kiessling.net/2021/05/02/tutorial-react-singl... weighs in at under 200 KiB. Loads in under 3 seconds even on "slow 3G" in Chrome. 362 milliseconds via my office's wifi.
Also, no JavaScript. Nothing moves or jumps. Perfectly usable and consumable in a CLI browser like Lynx.
All of that without looking brutalist.
One note: in general there's a UX recommendation not to use flags when you mean languages. http://www.flagsarenotlanguages.com/blog/
I'm not exactly sure the best way to solve this for your blog. Maybe something like adding alt-text to indicate "German Language" and adding a parenthetical to the end of titles "(German)" or something?
Maybe a combination: a small icon with the three flags in one row, and underneath, the text "German post".
this does not address the main problem that flags do not correspond to languages. German is spoken in more than "the three" countries, and in these countries there are more languages than German. Thus, using flags is insensitive and alienating to German speakers from other countries (e.g., Belgium), and non-German speakers from these three countries (e.g., Lugano).
And this is just for German! The situation is even more complicated for nearly all other languages in the world. Please, never use flags of states to identify languages. I have been on the receiving end of this unnecessarily offensive thing, and it did not feel nice.
In the case of your website, however, I don't see why you need to specify the language of each entry. Is it a sort of "warning" for non-english entries? It seems unnecessary. And why aren't entries in English marked with the flag of the USA? (or Canada, or South Africa).
The alternative is to use ISO (En, De, Es) in brackets before the text begins. i.e. [DE] Wie Studien verdreht werden
ISO language abbreviations would be a better alternative than the flags but I don't think anything is needed at all; anyone who knows German will recognize the post titles written in German and anyone who doesn't know it will still recognize that they're not in English.
The links do have `hreflang="de"` which in theory can programmatically indicate the language used at the destination, I'm not sure there's any technology that takes advantage of that. They could use a ::before pseudo-element with content: attributes(hreflang) to display the ISO code instead of the flag images. I would like to see `lang="de"` attributes on the German headings and paragraphs on the home page, they would tell screen readers to switch to a voice appropriate for the language when read aloud.
Do you think so?
Which flag would you use for euros? Obviously not the european union flag, since there are many countries inside the EU with a different currency (like Sweden or Poland) and even countries outside the EU whose currency is the euro (Montenegro, Kosovo, Andorra, ...).
I think the fact is that languages simply don't have visual symbols for them. They are spoken or written, not "looked at". Languages are linear, not 2-dimensional. Euros and Dollars have their symbol because that's what is printed on the 2D surface of bills.
If the context is currencies, everyone would know that a european union flag refers to the euro.
it's a visual cue, not a translation into hieroglyphics.
If you need a corresponding URI fragment, the ISO language codes exist for that reason.
Just from the title I can immediately see that "Die Metapher der Stadt für das Bauen und Betreiben von Softwareprodukten" is definitely not going to be in English.
I assume readers fluent in German don't need to be told that post is in German, the same way I don't need a little UK or US flag to know "March 2018 Book Recommendations" is in English.
If you can read the title and introduction you will immediately know which language its written in with no need for flags at all.
> Just the content, presented pleasently.
Please explain which part of my site isn't just the content, presented pleasantly?
> minimalism in look-and-feel, but also technically [...] weighs in at under 200 KiB
The exact page I linked to [0] weighs 160 KiB, less than your example. I'm confused about you bringing that up. I win?
I'm not the person you asked, so forgive my jumping in here, but I feel I have a helpful answer.
Design serves function. The function of a website with text is to be read. Your site's design is hard and unpleasant to read. Here's what made it difficult for me to parse and read your page:
1. The title looked like a banner offering a newsletter or cookie preferences. I ignored it. My eyes jumped to the subheadings "router" and "template". It took me too long to discern what I was reading. At first I thought it was a list of blog posts titled "router" and "template".
2. The white, thin text on black background was difficult to read. My astigmatism makes dark on light a strong preference for me. Light on dark can be okay if the font has enough weight to minimize deformation of the letter forms. Here you chose a very thin font.
3. The ragged left edge of each paragraph is harder to scan. The return sweep took longer. It is also reminiscent of poetry which felt out of place.
4. The bright background lines drew my eye in a downward on the right and upward on the left, further making the return sweep less comfortable. It is brighter than the text and nagging at my peripheral vision.
5. The text in the comment box was too low contrast to be comfortable.
6. The right menu was invisible to me until I was critically looking over the design.
It was very stylistic and striking. Aesthetically good. But these design choices are at odds with the functionality of reading, at least for me.
That's a problem with other sites though isn't it?
> My astigmatism makes dark on light a strong preference for me
You can find accessibility-enhancing browser extensions. I use one for the exact opposite myself, to turn bright sites into dark ones. Can't account for every disability.
> It is also reminiscent of poetry which felt out of place
Great! My site has lots of poetry. Not out of place at all.
> The text in the comment box was too low contrast to be comfortable
Thanks, I've suspected this to be the case. Will address.
I think of design as being done in a context. Few websites use green to indicate a toggle has been turned off and red to indicate a toggle has been turned on because most websites use green to indicate on or go and red to indicate off or stop. Websites are designed in that cultural context where that makes sense (there are cultures in which it's not those colors). I wouldn't expect for a website to buck that context and then say it was a problem with other websites and not the one that's deviating from norms.
Toast banners being colorful on white or black backgrounds is a design language I see all over the place. It's the context of the web. So when I encountered a colorful banner on a black field, my eyes ignored it (based on their experience elsewhere before I browsed to your site) and traveled elsewhere first. It was only when I became confused by the contents elsewhere did I take a second, closer look at the top and realized what I was reading.
Not a big deal really, but I wanted to share this one reader's experience with first impressions.
> You can find accessibility-enhancing browser extensions. I use one for the exact opposite myself, to turn bright sites into dark ones. Can't account for every disability.
No, you cannot. I don't expect sites to. I have a custom CSS I use to improve readability when it's low. But, I have noticed that many sites that are white text on dark backgrounds are reasonably readable when they choose fonts that have some weight to them. Face weight is the lever there. If you wanted to, you could increase the weight of your font a smidgen and provide a good experience to both people with astigmatism and people who prefer dark color schemes. But design choices are personal and you can keep it nice and thin too. Again, I was sharing my first impression on readability.
> Great! My site has lots of poetry. Not out of place at all.
Maybe it's not out of place, but I didn't see any poetry on that page. It was a colophon. If it was meant to be poetic, it went over my head. But, I am a mere student of poetry. Not a poet myself.
As I mentioned, I like the look of your site. I find some of the design choices to hinder readability which I value over aesthetics. Design is about finding that balance between aesthetics and functionality and not everyone agrees on where that balance should fall.
I was not the only one who found that some of the design choices distracted from the content or made the content harder to read. Now you know and can do or not do what you will with that information. But saying that your readers are "wrong" is an odd way to go about it.
The bar on the right also has two icons that doesn't seem to do anything (save, next).
Finally, as a non-native english speaker to another, I respectfully add that the tone of your comments come across as a bit confrontative, which together with seemingly strongly held opinions and seemingly not very open to feedback, makes me hesitant to engage in this discussion. Perhaps you are not aware of this, so I just wanted to in the most best-meaning manner I can point it out to you.
Take notes people!
Just my two cents.
I think that’s rather dismissive when said content is simple text in the browser. Easy solution: don’t use fixed navigation - it is a very bad UX pattern for content/informational websites. That’s why scrolling exists. I assure you that users don’t require access to your menu 24/7 when reading through your website.
I wrote about this "sticky" header problem back in 2019. Seems very relevant to this current discussion.
Content is not simple text in this case. My site is designed for visual arts and experimental literature, including poetry.
Many other art-based, photography focused and creative writing projects work fine in my browser. You seem to just be avoiding the removal of bad UX patterns (fixed elements) for personal reasons - which is fine.
But you shouldn’t hint towards the fact that it’s “how things are” and they “can’t be fixed”. You’re hurting user experience for personal preference - not limitations.
I agree with the other commenter here. If a text-only article follows the tenets of some version of 'minimalist' design, I should be able to read it comfortably on my phone. Straight to reader mode for me.
I tried it on my desktop, where it was better. But I still wouldn't call it 'minimalist.' Again, it's just an article, but the background image draws my eyes away from the text. The top and sidebars do too, but to a lesser extent.
That's fine, but it's not minimalism. If I hear that an article on the web has been presented in a minimalist style I'm going to click on it assuming that once I start in on the article that's all I'm going to notice.
Since browser's don't do it there could be a side-ribbon that had a TOP-button and then a BACK-button. I think that would be useful on sites like HN.
That's a lot to you? It's very few to me.
On the plus side, your site is friendly in reader view.
• Never justify text in digital • Never right align long form in digital • Both need to learn balance between type size and line height
My point being that applying rules learnt from hundreds of years of literary culture and printing do not 1:1 translate into digital.
Justified copy is as much about saving paper as it is about any formality/legibility. It really has no place in long form digital space where space is infinite.
Type designers like consistent and even rhythm between the ink and page. Rivers of white and large gaps between words give the ick.
To me, colors are important. I'm a visual artist. The minimal amount of colors to me is an additional two to your two. It's not arbitrary, I didn't just go crazy with colors, I settled on exactly four because I couldn't reduce it to three.
This is a fundamental misunderstanding of what minimalistic design means.
If you've identified that you need a website, minimalism would be paring that down to the core essentials and ensuring it has everything it needs, but nothing more, to suit its purpose.
Websites exist to serve content. The author of this page demanded it have a background image.
Here's another page that doesn't:
That's a design element that serves the functionality well and doesn't feel superfluous at all. But the image on the colophon page I'm less excited about. It gets in the way and feels unnecessary.
It has a perfect blend of minimalism, functionality, aesthetic, typography, accessibility, and mobile-friendly design. I strive to design my blog around the same principles.
text-align:right? WTF?
This really hurts when reading. So, while it might be minimalistic, it's not good design.
> When your eyes read to the end of a line of text, they have to jump to the beginning of the next one. Left-justified text causes all lines to start at the same vertical, making your eyes sometimes miss the jump and begin reading a wrong line. This is why you're sometimes reading the same line twice by accident. By right-justifying instead, the left edge of the text is made variying, and your eyes have an easier time picking the correct next line.
You actually experience physical pain?
You advanced your own website as somewhere between a solid execution and an ideal for minimalistic design. Virtually every reply you've gotten has been some variation of "Wow, I don't much like this design". You reply to each of the replies insisting you're right and demanding people explain to you how you're not. People are taking time out of their day to give you (admittedly critical) feedback. It probably doesn't work that well to demand more of their time. When you send signals that you're not internalizing the feedback you're getting, people are going to be loath to offer more.
It's OK if you don't want to incorporate feedback because you're happy with your work, but the context under which you linked it is such that it's perfectly natural people are going to give it to you unvarnished.
Just as an example, I find right aligned text hard to read, no matter your rational behind it. Might be because I'm not used to it, but who is?
Exactly. Only one way to find out: Somebody try something different!
Left-aligning text actually helps by providing a fixed start, so your eyes/brain know that they have to start left and a little bit lower. With your way it's exactly the opposite.
Will save further details, doesn't look like it's worth the time.
* Tiny non-standard font size.
* Their rationale for right text alignment is the exact inverse of why left-aligned text is widely regarded to increase readability. (Also they don't seem to understand what justification means in paragraph formatting).
* Navigation bar falls in the exact area (right edge) where most users' eye gaze rarely falls. (Top left, top right, mid left are the areas where eye-tracking studies show left-to-right language users fixate).
* Weird Geocities-style pinned background with distracting colours.
* Inconsistent use of capitalisation on headers / pages. etc. etc.
By the way, your link "My Work" under "What I want" is a 404.
I don't think you should be criticising anyone xD
Is there any research done on this?
> You actually experience physical pain?
No. It slows down my reading and it makes it difficult to understand text.
BeeLine [0] claims to be backed by research and employs a similar device. Seems to be a new idea, and I wanted to experiment.
Also, their text is left-aligned.
If you're up for more experiments, try a line highlighter that follows a cursor, like so: https://blog.adobe.com/en/publish/2021/05/06/hacking-readabi...
Not the parent, but I think people will experience a moment of confusion before they adjust. right-align is very unexpected, so even if it's somehow better, it takes time to adjust. That adjustment is undesired and uncomfortable.
I think it may feel similar to a car manufacturer putting the ignition on the left side of the steering column. The driver will briefly jab the key on the right side before understanding that this car is different from every other car the driver has been in. Even if there was extensive research showing that left was better, the first reaction from experienced drivers will be "WTF".
Consider this: you're up against millennia of development in writing and typography. People have tried a lot of different ways of organizing and presenting text. And I mean a lot. Different symbols, different fonts, different page layouts, different text orientations. There was even a long line of symbols spiraling on a disk, getting denser as it approaches the center. There's a good chance somebody tried different ways of aligning long text in a paragraph. And we settled on one. Maybe there was even a good reason for it. It's consistent across cultures too. Justified and centered text aside, left-to-right languages are flushed to the left; right-to-left languages are flushed to the right.
Is it objectively the best way? I don't know.
Writing, fundamentally, is used to communicate your thoughts - to yourself or to others. Publishing your writing on the web (and sharing it here) implies you want others to read it. In order to reach your readers, you want to make it easy for them to parse this text. Over the years, people developed a set of patterns that make text more readable. Some are fundamental. Some are nice to have. Some are so universal they are expected - and noted when they are missing.
It's because when you're writing by hand, you can't possibly know in advance exactly how long the line is going to be, so you have to start at the beginning and write until space runs out.
But now we have computers. We no longer write by hand. It's trivial to have the computer justify text however we wish.
So now we ask the same question again, which way should we justify text now that it is trivial to do it either way? To me, "do it the way it's always been done without question" is a non-answer that leads to exactly no evolution whatsoever.
My website[0] is far from ideal, but certainly falls in line better with the term “minimalism” (page speed, assets loaded, initial paint etc)
I mean maybe its rendering strangely on my work computer (forced to use edge), but it's pretty bad.
I guess this person would also describe their involvement in this thread (aggressively dismissing every single comment) as a perfect example of minimalism?
I can hear a million professional designers spinning in their graves at your claim.
Too many people trying to reinvent the wheel without learning the fundamentals.
The upshot of all that is that I read the entire content of gwern's page. I didn't read more than a few headings of yours.
Unintuitively, this is a success for me! The headings clearly stuck out, you were able to quickly scan them and determine you didn't care to read the details. That's how I'd expect a minimal design page to work.
That's not what happened. What happened was that after trying to scan a few headings of your page, I was so put off by the site design that I didn't even bother trying to figure out from the content of the headings whether I wanted to read the details. So your site design prevented me from doing what you describe.
Not to mention that the same paragraph specifies a design requirement of the site:
"What does it take to present complex, highly-referenced, link-intensive, long-form text online as effectively as possible, while conserving the reader’s time & attention?"
Even the minimalist answer to that question would probably feature the things you're objecting to.
I'm the founder of BeeLine Reader and wanted to mention that we have a JS widget and I'd be happy to provide it to any HNer for free. Over the years, several HNers have put our tech on their websites (examples here [1]), and we've even worked with a YC company (Insight Browser [2]).
Feel free to contact me (info in profile) if you're interested in trying out BeeLine Reader on your website.
1: https://thegradient.pub/has-ai-found-a-new-foundation/ https://wildcardpeople.com/what-is-a-wildcard-person https://jaack.me/cleanmymac-x/
Note: these are not 'historiated' because they contain no history, identifiable figures, or scenes. They are just initials/dropcaps.
It would have been more semantic to use <em> for emphasized text instead of <I>.
Placeholders on form fields are not labels. The comment submit button has tabindex="-1", preventing keyboard users from submitting a comment.
You can just hit Enter after typing your name. No need to select the button.
Additionally, not everyone knows that's the default behavior for pressing Enter in a text input and it's common for forms to be implemented in such a way that it doesn't work.
Oh snap you're right. Anonymous commenting is a requirement. An oversight! Will fix, much thanks.
There's no standard for "minimalist" websites, no way to define what is or isn't minimalist.
There's no need for one either. Your visitors don't require "minimalism" per-se. There's no threshold that you can cross to achieve or reach it. Minimalism is an ideology. It's a heuristic you can use to guide your decision making.
If you find yourself comparing how minimalist you are or competing with others on minimalism, I feel like a better description for that is "maximalism".
My personal blog! Let me know if you like any of the stuff on it. And what I'm wrong about :)
A few complaints:
- on phones, the line spacing in the beige boxes on /about is too high
- I think the headers on /cc and /visual need tome tweaking
--- the spacing between the quote to the actual headline is too big
--- on CC, it took me a while to even figure out what the header was because it was nearly indistinguishable from the years
- the feedback tab takes you away from the website, despite looking identical to the other tabs.
There's a rather large blank space at the top, occupying significant vertical space. Since vertical space is most precious on all screen orientations, I'd consider cutting it.
The art on the 'visual' page looks very interesting, but clicking on them does nothing. At least make them links to the images themselves. The two with school buses are my favorites. I'd move them to the top to make the best first impression (though this is of course subjective! Place your best works first).
https://github.com/karthikeshwar1
It's minimal, easy to manage and update.
I did try making my own site though: https://karthikeshwar1.github.io https://karthikeshwar1.github.io/lite
Multiple menus all over the screen, many different kinds of links with distinct underline and icon suffix, popups within popups that reinvent OS window functionality, historiated initials, graphical horizontal divider with hidden links, a recommended articles carousel, and a very (visually) busy comments section.
Minimal it ain't.
If you want to see a professional minimal design, check out mine:
https://hypertele.fi/ec997be8c5933e87