Тёмный

How To Not Suck At Design For Developers 

Joy of Code
Подписаться 28 тыс.
Просмотров 79 тыс.
50% 1

Design for developers.
🔴 Patreon: / joyofcode
𝕏 Twitter: / joyofcodedev
💬 Discord: / discord
🔥 Uses: www.joyofcode.xyz/uses
🔗 Animotion: animotion.pages.dev/
🔗 Design For Developers: joyofcode.xyz/design-for-deve...
🔖 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

Опубликовано:

 

10 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 115   
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
The video was made with Animotion which you can find at animotion.pages.dev and if you want to support the work I do consider becoming a patron at www.patreon.com/joyofcode.
@UliTroyo
@UliTroyo 2 месяца назад
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.
@RoryDent
@RoryDent 2 месяца назад
But it also pays to understand the tech which can inform design decisions based on ease of implementation. Some designers come up with fancy designs for layouts or component behaviours which can be really hard to implement and don't add much value to the user nor business
@JacobODonnellDesign
@JacobODonnellDesign 2 месяца назад
@@RoryDentFor sure. Ideally, designers should learn more about development and developers/engineers should learn more about design. It's a yin yang type of situation.
@Mexad0n
@Mexad0n 2 месяца назад
💯
@PCspray
@PCspray 2 месяца назад
Developer here, uh… how bout you do it instead? Yeah. The more I think about it the more it makes sense.
@austin4855
@austin4855 2 месяца назад
​@@PCspray Didn't think it needed to be said that the level of specialization desired from each contributor is inversely proportional to the size of the team... if you have a small team, then yes, the devs should be competent in design, and vice versa.
@SRG-Learn-Code
@SRG-Learn-Code 2 месяца назад
0:33 *Don't have enough vocabulary to speak about design in an intelligent way* What a brilliant way of explaining it.
@salveRSRF
@salveRSRF 2 месяца назад
1 min later : *Design is crap !*
@lolcat69
@lolcat69 2 месяца назад
​@@salveRSRFmot crap, C. R. A. P. It is an acronym
@prajyottayde4649
@prajyottayde4649 2 месяца назад
Well, my design has always been crap anyway.
@5e2c467cebac
@5e2c467cebac 2 месяца назад
The production quality is insane on this one, great video
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
Thank you! 😄
@tapu_
@tapu_ 2 месяца назад
Inter is such a good font. Slap it onto anything and it starts looking good
@Jorge.ALXNDR
@Jorge.ALXNDR 2 месяца назад
I'm currently addicted to Product Sans. If I can't find a font I just use it and even when I try to avoid using it I end up testing with it and can't go back
@nwalkewicz
@nwalkewicz Месяц назад
​@@Jorge.ALXNDRProduct Sans is hands-down my favorite font of all time, but unfortunately Google has a strict license on it so no one else can use it in a professional setting. Won't stop me from using it for personal projects though.
@almahbuby
@almahbuby Месяц назад
​@@nwalkewicz i'd say that Figtree, Satoshi, and Plus Jakarta Sans are good, free alternatives to Product Sans.
@ArifBasri
@ArifBasri 2 месяца назад
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
@edxmo2921
@edxmo2921 2 месяца назад
You've really outdone yourself in this one! Props!
@Dreamslol
@Dreamslol 2 месяца назад
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.
@troyharris279
@troyharris279 2 месяца назад
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!
@DemystifyingDesign
@DemystifyingDesign 2 месяца назад
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
@adamjennings4797 2 месяца назад
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.
@diegogarcia-serna9773
@diegogarcia-serna9773 Месяц назад
Loved this piece of content. Especially the resources at the end👏🏼
@GenericInternetter
@GenericInternetter Месяц назад
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
@samroy2252
@samroy2252 2 месяца назад
Excellent video, its always good to get back to the basics and keep it simple
@tithos
@tithos 2 месяца назад
Thank you so much for this!
@SRG-Learn-Code
@SRG-Learn-Code 2 месяца назад
Quite nice video, sometimes is good to chill and learn the basics, I've improved my design vocabulary!.
@djdankmemes9257
@djdankmemes9257 2 месяца назад
Awesome video. I've just learned so much. Earned my subscribe. Much appreciated!
@reactnareal
@reactnareal 2 месяца назад
What a great video, thank you so much for this!!
@Filaxsan
@Filaxsan 2 месяца назад
Great stuff brother! Keep it up 💪🏻
@UpgradingNepal
@UpgradingNepal Месяц назад
Thankyou so much❤❤🎉 I was struggling designing simple yet good looking webpages,just this video popped up.
@GenericInternetter
@GenericInternetter Месяц назад
For Layout, just splitting the screen into a 3x3 grid or using the golden ratio will work wonders for any composition.
@lukaernestini4233
@lukaernestini4233 2 месяца назад
Very well done! Thanks a ton.
@NarcisoLobo
@NarcisoLobo 2 месяца назад
Best video on design for developers I’ve ever seen.
@pchris
@pchris 2 месяца назад
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.
@pankajsharma9801
@pankajsharma9801 2 месяца назад
As a FE developer I learn alot about design principles thanks for sharing ☺
@atefhesham
@atefhesham 2 месяца назад
This is freaking awesome, thanks a lot man
@jeffylikespugs
@jeffylikespugs 2 месяца назад
This channel is worth its weight in gold
@abdushakoor0099
@abdushakoor0099 2 месяца назад
Was waiting for this after your twitter announcement
2 месяца назад
amazing content like always!!
@Woeden
@Woeden 2 месяца назад
Very precious tips, ty very much.
@davonnev696
@davonnev696 Месяц назад
Thank you ..! This came in handy
@firepill
@firepill 2 месяца назад
Thank you, that was fire.
@farang_lao
@farang_lao 2 месяца назад
Really enjoyed this one 👍 Any chance of a few more on the same theme? I don't know any Devs that would say no to a bunch of sound/practical design advice. Thanks for all of the hard work
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
I could go deeper and share more tips.
@farang_lao
@farang_lao 2 месяца назад
@@JoyofCodeDev as a C# dev learning SvelteKit and exploring the design side tools like Storybook, Figma, Penpot and accessibility testing I have been struggling to find joined up getting started content. Any ideas and guidance in this area would be great to have. Thanks for responding 👍
@ubermatchvlaad532
@ubermatchvlaad532 2 месяца назад
This is amazing!!
@elenamikhaylova5086
@elenamikhaylova5086 2 месяца назад
Great video!
@Amipotsophspond
@Amipotsophspond 2 месяца назад
9:00 so something to think about with just using 2s powers with for layout. how something will look across all the different social media platforms is really important now. also the devices using to view it and the different levels of zoom, simply testing for these things will really help what ever you are making. 16 by 9 ratio is not 16 by 8 ratio.
@ThingEngineer
@ThingEngineer 2 месяца назад
Love this! Only wish it was part 1 of \d
@sonny5497
@sonny5497 2 месяца назад
very helpful thanks 🙏
@greentea2430
@greentea2430 2 месяца назад
Great video! I am full time frontend dev in a fin-tech company, and I do a lot of stuff outside of work. So the fact is that I just SUCK at design, not like badly, but my designs are always plain and insipid. So the best solution for me is to just… steal the good design. I usually go to website of some popular design stuff like shadcn/ui ant literally copy their typography, paddings and stuff. This way I manage to create more or less nice looking systems.
@aliwaseem5990
@aliwaseem5990 2 месяца назад
excellent video, thank you
@chosta94
@chosta94 Месяц назад
Masterclass video, thank you from a developer
@Uxarif
@Uxarif 2 месяца назад
It's really valueabe content ❤
@CZghost
@CZghost 2 месяца назад
The acronym is hilarious :D
@HaraldEngels
@HaraldEngels 2 месяца назад
I can confirm that "Refactoring UI" is a perfect book for web-developers. It is easy to grasp and apply and has a quite pragmatic, no-nonsense approach. I can highly recommend this book.
@theblckbird
@theblckbird 2 месяца назад
awesome!
@muhsin1506
@muhsin1506 2 месяца назад
Designer here.. Great video.
@diegocrusius
@diegocrusius Месяц назад
true quality content.
@thiagof414
@thiagof414 2 месяца назад
Thank you.
@BrentMalice
@BrentMalice 2 месяца назад
are there any vscode extensions that let you easily slide the 3 values of hsl up and down? i need a slider handle to play with em all fast. tried a bunch of "color" extensions and they are almost always just the same box thing
@danielattilaFriedvolleKrieger
@danielattilaFriedvolleKrieger 2 месяца назад
thank you
@pdcx
@pdcx 2 месяца назад
subscribed!
@jamtekk2704
@jamtekk2704 Месяц назад
Great video! If you don't mind me asking what program did you use to create this presentation? Was it powerpoint? And also what did you use to record this video Camtasia? Thanks so much :)
@JoyofCodeDev
@JoyofCodeDev Месяц назад
I use Animotion for the videos and OBS for recording linked in the description.
@jamtekk2704
@jamtekk2704 Месяц назад
@@JoyofCodeDev Okay thank you so much!
@Backtrack3332
@Backtrack3332 2 месяца назад
Brb gonna show this to our designers
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
I hope they like it 😂
@0x-003
@0x-003 2 месяца назад
Hi there, first time being here, can you make a video on Svelte/kit vs React?
@ehibble
@ehibble 2 месяца назад
great vid
@user-gd4vp2sr8u
@user-gd4vp2sr8u 2 месяца назад
yes, this is all perfect, but can someone actually explain for what I need accent color? it is totally my skill issue, but every time I try to use it, it looks awful (because it I use it first time), and I always find that shade of background looks 100% better
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
The idea behind using a primary and a complementary color is that you pick colors that work together and have the highest amount of contrast which you can use to bring attention to something.
@iffi_master2286
@iffi_master2286 2 месяца назад
i know all the theory, the white space, components and elements. but the worst part for me is to think about a page to have a starting idea of it. i only can just copy from other websites because i just lack the creativity
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
Theory can only get you so far and you should avoid design until you know the content because then you're solving problems instead of trying to paint an image on a blank canvas.
@iffi_master2286
@iffi_master2286 2 месяца назад
@@JoyofCodeDev yeah, but the problem is to find the content or create.
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
There's no shame in copying because that's how you learn but ask yourself what makes the design look great to learn from it - I don't want to mislead people into thinking design is easy because you have to practice and be intentional about how you critique and learn from design.
@forivall
@forivall 2 месяца назад
When choosing colors, even better than hsl is oklch! Perceptual color space!
@JoyofCodeDev
@JoyofCodeDev Месяц назад
I have to get used to it. 😄
@alejandroalzatesanchez
@alejandroalzatesanchez 2 месяца назад
"alright you know enough design to be dangerous" quite the sentence 😆
@tovawr
@tovawr 2 месяца назад
my design does meet crap standards... not quite the CRAP
@ceocheema
@ceocheema 2 месяца назад
Your latest video is absolutely remarkable! 🌟 It's astounding to see content of such premium quality being shared for free. 💎 The effort, creativity, and professionalism you've put into this video rival that of high-budget productions, making it a standout piece. 👏 Your dedication to delivering exceptional content without the cost barrier is truly commendable and sets a new standard in the community. 🚀 Thank you for your generosity and commitment to excellence. 🙏 Your work is a genuine inspiration, and I can't wait to see what incredible creations you'll share next! 🌈
@AntiPhil
@AntiPhil 2 месяца назад
How about a video like how to not suck at developing as a designer? would help me :D
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
Fail and repeat.
@BrentMalice
@BrentMalice 2 месяца назад
bing copilot on Microsoft edge is the most amazing tutor ever
@GenericInternetter
@GenericInternetter Месяц назад
FYI, Black and White are not two separate colours; They are both just different brightnesses of Grey. When you choose black and white in a composition, you are just choosing grey twice.
@user-nl3tt6dc1i
@user-nl3tt6dc1i Месяц назад
So grey and white are brightness of black?
@parkourbee2
@parkourbee2 2 месяца назад
I'll never forget CRAP, thanks!
@franciscomagalhaes7457
@franciscomagalhaes7457 Месяц назад
I feel attacked.
@forbiddenbox
@forbiddenbox 2 месяца назад
my design is finally crap thx
@vladyslavstadnyk2762
@vladyslavstadnyk2762 Месяц назад
Long story short: follow design principles. But also don't follow them. Got it, thanks.
@mrcharm767
@mrcharm767 2 месяца назад
I'm developer from 4 years . I can say what n all shit he is thinking I wish I knew from start
@SkyKnight742
@SkyKnight742 2 месяца назад
Strongly disagree with the "design is not art, just like development" at the start. Pretty sure that's not what you think but it's basically what you said.
@YotamGuttman
@YotamGuttman Месяц назад
1:08 contradiction no.1 you said design isn't art or meant to produce beauty but be utilitarian and useful. then you said that design solves utilitarian problems in an AESTHETICALLY PLEASING way...
@Mexad0n
@Mexad0n 2 месяца назад
I really love your videos but not sure about this one if you do not cover all topics on Web Design as long series. The Web Design or design generally is way more complex and it will take more than 14 min to cover one of these design rules "principles" and show developers how to approach thinging like designer and vice versa. ( 10 basic rules - PROXIMITY, SIMILARITY, CLOSURE, SYMMETRY, CONTINUITY, FATE RULE, HICK’S LAW, MILLER’S LAW, AESTHETIC USABILITY EFFECT, SERIAL POSITION, VON RESTROFF’S ISOLATION EFFECT ) what about color psychology and symbolism eg. in different countries .... but this is going more into branding territory... As developer and designer enthusiast I still prefer your videos about coding where you excel.
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
The average developer just wants to make something that looks great and isn't going to spend time studying design.
@mumk
@mumk Месяц назад
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! (I'm at loss of words) !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@alexandremassaro
@alexandremassaro 2 месяца назад
I don't know about other devs that watched this, but he lost me the moment he said that now that we know the rules we should break them to create interest. How much can I break the rules? Should I always break them? Where do I break them? You have to make a video with the rules to break the rules.
@JoyofCodeDev
@JoyofCodeDev Месяц назад
You shouldn't if you're not sure because that's not something you can easily explain but it can be taught if you look at great design.
@CURIOSITYcapital
@CURIOSITYcapital Месяц назад
I hate designing 😢😢😢😢😢😢
@ethanbuttazzi2602
@ethanbuttazzi2602 Месяц назад
talent is a lie, just go see any 5 minute videos about the fundamentals of graphic design and apply it, any programmer should be familiar to studying it and applying new things, sure you may not like graphic design but theres literally nothing stopping you from sitting down and seeing some videos, and sure everybody learns differently, but everybody can learn, thats literally what makes us human, and what helped our ancestors to survive so long ago. i hate the idea that you need talent for anything or that talent even exists, and sure we could sit here and argue what contitutes talent or not, but ill just say a single thing, theres is no god given talent, the only thing they had more than you was TIME, time learning what you think they have so called "talent", some people just started sooner than others in specific fields, either direcly or indirecly, stop jailing yourself to the truly flawed logic of talent, it just dimishes us as people, inhibiting us from being the best version of ourselves. Thank you for your time this was my rant, what i recommend for beginners of graphic design, for any use purpose is "Beginning Graphic Design by Learn Free" its a series of 6 short videos that will get oyu acquanteced to all the fundamentals.
@tannercottle4206
@tannercottle4206 2 месяца назад
Design is crap! 🙌
@tahiralauddin79
@tahiralauddin79 2 месяца назад
It's crap
@anthropomorphicOrange
@anthropomorphicOrange 16 дней назад
The design of this video is crap.
@mndtr0
@mndtr0 2 месяца назад
0. Just use AI designers...
@VioletJewel1729
@VioletJewel1729 2 месяца назад
this video is crap design
@MedEddahby
@MedEddahby 2 месяца назад
Such a great and Insightful video, thanks 🤍
Далее
Design Better Than 99% of UI Designers
14:52
Просмотров 177 тыс.
The Secret Science of Perfect Spacing
9:40
Просмотров 328 тыс.
How principled coders outperform the competition
11:11
world's shortest UI/UX design course
6:53
Просмотров 1 млн
So You Think You Know Git - FOSDEM 2024
47:00
Просмотров 979 тыс.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 723 тыс.
Authentication is a developer nightmare
15:58
Просмотров 52 тыс.
I promise this story about fonts is interesting
29:35
How I make UI color palettes
8:51
Просмотров 366 тыс.
Every React Concept Explained in 12 Minutes
11:53
Просмотров 384 тыс.
It's time to talk about these UI trends
9:09
Просмотров 462 тыс.