9 ms·

A lot of engineers have the mentality of "engineering is hard, but design is just whatever some color matching and styling". I'll prob. be downvoted but here's

by d0m 8y ago

A lot of engineers have the mentality of "engineering is hard, but design is just whatever some color matching and styling". I'll prob. be downvoted but here's my honest opinion: I think you'll gain a lot career-wise to learn about UX and UI. You'll be able to understand products in a deeper level from the customer's side and will then be able to make better decisions as an engineer. You'll also have a much easier time working with designers and PMs. And, of course, your projects will feel and look great. IMHO, the biggest bang for the buck you could learn is: - Visual hierarchy (I.e. the same way you divide your code in modules and functions, you need to divide the visual space in a clear hierarchy). - Basic on typography (It makes a big difference even if most people don't notice it) - Understanding what's UX (I.e. reading "Don't make me think"). Just "caring" and "thinking" about UX will improve designs, even if you don't have much experience. - Basic of color theory; How different colors mean different things (Branding-wise or for alerts/errors/warning). Reading material design from Google https://material.io https://material.io is a great start. You may not like the UI of it, but the UX and explanations of why things are this way are really interesting.

ohkaiby 8y ago
I actually took a 3-month crash course on Visual Design because I was weak in that area (as a front-end developer). Probably one of the best professional investments I have made. The course taught me basically the above list. I would add knowledge about grids and negative spacing to the above list.
- ohkaiby 8y ago
  One other thing to add is that you can't make a good design without content. Unless you have all of your content ready to visually position/style, don't bother designing yet. I used to try to make the visual layout first without really thinking about content, and it was always a struggle.
- diek00 8y ago
  I need to take this course
- linnk87 8y ago
  Can I have a source for the crash course? Asking for a friend!
- arvinsim 8y ago
  Can you point me to this specific course? I am interested.
- thestepafter 8y ago
  I would recommend checking out Refactoring UI, there is a YouTube channel, blog posts, and a book coming out next Tuesday. Their tips and samples from the book have already made a huge impact on my designs.
- anant90 8y ago
  Sorry for the plug, but since others are asking for an introductory resource, I wrote a short course on UI Design myself not too long ago. They are just 17 short tutorials: https://www.commonlounge.com/discussion/d5bae026ef6e4f949e63171e7f6890b3 https://www.commonlounge.com/discussion/d5bae026ef6e4f949e63...
  - derangedHorse 8y ago
    Link hangs on 'LOADING..."
- wpmoradi 8y ago
  Which course did you take?
- quickthrower2 8y ago
  I wonder, is this a positive externality? I spend my free time doing this course but do I get paid more? Or do I just deliver more value to my employer at the same price?
  - thecupisblue 8y ago
    Yes and no. Why do you care?
    - quickthrower2 8y ago
      Why do I care about getting more money? Well...
      - thecupisblue 8y ago
        You're considering learning one of the most important fields that will probably impact the way you think, reason about and look at the world. And you're thinking about money.
        quickthrower2 8y ago
        This is kind of my point - we would like developers to learn this kind of stuff but there is no financial incentive even if it is good for their employers. There are a lot of facets to our work that are like this, for example some soft skills would be in this bucket, except for the soft skills linked to becoming a 'team leader'. Why would someone only do something for money? Well perhaps they have time and money commitments that makes it hard to justify doing stuff that is not for money, unless it is super important for some other reason. So charity work might trump learning visual design, but visual design is also trumped by learning React because that looks hot on the CV.
preommr 8y ago
> Basic of color theory Time for me to rant about how pointless and useless "color theory" is beyond the obvious things like red is for errors and green is for success. It's just a bunch of non-sequitors where people take random facts and then apply them after the fact on particular designs. Things like trying to design using colors from swatches or using colors based on their position on the color wheel are examples of what not to do because the ideas behind them are often misunderstood and therefore poorly applied. And don't even get me started on color psychology. For example, they'll take some fact like a lot of foods aren't blue or that some mould is blue and then say that's why you shouldn't use it for food related designs. Which is rubbish because you definitely want a nice blue for things like blue cheese, or for water related stuff. I could easily see someone thinking that having a picture of the ocean on a menu or part of their advertising is bad because of these silly articles even if that's their restaurant theme. It's not just about the color, but the overall design.
- nkrisc 8y ago
  That is not color theory, at all. You could start with the Wikipedia page to get a quick overview of what color theory really is: https://en.wikipedia.org/wiki/Color_theory https://en.wikipedia.org/wiki/Color_theory It is not the pseudo-scientific mumbo-jumbo strawman you're ranting against. Color theory makes no subjective judgements on what colors "mean" or should be used for, but instead focuses on the visual properties and perception of color.
  - weinzierl 8y ago
    > Color theory makes no subjective judgements on what colors "mean" or should be used for, but instead focuses on the visual properties and perception of color. The parent was talking about color harmony (color wheels) and color psychology. This are very much the things the Wikipedia article you linked is about. Both are indeed pseudo-scientific mumbo-jumbo.
    - hathawsh 8y ago
      I'm also doubtful about color psychology, but color model theory (including color wheels) has some real substance. Most web sites from the late 1990s are today recognized as ugly because the color choices were awful (perhaps because they were trying to be compatible with graphics cards that only allowed 8 bits per pixel.) Web sites with colors that fit a recognized color model appeal to a lot more people. Color model theory is similar to music theory, in the sense that both theories may just be a codification of familiar patterns. That doesn't mean they're not useful.
PaulHoule 8y ago
I am a physics PhD turned application programmer who got into systems programming the hard way. My design skills are such that i can make something good probably half the time on my own. You're right that a small investment in learning will get you some big gains. One thing that helps is sticking to some standards. I worked at web dev shop that had a standard for forms that we called "Spider Forms" that might not have been genius but it is better than what you'd get without a plan and cheaper (and still better) than what you would get bikeshedding it with a client. I like anime art because it designed to be easily reproducible by many people. I got good at drawing these guys http://hyperdimensionneptunia.wikia.com/wiki/Dogoo http://hyperdimensionneptunia.wikia.com/wiki/Dogoo It's the only character I can draw but I can draw them quickly on blackboards, whiteboards, etc. My son lately has learned how to draw characters from Starfox and Sonic. I used to think about color theory but these days I just find a picture that has a color scheme I like and copy the color swatches. I think many people would be better off if they stuck to a small set of fonts and did not think about typography. If people put a lot of effort into it they often end up doing worse than if they took the defaults. For me the really interesting aspects of typography are the "less travelled" paths such as "what do you do if the text is too big to fit in the space?" and then shoehorning it in by changing the letter spacing and squeezing the letters. Then there is the rule of thirds. Learning that didn't make me into Ansel Adams but it vastly improved my photography overnight.
etxm 8y ago
As an engineer, I think design is so goddamn hard. People that are good at it are like majestic unicorns to me.
- bdamm 8y ago
  Agreed. Beyond some trivial basics all these "theories" of how to use style are really a thrashing excuse for the fact that people who are awesome at this really do have a gift, and if you want your product to look great than at some point you have to hire them. Until then, if you are developing a compelling project that does something really useful, then people don't usually care too much what it looks like as long as it doesn't burn their eyeballs out of their sockets. It's true people pay for style, but you don't need style to get something out there and into the hands of people who can help you decide whether or not you now need to invest in style.
  - jakobegger 8y ago
    Good design is not the result of "having a gift", good design is the result of hard work. I don't have a background in design, I really struggle with color schemes, but I put in a lot of effort to design my software, and I think the resulting products look okay. I've hired designers for a few jobs in the past. Their portfolios looked awesome, they were obviously good at their job, but when I received the work I commissioned, I was surprised how shoddy it was. They rushed it, and it sucked. Only after lots of complaining and multiple revisions did I get decent results. It's not about being gifted. It's about putting in the work. If you try putting a nice design on your product in an hour, you will fail. Take a week to research how other products solve design challenges, try a few approaches, show your work to people, revise it a couple of times, and you will arrive at a decent design, even if you don't think of yourself as a "gifted" designer.
andrei_says_ 8y ago
Made the bullet list readable on mobile: * Visual hierarchy (I.e. the same way you divide your code in modules and functions, you need to divide the visual space in a clear hierarchy). * Basic on typography (It makes a big difference even if most people don't notice it) * Understanding what's UX (I.e. reading "Don't make me think"). Just "caring" and "thinking" about UX will improve designs, even if you don't have much experience. * Basic of color theory; How different colors mean different things (Branding-wise or for alerts/errors/warning).
- ianlevesque 8y ago
  This is so ironic with a comment about UI & UX.
  - quickthrower2 8y ago
    Is the end user (commenter) responsible for UX or the HN web designer. In this case I'd argue both are.
  - andrei_says_ 8y ago
    I didn’t want to be the one mentioning it ;)
- snerbles 8y ago
  It's more readable on desktop as well. Long lines in HN's code blocks render with horizontal scrollbars - using them to quote paragraphs is downright obnoxious.
  - DonaldPShimoda 8y ago
    Worse is that the horizontal scrollbars don't render (at least for me) unless I start scrolling the box, so it looked like there was just some missing text.
- graeme 8y ago
  HN really needs to copy markdown for lists starting with * or 1,2,3,4 etc
SomeCollegeBro 8y ago
I develop an internal product that is currently used only by our companies service technicians, but the end goal is to release this to our partners for use outside of the company. Here is one of the biggest things I've learned about UX as a non-designer: watch people use your products, and be ready to accept failure. Let's say you've designed something specifically to be used a certain way. Then, upon user testing, 5 people deliberately use it a different, unintended way. This is YOUR mistake, not theirs. It can be hard to predict these type of things in advance, I've found. As a programmer, I tend to think about software a completely different way than a non-programmer (especially someone in a non-technical role). This often results in software that I think is simple, but turns out is non-intuitive and complicated.
madeuptempacct 8y ago
Do I really need to read "Dont Make Me Think"? A friend got it for me and I threw it in a "never going to read" pile assuming it could be summarized as "Things should be intuitive."
ioddly 8y ago
> Reading material design from Google https://material.io https://material.io is a great start. You may not like the UI of it, but the UX and explanations of why things are this way are really interesting. To add, I've found reading the design documentation of some web and mobile UI libraries to be very enlightening. For example, the colors section of BlueprintJS has helped really narrow down how I use colors: https://blueprintjs.com/docs/#core/colors https://blueprintjs.com/docs/#core/colors
- zapzupnz 8y ago
  I'd add Apple's Human Interface Guideline document and annual WWDC sessions on user interfaces. Even if you don't use a Mac or iOS device, or even if you hate Apple, taking the time to understand why they think their user interfaces are the best on the planet goes a long way to being able to understand why other companies also think their user interfaces are the best on the planet. The ideal result isn't a happy medium, though; it's whatever suits each platform best, something you only understand when you know what each platform's designers are going for. Don't look into Microsoft's design documentation though; even they can't decide what their design principles are. The only time they did, and stuck with it to the end, was Windows Phone.
lettergram 8y ago
Came to the comment section to basically write the same thing. The design is more important than coding in many ways, it's truly what sells the product. I've often used it to highlight working features and "hid" the less functional ones. I'm learning myself, but totally worth getting a basic grasp on it. I usually have my designer friends or colleagues provide feedback which helps me learn.
aerovistae 8y ago
Funny thing is, I find that site virtually unusable. It's impossible to navigate. I can't figure out what sections there are or where the content is or if there's an order or relationship between articles.
- d0m 8y ago
  Yeah, a bit ironic but don't let that stop you from reading and understanding the content.
plainOldText 8y ago
I've recently taken a design class and I have a keen interest in design in general, and I would say your suggestions are on the money. I would also mention the importance of layout and flow line, or how will you organize your elements in the page and how will your audience traverse them visually? This is something you really ought to think about very hard. Also, learn about gestalt principles. For example: https://www.howdesign.com/resources-education/online-design-courses-education/gestalt-theory-typography-design-principles/ https://www.howdesign.com/resources-education/online-design-...
sfilargi 8y ago
> A lot of engineers have the mentality of "engineering is hard, but design is just whatever some color matching and styling". Just anecdata, but as an engineer I think engineering is easy and design is hard. For engineering you just have to follow logic, reasoning, good practices and have discipline. Also you can test your code to death to make sure everything is correct. For design you have to have an artistic nature.
- jolmg 8y ago
  > For design you have to have an artistic nature. I know what you mean, but I now read "artistic nature" as making subjective/arbitrary decisions that for some unknown reason a lot of people favor. Though by the way I read d0m's comment, it seems like there's a fair amount of objectivity in graphic design as well. Lots of logic: If you need to design something, it's because you have a goal and you need to make every decision in that design further take you to that goal. Gotta pick a color for something? Your goal means influencing people? What's your target audience? Pick a color that's statistically known to elicit the emotions in your target audience that lead you to your goal.
  - sfilargi 8y ago
    Yeah, I get it, even art has to follow some ground rules to begin with, but do we know what exactly is it that makes Beethoven’s “Fur Elise” such a great composition?
    - maroonblazer 8y ago
      Music is a very different domain than visual design and we have heuristics for both that, if followed, will keep a musician or designer from composing/designing something demonstrably 'bad'. Will it be brilliant? Likely not, but "not bad" is not a bad goal to aim for.
    - maybe-not-in-ux 8y ago
      It's helpful to deconflate art and design. Design uses artistic tools in the service of clearly defined and objective goals. It is a learned skill.
Myrmornis 8y ago
Really, I wouldn't recommend that theoretical approach at all to a backend engineer who wants practical tips for their side projects. I'd say something like: - Learn to use bootstrap (or whatever the most highly-thought of equivalent batteries-included CSS framework is) - Don't be scared of modern JS. Work through the tutorial on webpack: https://webpack.js.org/guides/getting-started/ https://webpack.js.org/guides/getting-started/ And figure out how to incorporate it into your projects development work flow. Then you'll be able to write in modern JS and take your pick of JS frameworks to use if you want. - Don't be distracted by all the blog posts.
kelvin0 8y ago
Being on the software engineering side of things, I do not trivialize the design aspect. However, it's very rare that an 'engineering' type person will also have the 'ux/ui/designer' chops. We don't necessarily understand that aspect of things in the same way ... clearly my weakness, and I assume it as such. Ideally software development in some case would benefit enormously in a holistic approach to the engineering and design side of things. I've been looking for a good designer to complement my set of skills, but I've yet to find that person... I am really leaning towards taking a course in such design aspects. But I won't become a magical-ux-ui-designer wizard.
jolmg 8y ago
> Basic on typography (It makes a big difference even if most people don't notice it) Can you expand on why typography matters? I've never understood why some people seem to care so much about kerning and line angles in the glyphs and such. What do you think are the most important topics in typography people should learn and why do they matter?
- titanomachy 8y ago
  Matthew Butterick says it better than I ever could: https://practicaltypography.com/why-does-typography-matter.html https://practicaltypography.com/why-does-typography-matter.h...
  - jolmg 8y ago
    > Whose résumé got your attention—Violet’s (the first one) or Trixie’s (the second)? [...] I’m guessing you picked Trixie’s. Actually, Violet's grabbed my attention more. The dark backgrounds, the heavyweight bullet points, the bold letters... I guess my first reaction was that Violet's contained more information because it had a higher black-to-white ratio, and that's what caused me to favor it. Trixie's seemed too white (the black lines too thin) and so more difficult to read. I'm not sure what to take away from this. If Matthew's judgement is the more common one, maybe I'm a poor judge of what people would commonly think of as good graphic/typographic design. Then again, maybe a large reason of why I favored one over the other is because I saw them as small images instead of printed pages. Maybe as printed pages, Trixie's would've read fine, and Violet's font would be too big and loud.
    - felideon 8y ago
      > If you truly preferred Violet’s résumé to Trixie’s, you didn’t fail some typographic litmus test. The point is the same—whatever preference you had, it was based on typography, not substance. (Though after you read more of this book, come back and see if you still prefer Violet’s résumé.)
- d0m 8y ago
  Well I'm not saying to become a typography expert, but it's important to understand how font types relate to each other and how to increase clarity based on the context. For instance, print vs slides vs web page, or a little bit of content vs some heavy content could probably be improved with different fonts. Also, even if people don't notice it, the typeface/font is part of the branding and it creates different experiences. I.e. it makes something look more friendly or serious.
chaostheory 8y ago
> A lot of engineers have the mentality of "engineering is hard, but design is just whatever some color matching and styling". This mentality died over a decade ago, especially given the rise of Apple and the mainstream awareness of Jobs as a design guru
wpmoradi 8y ago
This is an amazing resource! thanks for sharing
bytematic 8y ago
Steven Krug has a good book as well.
mukeshsoni 8y ago
I recently went through Sarah Drasner's workshop "Design for developers" https://frontendmasters.com/workshops/design-for-devs/ https://frontendmasters.com/workshops/design-for-devs/ It went through exactly the points you mention in good detail. And she also showed implementation of some of these ideas on the web.
msaharia 8y ago
Is there a book you would suggest for reading on these topics? I prefer it over a website for offline reading.
Chyzwar 8y ago
Why I would spend time learning UI/UX when I can be 10X more productive building functionality. Designer even good one will charge you much less than your developer time.
laksmanv 8y ago
Is there a tutorial, course, or book that covers those four points specifically you recommend?
JoshMnem 8y ago
The Material Design guidelines have terrible advice. There is way too much animation (bad for accessibility), and unbelievably garish color recommendations. Google's own implementation of MD have no aesthetic restraint and they are making their products unpleasant to use. The basic idea of MD is fundamentally flawed, because UIs shouldn't simulate physical motion for accessibility reasons.

by d0m 8y ago

ohkaiby 8y ago

I actually took a 3-month crash course on Visual Design because I was weak in that area (as a front-end developer). Probably one of the best professional investments I have made. The course taught me basically the above list. I would add knowledge about grids and negative spacing to the above list.

ohkaiby 8y ago
One other thing to add is that you can't make a good design without content. Unless you have all of your content ready to visually position/style, don't bother designing yet. I used to try to make the visual layout first without really thinking about content, and it was always a struggle.
diek00 8y ago
I need to take this course
linnk87 8y ago
Can I have a source for the crash course? Asking for a friend!
arvinsim 8y ago
Can you point me to this specific course? I am interested.
thestepafter 8y ago
I would recommend checking out Refactoring UI, there is a YouTube channel, blog posts, and a book coming out next Tuesday. Their tips and samples from the book have already made a huge impact on my designs.
anant90 8y ago
Sorry for the plug, but since others are asking for an introductory resource, I wrote a short course on UI Design myself not too long ago. They are just 17 short tutorials: https://www.commonlounge.com/discussion/d5bae026ef6e4f949e63171e7f6890b3 https://www.commonlounge.com/discussion/d5bae026ef6e4f949e63...
- derangedHorse 8y ago
  Link hangs on 'LOADING..."
wpmoradi 8y ago
Which course did you take?
quickthrower2 8y ago
I wonder, is this a positive externality? I spend my free time doing this course but do I get paid more? Or do I just deliver more value to my employer at the same price?
- thecupisblue 8y ago
  Yes and no. Why do you care?
  - quickthrower2 8y ago
    Why do I care about getting more money? Well...
    - thecupisblue 8y ago
      You're considering learning one of the most important fields that will probably impact the way you think, reason about and look at the world. And you're thinking about money.
      - quickthrower2 8y ago
        This is kind of my point - we would like developers to learn this kind of stuff but there is no financial incentive even if it is good for their employers. There are a lot of facets to our work that are like this, for example some soft skills would be in this bucket, except for the soft skills linked to becoming a 'team leader'. Why would someone only do something for money? Well perhaps they have time and money commitments that makes it hard to justify doing stuff that is not for money, unless it is super important for some other reason. So charity work might trump learning visual design, but visual design is also trumped by learning React because that looks hot on the CV.

preommr 8y ago

> Basic of color theory Time for me to rant about how pointless and useless "color theory" is beyond the obvious things like red is for errors and green is for success. It's just a bunch of non-sequitors where people take random facts and then apply them after the fact on particular designs. Things like trying to design using colors from swatches or using colors based on their position on the color wheel are examples of what not to do because the ideas behind them are often misunderstood and therefore poorly applied. And don't even get me started on color psychology. For example, they'll take some fact like a lot of foods aren't blue or that some mould is blue and then say that's why you shouldn't use it for food related designs. Which is rubbish because you definitely want a nice blue for things like blue cheese, or for water related stuff. I could easily see someone thinking that having a picture of the ocean on a menu or part of their advertising is bad because of these silly articles even if that's their restaurant theme. It's not just about the color, but the overall design.

nkrisc 8y ago
That is not color theory, at all. You could start with the Wikipedia page to get a quick overview of what color theory really is: https://en.wikipedia.org/wiki/Color_theory https://en.wikipedia.org/wiki/Color_theory It is not the pseudo-scientific mumbo-jumbo strawman you're ranting against. Color theory makes no subjective judgements on what colors "mean" or should be used for, but instead focuses on the visual properties and perception of color.
- weinzierl 8y ago
  > Color theory makes no subjective judgements on what colors "mean" or should be used for, but instead focuses on the visual properties and perception of color. The parent was talking about color harmony (color wheels) and color psychology. This are very much the things the Wikipedia article you linked is about. Both are indeed pseudo-scientific mumbo-jumbo.
  - hathawsh 8y ago
    I'm also doubtful about color psychology, but color model theory (including color wheels) has some real substance. Most web sites from the late 1990s are today recognized as ugly because the color choices were awful (perhaps because they were trying to be compatible with graphics cards that only allowed 8 bits per pixel.) Web sites with colors that fit a recognized color model appeal to a lot more people. Color model theory is similar to music theory, in the sense that both theories may just be a codification of familiar patterns. That doesn't mean they're not useful.

PaulHoule 8y ago

I am a physics PhD turned application programmer who got into systems programming the hard way. My design skills are such that i can make something good probably half the time on my own. You're right that a small investment in learning will get you some big gains. One thing that helps is sticking to some standards. I worked at web dev shop that had a standard for forms that we called "Spider Forms" that might not have been genius but it is better than what you'd get without a plan and cheaper (and still better) than what you would get bikeshedding it with a client. I like anime art because it designed to be easily reproducible by many people. I got good at drawing these guys http://hyperdimensionneptunia.wikia.com/wiki/Dogoo http://hyperdimensionneptunia.wikia.com/wiki/Dogoo It's the only character I can draw but I can draw them quickly on blackboards, whiteboards, etc. My son lately has learned how to draw characters from Starfox and Sonic. I used to think about color theory but these days I just find a picture that has a color scheme I like and copy the color swatches. I think many people would be better off if they stuck to a small set of fonts and did not think about typography. If people put a lot of effort into it they often end up doing worse than if they took the defaults. For me the really interesting aspects of typography are the "less travelled" paths such as "what do you do if the text is too big to fit in the space?" and then shoehorning it in by changing the letter spacing and squeezing the letters. Then there is the rule of thirds. Learning that didn't make me into Ansel Adams but it vastly improved my photography overnight.

etxm 8y ago

As an engineer, I think design is so goddamn hard. People that are good at it are like majestic unicorns to me.

bdamm 8y ago
Agreed. Beyond some trivial basics all these "theories" of how to use style are really a thrashing excuse for the fact that people who are awesome at this really do have a gift, and if you want your product to look great than at some point you have to hire them. Until then, if you are developing a compelling project that does something really useful, then people don't usually care too much what it looks like as long as it doesn't burn their eyeballs out of their sockets. It's true people pay for style, but you don't need style to get something out there and into the hands of people who can help you decide whether or not you now need to invest in style.
- jakobegger 8y ago
  Good design is not the result of "having a gift", good design is the result of hard work. I don't have a background in design, I really struggle with color schemes, but I put in a lot of effort to design my software, and I think the resulting products look okay. I've hired designers for a few jobs in the past. Their portfolios looked awesome, they were obviously good at their job, but when I received the work I commissioned, I was surprised how shoddy it was. They rushed it, and it sucked. Only after lots of complaining and multiple revisions did I get decent results. It's not about being gifted. It's about putting in the work. If you try putting a nice design on your product in an hour, you will fail. Take a week to research how other products solve design challenges, try a few approaches, show your work to people, revise it a couple of times, and you will arrive at a decent design, even if you don't think of yourself as a "gifted" designer.

andrei_says_ 8y ago

Made the bullet list readable on mobile: * Visual hierarchy (I.e. the same way you divide your code in modules and functions, you need to divide the visual space in a clear hierarchy). * Basic on typography (It makes a big difference even if most people don't notice it) * Understanding what's UX (I.e. reading "Don't make me think"). Just "caring" and "thinking" about UX will improve designs, even if you don't have much experience. * Basic of color theory; How different colors mean different things (Branding-wise or for alerts/errors/warning).

ianlevesque 8y ago
This is so ironic with a comment about UI & UX.
- quickthrower2 8y ago
  Is the end user (commenter) responsible for UX or the HN web designer. In this case I'd argue both are.
- andrei_says_ 8y ago
  I didn’t want to be the one mentioning it ;)
snerbles 8y ago
It's more readable on desktop as well. Long lines in HN's code blocks render with horizontal scrollbars - using them to quote paragraphs is downright obnoxious.
- DonaldPShimoda 8y ago
  Worse is that the horizontal scrollbars don't render (at least for me) unless I start scrolling the box, so it looked like there was just some missing text.
graeme 8y ago
HN really needs to copy markdown for lists starting with * or 1,2,3,4 etc

SomeCollegeBro 8y ago

I develop an internal product that is currently used only by our companies service technicians, but the end goal is to release this to our partners for use outside of the company. Here is one of the biggest things I've learned about UX as a non-designer: watch people use your products, and be ready to accept failure. Let's say you've designed something specifically to be used a certain way. Then, upon user testing, 5 people deliberately use it a different, unintended way. This is YOUR mistake, not theirs. It can be hard to predict these type of things in advance, I've found. As a programmer, I tend to think about software a completely different way than a non-programmer (especially someone in a non-technical role). This often results in software that I think is simple, but turns out is non-intuitive and complicated.

madeuptempacct 8y ago

Do I really need to read "Dont Make Me Think"? A friend got it for me and I threw it in a "never going to read" pile assuming it could be summarized as "Things should be intuitive."

ioddly 8y ago

> Reading material design from Google https://material.io https://material.io is a great start. You may not like the UI of it, but the UX and explanations of why things are this way are really interesting. To add, I've found reading the design documentation of some web and mobile UI libraries to be very enlightening. For example, the colors section of BlueprintJS has helped really narrow down how I use colors: https://blueprintjs.com/docs/#core/colors https://blueprintjs.com/docs/#core/colors

zapzupnz 8y ago
I'd add Apple's Human Interface Guideline document and annual WWDC sessions on user interfaces. Even if you don't use a Mac or iOS device, or even if you hate Apple, taking the time to understand why they think their user interfaces are the best on the planet goes a long way to being able to understand why other companies also think their user interfaces are the best on the planet. The ideal result isn't a happy medium, though; it's whatever suits each platform best, something you only understand when you know what each platform's designers are going for. Don't look into Microsoft's design documentation though; even they can't decide what their design principles are. The only time they did, and stuck with it to the end, was Windows Phone.

lettergram 8y ago

Came to the comment section to basically write the same thing. The design is more important than coding in many ways, it's truly what sells the product. I've often used it to highlight working features and "hid" the less functional ones. I'm learning myself, but totally worth getting a basic grasp on it. I usually have my designer friends or colleagues provide feedback which helps me learn.

aerovistae 8y ago

Funny thing is, I find that site virtually unusable. It's impossible to navigate. I can't figure out what sections there are or where the content is or if there's an order or relationship between articles.

d0m 8y ago
Yeah, a bit ironic but don't let that stop you from reading and understanding the content.

plainOldText 8y ago

I've recently taken a design class and I have a keen interest in design in general, and I would say your suggestions are on the money. I would also mention the importance of layout and flow line, or how will you organize your elements in the page and how will your audience traverse them visually? This is something you really ought to think about very hard. Also, learn about gestalt principles. For example: https://www.howdesign.com/resources-education/online-design-courses-education/gestalt-theory-typography-design-principles/ https://www.howdesign.com/resources-education/online-design-...

sfilargi 8y ago

> A lot of engineers have the mentality of "engineering is hard, but design is just whatever some color matching and styling". Just anecdata, but as an engineer I think engineering is easy and design is hard. For engineering you just have to follow logic, reasoning, good practices and have discipline. Also you can test your code to death to make sure everything is correct. For design you have to have an artistic nature.

jolmg 8y ago
> For design you have to have an artistic nature. I know what you mean, but I now read "artistic nature" as making subjective/arbitrary decisions that for some unknown reason a lot of people favor. Though by the way I read d0m's comment, it seems like there's a fair amount of objectivity in graphic design as well. Lots of logic: If you need to design something, it's because you have a goal and you need to make every decision in that design further take you to that goal. Gotta pick a color for something? Your goal means influencing people? What's your target audience? Pick a color that's statistically known to elicit the emotions in your target audience that lead you to your goal.
- sfilargi 8y ago
  Yeah, I get it, even art has to follow some ground rules to begin with, but do we know what exactly is it that makes Beethoven’s “Fur Elise” such a great composition?
  - maroonblazer 8y ago
    Music is a very different domain than visual design and we have heuristics for both that, if followed, will keep a musician or designer from composing/designing something demonstrably 'bad'. Will it be brilliant? Likely not, but "not bad" is not a bad goal to aim for.
  - maybe-not-in-ux 8y ago
    It's helpful to deconflate art and design. Design uses artistic tools in the service of clearly defined and objective goals. It is a learned skill.

Myrmornis 8y ago

Really, I wouldn't recommend that theoretical approach at all to a backend engineer who wants practical tips for their side projects. I'd say something like: - Learn to use bootstrap (or whatever the most highly-thought of equivalent batteries-included CSS framework is) - Don't be scared of modern JS. Work through the tutorial on webpack: https://webpack.js.org/guides/getting-started/ https://webpack.js.org/guides/getting-started/ And figure out how to incorporate it into your projects development work flow. Then you'll be able to write in modern JS and take your pick of JS frameworks to use if you want. - Don't be distracted by all the blog posts.

kelvin0 8y ago

Being on the software engineering side of things, I do not trivialize the design aspect. However, it's very rare that an 'engineering' type person will also have the 'ux/ui/designer' chops. We don't necessarily understand that aspect of things in the same way ... clearly my weakness, and I assume it as such. Ideally software development in some case would benefit enormously in a holistic approach to the engineering and design side of things. I've been looking for a good designer to complement my set of skills, but I've yet to find that person... I am really leaning towards taking a course in such design aspects. But I won't become a magical-ux-ui-designer wizard.

jolmg 8y ago

> Basic on typography (It makes a big difference even if most people don't notice it) Can you expand on why typography matters? I've never understood why some people seem to care so much about kerning and line angles in the glyphs and such. What do you think are the most important topics in typography people should learn and why do they matter?

titanomachy 8y ago
Matthew Butterick says it better than I ever could: https://practicaltypography.com/why-does-typography-matter.html https://practicaltypography.com/why-does-typography-matter.h...
- jolmg 8y ago
  > Whose résumé got your attention—Violet’s (the first one) or Trixie’s (the second)? [...] I’m guessing you picked Trixie’s. Actually, Violet's grabbed my attention more. The dark backgrounds, the heavyweight bullet points, the bold letters... I guess my first reaction was that Violet's contained more information because it had a higher black-to-white ratio, and that's what caused me to favor it. Trixie's seemed too white (the black lines too thin) and so more difficult to read. I'm not sure what to take away from this. If Matthew's judgement is the more common one, maybe I'm a poor judge of what people would commonly think of as good graphic/typographic design. Then again, maybe a large reason of why I favored one over the other is because I saw them as small images instead of printed pages. Maybe as printed pages, Trixie's would've read fine, and Violet's font would be too big and loud.
  - felideon 8y ago
    > If you truly preferred Violet’s résumé to Trixie’s, you didn’t fail some typographic litmus test. The point is the same—whatever preference you had, it was based on typography, not substance. (Though after you read more of this book, come back and see if you still prefer Violet’s résumé.)
d0m 8y ago
Well I'm not saying to become a typography expert, but it's important to understand how font types relate to each other and how to increase clarity based on the context. For instance, print vs slides vs web page, or a little bit of content vs some heavy content could probably be improved with different fonts. Also, even if people don't notice it, the typeface/font is part of the branding and it creates different experiences. I.e. it makes something look more friendly or serious.

chaostheory 8y ago

> A lot of engineers have the mentality of "engineering is hard, but design is just whatever some color matching and styling". This mentality died over a decade ago, especially given the rise of Apple and the mainstream awareness of Jobs as a design guru

wpmoradi 8y ago

This is an amazing resource! thanks for sharing

bytematic 8y ago

Steven Krug has a good book as well.

mukeshsoni 8y ago

I recently went through Sarah Drasner's workshop "Design for developers" https://frontendmasters.com/workshops/design-for-devs/ https://frontendmasters.com/workshops/design-for-devs/ It went through exactly the points you mention in good detail. And she also showed implementation of some of these ideas on the web.

msaharia 8y ago

Is there a book you would suggest for reading on these topics? I prefer it over a website for offline reading.

Chyzwar 8y ago

Why I would spend time learning UI/UX when I can be 10X more productive building functionality. Designer even good one will charge you much less than your developer time.

laksmanv 8y ago

Is there a tutorial, course, or book that covers those four points specifically you recommend?

JoshMnem 8y ago

The Material Design guidelines have terrible advice. There is way too much animation (bad for accessibility), and unbelievably garish color recommendations. Google's own implementation of MD have no aesthetic restraint and they are making their products unpleasant to use. The basic idea of MD is fundamentally flawed, because UIs shouldn't simulate physical motion for accessibility reasons.