Hi, I'm Matt, a self-taught product designer with 14+ years of experience. I specialize in creating meaningful and relevant user experiences as a full-time UX Designer. In my free time, I enjoy sharing my knowledge and coaching others on design topics, including getting started in UX and UI, design process, tools, career advice, and industry insights. I also share tips on how to improve as a designer and design awesome products.
Depends on the original project file, how it was done. Sometimes I can work with original elements/components - same times is really bad and I need to recreate everything myself.
Everything he was describing was excellent and on point, but all the animation going on back and forth and out of sorts, made it confusing to follow his points.
Thank you, reason for many animations was to raise watchers attention. Most of the viewers due to all short form content get bored relatively fast - so in order to keep their attention creators are forced to make often changes of clips - trust me, I have over 3 years worth of data about it :)
Can you make full video on this progressive enhancement aprroach that will show step by step how to achieve this? From your video, it is obvious that one should create layout grid for each device separately and then by use of plugings one can get responsive behaviour on each breakpoint. Its not like a top down aprroach in which a desktop layout will become mobile layout while reducing the width of desktop design??
very helpfull video , I am searching for how we can make our app responsive in figma from smallest screen sizes to the highest with of a tablet, or destop. how to find the breakpoint for mobile phone application. if you have in a iPhone frame, how we can make sure our design is responsive in all mobile phone screens from iPhone to android and all screens of it. really need this detail video. thanks
You need to go through most popular devices screen resolutions - just visit Google Material Design & Apple documentation, everything is there: ex.: m2.material.io/design/layout/responsive-layout-grid.html#breakpoints , developer.apple.com/design/human-interface-guidelines/layout ; compare the 2 and assign primary break points then.
Either Ideation or Prototyping because those are items that you create after you gather sufficient informations about the users and business goals - hence, you have a good idea what you want to create and you are planning for it.
I’m enjoying this series, please continue with it. I was wondering why you to chose retain the padlock icon instead of the show password icon? It’s a nice aesthetic choice but it would be more useful to see your password. 1:13
Well, then the video would be about the conversion of mobile view to the tablet and desktop view that previously didn't exist. The case you are mentioning would be better fitted for adaptive design tutorial (conversion case). This one is on how approach the project from the beginning when the requirement for responsivity is one of the functional requirements.
You don't really have "cut" option in Figma, as for copying depends from the platform cmd+c on Mac, ctrl+c on Windows, and then "v" for pasting, or right click and "copy".
On the first example (0:56) I think there are couple things that could be improved. First there is still odd space between "Create account" and top of the screen, it makes me feel that something hasn't loaded. Maybe there should be a logo or something. Then it looks like that "Create account" is on a separate card that can be pulled up from behind this sign up screen. So from the first look I'm wondering if I'm creating account or is this login for existing accounts. Of course the buttons itself gives the answer but this isn't consistent. Sign up with Google/Facebook buttons look better after modification but contrast in those buttons are so much bigger than on "Sign up" button that those steals my focus.
It took me almost a year to come back to you! :/ It was definitely one of the harder moments in my life, without a doubt. But... I'm finally back, and I'm returning with a strong video for you - part 10 of Before & After. Next videos will follow! I'm glad to be back ;)
You are massively underrated. I just binged watched the other parts of this series. So easy to understand and the fact that you create so many visual examples is just amazing.
Upon reviewing the design, I noticed a couple of areas that need attention. Firstly, the cart icons and the "New Collection" heading are not visible. Additionally, the colour contrast between the buttons and the text is inadequate, making it difficult to read.
Did you check it on the contrast checker :)? But to be honest - you are absolutely right, as you mentioned there are things that could still be even better done! I will do my best to do as best job I can in the future ;)
Can you elaborate on the question? If you are asking about technical aspect of it it's a screen recording put on a masked layer. If you are asking about the animation at the end it's Adobe After Effects :)
this was pretty good, but you might better differentiate this by increasing/decreasing the size of a window to show ppl (vs static diagrams). Responsive entails dynamic incremental reflowing, while adaptive will sort of "pop" into the different pre-designed layouts. Sometimes they can be mixed too!
Well, I could, but as I said in the video - most of the times companies are targeting specific platforms with adaptive. I don't think I ever seen a website or web app prepared in this way. Most of the web is primarily responsive and then you get native apps that are optimized for specific platforms.
You need to download Figma app on this device, and the prototype needs to be optimized for that device screen resolution. Then you can display the prototype on it through this mobile app.
