I liked this. I was not aware you can drop all of the images in one shot inside of the repeatable grid. Awesome effect zooming out into a computer screen at the end of the video. Make a tutorial on that.
Youcan also drop a txt file on a textbox in a repeat grid in the same way. Create a txt file with for example the titles of the videos each title separated by a hard return and drop it on the title textbox in the repeat grid, see what happens...
@@TheFuturAcademy As a fellow Web Designer myself hoping to transition into a UX field, there are tasks within a web project cycle that myself and possibly many others are not able to be involved in due to UX designers doing these. These tasks can range from covering the importance of human centred-design, creating user profiles, defining the customer journey maps, user flows, creating the IA, how to conduct user tests -- right through to how to apply UX strategies to a site's content & design. I understand there are already many courses and different iterations covering these topics, but i like to have my process built around TheFutur. Just a suggestion anyway :)
The Futur Academy I personally would love a course on the copywriting/content strategy aspect directed towards designers. It’s superfluous when you have a team, but as a one man show coming out of school, it’d be great to have an understanding + best practices to add that to my belt.
@@TheFuturAcademy I'd like to see a playlist on the art direction, on how to display the content on the website. That is, how to make unique layouts for your website... A lot of websites out there are just to similar in one way or the other, and it just looks boring... Not that this website is boring though... 😅 I'm just saying in general...
Adobe, please link this in the XD Home-Screen. This video was really, really helpful! Especially the grid feature and the dropping images in the repeat grid feature I was unaware but in desperate need of!
This isn't a Web Design Tutorial, this is a layout and style technique video. These kinds of videos are the reason I get interns who have no idea how to create a real website that is easy to use. Please consider touching on the important foundations of web design related to structure, flow, usability, target groups, designing with the data, business goals and the important stuff that makes a web perform.
Noted. To your last point, we have a whole channel dedicated to the business of creativity. We've tackled many of things you've requested, but not exactly through the lens as you've described it.
@@TheFuturAcademy Yes, you've done a lot in regards to how to run a creative business, which is very valuable, but unless i'm mistaken I've seen very little in regards to actual business/corporate/enterprise design cases, being able to design a layout is the last chapter of web design and the easiest. Hope you appriciate some constructive critisism, it's my opinion that the designers need to learn the foundations of digital business solution practices first.
@the future academy I don't know how you guys do this. Every time I want to learn something new, You guys will post the exact content . This happened a lot of time. You always create great content at perfect time with super cool explanations. (In the affiliate section I don't know what happened. Did you miss one T ?? Or just replaced a Y with T ?lol)
I would just add that you can now stack items in the group, add padding to the group, and scroll on the grouped element vertically and horizontally. Unfortunately, a horizontal scroll doesn't work on Windows right now.
David, i feel that unless you have played with Xd it does look a bit too much but this quick demo is good in real life. You ah e to plan ahead as well.
@@TheFuturAcademy Thasnks for responding, i would like to know more about the ui rules, where to place elements such as text, icons and images, and it would be perfect if it's on XD.
Although, I have trouble figuring out when you're going live. Could you suggest a way so that I can keep a track your live sessions. Do you have reminders of some sort ?
@@tanyagupta8204 Subscribe and use the bell to set your notifications. They usually also do a reminder on their Instagram, or a sneak peek at what's coming.
How do you define the gutter width for your projects? For this example why did you go for 40 width instead of the standard? Thanks for sharing the time lapse of the design.
Nice! the only problem with dropping the images into shapes is that you can't edit the mask around the image, so it's best to start with a mask that has a shape inside it and drop the image inside the shape inside the mask, that way you can keep adding to the mask (gradients, text, other shapes, etc) and did I say mask enough?
I work on a 3840x2160 canvas to start with. Do you suggest I stick to 1920x1080. The reason I do that is coz the preview scales up nicely to my 4k monitor.
@@TheFuturAcademy I would suggest 1920x1080 - that's the resolution you will be most likely designing for, 4K is just 4 times bigger. As for scaling - everything depends on the resolution of your images - everything else in XD is vector based so it will scale to any size without any issues.
Do you ever expand the grid to cover the whole screen? Cuz I've seen some creative sites using webflow that have elements stretching to the edge of the screen instead of leaving 2 big margins on the sides, & I'm not sure which grid system to use for that.
The reason designers put most of the important content in the middle of the screen is because that's the most comfortable and looked at part of the screen (also symmetry and aesthetics). If you, however, would like to design from edge to edge you can skip the margins. The grid that is showcased in this video is what works for them - you can create your very own grid if you so choose.
Use the assets panel. Add colors and name them. Group content blox and namen them. Create text styles and name them. Create components AND NAME THEM. :) a lot of web projects are collaborations so naming and grouping make the file understandable for everyone. Ever did a photoshop job and ended up with dozens of layers and you ignored naming them? Same principle
Oof... I feel sorry for you using this crappy software. You can safe yourself so much time with much better and even free software and go much more in-depth for complex design systems.
I liked this. I was not aware you can drop all of the images in one shot inside of the repeatable grid. Awesome effect zooming out into a computer screen at the end of the video. Make a tutorial on that.
Noted
Just 2 different Videos cut together... 🤔
Youcan also drop a txt file on a textbox in a repeat grid in the same way. Create a txt file with for example the titles of the videos each title separated by a hard return and drop it on the title textbox in the repeat grid, see what happens...
Thank you! We need more web related content and I'd love to see a UI/UX course from you guys in the future 🙏 keep doing what you do and stay safe.
Is there something specific about UI/UX that you haven't found a good answer for yet? If we see a need, we'll do our best to fill it.
@@TheFuturAcademy As a fellow Web Designer myself hoping to transition into a UX field, there are tasks within a web project cycle that myself and possibly many others are not able to be involved in due to UX designers doing these. These tasks can range from covering the importance of human centred-design, creating user profiles, defining the customer journey maps, user flows, creating the IA, how to conduct user tests -- right through to how to apply UX strategies to a site's content & design.
I understand there are already many courses and different iterations covering these topics, but i like to have my process built around TheFutur. Just a suggestion anyway :)
The Futur Academy I personally would love a course on the copywriting/content strategy aspect directed towards designers. It’s superfluous when you have a team, but as a one man show coming out of school, it’d be great to have an understanding + best practices to add that to my belt.
@@TheFuturAcademy I'd like to see a playlist on the art direction, on how to display the content on the website.
That is, how to make unique layouts for your website... A lot of websites out there are just to similar in one way or the other, and it just looks boring... Not that this website is boring though... 😅 I'm just saying in general...
This was probably the most useful Adobe XD tutorial for beginners I have ever seen in under 5 minutes! Really awesome.
Adobe, please link this in the XD Home-Screen. This video was really, really helpful! Especially the grid feature and the dropping images in the repeat grid feature I was unaware but in desperate need of!
Plz, make more web design process videos.
I love websites and illustration most.
Love you, future guys.
Thanks
Would love more videos on depth about XD and prototyping!
Thank you guys for sharing your experience! Great!
This is amazing..I have been waiting for a user experience tutorials from you guys for a while.. Thanks
This isn't a Web Design Tutorial, this is a layout and style technique video. These kinds of videos are the reason I get interns who have no idea how to create a real website that is easy to use. Please consider touching on the important foundations of web design related to structure, flow, usability, target groups, designing with the data, business goals and the important stuff that makes a web perform.
Noted.
To your last point, we have a whole channel dedicated to the business of creativity. We've tackled many of things you've requested, but not exactly through the lens as you've described it.
@@TheFuturAcademy Yes, you've done a lot in regards to how to run a creative business, which is very valuable, but unless i'm mistaken I've seen very little in regards to actual business/corporate/enterprise design cases, being able to design a layout is the last chapter of web design and the easiest. Hope you appriciate some constructive critisism, it's my opinion that the designers need to learn the foundations of digital business solution practices first.
Siiiiiii! I’m practicing this muy pronto! Thank you for this Tutorial
Thanks for these tutorials
You're welcome
@the future academy
I don't know how you guys do this.
Every time I want to learn something new,
You guys will post the exact content .
This happened a lot of time.
You always create great content at perfect time with super cool explanations.
(In the affiliate section I don't know what happened.
Did you miss one T ??
Or just replaced a Y with T ?lol)
Thanks. Regarding your tip, I don't see what you're referring to? Can you quote it here?
am starting with XD.. this was my last push to jump in hahaahaha great stuff
I would just add that you can now stack items in the group, add padding to the group, and scroll on the grouped element vertically and horizontally. Unfortunately, a horizontal scroll doesn't work on Windows right now.
I love xd!!
More of this 🙌
I think one of the most important tips I saw in this video is file hygiene. It can quickly become a mess if you don't look after it.
This was really Helpful. Thanks a Lot!!!
Awesome Video. I want to work like you.
More like a music video than anything else. I’m scratching my head with this one guys.
We're trying new ways to share content and the things we do. We're gauging the interest of process videos like this.
David, i feel that unless you have played with Xd it does look a bit too much but this quick demo is good in real life. You ah e to plan ahead as well.
Nicely done 👏
Nice video guys!!! XD is the Futur!!!
Really love this,
It looks so easy for you to design a website in xd.
Fantastic video as always! 🔥🔥🔥
Beautiful
we need more of this
What would you want to see more of specifically?
@@TheFuturAcademy more website design
@@TheFuturAcademy Thasnks for responding, i would like to know more about the ui rules, where to place elements such as text, icons and images, and it would be perfect if it's on XD.
Very helpfull video, thanks 😊
You're welcome
Thank you
That was fun. Love: maintain file hygiene
Watching this i feel a fire burning inside and at same time i'm terrified at your skill and file hygiene level. Must level up stat
Wow! Such a great work, you guys are the best.
Tip: sketch out your ui a few times before stepping into XD. Save yourself time...time is $anity
True...
how would you approach sketching? for someone whos struggles with coming up with ideas?
All the videos are really helpful. Waiting to join live sometime
We will have one tomorrow
@@TheFuturAcademy Yay! Will surely attend.
Although, I have trouble figuring out when you're going live. Could you suggest a way so that I can keep a track your live sessions. Do you have reminders of some sort ?
@@tanyagupta8204 Subscribe and use the bell to set your notifications. They usually also do a reminder on their Instagram, or a sneak peek at what's coming.
@@loongeRify yes, I have subscribed. Probably it's my phone's notifications. Thanks for the help
This is so good
Salute to you guys!
Cheers
How do you define the gutter width for your projects? For this example why did you go for 40 width instead of the standard? Thanks for sharing the time lapse of the design.
Nice one. But one question.. why you don't use 8px grid system?
Beautiful work! Thanks for this Chris :D
This was created by Sang, our Art Director.
@@TheFuturAcademy thanks Sang then... Excellent! 🙏🏽
Nice! the only problem with dropping the images into shapes is that you can't edit the mask around the image, so it's best to start with a mask that has a shape inside it and drop the image inside the shape inside the mask, that way you can keep adding to the mask (gradients, text, other shapes, etc) and did I say mask enough?
all that drag and drop is great ... now make it responsive!
How did you do the scrolling website effect in the Mac?
What's the second song in this video? I'm digging it.
How do I take this from xd and place it inside the website??
I have a really stupid question, but what is the font called that you use for meta text on the webpage? Thanks
I work on a 3840x2160 canvas to start with. Do you suggest I stick to 1920x1080. The reason I do that is coz the preview scales up nicely to my 4k monitor.
I'll let our Art Director Sang, chime in here
@@TheFuturAcademy I would suggest 1920x1080 - that's the resolution you will be most likely designing for, 4K is just 4 times bigger. As for scaling - everything depends on the resolution of your images - everything else in XD is vector based so it will scale to any size without any issues.
Do you ever expand the grid to cover the whole screen? Cuz I've seen some creative sites using webflow that have elements stretching to the edge of the screen instead of leaving 2 big margins on the sides, & I'm not sure which grid system to use for that.
The reason designers put most of the important content in the middle of the screen is because that's the most comfortable and looked at part of the screen (also symmetry and aesthetics). If you, however, would like to design from edge to edge you can skip the margins. The grid that is showcased in this video is what works for them - you can create your very own grid if you so choose.
What do you mean by file hygiene ?
Use the assets panel. Add colors and name them. Group content blox and namen them. Create text styles and name them. Create components AND NAME THEM. :) a lot of web projects are collaborations so naming and grouping make the file understandable for everyone. Ever did a photoshop job and ended up with dozens of layers and you ignored naming them? Same principle
last video before sleep
3:24 vertical* 👀
🤦🏽♂️
not the best ui design ever, but keep 'em comin
Right, right. Needs more unrealistic shaded drop shadows & wavy section edges, also scatter some random soft 3d shapes across the page!
true heroes play this vid with 0.25x lol
Oof... I feel sorry for you using this crappy software. You can safe yourself so much time with much better and even free software and go much more in-depth for complex design systems.
Enlighten us. Better not be coming back with 'Free figma starter plan' ;)