Тёмный

Top 5 UI/UX Design [Trends] Tips by Cuberto (2020) 

Cuberto Design
Подписаться 173 тыс.
Просмотров 431 тыс.
50% 1

This month you'll get on / cuberto
- The 4th design course showing the process of Principle animation
- Two new animated shots with source files in AE
- Two videos with design tips

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

 

7 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 201   
@CubertoDesign
@CubertoDesign 4 года назад
Join our Patreon channel to get design courses, source AE files and design tips: www.patreon.com/cuberto
@CubertoDesign
@CubertoDesign 4 года назад
@Youngky Prima We used Tobii Eye Tracker 4C
@dave3k
@dave3k 4 года назад
Are the courses full length or 5-10 minute types and tricks? Could you provide more information about what’s inside the membership?
@4youcontent552
@4youcontent552 4 года назад
Can you please add more youtube content
@ab-kx1vg
@ab-kx1vg 3 года назад
@@dave3k ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qOIPKg_wdSc.html
@axfilipe
@axfilipe 4 года назад
0:40 this animation kills 50 front-end developers per minute
@guilhermehenrique-zj5tt
@guilhermehenrique-zj5tt 4 года назад
its not practical. :P
@yadneshkhode3091
@yadneshkhode3091 4 года назад
😂😂😂😂
@ivihysenbelli475
@ivihysenbelli475 3 года назад
Dying 😂😂😂😂
@vencheangheng405
@vencheangheng405 3 года назад
Filipe Machado ma man
@hakimnizam4919
@hakimnizam4919 3 года назад
Developers will kill me if I do this.
@bitslay
@bitslay 4 года назад
At 1:36 The first one looks better in my opinion
@woodyboy123
@woodyboy123 4 года назад
Completely agree. To the extent that i wondered if they had labelled them the wrong way round by mistake
@akashl253
@akashl253 4 года назад
Yes
@chrisrak1087
@chrisrak1087 4 года назад
yes tht bold text look so ugly
@hansverigson6865
@hansverigson6865 4 года назад
Absolutely.
@olegkritsky
@olegkritsky 4 года назад
Second looks much modern and better (first fine too)
@ssreckov
@ssreckov 4 года назад
To everyone watching this I advise taking everything brought up in this video with a pinch of salt. Some of the approaches are presented as inherently superior but no such thing exists in the real world. Fonts in particular aren't a one size/kind fits all; just because something is trendy and of appeal to us designers doesn't necessarily mean it will work in a particular environment. In general, videos like these should be preceded with a disclaimer that given advices are largely based on personal preference. After all, design is very much a subjective thing.
@MrHimanshun
@MrHimanshun 4 года назад
*FootNotes on 5 tips:* 1. Animations in UI : Develop awesome Animations with those who really have qualification. 2. Photo content in UI : Use the Illustrations to point at the Button/Text this way we direct attention to that thing and put emphasis on what's really important. 3. Work with fonts : 95% designers work with the universal set of fonts, so a layout with fresh fonts really stands out and immediately grabs attention. But if have little experience and less time to experiment than go with the former. 4. Light UI vs Dark UI : In light interface the attention the goal is to make layouts so the attention is distributed equally. On the Dark interface the attention is more focused on the functional elements. So we can easily adjust the priority of these elements by placing the necessary accents. Generally the choice of colour depends upon the manufacturer and the product theme. 5. Unified pictogram style: The icons looks much better when they are of uniform style within a given set. What designers do is they use mix styles , adjusting the icons to the environment where they will be displayed.
@metromodernism
@metromodernism 4 года назад
So glad I found you guys. Awesome content so far!
@ahmedshukrah
@ahmedshukrah 4 года назад
thanks Cuberto for sharing those tip with us, I hope that you will keep sharing more content like this
@chrissre7935
@chrissre7935 4 года назад
Great Video. For me as a designer in a cosmetics company, I do what works. What brings eyes to the website and science behind it. I leave the experimental part for my personal projects. I noticed many designers will do what looks cool but that don't work.
@DeignFilx
@DeignFilx 11 месяцев назад
Design agency with no limits i like the way you do design clean mockups and creative with no limits.
@dmitriyobidin6049
@dmitriyobidin6049 4 года назад
Animation just for animation purposes - not the best ux. It is awesome when you scroll through dribbble feed though. 1:36 Font is not the problem here, color contrast is. Titles are barely visible.
@WrongAkram
@WrongAkram 4 года назад
Favorite agency, hands down!
@keerthi-kc7pq
@keerthi-kc7pq 4 года назад
Loved every bit of it. I've been following this channel for a while now.
@marqueschristmann7512
@marqueschristmann7512 3 года назад
Great content, congratulations!!
@MeDvinod
@MeDvinod 4 года назад
Things i struggle to convince comes now as trending practices, feels good
@uxalok
@uxalok 2 года назад
Thank you so much!
@gustavoguillermoalonso8755
@gustavoguillermoalonso8755 4 года назад
Thanks! I love your videos
@Ganito55
@Ganito55 3 года назад
Great tips! Cheers
@bestofyasi
@bestofyasi 4 года назад
Thanks for the tips 😀
@Akash-hs8nl
@Akash-hs8nl 3 года назад
Really informative video!!
@mohamed.L.Meddour
@mohamed.L.Meddour 3 года назад
amazing, please more videos like this
@zillboy
@zillboy 4 года назад
Thank you so much so sharing!
@justrashaad
@justrashaad 4 года назад
More like this please 😁 ❤️
@stvfunmotion
@stvfunmotion 3 года назад
Never lost hope, because it is the key to achieve all your dreams
@InfectedcellRu
@InfectedcellRu 4 года назад
Amazing! Found my mockups )))))
@michaeltinglin7062
@michaeltinglin7062 4 года назад
Well done.
@mubashirshah1508
@mubashirshah1508 4 года назад
very helpful
@rohitraju8654
@rohitraju8654 4 года назад
Thank you for shareing ♥️
@mandanprasad9921
@mandanprasad9921 4 года назад
Nice video.
@rakharuan
@rakharuan 3 года назад
thanks
@arz-keebs4431
@arz-keebs4431 4 года назад
I have no idea, but I love your sound hihi
@gwesterneng5859
@gwesterneng5859 4 года назад
I think that we are going to see some icons with more depth (more detail and color) instead of empty instead.
@russiskandar7197
@russiskandar7197 4 года назад
cool stuff
@YlmazSATTI
@YlmazSATTI 4 года назад
Thank you
@ahbaghdoooohootojecislomeh7148
@ahbaghdoooohootojecislomeh7148 3 года назад
we've had the phone for a long time now, my friend.
@SameerKongath
@SameerKongath 4 года назад
good information
@jeeperscreepers8704
@jeeperscreepers8704 4 года назад
Nice... keep it up
@TapRefer-com
@TapRefer-com 3 года назад
lovely....
@pitrubio
@pitrubio 3 года назад
great!!!
@ansaransu4761
@ansaransu4761 4 года назад
Awesome ❤ Please reduce bg music volume
@GergiH
@GergiH 3 года назад
I'm not an expert, but from a user's perspective, regarding the usability/clarity I just hate the unified icons everywhere. It looks cohesive and all, but I find that I'd be able to recognize the left icons in an instant while if I saw the bin and the shopping bag near each other from the right ones for example, I'd most probably have to stop for a second to double-check which is which.
@abhishekchauhan6530
@abhishekchauhan6530 3 года назад
nicest UI ever..
@ananthnaren9183
@ananthnaren9183 4 года назад
Im a ms software engineer graduated and Its my firm desire to become ux ui designer , its my dream and wish to learn more.
@FastTagMasti
@FastTagMasti 3 года назад
nice
@anujrathore2517
@anujrathore2517 3 года назад
Me as frontend dev at 0:40 Hmm boring is actually awesome 😅😅
@woodyboy123
@woodyboy123 4 года назад
These guys are so damn good at what they do. Inspiring!
@mluevanos
@mluevanos 4 года назад
At 1:38 Form labels need more contrast.
@samirverdi5444
@samirverdi5444 3 года назад
what‘s wrong in contol lines icon with a bit of strong shadow(small grey outline in one of icon side)?
@LuBre
@LuBre 4 года назад
01:28 I am sorry but the first one looks a lot better. The font choice on the second layout doesn't fit the theme at all.
@anjali7778
@anjali7778 4 года назад
first doesnt even serves the point of putting a picture there, people are not there to look at the girls, its not a magazine. Either remove the entire girly thing or use the second one.
@Muhammed.Yaseen
@Muhammed.Yaseen 3 года назад
Fact
@caua__matheus
@caua__matheus 3 года назад
@@anjali7778 I think he was talking about 01:28 :D
@TapRefer-com
@TapRefer-com 3 года назад
@@anjali7778 first click on timestamp plzzzzzz
@anjali7778
@anjali7778 3 года назад
​@@caua__matheus yeah sorry about that, my mistake i didnt saw it xdd
@alexbigby7527
@alexbigby7527 3 года назад
This is funny how you rather speak about how to draw the attention of the user rather than how to help them use what the application is supposed to offer.
@evm6177
@evm6177 3 года назад
Sure is funny when the idea is job creation for the sake of job creation, rather than customer retention or market requirement. 🍷
@MrFarkasOfficial
@MrFarkasOfficial 4 года назад
1:36 the second one is better if you are the kind of person that draws with crayons
@isuno
@isuno 3 года назад
What program are you using for testing?
@JohanSurya_BlueFlame93
@JohanSurya_BlueFlame93 4 года назад
What is the video cover design style ?
@hitaccount
@hitaccount 4 года назад
Loved it! Thank you for sharing. Could you please recommend which eye-tracking tool to use?
@bestofyasi
@bestofyasi 4 года назад
Hotjar is good for websites or webapps.. and there is a web app called visual eye. Basically you can upload your UI and get AI based heatmap... it's quite nice to me.
@asheshroy5038
@asheshroy5038 2 года назад
How to right swipe from one mobile frame to another in Figma as you guys have done in your design ?
@nicholasmiles4966
@nicholasmiles4966 3 года назад
What is the song playing in the background??
@nemocreativestudio
@nemocreativestudio 4 года назад
You're too good to be on youtube, but lucky me
@vulcanio7038
@vulcanio7038 4 года назад
What is the font? Thank you
@TheSeyed
@TheSeyed 3 года назад
For the first tip, I think animation and transitions are very special and we should care about using them for a real world day-to-day using app. It can causes boring in long term. It is like salt in food so use as clever as possible. So I think your first example is a bad example.
@ZiosNeon
@ZiosNeon 4 года назад
Wait why is she saying that one team should do the animating and development.
@MuzamilKhan-rl2sh
@MuzamilKhan-rl2sh 4 года назад
Where i can find your paid courses
@aleksay2142
@aleksay2142 4 года назад
Privet bratushki
@user-bi1ul4iw7i
@user-bi1ul4iw7i 3 года назад
Прикольно :)
@vrombo
@vrombo 3 года назад
A startup which business relies on funny animations is a doomed one.
@narcis3720
@narcis3720 3 года назад
yeah no. only someone who has experience designing for a very limited range of companies would say that.
@vrombo
@vrombo 3 года назад
@@narcis3720 "cuteness" is not business advantage. Never was.
@narcis3720
@narcis3720 3 года назад
@@vrombo idk think about learning applications for children, animations that explain the UI of the app itself, industrial product visualizations etc., just to name a few examples that popped into my head. Also who said they need to be cute or funny?
@narcis3720
@narcis3720 3 года назад
@@vrombo + fashion design. I can think of a few companies I became a customer of, primarily because of some dope animations on their website.
@vrombo
@vrombo 3 года назад
@@narcis3720 there're exceptions to anything... And? I would always prefer real value/business task rather than rectangle colour or font size...
@amina___6443
@amina___6443 3 года назад
What does "those who really have the qualification" mean?
@techyqom3083
@techyqom3083 3 года назад
Hey could you guys please tell me what programming language i use to design my app not website ,please if you know,tell cuz I stuck here 😭
@rekt3651
@rekt3651 3 года назад
Feel bad for front end lol
@ircraddle8690
@ircraddle8690 4 года назад
Come on, Cuberto! Dribbble is Dribbble, real life projects are real life projects. It's too much to elaborate but what you have shown is probably what a beginner designer would think they need to actually do.
@infimode
@infimode 4 года назад
font please!!
@davidkonevky7372
@davidkonevky7372 4 года назад
Even tho I liked the second font they picked in 1:27, it doesn't work with the other elements, while the first one does. I use that font, but I use it mostly for big text like titles in powerpoint, while in here it just looks inadequate.
@davidkonevky7372
@davidkonevky7372 4 года назад
Btw, if you were wondering, I think the font is called monument.
@xshra
@xshra 4 года назад
I just graduated with a Fine Art degree (focusing on contemporary modern art) :)) I want to become a UI/UX designer, I have no graphic design experience nor havent studied it...... Do I have a chance...?
@adekunlesuccess1751
@adekunlesuccess1751 4 года назад
Just find time to learn if you really want it.....Do whatever you want .....nobody here really cares about you except you
@yadneshkhode3091
@yadneshkhode3091 4 года назад
Start with design tools like Figma or Adobe FX ( Figma is latest and lot of people are using it) make good designs and make a good portfolio try applying for jobs and while you're at it start learning html css JavaScript side by side
@griffinwdesigns
@griffinwdesigns 3 года назад
@@yadneshkhode3091 do you mean Adobe XD?
@XD-je1vj
@XD-je1vj 4 года назад
Make more procrete videos please :D
@zoltanrobertlovas4672
@zoltanrobertlovas4672 3 года назад
Animation in UI: the "awesome" one is horrible Photo Content: don't put a human there if there is no need for one Typography: Left looks better Dark vs Light: in most cases you want a dark UI. better on the eye and for the display as well Icon set: The wrong one is the one to use, as it is easier to interpret for most people
@williamsokoronkwo3958
@williamsokoronkwo3958 4 года назад
❤️
@TheSkipinder
@TheSkipinder 4 года назад
Brilliant video, thank you! Could you point me to the music used in the video? so dreamy and beautiful.
@01Oddone
@01Oddone Год назад
Any free sites to get those images for our projects please
@anshshukla4741
@anshshukla4741 4 года назад
How can I make such high quality videos like this one? Please help.
@AngeloMcCaw
@AngeloMcCaw 4 года назад
I want to know too
@qwwongs33
@qwwongs33 4 года назад
a bunch of animation
@anshshukla4741
@anshshukla4741 3 года назад
@@qwwongs33 hmm wow you must be really smart
@Trazynn
@Trazynn 4 года назад
lose the music or at least its high-end frequencies. They interfere with the narrator.
@oscarguevara8072
@oscarguevara8072 4 года назад
Basar que el Dark UI es mejor que el Ligjt UI solo por un eye tracking es la burrada más grande que he visto. En almacenes logísticos de distribución es una locura pensar utilizar, por cansancio visual, saturación de información contenida, etc etc... Utilizar este tipo de estilos.
@noeldanastasi2095
@noeldanastasi2095 4 года назад
Ermm ok the animation looks cool and everything but isn't developing that a total hassle to do and development normally struggle with deadlines?
@divern7229
@divern7229 4 года назад
not to mention, who does this in the real world? even apple. They have making their animations faster and more subtle.
@cosrmsaidso2626
@cosrmsaidso2626 3 года назад
no one ever cared about the developing process, client says : it needs to look cool within 2 days!
@gregtegreg
@gregtegreg 4 года назад
Hey Cuberto, I would really like to know when exactly is a Dark layout necessary, as you say. I’ve spent 19 years of my life designing all print materials, Tees, presentation CD’s, websites, apps and other things I don’t even remember anymore - the only times I’ve heard people talking about dark layouts was mIRC, porn websites and rock show posters. Necessary? Are you sure this is the word?
@delussions
@delussions 4 года назад
O wow
@dreamflare
@dreamflare 3 года назад
Прослушивается наш родной акцент 👀😅
@weizenyang
@weizenyang 4 года назад
What's the animation style at 0:36 ?
@LuBre
@LuBre 4 года назад
It's called "Developers will hate you 1.0"
@olegkritsky
@olegkritsky 4 года назад
Lu lol, looks like it’s only lottie, so relax
@ben6
@ben6 4 года назад
The first time I've heard someone else with Dan Abramov's accent. 😃
@notfunneh8930
@notfunneh8930 4 года назад
that`s typical slav accent
@rubensteinhauer2442
@rubensteinhauer2442 Год назад
keyboard instead of the draw tool
@owencolby8146
@owencolby8146 4 года назад
"according to awards" lmfao
@lovefrommana
@lovefrommana 4 года назад
Awwwards, dude. They are the largest web design competition body.
@gregtegreg
@gregtegreg 4 года назад
Antelope you really don’t understand the point of Awwwards, do you? Go and look at all the winners there, all the websites are hard coded, tons of effects and artsy - they give prizes to “different” concepts. Awwwards does not represent the high standard online, just the unique ideas. It’s like Dribbble, everything “pretty” but not really usable.
@SophieExMachina
@SophieExMachina 4 года назад
@@gregtegreg I feel like these kinds of trends are absolutely not to be looked at for real designs becuse they kind of start living in their own bubble. Like the stuff on dribbble often has some kinds of trends that get to the top all the time (neumorphism) but something like neumorphism is actually really inapplicable for real applications. The reason people call it a trend is because people circlejerk over it on dribbble and it gets to the top, and then people on there try to imitate the success. In the real world many things you see in dribbble and awwwards is completely not applicable because it's not actually UX friendly at all. It's like what you see on reddit in /r/battlestations. All the top posts are purple lighted setups so people on there all try to go for neon lights and vaporwave aesthetics in their room setups. It's trends that only live in their own bubble.
@suhaibcherukunnon1698
@suhaibcherukunnon1698 2 года назад
00:40
@ShreyasTripathy93
@ShreyasTripathy93 4 года назад
These are truly awful tips. Please DON'T do these! This is the UX/UI equivalent of the Verge's PC building guide
@chrissre7935
@chrissre7935 4 года назад
Any argument to support your claim?
@ShreyasTripathy93
@ShreyasTripathy93 4 года назад
@@chrissre7935 Tip #1: Overly detailed and long animations look great on a portfolio but are impractical for actual use. The user wouldn't want to wait for an animation to complete before they could perform the task they came to the app for. Also, the animation shown in the video as "boring" is a standard flow and is widely accepted for a reason. Not to mention what the narrator says around 0:50 ... "when the design stage is done by one team and ..." Design and development is always done by different teams! Also, what does that have to do with the animation? Tip #2 : It is a fair point and users do like to have a sense of direction. It might be a "trend" but this can't be called a "tip" (now you might have noticed that the video title says both and they aren't the same thing). The best way to draw a user's attention is always by good UX and flow. Tip #3 : Never pick a font because it looks different. Pick a font that is clean, properly spaced-out and maintains high contrast with multiple font-sizes and font-weights. A catchy font would definitely draw attention but would very quickly become overbearing. It tires out the eyes. Tip #4 : I have been working in this industry for 5 years and I have never gotten very clear results for dark vs light UI. People react differently depending upon age, time of day and content. The only thing I can say for sure is that, reading white text on a dark background takes more effort and hence isn't good for text-heavy applications. The example shown in the video would work well with a dark background because there's less text. On top of that, if you carefully see the eye-tracking results, you'd realize that users fail to notice minute details and other components on the dark UI. They miss the tabs, the navigation and the trends which isn't good. The light UI draws equal attention towards all the relevant data. Tip #5 : This is perfect. It is never recommended to mix-and-match icons or fonts. But at the same time, it isn't a trend, it has always been a thing
@Moghster
@Moghster 4 года назад
@@ShreyasTripathy93 You just agreed to half the things they said and called it awful tips 'Please DON'T do these.
@vinrubio
@vinrubio 4 года назад
all the people I know, when they take to read an ebook for example, they prefer much more dark mode than light mode.
@gregtegreg
@gregtegreg 4 года назад
Shreyas Tripathy perfect!
@rizkiadisaputra5971
@rizkiadisaputra5971 4 года назад
top 5 ux/ui. * android dev , shit i cant make a shadow with this IDE.
@dr.saadawy
@dr.saadawy 3 года назад
I like her accent and intonation.
@kaewgbr
@kaewgbr Год назад
yeah bro hahahahahaha
@Georgeux
@Georgeux 4 года назад
Sound Control font choice looks Terrible
@spythere
@spythere 4 года назад
I don't like what direction are these UI/UX "trends" going. For me it all should be simple. Not only because it's easier to implement but also because it's beautiful in its simplicity. Frankly, those animations are tiring to look at and I don't know if I wouldn't have uninstalled an app with those after one minute. Also, slim fonts are way better in my opinion. Those presented by you are to vast and too bold and they hurt my eyes so badly. The only thing I agree with you in the video are icons which are exactly what I am talking about - simple and minimalistic.
@rishavbhowmik7778
@rishavbhowmik7778 3 года назад
#skincolormatters
@HamedHamedi
@HamedHamedi 3 года назад
I made a tutorial regards to one of these ideas: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AcgvW_0oy9Q.html
@seleldjdfmn221
@seleldjdfmn221 4 года назад
Cool video! How Often Should someone upload? Can We be youtube friends? :O
@basitmasood6895
@basitmasood6895 4 года назад
Title of this video is misleading, there is something else in the content
@Alloniya
@Alloniya 3 года назад
Left was better, right letters is ugly
@videos6505
@videos6505 4 года назад
Top 5? No basics.
@sparkijonas
@sparkijonas 4 года назад
Very poor Typography.
Далее
Liquid Animation in After Effects // UI Design Course
17:46
How to prepare your design portfolio / Design Tutorial
25:10
Only you are left😭I beg you to do this🙏❓
00:19
Просмотров 744 тыс.
Luiza Rasulova #luizarasulova
00:37
Просмотров 697 тыс.
D3 Ваз 2107 Не умри от зависти!
18:57
Top 5 UI/UX Design [Trends] Tips // Vol. 2
3:09
Просмотров 57 тыс.
How to present your design concept / Design Tips
4:36
How I Became A Self-Taught UX Designer In 3 Months
12:25
I Redesigned the ENTIRE IMDb UI from Scratch
12:19
Просмотров 175 тыс.
world's shortest Figma course
6:54
Просмотров 248 тыс.
Graphic Designer | Portfolio | Showreel
1:12
Просмотров 32 тыс.
Top 5 UI/UX Design [Trends] Tips // Vol. 5
4:13
Просмотров 55 тыс.
Now AI is DESIGNING my entire app in minutes...
8:21
Просмотров 296 тыс.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 745 тыс.
Only you are left😭I beg you to do this🙏❓
00:19
Просмотров 744 тыс.