Full Figma Course: Design a Job Website Start to Finish

Sdílet
Vložit
  • čas přidán 9. 07. 2024
  • Free course learning Web Design in Figma from start to finish. Join me in this free course compiled from a recent live stream series all about designing a freelance job website in Figma ... Remember to Subscribe goo.gl/6vCw64
    🏆 //////////// Join my members community to get access to perks:
    You can get this starting and ending design file
    designchamps.io/
    ------------------------------------------------------------------------------------
    🤝 //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship
    www.jesseshowalter.com/
    👋 ////////// Follow me on Social
    Instagram: / imjesseshow
    Twitter: / imjesseshow
    📫 ////////// Sign up for my Monthly Newsletter
    www.jesseshowalter.com/newsletter
    ------------------------------------------------------------------------------------
    🖥️ ////////// I build most of my websites using Webflow
    webflow.grsm.io/4495884
    🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: fm.pxf.io/c/1372011/1347628/1...
    📸 ////////// The Equipment I use
    www.amazon.com/shop/jesseshow...
    00:00:00 Introduction
    00:03:12 Setup your workspace
    00:07:11 Research
    00:17:28 Content Needs
    00:30:55 Wireframing
    00:59:23 Mood board
    01:25:58 Style Tile
    02:10:48 Visual Design
    02:14:13 Grids
    02:18:40 Hero
    02:57:51 Style and Sections
    03:11:40 Success Stories
    03:19:30 Alternating sections
    03:43:19 Polishing
    03:48:00 More Cards
    03:58:27 Marketing section

Komentáře • 133

  • @BrewskaySA
    @BrewskaySA Před 11 měsíci +3

    I like the fact that Jesse started with simple questions and terms.I find that I tend to over-complicate things when I start thinking about design requirements. It seems like using just words like social proof and categories can allow you to stay focused on the idea rather than going too deep too soon.

  • @user-ln4qz4vu3g
    @user-ln4qz4vu3g Před 2 měsíci +2

    This guy is a gem.
    Not only he is a top designer and educator but he is funny also.
    Make more vids like this Jesse, it will be good for us and even better for you.

  • @banisan2035
    @banisan2035 Před 11 měsíci +12

    I think for me the key takeaway from this is the importance of REFERENCES! Just like in art, ui designs don't just pop out of nowhere from your mind. Sure, if you're REALLY experienced, you probably have a tonne of tried and tested concepts already neatly saved in memory. But especially for newbies (like me), going out there and searching for references to inspire you seems so, so important.

  • @prashlovessamosa
    @prashlovessamosa Před rokem +50

    Bruh what can I say you're providing stuff like this for free respect+++

  • @ashleyguza
    @ashleyguza Před rokem +2

    Just logged back into Milanote to create along with you and immediately an overlay popped up saying, "New feature: Zoom in and out of boards".... Oddly enough it came minutes after you asked in your video, "does anyone know how to zoom in and out" lol you're the real MVP and it's great their product team is keeping up with things like this!

  • @mindfulmilligan
    @mindfulmilligan Před 6 měsíci +14

    Jesse said “here’s literally a university- level course on an industry standard tool along with my professional workflow to make incredible UX designs. Price…
    Free.”
    Grateful ❤️

  • @pushkarbansal1926
    @pushkarbansal1926 Před 11 měsíci +5

    This was great. As a designer, I think this video has a lot to learn and you will definitely come as better designer after this, like I did

  • @marshelblackmon984
    @marshelblackmon984 Před 10 měsíci +11

    OMG, I'm at work but I freaking saved this so I can come back and watch it in entirety. I can't wait. Man Thank youuuu for this!

    • @JesseShowalter
      @JesseShowalter  Před 10 měsíci +1

      If you want more check out my new UI program 30dayui.com/

  • @creatoratplay
    @creatoratplay Před 11 měsíci

    This was super helpful; thank you!!! Perfect timing too!!

  • @henrythomas7112
    @henrythomas7112 Před 3 měsíci

    Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!

  • @NikaDomi
    @NikaDomi Před rokem

    Amaaaaazing stuff ! thank you so much for sharing 🙌

  • @codyr2318
    @codyr2318 Před 7 měsíci

    I learned a lot from watching how you scour the web to find and pull from inspiration!

  • @uxui.rachelcanlas
    @uxui.rachelcanlas Před rokem +3

    Thank you Jesse. You're an amazing human, designer and teacher!

  • @bmehul30
    @bmehul30 Před 6 měsíci

    Wow! I learnt so many new things while watching this video.
    Thank you for making it free for everyone. Really appreciate your effort.

  • @ulianabilenkiy5294
    @ulianabilenkiy5294 Před rokem +2

    Jesse, thank you for the amazing content you make! You are fantastic!

  • @ahmed8asim
    @ahmed8asim Před rokem

    You're super creative, thanks a lot!

  • @afrazakbar594
    @afrazakbar594 Před 11 měsíci +1

    Jessi great confidence booster session for beginners thank you

  • @katysalazar1702
    @katysalazar1702 Před rokem

    Love this videos!

  • @jayshreesingh4722
    @jayshreesingh4722 Před 5 měsíci

    I am so grateful for this video, i'm just 10 mins in and this has already been really helpful! you've made the whole design process so easy and efficient, i usually get stuck in my own head and waste a lot of time, and i'm sure i'll be following your workflow in all of my future projects. LOTS OF LOVE FROM INDIA :)

  • @amirhans1004
    @amirhans1004 Před rokem +1

    Really really great course! Thank you!
    I learned a lot about the process thanks to you!
    You also explain in a very simple and understandable way.
    Do you also have lessons on building a smart phone application in Pigma?

  • @paranoidkisilik4866
    @paranoidkisilik4866 Před rokem

    such an inspirational session, thanks mate :)

  • @des7638
    @des7638 Před rokem

    awesome thank you so much, Jessie

  • @yogapratama181
    @yogapratama181 Před rokem

    thankyou jesse, it is help me for improve my skills

  • @enyasanchezz
    @enyasanchezz Před 2 měsíci

    This helped me a lot to optimize my time, great tips, thank you!!🤩

  • @user-bf3bn5io5t
    @user-bf3bn5io5t Před 11 měsíci

    Great video thanks!

  • @jelenakorac1421
    @jelenakorac1421 Před rokem

    Thank you! ❤

  • @desmondchukwudiezuluebo7185

    Thanks Jesse, really needed this.

  • @manjurbillah
    @manjurbillah Před 11 měsíci

    I just love it😘😘

  • @Louisebova
    @Louisebova Před rokem +1

    Thank you for your generosity! This is incredibly helpful! I have a question- can you use Figjam the same way as Milanote? If so why use 2 different apps?

  • @realitybeckons4120
    @realitybeckons4120 Před 11 měsíci

    Great great great. Thank you

  • @astha5381
    @astha5381 Před rokem +1

    very helpful session. thanks Jeesee

  • @Sebastian-zs8cp
    @Sebastian-zs8cp Před rokem +1

    Hi, do you show the client the gray wireframe or the finish wireframe?

  • @Nobody7011-i6h
    @Nobody7011-i6h Před měsícem

    I tryna make my first design aside copy and paste, and this is really helpful
    I just hope i complete the task
    Thank you so much

  • @RaufunNur
    @RaufunNur Před rokem +23

    It was a great session , we want more sessions like this, just awesome 😎

  • @mettywork2860
    @mettywork2860 Před 10 měsíci +1

    Am so lucky to see this video.. thank you so much jesse

    • @JesseShowalter
      @JesseShowalter  Před 10 měsíci

      Consider checking out my new 30 day UI course 30dayui.com/

  • @choyondas7732
    @choyondas7732 Před 5 měsíci

    Thank you for awesome video 💥💫

  • @ma-kv5xx
    @ma-kv5xx Před 10 měsíci +1

    I learned a lot from this video, thank you✨

    • @JesseShowalter
      @JesseShowalter  Před 10 měsíci

      If you want more in depth check out my new 30 day UI course 30dayui.com/

  • @deshpremkumarnayak5939
    @deshpremkumarnayak5939 Před rokem +1

    so helpful

  • @mayankgupta9841
    @mayankgupta9841 Před rokem +1

    Bro This Video was soo fuckin crazyy!!!! Very much neededdd this raw insights video!!
    Thanks a lot, Keep it Up ! ❤🙌

  • @zengamez
    @zengamez Před rokem

    Jesse, you're a gigachad!

  • @malinirao
    @malinirao Před rokem +2

    Jesse is the bessttt!!

  • @elena-hf1yj
    @elena-hf1yj Před 3 měsíci

    Thank you so much, I learned a lot from this course.

    • @lastspoil5547
      @lastspoil5547 Před 2 měsíci

      did you finish it? do it teach everything you need to know to make an website

  • @oleh5112
    @oleh5112 Před rokem +2

    Thank you friend. This is a very cool video. I was in awesome of your work with components and card making. Now a new video to run this page design from Figma to Webflow)))

  • @jirowang110
    @jirowang110 Před 8 měsíci

    Great video! Thakn you so much for allowing all of us to view this on CZcams. Just wondering though for references, what if you're asked to design something fairly new. There's no complete site reference you can use and you can't think of a site that uses the design style that you might need. What do you do then? How do you start your research? This has been the most difficult part for me tbh. Thank you

  • @beyondandback
    @beyondandback Před rokem +1

    God bless you and thank you so much ❤

  • @SuperMatthias1991
    @SuperMatthias1991 Před 9 měsíci

    Really nice video! @JesseShwalter
    You mentioned that you created the Library in one of the first videos. Are you able to link it here as I would like to create my own Library / Design system. Would be much appreciated!

  • @r3dp1ll
    @r3dp1ll Před rokem +2

    Thanks for your service Jesse. I was wondering, aren't we supposed to do the moodboard before the wireframing ?

    • @pushkarbansal1926
      @pushkarbansal1926 Před 11 měsíci +2

      well i think main purpose of moodboard is to get inspiration for display content in various sections of website, so we did wirframing first, so that we have a basic idea about sections and content of website, which can obviously be modified

  • @farouqajao9388
    @farouqajao9388 Před rokem

    thank youuuuuuuu

  • @gegoestrategiasdigitais3094
    @gegoestrategiasdigitais3094 Před 5 měsíci

    obrigado, mate!

  • @saqibshaukat186
    @saqibshaukat186 Před 7 měsíci

    Great.. brother please more video upload 👍

  • @Youiii67
    @Youiii67 Před 6 měsíci

    Amazinggggggggggggggggggggggggg
    ❤❤❤❤❤❤

  • @fernwehtwl
    @fernwehtwl Před rokem +2

    I paid $50 for a landing page course last week from another designer . Damn and now this is free

  • @gambomaster
    @gambomaster Před rokem +1

    Thanks. 🙏

  • @bryanhije4136
    @bryanhije4136 Před rokem

    How to find competitive set for construction company?

  • @soratuts
    @soratuts Před 8 měsíci

    Where can i find that moodboard for ideas?

  • @coatt.official
    @coatt.official Před rokem

    I can't thank you enough... on this day I commented with 0 subs the next time i return it will be a million

  • @user-tp2nc9so4u
    @user-tp2nc9so4u Před 9 měsíci +1

    Thank you ❤

  • @geethairu7596
    @geethairu7596 Před rokem

    Watching this from Nairobi , Kenya and this is actually a really solid walkthrough Jesse . Is there anyway for you to explain the box model using this and maybe make a video from Figma to Webflow ? Thanks

    • @r3dp1ll
      @r3dp1ll Před rokem

      Figma to Webflow, he did one.

  • @erinskymaple9883
    @erinskymaple9883 Před rokem +1

    Wow I just discovered your channel! You’re amazing ! What professional and approachable content! I’m a visual artist, I’m trying to redo a website. I built it using html originally years ago, and linked flat files from photoshop 🙄 I’m no whizz but could figure out at least that much, now I want to rehaul and use a template I can still customize but id like a landing page with rollover images as hyperlinks and a couple animated elements. What program would I use to do this or would this be a quick job for someone on some of the platforms you mentioned , if I provided all the image files? I have a tendency to go down rabbit holes and bite off more than I can chew (Ie music recording, production, video editing etc.)… but I still don’t know basic stuff like file management 🙄🤣) Thanks for all the inspiration!!

    • @r3dp1ll
      @r3dp1ll Před rokem

      Webflow, Squarespace, Weebly ... You can select a theme and you basically add / customize blocks

  • @Sebastian-zs8cp
    @Sebastian-zs8cp Před rokem

    Hey where is the pay curs?There is a lot missing

  • @hidebird1
    @hidebird1 Před rokem +1

    Great job Jesse .. Egyptian fan

  • @nanangandrianto8836
    @nanangandrianto8836 Před rokem

    thanks for your content, its amazing
    because i watch later, and i can finish full video, for making refrence my portofolio

  • @amarachiamah-pm2zt
    @amarachiamah-pm2zt Před 8 měsíci

    pls how can i create a desktop view blank page as long as this on figm

  • @user-jz1ks4sz3n
    @user-jz1ks4sz3n Před 8 měsíci

    great

  • @fareed_adam
    @fareed_adam Před 4 měsíci +1

    Watched the whole 4 hours straight! Didn't feel the time even I noticed your clothes was changing lol

  • @abdalaluis2
    @abdalaluis2 Před rokem

    I like that stay in that vein, just keep digging

  • @minidragonlady
    @minidragonlady Před 12 dny

    How would a developer then convert this to tailwind css code?
    That has always been my question, because we might convert 1-1 from figma to pure css, but tailwind is another thing (different with the spacing and all etc..)

  • @Sebastian-zs8cp
    @Sebastian-zs8cp Před rokem

    By the way, Figma has a wireframing tool in jam.

  • @danofcalifornia1043
    @danofcalifornia1043 Před rokem

    At the beginning Jesse is using Milinote, not miro

  • @anyamabenard-gf4dd
    @anyamabenard-gf4dd Před 3 měsíci +1

    Great

  • @patrickaaron9555
    @patrickaaron9555 Před 11 měsíci

    hey sir do you have the design file from this video? 😅

  • @sircasino614
    @sircasino614 Před 4 měsíci

    29:50 ....where is this tool?

  • @amitasaha3497
    @amitasaha3497 Před rokem +1

    1st

  • @infiniteproduction2986

    any one please specify the tool that used in the video like a pencil

    • @kristianpersson2314
      @kristianpersson2314 Před rokem

      I believe that the tool you are looking for is "FigJam"' (It can be found inside of Figma)

  • @lalehbagheri5306
    @lalehbagheri5306 Před 24 dny

    Is it too late to learn and work as a UX ui designer? Is there a job available in this field?

  • @abdulwasay8582
    @abdulwasay8582 Před 6 měsíci

    this is really helpful, I appreciate if you could share the discord

  • @akhenatontubba9950
    @akhenatontubba9950 Před rokem

    Lütfen videonuza altyazı ekleyin.Bu şekilde otomatik çeviri seçeneği ile Türkçe yaparak videolarınızı anlayabiliriz😅

  • @rahim_2005
    @rahim_2005 Před 9 měsíci +1

    Plz make video on full 10 page advance app design with prototype

    • @JesseShowalter
      @JesseShowalter  Před 9 měsíci

      You would like my new course launching soon 30dayui.com/

  • @harunjonuzi
    @harunjonuzi Před 8 měsíci

    Can i get this file please? as I am unable to pay for the club in order to get it q_q

  • @itamahpromise5285
    @itamahpromise5285 Před 11 měsíci

    How can i like this twice

  • @orostu1453
    @orostu1453 Před rokem

    Why everybody says we should use Frames instead of Rectangles, I am new into this and want to know the difference

    • @pushkarbansal1926
      @pushkarbansal1926 Před 11 měsíci

      you can add layout to your frame, set the direction of items within the frame, margin an padding between them and lot more

    • @orostu1453
      @orostu1453 Před 11 měsíci

      @@pushkarbansal1926 thanks a lot

  • @koushiknath8700
    @koushiknath8700 Před 4 měsíci +1

    I need this practice file

  • @lastspoil5547
    @lastspoil5547 Před 3 měsíci +2

    Hey im a web developer. Im still learning. Is this course all we need to do web design work? I also plan on learning all the AI tools too

    • @JesseShowalter
      @JesseShowalter  Před 3 měsíci +1

      You need as much as you decide to start designing

    • @lastspoil5547
      @lastspoil5547 Před 3 měsíci

      @@JesseShowalter your reply doesn't make sense to me. is this course enough to master Figma design?

    • @lastspoil5547
      @lastspoil5547 Před 3 měsíci +1

      @@JesseShowalter oh now I get it, it was too early in the morning 😂

  • @lastspoil5547
    @lastspoil5547 Před 2 měsíci

    Is this a UI/UX course?

  • @cellestialplayground
    @cellestialplayground Před 9 měsíci +1

    Who else thinks he is Jaskier from The Witcher

  • @noacatherina
    @noacatherina Před rokem +1

    side note - you sounds like john mayer hahaha

  • @brinibecem5857
    @brinibecem5857 Před rokem

    discord channel please !!

  • @5959x3r_
    @5959x3r_ Před 2 měsíci

    add subtitles 😢

  • @mcgungtominay
    @mcgungtominay Před 7 měsíci

    Bruh, can I get your figma file? 💃😀

  • @JustinWardDesign
    @JustinWardDesign Před 10 měsíci

    Am I a complete boomer or just a dummy? I can never see the details on the person's screen as they're showing us. I don't have bad vision either. How does everyone see everything they're showing? Can you zoom in on videos or something?

  • @TheAhmedAdel
    @TheAhmedAdel Před 7 měsíci

    Mila note not Miro XD

  • @christopheranthony6706
    @christopheranthony6706 Před 7 měsíci

    You're adorable. I hope you have a husband that appreciates you.

  • @hossainalazad2686
    @hossainalazad2686 Před rokem

    You rock man!

  • @kunalpriyadarshi191
    @kunalpriyadarshi191 Před 3 měsíci +1

    Top notch dude

    • @JesseShowalter
      @JesseShowalter  Před 3 měsíci

      If you like this you’d love my full UI course www.30dayui.com/

  • @den9284
    @den9284 Před rokem +1

    Thanks you so much. It's gold knowledge 🫀

  • @henrythomas7112
    @henrythomas7112 Před 3 měsíci +1

    Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!

    • @JesseShowalter
      @JesseShowalter  Před 3 měsíci

      Thanks for the support, if you want to learn more from me check out www.30dayui.com/