6 ms·

My tips: - Design is a skill you can learn but you need to put at least a few days or weeks into it to make some progress. A lot of people who say they can't d

My tips: - Design is a skill you can learn but you need to put at least a few days or weeks into it to make some progress. A lot of people who say they can't design have barely spent a few hours working on their own designs or following tutorials. For example, I don't think anybody would say "I'm not good at Java" without trying to learn it first but people do this with design all the time without giving themselves a fair chance to try. - Don't design and code at the same time. You'll waste time and burn yourself out getting lost in CSS rabbit holes, trying to make the code look pretty etc. and then when you get it working it and you step back to look at it, you realise the design doesn't work and it needs more iterations. Design a mockup first in something like Figma or InVision and only start coding when the design is ready. You can iterate on the design an order of magnitude faster this way because you can just drag/drop things around instead of fighting with how to align and style things in CSS. Generally once I have an initial rough design drawn in a design tool, I duplicate the whole thing, tweak it (like changing the colors, sizes, fonts), duplicate that, tweak it etc. to explore and combine lots of different design ideas until I happen upon some combination I like. It's hard to replicate this process and avoid tunnel vision when you're designing in an IDE instead.

DeathArrow 4y ago
I would just do the coding first and use whatever crap I have on hand (Bootstrap, standard fonts) because I want the design to follow functionality, not the other way around. And because design takes more time than coding for me. So, if I decide that something is wrong and throw the project, this way I lose less time.
dceddia 4y ago
And on the subject of learning the skill through practice, probably the most effective thing I’ve tried has been “copy work”, something I learned about in an article[0] by Erik Kennedy a few years back. Basically: reproduce existing good designs, pixel-for-pixel. It’s like the 80/20 of design practice. It’s amazing the kinds of small details you start to notice when you try to faithfully copy a design. 0: https://www.smashingmagazine.com/2017/02/improving-ui-design-skills-copywork/ https://www.smashingmagazine.com/2017/02/improving-ui-design...
- DeathArrow 4y ago
  Yep, copy but don't look at the source. Make it look 100% the same but do it yourself.
dsincl12 4y ago
Completely agree. I spent a lot of time when learning design, "designing" writing code since I was a developer first. That was a lot of time wasted but it took effort and will to learn all the design tools and understand the process for sure, but it was definitely worth it.
michaelsalim 4y ago
Agreed with both. My own experience for the second point: separating it makes a huge difference because I'm in such a different head space when focusing only on design. What's funny is, 90% of the time this works well. But sometimes I just can't design something I like in figma. For those cases, I start coding and most of the time, I come up with a good enough design. The difference in how I think between the two is interesting.
efortis 4y ago
Illustrator or Inkscape can import PDFs, so you can iterate between code and graphic design programs by exporting the page to PDF. That is, somethings are easier to experiment with or to start out in code.
stickfigure 4y ago
> Design a mockup first in something like Figma or InVision and only start coding when the design is ready. I do this the opposite way. Just get the data crudely on the page and figure out the information architecture first. Then figure out how to make it attractive. Often during implementation I realize "oh, this data doesn't work quite the way I expected it to" and the IA changes.
- lupire 4y ago
  Parent was talking about coding the UI ("CSS"), not the data.
- code_biologist 4y ago
  Yeah, being handwavy about IA is absolutely a common sin of weak designs. I love getting a design that's technically sound, not just pretty. Another problem I've seen at work with the "design first" approach vs planning for technical feedback on an initial design: our frontend engineers would take the design and implement it exactly as is, papering over differences between the data entry and the underlying data model as needed — then users get confused about what exactly each option or interaction does. It's close enough to be serviceable (and not get fixed) but different enough to be annoying.
  - seanwilson 4y ago
    > Another problem I've seen at work with the "design first" approach vs planning for technical feedback on an initial design: our frontend engineers would take the design and implement it exactly as is, papering over differences between the data entry and the underlying data model as needed — then users get confused about what exactly each option or interaction does. It's close enough to be serviceable (and not get fixed) but different enough to be annoying. This is where you should design wireframes first (e.g. rough greyscale sketches), turn them into clickable prototypes (Figma and InVision let you link up wireframes this way), and get feedback on these from user testing and the developers before creating high-definition designs or doing any coding.
  - adrianmsmith 4y ago
irrational 4y ago
The fact that people get college degrees in graphic design, yet we think we can duplicate their skills with little effort shows an amazing degree of hubris. This is like business people mocking programmers and saying that anyone could do it.
- TobTobXX 4y ago
  There's no doubt a graphic designer can do more things better in this area. But a dev can acquire a skillset that is sufficient. I for example feel confident designing a frontend to the satisfaction of a customer, but I would never be able to put together a flyer or design an ad. As a comparison: While a skilled sculptist is undoubtetly better at his craft than a mechanic, the latter can take pride in finishing off a machine part just as much as the sculptist, and to an untrained eye, the parts display an equal amount of skill. Learning-by-doing gets you far. Actually investing the time and studying the field gets you further, but is more expensive.
- indymike 4y ago
  > people get college degrees in graphic design, yet we think we can duplicate their skills with little effort No one has said you can "duplicate their skills". What the article is suggesting is that you use a framework with great design engineered in: Tailwind. In the case of Tailwind you'll benefit from the collected UI work of Adam Wathan and about 200 others.
  - Mike_Andreuzza 4y ago
    Mmmmm...A degree is not needed to be good at design...
- lupire 4y ago
  You can get a college degree in drawing too, but you don't need one to be able to do nice sketches. Don't need a college degree for making software either
- hansvm 4y ago
  _Can't_ anyone program? A few hundred of my classmates spent a couple quarters casually learning C++ in high school from a teacher barely scraping together the lessons a day before she taught them, and that was enough of a kickstart that most of us are some kind of programmer by trade, many of us in FAANG. Sure it takes a little time to learn, you could probably short-circuit that process with more effort, and there are greater heights to be achieved with sufficient dedication, but the majority of programming just isn't that difficult. Just about anyone _could_ do it with a little effort. That's also ignoring the compounding effects of education. People get college degrees in graphic design, but a couple of those years are shared between majors, some sizeable fraction of the unique couple years of training are dedicated to learning how to _efficiently_ perform certain tasks, and some other sizeable fraction is UI/UX knowledge that's somewhat duplicated in other fields. Is there really that much hubris in saying that some kinds of relatedly skilled professionals might only need to put in a little effort to equate to the ~<1yrs of unique effort obtained in a graphic design degree, especially when the professional in question doesn't need to use the entire degree and especially when learning is moderately accelerated by having learned other tangential things to hang the new knowledge on? Maybe yes, but if so I don't think it's obvious enough to warrant a single-line dismissal.
bredren 4y ago
> For example, I don't think anybody would say "I'm not good at Java" without trying to learn it first but people do this with design all the time without giving themselves a fair chance to try. This is what people say when they see me walking my cat. “I tried he just laid there.” What for like 10 mins once? It can take months and years to get a cat comfortable walking around on a leash in a residential environment. People want turnkey everything.
bredren 4y ago
> For example, I don't think anybody would say "I'm not good at Java" without trying to learn it first but people do this with design all the time without giving themselves a fair chance to try. This is what people say when they see me walking my cat. “I tried he just laid there.” I just smile and say, ah ya they’ll do that. If they hadn’t already given up, I’d probably probe on the fact that they probably bought a harness and tried it like once for 10 minutes. It can take months and years to get a cat comfortable walking around on a leash in a residential environment. People want turnkey everything.
Dracophoenix 4y ago
> Don't design and code at the same time. You'll waste time and burn yourself out getting lost in CSS rabbit holes, trying to make the code look pretty etc. and then when you get it working it and you step back to look at it, you realise the design doesn't work and it needs more iterations. This is where I get stuck. It's not because of analysis paralysis (although there is a bit of that too) so much as it is for optimizing loading time, comparing/triaging frameworks, and a whole host of other problems I'll call "optimization syndrome". I know the golden rule is to avoid premature optimization, but at same time I don't want to commit to a design that I like only to find out after the fact that it's slow, computationally expensive or relies on an outdated/EOL dependency. Any advice in that?
- seanwilson 4y ago
  > I don't want to commit to a design that I like only to find out after the fact that it's slow, computationally expensive or relies on an outdated/EOL dependency. Hmm, did you have a specific example in mind? I can't think this applies that often. You can for sure scope out the dev/tech side a little first then keep that in mind as you're doing the design first so you're not designing something that's infeasible to code. For example, I think I've developed quite a good feeling of what web design elements are going to difficult to adapt to mobile/responsive designs and will tend towards cleaner to implement ones. It's a lot quicker to e.g. roughly draw a UI widget in a design tool to get a feeling for how it might work vs integrating a UI library and coding it up before realising it was the wrong direction to go. You'll likely come up with better ideas too by getting your head away from how you're going to code your app and thinking about what a new user wants to do with your app.

DeathArrow 4y ago

I would just do the coding first and use whatever crap I have on hand (Bootstrap, standard fonts) because I want the design to follow functionality, not the other way around. And because design takes more time than coding for me. So, if I decide that something is wrong and throw the project, this way I lose less time.

dceddia 4y ago

And on the subject of learning the skill through practice, probably the most effective thing I’ve tried has been “copy work”, something I learned about in an article[0] by Erik Kennedy a few years back. Basically: reproduce existing good designs, pixel-for-pixel. It’s like the 80/20 of design practice. It’s amazing the kinds of small details you start to notice when you try to faithfully copy a design. 0: https://www.smashingmagazine.com/2017/02/improving-ui-design-skills-copywork/ https://www.smashingmagazine.com/2017/02/improving-ui-design...

DeathArrow 4y ago
Yep, copy but don't look at the source. Make it look 100% the same but do it yourself.

dsincl12 4y ago

Completely agree. I spent a lot of time when learning design, "designing" writing code since I was a developer first. That was a lot of time wasted but it took effort and will to learn all the design tools and understand the process for sure, but it was definitely worth it.

michaelsalim 4y ago

Agreed with both. My own experience for the second point: separating it makes a huge difference because I'm in such a different head space when focusing only on design. What's funny is, 90% of the time this works well. But sometimes I just can't design something I like in figma. For those cases, I start coding and most of the time, I come up with a good enough design. The difference in how I think between the two is interesting.

efortis 4y ago

Illustrator or Inkscape can import PDFs, so you can iterate between code and graphic design programs by exporting the page to PDF. That is, somethings are easier to experiment with or to start out in code.

stickfigure 4y ago

> Design a mockup first in something like Figma or InVision and only start coding when the design is ready. I do this the opposite way. Just get the data crudely on the page and figure out the information architecture first. Then figure out how to make it attractive. Often during implementation I realize "oh, this data doesn't work quite the way I expected it to" and the IA changes.

lupire 4y ago
Parent was talking about coding the UI ("CSS"), not the data.
code_biologist 4y ago
Yeah, being handwavy about IA is absolutely a common sin of weak designs. I love getting a design that's technically sound, not just pretty. Another problem I've seen at work with the "design first" approach vs planning for technical feedback on an initial design: our frontend engineers would take the design and implement it exactly as is, papering over differences between the data entry and the underlying data model as needed — then users get confused about what exactly each option or interaction does. It's close enough to be serviceable (and not get fixed) but different enough to be annoying.
- seanwilson 4y ago
  > Another problem I've seen at work with the "design first" approach vs planning for technical feedback on an initial design: our frontend engineers would take the design and implement it exactly as is, papering over differences between the data entry and the underlying data model as needed — then users get confused about what exactly each option or interaction does. It's close enough to be serviceable (and not get fixed) but different enough to be annoying. This is where you should design wireframes first (e.g. rough greyscale sketches), turn them into clickable prototypes (Figma and InVision let you link up wireframes this way), and get feedback on these from user testing and the developers before creating high-definition designs or doing any coding.
- adrianmsmith 4y ago

irrational 4y ago

The fact that people get college degrees in graphic design, yet we think we can duplicate their skills with little effort shows an amazing degree of hubris. This is like business people mocking programmers and saying that anyone could do it.

TobTobXX 4y ago
There's no doubt a graphic designer can do more things better in this area. But a dev can acquire a skillset that is sufficient. I for example feel confident designing a frontend to the satisfaction of a customer, but I would never be able to put together a flyer or design an ad. As a comparison: While a skilled sculptist is undoubtetly better at his craft than a mechanic, the latter can take pride in finishing off a machine part just as much as the sculptist, and to an untrained eye, the parts display an equal amount of skill. Learning-by-doing gets you far. Actually investing the time and studying the field gets you further, but is more expensive.
indymike 4y ago
> people get college degrees in graphic design, yet we think we can duplicate their skills with little effort No one has said you can "duplicate their skills". What the article is suggesting is that you use a framework with great design engineered in: Tailwind. In the case of Tailwind you'll benefit from the collected UI work of Adam Wathan and about 200 others.
- Mike_Andreuzza 4y ago
  Mmmmm...A degree is not needed to be good at design...
lupire 4y ago
You can get a college degree in drawing too, but you don't need one to be able to do nice sketches. Don't need a college degree for making software either
hansvm 4y ago
_Can't_ anyone program? A few hundred of my classmates spent a couple quarters casually learning C++ in high school from a teacher barely scraping together the lessons a day before she taught them, and that was enough of a kickstart that most of us are some kind of programmer by trade, many of us in FAANG. Sure it takes a little time to learn, you could probably short-circuit that process with more effort, and there are greater heights to be achieved with sufficient dedication, but the majority of programming just isn't that difficult. Just about anyone _could_ do it with a little effort. That's also ignoring the compounding effects of education. People get college degrees in graphic design, but a couple of those years are shared between majors, some sizeable fraction of the unique couple years of training are dedicated to learning how to _efficiently_ perform certain tasks, and some other sizeable fraction is UI/UX knowledge that's somewhat duplicated in other fields. Is there really that much hubris in saying that some kinds of relatedly skilled professionals might only need to put in a little effort to equate to the ~<1yrs of unique effort obtained in a graphic design degree, especially when the professional in question doesn't need to use the entire degree and especially when learning is moderately accelerated by having learned other tangential things to hang the new knowledge on? Maybe yes, but if so I don't think it's obvious enough to warrant a single-line dismissal.

bredren 4y ago

> For example, I don't think anybody would say "I'm not good at Java" without trying to learn it first but people do this with design all the time without giving themselves a fair chance to try. This is what people say when they see me walking my cat. “I tried he just laid there.” What for like 10 mins once? It can take months and years to get a cat comfortable walking around on a leash in a residential environment. People want turnkey everything.

bredren 4y ago

> For example, I don't think anybody would say "I'm not good at Java" without trying to learn it first but people do this with design all the time without giving themselves a fair chance to try. This is what people say when they see me walking my cat. “I tried he just laid there.” I just smile and say, ah ya they’ll do that. If they hadn’t already given up, I’d probably probe on the fact that they probably bought a harness and tried it like once for 10 minutes. It can take months and years to get a cat comfortable walking around on a leash in a residential environment. People want turnkey everything.

Dracophoenix 4y ago

> Don't design and code at the same time. You'll waste time and burn yourself out getting lost in CSS rabbit holes, trying to make the code look pretty etc. and then when you get it working it and you step back to look at it, you realise the design doesn't work and it needs more iterations. This is where I get stuck. It's not because of analysis paralysis (although there is a bit of that too) so much as it is for optimizing loading time, comparing/triaging frameworks, and a whole host of other problems I'll call "optimization syndrome". I know the golden rule is to avoid premature optimization, but at same time I don't want to commit to a design that I like only to find out after the fact that it's slow, computationally expensive or relies on an outdated/EOL dependency. Any advice in that?

seanwilson 4y ago
> I don't want to commit to a design that I like only to find out after the fact that it's slow, computationally expensive or relies on an outdated/EOL dependency. Hmm, did you have a specific example in mind? I can't think this applies that often. You can for sure scope out the dev/tech side a little first then keep that in mind as you're doing the design first so you're not designing something that's infeasible to code. For example, I think I've developed quite a good feeling of what web design elements are going to difficult to adapt to mobile/responsive designs and will tend towards cleaner to implement ones. It's a lot quicker to e.g. roughly draw a UI widget in a design tool to get a feeling for how it might work vs integrating a UI library and coding it up before realising it was the wrong direction to go. You'll likely come up with better ideas too by getting your head away from how you're going to code your app and thinking about what a new user wants to do with your app.