A guide to Minimalist Web Design | Hacker News Reader

A guide to Minimalist Web Design

medium.com

44 pointssmail30 comments

I normally don't comment on "guides/how" design posts as I know there are a lot of caveats and personal opinions involved (not the least my own).

However I don't think this post is about minimalist web-design as such. I say so because if you want to learn to do minimalist web design this isn't a useful guide (I am aware it's not mean to be a tutorial but it does offer some observations that can lead you the wrong way)

The number one thing you need to understand as a designer if you want to do minimalist design is typography and to do so properly takes years. It's a very refined art to do well and most people get it wrong when they try.

Putting few things on a screen is not minimalism and the Google screen is in itself not an example of minimalism. It was never really a conscious effort but rather a "lets remove everything and just add the search bar and a logo".

What google screen however is a good example of is first principles. I.e. going from the categories based search engines of it's time to a purely search focused approach and using pageranking rather than humans to determine results.

If you want to understand and do minimalist design learn typography first. Besides practicing a lot, a great book to do so with(a classic) is "Elements of Typographic Style" by Robert Bringhurst. It wont teach you typography on the web but it will teach you about typography which is one of the keys to understanding minimalism on the web. Would also recommend Grid Systems by Josef Muller Brockman which also provide a good foundation for understanding typography.

Just my five cents.

thanks for that helpful comment, I was excited to read it. It is different from I think, sure I respect it.

How about a guide to non-minimalist web design? Can we please please please have a discussion about how to build interfaces that aren't oceans of white space, relentless reduction of "click targets", and an overriding emphasis on showing the user the absolute least amount of information possible lest we frighten or confuse them?

I'm so sick of consumer-focused web design infecting all corners of web design, including and especially professional/industry design where more information may sometimes be better than less. It's like UI designers' collective takeaway from Tufte et al. is "wow showing lots of information effectively in limited space is tough, let's just not do that."

Clever use of white space is vital to a good design.

That being said, "white spaces" are not supposed to always be the color white. Interfaces are not supposed to always be a sea of nothingness either.

That's simply bad minimalistic designs you are describing.

Even a skeuomorphic design filled with textures and gradients require good use of white space and a minimalist approach to be a proper UI. Function over form should remain true no matter the "skin" of your user interface.

Well, the article is focused on consumer web design. It appears to be someone thinking out loud and coming up with some fairly standard advice.

I agree an information-dense approach is warranted when people re-visit a site many times-- what you would call professional/industry design? But even then, the minimalist principles are still valid. You don't want to clutter with unnecessary stuff, but you _MAY_ just have more stuff.

Do you have a compelling example of effective non-minimalist web design?

I'm glad you said that.

I've gone back to making a home page (remember those?) for my Maths teaching next year. I'm trying to pack as much as I can into one page that students can just access without passwords and which will work ok on a variety of platforms.

http://www.maths91.uk/

I suppose this is 'maximalist'. Still no javascript. The style sheet is copypasta from various sources I'm afraid.

I love that page, information dense but with a clear hierarchy and progression.

The page is a rendition of an administrative document (the 'scheme of work' for the Maths course) into language appropriate to students. The idea is they can't lose it if it is at a handy location on the web. We'll see.

One annoying trend in UX these days is believing that simple UIs are sufficient, when the audience is technical, and the product is technical/complex. You simply have to see a cockpit to know that highly technical/skilled people can easily use a complicated UI just fine. I do believe designing a UI is hard when your audience is "everyone who can use a computer", but OTOH, products obviously meant for programmers or other technical folks should definitely surface a LOT more complex interactions.

I'm a fan of interfaces that surface and submerge information at the behest of the user.

Intellij does this well since you can toggle everything with the key map, two key strokes and I have the conventional busy IDE interface, two more and editor with text and no clutter, which mode I'm in is dependent on what I'm doing.

vscode has it as well, they call theirs Zen mode.

What always is missing from these Minimalist Design articles, are examples of heavily trafficked social sites. Tons of content, presented in a clean way. HN is a good example I think. Showing off sites that are nothing but basically a white page, with a single professional product image in the center, isn't really moving things forward. Yes it's minimal, but it's easy, and basic.

thank you for the comment, it is a good remarque.

Ironically, the article has a picture that reads in giant letters: "Does this thing adds value to my Design"? -- and there's a superfluous yellow circle behind the text, just for decoration.

If the author feels that image adds value to the blog post, I'm not sure I want his advice on minimalism.

My 'quick and dirty' attempt to show that minimalism should extend beyond just visuals - The same graphic as PNG which is about 60% smaller: http://imgur.com/mLdDj04 (admittedly I don't know the exact original font but the point stands).

Also, what are visually impaired people meant to do? A minimalist site should be much easier to keep screen-reader friendly. Pictures of text are not recommended.

i appreciate that, I admit that I had the same thought before about if the image adds value to the blog post, and I keep it because I think the yellow circle represent the heaviness of that question and adds more focus. thank you

Thanks for taking the criticism seriously.

You know, my comment was too harshly worded. It had a mean tone that was not my intention. I hate it when people give snarky criticism online, and then I go and do it myself... Sorry about that.

please don't say that because I accept it. It is my first publication, I want to learn more from that comment. thanks

Not only that, he uses Medium, which I do not consider minimalistic at all.

As opposed to what? Compared to 99% of the web, the Medium is, and has been designed from the start to be, minimal.

(Not talking about page size -- talking about design).

I am not trying to dis Medium, nor advertise or propose an alternative. I was just pointing out that it seemed ironic the contrast between the title of the post, and the medium --no pun intended-- used.

Yes, but what I'm asking is what's ironic about it?

As far as content websites go, Medium is as minimalistic itself as they come.

They literally put all the emphasis on the content.

Minimalism doesn't mean bare or absolute essentials. It means that any decoration will be minimalistic itself too.

And giant letters + a yellow circle sounds absolutely that.

It's not about just a textfile in black letters on white text.

I like to treat design like writing. Pour all thoughts onto a page > organize thoughts > write the piece > edit > edit > edit. Every edit phase usually centers on condensing and removing fluff. In my experience, it's the same with design... likely because I'm an amateur. I have to overdesign something before I can start stripping away the unnecessary stuff. If I try to design something 'minimalist' from the start, I'm stifled.

To paraphrase the author, you don't add white space as much as you throw stuff out.

Aside: If I experienced any of the last five branding examples in the wild, I doubt I'd remember them. In these cases, minimalism = milquetoast design.

thank you for the comment, I think I share with you the same feeling about "If I try to design something 'minimalist' from the start, I'm stifled.". -About the Aside, I think they just don't offer a big service that you can meet everyday, like google or apple, but they are good exemple of "doing" minimalism.

> In web design it is quite the same, it is about keeping only the most essential elements that let users quickly and easily solve their problems.

Is the dickbar really essential to solving my problems? Maybe think about removing it?

of course.

There’s minimalist web design and then there’s pretentious and gaudy by nature websites filled with glossy pictures stacked in nice and shiny grids in the name of minimalism. I often see the latter being peddled around as minimalism including some examples in the linked post.

for the OP, since it looks like you're also the author:

there's a typo/grammar mistake in the image "Does this thing adds value to my Design?"

'add' not 'adds' and in English we wouldn't normally capitalise the d in design in this sentence

(intended as helpful tip, not criticism!)

i appreciate your help thank you, I will change it.

There are enough typos and Engrish construction that it really should be run through something like Paperrater.com. Not that such services will catch everything or have all the correct answers, but if your writing is bad enough, making changes until they stop finding errors is a good practice

Reply on news.ycombinator.com