4 Foundational UI Design Principles | C.R.A.P.
These 4 foundational design principles can be used for any visual design but are especially important for UI designers... Remember to Subscribe goo.gl/6vCw64
0:00 - Intro
0:25 - CRAP
0:40 - Contrast
3:16 - Repetition
4:48 - Alignment
6:56 - Proximity
🏆 //////////// Join my members community to get access to perks:
You can get this starting and ending design file
designchamps.io/
👋 ////////// Join the Discord Server and meet other creatives
discord.gg/XVDQ2gxsNv
------------------------------------------------------------------------------------
🤝 //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship
www.jesseshowalter.com/
👋 ////////// Follow me on Social
Instagram: imjesseshow
Twitter: imjesseshow
📫 ////////// Sign up for my Monthly Newsletter
www.jesseshowalter.com/newsletter
------------------------------------------------------------------------------------
🖥️ ////////// I build most of my websites using Webflow
webflow.grsm.io/4495884
💻 ////////// I host all my websites with Hostinger
www.hostg.xyz/SH5fF
🎵 ////////// Musicbed is the best place to get music for your films. Get your first month free when you purchase an annual subscription by using my coupon code JESSE at checkout.
share.mscbd.fm/imjesseshow
📸 ////////// The Equipment I use
www.amazon.com/shop/jesseshowaltertv
Пікірлер: 116
As a fullstack (mainly backend) dev, i find these videos really helpful. Now I just have to find the time to master figma and stop making my apps look like they were made for the first version of theinternet .......wish me luck
@TheStrategist314
11 ай бұрын
Feelz.
@stevenwessel9641
9 ай бұрын
You know anything about a LEMP stack?
@matinlh644
8 ай бұрын
Same here
@Hellbending
3 ай бұрын
Update when? 🤣🤣
@licokr
Ай бұрын
Same here..
Those principles are very important in editorial design as well! I’m glad to see I can use the skills I’ve developed in my 10+ years career in graphic design to transition to UI/UX a bit more seamlessly :) thanks for all the tips, love your videos.
For Contrast, consider using a contrast checker for WCAG if the foreground and background color combination passes the WCAG standard. A yellow colored text is barely readable on a white background, and it failed the WCAG contrast checker.
@hollowsoul666
Жыл бұрын
yea i thought the same, using yellow on white while explaining contrast was ironic
@CS-GOgame
9 ай бұрын
kzread.info/dash/bejne/eoaazcacotOYfc4.htmlsi=yH1ml5wzD5QdjxlC
Jesse’s content is addictive. You start with a small video, then you go to another one, then you see another interesting title and holy C.R.A.P. where did 5 hours go?😅😅 Keep them coming, Jesse, you have great educational content ❤
This video changed my way of understanding layouts. Thanks you !
Jesse, you're changing the way I learn UX design every single day. I'm extremely grateful for your videos, please keep the tips and tricks coming! Much love brother!
@JesseShowalter
Жыл бұрын
❤️❤️❤️
@CS-GOgame
9 ай бұрын
kzread.info/dash/bejne/eoaazcacotOYfc4.htmlsi=yH1ml5wzD5QdjxlC
The satisfaction I got looking at how everything came together 🙌
Thanks for this. I’m an old print guy making the transition to digital. Started as a flexo plate maker. Became a graphic designer… Now I’m diving into the world of digital. Subbed!
@mfachryofficial
2 жыл бұрын
What an inspiration for a young designer like me, you're always learning, good luck!
@The3rdGunman
2 жыл бұрын
@@mfachryofficial Thanks, you're too kind. Be grateful for resources like these. I had to learn so much thru trial, error and old fashioned experience...
@zes3813
Жыл бұрын
wrr
I learned a LOAD OF C.R.A.P. in this video! Thank you!
@JesseShowalter
Жыл бұрын
Yeah!! 🔥
You've definitely helped me become a better designer and I subbed to your channel!
Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!
Your contents are really easy to understand. deserved the subscribe
Great vid ! I'll try to implement those principles in my design works. I'm still a student in ui design bachelor degree so your videos are very useful for me
i love what you did there! love the video!
Thanks for the video! Very informative!
Thank your for this video Jesse, super helpful. Thanks a lot
Great work explaining CRAP! I know they’re often presented as core principles of design, but I find it important to recognise them more specifically as principles of composition, which is only one aspect of visual design. I’d suggest using CRAP to decide where and why to use contrast, repetition, alignment and proximity. Learn and use other principles to determine the what. Comments on accessibility highlight this well. Yellow on white doesn’t violate the contrast principle of CRAP - it’s just that CRAP is not intended to help with that decision. I think designers that have been doing this for a while, on learning about CRAP, think it’s a great way to communicate the essential principles to novices, but that’s only because they are taking even more essential principles for granted.
Excellent video Jesse. *thumbs up* indeed
Nicely explained. Thanks
Well done! I appreciate all the effort you put into your videos!
Tutorial is very useful, thanks a lot ^^
I have gained a lot from this video, and I strongly believe it will help me in my design field. Thanks.
No fluff, love it
Great tips! Just one thing, It may be good to consider accessibility. Thanks for sharing. BTW, Do you have any tips on how to animate stackable widgets? Thanks, Jesse
much love for this gentel man 🥰😘
Thanks for this Jesse. Real Help🙏❣
@CS-GOgame
9 ай бұрын
kzread.info/dash/bejne/eoaazcacotOYfc4.htmlsi=yH1ml5wzD5QdjxlC
this is truely amazing
Excellent tips, especially for beginners or solopreneurs doing things on their own 🎉
Thanks for the video 😊
i learned something today , thanks a lot
Thank You So Much !
Thank you very much for sharing 👍👍👍
This video is really helpful, I am a newbie trying to find my way in the world of ui ux design nd tech
@JesseShowalter
2 ай бұрын
You would love my course www.30dayui.com/ it’s currently 50% off
great stuff man
Thanks for the awesome. Learn a lot
Thank you 👏🏼 super informative!
@CS-GOgame
9 ай бұрын
kzread.info/dash/bejne/eoaazcacotOYfc4.htmlsi=yH1ml5wzD5QdjxlC
Wow you made it so simple
I like the contrast principle, I do the same thing using freehand... But I think overall it's good to establish some "rules" for the sake of constancy.
Stellar advice!
Great Vide my dude!
Thank you for this very useful video!
@JesseShowalter
Жыл бұрын
Glad it was helpful!
So good!
Nice C.R.A.P. bro!
Thank you for sharing
2:00 Website: fixie Image: bike with rear derailleur Me: *snort*
I love riding my bicycle outsode!
I enjoyed the Bob Ross-style commentary at 8:00 "This guy looks like a distant relative. Let's make him part of the family". 😊
Thanks man
loved it
@JesseShowalter
9 ай бұрын
So glad you did!! 💛
nice, thanks
Lovely video
Talks about emphasizing contrast. Makes yellow font on white.
Good job
One question that I don't know if you've covered somewhere else. Is there an ideal size for cards like this? A width/height ratio perhaps? I never seem to get my card dimensions right. Thanks.
Thank u so much
Thanks Nice video content
Great video! Whats the name of the font you are using?
Great !!!!!!!!!!!!!
I design powerbi reports for executive dashboards and everyone else in the company just places tables on white backgrounds. This is very helpful to make my stuff stand out. Thank you
@CS-GOgame
9 ай бұрын
kzread.info/dash/bejne/eoaazcacotOYfc4.htmlsi=yH1ml5wzD5QdjxlC
Same principles I am using in traditional layout design for years.
@JesseShowalter
Жыл бұрын
Right on
I love your content.....
Good! but I see some of the interesting designs who breaks these principles and looks stunning and unique!
🇧🇷 Conteúdo incrível! Sola Fide 🙌
@JesseShowalter
Жыл бұрын
🙏
@CS-GOgame
9 ай бұрын
kzread.info/dash/bejne/eoaazcacotOYfc4.htmlsi=yH1ml5wzD5QdjxlC
Hey! I love your channel. I made a study group in discord so that people can work through your content together. Can you please tell your audience about it so more people can see it?
What are you column dimensions , gutter and margin please?
❤❤❤❤
What's the website you are using..?
This is actually the design principles
Hiii the way you teach we easily understand Please continue make such kind of videos . If you don't mind can you. Suggest me whether I take right kr wrong decision my career goal become a Ui UX designer . Please help me
@user-bj2mf5vx1o
Ай бұрын
I want. To work a Ux designer
Sorry but the yellow text doesn’t meet accessibility guidelines
Good
what is the app he's using?
wow
misspelled "rhythm" under alignment; misspelled outside multiple times; the plural for axis is axes, not axises; yellow is not a contrasting colour against white; proximity has to make sense...50% off black friday makes more sense under a shopping button than under a sign up botton
There is a video of china's which also conveyed this in 08/04/2022
OUTSIDE with I
Yellow and white? I don't know about it. I think it's a bad decision about contrast. (In my opinion)
my design was crap now its CRAP
hierarchy should be treated as a separate principle
no such thing as friend x or have or like or proximity or appropriate or purpose or why or not
Hi jesse how i can make whatsapp on ADOBE XD
C.R.A.B.P. or B Crap. Missing B for balance.
NOted
Who thought it was a good idea to put 'CRAP' in the title and then translate the title to other languages?
well, that is half of the Design principles
Bro, I didn't understand proximity