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

  • @teriyakov
    @teriyakov2 жыл бұрын

    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

    @TheStrategist314

    11 ай бұрын

    Feelz.

  • @stevenwessel9641

    @stevenwessel9641

    9 ай бұрын

    You know anything about a LEMP stack?

  • @matinlh644

    @matinlh644

    8 ай бұрын

    Same here

  • @Hellbending

    @Hellbending

    3 ай бұрын

    Update when? 🤣🤣

  • @licokr

    @licokr

    Ай бұрын

    Same here..

  • @renatagibson445
    @renatagibson4452 жыл бұрын

    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.

  • @Joshuaomorales
    @Joshuaomorales Жыл бұрын

    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

    @hollowsoul666

    Жыл бұрын

    yea i thought the same, using yellow on white while explaining contrast was ironic

  • @CS-GOgame

    @CS-GOgame

    9 ай бұрын

    kzread.info/dash/bejne/eoaazcacotOYfc4.htmlsi=yH1ml5wzD5QdjxlC

  • @nyxnight9430
    @nyxnight9430 Жыл бұрын

    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 ❤

  • @Ceyesse
    @Ceyesse Жыл бұрын

    This video changed my way of understanding layouts. Thanks you !

  • @sharmaarj
    @sharmaarj Жыл бұрын

    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

    @JesseShowalter

    Жыл бұрын

    ❤️❤️❤️

  • @CS-GOgame

    @CS-GOgame

    9 ай бұрын

    kzread.info/dash/bejne/eoaazcacotOYfc4.htmlsi=yH1ml5wzD5QdjxlC

  • @divyasampath2843
    @divyasampath28432 жыл бұрын

    The satisfaction I got looking at how everything came together 🙌

  • @The3rdGunman
    @The3rdGunman2 жыл бұрын

    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

    @mfachryofficial

    2 жыл бұрын

    What an inspiration for a young designer like me, you're always learning, good luck!

  • @The3rdGunman

    @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

    @zes3813

    Жыл бұрын

    wrr

  • @MyDigitalHub
    @MyDigitalHub Жыл бұрын

    I learned a LOAD OF C.R.A.P. in this video! Thank you!

  • @JesseShowalter

    @JesseShowalter

    Жыл бұрын

    Yeah!! 🔥

  • @ChrisPirillo147
    @ChrisPirillo1472 жыл бұрын

    You've definitely helped me become a better designer and I subbed to your channel!

  • @henrythomas7112
    @henrythomas71122 ай бұрын

    Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!

  • @anismorsalin5686
    @anismorsalin5686 Жыл бұрын

    Your contents are really easy to understand. deserved the subscribe

  • @muhammadbacar6051
    @muhammadbacar60512 жыл бұрын

    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

  • @victoriakost
    @victoriakost Жыл бұрын

    i love what you did there! love the video!

  • @miltonrobles3028
    @miltonrobles30282 жыл бұрын

    Thanks for the video! Very informative!

  • @javidiaz7071
    @javidiaz70714 ай бұрын

    Thank your for this video Jesse, super helpful. Thanks a lot

  • @JamieMitchellHere
    @JamieMitchellHere6 ай бұрын

    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.

  • @bluecherry-hart4786
    @bluecherry-hart4786 Жыл бұрын

    Excellent video Jesse. *thumbs up* indeed

  • @lingkon83
    @lingkon832 жыл бұрын

    Nicely explained. Thanks

  • @chelsieo1342
    @chelsieo13422 жыл бұрын

    Well done! I appreciate all the effort you put into your videos!

  • @karennguyen7083
    @karennguyen70832 жыл бұрын

    Tutorial is very useful, thanks a lot ^^

  • @Da_Joe
    @Da_Joe Жыл бұрын

    I have gained a lot from this video, and I strongly believe it will help me in my design field. Thanks.

  • @abdellahcodes
    @abdellahcodes2 жыл бұрын

    No fluff, love it

  • @juanmarquez4349
    @juanmarquez4349 Жыл бұрын

    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

  • @aymenomar09
    @aymenomar092 жыл бұрын

    much love for this gentel man 🥰😘

  • @SamuelSeriki
    @SamuelSeriki Жыл бұрын

    Thanks for this Jesse. Real Help🙏❣

  • @CS-GOgame

    @CS-GOgame

    9 ай бұрын

    kzread.info/dash/bejne/eoaazcacotOYfc4.htmlsi=yH1ml5wzD5QdjxlC

  • @constChg
    @constChg2 жыл бұрын

    this is truely amazing

  • @thewordsmithdotai
    @thewordsmithdotai6 ай бұрын

    Excellent tips, especially for beginners or solopreneurs doing things on their own 🎉

  • @kirkdpenha2935
    @kirkdpenha293516 күн бұрын

    Thanks for the video 😊

  • @mokdadsofiane4286
    @mokdadsofiane42862 жыл бұрын

    i learned something today , thanks a lot

  • @user-jf7ij5rk1d
    @user-jf7ij5rk1d22 күн бұрын

    Thank You So Much !

  • @naz5978
    @naz5978 Жыл бұрын

    Thank you very much for sharing 👍👍👍

  • @obiigwebueze4104
    @obiigwebueze41042 ай бұрын

    This video is really helpful, I am a newbie trying to find my way in the world of ui ux design nd tech

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    You would love my course www.30dayui.com/ it’s currently 50% off

  • @designedbydaughter
    @designedbydaughter Жыл бұрын

    great stuff man

  • @achojoorumah4178
    @achojoorumah4178 Жыл бұрын

    Thanks for the awesome. Learn a lot

  • @leannerobinson2139
    @leannerobinson2139 Жыл бұрын

    Thank you 👏🏼 super informative!

  • @CS-GOgame

    @CS-GOgame

    9 ай бұрын

    kzread.info/dash/bejne/eoaazcacotOYfc4.htmlsi=yH1ml5wzD5QdjxlC

  • @walterwhite5249
    @walterwhite52492 жыл бұрын

    Wow you made it so simple

  • @MultiSciGeek
    @MultiSciGeek2 ай бұрын

    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.

  • @modernizemysite
    @modernizemysite Жыл бұрын

    Stellar advice!

  • @miniro9159
    @miniro91592 жыл бұрын

    Great Vide my dude!

  • @higiniofuentes2551
    @higiniofuentes2551 Жыл бұрын

    Thank you for this very useful video!

  • @JesseShowalter

    @JesseShowalter

    Жыл бұрын

    Glad it was helpful!

  • @mysterious_monolith_
    @mysterious_monolith_ Жыл бұрын

    So good!

  • @AdrianGonzalez-ii7jb
    @AdrianGonzalez-ii7jb Жыл бұрын

    Nice C.R.A.P. bro!

  • @kim_a18
    @kim_a182 жыл бұрын

    Thank you for sharing

  • @aarondcmedia9585
    @aarondcmedia9585 Жыл бұрын

    2:00 Website: fixie Image: bike with rear derailleur Me: *snort*

  • @Scottwithtoomanyts
    @Scottwithtoomanyts2 жыл бұрын

    I love riding my bicycle outsode!

  • @keetor13
    @keetor13 Жыл бұрын

    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". 😊

  • @hariharan-lh3zc
    @hariharan-lh3zc Жыл бұрын

    Thanks man

  • @adityamittal4357
    @adityamittal43579 ай бұрын

    loved it

  • @JesseShowalter

    @JesseShowalter

    9 ай бұрын

    So glad you did!! 💛

  • @noitesdevento
    @noitesdevento2 жыл бұрын

    nice, thanks

  • @vineetboyle
    @vineetboyle2 жыл бұрын

    Lovely video

  • @papatomicjusz
    @papatomicjusz Жыл бұрын

    Talks about emphasizing contrast. Makes yellow font on white.

  • @advanced-developers
    @advanced-developers5 ай бұрын

    Good job

  • @stephenhammond1745
    @stephenhammond1745 Жыл бұрын

    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.

  • @joseneto1994ago
    @joseneto1994ago Жыл бұрын

    Thank u so much

  • @adeniyijoshua8605
    @adeniyijoshua8605 Жыл бұрын

    Thanks Nice video content

  • @samuelwainberg1659
    @samuelwainberg16595 ай бұрын

    Great video! Whats the name of the font you are using?

  • @avinashgaikwad4624
    @avinashgaikwad46242 жыл бұрын

    Great !!!!!!!!!!!!!

  • @BostonRoger
    @BostonRoger Жыл бұрын

    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

    @CS-GOgame

    9 ай бұрын

    kzread.info/dash/bejne/eoaazcacotOYfc4.htmlsi=yH1ml5wzD5QdjxlC

  • @andreahoffman8152
    @andreahoffman8152 Жыл бұрын

    Same principles I am using in traditional layout design for years.

  • @JesseShowalter

    @JesseShowalter

    Жыл бұрын

    Right on

  • @nimashokouhfar52
    @nimashokouhfar52 Жыл бұрын

    I love your content.....

  • @misbahmehdi3858
    @misbahmehdi3858 Жыл бұрын

    Good! but I see some of the interesting designs who breaks these principles and looks stunning and unique!

  • @marceloroldrin
    @marceloroldrin Жыл бұрын

    🇧🇷 Conteúdo incrível! Sola Fide 🙌

  • @JesseShowalter

    @JesseShowalter

    Жыл бұрын

    🙏

  • @CS-GOgame

    @CS-GOgame

    9 ай бұрын

    kzread.info/dash/bejne/eoaazcacotOYfc4.htmlsi=yH1ml5wzD5QdjxlC

  • @Kat-co6gn
    @Kat-co6gn2 жыл бұрын

    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?

  • @nywebdiva
    @nywebdiva Жыл бұрын

    What are you column dimensions , gutter and margin please?

  • @motalatem
    @motalatem11 ай бұрын

    ❤❤❤❤

  • @pearls_products
    @pearls_products8 ай бұрын

    What's the website you are using..?

  • @MerdyAgustianto-kh7de
    @MerdyAgustianto-kh7de9 ай бұрын

    This is actually the design principles

  • @user-bj2mf5vx1o
    @user-bj2mf5vx1oАй бұрын

    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

    @user-bj2mf5vx1o

    Ай бұрын

    I want. To work a Ux designer

  • @fortytwo244
    @fortytwo244 Жыл бұрын

    Sorry but the yellow text doesn’t meet accessibility guidelines

  • @muhammadaliyu8167
    @muhammadaliyu81676 ай бұрын

    Good

  • @catherinetayer9024
    @catherinetayer90248 ай бұрын

    what is the app he's using?

  • @reachpromise
    @reachpromise Жыл бұрын

    wow

  • @rorymacdonald7529
    @rorymacdonald7529 Жыл бұрын

    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

  • @yummyyummy6616
    @yummyyummy6616Ай бұрын

    There is a video of china's which also conveyed this in 08/04/2022

  • @robkr
    @robkr7 ай бұрын

    OUTSIDE with I

  • @marcuscustodio9338
    @marcuscustodio9338 Жыл бұрын

    Yellow and white? I don't know about it. I think it's a bad decision about contrast. (In my opinion)

  • @marooxciss
    @marooxciss8 ай бұрын

    my design was crap now its CRAP

  • @sparrowlabs4590
    @sparrowlabs4590 Жыл бұрын

    hierarchy should be treated as a separate principle

  • @zes3813
    @zes3813 Жыл бұрын

    no such thing as friend x or have or like or proximity or appropriate or purpose or why or not

  • @user-syedaounali
    @user-syedaounali8 ай бұрын

    Hi jesse how i can make whatsapp on ADOBE XD

  • @mvpro2k8
    @mvpro2k82 жыл бұрын

    C.R.A.B.P. or B Crap. Missing B for balance.

  • @Maria-nz3mz
    @Maria-nz3mz7 ай бұрын

    NOted

  • @cannotfigureoutaname
    @cannotfigureoutaname Жыл бұрын

    Who thought it was a good idea to put 'CRAP' in the title and then translate the title to other languages?

  • @brunolopes7311
    @brunolopes73115 күн бұрын

    well, that is half of the Design principles

  • @Velocityhawk
    @Velocityhawk Жыл бұрын

    Bro, I didn't understand proximity

Келесі