Kole Jain
Kole Jain
  • 15
  • 81 263
Redesigning a Finance Dashboard UI from SCRATCH (ft. Dribbble)
Let's redesign a Dribbble finance dashboard go through the UI and UX problems, and hopefully make a better design in the process! Subscribe for more! (no hate to the original creator, they're very talented)
My Figma File
www.figma.com/design/LVfSgJ8DOboW9RNkjIyyl5/Untitled?node-id=0-1&t=QJYhTFYqRgU5hGrt-1
The OG design
dribbble.com/shots/23245345-Finance-Management-Dashboard
Переглядів: 28 589

Відео

Upgrading 9 CRUCIAL UI Elements (free figma file included)
Переглядів 9 тис.21 день тому
Buttons, stickers, navbars, footers, cards and so much more! We're covering it all in this video, redesigning and updating both the UI and UX of these elements. If you do want to grab all of these editable elements in figma for free, here is the link (just make a copy of the figma file!) www.figma.com/design/KzucYBIx2Bip488yUe9k49/UI-Elements-(Kole-Jain)?node-id=1-642&t=bSTInP3hvGstQqZw-1 If yo...
Mathematically Perfect Typography for Web Design
Переглядів 1,9 тис.Місяць тому
The real math starts at 7:07. Today we're looking into my fascination with having perfect typography on every single screen size from giant desktops all the way down to tiny mobile phones. We'll also cover the anatomy of a typeface, how to pair fonts, managing hierarchy, creating style guides with various font sizes, but most importantly my magic equation to have scaled text that is PERFECT on ...
Make ONE Design Change to Actually Land Clients (Stop Struggling)
Переглядів 661Місяць тому
Welcome to the channel! My name is Kole, and today we're covering the simple misconception that most designers have, that lead them to struggle to land clients. You've probably heard it before, 'you need to solve their problem', but in this video we'll break down exactly what that means, and how you can assure that you are solving their problem every single time. With this realization I was eas...
Awful To AMAZING Web Designs Easily
Переглядів 3,1 тис.2 місяці тому
Made a web design and it just feels...average? We'll go through several different ways to get your design looking AMAZING, and even tackle an example at the end with an old portfolio of mine. Some methods include changing up the layout, modifying the colour scheme, and even how to include interactive components. Thanks for watching! Here are links to all the websites referenced in the video: ko...
8 Web Design Hacks To ACTUALLY Make Your Designs Better
Переглядів 14 тис.2 місяці тому
Not all web designs are created equal, so today we're putting you a step ahead with 8 hacks that you can implement today, to instantly make your designs 10x better. We'll be covering some neat tips and tricks, along with some core principles of UI/UX design, and even some upcoming trends. Timestamps: 0:00 Intro 0:10 Hack 1 1:21 Hack 2 2:02 Hack 3 2:55 Hack 4 3: 42 Hack 5 4:45 Hack 6 5:30 Hack 7...
Advanced FIGMA Web Design Effects
Переглядів 1,2 тис.2 місяці тому
Today we're diving into not your average Figma design effects. We'll make use of blend modes, a variety of shadows and blurs to achieve what we want in this tutorial. If you're looking to add some pop to your next project (Or want to make one of those insane fintech Dribbble designs), then stick around! We'll be going in depth into 4 different effects, so even if you're a beginner to Figma and ...
How To Price Website Designs (With Specific Numbers)
Переглядів 7 тис.3 місяці тому
Figuring out how much you should price web design work, or really any creative work is really difficult! We're going through the 3 best ways to price a project based on your situation, experience, and the type of client you're working with. I'll also provide some rough benchmarks as to how long things generally take, so if you don't have any experience, this is for you! Make sure you get paid w...
Create A Portfolio With No Experience (or clients) Needed
Переглядів 7783 місяці тому
New to design? Here's how to create a portfolio capable of landing jobs and getting clients without any experience at all (hint: you gotta fake it til you make it). This is applicable whether you're a UI/UX, graphic, or logo designer, or really any other kind of creative. My aim is to show you that making realistic projects doesn't require an actual project!
Make A Perfect UX Case Study In 8 Steps
Переглядів 6133 місяці тому
We're tackling how to write professional and well structured UX case study for your portfolio! A well structured and thought out case study goes a long way to persuade companies or clients to give you a shot at being hired or working for them. We'll be diving into problem statements, presenting a solution, UX research, UI wireframing, affinity mapping and more in this tutorial. The link to the ...
Website Layouts To Make A Professional Website Design in 2024
Переглядів 13 тис.3 місяці тому
Web design is tough! So to make it a little easier, I've complied 9 website layouts that are trending in 2024, and can be used to create unique and professional websites for yourself or clients. These sections are entirely beginner friendly (except maybe #5), so if you're new to design, these are for you! Here are the times of each section 0:00 Intro 0:15 Section 1 1:12 Section 2 2:24 Section 3...
Figma Update: Everything In Under 2 Minutes
Переглядів 1233 місяці тому
We're breaking down all of the new changes to Figma that come with the Multi-edit update, all in under 2 minutes! With multi edit, you can now edit things the intuitive way, select like elements with the click of a button, and create and adjust auto layouts together! We're going to cover how to use the new multi edit button, and how to edit text at the same time. Then we'll dive into auto layou...
Professional Portfolio Breakdown - Why Is Theirs So Much Better?
Переглядів 2,1 тис.4 місяці тому
We're dissecting professional design portfolios, and exactly what they do in order to create more engaging and creative portfolios that land them clients. From common layouts, to their messaging, these portfolios have similarities that make them perform much better! If you enjoyed the video, like and subscribe for more!
Developing Premium Load animations (HTML, CSS & JS): Part 2
Переглядів 2684 місяці тому
This is part 2 of us going from figma prototyping, to fully developed load animations to wow clients! We'll use HTML, CSS and Javascript to get the job done, with the GSAP library to help with animations!
Prototyping Professional Load Animations in Figma: Part 1
Переглядів 3724 місяці тому
Free Figma file down here!👇 We're taking a look at 3 pro loading animations that we'll be building out in Figma this video. In part 2 well developing it in VS Code with HTML, CSS and JS to turn them into a reality. We'll be making use of Figma's smart animate prototyping function, as well as the GSAP animation library to get the job done (in part 2)! Here is the link to the Figma file with both...

КОМЕНТАРІ

  • @StephenRayner
    @StephenRayner 3 години тому

    First video I’ve seen on your channel. Very impressive 🎉 subbed

  • @mrrrksmith
    @mrrrksmith 11 годин тому

    Bro did a great job. At least because he turned his brain on. I can't stand most of the works on dribble and behance because the guys there don't think at all about the functionality of using interfaces. They're basically drawing pictures rather than well thought out ui/ux.

  • @FloNocode
    @FloNocode 15 годин тому

    Really a real video with awesome value ! Thank youw

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

    Do you have a community? Maybe Discord

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

    Subscribing and sharing this video to as many designers as possible

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

    what colum setting did u use

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

    hey just saw ur content was great wanted to just say this was very educational and thank you

  • @kxhu
    @kxhu 2 дні тому

    to be honest the original one looked too compacted and overwhelming compared to your redesign

  • @welling1
    @welling1 2 дні тому

    Edward Tufte: “the only thing worse than a pie chart is several of them.” at least you didn't make more than one....

  • @IGOL
    @IGOL 3 дні тому

    Wow, great job

  • @diggin8741
    @diggin8741 3 дні тому

    Broo try to be a little less frenetic hahahah lol it's too much information, i don't care if the video has 25min, I'll will watch anyways for the content quality ❤😂

  • @Monterazo1000
    @Monterazo1000 3 дні тому

    You are already my favorite design UA-camr! Your content is really straightforward and easy to understand

  • @janroest2009
    @janroest2009 3 дні тому

    Holy sh*t that is a nice video. Loved it. 🙏🏻

  • @gameranters
    @gameranters 4 дні тому

    The developer for this design would be sweating bullets trying to make all these changes.

  • @ProductMisha
    @ProductMisha 4 дні тому

    Best video I have seen in years. Instant SUB

  • @sanjeevstunner
    @sanjeevstunner 5 днів тому

    I see true peotential in you man, IDK why you're underrated AF tho. Really love your content

  • @BlackVatra
    @BlackVatra 5 днів тому

    The entire Dribbble is just cool looking design, with not a bunch of real UX designers

  • @simbamadungwe
    @simbamadungwe 5 днів тому

    Hi, you a great designer I love the way you think and organise staff

  • @amine_wj
    @amine_wj 5 днів тому

    Nice video 👌🏼

  • @alfredosmith6107
    @alfredosmith6107 5 днів тому

    Underrated. ❤

  • @AllHandsOnEveryThing
    @AllHandsOnEveryThing 5 днів тому

    what do you use for animations? that was nice!

  • @Sam-y6u
    @Sam-y6u 6 днів тому

    1500 to 3500 gj broski

  • @arjix8738
    @arjix8738 6 днів тому

    Bro does not know what a debit card is 💀

  • @freefootagepwt1317
    @freefootagepwt1317 6 днів тому

    wow niceee

  • @NiroshMadhusanka-nft
    @NiroshMadhusanka-nft 6 днів тому

    You've got a subscriber with just this video. 🎉🎉🎉 By the way, if you can show us some grid options for dashboard designs, it would be great. Thanks.

  • @UniStudioTV
    @UniStudioTV 6 днів тому

    I rarely subscribe to a channel or leave a comment, but your method of explanation really made me complete the video without feeling the time, and I benefited a lot from the method of making logical decisions.

  • @Zorrle001
    @Zorrle001 6 днів тому

    i dont like your main font, it looks so cracked and not symetrical like its buggy and realy random. It breaks the design! Terrible!

  • @th1lo157
    @th1lo157 7 днів тому

    nice video, good explanations. Dashboards serve as entry points, guiding users quickly to their desired information. This requires a structured and consistent design to enhance readability and scannability. To achieve this: - Limit typography styles (size, weight, colors) to about 4 variations. - Reduce card complexity by simplifying content. - Implement a maximum of 2 interactions or functions per card. - Use cards as gateways to more detailed subpages. This approach prioritizes clarity and ease of navigation, allowing users to efficiently locate and access relevant information. also try using less boxes in boxes, they mess with grid / view alignments and therefore make the page less scannable and you loose a lot of space that could maybe fit in another tile / card. thinking about it the background could be with that light red and the boxes white for enogh contrast for the texts then you can just get rid of all the boxes in those cards. ✌🏼

  • @kermitec
    @kermitec 7 днів тому

    One suggestion: build your Figma designs using auto layout. This approach allows you to manage design elements as a group rather than individually scattered across the project. It also ensures that spacing, margins, and padding are correct. But overall great exercise.

  • @Neutrino-xw6jl
    @Neutrino-xw6jl 7 днів тому

    What a great video, the editing is also amazing

  • @sadique_x_
    @sadique_x_ 7 днів тому

    what's the name of the fonts being used?

  • @JWCat757
    @JWCat757 7 днів тому

    Thank you for sharing your process. As an aspiring designer, I find this super helpful!

  • @MrTalhakhan01
    @MrTalhakhan01 7 днів тому

    Awesome work. Just one question. Do you think there is way less contrast in UI elements that it will be a problem differentiating different sections?

  • @jerinjimmy6386
    @jerinjimmy6386 7 днів тому

    1 minute of silence for the developers who are gonna develop this!

  • @zaudiko
    @zaudiko 7 днів тому

    Looks what i found! a great UI UX Channel

  • @OJGamingYT
    @OJGamingYT 7 днів тому

    1500 subs? 3 days later and you have 2.7K love this man! Keep it up.

  • @farhan-app
    @farhan-app 7 днів тому

    Video request: how to animate some of these components!

  • @farhan-app
    @farhan-app 7 днів тому

    Please please do more of these!!!

  • @farhan-app
    @farhan-app 7 днів тому

    2 minutes in and I'm impressed. Subscribed. Please do more of these no-fluff vids :)

  • @iTzBoosTerZx
    @iTzBoosTerZx 8 днів тому

    instant subscribe, amazing video!

  • @AmjadKhan-rz6nu
    @AmjadKhan-rz6nu 8 днів тому

    You deserve 1 million for now 🎉

  • @naveenpandey8093
    @naveenpandey8093 8 днів тому

    Can you help me with my dashboard design.Please and make a video for it too

  • @PhilippChumak
    @PhilippChumak 8 днів тому

    I would love to see more redesigns on your channel

  • @PhilippChumak
    @PhilippChumak 8 днів тому

    Well done

  • @SandeshKanawade-tj7ns
    @SandeshKanawade-tj7ns 8 днів тому

    Why this man have only 2.63k subscribers, this content deserves millions subscribers.❤

  • @aryanmadan
    @aryanmadan 8 днів тому

    good job!!!

  • @jackjameson6826
    @jackjameson6826 8 днів тому

    nooooo, not a fucking sidebar dashboard again 🤦‍♂

  • @theloff222
    @theloff222 8 днів тому

    Love your content!

  • @AmjadKhan-rz6nu
    @AmjadKhan-rz6nu 8 днів тому

    Amazing

  • @Mariamadk
    @Mariamadk 8 днів тому

    Thankyouuu Loved the presentation and discussion of the old ui. Please make more of this, it helped me understand how to arrange my thoughts. Would love also to know more of how you used the color palette?! How did you set the colors and distribute them. It’ll truly need to understand i. this it’s urgent!😅 Thank you again.