Kerev Design
Kerev Design
  • 99
  • 423 933
Amateur vs Pro: Mobile UI Design (Before & After 10)
In today’s video I will redesign concept of mobile app UI Design and I will make it great - explaining how and why along the way.
Watching experienced designers reworking designs and providing feedback behind their decisions is one of the best ways of developing your own skills faster.
I’m designing in Figma: psxid.figma.com/52h3iuj6s0bk
Watch other videos from the Before & After series here: ua-cam.com/play/PLtZjSN7j6ANzSv0z-0ATNF-XRhOlbUyW_.html
My UX/UI design crash course series: ua-cam.com/play/PLtZjSN7j6ANx8FTfx7dwk8ytlGlBC_yGg.html
Disclamer:
Some of the above are affiliate links-I make a small commission when you purchase through my link, at no extra cost to you. Thank you for supporting an independent creator!
Chapters:
00:00 Before & After 10
00:11 First Screen
01:40 Second Screen
03:42 Third Screen
#uidesign #uxdesign #uxtutorial #designtutorial #graphicdesign #mobiledesign #productdesign #ui #ux
Переглядів: 923

Відео

Why UX industry WON’T BE over by 2025
Переглядів 2,1 тис.11 місяців тому
The UX Design industry isn’t dead! Let me tell you why! ;) Here is Michał's original video: ua-cam.com/video/0hV29SLpOLQ/v-deo.html and article: michalmalewicz.medium.com/golden-age-of-ux-is-over-403e4ea1e753 Before & After series: ua-cam.com/play/PLtZjSN7j6ANzSv0z-0ATNF-XRhOlbUyW_.html My UX/UI design crash course series: ua-cam.com/play/PLtZjSN7j6ANx8FTfx7dwk8ytlGlBC_yGg.html I’m designing in...
Skyrocket Your UI Design Skills in Just 6 Minutes! (Before & After 9)
Переглядів 4 тис.Рік тому
In today’s video I will transform this relatively good UI and I will make it great - explaining how and why along the way in just 6 minutes! Watching experienced designers reworking designs and providing feedback behind their decisions is one of the best ways of developing your own skills faster. I’m designing in Figma: psxid.figma.com/52h3iuj6s0bk Watch other videos from the Before & After ser...
Visual Style & Design Trends
Переглядів 1,7 тис.Рік тому
In part 6 of my UI/UX design crash course series we will visual style & trends. Visual style conveys a brand's character, which is crucial in making a digital product stand out and enhancing its usability and credibility. Video tutorial I mentioned in the video about color in UX/UI Design: ua-cam.com/video/r8r_tstxJzc/v-deo.html Get started with Figma for Free: psxid.figma.com/52h3iuj6s0bk This...
Revolution for Designers?
Переглядів 463Рік тому
In this video, we explore the potentials and pitfalls of Apple's revolutionary new device, Vision Pro, focusing particularly on its implications for user experience and interface design. Join me as we delve into the device's innovative features, its potential for transforming workspaces, and our concerns around affordability, comfort, and battery life. Get started with Figma for Free: psxid.fig...
Responsive & Adaptive Design
Переглядів 1,2 тис.Рік тому
In part 5 of my UI/UX design crash course series we will cover aspects of design for various devices. Or more specifically 2 most popular approaches: Responsive and Adaptive Design. Get started with Figma for Free: psxid.figma.com/52h3iuj6s0bk This entire course playlist here: ua-cam.com/play/PLtZjSN7j6ANx8FTfx7dwk8ytlGlBC_yGg.html Disclamer: Some of the above are affiliate links-I make a small...
From Mundane to Marvellous: Mobile UI Design (Before & After 8)
Переглядів 16 тис.Рік тому
Today I’ve prepared for you an example of mobile app design screens that offer online courses. In Before & After series I’m reworking designs prepared by novice UX and UI designers with intention of improving them. Watching experienced designers reworking designs and providing feedback behind their decisions is one of the best ways of developing your own skills faster. Get started with Figma fo...
Layout
Переглядів 1,2 тис.Рік тому
Layout
Those Were Done by Experienced UI Designer!? (Before & After 7)
Переглядів 17 тис.Рік тому
Those Were Done by Experienced UI Designer!? (Before & After 7)
UI & UX Design Course: Navigation
Переглядів 3,1 тис.Рік тому
UI & UX Design Course: Navigation
Information Architecture
Переглядів 2,2 тис.Рік тому
Information Architecture
Laws of UX Design: Fitts’s Law
Переглядів 2,8 тис.Рік тому
Laws of UX Design: Fitts’s Law
Foundations
Переглядів 2 тис.Рік тому
Foundations
Take Your Mobile UI Design From Drab to Fab - Before & After 6!
Переглядів 13 тис.Рік тому
Take Your Mobile UI Design From Drab to Fab - Before & After 6!
Laws of UX Design: Miller's Law
Переглядів 1,9 тис.Рік тому
Laws of UX Design: Miller's Law
How to Change Your Career to UX Design if You’re not a Designer?
Переглядів 16 тис.Рік тому
How to Change Your Career to UX Design if You’re not a Designer?
Why Design Piracy Is The Best Way To Improve Your User Experience
Переглядів 817Рік тому
Why Design Piracy Is The Best Way To Improve Your User Experience
Practical Guide to Responsive Design
Переглядів 8 тис.Рік тому
Practical Guide to Responsive Design
Before & After 5: UX & UI Design - Take a Look!
Переглядів 4,3 тис.Рік тому
Before & After 5: UX & UI Design - Take a Look!
Figma Design System Basics: An Introduction (Part 1)
Переглядів 1,2 тис.2 роки тому
Figma Design System Basics: An Introduction (Part 1)
Responsive vs. Adaptive vs. Fluid Design: What's the Difference?
Переглядів 28 тис.2 роки тому
Responsive vs. Adaptive vs. Fluid Design: What's the Difference?
Before & After 4: UX & UI Design - See the Difference
Переглядів 7 тис.2 роки тому
Before & After 4: UX & UI Design - See the Difference
4 Most Popular Mistakes UI Designers Make and How to Avoid Them
Переглядів 4,1 тис.2 роки тому
4 Most Popular Mistakes UI Designers Make and How to Avoid Them
Dark Side of UX Design
Переглядів 1,3 тис.2 роки тому
Dark Side of UX Design
Design a Travel App in Figma: A Step-by-Step Tutorial
Переглядів 8 тис.2 роки тому
Design a Travel App in Figma: A Step-by-Step Tutorial
Before & After 3 - Advanced UI Design In Action
Переглядів 29 тис.2 роки тому
Before & After 3 - Advanced UI Design In Action
5 Helpful Tips for Using Color in UX Design
Переглядів 5 тис.2 роки тому
5 Helpful Tips for Using Color in UX Design
The Fastest Way To Design System
Переглядів 1,9 тис.2 роки тому
The Fastest Way To Design System
Usability Testing in UX Design Thinking Process
Переглядів 11 тис.2 роки тому
Usability Testing in UX Design Thinking Process
8 Essential Figma Tips and Tricks You've Been Missing Out
Переглядів 6532 роки тому
8 Essential Figma Tips and Tricks You've Been Missing Out

КОМЕНТАРІ

  • @ghazalekhanjanian3123
    @ghazalekhanjanian3123 День тому

    Do you recreate all the pages anew or is there an easier way to accelerate the process?🤔

    • @KerevDesign
      @KerevDesign День тому

      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.

    • @ghazalekhanjanian3123
      @ghazalekhanjanian3123 2 години тому

      @@KerevDesign Thanks for your reply. Where could I find the original file?

  • @JonneytheKidd
    @JonneytheKidd 12 днів тому

    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.

    • @KerevDesign
      @KerevDesign 10 днів тому

      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 :)

  • @sergio.arboleda
    @sergio.arboleda 12 днів тому

    Excellent information

  • @VinlandSagaSnake
    @VinlandSagaSnake 19 днів тому

    thanks bro

  • @saleema6308
    @saleema6308 23 дні тому

    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??

    • @KerevDesign
      @KerevDesign 18 днів тому

      I will put it on my list of topics to cover, can't promise when, bud definitely within 4 weeks.

  • @saleema6308
    @saleema6308 25 днів тому

    So this is adaptive design approach?

    • @KerevDesign
      @KerevDesign 24 дні тому

      Responsive, with adaptive you would created dedicated layout for each breakpoint/device.

  • @notyouraveragecomment1328
    @notyouraveragecomment1328 Місяць тому

    I love the poles 🇵🇱

    • @KerevDesign
      @KerevDesign Місяць тому

      Oh, thank you, greetings from...? :)

  • @notyouraveragecomment1328
    @notyouraveragecomment1328 Місяць тому

    Bro.. I did not EXPECT this video to be this GOOD.. like godamn, It’s always them small channels that do too much ❤❤

    • @KerevDesign
      @KerevDesign Місяць тому

      Well, I'm happy to hear that - I really recommend other videos from the series :)

  • @mohsinamir6073
    @mohsinamir6073 Місяць тому

    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

    • @KerevDesign
      @KerevDesign Місяць тому

      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.

  • @ChayonShaahOfficial
    @ChayonShaahOfficial Місяць тому

    In Design Thinking which phase I create IA and user flow site map, story board.. I m in confution

    • @KerevDesign
      @KerevDesign Місяць тому

      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.

  • @ChayonShaahOfficial
    @ChayonShaahOfficial Місяць тому

    Information architecture , User flow diagram can build in this phase or previous step Ideate

    • @KerevDesign
      @KerevDesign Місяць тому

      Again I would say either Ideation or Prototyping.

  • @ChayonShaahOfficial
    @ChayonShaahOfficial Місяць тому

    User flow diagram, information architecture in which phase of design thinking build?

    • @KerevDesign
      @KerevDesign Місяць тому

      I would say either Ideation or Prototyping.

  • @thandoblaque
    @thandoblaque Місяць тому

    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

    • @KerevDesign
      @KerevDesign Місяць тому

      You are right about the icon, now that I think of it, it could use some show/hide functionality - good catch!

  • @KerevDesign
    @KerevDesign Місяць тому

    I'm really sorry UIzard, but after some of your biased promotion videos and bold statements I had to :)

  • @sharonuja1683
    @sharonuja1683 2 місяці тому

    I thought that when you ssid practical guide that you would show how you converted a mobile responsive design to tablet and desktop

    • @KerevDesign
      @KerevDesign 2 місяці тому

      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.

  • @isaacgarcia2745
    @isaacgarcia2745 2 місяці тому

    What is the font used?

  • @diffuusio4852
    @diffuusio4852 2 місяці тому

    The first one is pretty brave without password confirmation

    • @KerevDesign
      @KerevDesign 2 місяці тому

      You are right! I totally didn't think about it :)

  • @coinred
    @coinred 2 місяці тому

    I really love your videos, help me a lot!

    • @KerevDesign
      @KerevDesign 2 місяці тому

      Thank you! And thank you for watching :)

  • @AnirudhMathur-le3hj
    @AnirudhMathur-le3hj 2 місяці тому

    How to cut and copy in figma?

    • @KerevDesign
      @KerevDesign 2 місяці тому

      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".

    • @AnirudhMathur-le3hj
      @AnirudhMathur-le3hj 2 місяці тому

      @@KerevDesign ok thnx

  • @or4n
    @or4n 2 місяці тому

    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.

    • @KerevDesign
      @KerevDesign 2 місяці тому

      As I said, this is my approach, your ideas are absolutely valid! There are at least couple of ways of doing it :)

  • @sergio.arboleda
    @sergio.arboleda 2 місяці тому

    Thank you

  • @sergio.arboleda
    @sergio.arboleda 2 місяці тому

    Thank you

  • @edenassos
    @edenassos 3 місяці тому

    Nothing about this is advanced. This is basics 101.

    • @KerevDesign
      @KerevDesign 3 місяці тому

      Well, some of the examples (eg 1 and 4) were prepared by "experienced" designers and they still contained a lot of, as you described "basic" errors :)

    • @Wang_KeD
      @Wang_KeD 2 місяці тому

      In your view, what do you see as advanced?

  • @roziewylie467
    @roziewylie467 3 місяці тому

    Very insightful, thank you.

    • @KerevDesign
      @KerevDesign 3 місяці тому

      I'm glad it was, thank you! :)

  • @marcuswilliam2852
    @marcuswilliam2852 3 місяці тому

    Amazing! Always learning from the best

    • @KerevDesign
      @KerevDesign 3 місяці тому

      I'm glad you think that, thank you! :)

  • @SzabatDesign
    @SzabatDesign 3 місяці тому

    Nice to see you Kerev :)

    • @KerevDesign
      @KerevDesign 3 місяці тому

      Nice to see you are still here :)

  • @KerevDesign
    @KerevDesign 3 місяці тому

    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 ;)

  • @jsagar95
    @jsagar95 3 місяці тому

    Thanks for this series on UI/UX!

    • @KerevDesign
      @KerevDesign 3 місяці тому

      Again, I'm glad you like it ;)

  • @jsagar95
    @jsagar95 3 місяці тому

    Thanks for this!

    • @KerevDesign
      @KerevDesign 3 місяці тому

      You're welcome, thank you for watching :)

  • @lazyinterface
    @lazyinterface 3 місяці тому

    To understand user behaviour I like to use hotjar

    • @KerevDesign
      @KerevDesign 3 місяці тому

      There are many great tools on the market, definitely more than when I was starting my journey in the field ;)

  • @lazyinterface
    @lazyinterface 3 місяці тому

    Yeah the colour is really important for readability

  • @GolderiQ
    @GolderiQ 4 місяці тому

    Which software is that?

  • @regwsx
    @regwsx 4 місяці тому

    no autolayout... hmm

    • @KerevDesign
      @KerevDesign 4 місяці тому

      Yes - on purpose, so even total beginners can follow it ;)

  • @regwsx
    @regwsx 4 місяці тому

    Removal of unnecessary elements... ...There's no need for dedicated buttons which would add a product to the shop cart I see bold moves, all caps

    • @KerevDesign
      @KerevDesign 4 місяці тому

      Well, normally it would be a subject of user testing ;)

  • @jsagar95
    @jsagar95 4 місяці тому

    Thanks!

  • @GoulDesign
    @GoulDesign 4 місяці тому

    Do you use Premier Pro to edit your videos? I love the animations!

    • @KerevDesign
      @KerevDesign 4 місяці тому

      Yes, as well as After Effects :)

  • @rosuchristian7013
    @rosuchristian7013 4 місяці тому

    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.

    • @KerevDesign
      @KerevDesign 4 місяці тому

      Thank you! I very much appreciate it, I hope to go back to the publishing soon, so you can expect even more ;)

  • @prathamchavan
    @prathamchavan 5 місяців тому

    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.

    • @KerevDesign
      @KerevDesign 4 місяці тому

      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 ;)

  • @maryamjs2821
    @maryamjs2821 5 місяців тому

    These series are so so helpful for me as a novice designer. I am really enjoying watching them, thank you so much, and please continue.

    • @KerevDesign
      @KerevDesign 5 місяців тому

      Thank you! I will, and very soon I will publish new video from the series.

  • @MyHarmony0_0
    @MyHarmony0_0 5 місяців тому

    I love the video, but I still do not understand why we do not prefere to add (Facebook) or (Google) icon at the first design, to be in one harmony ?

    • @KerevDesign
      @KerevDesign 5 місяців тому

      As I explained, there are many ways that you can do in order to improve the designs. I simply selected this one :)

    • @MyHarmony0_0
      @MyHarmony0_0 5 місяців тому

      @@KerevDesign oh cool, i loved your videos👏🏻👏🏻👏🏻👏🏻

  • @mahmoudzaki4477
    @mahmoudzaki4477 5 місяців тому

    can you please tell me how did you make a video to represent the mockups?

    • @KerevDesign
      @KerevDesign 5 місяців тому

      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 :)

    • @mahmoudzaki4477
      @mahmoudzaki4477 5 місяців тому

      thank you so much. I already meant the animations at the end. Can you share a tutorial with us to show our work as impressive as yours?🥰@@KerevDesign

  • @benjamingross6123
    @benjamingross6123 6 місяців тому

    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!

    • @KerevDesign
      @KerevDesign 5 місяців тому

      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.

  • @emmanuelmwangi3071
    @emmanuelmwangi3071 6 місяців тому

    How did u place ur design and prototype to that device been really trying but couldn’t figure out

    • @KerevDesign
      @KerevDesign 6 місяців тому

      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.

    • @emmanuelmwangi3071
      @emmanuelmwangi3071 6 місяців тому

      @@KerevDesign wow thanks I didn't even know there was a Figma app for IOS devices

  • @_icaruss__
    @_icaruss__ 6 місяців тому

    That add to Chart 😂

  • @katyasinti2314
    @katyasinti2314 6 місяців тому

    😂😂😂😂😂❤love it!

  • @stacy_isa
    @stacy_isa 6 місяців тому

    Thanks for the video. Small note: legibility, not readability:)

    • @KerevDesign
      @KerevDesign 6 місяців тому

      Thank you for the pointer :)

  • @54gulnara
    @54gulnara 6 місяців тому

    Thank you very much for such informative video))

    • @KerevDesign
      @KerevDesign 6 місяців тому

      Thank you for finding it useful!

  • @rosuchristian7013
    @rosuchristian7013 6 місяців тому

    I love the fact that you use examples for every point.

    • @KerevDesign
      @KerevDesign 6 місяців тому

      I was doing my best to show them, thank you!

  • @serajacob8278
    @serajacob8278 6 місяців тому

    Fact and interesting content 😊