Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Lessons:8Length:1.2 hours
  • Overview
  • Transcript

2.6 Q&A

[MUSIC] >> Okay, Mr. Conway, double-oh seven. Hello again, sir. I've seen you in many of the previous streams. It's good to have you here. Can you show how to set up a desktop, tablet and mobile responsive outboard using the new Sound Blue Layout Grids? I can indeed. Okay, so let's just go and grab this. Now, we've got a lot of presets here. So, we'll grab a Web 1920. Now, it depends on the framework the site is being built in. So, it's always worth kind of just understanding that with either yourself, if you're building it or your developer because there are a ton of different responsive grids out there. You might have something like Bootstrap. Or something else, golden grid, there's loads of different types and they all have very different dimensions as well. And it's something that I think is constantly evolving because technology is evolving and the way we design for technology is something that we've got to try and keep ahead of. So, we've got this 1921 here and we can turn on our layout grids. And we can set this to 12 columns. And we could increase the margin here. Let's go for 375, something like this. So, this is just purely an example. We could then, well could just duplicate this art board by dragging, holding Alt and Shift. And we can scale this in a little bit. Of course, you'd have specific sizes depending on the devices that you were designing for. So, we could go for a 480 for a mobile one. And of course, I can name these art boards. So, I'll just call this Desktop and Mobile. And you can't see the layout grids because the dimensions, I think at the moment, are totally impossible. So, let's just dial that down a little bit. And for mobile we'll go something like four columns and we'll drop that column width. So, I'm just kind of improvising these at the moment. But it depends, as I say, What kind of grid you're going for. So, this is the principle of how you can get layout grids to work. So, if you jump online and look for specific grids, depending on what you're designing for, the device sizes, all that stuff, you'll be able to. I think you can even get grid calculators online as well, that will have a whole bunch of the most popular sizes for different types of frameworks. And it will tell you the number of columns, the gutter width, the column width and then any space that you'd need either side as well. So, it's one of those things that, if you work with a developer or a team regularly and that's how you design there, once you have that kind of understanding of, okay, this is the grid setup that I've got, you can just pin them up on the wall somewhere. You've got all those dimensions ready to go or you could just create a template. So, you could just do a large desktop, a slightly smaller desktop, tablet, mobile, really small mobile. And just have all of these different art boards setup in a template file with all those dimensions. But that is how you go about creating the actual layout grid itself. Islam says, I'm new about XD, what can I do with this? This type of design we can do in Illustrator, so why XD? So, the main advantage to XD is Illustrator has got lots of tools, it's amazing, it's been around for many years. XD is tailored specifically towards wire framing, prototyping and design. So, you can wireframe in XD and of course you can wireframe in Illustrator. There's a few different tools, one of which we will cover in a moment called the repeat grid tool. But the biggest advantage is that we can switch into prototype mode and we can start linking screens together. We can choose transitions. We can set the easing, the duration. We can click on objects. We can link them back. So, we could have buttons, we can have text and we can really create some interaction. So essentially, what this does is if I'm thinking, yeah, I've got this really cool idea for an app, I don't know if it's any good or not or I want to pitch something to a client and see what they think. Before you get to all the design, the creative fun stuff, the icing on the cake, if you will, you get to really create, very quickly, a bare bones prototype, get the screens linking together, test the product you've got with this, whether it's a client, a stakeholder, a customer, or even just yourself. You can get a real feel for how the product actually feels to navigate around it with a prototype. So, and then you can make refinements to the prototype. And all of this is before we even get anywhere near design. So, when you come to adding the design, you're really just kind of polishing off something that's, that you know at the core is a really great concept and it works and people find it easy to use. So, that wire framing and prototyping, especially with the way technology is constantly changing and the way we interact with it is changing, that user experience design with wire framing and prototyping is just becoming essential. Because people want to have great experiences, effortless easy experiences with a tech. Because tech is just becoming such a huge part of our society today. So, making sure the core of all that tech is right with wire frames and prototypes is essential. The design's important, but it's the fun stuff, the icing on the cake. So, that's my really passionate, long winded explanation about what XD is and how wire framing and prototype is really beneficial. In my opinion, a key part of the process. Says a similar thing, can't we do the same with Photoshop? What's the difference between XD and Photoshop? Again, very very similar, XD is a very snappy responsive program, you can have tons of high res imagery and just quickly zoom in and out. In fact, I'm on an external screen, so you can't see how fluid it is, but when I'm using it on my laptop it's just so smooth, so slick, responsive. Even when you've got tons of high res imagery, it's just a really great program to use. And of course, you get the design, the prototyping features as well and you can then share those prototypes online. You can publish design specs. These are all things that you can't do in the base version of Photoshop. So, and plus for me, I like looking at my designs being super crisp and clean. In Photoshop, if you look at text, of course, it's raster based software, so or at least your text will be all pixellated and [SOUND]. Whereas in, look at this, it's lovely and clean. I mean, I know this is just fdfdfd, but whatever I do looks really super clean. So yeah, I just love looking at what I'm creating in that cleaner format as well. It's a bit easier on the eyes I think. But yeah, that's the main advantage is the prototyping and sharing features and the responsiveness of the program. It is designed with this kind of wire framing and prototyping in mind. Can you elaborate a bit on exporting, so you always get crisp exports? Cheers on the great tutorials. Thank you, thank you Demetra Petrov, hope I pronounced your name right. So, when it comes down to exporting, let's go and just create some buttons. So, I'll do this really quickly. And you can see how snappy and responsive XD is, especially if you start learning all of these different shortcut keys here. When you use it regularly, you just become super familiar with everything and because it's so responsive, you really can just whiz around the UI and bring whatever ideas are in your head to life so quickly. I really do love it. So there we go, we've got a lovely lovely button. Now, if I want to export this as one button, I would need to group these together. So, I can group them together. And from the layers panel, I can give this a name. So, this is the name that it's going to export as. And I can go to File > Export. And I can export what I've got selected or I could just export all art boards. So, I can export this as button.png. And of course that is a raster format, so it's not gonna be vector, but of course, you may need that. So, you just have to choose whether you're exporting just the PNG or whether you're going to be exporting it for the web. So, we've got standard definition or high definition displays or iOS as well. Same again, different definitions depending on whether it's just 1x, 2x or 3x. And Android is similar, but slightly different. So you have these different hd dpis and low dpi, medium dpi, high dpi, extra high, all this kind of stuff. So, it depends what device you're actually exporting it for. Or you can just export the design as a PNG or as a vector graphic that you can use online as an SVG. So, we can go and export that to the desktop. And if we have a look, we've then got our PNG button there. And of course, it is that size, so you can see it's a little bit pixellated. Or we can export it as an SVG or a completely different format. We've then got it as a vector graphic. So, it stays nice and crisp. But if you are gonna export SVG, as we touched on earlier, just double check your x and your y position here, your width and your height. Just to make sure everything is rounded up to the nearest pixel because when you export as a PNG it just gives you the best chance at getting a really nice clean graphic. Or as clean as you can get with something like a PNG. Asks, how can I change text lowercase to uppercase? At the moment, I think you have to do it manually. So hopefully, this is something that they will add to XD in future. So, there isn't any toggle button. There is an underline button, so you can instantly underline text. And what I love about this one is, I need a descender underline g. It actually includes the space for the descenders on your letters. Which is something I haven't actually ever seen before. And I love this because there is nothing worse than having a g or a j and your underlining just goes straight through it, is the worst. It looks horrible. So, this is really cool. I'm sorry, we don't have, there's no feature to or at least currently, to instantly turn everything caps or lowercase. Hopefully, this is added in future. I'd love to see a little button there that does that. But on the bright side, you can underline stuff and it accounts for descenders on letters, so that's pretty cool. Dimatow says what are your thoughts on the new plugin integrations Adobe XD introduced to XD? And which are your favorites? I think Zeppelin is very interesting. Zeppelin is pretty cool. If you've never used it before, it's a similar thing to Publish Design Specs, but I think it's been around a little bit longer and it's been a bit more developed as a stand alone program. So, you can open up your whole XD project in Zeppelin and then you can share it with developers or clients and they can see all that kind of information. But it also generates, if it's similar to how I've used it before, it generates CSS code as well for your design. So, I've not actually used Zeppelin yet with XD specifically. But that is something that it can do is generate some CSS code, which makes developers' lives even easier, but it's pretty cool. Something else I really like is something called ProtoPie. And I'm gonna try explore this a little bit more in future as well. Essentially, ProtoPie enables you to design your design, your concept, your prototype in XD, but then you can go and add things like micro interactions. And you can actually start to bring it to life and just make it, just take it that little extra step and make it a little bit more believable. So, that's something I've seen pop up fairly recently and I'm really excited to experiment with that and try that out a bit more. Because I think from what I've seen so far it's got some real potential to just take design from XD that extra step forward and start adding those nice little subtle micro interactions that are really gonna improve the user experience. And really just kind of, the idea of prototyping is to fake it till you make it. You wanna make it as convincing as possible to the user tester, the client, the stakeholder, that what they're viewing and what they're testing is a real working product. So, getting micro interactions in there as well with something like ProtoPie is gonna just help someone feel like they're actually using a real product when they're not.

Back to the top