FREELessons: 14Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Wireframing, Prototyping, and Interface Design

In this video we’ll be going over the best Linux-friendly applications for the early stages of a web design, as well as throughout the interface design process. We’ll look at software that includes functionality for wireframing, designing for multiple devices and resolutions, fast WYSIWYG prototyping, and more.

Related Links

2.5 Wireframing, Prototyping, and Interface Design

Hey welcome back to Linux for Web Design. So far we've been talking mostly about Linux in general. Talking about how to choose a distribution, how to choose a desktop environment, things like that. Now we're gonna move on to the actual software that you can use on Linux for your day to day web design work. We're gonna start by looking at everything that can come before you start coding. So tools that are good for wire framing and for prototyping and for user interface design. I've got a lot of software that we wanna cover, so I'm not gonna be showing you step by step how to create a web design inside this software. I'm gonna try to focus on just showing you through the individual features that are relevant to web design. So that you can figure out how these different pieces of software can fit into your workflows. So we're going to start by looking at Gravit Designer. Gravit is a totally free software. You can use it either in the browser or in a desktop client. Though at the moment I recommend using it in the browser. You'll just have a bit better performance and stability. And it has a bunch of features that are really, really helpful specifically for web design. One of things that I hear people talking about online sometimes, our web designer will come to a group of Linux users and say I wanna get into using Linux. What kind of design software can I use on the Linux platform for web design? And from what I've seen it's pretty common to just get a blanket recommendation to use either Inkscape, GIMP or Critter. Those applications are fantastic but, they don't have a lot of web design specific tools. Gravit on the other hand, does. So that's why I think that this software is right now the top option on Linux for the prototyping or the pre-coding stage of web design. So to give you an idea of what type of application that this kind of aligns with. Right now they're adding a bunch of feature in to Gravit, and they're trying to make it a good alternative to Sketch. Sketch is a fantastic product. Right now, it's pretty clearly number one in the market for web design. However, if you wanna use Sketch, you have to be on a Mac. The developers of Sketch have pretty much said that they're only interested in staying in the Mac world. If you're on Windows, Affinity Designer is adding in a whole bunch of new interfaces on oriented features. But in a similar way, they've also indicated that at present they have no plans to support Linux. Gravit, on the other hand, supports every operating system that they can. They support Linux, they support Mac, they support Windows, they even support Chrome OS, and they're also working on builds for Android and iOS. So that's about as cross platform as you can get. To use Gravit you can head to, and then you can just hit this little button here, use it online, and then you'll have the designer interface open up in a new tab for you. Or you can install it from the Google App Store, and then you'll be able to run Gravit as though it's a standalone application. So I'm just gonna go ahead and make a new document so I can show you around some of these features a little bit. All right now, first up, you don't have to use a purple interface if you don't want to. You can go to Edit Settings and you can choose either the dark or light theme. I like Dark Theme. You have an option of having an infinite canvas, so you can just start designing and figure out your dimensions once you're a little way down the road. Or there's a pretty significant selection of presets. That's for dimensions that are really helpful as part of a web design workflow. So there's some included website sizes in here. You've got some social media, preset dimensions, and you've got some different device dimensions in there, as well. So I'm gonna start by just choosing, let's go with Website Large. Now another really cool thing that's helpful with web design is Gravit's pages structure. So over here on the left, you can see we have pages. So I'm gonna create another couple of pages as well. I'm just gonna hit the little New Page button. Now I can have a look through each one of these pages. So I'll just put a different shape on them. So we can distinguish between one and the next, oops. So, there we go. We can just toggle in between these pages, so that's very useful for marking up a multipage website, for example. And then, if you wanna have something that works like artboard functionality, then all you need to do is hit this little switch here to toggle Multipage Mode. And then now you can see all the pages that you're working on. From here, you can select any of these pages by just clicking on the title. And then you can also duplicate those pages with Ctrl or Cmd+D. And from here you can also very easily change the dimensions to, let's say, you'll go with a mobile device size, and then you can readjust the content. So you can create different representations of how your design should look at different sizes. Now just so I manually resized this in order to fit on the screen, but there is also the ability to set anchors. So, let me show you up here, this allows you to create sort of a semi-responsive functionality. So let's say I want this to adjust its size horizontally if I change the size of the document. I can set its anchors to be active on the left and the right side, and now if I select, I'll just zoom in on this actually, so you can see a bit better. And now, If I change the size of the document, oops. The item changes along with it. So that's another thing that can be very helpful as part of creating a whole bunch of different views of how a user interface is going to look. Now I'm just gonna turn off multi-page view. We'll have a look at the first page here, so I can show you a couple of other features. Another thing that is quite relevant to web design with this software is that the way a lot of these controls are set up, the numbers that are put in, you can translate these numbers that you enter in the interface on a one to one basis into your CSS. So for example, if we add a drop shadow. And that you can see that the fields that we have in here are almost the exact match to the fields that we can use with CSS. So if we create a shadow in here, then we know when it comes time to code this shadow up, that we have numbers that can actually work to translate this into CSS and have it look the same. Another feature that this software has that's really helpful for web design is the ability to set up styles. So just gonna scroll a little bit and shrink this down. I'm gonna give it a border. Let's bump that up to a five pixel border, and let's give it, say, a green color. Or actually let me turn that down so it doesn't scorch your retinas. And now we can create a style out of what we've just applied to this box. So we're gonna make a new shared style. We'll just call it mystyle. And you can see here the parameters that are being saved. So then I'm gonna draw out another shape. And then I'm gonna apply that style to it. And then now I've got the same border and fill color and drop shadow. So you can use that process to represent a good portion of the classes that you'll then in turn need to make in your CSS. And another thing that is really useful in this software is that it has all of the Google fonts already in place. You almost certainly as a designer have had the experience of wanting to use a particular font in your design application so that you can mimic the way that it's gonna look online. So then you've gotta go to Google, you gotta find the font that you wanna use in your design, you gotta download font file and then install it on your computer or use skyfonts or something like that. But either way it's a bit of an irritating round trip to get the Google fonts that you wanna use accessible through your design software. But with this, you don't have to worry about any of that, because you have access to all of the Google fonts right here in line. So it's a very straightforward affair to just add a little Google font text. And then have that be ready to go in your designs. And then one more feature that's really, really useful, just gonna draw a quick extra shape with another background color. Then now that we've got a couple of colors in here, I wanna show you the in use section in the color picker. Right here we have an automatically generated list of all the colors that are currently in use in the document. So from there you need exactly what color code you need to use in your CSS. So especially if you're working with a pre-processor and you want to create some color variables for example, then you have easy access to all of the colors that are gonna be used in the design. Now at the moment the one thing that's probably missing from Gravit is symbols. That's something that incredibly useful as part of a web design workflow, and you do have those things in Sketch and Affinity Designer on Mac and Windows. However, we're also gonna have symbols in the very next release of Gravit. And this has been a very speedily developed software, so I wouldn't expect it to take too long before we see symbols in GravIt as well. There's lot's more I can show you about this software. Definitely take some time to go through and have a look at this yourself. But for now I just wanna keep it to the specifics of how this is helpful for web design. The next option that I wanna cover for, interface design, is perhaps not an obvious thing to go with, and that is Webflow. Now technically Webflow is not design software so to speak. It's not a graphic design application in the way Gravit is. And yes, Webflow is designed to produce fully coded websites. So this might be something that you've looked at before and thought well, I write my own code, or people in my studio write the code. So this isn't really a fit for me. However, if you take a second and just think about what you're trying to achieve when you use design software to prototype a website, there's pretty much two key things. You're trying to use software that's gonna let you work faster because you have a visual interface. And you're trying to develop a prototype that's gonna be a match for how the eventual website is really gonna look in a browse. Now Webflow is a visual interface that allows you to work quickly, and it's going to show you exactly how a website is gonna look when it's live in the browser. Because it is a tool that works in the browser. So if you haven't seen Webflow before, it's not all that different from using a graphic design software. So we can add in divs for example, and we can change the background color. We can add text. We can control our typography. And again, here, we have immediate access to a pretty decent selection of Google fonts. Not as many as in Gravit, but still a decent selection. And, of course, everything that's in here, the border settings, shadow settings, gradients, everything is going to exactly represent how your final web design is going to look. Webflow also has built in responsiveness tools, so we can just click the different device previews up here. And we can immediately get a look at how a design is gonna look at different sizes. So even though you might initially just think of Webflow as a design tool, in my opinion it's really great for prototypes as well. I know I've been in situations in the past where I've needed to produce some work really, really quickly. So what I've done is I've come into Webflow. I've hammered out some designs really fast because the interface does allow you to work very fast. And then I've coded up those designs and I've been able to produce a really high amount of work in a really concentrated period of time. And there's one more option that I wanna mention, and that is Inkscape. And that's because I wanna make sure that I put forward the best option in the Libre category for everything that we touch on here. So if you want to install Inkscape, all you have to do is go to the software center, or app center on your distribution of choice, and just search for Inkscape. Then you'll find it, and you can install it. And the thing to bear in mind with using Inkscape for web design is that as great an application as Inkscape is, it's not really designed for making user interfaces. You can do it, and of the Libre software that's available, this is the best option. But to choose this over Gravit or Webflow, Libre software would have to be a really high priority for you. So this is Inkscape, and the reason that I do suggest using this tool over and above the current versions of GIMP or Krita is that it has actual shape drawing tools. Neither GIMP nor Krita really have the kind of shape drawing tools that you would need for interface design just yet. So you've got basic shape drawing tools. The ability to, obviously, change their colors. Most of the different types of tools that you wanna access will be over here on the right. You can control the fill and and the strike of your shapes. Which, oddly enough, is something that's actually quite difficult to do in GIMP or Krita. So you can go with the familiar wheel and add in border controls and what have you. But things can get a little bit difficult because it's not very easy in my experience to navigate the layer system. So you can see here, even though I have a square on the canvas, all I can see here is layer. And I can add as many shapes as I want, and I'm not gonna have any way of navigating them here over on the right. So if you do go with Inkscape for interface design, I would actually recommend using the XML editor, which is a tool that's primarily designed to help you produce SVG. And we're gonna talk about that a little bit later. Because this will let you navigate to your individual shapes. And the other consideration that might make you wanna consider using Inkscape is, of these three options, it's the only one that's a native Linux application, so you are gonna get better performance. So to summarize all of that, Gravit is, I think, by a pretty big margin your best bet on Linux for prototyping and user interface design. Webflow is also really good, it's not just a wizzywig web design tool, it's actually really, really good for prototyping as well. And if you want something that's a Libre, then Inkscape is your best bet, but you're just going to have to be prepared to put in a little bit more leg work to reach the same point. All right, so now that we've talked about software that you can use for sort of big picture design, your overall interface, we're gonna start talking about software that you can use for the pieces of your design. So in the next video, we're gonna look at the best Linux-friendly software for SVG. And then you can use that to do things like creating logos and icons and what have you. So I will see you in the next video.

Back to the top