[HN Gopher] How to become a "designer who codes" (2019)
___________________________________________________________________
How to become a "designer who codes" (2019)
Author : blueridge
Score : 24 points
Date : 2023-04-21 18:59 UTC (4 hours ago)
(HTM) web link (publication.design.systems)
(TXT) w3m dump (publication.design.systems)
| capableweb wrote:
| Anyone resources for the opposite, how to become a "coder who
| designs"?
|
| Edit: I don't mean generic "learn design" resources for people
| who don't know design but specifically resources meant for
| programmers to pick up design. Like the book "Math for
| Programmers" but for design. Although thanks for all the links,
| surely there is something good there too.
| prophesi wrote:
| I think Figma's tutorials are a great way to start. There's
| something valuable about learning design as you learn how to
| use a design tool at the same time.
|
| https://www.figma.com/resources/learn-design/
| samtho wrote:
| Maybe https://hackdesign.org/ ?
| btown wrote:
| One helpful resource is https://www.refactoringui.com/ and
| related materials/blogs - but evaluate it against your
| inspirations to understand when the "rules" should be broken,
| or aren't even rules that apply to the aesthetic you're going
| for! Particularly if that aesthetic is advised by, say, luxury
| fashion. But it helps to understand the space of what is
| possible!
| lxe wrote:
| 1. Use more whitespace
|
| 2. Go to https://dribbble.com/ and look for inspiration
|
| 3. Read https://css-tricks.com/ and try to reproduce some of
| these things
|
| 4. Get into computer graphics in general. Mess around with
| https://www.shadertoy.com/results?query=&sort=popular&filter...
|
| 5. Go on a wikipedia dive from
| https://en.wikipedia.org/wiki/Human_factors_and_ergonomics and
| https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things
|
| 6. Go to ai.com and ask things like "how to learn figma as a
| coder" and drill down to specifics
| uxcolumbo wrote:
| > 1. Use more whitespace
|
| This depends on who you are designing it for.
|
| The B2B user base I worked with for example hated material
| design back then.
|
| Information density is important.
|
| So give users a choice to change this.
| bluefirebrand wrote:
| Absolutely.
|
| It is crucial to realize that designing an app that is
| meant to be used by professionals is different from
| designing an app meant to be used by everyone.
|
| Apps that are meant to be used by everyone need to try and
| lowest-common-denominator the design. It means reduced
| information density, less distractions, and always guiding
| them by the hand to do what they want to do.
|
| Apps for professionals are meant to be used frequently,
| build familiarity, and provide powerful tools for those
| people. In those cases some friction in the design can be
| tolerated if the result is a powerful tool, and information
| density can be high because it speeds up their workflow.
| thr0waway001 wrote:
| I find that becoming an X who codes is easier than a coder who
| Xs.
|
| To be a coder who designs you have to learn about design which
| is no small feat.
|
| But to learn to code .... well all that is ... is just learning
| syntax and telling the machine to carry out instructions. At
| minimum.
|
| Coding can't be that hard if people like me can do it.
| mettamage wrote:
| Lol, coding was the most difficult thing for me to learn. I
| didn't learn design but did take a 1 month class (40 hours
| per week with a teacher + 20 hours of self-study). It was by
| far an easier month than my first programming course.
|
| Everyone is good at learning different things
| scyzoryk_xyz wrote:
| How you define "becoming" is the crucial part here.
|
| How quickly do you become the thing when doing it?
| VoodooJuJu wrote:
| >I find that becoming an X who codes is easier than a coder
| who Xs
|
| How would you know? We have these scenarios:
|
| 1. a coder first who learned how to design second
|
| 2. a designer first who learned how to code second
|
| These paths are mutually exclusive, you can't experience
| both. How then can you judge one as being easier than the
| other?
| shove wrote:
| Pick up "Stop Stealing Sheep" an oldie but goodie on how type
| works.
| uxcolumbo wrote:
| What specifically do you want to get better at?
|
| Visual design or interaction design?
|
| Try these:
|
| https://hackdesign.org/
|
| https://www.interaction-design.org/courses/ui-design-pattern...
|
| https://www.manning.com/books/usability-matters
|
| https://pragprog.com/titles/lmuse2/designed-for-use-second-e...
|
| https://designcode.io/ui-design-for-developers
|
| https://www.learnui.design/newsletter.html
|
| https://www.refactoringui.com/
| capableweb wrote:
| > What specifically do you want to get better at?
|
| Personally I'm already at a comfortable level when it comes
| to both coding and designing, so I'm not looking for anything
| in particular. But to gather a list of resources that I can
| share with mentees who mentioned they're interested in
| getting better at the design-side of things.
|
| Those are all great, and other links are as well, so thank
| you everyone.
| kitsunesoba wrote:
| For me, a lot of it was just developing a "gut feel" for UI/UX,
| which enables me to play with different designs and achieve
| something decent through iterative tweaking (just keep poking
| it until it feels right).
|
| In my experience, this mostly entails internalizing sets of
| rules surrounding usage of whitespace, alignment, control
| grouping, functionality disclosure, and legibility among other
| things. For me this was older versions of the OS X Human
| Interface Guidelines[0] (newer versions are ok but not as high
| quality, with fewer details and compromises in clarity in favor
| of aesthetics).
|
| [0]:
| https://web.archive.org/web/20110604173215/http://developer....
| hbien wrote:
| I really like:
|
| Non Designer's Design Book - for higher level guidelines on
| design
|
| Refactoring UI - for tactical suggestions on UIs
|
| Some other books: Bootstrapping Design and Design for Hackers
| Spark_Ed wrote:
| I was a coder who learned to design a decade ago.
|
| Start by opening up your design eye and paying attention to the
| how and why of everything you see. The design of everyday
| things is a good book to start opening your design eye.
|
| The material design spec is a good resource for learning some
| basic design rubric.
|
| Learn the tools that are used to design. Adobe XD is my
| personal choice. Build tooling inside of XD to work faster,
| like your own custom sticker sheet. Maybe even get practice at
| it by designing a design spec by hand. Material design,
| tailwinds, and bootstrap are all options to start from.
| FrontAid wrote:
| Ask HN: How did you increase your UX skills?
|
| https://news.ycombinator.com/item?id=32147968
| vlunkr wrote:
| If you want to go the extra mile, learn enough JSX to build a
| static version of the page. The developers will love you if you
| hand them components and CSS that look correct. It's less work
| than you might think to jump from HTML to JSX.
| Gualdrapo wrote:
| Then I could say I am a designer who codes. I learned by myself
| HTML and CSS, and eventually JavaScript, PHP and some Python
| (when Python 2 was still a thing!) even before beginning to study
| graphic design.
|
| I guess it's great in the sense of being able to "speak" designer
| language and developer language. I have learned from people who
| codes like breathing and I do hope they have learned one thing or
| two from me about design.
|
| But right now I am being miserable in trying to get a job focused
| on coding. As I don't have any real world experience with React
| (nor Vue, Angular nor Svelte), I haven't landed any gig. And I
| suspect that the fact I don't have a CS major also doesn't make
| things better - at least here I feel like employers who see a CV
| of a graphic designer who says they can code, will say something
| on the lines of "bullshit! Only CS people can code!"
| yawnxyz wrote:
| I'm a designer who codes! It's very different today than it was
| ten years ago. Or even ten months ago.
|
| 1) get a good grasp of programming basics by taking a codecademy
| python course 2) use copilot / chatGPT / codeium 3) build stuff
| better and faster than I was able to do last year
| rebelde wrote:
| Is there a name for designers who know CSS? I guess not. It would
| make it easier for to search for and hire them if I could
| identify them better.
| ckz wrote:
| In the past I've just called myself a full-stack designer (+/-
| extra words like UI/UX or developer) or some variant thereof.
| The hiring process isn't really aligned to finding such folks
| though for sure. Neither are internal progression systems at
| some companies.
|
| My first internship was as a designer, then I freelanced for
| them as a dev, then when I graduated and it came time to join
| full-time, I was asked to pick one track or the other. :)
| ckz wrote:
| My hot take has always been that the emergence of the Front-End
| Developer role came about backwards and that the correct
| expectation was that designers learn to code.
|
| HTML & CSS seem a world apart from traditional programming (and
| computer science, etc.) and were initially much more about things
| that were the designer's realm--another tool for layout, format,
| hierarchy, etc. I remember so many frustrated PHP et al. devs who
| really didn't love writing HTML being thrilled when I would ask
| to contribute to the UI layer of a given CRUD app. I was happier
| doing it that way too (still am).
|
| Javascript--especially before being engineered into its current
| oblivion--was fuzzier territory, but I'd advocate that it should
| be a shared responsibility between the designer and [back-end?]
| developer, meeting somewhere around accessing the API.
|
| The ability to both design and implement the interaction layer of
| a website or application is a superpower and, on average, results
| in a higher-quality product. The current division of labor makes
| for weird silos and loading spinners everywhere that one layer of
| responsibility ends and the next begins.
|
| Note that this is the path I took and prefer (dev who designs;
| designer who devs), which I suppose makes me both less-common and
| very biased towards it. :)
| danielvaughn wrote:
| I agree. For a while now, I've been working on a programming
| language specifically for designers. The idea is to incorporate
| the same verbiage and mental models that designers use in their
| daily lives. I think html and css are nice, but they can't be
| transferred over to other platforms. Designers need a platform-
| agnostic language.
| Freire_Herval wrote:
| >HTML & CSS seem a world apart from traditional programming
| (and computer science, etc.) and were initially much more about
| things that were the designer's realm--another tool for layout,
| format, hierarchy, etc.
|
| This was the problem. HTML was for a very specific idea about
| design and page layout but designers wanted more options then
| the primitives provided by HTML.
|
| So to fix they created CSS. Then started endlessly tacking
| things onto CSS until it's the mess that it is today.
|
| A well designed API happens in layers. You have pixel
| primitives at the bottom layer and then progressing higher and
| higher to textual and graphic design primitives at a top most
| layer. What we have in the front end world today is HTML at the
| bottom layer and pixels inside the canvas layer. The whole
| thing is duck taped together in ways that don't make sense.
| snide wrote:
| That's a lot of words. I'll counter with my own shorter list for
| those without the stamina.
|
| 1. Become very strong at raw CSS.
|
| 2. Learn how to use your terminal.
|
| 3. Start making "polish" PRs in whatever site / app you work on.
|
| 4. Pick up skills from engineers organically around you as you
| clean up the front of the frontend.
|
| 5. Learn that design is meant to move, and pick up animation!
|
| If you really learn CSS, like becoming the best person at your
| company in it, you will become immensely valuable to your team.
| Every great coding designer I've known got there because they
| were frustrated their engineering team would miss details from
| their designs. They learned how to clean up behind them, and then
| next thing they knew they were delivering coded prototypes, and
| not designs to their feature teams. They knew static designs
| would fall apart, and had the stamina to work on the three issues
| that come up most in web design: text truncation, focus issues
| and media query issues.
|
| Source. Coding designer that's been at it for 25 years. I've
| worked at every level of design: from grunt, to open source
| system-designer, to Head of Design at a public company for a 45
| person design team. Gave it all up to get back in the code and
| hack!
|
| Coding designers are the best! Pair them with a strong visual
| designer and a patient engineer and you will have an awesome
| product.
|
| Side note. I've worked in dozens of front-ends over a long
| career. CSS is the only constant.
| sourcecodeplz wrote:
| This guy frucks!
| flashgordon wrote:
| Oh man how do I find someone like this. As a backend/infra dev
| I respect, fear and loath (in the reverse order) css. If you
| can find your complement(s) there is nothing like it!
| mortenjorck wrote:
| I've tried to move toward this kind of arrangement in the
| past, but have never quite broken through. While I'm fluent
| in HTML/CSS, the major obstacle to actually committing code
| as a UX/UI designer has been the codebase itself.
|
| I can pop open a web inspector and make a bunch of changes,
| but that's the easy part. Unlike when I'm working on my own,
| far simpler side projects, I can't just switch over to VS
| Code and paste the changes in to the requisite selectors:
| Assuming I have a local environment set up (no easy feat
| itself!), now I have to track down React components, find
| their stylesheets, perhaps follow some leads out to other
| stylesheets coming from different libraries...
|
| It's all something I'd love to get to a point of familiarity
| with in my next job (which I am currently looking for!), but
| the upfront time investment (in part by the developer to
| explain the repo to me) has kept it just out of reach so far.
| throwawayai2 wrote:
| As a designer who know how to code, I would love to know how
| to find a job like this.
| filoleg wrote:
| Not sure about today (since I don't work there anymore),
| but my org at Microsoft back about 5 years ago had a role
| that was pretty much like what this comment chain is
| talking about.
|
| IIRC they called it "design engineer". Not sure where in
| the org structure they fell under (i.e., whether they
| reported to design managers or engineering managers, i
| think it might've been under engineering managers), but I
| worked with a few of them directly, and it was amazing.
|
| I was working on the front-end of a web app, so I did quite
| a bit of design implementation handed to me by designers.
| But for some very tricky styling or just in general,
| occasionally, design engineers would come out to help.
| capableweb wrote:
| > 5. Learn that design is meant to move, and pick up animation!
|
| If you do, please don't force users to endure slow animations
| or slow "micro interactions", make it do what it does fast,
| especially if you're building applications people use
| professionally.
|
| > Side note. I've worked in dozens of front-ends over a long
| career. CSS is the only constant.
|
| Same here, and I'd add that JavaScript (not TypeScript, not
| React, not X) has also been a constant for me.
| uxcolumbo wrote:
| Good points.
|
| Interested to find out more what you mean with this:
|
| > 5. Learn that design is meant to move, and pick up animation!
|
| I mainly work with 'Enterprise' or B2B users. My experience
| those users don't care about animations. They just want the
| fastest way from A -> B and don't get in their way.
|
| What's your experience and with what type of users?
|
| I get frustrated with animated interfaces on the web. It
| usually means my laptop fan spins up because the designer
| wanted to show off how cool all those CSS animation thingies
| are.
|
| UI animations seen on mobile apps are better, e.g. subtle
| animations used in Apple's music app improve usability.
|
| I usually try to stick to using it for making signifiers
| clearer, to show state changes or for feedback.
|
| This is a good book:
| https://rosenfeldmedia.com/books/designing-interface-animati...
| idopmstuff wrote:
| My whole career has been in enterprise software, and I've
| found that the actual end users like the same sorts of things
| you find in well-designed consumer apps, because that's what
| they're used to. I think when you say "UI animations seen on
| mobile apps are better, e.g. subtle animations used in
| Apple's music app improve usability." that really nails it -
| nobody wants overly artsy animations (in consumer or B2B
| software, in my experience), but subtle use of animation can
| make the product feel more responsive in a way that improves
| the user's perception of it.
| Freire_Herval wrote:
| I have a personal opinion about modern "design" that isn't shared
| by most designers or coders. You're welcome to disagree and vote
| me down but I just want to say this is just my opinion and I
| prefer to hear your disagreement in the form of a civil reply
| rather then an anonymous down-vote.
|
| First my opinion of modern design is that it is trivially easy.
| Modern design nowadays is simply about deciding how to layout
| text, colored polygons and pictures on a page. The next layer of
| complexity is temporal and around how the page transforms via
| interaction with it but this is also easy. This is largely
| because of the trends towards simplicity and minimalism which are
| very different from the complicated and ornate design styles of
| the past.
|
| I mean take a look at HN or even the google main page. Both are
| excellent designs. Clear, clean and informative and
| straightforward. But, also, those designs are extremely trivial.
| There's not much detail and there's not much work involved in
| creating these sites. It's simply a matter of moving certain
| premade primitives into the correct position.
|
| I mean take a look at the spacex website:
| https://www.spacex.com/. Looks good right? But it's also just not
| much work. It's basically a slide show of background images with
| a link to the relevant page.
|
| It can get more complex then this when you design something like
| jira or gmail but ultimately even those UIs though more complex
| doesn't even near the complexity of programming.
|
| That's why I'm not surprised about people like the OP who are
| better at "design" then coding. Yeah it makes sense because
| design is waay easier then coding. On the other side of the
| equation I've seen powerful engineers say they can't "design" and
| I'm literally in disbelief. Are you saying you can't imagine
| something like the simplistic spaceX slideshow? I don't believe
| it. I think a lot of engineers are just under confident about
| their design skills and a lot of designers are over-confident
| about their own skills.
|
| At the same time I feel for the OP because front end technology
| has literally become over complicated over the past 2 decades.
| It's a mishmash of over-complexity welded together into legacy
| tech to make it hard for designers to be able to implement their
| designs. It doesn't have to be this way but that's an entirely
| different story.
| paul7986 wrote:
| Good design has always been easy and pertains to everything we
| touch/interact
| with..roads...websites..apps..showers..bathtubs..etc.
|
| Basically you design stuff the way it's expected ..you don't
| design road and road patterns that much differently or you will
| cause confusion and accidents. Same goes for web or app
| design..use and stick to design patterns everyone is familiar
| with.
|
| Design overall is easy I think if stick with all that in mind
| as well work hard to keep it so simple (k.I.s.s. Keep it simple
| stupid).
|
| If it's a new product and or experience you are designing you
| still use design patterns people are familiar with.
| Freire_Herval wrote:
| Oh that's just part of it. The other part of design is the
| look and feel, or how attractive something is. It's a big
| part of it.
|
| Nowadays people find minimalist designs more attractive so
| it's not just UX, but even the aesthetics have been cut down
| to pure simplistic geometry. So to make things look good
| "aesthetically in terms of modern design" now requires very
| little talent.
| girlproblems wrote:
| I'm currently someone who's learning to program to get out of the
| trades, I have a good eye for design and I'm decent at technical
| engineering (I think anyway) and I'm trying to approach it as a
| designer first who can code second, I figured this out when
| learning JavaScript/Python that I won't ever be able to breathe
| code like some people but then I witness the design these end-
| game engineers come up with and I'm absolutely floored at how bad
| it looks.
|
| This really helped me cement my theory and approach in my
| learning. I'd argue that adding marketing to your toolkit would
| flesh you out into a pretty decent employee at most companies.
| sublinear wrote:
| I think there's a simpler, but slower path that is much more
| successful. It seems that all the best web devs I've known took
| this path.
|
| First get a CS degree and then do whatever dev work you're most
| passionate about to start your career. It may or may not be web
| dev. It's probably not, but for sure at this phase you've learned
| or are pretty far into learning linux and a handful of general
| languages like c++, java, python, etc.
|
| After a while you end up trying out web dev because you have
| projects on your plate that demand it, but it's not just
| frontend. You will learn to at least spaghetti your way through
| html/css/js, lots of web server configuration, implementation
| details about web browsers, and pick up nodejs or even ruby.
|
| Then you dive into frontend where hopefully there's a designer or
| design team sending you figma files at least. It's at this point
| where you have probably already learned or are very familiar with
| frontend libraries like vue or react anyway but now you get to
| master those and maybe not just use them for complicated web
| apps.
|
| The final step is learning design, which is comparatively less
| strict and kind of fun.
|
| It's at this point where you can take a project all by yourself
| without much fuss or any surprises which is exactly what your
| boss and coworkers wanted all along. I'd more gladly work with a
| dev who knows design, than a designer who codes. The code is
| simply not as forgiving. Implementation details must always be
| first. This isn't really up to opinion. Web is hard to do
| correctly and the bar for the quality of work is only getting
| higher.
| samwillis wrote:
| In the theme of other comments, I struggle to identify what I am.
|
| Am I a designer who codes, or a coder who designs?
|
| Am I a product designer? I did an "Industrial Design" degree, so
| formally yes, but most people here think of product design in the
| digital not physical sense.
|
| Am I an engineer? Well I don't have a "formal" engineering degree
| but I have worked professionally as a "Design Engineer" (in the
| physical product sense), and a "Software Engineer", so I would
| say yes.
|
| Am I an "inventor" who can build stuff, probably.
|
| I dislike labelling people, it puts you in a silo that can be
| difficult to span out of. I just wish job ads were not so
| prescriptive, putting up walls of what a role is.
|
| Just do you, do what you love, what interests you, and find
| people you enjoy working with.
| lxe wrote:
| Was interested in reading this until got the Medium banner. We
| need to stop using Medium.
| pwython wrote:
| I didn't see a Medium banner. But just curious, how did this
| Medium banner you mentioned hurt your experience? Did you have
| to scroll past it, or press a close button on a modal? We need
| to stop pretending that internet platforms/services should be
| totally free to use without minor annoyances.
| latexr wrote:
| I'm not the person you asked, but I did click through to
| check. At the top there's a banner:
|
| > To make Medium work, we log user data. By using Medium, you
| agree to our Privacy Policy, including cookie policy.
|
| Seems they're collecting user data without prior consent. I
| don't think that's even legal under the GDPR. Then I _tried_
| to start to read the story and couldn't get one paragraph in:
|
| > Read the rest of this story with a free account.
|
| Both are more intrusive than your description (having to
| scroll past or close a button). One is potentially illegal.
| To each their own, and even so those may not bother you, but
| I understand how someone wouldn't classify being forced to
| create an account or having data logged without recourse as
| minor annoyances. Certainly there are entitled complainers
| everywhere on the internet, but when we don't know what
| someone is complaining about we shouldn't assume that's what
| someone is doing.
|
| If I recall (may be mistaken), Medium is one of the domains
| that is (was?) automatically downranked on HN. Wouldn't be
| surprised given the above.
| ridicter wrote:
| I'm someone who is naturally strong at design, but studied
| CS/software engineering because I ultimately wanted to be able to
| build my own things. For years I tried to find careers hiring
| those unicorns -- people who could design and code -- but they
| were few and far between. My last gig that required both was at a
| hedge fund here in NYC, where they don't explicitly hire
| designers. These days I work exclusively as a software engineer,
| and I definitely miss those times when I worked as a designer.
| Among other things, the hours are easier and the amount of praise
| you get way higher :-)
| ckz wrote:
| For what it's worth, I love this story! I took the opposite
| approach but with the exact same logic: Code came naturally but
| I wanted formal training in design so that I could really
| embrace both sides and shape excellent products (and in
| particular, implement all the ideas I had from start to
| finish).
|
| What made you choose the software track this time around?
| iambateman wrote:
| If you're a designer (or business person, or just a human) and
| you're thinking about learning code...pay a LOT of attention to
| this sentence from the article:
|
| > "I code because I love to code."
|
| In my experience, that's all that matters. If you can try a
| coding tutorial and find the _process_ fun, if a little
| irritating, you can learn to code.
|
| Too many people suffer for a long time trying to code because
| "it's cool" even though they hate it. There's nothing better
| about code than any other skill, and a lot of people really
| struggle with it. You can probably get a pretty good sense of if
| coding is a good fit for you in ~4 hours on a couple udemy
| tutorials.
___________________________________________________________________
(page generated 2023-04-21 23:00 UTC)