Amateur vs Pro UI Design | with examples

[@humairanaeempasha2362]

Would really appreciate if you'd show your version next to the version being critiqued. Good content! 👍🏽

[@OXMStudios]

yes! this is a great idea!

[@michaelmd3541]

Thank you. Was thinking the same

[@JesseShowalter]

Noted!

[@Amrdys]

I really do think that the Dashboard design at 10:40 is way better than the one at 11:20. Talking from both UI design and Front-end development perspectives.

[@joselitosibayan8112]

As a graphic designer trying to transition into the UX industry, I think these senior-level interfaces wouldn't be possible without understanding research. Design isn't only about design-it's also knowing what the users actually need. Thanks for putting out such educational content!

[@peteroguntola8760]

I’m in the same boat

[@mattsmitt00]

I totally disagree. Research helps to some extent, but at the end of the day understanding the small nuances and adjustments that really level-up designs comes entirely from USING the designs you make. Research is just a zoomed-out and averaged way to understand how a user actually uses your product second-hand. If you actually try to use these designs, and learn to pay attention to how you're processing and reacting to a design will tell you everything you need to know. If you're pretending to be a user looking for a vacation rental, you'll notice that it takes you a couple seconds to scan across the whole page before you figure out where to start (implying there's not enough direction or separation between sections), or if you try to see where a rental is at on the map, you'll immediately notice that it's so vertical and lacks enough distinction that it is very difficult to get your bearings and tell where the map is even focused. (which tells you you're going to need more contrast and more horizontal space - and you can get that by reducing all the space being taken up by the sidebar that doesn't actually give you much more functionality.)

[@chfgn]

⁠@@mattsmitt00 You’re leaving SO MUCH valuable optimization on the table by limiting your research to self-testing. Yes, using the design yourself can give you some basic feedback about the physical usability of the thing: how far you have to move the mouse, how easy it is to see your text, whatever. But what if your users are trying to book a rental from their phone on the side of the road because they’re traveling and just decided to stop for the night? Is your site usable on a phone with a spotty connection? Can your users book using only the information they have in their pockets? Can they sort based on how close the property is to their current location? Do they need a button to automatically dial the booking agent for a voice call? What if they have kids in the back seat complaining about how hungry they are; will it tell them which properties have a McDonalds on the way? What if you have users who want to book a weekend getaway to recover from burnout but have no idea where to go? What if you have users who just want to know what options are available for under $200 because they’re bored and broke? What if you have users who want to book a series of properties along a route because they’re touring the west coast over the course of a month? None of that stuff is obvious to you pretending to book a property from your desk. You’re optimizing for imaginary people instead of the real people using your service. That might be good enough most of the time, but let’s be honest, if you’re not going the extra mile to discover real world usage and finding new ways to hook and empower real users, you’re limiting yourself to basic UI work that’s going to be automated by AI any day now.

[@GoddessofWarr]

I agree we need a part 2 !! This is so interesting !

[@JesseShowalter]

On its way

[@Loggerr]

We'll need a part 2 of this. Its super useful to see! Good stuff Jesse!!

[@JesseShowalter]

Coming soon! While you wait, check out my new UI Design training program. It will help take you from Noob to Pro in 30-Days! www.30dayui.com/

[@ladyxlittlemonster98]

bro, really, lower the volume of your intro, it is so annoying

[@ashishpatel9275]

Just take what he's giving 🤌🏻

[@hmaina0]

Honestly it's not too high. You know there's a reason why the volume key exists in every phone/pc.

[@brycehickson374]

The problem is the volume mixing. His voice is way too quiet in comparison to the music.

[@MrValVet]

second that

[@darlinsebastian.3229]

Agree.

[@steffm.4884]

somewhere there's a video called "Amateur vs Pro Sound Mixing" using this as the worst case

[@tetsi0815]

Sorry, but the Dashboard @11:20 has all kinds of serious issues that scream "lack of attention to detail". The "Cash flow" legend is superfluous (the text is in the boxes above the numbers!) and also wrong - it shows outflow as black while its box is purple. It's not obvious at first glance that the date "pills" underneath the numbers are a time slider (i guess) and why the eff is "Apr 22" following "Apr 21" when "6 months" is selected in the filter? Similar for the "Profit and loss" thing. Superfluous legend. Why is there a $80000 above the graph? What is the scale of the graph? Why is the graph starting before Nov 20? Is the graph axis just misaligned? Why is the axis ending in March and not April (or May?) like the one on the left? Why don't the numbers match up? Is outflow 2000 or 12000 in the 6 month period shown? There is a typo in "fiscal year" in the net income section. Also why is there a (?) behind fiscal year? The thing shown there is logically a table. Why is it not formatted as a table? On the right side "Payable & Owing" has also a typo "1.30 days overdue" should probably be 1-30. The" 31-60" is missing the "days" and has a capitalized "Overdue". Why the heck is there a "hire bookkeeper" tab on the top (that's an action) next to the "overview", "transactions", "reports" tab? All in all this dashboard is rather bad not only content wise but also from a design perspective. Sorry.

[@cyberhrc]

On last example, i do agree that colors 'might' be better but at the same time we cannot ignore that some clients DEMANDS usage of 'their' colors [ purpose of branding etc ] in the design. Setting good color itself is always required but on showed examples, last one is 'too perfect' with usage of photos that perfectly matches design while the previous one had more ' real life ' photos. I am personally tired of 'blue' for business, money, and corporate stigma. Colors should have purpose for a user and for a client as the same value [ tho that is hardest part ] :) Overall good video, keep it up !

[@healthadvice3091]

I agree on clients say "can you make it pop?" at the end of the day whatever argument we say they just pay us money and follow what they want 😅. At least for small businesses

[@JesseShowalter]

Thanks

[@saschac.949]

But you also have to bear in mind that the designs shown on KZbin, Dribbble and other design platforms often have nothing to do with reality or real customers. As already mentioned, the designs too often appear ‘too perfect’ or are only designed for the eye - and not for a subsequent code implementation or existing technologies to be used. It's often more like a painting than a real job.

[@JoseGomez-to4zu]

Nice video, thanks! It'd be helpful if you provide more context about what criteria you're using to judge a UI as a junior or senior. Just mentioning colors, hierarchy, etc., can be interpreted very subjectively

[@ogunsolajulius5424]

This is so good and helpful Jesse, we`ll need a part 2. Thanks for all you do 😊

[@JesseShowalter]

You got it!

[@pedrosantos1338]

Very good video. But I really have a question. I'm a developer, but I like to study UI/UX. In the dashboard at minute 11:18, for example, it's very pretty, that's undeniable, but it doesn't seem like a good idea to be executed. Those rounded edges and that displaced footer menu, I really have no idea how to execute this to preserve these aspects. The browser, as far as I know, doesn't support this. But if anyone knows, I'd love to see an example of this execution. Because design is supposed to be beautiful and disruptive, but it has to be executable in code.

[@jaymehta3320]

Really good insights. In general, if I am not wrong, keeping the background white really opens up your options to play around with different colors, contrasts and shadowing etc. I am not a fan of dark background but in a few instances I have seen people pull off good dashboards even with the dark backgrounds.

[@YoungGrizzly]

I think you made great points and some I didn’t agree with but were extremely useful. More importantly this video reinforced why I don’t do front end design. There is just so much that gets scrutinized that I would consider adequate.

[@grafartist]

Does this mean you'll bring back the rework series? I can see that being super beneficial for someone who is junior level like myself. I'm currently doing the course and I'll be honest, I thought some of those designs were good until you offered insight into what makes them appear less than senior level, so it would be cool to see you make edits in real time to do a before and after comparison.

[@JesseShowalter]

I will bring that back, I’ll ask for designs from my designchamps.io/

[@clairefreshney4761]

At 5:46 the tertiary call to action doesn't differentiate from the input text. I would argue that creating learning behaviours for user is not super easy. Also this screen doesn't have great spacing between the input field boxes - almost like they are repelling... I always say to my designers - they are friends not enemies!!!

[@domvial]

On the sign-up screens, the primary CTA state should be displayed as disabled since the mandatory info is not entered yet. Also, on that last map screen, should be “Satellite”, not “Sattelite” 😉

[@JesseShowalter]

Thanks

[@tictac_oe4590]

Loved this one Jesse! We need more of these

[@raquelgarcialeyva9682]

Wow, Your 👀keen eye for detail is incredible; it really helps me pinpoint the issues in some of my designs. This video has been very helpful to me.

[@JesseShowalter]

Glad it helped! If you want Learn more about UI design check out my new course www.30dayui.com/

[@jennacorre8084]

Super helpful video, thank you! Rad 'burn the ships' cap too!👊

[@JesseShowalter]

Glad you liked it!

[@AxsRock]

In apple's third Sign Up design, if it is a registration screen it should have a field to confirm the password.

[@JesseShowalter]

True these are not perfect screens just examples to start the conversation

[@vineetboyle]

Broken down really well for us. Thanks Jesse.

[@JesseShowalter]

If you like this you’d love my full UI course www.30dayui.com/

[@WallyJ2K]

Absolutely awesome! Thanks for this video! The examples make all the difference!

[@mollyhelmer8387]

Love this! do you have anymore vids like this where you're comparing junior, mid-level and senior work? They're super helpful!

[@JesseShowalter]

Yes I do! More videos like this at www.designchamps.io

[@lorentracy006]

The forgot password on the top right makes no sense there. It should be next to the password input.

[@Dima-qz4su]

i had to increase my volume to hear your voice, then the intro GOES SUUUUUPER LOUD felt like from 1/100 volume went suddenly to 121/100.

[@OXMStudios]

great vids! a nit pick maybe would be on the design showcased at 10:36, the Belgium Flag is wrong. I know that was not the point of the video and it was probably just placeholder stuff, but I think it's important if we are trying to get taken seriously :)

[@JesseShowalter]

Not really the focus of the video but good eye

[@cjjosh4669]

I think u should toggle the design @ 12:23 with the previous, it feels like every component is fighting for attention

[@ivanmaglica264]

Dude, app design is totally different from marketing web design. Dashboard themselves are landing pages for an underlying app platform. Apps are data and workflow driven and their no.1 priority is making employee productive. That means heavy data input. Keyboard focus, tabular layout, dense forms (no wizards!)...

[@richardadonnell]

🎯 Key points for quick navigation: 00:00 *🎨 Key Differences Between Amateur and Professional UI Design* - Exploring the gap between junior and senior level UI design, - Reviewing login screens from amateur to professional to understand common mistakes and improvements, - Highlighting the impact of color, hierarchy, and visual consistency on design quality. 01:32 *🖍️ Importance of Color and Hierarchy in Login Screens* - Analyzing the overuse of color and poor hierarchy in junior designs, - The significance of properly using primary, secondary, and tertiary actions, - Demonstrating how controlled color usage and proper spacing can elevate a design to a more professional level. 06:20 *📊 Improving Dashboard Design* - The role of hierarchy and focus in making a dashboard usable, - Addressing overuse of branding elements and emphasizing content instead, - Examples of good practices in simplifying the interface and allowing content to take the center stage. 14:02 *🌐 Designing Complex Web Applications* - Challenges with contrast, separation, and color usage in junior designs, - How effective use of color theory and layout can improve user experience, - Senior-level design showcasing proper use of white space, minimal drop shadows, and distinct content separation. 19:21 *🚀 Moving from Junior to Senior Level UI Design* - Summary of transitioning from junior to senior UI design by refining key elements like color, spacing, and hierarchy, - Encouraging UI designers to focus on subtle improvements to elevate their work, - Promoting a UI design program to learn and practice advanced concepts. Made with HARPA AI

[@justinmiller3349]

Some constructive criticism: 1.) The audio level of your intro is waaaay louder than the audio level of your voice and is super jarring. 2.) Show, dont tell. Show examples of how you would improve on the existing design.

[@ledinhanhtan]

Love and wish to see more of this series !

[@G20Storm]

If I'm already a Graphic Designer, a lot of the stuff you talk about seems almost natural to me, would you say that Bootcamp or School is needed to be a UX/UI designer? I started working on some designs already using Figma, and so far "design" seems pretty simplistic. I'm wondering what more there is to the job, that would prevent me from doing it. I know the UX part of it, will come with time and practice, as I don't know what people want or need, but the UI part of it seems pretty straight forward.

[@Erwin_t]

Great advice as always! could you do a video where you do a client project?

[@JesseShowalter]

Great idea!

[@adyme9420]

Great Jesse. Thanks for this video. But I cannot find the link to your 3 days program. Please send it to me.

[@JesseShowalter]

Try 30dayui.com

[@olhaovcharenko1663]

Hi! The last example of a login screen is that the password os in the same color as the text in the inputs or looks like this. As it is a clickable element doesn't it need to be more highlighted?

[@gauravshirvankar7884]

What are this type of designs called??

[@---iy8xz]

thank you for your helpful video! i'd like to suggest lowering the volume of the intro in 0:30

[@kazx6716]

He just fucked my entire mod and almost get a heart attack

[@Lisa-vh3uh]

Great video for me as a junior 😊 Thank you!!

[@JesseShowalter]

I'm so glad! If you want Learn more about UI design check out my new course www.30dayui.com/

[@szisziszilvi]

Why don't you show an upgraded version of each wrong designs?

[@Mariamadk]

Very informative thank you so much! i was hoping for a part two with your guidance in redesigning a junior interface design while explaining more about the details to practice it with you.

[@JesseShowalter]

Great suggestion! I’m the meantime If you want Learn more about UI design check out my new course www.30dayui.com/

[@bigcodeteknomedia7859]

Thanks bro, I am just learning ui, and your video helped me a lot in understanding UI design

[@jayfunk2012]

That senior dashboard is the weaker one of the four

[@andresmeneses7514]

Yeah I was thinking that is used "Brutalism" in an unnecessary way, Data viz is about clear and fast. Number people want to see numbers as clear as possible

[@nathjones77]

The 3rd dashboard is clearly the best. The 4th is better than the first one. I didn’t like the green one at all. Very poor information/action ratio

[@osasoyara]

Hello Jesse, great work! I'm looking to improve in the area of the design critique, and I need more reps. What website would you recommend to gather examples for critique?

[@JesseShowalter]

We do design criteria in my free community designchamps.io/

[@mikeysouthwell]

More content like this please! I love these UI breakdowns 🤩

[@WadeMurley]

Do you use Tella for screen recording?

[@JesseShowalter]

No I use a custom live streaming setup

[@bdoggtoronto]

Bro..... lets look for some senior level or at least mid tier music backing track. Thanks for a great video!

[@nickwoodward819]

Great video. Would love to see you tweak some of these in real time

[@noak3053]

Hi, could you do stuff like this for mobile ? I always think the real challenge is to get all the Information on a Smartphone

[@viktorskarlatov8227]

That was super informative. Thanks!

[@JesseShowalter]

Glad it was helpful!

[@todd.mitchell]

How did I only just now discover you. Outstanding. Thank you, Sir.

[@JesseShowalter]

Welcome!!! So glad you’re here!

[@RhettNewton-r7b]

Awesome video, Thanks for posting this! Some really good information here!

[@JesseShowalter]

Thank you so much!!

[@braidedwire]

Could anyone recommend some good UI design courses? Most stuff i see on Udemy for instance is all-in-one courses including graphic design basics (which as graphic designer i don't care for) or full Figma/XD instructions. I wish to learn good practices on UI design, based on real knowledge, analysis and so on.

[@JesseShowalter]

I just released the best UI course on the market. www.30dayui.com/

[@kasforai]

How will the graph changes when imported into Bubble ?

[@analuiza2677]

These tips are amazing! Thanks so much 😊

[@Naam_Karan]

4:21 Can someone please tell me the icon and font name?

[@JesseShowalter]

Inter I think

[@davidpsbn]

The last dashboard although it is everything good thing you said about it it’s also a fail UX wise. if used for a every day tool its just too much. Users and their eyes would be fatigued after 10 min of usage

[@JesseShowalter]

Just a UI design video

[@brycelee1529]

UI and UX should go hand-in-hand though… if you’re teaching designers this content to get hired, I think David has a valid point in saying that the last example is not the best. I personally don’t like it either because the spacing seems a bit off, and it’s not conventional to have nav bars on the bottom. I also think the colors are a bit distracting, but then again, I’m not a fan of neobrutalism.

[@OlaTalaat-g7r]

I have to mention that I like your outro ❤

[@alphamaster2]

This is great information.

[@DavidCasey-ok1zs]

Great video. Great Examples. Great explanations.

[@JesseShowalter]

Thank you so much!!

[@Davina-g1b]

Please make more videos of this, it's incredible

[@sofihakobyan7223]

Very helpful ideas, thank you. I hope, you’ll do other similar videos 😊

[@JesseShowalter]

I’ll do more like. this If you want Learn more about UI design check out my new course www.30dayui.com/

[@CNW21]

Great video, but man that second senior dashboard was brutal to look at. Might have been appealing on back on windows 98 but the poor shadowing and aged look mixed with the random neon colors made it overall distracting and unappealing.

[@fareed_adam]

Very useful. Thanks for sharing!

[@JesseShowalter]

Glad it was helpful!

[@UnKnown-hs3ic]

Kindly make part 2 of this video.

[@JesseShowalter]

Coming soon

[@SachinRana-x4h]

Really great content Jesse

[@robertbruinsmaXXXX]

That dashboard one, I understand the principles but the example you showed was worse then the previous. I would not sell a product with that dashboard

[@Algardraug]

Have you thought about investing in a pop filter, love?

[@ladybubble82]

Excellent video!!

[@JesseShowalter]

Thank you very much!

[@CURIOSITYcapital]

I am a developer... having six years of experience in php, laravel , node, express,react,nextjs sveltkit etc...i still can't design well

[@faridmaman4969]

Same as me. That’s why I watch that kind of video

[@A8OC]

Whilst I enjoyed the video at 17:58 you show a professional level interface. The thing that would make me walk away from that designer though? The spelling of 'satellite' is incorrect. This is an absolute pet hate of mine that words are spelt incorrectly so regularly these days in print, in online text, when it so simple to spell check something. Call me picky if you like, but it's the details that are important.

[@peteroguntola8760]

Thanks boss. Insightful!

[@Bodybagbart]

Critiquing the Apple sign up screen is diabolical 😂

[@jdaniels4055]

Hey, this was really helpful!

[@JesseShowalter]

Thanks. If you want Learn more about UI design check out my new course www.30dayui.com/

[@prmcabrita]

Thanks Jesse!

[@rajushingadiya7420]

all introduction was in low voice so i increased volume then suddnly high sound bump scare me , humble suggesttion for you please check once sounde track and remove the scary jump like horror movies, thannks man i stilled watched video but i know you have not round figure income from this video so if you remove scary sound jump then there was a chance that you reach that round figure amount. amazing video , do not worry i will subscribe also. (with fear in mind) , hoho

[@animehubking1537]

Wow it really did help me a lot thx 🙏

[@solensovida]

Great video, but the music is way too loud juxtaposed to the speech levels

[@JesseShowalter]

Thanks so much for watching and thank you for the feedback! Have the best day!

[@nafaabout]

If you just remove that background music. Really helpful video for a developer like me. Thank you.

[@JesseShowalter]

Thanks so much for watching and for your feedback!!

[@MrBenjidcassidy]

They spelled "satellite" incorrectly - ruined it for me

[@rycka7260]

Everything went well until you presented the design at 5:11. Worst login page that I've ever saw... Almost everything bad you mention before is packed-in there and much more... Let alone, that Google login button has a clear set of design rules to follow, including background color. I would expect pro level senior to know that. Bad taste that can become very expensive...

[@GET2222]

The stylization of the accounting software is not modern, it's trendy. In 18 months, it's going to be exhausting using this interface.

[@bruhaps_meme]

i could almost hear you. make the audio even dimmer bro.

[@Burnout3D]

Just me personally, but the senior level designs are just bland and boring. All using similar layouts to 95% of the websites today. Nothing in those websites that stick out to me to say how unique they are, nothing to help differentiate from scammer copycat sites, they all use the same blueprint. I appreciate it if a brand is gonna put in the extra effort to sell me on their product by doing something unique or just little bit differently with their site design. I'm tired of seeing the same old repetitive pattern over and over again on every website.

[@JesseShowalter]

I appreciate your perspective!! Thank you!

[@caiobriggs95]

amazing video

[@rishabhkumar17]

Great!..⛳

[@JesseShowalter]

Thanks!

[@andrescastillo07]

thank you!!

[@JesseShowalter]

You're welcome!

[@kruzader]

Thank you

[@JesseShowalter]

You're welcome

[@Oxilorix]

the intro is too loud!

[@thebehiii5087]

real dude a shat myself

[@thebehiii5087]

real dude a shat myself

[@audreymartingreen2228]

thank you man, i use to make simple websites out of WIX . i think i can start with this exp to jump into UI/UX builder, anybody here share the same exp with me? and Good content man! thanks again

[@darkwoodmovies]

There's junior designers, there's senior designers, and then there's the designers that work at Apple that got some genetic enhancing drugs or something.

[@cris7ea]

no chapters.............skip

[@vamboo8918]

Tq

[@JesseShowalter]

Welcome

[@I_am_very_lucky.]

Wow... 😊

[@theroboticscodedepot7736]

IMHO, Number 4 (TI 5:11) sucks! I can't even tell what the image they used is. I'm literally staring at it and I don't know what it is! Things are all over the place and the gradients are ugly and completely unnecessary.

[@JackJill-g1d]

1303 Olen Shores

[@yashshrivastava5799]

Can we make all these websites through no code softwares??

[@KieRej]

You as a designer should be creative not a copy paster from DesignSpo

[@JesseShowalter]

It's a saturated space so there may be overlap with lot's of other content. For example here's a quick search kzbin.info?search_query=pro+vs+amateur+design See what I mean, lot's of examples 🤣

[@KieRej]

I've learnt a lot from your content tho! I appreciate @@JesseShowalter

[@GET2222]

You need to lose the weird purple border in your videos. Your logo in the lower right is pretty amateur when it comes to designing graphics for video overlays. If you are going to use a radius in your video to contain your head or the product you are featuring, make sure it matches the radius of the KZbin player. Your logo overlay is a transparent square that isn't proportionate to your logo. In fact, your logo disappears in parts of your edits. I'm not sure what software you are using to edit your software, but I will go back in and make some adjustments. That purple border is really distracting and amateur. You are a smart kid, and I know you know you can do better. ;)

[@jakbo_]

Merp