Adobe XD Web Design Tutorial

Поділитися
Вставка
  • Опубліковано 23 гру 2024

КОМЕНТАРІ • 100

  • @andrewatts7425
    @andrewatts7425 5 років тому +24

    Thank you! This is an awesome tutorial.
    Wireframe 1:40
    Design Canvas 11:20
    Buttons 11:49
    Navigation 13:57
    Text 14:40
    Graph 16:31
    Colored Section 21:37
    Comments 23:03
    Cards 25:50
    Bottom Section 26:56
    Extra Details 28:12

    • @Pondering_Wisdom
      @Pondering_Wisdom 4 роки тому

      Kindly anyone tells me which key is used with command at22:44_23:00 to merge both pen drawings ?
      waiting for your reply

    • @Nikhil-Tomar
      @Nikhil-Tomar 2 роки тому

      @@Pondering_Wisdom That's Not merge, it's called masking, there is a option of masking on the tabs available on the top of Adobe XD

  • @i_am_goro
    @i_am_goro 5 років тому +1

    I love that last detail you added. The rectangle with the light grey gradient.

  • @nishville
    @nishville 5 років тому +73

    Idea for next tutorial. Let's build this in HTML + CSS in a responsive grid.

    • @PuzaExplores
      @PuzaExplores 5 років тому

      Yes i agreee

    • @PuzaExplores
      @PuzaExplores 5 років тому

      Much needed video

    • @saatya1
      @saatya1 5 років тому

      plz do

    • @kylegaijin
      @kylegaijin 5 років тому +1

      Absolutely agree. At this point - I'm confused as to the exact benefit of XD. Does it just create visual representations of something I have to turn around and recreate from scratch in other technologies such as HTML/CSS - or will it help create those files - I love this video - but it seemed that the payload was missing. Can anyone direct me to another source?

    • @one.mr.benjamin
      @one.mr.benjamin 5 років тому +3

      @A J This tool saves much time because if you developing a prototype using html, CSS,JS and Bootstrap iterations and variations will become tough and time consuming.

  • @amabenuzoe250
    @amabenuzoe250 4 роки тому

    WOW, this is lovely. How can i integrate this with html/css? any help on that would be appreciated

  • @saikumarkandikonda431
    @saikumarkandikonda431 4 роки тому

    Thank you so much for the tutorial........love you 3000

  • @rlndrlbt
    @rlndrlbt 5 років тому +1

    Great video! How did you fine-tune the pixel spacing at 3:08 between texts using the keyboard?

    • @CalerEdwards
      @CalerEdwards  5 років тому +3

      Arrow keys to move 1 pixel. Arrow keys holding shift to move 10 pixels. And you can hold alt to show the relationship between your selected object and others. Hope that answers your question 😀

  • @alfonsoflores272
    @alfonsoflores272 4 роки тому

    Haven't used Adobe XD since it came out. This was a great refresher, thanks a ton!

  • @Pondering_Wisdom
    @Pondering_Wisdom 4 роки тому

    Kindly anyone tells me which key is used with command at22:44_23:00 to merge both pen drawings ?
    waiting for your reply

  • @ayaageeba7550
    @ayaageeba7550 5 років тому

    I try doing the same design and puplish on dribble
    i'm beginner and it was mt first shot,so thank you so much

  • @sonoftroy8572
    @sonoftroy8572 5 років тому

    Hey Caler, thanks for the content. I’m coding our family reunion website but my designs look too plain. This will be my first launched site and I really want this to stand out... what advise can you share if possible thanks!

  • @deepto5640
    @deepto5640 5 років тому +1

    Is it okay to have left aligned item and also center aligned items in a design. Just like you have left aligned content on the hero section and center aligned contents on the 4th section. does it effect the visual consistency ?

  • @harshbhanushali7190
    @harshbhanushali7190 4 роки тому

    Ctrl+ shift doesn't work for masking in windows for masking the layers shown in this tutorial. Any alternative?

  • @khakh5005
    @khakh5005 4 роки тому

    6:30 How can I bring the text front of the rectangle in Windows?

  • @israeladegbulugbe5547
    @israeladegbulugbe5547 4 роки тому

    You are really awesome man...Thanks for the tutorial

  • @katerinahillios7564
    @katerinahillios7564 5 років тому

    Hi! How is your grid arranged in back of your text and elements? My grid is the top layer >:-(

  • @johnmartinpareja2500
    @johnmartinpareja2500 4 роки тому

    very helpful and informational, thank you!

  • @NabilDesignz
    @NabilDesignz 5 років тому

    what is the shortcut on windows to cut the shapes plz : 22:56

  • @chiefporo3919
    @chiefporo3919 4 роки тому

    You are a great teacher man you earned a sub hopefully more of this in the future :)

  • @thegroove2000
    @thegroove2000 5 років тому +1

    This is how websites should be created. PERIOD.

  • @jeistarGames
    @jeistarGames 4 роки тому

    when i hold alt and try to move the Social Post text, it only makes a copy. I heard clicks so i tried using my arrow keys to no avail. How can i move objects while looking at their measurement, because just holding alt makes a copy.

  • @abdouett3676
    @abdouett3676 5 років тому

    Thanks for the tuto. Plz, what's the plugin did you use to generate the random text?

  • @brayanmejia6208
    @brayanmejia6208 4 роки тому

    Where can I find the Columns? Do I have to create it? or is it a Template?

  • @rizwan-io
    @rizwan-io 5 років тому

    Which one do you recommend Adobe xd or Sketch ?

  • @Smuthole
    @Smuthole 5 років тому

    Nice, i just found out about Adobe XD 30 mins ago. Now how do you get this design out live on the web and in apps? That requires another type of designer to get it "working out there on the web / appstore" ? Im really interested in making these kinds of canvases, but i dont wanna "code" stuff. And most people use squarespace and wordpress etc nowdays not Dreamweaver and oldschool coding right?

    • @Smuthole
      @Smuthole 5 років тому

      I guess what im trying to say is, if i create a whole web page / app in Adobe XD. Can a person who works with webdesign use my XD files to get this out live ? Or does this XD thing just create "examples" of things, and cant be used / exported into "real life" ?.

  • @thegroove2000
    @thegroove2000 5 років тому

    Caler will this export to a website site with all the elements in place?

  • @arbxh
    @arbxh 5 років тому

    Lets hope you post more of these tutorials, thanks a lot !

  • @esmea8751
    @esmea8751 5 років тому

    Hi I’m just wondering do you make those little icon yourself and place it in the XD ?

    • @CalerEdwards
      @CalerEdwards  5 років тому

      Most of the time the icons I use are from box icons or feather icons, they are really good icon packs. I just drag them into XD before the tutorials. Sometimes I do create my own tho :D

  • @zlatkoc7113
    @zlatkoc7113 4 роки тому

    Thanks man, this is awesome! Appreciate it!

  • @jobybejoy8219
    @jobybejoy8219 5 років тому

    LOVED IT 💖💖 Thank You for making this dope tutorial !!

    • @Pondering_Wisdom
      @Pondering_Wisdom 4 роки тому

      Kindly anyone tells me which key is used with command at22:44_23:00 to merge both pen drawings ?
      waiting for your reply

  • @labrikhalili5568
    @labrikhalili5568 5 років тому +2

    Caler Inspiration of the Day Edwards

    • @Pondering_Wisdom
      @Pondering_Wisdom 4 роки тому

      Kindly anyone tells me which key is used with command at22:44_23:00 to merge both pen drawings ?
      waiting for your reply

    • @labrikhalili5568
      @labrikhalili5568 4 роки тому

      @@Pondering_Wisdom cmd+shift+M on mac, ctrl+shift+M on Windows.

  • @doncristian710
    @doncristian710 4 роки тому

    this design editor (Adobe XD) is good for windows 10, there is another better or more used ?

    • @CalerEdwards
      @CalerEdwards  4 роки тому

      It is good for windows in my opinion but there are others like sketch or figma if you prefer :D

    • @doncristian710
      @doncristian710 4 роки тому

      @@CalerEdwards It works on Windows ones mentioned by you?

  • @typicalprogrammer3542
    @typicalprogrammer3542 4 роки тому

    Can you please make a video of creating this page using HTML and CSS.

  • @problem4643
    @problem4643 5 років тому +2

    Sir, can you make video on coding of this website because I cannot put exact shapes on the website by coding.

  • @crazzopl6690
    @crazzopl6690 5 років тому

    Come on bro, your workflow is amazing!!!

  • @wheres_bears1378
    @wheres_bears1378 5 років тому

    can we build this in html now ? great tutorial

  • @vashimirzendera7803
    @vashimirzendera7803 5 років тому

    Hi Caler, and everyone. I’m new to this and have been designing a few UI’s and I wanted to ask how to make a Ui into a real functioning website.. I’m looking to create an e-commerce store.
    Thank you

    • @SoraAmm
      @SoraAmm 5 років тому

      learn HTML, CSS, Javascript.

  • @barrosdejoao
    @barrosdejoao 5 років тому

    Thaank you! This tutorial is just awesomee! I've learn a lots!

    • @CalerEdwards
      @CalerEdwards  5 років тому

      Thanks :D

    • @Pondering_Wisdom
      @Pondering_Wisdom 4 роки тому

      Kindly anyone tells me which key is used with command at22:44_23:00 to merge both pen drawings ?
      waiting for your reply

  • @timheezen
    @timheezen 5 років тому

    Which mic do you use? Its insaneee :D

    • @CalerEdwards
      @CalerEdwards  5 років тому +1

      a currently use a blue yeti

    • @timheezen
      @timheezen 5 років тому

      Caler Edwards Thanks! Subbed

  • @thegroove2000
    @thegroove2000 5 років тому

    You make it look so easy ha ha.

  • @alextheblockchaindev
    @alextheblockchaindev 5 років тому +1

    Nice design! Thanks for sharing!

  • @thegithegi
    @thegithegi 5 років тому

    Cant download the project file....

  • @junaidtariq4547
    @junaidtariq4547 5 років тому +1

    beautiful project caler also code this plz respomsive html5 and css3

  • @tonychangoer6446
    @tonychangoer6446 5 років тому

    thank you for this tutorial!

  • @mujtabakhanusiya5502
    @mujtabakhanusiya5502 5 років тому

    very good work, thanks bro..

  • @codemode9019
    @codemode9019 5 років тому

    Stunning!

  • @junaidalee8090
    @junaidalee8090 5 років тому

    Thanks Man!

  • @louisdarques9178
    @louisdarques9178 5 років тому

    Thanks for this video !

  • @Jetisback00
    @Jetisback00 5 років тому

    just amazing content.

  • @ayaageeba7550
    @ayaageeba7550 5 років тому

    Thank you

  • @webup5491
    @webup5491 5 років тому

    nice man

  • @kavr
    @kavr 5 років тому

    ❤️💙🔥

  • @alinameen9386
    @alinameen9386 5 років тому

    You must try Elementor! It is plugin in Wordpress... :)

    • @CalerEdwards
      @CalerEdwards  5 років тому

      What does it do?

    • @problem4643
      @problem4643 5 років тому

      @@CalerEdwards Its Page builder kinda drag and drop to design website in WordPress

    • @CalerEdwards
      @CalerEdwards  5 років тому +3

      Oh okay. I never use Wordpress so I didn’t know. I prefer webflow

    • @ahmedkhaled1068
      @ahmedkhaled1068 5 років тому +1

      @@CalerEdwards #Webflow_FTW!

  • @ahmedkhaled1068
    @ahmedkhaled1068 5 років тому

    Amazing Tutorial as usual!
    Face reveal @100K subs?

  • @MrBlackSwarm
    @MrBlackSwarm 5 років тому +1

    you sound like Matt Damon XD

  • @darko.ristanovic
    @darko.ristanovic 5 років тому +24

    If you code this I'll give you my wife.

    • @1337ghomri
      @1337ghomri 5 років тому +4

      I can code it for you if you wish. Can i get your wife then?

    • @TalkCan
      @TalkCan 5 років тому +4

      you don't have wife

    • @thedeveloper4207
      @thedeveloper4207 5 років тому +3

      Coding this is very easy.... Just like your imaginary wife 😁

    • @JR-jn9mk
      @JR-jn9mk 5 років тому

      Your right hand?

  • @mrehan98
    @mrehan98 5 років тому

    #caler_edward your design is clean

  • @dolev91
    @dolev91 5 років тому

    talking too fast bro, n it will be cool if u would start from 0 in XD and show us how to opend everything that we see here. thanks

  • @nathan-sg7cu
    @nathan-sg7cu 5 років тому

    Uuuh, orphan text.