2.3 Questions and Answers

[MUSIC] Please tell me what's the difference between Dreamweaver and XD, Satchen asks. So the difference between Dreamweaver and XD is Dreamweaver allows you to go in and build a functional website. You can add codes, HTML, CSS, JavaScript, PHP, any kind of web coding language. And you can build a fully working product in Dreamweaver. Adobe XD is slightly different, in that it's more geared towards wireframing, prototyping, and design. So we've just done the wireframe here. If we had multiple pages we could turn this into a prototype by going up here and linking all the different screens together. And what this does, the idea of prototyping is creating as close as possible to a working product that you can put into the hands of clients, or stakeholders, user testers, whoever it is, even yourself. And you can really get a feel for how your site, your app, and look at our phone, you can get a real feel of how it's actually going to perform. So there's a really good quote that I love, it's called fake it till you make it. So you're trying to get as close to a working product as you can without having to go through hours of coding and testing and everything. So it's about rapidly prototyping products that you can test before having to even get into coding. Because when you commit to coding a product, if you find out after coding that it's wrong, well it's gonna cost you a lot of time, and potentially money, to go and fix that problem. With prototyping, any issues like that, most of them, can be identified a lot earlier in the process. So that's the real benefit to prototyping, and some of the main differences between Dreamweaver and XD. So I hope that's helpful. So how do you translate that into an actual Web page, Arch Champion asks. So what you would do is you would produce the wireframe, the prototype, within XD. You can add the design in XD as well, and update that prototype, so it's updated with all your beautiful design work. And what you do then, is you would hand this over to a developer. So this program is not for development, coding. You would hand over all of the different assets to a developer so you can go to File, Export. I'm going to cover this a bit later in the stream. You can export all of the assets. So the assets would be the logo, any icons, imagery. I mean, you could export all the buttons and everything. It depends how you're going to build it. And you would hand this over to a developer who would then go and build this into a live working product. Paul Dougherty, why build in XD if you can't use it? So I think I've covered that already. So the purpose of prototyping is to literally fake it until you actually make it and create as close to a real working product as you can. So a client, or a stakeholder, or a user tester, can get a real feel for how the product is going to work. You can get that feedback and make changes without having to go through the time and development cost of creating a full on product. The shortcuts that I'm using are all listed here. So whether you're a Mac or PC, the shortcuts should be listed. If you see this symbol here, next to the zed, or the Z, that little symbol is the equivalent of Ctrl on a PC. So if I say Ctrl or Cmd+Z, or Ctrl or Cmd+V, the Cmd is referring to people on a Mac, the Ctrl is referring to people on a PC. So hopefully that helps clarify that a bit more. Turin says, as XD is in beta, do I consider it as an industry standard for designing digital interfaces? Yes, you can absolutely use XD. When XD was first released, I think for me there were a few features that I needed to use that weren't available. But as it's developed in the beta, they've added a whole ton of features. And I've used this for a bunch of live products. So it's definitely ready to wireframe with, prototype with, and design with. You can share your prototypes online through Adobe XD with the Share tool in the top right, which we will touch on later. But you can also use something like InVision or Marvel as well. So you can do all of the wireframing, designy stuff in XD and you can bring that prototype together in XD or any other third party program. So it's entirely up to you. Sean Conway says, I can't really do Web design in Photoshop and pass to my developer. Would it speed up my workflow switching to XD? Sure and that is a fantastic question. The answer is yes, absolutely. Photoshop is an awesome tool. It's been developed over so many years. I remember back at Photoshop 7.0, some of the features that have been added, and they even added some more features to Photoshop, that do make it a bit more Web friendly. I think Adobe acknowledged that a lot of people do site designing in Photoshop. I've done it as well, and the same for Illustrator. So they added some of these features, but there are other things that Photoshop doesn't have. And Adobe XD is designed from the ground up with UI/UX design in mind. So the streamlined interface, the prototyping functionality, the repeat grid tools, the symbols, everything, and especially symbols. So we'd look to that, just a moment ago, character styles and colors. If you're working on a huge app project, you might feel comfortable working in Photoshop and know the software inside and out. But personally, I would take the time to just kind of learn XD and become familiar with it. Because in the long run, you'll save so much time. Just because it has a few of these key features that all together just can save hours, if not days, worth of time on a project, especially when it's a site or an app especially large and you have lots of different screens. Okay, Knight actually says hey Dan, can I call you Dan? Absolutely, my real name is Daniel, or Dan, but you can call me Dansky or Dan, either is fine. Your videos are great, I'm a developer not a designer, but I needed to create a prototype so I started using XD. Your videos have helped. Keep up the good work. Thank you very much. Thank you, I'm glad they're helpful. And it's interesting to have a developer here as well. So I've not got the chat right in front of me, but feel free to weigh in because I'm a creative person. I come from that kind of creative background. And so I don't know what it's like developing, so how that hand off process works. I've got my own process in place where I can send off assets. But it'd be great to kind of hear more about what it's like from the developer a point of view, and how you like to receive assets. Frank Moran says, what about responsiveness? So, we've created the desktop design here. The next thing we could go and do is add a new artboard with specific sizes, depending on the responsive grid and framework that you're working with Add this over here and then start dragging this. And of course you'd have the same process, your guide and everything in place. We can drag all of this over, and you can go through and give it lots of lovely color. I'm not gonna go ahead and do a complete mobile design, but you can see it makes this process so much easier. You can literally just create multiple artboards in an XD document. And when your main design is looking good, you can just drag it all over, holding Alt and dragging. And it will make it so much easier to create that mobile version, or that tablet version, depending on what you're looking to create. Dan, do you think they designed Adobe XD in Adobe XD? I know they do. I saw a stream recently with Michael, Talon, and Danielle from Adobe XD, and I think they showed visuals of themselves designing XD and the new features, all within XD. So yes, confirmed. Turin says, if I had a link from two artboards targeting a single other artboard, how can I get back to both artboards again instead of a single? If I understand what you are saying correctly, let me just create a new artboard and we'll try something. So we'll grab this button here. We'll paste this on the new artboard and because when you go to prototype, you can add links and actions to buttons. And you can copy and paste those buttons to other artboards and it will now copy that transition or that link. So if you have a Back button on every page, what you can do is select the Back button, and I can drag this back to the previous page. And I can set the transition here, and I can target the previous artboard. So I could have another ten different artboards and they could all be targeting that previous artboard. So you can see here I've made a new artboard. I created a copy and it's just added that same Back link. And it's not to a specific artboard but just going back to the previous artboard that the user is on. So hopefully I understood that correctly and that answer was helpful. [LAUGH] This is always a popular question. Sarumjan asks Dansky, which tool do you prefer working with, Sketch or XD? [LAUGH] This is always a fantastic question and very interesting. So I've always been an Adobe user. I've used Adobe products for absolutely years and I love them. Sketch is something that I haven't used until a few months ago. And I started using Sketch, one, so I could learn it, but, two, to see what it's really like. I have a lot of friends that use Sketch as well. And I wanted to see what it was like compared to XD. And I think ultimately you have to make your own choice what one you prefer. But here's my two cents on it, Sketch factually has been around for a lot longer than XD. It's been developed over a longer period of time. And Sketch has some other features that some designers might see as essential. It depends kind of what you're working on. So I do love Sketch in that regard. Some of the things that really draw me to XD is its snappy responsiveness. Even when you have huge documents full of tons of different artboards and high res imagery, it still stays super responsive. It's available on the Windows platform. So if you're a Windows user you can't use Sketch, it's Mac only. So Windows users now have an option or an alternative, as well as Photoshop or Illustrator, which is super cool if you do UI/UX stuff. And I love the fact that you can prototype all within XD, so you can switch from design to prototype really quickly and easily. And the Adobe apps all play nice together. You can copy and paste from Photoshop and Illustrator straight into XD. So, I know that makes it sound like I'm favoring XD. Personally, I love them both and I do actually use them both but for different things. So hopefully that helps answer your question. But the honest answer is, if you can get a copy of both and just have a go and try them out and see which one you prefer. It depends, if you're a long term Adobe user, but until you try it out you might not know if you prefer Sketch or XD. So hopefully that's helpful anyway.