 My name is Megan Turner, we're at Digital Akidna. You can follow me there at M-Turner on Twitter. I have shared my slides on Google Slides today, so if you'd like to follow on your laptop or phone, you can follow that link there. And just a little bit of background on the company I work for, you know, over there. Digital Akidna is a triple shop located in London, Ontario. We do different things from sales support to content marketing and management. We love using Drupal and are proud to use it. We are a team of 60 plus Akidna's proudly and still growing strong. So before getting into the design tools today, I wanted to go over just a little bit of background of the overall process before getting into that. So before going into the design process, we need to be able to get the information from the client so you have something to work off of. So following process is going to help create a clean transition in between each step. So if we go and get the information from the client, define our roles, target audience, tone and content, what's important to the users coming to the site, the business and the client, we can really target the design after that. And other things coming into role like the site map, we'll kind of say are we starting from scratch? Do we need to do a rebrand of the colors and logos of the site? Do they have a brand that we can use for the site? So all these kind of come into play before we can get into this process. So and then getting into that core design phase, once that is established, then you can get into the development and then eventually having your finished products for your client. So jumping deeper into the design process before touching on those design tools so we know what they're actually being used for. So a design process is an approach for breaking down a larger project into manageable chunks. Architects, engineers, scientists and other thinkers use this process as well to solve a variety of problems. We define the steps needed to tackle each project and we hold all those ideas throughout the whole process using this. So specifically today I'm talking about a web design process. So quick overview is we got our wireframes, style tile, which is like a new board there, comp and then your prototype. So let's just break down these steps a little bit more so you know what they entail exactly. So jumping into wireframe. Not so much design at this point. You're more so getting those views and content types for Drupal specifically. So different types that we can go into and a few different ways. So wireframe is very back to white. Like I said, we're not introducing any colors or images yet. We don't have the client to see that kind of thing. It's more so the layout of the pages that we're working on. So boxes representing images, lines representing where the text is going to go, and working out that functionality for each of the pages. And so we can do that in like a sketchbook if you don't have a lot of time and you just really want to like sketch it out quickly before going into a design process because it gives you a better idea. Or going in the method of using a white board, which is really great. We use this at a cabinet because it's really good for collaboration in the team setting. You can get the designers, developers and managers in the room and you can really work together working out how the pages are going to be before moving into the design. As well as there's a lot of online tools we can be using as well where you can still collaborate with your team members. They can comment on those wireframes as well. And the online process is good too because it kind of gives the chance for people to kind of comment at their own time. Like if everyone can't get into a meeting one day, it kind of gives them that flexibility. So once we have a solid wireframe, we can also work on the style tile, which is like a mood board. So the feeling and mood of the set. And it's important to know which direction you want to go in when you're making these style tiles because it's going to contain over various design elements of what your UI could look like. For example, I'm going in deeper with the style tile. So typically it's going to be an online program doing this, such as like a program like Sketch. And it's helping portray the feeling of the site. As we can see the colors, there's some action words there, fonts, icons, imagery, like input fields and those kind of things there. And then here's just another example to help you get the idea of what kind of things you could expect on a mood board or style tile. Once we got that style down and we have the wireframe, we can really go into working on what everything is going to look like when it comes together. So moving into the comp phase, there's a lot of resources out there to create this. So this is why I think the typical idea of how a comp is made since technology is advanced, we can use online programs. So we can choose to make a full comp page or you can do a comic design method where you're designing in sections. So forms and headers and footers or we can do the full page method which I'm going to show you here. So this is just an example of a comp for a client that if you want to do a responsive design. And this helps bring together all the stuff that we did in the style tile. So the forms, text, color, fonts, images and how it's all really slowing together there. It helps bring all the ideas together to form a page. And I guess depending on the budget for the client, the more you can do or the more flexibility you will have. So here is just the responsive, but you might want to do a secondary page as well. So having home secondary and then that could show a little bit of functionality so they know what it's going to look like on the page. Once our comps are down, sometimes you can go into a prototyping phase where you're showing how it's going to flow a little bit. So there's a lot of online software programs I'm going to talk about that you can use for this. And it's more like an interactive comp as you think about it. And the client is going to be able to see how it functions. So here is just an example of Marvell, which is a prototyping tool. And we'll be able to upload our designs, export them for a program such as Scature, Photoshop and you'll be able to customize it. So making clickable boxes like on top of your comps. So say you have a login field, you'll be able to drag over a box and you'll be able to set a destination after the user is clicking that. So they click the login let's say and then it's going to go right to the home page. So it kind of gives a feeling of how everything is going to flow there with your comps. And then I'm just going to show a little bit of example here. So here's an example on revision. So here we just have it's a static page obviously, but if I click around here, you can see it kind of flows and you're seeing what kind of functionality or steps that are going to happen here. We don't see it. Oh, sorry about that. So this is InVision and you can kind of see me when I click buttons here, which are just links to the different comps. It kind of shows that and you can even like go up here, click on your profile. So that's pretty cool. So once all those are done, then obviously you're going to have to go into development stage, develop all this and have your finished product. So now I'm going to go more so into the process that we use at Akidna. Some of the challenges we face in the past with tools and views and diving into a bit deeper of what's coming to the future for us. So design tools definitely have advanced over the years, but before there wasn't a one-fit-all tool for comps and wireframes for us, we were using two different programs and there were quite a few cons using this method. So in the past we were using Illustrator for our wireframing and Photoshop to produce high-fidelity comps. And Illustrator worked fine for what we needed it for, but it was difficult and took a lot of time, mostly because there are certain things you can't do like you can do in the program sketch where it makes the process a lot faster, like changing an icon. For example, in Illustrator you would have to go click the icon on one page and change it on each page, whereas Sketch has things called symbols and styles where you can set those and if you change one it changes all across. And then Photoshop is similar in that manner, but it's also a raster-based program in order to give those high-res comps to give to the client the file size and it being really huge and sometimes ending up Photoshop crashing. So our present solution is using Sketch and it's miles ahead of Illustrator in terms of wireframing comps or concern. Photoshop still has its uses and we still use Photoshop in Illustrator, but more so image editing and logo icon, big vector design-based stuff. So it's about 80% Sketch doing the comps and whatnot. So just going into this Sketch if you've never known or heard about it. Sketch is a great tool. It was founded in 2008 in the Netherlands. It's a vector-based workflow and it makes really beautiful high-quality artwork from start to finish. Top companies are using it today, Google, Apple, Facebook and much more. This is a much better solution for us because it's one program, has a large supportive community, there's a lot of third-party tools out there that you can use and it's a much cleaner UI than what we were using before. So it's very clean and has what we needed right there and not any extra things. Another benefit as well is there's smaller file sizes with the high fidelity comps that we're producing. Now going into the future, now obviously I'm not a fortune teller or anything I can't predict what's coming. But as we grow and technology is advancing, we are trying new things and trying to incorporate a better and more efficient process for us that's going to benefit the company, benefit our clients. But anyways, moving on, design is not just what it looks like and feels like. Design is how it works. Does anyone know who said this? This is Steve Jobs. So we can have the best design website but if it doesn't work in efficient ways for our users, this could result in a bad website for the user experience when they're going on. And this is kind of introducing me and talking to you about pattern. Pattern allows a great HTML prototyping tool. It's an atomic design based prototyping tool which if you know it's familiar with atomic design, it includes atoms, molecules, organisms, templates and pages kind of in mind when you're designing. So atoms for example being form labels, a button or a font. Molecules for example being the groups of elements such as having your search input field with the form label and the button together. And then the organisms being groups of organisms, the groups of molecules and the atoms. So standalone reusable components. And then moving into templates, these provide context relative to molecules and organisms. Helpful for designers and the client because it's grouping all those together to produce the final there. And finally the pages. So it's the instant of the template swapping of that placeholder and putting in the content there which is giving a more accurate representation of what the user will see. And different languages it's available in. You can use this for Drupal, there's Mustache, there's just a twig version and there's also a thin version which is very customizable. There's a lot of benefits of using this program. So it has a focus on Drupals which is great for outside of kindness and stuff that we're using. There's a lot of plugins available. The code is very visible. So once you're done designing the pattern lab you can take that template code and apply it to your projects because it's already there. So you're only making the template once. So that's a great process. And you can see everything coming fast together. It's better than just a static comp. And the competition. Sorry. I was going to show you what it looks like. It's a little bit complex idea to get a hold of. I did a fresh install on my local of the pattern lab for Drupal. And this is what it looks like when you first get it. So there's a menu up here which shows you that you can look at the different elements. So the atoms I was talking about the molecules and organisms templates the pages. So as we scroll down we can see all the different elements here. And even going into the sub things there where you can see all the different things that they can do. So this is an example of a homepage bringing all the elements before together and what that would look like. Now moving into some of the competition tools and other tools are out there because obviously we can't use every single tool that has to be, we have a process of what ones we're using. So there's a lot out there and once you find works best for you you can implement that in your process. With making sure it provides awesome results and experience for your client and mine. So some other tools that are out there are such as sketches we've done before that people are using. Adobe XD, Zeppelin and Envision. Some prototyping tools such as Marvell and Envision. So some of these tools so Envision has a lot of great aspects to it actually. You can do mood boards in there from prototypes and you can even create your wireframes in that tool. Marvell is similar in the sense that it's just a prototyping tool though. And then you have the Zeppelin which uses style guides. So developers and designers are in the focus of that sense. So you would import your sketch files in this and you have access to the CSS borders with colors and more. So I would import a page and then I could click on an element and all my column on the right there will come up all the CSS for that element. So say it was a box, it would say the border with the color, the dimensions and that makes it very useful. So in terms of other tools while you are creating comps and going through the design process I'm going to talk about here. So some stock image resources you can go to or design assets. So one of the best sites I love to go on is Unsplash. They have really high quality images on there which is great because you want the high quality when you're creating those comps if you just need the placeholder for the moment. And then in terms of design assets we have the Google Fonts, Font Awesome, Noun Project and so Noun Project has all your icons on there you can search. And Google Fonts obviously is Fonts it's great because it gives pairing suggestions and you can download them you can download from thin to bold you can kind of customize it that way and Font Awesome works with your CSS so you implement it there and that's for icons as well. And just to recap, recap, sorry and conclude I'm going to quickly answer to what the right solution is in long term there's always new technologies that are constantly being presented and updated but by understanding what your needs are the client's needs and the pros and cons of the tools that are out there you can make the right decision to improve the user experience and productivity Any questions? Yes? I use a couple of years ago I cannot remember the name of it but it was a total prototype that you can design apps so build a little app as a prototype Wait, sorry what was that? It's a software that I use a couple of years ago and I cannot remember the name and you by chance would know like you make it a whole app just like the designs in there too and all the functionality of the app you can have like the code and the design I'm not sure Any other questions? Alright, thank you for coming