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
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.
*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.
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.
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.
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.
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.
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.
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.
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.
@@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?
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.
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...?
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
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
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.
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?
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.
@@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
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.