Top 5 UI/UX Design [Trends] Tips by Cuberto (2020)
Вставка
- Опубліковано 25 лип 2024
- 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
![Top 5 UI/UX Design [Trends] Tips // Vol. 5](http://i.ytimg.com/vi/r8XHDqr3dKA/mqdefault.jpg)
![Top 5 UI/UX Design [Trends] Tips // Vol. 5](/img/tr.png)
Join our Patreon channel to get design courses, source AE files and design tips: www.patreon.com/cuberto
@Youngky Prima We used Tobii Eye Tracker 4C
Are the courses full length or 5-10 minute types and tricks? Could you provide more information about what’s inside the membership?
Can you please add more youtube content
@@dave3k ua-cam.com/video/qOIPKg_wdSc/v-deo.html
0:40 this animation kills 50 front-end developers per minute
its not practical. :P
😂😂😂😂
Dying 😂😂😂😂
Filipe Machado ma man
Developers will kill me if I do this.
At 1:36
The first one looks better in my opinion
Completely agree. To the extent that i wondered if they had labelled them the wrong way round by mistake
Yes
yes
tht bold text look so ugly
Absolutely.
Second looks much modern and better (first fine too)
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.
So glad I found you guys. Awesome content so far!
*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.
thanks Cuberto for sharing those tip with us, I hope that you will keep sharing more content like this
Loved every bit of it. I've been following this channel for a while now.
Great content, congratulations!!
Design agency with no limits i like the way you do design clean mockups and creative with no limits.
Thanks! I love your videos
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.
Great tips! Cheers
Really informative video!!
Thanks for the tips 😀
Thank you so much so sharing!
amazing, please more videos like this
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.
Favorite agency, hands down!
Thank you so much!
More like this please 😁 ❤️
Things i struggle to convince comes now as trending practices, feels good
Amazing! Found my mockups )))))
Well done.
Thank you for shareing ♥️
very helpful
cool stuff
Nice video.
Nice... keep it up
great!!!
good information
Thank you
I have no idea, but I love your sound hihi
nice
lovely....
Never lost hope, because it is the key to achieve all your dreams
These guys are so damn good at what they do. Inspiring!
thanks
Loved it! Thank you for sharing. Could you please recommend which eye-tracking tool to use?
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.
Awesome ❤
Please reduce bg music volume
I think that we are going to see some icons with more depth (more detail and color) instead of empty instead.
nicest UI ever..
what‘s wrong in contol lines icon with a bit of strong shadow(small grey outline in one of icon side)?
Me as frontend dev at 0:40
Hmm boring is actually awesome 😅😅
At 1:38 Form labels need more contrast.
How to right swipe from one mobile frame to another in Figma as you guys have done in your design ?
we've had the phone for a long time now, my friend.
What is the video cover design style ?
Wait why is she saying that one team should do the animating and development.
What is the font? Thank you
Im a ms software engineer graduated and Its my firm desire to become ux ui designer , its my dream and wish to learn more.
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.
Sure is funny when the idea is job creation for the sake of job creation, rather than customer retention or market requirement. 🍷
You're too good to be on youtube, but lucky me
Where i can find your paid courses
What is the song playing in the background??
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.
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.
Fact
@@anjali7778 I think he was talking about 01:28 :D
@@anjali7778 first click on timestamp plzzzzzz
@@caua__matheus yeah sorry about that, my mistake i didnt saw it xdd
What program are you using for testing?
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.
1:36 the second one is better if you are the kind of person that draws with crayons
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 😭
Прикольно :)
font please!!
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...?
Just find time to learn if you really want it.....Do whatever you want .....nobody here really cares about you except you
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
@@yadneshkhode3091 do you mean Adobe XD?
What does "those who really have the qualification" mean?
Privet bratushki
❤️
Any free sites to get those images for our projects please
Brilliant video, thank you! Could you point me to the music used in the video? so dreamy and beautiful.
Feel bad for front end lol
O wow
Make more procrete videos please :D
How can I make such high quality videos like this one? Please help.
I want to know too
a bunch of animation
@@qwwongs33 hmm wow you must be really smart
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.
lose the music or at least its high-end frequencies. They interfere with the narrator.
What's the animation style at 0:36 ?
It's called "Developers will hate you 1.0"
Lu lol, looks like it’s only lottie, so relax
A startup which business relies on funny animations is a doomed one.
yeah no. only someone who has experience designing for a very limited range of companies would say that.
@@narcis3720 "cuteness" is not business advantage. Never was.
@@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?
@@vrombo + fashion design. I can think of a few companies I became a customer of, primarily because of some dope animations on their website.
@@narcis3720 there're exceptions to anything... And? I would always prefer real value/business task rather than rectangle colour or font size...
Ermm ok the animation looks cool and everything but isn't developing that a total hassle to do and development normally struggle with deadlines?
not to mention, who does this in the real world? even apple. They have making their animations faster and more subtle.
no one ever cared about the developing process, client says : it needs to look cool within 2 days!
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.
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.
Btw, if you were wondering, I think the font is called monument.
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?
Прослушивается наш родной акцент 👀😅
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
00:40
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.
keyboard instead of the draw tool
The first time I've heard someone else with Dan Abramov's accent. 😃
that`s typical slav accent
"according to awards" lmfao
Awwwards, dude. They are the largest web design competition body.
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.
@@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.
top 5 ux/ui.
* android dev , shit i cant make a shadow with this IDE.
I made a tutorial regards to one of these ideas: ua-cam.com/video/AcgvW_0oy9Q/v-deo.html
yeah bro hahahahahaha
I like her accent and intonation.
#skincolormatters
Sound Control font choice looks Terrible
These are truly awful tips. Please DON'T do these! This is the UX/UI equivalent of the Verge's PC building guide
Any argument to support your claim?
@@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
@@ShreyasTripathy93 You just agreed to half the things they said and called it awful tips 'Please DON'T do these.
all the people I know, when they take to read an ebook for example, they prefer much more dark mode than light mode.
Shreyas Tripathy perfect!
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.
Cool video! How Often Should someone upload? Can We be youtube friends? :O
Left was better, right letters is ugly
Title of this video is misleading, there is something else in the content
Webdesign Kennisbank | Cees Spelt Educatieve Webdesign Wegwijzerwww.webdesignkennisbank.nlWelkom in de Wereld van Webdesign!
Top 5? No basics.