How to Design a Website - A UX Wireframe Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ธ.ค. 2024

ความคิดเห็น • 247

  • @Decentralized_Maze
    @Decentralized_Maze 4 ปีที่แล้ว +32

    You know exactly what projects I'm on, perfect timing!! Thank you for educating those wanting to develop skills and make progress. 🔧

  • @hannahabegail6313
    @hannahabegail6313 3 ปีที่แล้ว +18

    You literally fix everything bothering me about what to do with my website. Thanks man!

  • @sriram-zn3ic
    @sriram-zn3ic 4 ปีที่แล้ว +22

    He is so calm I rarely see people like this. I saw people who's voice reduces and bored at teaching but he is awesome👍. Excellent work I got a great use from u thank you.

    • @AdrianTwarog
      @AdrianTwarog 4 ปีที่แล้ว +3

      :D yeah I love dev and design, so hope that passion comes across!

  • @thebuildguy7
    @thebuildguy7 4 ปีที่แล้ว +8

    Everyone has something to learn from this video. Thank you Adrian and FCC. 🖤

  • @briansmith231
    @briansmith231 2 ปีที่แล้ว +3

    Terrific Introduction and explanation of wireframing, no waffle and straight to the point, really enjoyed this. Super video. thank you

  • @OlukayodeOlabanji
    @OlukayodeOlabanji ปีที่แล้ว

    Thanks Adrian, I owe my first understanding of wireframing to you through this tutorial.

  • @charuduttachaudhari7644
    @charuduttachaudhari7644 4 ปีที่แล้ว +19

    Thanks for this video.... actually for every single video you guys put because you literally uploaded full tutorials just for free ✨✨
    which has really helped me learn a lot of skills 😁
    ❤️❤️

    • @AdrianTwarog
      @AdrianTwarog 4 ปีที่แล้ว +1

      thanks for the kind words!

  • @g0thman865
    @g0thman865 4 ปีที่แล้ว +1

    I really like this concept of you narrating what's happening, and the wireframing has already happened and we just see it unfolding.
    A very good concept to keep the videos short.

  • @claudiameneghesso1843
    @claudiameneghesso1843 4 ปีที่แล้ว +11

    Nice, simple, clear! Perfect for a beginner like me! Thanks Adrian

  • @cruzchaps3662
    @cruzchaps3662 4 ปีที่แล้ว +293

    When his wireframe is more impressive than your final design
    Me : *cries in html and csss*

    • @rinokumura2855
      @rinokumura2855 4 ปีที่แล้ว +4

      You made me laugh, thank you 😂😂

    • @JBGIBSON
      @JBGIBSON 4 ปีที่แล้ว +2

      LOL!

    • @DanielCruz-se3bf
      @DanielCruz-se3bf 3 ปีที่แล้ว +1

      Damn bro that hits hard

    • @wonli1960
      @wonli1960 3 ปีที่แล้ว +1

      LOL !

  • @StrangeIndeed
    @StrangeIndeed 4 ปีที่แล้ว +7

    I love your teaching style. Also, rewind in the outro was a nice touch c:

  • @henrythomas7112
    @henrythomas7112 8 หลายเดือนก่อน

    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!

  • @troys1426
    @troys1426 4 ปีที่แล้ว +1

    Woooooosh really looking for these for 2 months... thanks! I was trying to analyze Wix’s Home Page design with my brother, but now... yay!

  • @stephanieczetli7325
    @stephanieczetli7325 4 ปีที่แล้ว +7

    Hey Adrian! Great walk through of wireframing. Loved seeing your thought process & step-by-step as you worked through the complete design including responsive for mobile/tablet. I thought you spoke clearly & at a good speed for listeners. Thank you for such a nice presentation!

  • @swibay
    @swibay 3 ปีที่แล้ว +9

    Perfect tutorial! I am a full-stack (VueJs & Golang) developer who always gets depressed when comes to the design part especially what to put and how to layout(I always find myself spending tons of time on the color palette and searching for best designs to see how they did in their websites which is very confusing if you don't why they did so)...and what is the best convention! Thanks so much Adrian looking forward for more beautiful videos like this! Much love from Tanzania!

    • @iftekharulhaque2697
      @iftekharulhaque2697 2 ปีที่แล้ว

      why don't you study ux design? i am a ux design student, in my course i am learning about how to conduct research, make wireframes and prototypes and then how to test those things, it is a broad subject, since you are a developer knowing basic ux design will definitely help you in visualizing products, there is a course by google on coursera right now, when i first thought about making apps and websites, i had no idea the amount of work that has to be put in the designing phase, the course i am doing is divided into seven parts, i am about half done, as i progress i am learning lots of techniques used by professionals, after i finish this course i am hoping to earn some money by doing design work, then afterwards i plan to learn coding as well, i actually wanted to do coding at first, then i realized how important designing is, without a good design i feel there is no point in coding, so i plan to learn everything from start to finish, first how to create a good design and then how to use that design to make something useful.

  • @HansMcMurdy
    @HansMcMurdy 4 ปีที่แล้ว +17

    You also do mockups in vscode via the drawio extension.

    • @AdrianTwarog
      @AdrianTwarog 4 ปีที่แล้ว +2

      I have to check this out

  • @devasishkumarbadaik4697
    @devasishkumarbadaik4697 2 ปีที่แล้ว

    Your framing ux depicts everything.

  • @whyredvince
    @whyredvince 4 ปีที่แล้ว +42

    was literally searching for something like this when notification came 🔥🔥

  • @angelileonor2050
    @angelileonor2050 3 ปีที่แล้ว +1

    Brilliant teaching, thank you for this, it helps me to understand more of the functionality of the website navigation and everything I need to know to finish my website. thanks a lot.❤

  • @karansmittal
    @karansmittal 4 ปีที่แล้ว +2

    Amazing Tutorial. Thanks for sharing this amazing approach to develop UI/UX Wireframes. It can save a lot of time for frontend developers and developers like me who don't have that good design skills.
    Thankyou

  • @omniversal4739
    @omniversal4739 4 ปีที่แล้ว +1

    Thanks. I often need to make blueprints for my clients, so I found this video quite helpful.

  • @F250eh
    @F250eh 3 ปีที่แล้ว

    Dude, this is amazing! Thank you for posting this

  • @EngineerDJ_Julius
    @EngineerDJ_Julius 4 ปีที่แล้ว +19

    There we go! That's what I'm talking about!

  • @Koyi_supremacist
    @Koyi_supremacist 4 ปีที่แล้ว +3

    freeCodeCamp is beast

  • @akemimeka_
    @akemimeka_ 4 ปีที่แล้ว +2

    Adrian, you have a lovely personality and accent! Thanks for this tutorial, it was very useful for me. I'd love to see more videos about UI and how to make choices regarding web design. Thanks a lot!

  • @alinanaeem6003
    @alinanaeem6003 2 ปีที่แล้ว +1

    This was so helpful for a beginner like me 👏

  • @5ive-t5
    @5ive-t5 29 วันที่ผ่านมา

    Thanks! Great video I had fun watching it!!

  • @benigal5649
    @benigal5649 3 ปีที่แล้ว

    Really appreciate this tutorial. Very clear and informative content. Thank you very much!

  • @miguelbedoya3013
    @miguelbedoya3013 2 ปีที่แล้ว

    Great and concise explanation, thank a million.

  • @dhirajkumarchaudhary9642
    @dhirajkumarchaudhary9642 3 ปีที่แล้ว

    Amazing...I like the way he explains things

  • @tsarodavid9730
    @tsarodavid9730 ปีที่แล้ว

    Simple and straight. Thank you

  • @sofyasaharani1760
    @sofyasaharani1760 3 ปีที่แล้ว

    thank you,i can learn many more because you

  • @vibhutiarya2501
    @vibhutiarya2501 2 ปีที่แล้ว

    very nice, easy to understand video

  • @shashankagarwal2214
    @shashankagarwal2214 4 ปีที่แล้ว +1

    Ek hi dil hai kitni baar jeetoge ❤️

    • @raushonmunni2633
      @raushonmunni2633 4 ปีที่แล้ว +1

      freecodecamp helps me so much by the way i dont think anyone understood what you said haha

    • @shashankagarwal2214
      @shashankagarwal2214 4 ปีที่แล้ว

      It's just come from heart so i use my native language 😂

    • @shashankagarwal2214
      @shashankagarwal2214 4 ปีที่แล้ว

      @@raushonmunni2633 absolutely true freecodecamp helps millions of tech enthusiastic

    • @raushonmunni2633
      @raushonmunni2633 4 ปีที่แล้ว

      @@shashankagarwal2214 Of course my friend they help kids like me in 6th grade learn my favourite things like codeing

    • @aqua6150
      @aqua6150 4 ปีที่แล้ว

      @@raushonmunni2633 so that means you started watching YT vids from 1st grade? Cause you joined YT in 2015.

  • @masekelaisaacmaake7601
    @masekelaisaacmaake7601 4 ปีที่แล้ว

    You are absolutely brilliant. I like the way you deliver the content, its amazing.

  • @azahratv3888
    @azahratv3888 4 ปีที่แล้ว +3

    Bon courage et bonne continuation
    👏👏👏👏⚘

  • @gopip9192
    @gopip9192 4 ปีที่แล้ว

    Happy teachers day freecodecamp...:-)

  • @silverian
    @silverian 3 ปีที่แล้ว +1

    Thanks for detailed information!

  • @mohammadmoulakhnif7188
    @mohammadmoulakhnif7188 4 ปีที่แล้ว +1

    Thank you sir for your amazing course

  • @liac.g.3642
    @liac.g.3642 3 ปีที่แล้ว +1

    Thank you! Loved it.

    • @mr.luv077
      @mr.luv077 3 ปีที่แล้ว

      Hey u look to beautiful😍✨

  • @sairaali-d4d
    @sairaali-d4d 9 หลายเดือนก่อน

    such an amazing lecture thank you

  • @SGC564
    @SGC564 3 ปีที่แล้ว

    Thank you very much for the video, it's going to help me a lot with my Secure website project class

  • @PaoloGame450
    @PaoloGame450 4 ปีที่แล้ว +3

    cool, now to figure out how to code the whole thing

    • @zacksima8333
      @zacksima8333 4 ปีที่แล้ว +3

      wordpress

    • @AdrianTwarog
      @AdrianTwarog 4 ปีที่แล้ว

      Easy, I will have a video for that too!

    • @AdrianTwarog
      @AdrianTwarog 4 ปีที่แล้ว

      @@zacksima8333 wordpress

  • @kinganuoluwa
    @kinganuoluwa 3 ปีที่แล้ว

    Great Tutorial

  • @shortasdfghjkl
    @shortasdfghjkl ปีที่แล้ว +1

    omg so helpful thank you

  • @vishwanathareddym9960
    @vishwanathareddym9960 4 ปีที่แล้ว

    Thank you so much for this..need more content around this topic...wireframes and converting it to html css code

  • @khalidelgazzar
    @khalidelgazzar 4 ปีที่แล้ว

    Great demo. Thanks

  • @the_oneironaut
    @the_oneironaut 3 ปีที่แล้ว

    Such great content!

  • @themomentier
    @themomentier 2 ปีที่แล้ว

    Simply amazing, thanks a bunch

  • @harounach
    @harounach 4 ปีที่แล้ว

    Thank you Adrian

  • @ayoonamusi1067
    @ayoonamusi1067 4 ปีที่แล้ว

    Thanks Adrian!

  • @snehsrivastava3733
    @snehsrivastava3733 2 ปีที่แล้ว

    Thank God who sent you to me now everthing is clear about web design page too.

  • @umermirza27
    @umermirza27 4 ปีที่แล้ว +1

    really helpful thanks man

  • @PilatesinSacramento
    @PilatesinSacramento 2 ปีที่แล้ว

    Great video! Thank you!

  • @Hi2uGaming
    @Hi2uGaming 4 ปีที่แล้ว +2

    Thanks for the video ❤️

  • @sameerkatoch1987
    @sameerkatoch1987 4 ปีที่แล้ว +1

    Best of the best☺️

    • @allinone8391
      @allinone8391 4 ปีที่แล้ว

      ohh bhaii...avi video upload hue 10 min bhi ni hua or best of best dk to lo phle🤣

  • @apola8668
    @apola8668 4 ปีที่แล้ว

    Thanks very much for this. Looking for more especially how to covert wireframes into html& css. Im just trying to design and build a simple website for a small business.

  • @sileshiaweke4814
    @sileshiaweke4814 5 หลายเดือนก่อน

    awesome deed!!!

  • @gauravbisht1949
    @gauravbisht1949 3 ปีที่แล้ว

    Thanks. Learn a lot

  • @EliseoHernandezGil
    @EliseoHernandezGil 4 ปีที่แล้ว

    Thanks, excellent video!

  • @Sebastian-zs8cp
    @Sebastian-zs8cp 4 ปีที่แล้ว +6

    pleace make step by step next in adobe xd wireframing with adobe xd wireframing plug-in then site map, wireframing, style guide, ui design. full workflow ux/ui design how can be see.

    • @AdrianTwarog
      @AdrianTwarog 4 ปีที่แล้ว +2

      This is exactly what I am doing and the next video on the schedule!

  • @curious.lad.369
    @curious.lad.369 4 ปีที่แล้ว +1

    Nice tutorial, you explained part of the process nicely, but i fell like some part of the ux process was left out like decision making behind where to put what. How you decide on how users should interact with the product. Do you follow some documentation or best practices, or is it based on pure research before wireframing.

  • @4567fire
    @4567fire 4 ปีที่แล้ว

    thanks i needed such a tutorial

  • @almuhanadal-nihmy7452
    @almuhanadal-nihmy7452 ปีที่แล้ว

    thank you very much for this tutorial

  • @gulshanyadav3140
    @gulshanyadav3140 4 ปีที่แล้ว +1

    Thank you very much 😊

  • @curiosdevcookie
    @curiosdevcookie 3 ปีที่แล้ว

    1) Thank you, Adrian 👍🏼
    2) Unlike the other links, accessing the link to your channel doesn‘t seem to work, i.e. isn’t even triggered to open the “which browser” window; experienced such on an iPad Pro 2020 using the TH-cam app, both are freshly update (not that I think that this has anything to do with it per se, but just to give an entire a picture as possible 🙃
    Somebody having access to a desktop computer may have a different experience…

  • @nctrn07
    @nctrn07 4 ปีที่แล้ว +2

    He is drawing with his mind

  • @womeesoxkwi2689
    @womeesoxkwi2689 ปีที่แล้ว +1

    Good tutorial but it would be much better if examples of sites where techniques explained by you are used. So e.g. when you are talking about slide image in the background there would be examples of sites with this in them

  • @eumm11
    @eumm11 4 ปีที่แล้ว

    thank you, this was great!

  • @alicewhitelhpw7517
    @alicewhitelhpw7517 4 ปีที่แล้ว +2

    Yeah I really need help with this 😀👌

  • @StrumAtEase
    @StrumAtEase 3 ปีที่แล้ว

    Awesome Thanks!

  • @pravatyadav3623
    @pravatyadav3623 4 ปีที่แล้ว +1

    Nailed it

  • @sara123lovesmusic
    @sara123lovesmusic 3 ปีที่แล้ว

    Thank you so much! :)

  • @SamanthaBuen
    @SamanthaBuen 3 ปีที่แล้ว

    Thank you!

  • @hasantarek6521
    @hasantarek6521 4 ปีที่แล้ว +1

    after a long wait

  • @venkatasreeram
    @venkatasreeram 4 ปีที่แล้ว +2

    Superr...🔥

  • @ratias0
    @ratias0 4 ปีที่แล้ว

    Thank you very much for this

  • @ai.aspirations
    @ai.aspirations 4 ปีที่แล้ว

    Super! thanks!

  • @a.rakoto5094
    @a.rakoto5094 2 ปีที่แล้ว

    very clear , thank you :-)

  • @moshtafizurrahmananty1792
    @moshtafizurrahmananty1792 4 ปีที่แล้ว +2

    I want more courses on web design.

    • @AdrianTwarog
      @AdrianTwarog 4 ปีที่แล้ว

      I think there can be some good content coming up for design for dev's

  • @shahamitsynygy
    @shahamitsynygy 3 ปีที่แล้ว

    Nice video to get started with wireframing the new website. I have a quick question - How do we incorporate SEO friendliness during the website design so that we make sure the end product is found easily when people search for that topic?
    Thanks!

  • @ritvikgirish4639
    @ritvikgirish4639 4 ปีที่แล้ว

    Nice thank you for the video bro

  • @the7odmelmoney
    @the7odmelmoney 4 ปีที่แล้ว +1

    Thank you

  • @magutigamero
    @magutigamero 3 ปีที่แล้ว

    Excelente y Muchas gracias

  • @akanimohosutuk928
    @akanimohosutuk928 4 ปีที่แล้ว

    Thanks guys

  • @anonymousbot2829
    @anonymousbot2829 4 ปีที่แล้ว

    Please make a video on full stack with java spring ,spring boot with either react or angular

  • @samuelubenson
    @samuelubenson ปีที่แล้ว

    Awesome teaching.. Please be my coach and mentor. Gosh!! you teach so well😃

  • @sabuein
    @sabuein ปีที่แล้ว

    Thank you.

  • @dmitriyplaksin5272
    @dmitriyplaksin5272 4 ปีที่แล้ว

    Great video
    thanks.
    Can you suggest some wireframing tool that will work on both Windows and Android platforms?

  • @freedomformysyria
    @freedomformysyria 3 ปีที่แล้ว

    thank you so much

  • @fayandie
    @fayandie 4 ปีที่แล้ว +1

    Thank you so much.
    What's apps that you used for drawing?

    • @NukeManProductions29
      @NukeManProductions29 3 ปีที่แล้ว

      its called Concepts. I use it on an iPad but I'm not sure if it is available on android.

  • @johnswanson217
    @johnswanson217 4 ปีที่แล้ว +19

    Always Design MOBILE First!

    • @AdrianTwarog
      @AdrianTwarog 4 ปีที่แล้ว +5

      Sometimes it's easier to do desktop design then development goes mobile first.

    • @bobcee8126
      @bobcee8126 4 ปีที่แล้ว +1

      @@AdrianTwarog agree with that

    • @xaviermm5506
      @xaviermm5506 6 หลายเดือนก่อน

      😊

  • @KIKITO94
    @KIKITO94 3 ปีที่แล้ว

    What's the name of the app on screen now

  • @ZeBeaman-n2d
    @ZeBeaman-n2d ปีที่แล้ว

    I can't thank you more

  • @jwalapradhan4538
    @jwalapradhan4538 4 ปีที่แล้ว +1

    Nice:)

  • @ceriessheart_9249
    @ceriessheart_9249 4 ปีที่แล้ว

    Thank youu!

  • @healthadvice3091
    @healthadvice3091 3 ปีที่แล้ว

    does this requires questioning the client about the project right from the start?

  • @neoriddle
    @neoriddle 4 ปีที่แล้ว

    Is there a couple applications (ones free, others not) that you can suggest us?

    • @artemv3160
      @artemv3160 4 ปีที่แล้ว

      Adrian has mentioned Figma and Adobe XD. They both have free "starter" versions.

  • @ashleysouffrant1320
    @ashleysouffrant1320 4 ปีที่แล้ว

    Crazy !!!

  • @DrJohnPollard
    @DrJohnPollard 4 ปีที่แล้ว +1

    Go Australia! oi! oi! oi! And of course he didn't put the link to the software in the notes, which seems to be the standard in today's web environment.

    • @AdrianTwarog
      @AdrianTwarog 4 ปีที่แล้ว +1

      Concepts App, sorry freeCodeCamp might have forgotten to put that on there