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?
@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.
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 😀
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!
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 ?
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.
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?
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" ?.
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
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
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
Kindly anyone tells me which key is used with command at22:44_23:00 to merge both pen drawings ?
waiting for your reply
@@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 love that last detail you added. The rectangle with the light grey gradient.
Idea for next tutorial. Let's build this in HTML + CSS in a responsive grid.
Yes i agreee
Much needed video
plz do
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?
@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.
WOW, this is lovely. How can i integrate this with html/css? any help on that would be appreciated
Thank you so much for the tutorial........love you 3000
Great video! How did you fine-tune the pixel spacing at 3:08 between texts using the keyboard?
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 😀
Haven't used Adobe XD since it came out. This was a great refresher, thanks a ton!
Glad you liked it!
Kindly anyone tells me which key is used with command at22:44_23:00 to merge both pen drawings ?
waiting for your reply
I try doing the same design and puplish on dribble
i'm beginner and it was mt first shot,so thank you so much
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!
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 ?
Ctrl+ shift doesn't work for masking in windows for masking the layers shown in this tutorial. Any alternative?
6:30 How can I bring the text front of the rectangle in Windows?
Mayus + Ctrl + }
You are really awesome man...Thanks for the tutorial
Glad it helped!
Hi! How is your grid arranged in back of your text and elements? My grid is the top layer >:-(
very helpful and informational, thank you!
what is the shortcut on windows to cut the shapes plz : 22:56
Shift+Ctrl+M
You are a great teacher man you earned a sub hopefully more of this in the future :)
Thanks for the sub :D
This is how websites should be created. PERIOD.
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.
Thanks for the tuto. Plz, what's the plugin did you use to generate the random text?
Its called Content Generator :D
@@CalerEdwards Thanks!
Where can I find the Columns? Do I have to create it? or is it a Template?
Which one do you recommend Adobe xd or Sketch ?
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?
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" ?.
Caler will this export to a website site with all the elements in place?
Lets hope you post more of these tutorials, thanks a lot !
Hi I’m just wondering do you make those little icon yourself and place it in the XD ?
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
Thanks man, this is awesome! Appreciate it!
No problem!
LOVED IT 💖💖 Thank You for making this dope tutorial !!
Kindly anyone tells me which key is used with command at22:44_23:00 to merge both pen drawings ?
waiting for your reply
Caler Inspiration of the Day Edwards
Kindly anyone tells me which key is used with command at22:44_23:00 to merge both pen drawings ?
waiting for your reply
@@Pondering_Wisdom cmd+shift+M on mac, ctrl+shift+M on Windows.
this design editor (Adobe XD) is good for windows 10, there is another better or more used ?
It is good for windows in my opinion but there are others like sketch or figma if you prefer :D
@@CalerEdwards It works on Windows ones mentioned by you?
Can you please make a video of creating this page using HTML and CSS.
Sir, can you make video on coding of this website because I cannot put exact shapes on the website by coding.
Come on bro, your workflow is amazing!!!
can we build this in html now ? great tutorial
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
learn HTML, CSS, Javascript.
Thaank you! This tutorial is just awesomee! I've learn a lots!
Thanks :D
Kindly anyone tells me which key is used with command at22:44_23:00 to merge both pen drawings ?
waiting for your reply
Which mic do you use? Its insaneee :D
a currently use a blue yeti
Caler Edwards Thanks! Subbed
You make it look so easy ha ha.
Nice design! Thanks for sharing!
Thank you!
Cant download the project file....
beautiful project caler also code this plz respomsive html5 and css3
thank you for this tutorial!
very good work, thanks bro..
Stunning!
Thanks Man!
Thanks for this video !
just amazing content.
Thank you
nice man
❤️💙🔥
You must try Elementor! It is plugin in Wordpress... :)
What does it do?
@@CalerEdwards Its Page builder kinda drag and drop to design website in WordPress
Oh okay. I never use Wordpress so I didn’t know. I prefer webflow
@@CalerEdwards #Webflow_FTW!
Amazing Tutorial as usual!
Face reveal @100K subs?
My face is on old videos lol :D
you sound like Matt Damon XD
If you code this I'll give you my wife.
I can code it for you if you wish. Can i get your wife then?
you don't have wife
Coding this is very easy.... Just like your imaginary wife 😁
Your right hand?
#caler_edward your design is clean
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
Uuuh, orphan text.