How To Not Suck At Design For Developers

81,110
0
Published 2024-03-15
Design for developers.

πŸ”΄ Patreon: www.patreon.com/joyofcode
𝕏 Twitter: twitter.com/joyofcodedev
πŸ’¬ Discord: discord.com/invite/k6ZpwAKwwZ
πŸ”₯ Uses: www.joyofcode.xyz/uses

πŸ”— Animotion: animotion.pages.dev/
πŸ”— Design For Developers: joyofcode.xyz/design-for-developers

πŸ”– Timestamps

0:00 Intro
1:03 Design Principles
1:41 Contrast
2:29 Text Contrast
3:16 Repetition
4:16 Alignment
6:20 Breaking The Rules
7:15 Proximity
7:47 Typography
10:17 Colors
11:39 Layout
12:57 Learning Design
14:08 Outro

#joyofcode #design #development

All Comments (21)
  • @UliTroyo
    Designer here: design is a learnable skill like any other! Just don't make the mistake of underestimating the difficulty curveβ€”this prevents many devs from being good at design. If you grow muscles with sloppy form and tepid effort, you're leaving gains on the table. Solve design problems like a designer, rather than a dev, and you'll soon be a good designer.
  • @SRG-Learn-Code
    0:33 Don't have enough vocabulary to speak about design in an intelligent way What a brilliant way of explaining it.
  • @5e2c467cebac
    The production quality is insane on this one, great video
  • @ArifBasri
    When you talk about books, reminded me that I did bought a book in gumroad but forgotten to read it. This video invigorates my memory again to follow up on that todo item. thank you! btw the book is UI Design Principles by Michael Filipiuk
  • @tapu_
    Inter is such a good font. Slap it onto anything and it starts looking good
  • @edxmo2921
    You've really outdone yourself in this one! Props!
  • @tithos
    Thank you so much for this!
  • Damn, really clean production value for your channel! Really loved how you explained your points visually with the clean graphics. The visual hierarchy example at 2:10 really communicated the importance of visual hierarchy intuitively.
  • @adamjennings4797
    Great video, fast, lean and accessible. A well designed and utilitarian presentation that exemplifies the design principles you talk about in the video. So you show and tell at the same time.
  • @Dreamslol
    Well done! Really underrated channel, glad I found it. I’ve been doing frontend for 8 years at a fashion company. Most of the time, you receive a Figma layout and simply implement it without considering the concept. It’s good to refresh some things. I wish I had a video like this before I started.
  • @reactnareal
    What a great video, thank you so much for this!!
  • @troyharris279
    Funny enough I needed a video like this. I've tried going into VSCode ready to start a project, but planning the design has always been something I find more important before starting the code. Thank you for this video! I will write all the great advice down and get started on my next project!
  • @SRG-Learn-Code
    Quite nice video, sometimes is good to chill and learn the basics, I've improved my design vocabulary!.
  • @zenacapulco
    Excellent video, its always good to get back to the basics and keep it simple
  • @pchris
    When I read the title I thought the video would be about making designs developers are meant to use so I got excited lol I've used some developer portals/documentation with some truly awful design. Junk that got redesigned from an ugly but very functional to better looking but difficult.
  • Just like you leave spaces in between objects on the screen, it's good to leave space in between the colours chosen. For colour selection, I recommend using a three-way system: Main, complement, and absent. Pick a colour as the main, then pick the two colours that are 1/3 and 2/3 the way around the hue wheel (one being the compliment and the other the absent). The colour that is exactly halfway between the main and compliment will be exactly opposite to the absent colour. This "halfway" colour is the overall colour of your composition, which gives the overall composition character. This is basically a different way of doing a very well-known form of colour selection, but I forgot the name of it sry