4 ms·

Principles for Better Design

111 points by Ninroot 6y ago

Ninroot 6y ago
Design is a broad topic. This post won’t approach the adjective qualifying a style with simple forms and a pure appearance. No. Design is broader than a sleek car or an harmonious living room.
- KarimDaghari 6y ago
  Isn’t design more about usability/practicality than aesthetics?
  - accrual 6y ago
    I think it's about both. A solution that solves a problem while also being aesthetically pleasing is better than one which only solves the problem.
  - sbuk 6y ago
    Do they have to be mutually exclusive? The goal of design should be to solve a problem as elegantly as possible given the parameters of the problem and the tools/materials available. There is no reason a solution to a problem cannot be both practical and aesthetically pleasing.
    - KarimDaghari 6y ago
      In my opinion, I don’t think they should. The way I see it however is that if an object’s design is calculated in percentages: utility/practical/functionality should represent 80% of it, and aesthetics the remaining 20% (tngt: pareto’s law)
  - eternalban 6y ago
    That is a point of contention between different schools of thought. Industrialization, mechanical reproduction (manufacture) of objects, and corresponding jump in scale of production went hand in hand with emergence of "form follows function" as a principle of design for "Modern" design. Now a quiz: https://upload.wikimedia.org/wikipedia/commons/2/24/33._Wittgenstein_door_latch.jpg https://upload.wikimedia.org/wikipedia/commons/2/24/33._Witt... Is that door by mr. uber rational Wittgenstein a specimen of form follows function, or do you note 'aesthetics' saying gutten tag there?
    - KarimDaghari 6y ago
      In my view, I would say the former.
      - eternalban 6y ago
        Mostly agree, and no doubt that was the intent of LW: it is shorn of non-functional ornaments, but I propose that aesthetic choice determined the form of that door handle. Various forms would have worked.
nultxt 6y ago
I load this design article, and am immediately assaulted by full-width justified text -_-
- tehlike 6y ago
  They will fix it in the next iteration.
- johnisgood 6y ago
  What is wrong with it? Works no matter the width. I like it. What do not you like about it? Serious question.
  - jpttsn 6y ago
    It’s hard to read. The space between words is not consistent and often too large.
  - powersnail 6y ago
    Especially on narrow devices, the inconsistency of the lengths of white space is severe. Subjectively, I feel dizzy looking at the paragraphs on this site via my phone.
  - strogonoff 6y ago
    In print, full justification of text is done by more than just varying word spacing. It also involves varying tracking (letter spacing) on per-line basis, hyphenation and even very subtle character geometry adjustments. Typesetting software does a lot of that magic automatically and further allows easy manual adjustments to make the copy look even and readable without awkward spacing, “corridors” etc. Browser handling and latest CSS capabilities don’t even come close. Having studied typography and worked in typesetting, I can’t imagine using full justification of body copy on the web.
  - danieka 6y ago
    Also the author hasn't turned on hyphenation. It's a "rule" that when you justify text you should use hyphenation. If not, the spacing between words will be very uneven as can be seen in the text. The author should try adding language to the HTML tag (`<html lang=en-US>`) and setting `hyphens: auto` in CSS. Still hyphenation in browser is of a lower quality than you will find in a book with good typesetting. I played around with the page and, to me, left-aligned text looks much better than justified text.
yuvalr1 6y ago
Summary: 1. Incremental improvement - implement a small version that works in a basic use case, then extend. Don't build it all in once. 2. Reuse code. Don't reinvent the wheel 3. Five whys - get to the root cause of why something should be done by asking yourself why many times. Understand the problem well before acting. 4. Keep the solution as simple as possible. Minimalization. 5. Perfection can't be reached, so don't aim there. Be as good as necessary. 6. Postpone complexity and introduce it only when really needed. I completely agree with all of the above!
KineticLensman 6y ago
The stated principles are a mix of approaches and desirable attributes, but I think miss what to me is the core aspect of design that relates to achieving a specific stated goal within a time, cost and performance envelope. Or perhaps that’s perceived as ‘engineering’
- garethrowlands 6y ago
  I think engineering increasingly sees goals that aren't very specific or necessarily accurate, that change over time and where meeting them partially provides value. Thinking about engineering in terms of trading time, cost and performance or quality is one perspective but these things are often very hard to trade and focusing on providing value is usually more reliable.
  - KineticLensman 6y ago
    > these things are often very hard to trade and focusing on providing value is usually more reliable Good point and I completely agree. I just felt that not mentioning any of these things in an article on 'principles of design' understates the complexity of a real and principled design process.
sradman 6y ago
A nice short list of design principles/techniques. I'd also recommend The Design of Design [1] by Fred Brooks (of The Mythical Man-Month fame). The article's final "Postpone Complexity" principle reminded me of Brooks' discussion of early vs. late decision binding. My main take-away is that there is a decision binding trade-off and we should not forget that early decision binding techniques (such as contracts, API specification, and cost quotes) have true value as well. [1] https://en.wikipedia.org/wiki/The_Design_of_Design https://en.wikipedia.org/wiki/The_Design_of_Design
eternalban 6y ago
My definition: Design is the process of giving 'form' to 'concept'. The space of 'concept -> form' has many dimensions, with aethetics merely being a more contentious one. A set of 'principles for design' (or a school of design) takes a position on each dimension of this transitional space. (Constructibiliy is another dimension, for example. Cost is another. etc.) It is interesting that OP noted the linguistic aspects of word design. A bit further East, linguistically "form" is distinguished from "image", with general notion of "drawing" rooted in the latter.

111 points by Ninroot 6y ago

Design is a broad topic. This post won’t approach the adjective qualifying a style with simple forms and a pure appearance. No. Design is broader than a sleek car or an harmonious living room.

KarimDaghari 6y ago
Isn’t design more about usability/practicality than aesthetics?
- accrual 6y ago
  I think it's about both. A solution that solves a problem while also being aesthetically pleasing is better than one which only solves the problem.
- sbuk 6y ago
  Do they have to be mutually exclusive? The goal of design should be to solve a problem as elegantly as possible given the parameters of the problem and the tools/materials available. There is no reason a solution to a problem cannot be both practical and aesthetically pleasing.
  - KarimDaghari 6y ago
    In my opinion, I don’t think they should. The way I see it however is that if an object’s design is calculated in percentages: utility/practical/functionality should represent 80% of it, and aesthetics the remaining 20% (tngt: pareto’s law)
- eternalban 6y ago
  That is a point of contention between different schools of thought. Industrialization, mechanical reproduction (manufacture) of objects, and corresponding jump in scale of production went hand in hand with emergence of "form follows function" as a principle of design for "Modern" design. Now a quiz: https://upload.wikimedia.org/wikipedia/commons/2/24/33._Wittgenstein_door_latch.jpg https://upload.wikimedia.org/wikipedia/commons/2/24/33._Witt... Is that door by mr. uber rational Wittgenstein a specimen of form follows function, or do you note 'aesthetics' saying gutten tag there?
  - KarimDaghari 6y ago
    In my view, I would say the former.
    - eternalban 6y ago
      Mostly agree, and no doubt that was the intent of LW: it is shorn of non-functional ornaments, but I propose that aesthetic choice determined the form of that door handle. Various forms would have worked.

nultxt 6y ago

I load this design article, and am immediately assaulted by full-width justified text -_-

tehlike 6y ago
They will fix it in the next iteration.
johnisgood 6y ago
What is wrong with it? Works no matter the width. I like it. What do not you like about it? Serious question.
- jpttsn 6y ago
  It’s hard to read. The space between words is not consistent and often too large.
- powersnail 6y ago
  Especially on narrow devices, the inconsistency of the lengths of white space is severe. Subjectively, I feel dizzy looking at the paragraphs on this site via my phone.
- strogonoff 6y ago
  In print, full justification of text is done by more than just varying word spacing. It also involves varying tracking (letter spacing) on per-line basis, hyphenation and even very subtle character geometry adjustments. Typesetting software does a lot of that magic automatically and further allows easy manual adjustments to make the copy look even and readable without awkward spacing, “corridors” etc. Browser handling and latest CSS capabilities don’t even come close. Having studied typography and worked in typesetting, I can’t imagine using full justification of body copy on the web.
- danieka 6y ago
  Also the author hasn't turned on hyphenation. It's a "rule" that when you justify text you should use hyphenation. If not, the spacing between words will be very uneven as can be seen in the text. The author should try adding language to the HTML tag (`<html lang=en-US>`) and setting `hyphens: auto` in CSS. Still hyphenation in browser is of a lower quality than you will find in a book with good typesetting. I played around with the page and, to me, left-aligned text looks much better than justified text.

yuvalr1 6y ago

Summary: 1. Incremental improvement - implement a small version that works in a basic use case, then extend. Don't build it all in once. 2. Reuse code. Don't reinvent the wheel 3. Five whys - get to the root cause of why something should be done by asking yourself why many times. Understand the problem well before acting. 4. Keep the solution as simple as possible. Minimalization. 5. Perfection can't be reached, so don't aim there. Be as good as necessary. 6. Postpone complexity and introduce it only when really needed. I completely agree with all of the above!

KineticLensman 6y ago

The stated principles are a mix of approaches and desirable attributes, but I think miss what to me is the core aspect of design that relates to achieving a specific stated goal within a time, cost and performance envelope. Or perhaps that’s perceived as ‘engineering’

garethrowlands 6y ago
I think engineering increasingly sees goals that aren't very specific or necessarily accurate, that change over time and where meeting them partially provides value. Thinking about engineering in terms of trading time, cost and performance or quality is one perspective but these things are often very hard to trade and focusing on providing value is usually more reliable.
- KineticLensman 6y ago
  > these things are often very hard to trade and focusing on providing value is usually more reliable Good point and I completely agree. I just felt that not mentioning any of these things in an article on 'principles of design' understates the complexity of a real and principled design process.

sradman 6y ago

A nice short list of design principles/techniques. I'd also recommend The Design of Design [1] by Fred Brooks (of The Mythical Man-Month fame). The article's final "Postpone Complexity" principle reminded me of Brooks' discussion of early vs. late decision binding. My main take-away is that there is a decision binding trade-off and we should not forget that early decision binding techniques (such as contracts, API specification, and cost quotes) have true value as well. [1] https://en.wikipedia.org/wiki/The_Design_of_Design https://en.wikipedia.org/wiki/The_Design_of_Design

eternalban 6y ago

My definition: Design is the process of giving 'form' to 'concept'. The space of 'concept -> form' has many dimensions, with aethetics merely being a more contentious one. A set of 'principles for design' (or a school of design) takes a position on each dimension of this transitional space. (Constructibiliy is another dimension, for example. Cost is another. etc.) It is interesting that OP noted the linguistic aspects of word design. A bit further East, linguistically "form" is distinguished from "image", with general notion of "drawing" rooted in the latter.