 So a lot of what I wanted to talk about today is really I wanted to talk about my sort of transition into understanding web media and being a designer in web media and a visual thinker in web media and what we just heard was someone who it took for a while to get to cozy up to Gutenberg and I feel just the opposite. I was really thankful when there was a modular building tool that came out. But first before we actually get into the tools I just want to talk about some simple process points that you may already know. Obviously when we're talking about designing for the web we're kind of building a spaceship right? I think it's a little bigger than just a single image or a single panel or a single message. We're designing kind of a system but us as designers we're thinking visually and we're kind of getting very, very obsessed with things like color and imagery whereas a developer would do the same thing when it comes to building. They would think about how they could use their tools to build. So the basic design objective might be stating the obvious but when you start with your design process you really want to just think who are you accommodating, what is the site for? Working with that in mind, is it a brochure site, is it an e-commerce site, is it a portfolio site, is it just an academic information site, things like that are very critical because you're going to bring your design sensibility to this and you may forget about what the objective is. That happens, it's happened to me. I'm always thinking of visual ideas first, they're always clicking around in my head and I don't always think right away, well the client has a certain objective in mind. Of course keeping it simple, always work towards elegant solutions. elegant solutions are things where you do not overplay your functionality or your screen behavior. Really try to keep things so that it does not get in the way of the message. Oftentimes when I design product sites or e-commerce sites or things like that, if I have strong imagery I'm halfway there. If I have something where I have an impactful series of photographs, most of my work I feel is done. I just kind of get out of the way and let the images do as much of the work as possible. Browser, okay so working with the browser we want to understand how the browser behaves, we want to understand what we're going to accomplish when we display our images and how they're going to interact with the browser. I had someone call me the other day and it was weird to hear this phone call because I never think of this stuff because we do it all the time. He was developing, he was building a site for a client and he had some questions with a full-width image. He had this image that the client wanted in there that was kind of a vertical volume type of image. The client wanted a full-width browser image so it was the question of how do you get all of that to work with the browser? Sometimes you don't. You really have to accommodate the image first so if your image is a certain proportion you have to make that work with the browser. So those are all tricks that you have to think about as you're getting into it. So if the client is really obsessing over a certain image, you want to make sure that you can accommodate that with the browser. If not, you have to revisit the image and then you have to make it work with the browser either by modifying the image or thinking about a different approach in your design of your browser. Making it work for mobile, everybody knows this, right? But we all designed for mobile first. However, one of the things that I've discovered and this was a very hard lesson for me because again I'm thinking of all four corners of my composition. I'm thinking of things within the rectangle, within the space. And so when I'm having to design a site that behaves both on mobile and in the basic desktop environment, I find that incredibly frustrating because I want to use the whole space. But the fact is we are designing very differently now. So we'll look at samples of this in a minute. Designing for your clients, of course we're designers, right? You want to think about the artistic objective. The client wants to think about how many units they can move. How can you do both? The client is really there to work with you and you are there to work with the client. So we'll talk a little bit about how to communicate with the client and how to get the best results you can. A lot of times you sort of have to protect the client from themselves. They really, they're just trying to do good things, right? But what we're trying to do is educate them, guide them, move them along in a direction so that they can get the best results from your time, driving consistently throughout your site. Working to make the site feel cohesive, right? You want it to feel like everything is connected. You want it to feel like it's a part of a series, a general series. So from page to page, from image style to image style, to type choice, to color, things like that. One of the things we've been doing is a site overview in the landing page. And we can look at samples of this in a second. But the landing page now is no longer needs to be above the fold. So we work to, as you scroll down into the page, you are given the overview of the site. Another point I'd like to make is trusting the power of images. Images are impactful. They are mighty. How you select your images? And the thing is, people say, well, it's just a stock photograph. Well, it took three hours and several phone calls to get just the right image, just the right selection, just the right attitude, the tone. And if there's people in it, there's models, things like that. Those are all very critical. And we're going to talk about how to make those work. Leverage typography, which I talked a little bit about earlier. Making type work feed. Just think of it as, well, the text goes here. And that's a common mistake for people who are building a site or designing a site maybe for the first time, or maybe they don't have the luxury of a design background. Typography is always secondary or sometimes completely falls off the table and just kind of parked in a convenient spot. Try to look at typography as form. I like to think of it as almost like architecture when you're designing it. On earth iconography. Iconography is really, really useful in the web, OK? The simple truth is people don't read. They rarely read the screen. They might. Once they go in a little deeper, they might actually start to read and look at things as editorial content. But when you're trying to bring the reader in, you want them to have cues, visual cues. Iconography will help with this tremendously. The constant search for new tools, which is part of what we're here for, right? We want to always explore tools, especially in WordPress. So that means plugins, design aids. And there's tons of them out there. If we had more time, I would love to cover as many of these. In fact, what I would like to do is put this out to everyone who's in this room to tell me what tools they like to use and how they use them. And I'll bet you we would all learn a lot. Unfortunately, we're limited. So what we're going to do is just work with some of the tools that we use on a regular basis with our crew. And experiment and self-publish. That is extremely important. Anytime you get a chance to do something that is uniquely yours, don't wait for the client to say, hey, we're trying to. We need a grid portfolio. Or we need to embed a slide show here. And we want something to work. How do I do that? And then what happens to a lot of designers is they wait until they're asked to solve a problem before they actually go in and try to figure it out. Do this stuff on your own. Try to do it early and often. Make these things work. Break them, of course. There are five ways to do things that you haven't done before. So what I wanted to do, the way I've kind of organized, yes. Just a quick question about typography. How do you, as a designer, keep yourself from falling in love with just two or three fonts? Well, the answer is I have a very difficult time doing it. I work probably with a very narrow selection of fonts. I don't know if everyone heard the question, but how do you broaden your range of type use, right? Typography is extraordinary stuff. And people spend hours and hours of time crafting a character. And sometimes they're just so beautiful. But what I find myself doing is I tend to lean on the same. I used universe for about 11 years straight. I didn't really stray from that. But I had to force myself to pick up that syrup type face, whatever. Things like typography, there's going to be a few go-to fonts that you have as well as you should. You want to use them in a way that you feel confident with. But again, one of the things that I learned from teaching was that the students that I was working with, they were using a whole different range of fonts. And they were finding stuff that I would never have chosen. But they got great results. So the thing is, you tend to get very narrow. But what you have to do is just try it and give it a chance. And if the client likes it, maybe you're halfway there. All right, so I wanted to talk about the process a little bit. I could talk for hours about this whole subject. Processes and tools is an expansive subject that we can really get a lot of leverage out of. But what I wanted to do was just talk about some basic tools. So when we're designing, I have a little studio in South Filly called Roehouse Studio. And there's three of us. And we're all designers. And we lean heavily on certain tools. Some tools we buy, some tools we get for free. But we're always trying to find things out that we like. So of course, the first thing we do, we do a lot of work for different clients. Some of them are corporate clients. Some of them are small businesses. We do a lot of work for Penn and Wharton. And that has its own little way of happening. But one of the things we'll do is we'll start by working with sketching out the site. So here, this is a site that we're doing for Wharton. It's a monstrosity of a site. It's enormous. And our whole process was trying to wrangle this site. All these things, I have most of these things in this blog post for this course, if you guys want. I can give you that after a while. So one of the things we tried to do with this site was we tried to just kind of wrestle all this information to the ground and break it down into a diagram. And it was not easy. But we use this tool called GOMockieber. They give you a free version. I think you might get one. You can get one project. I have a package where I can do three projects in time. The reason why I like this. So this is a wire framing kind of design tool. And it's really fast. But the best thing is, I mentioned there's three of us. We work in a room. We can all work on this at one time sitting in our individual screens. And I really like that. So I might be talking to Noah at my left or Serena at my right. And we might say, well, listen, let's change the nomenclature. Let's move the labeling around. And we could do this right from our desks because it'll change in real time. So the nice thing about that is I'll send this to the client. Now, most clients are intimidated by this. They just do everything. I just want you to do everything. I don't really want to be bothered with thinking about this. Just do everything and present it to me. And I'll tell you what I like and what I don't like. OK, that's good. But sometimes I work with clients or I work with writers. And the writers want to make changes. So instead of them putting little post-it notes on my PDF, which is the way we used to work, we'll work in this way. And so now my writer is going to come across. And she's going to go in. And she's going to rewrite the labeling for this. So she'll just write it right in there. So that's good. And then when we're kind of figuring out our structure for the site, she can just, you know, she can kind of come in. So this works really simply. You just double click. And so if we want to change admissions to, let's say, let's change that to apply. So now it's been updated in real time. And we can all work on this together. So this is a really good way to get really facile with how we kind of break down our diagrams. And when you have big sites like this, that is really important because it's a mess when you get into your mock-ups and or you get into your page development. And then you find out that, you know, well, we didn't really like the structure of this. Anyway, so what I do is I try to insist that the client spends a little time looking at this so we know where we're going. Then once we kind of wrap that up, we move to another tool that I really like. This is called SlickMaps. I don't know if you guys have seen this yet. It's really just a CSS. And it's free. You just go to, if you just do a site for a search for SlickMap, you'll find that this guy has been posting this for many years. It's really great. You download it and you just go on the back end and everything is in CSS and HTML. And so you can get this all together and then just upload it to a site. And then you can present the client with a very finished looking diagram. Now, of course, we could do this in Illustrator. We've all done that. Actually, I like to work in InDesign. I feel much faster in InDesign. But Illustrator is good too. But the nice thing about this is that it's live and it's online. And again, it's one of those things where you can make changes to when the client's looking at it. Some other tools I like to work with. This is a tool called Xscope. Has anybody used Xscope before? Xscope is really, it's a great screen tool. Is that for me? Yeah. Really? Were that one? Yeah, we're running a little short on time. OK. Oh, man, I'm going to have to do this really fast. OK, Xscope, great tool. All these are all screen tools that you can actually measure on your screen. Has anybody ever tried to do that? You kind of just put a ruler on the screen. So you can do all these dimensions. You can find out about text. You can find out about colors. Great stuff, right? Sketch is another tool that I don't even have the time to get into. But a lot of people love this tool. We're just starting to use it now. What that allows you to do is create mock-ups for your web design projects. And then you can hand them over to the developer. Or if you are the developer, you can hand them to the client and get mobile views and everything like that. All right, I'm going to work quickly here. So content and ideas, right? We all, while you're designing, you want to populate your site with content, right? What kind of content do you want to populate with? Images, copy, iconography, brands, and brands of the world, those are pretty common websites. I'm sure you guys have seen those. This is kind of cool. It's you can download common household names, brands through vector files, things like that. Great stuff. The other thing that I wanted to mention, one of my favorite new tools is the noun project. Anybody heard of the noun project? Great stuff, right? This is really, this is like, this is gold to me. Because remember, I was telling you about icons and using icons in your design. So you can get a free version of this, but you can search for your icon and it'll bring it. So let's say you want an icon on networking. So it will give you a series of icons to download these in an SVG file or a PNG file. Sometimes I'll use this just for ideas. So this is really a breakthrough. I mean, when you think about design, like we used to research design, we'd spend hours just scouring design publications and image libraries. So now the fact that you can just kind of pull stuff up and look at it is pretty amazing. So that's the noun project. There's other things like that for icons, but that has by far been my favorite. All right, so tools that I like to use for color. So when you're building for the web, you're always thinking of hex colors. Make use of your color scales and a lot of your hex colors can be found here. I find this to be much faster than just trying to go into a palette, pick a color, and then refresh your screen. I like to kind of work with this. W3Schools also has one of these. If you guys are familiar with that, this is a really good one. Actually, the thing that I like most about it, I use a lot of really soft grays. Oftentimes when you want to distinguish between panels in your website, you want to kind of separate them with just subtle changes. Remember, elegance is one of the things we're after. So I may just look at various versions of soft gray or white. So that brings me, we can talk forever about color. It's a great subject. But what I wanted to do is talk a little bit about some of these page builder themes. So one of the things we started using this last couple of years, I think. And we're still sneaking up on Gutenberg, but we're not quite there yet. We've been using a page builder called Divvy. Wharton, which is one of our clients, uses a page builder called Visual Composer. It's OK. It's a little wooden, a little bit stiff. Again, we're designers. I count on the developers to do all that heavy lifting. And then we kind of come in and just make use of their tools. We use Divvy because it's a modular design interface. And if you're a designer, you love that stuff, right? So check it out. I think I have a second stay with me. So does anybody else use page builders? Feel like anything strikes you fancy? I use Beaver Builder. Beaver Builder School, I have that on my list. Yeah, we've been using this mostly because we're familiar with it. The other reason I like Divvy is because the guy who devised it really is, I think, a very talented designer. So out of the box, it looks pretty good. The type is all the decisions are kind of made for you. But that said, there is a tremendous amount of leverage that you have in all aspects of this. So if we're just looking at pages, so we can look at our home page. Now this is just our studio site. So the thing that I like about it is that, so this is your back end, right? So you can label everything. It's all done in modules. You set up rows. You drop in images. And then each item that you use has a very nuanced set of tools that will allow you to make modifications however you see fit. So when I was telling you earlier about giving your overview on the site, allowing the user to get into various places within the site from the home page, this is one of those examples. Another thing that we do. So let's see if we can find this. So the site that we are working on for one another time. So this is a big mess of a site that we're working on. A lot of times, what we'll do in sites like this, we will just create these very deep scrolls that have panels that will get you into the site. Now when we actually, so again, a lot of times we're just working, now this guy is a sculptor and he gave us gorgeous images. So we did very little. We just really worked with the power of his images. And that got us where we needed to go. Is that built with Divi? These are built in Divi, yeah, right. So again, this is another site where it's just a lot of, this is a product site. This woman just has a little kind of homemade craft business, but we just really, really just work with photography, things like that. Another tool that we like in Divi, or I'm sorry, in WordPress that I should mention, is only one migration. So what we'll do is we'll diagram the site, sketch it out, develop it, get it as close as possible to where the client can look at it and think about it in the comments, and then we'll put it up in a subdomain and give the client something to look at, and then we'll move it from the depth site to the final domain. And we do that with this tool called Olin One WordPress Migration, which is an awesome tool for moving sites. I highly recommend it. It's free. And as far as I could tell, it's bulletproof. Are we up or do it? Or is that five more? That's fine. Five more? We're going to do it. It's very nice. Plugins, everybody has their favorite plugins, right? See if there's anything else we can talk about here. I'm trying to keep it in the design topic. These are things that most people already know about. Let me move on to Sandbox sites are great. So one of the things we do in Sandbox sites is we try to play with things like parallax. And we explore those. And these are all just different ways of understanding how to dispense information and how to work with those. Some other things that we like to do is, so here's a site that we just did for a client. And we'll just show you this. So this is a design client of ours. They have a little design studio. They wanted us to build their site. So one of the things that we did was we worked with just a range of dividers, like ways of dividing up their panels. So this is their portfolio site. And all we really wanted to do was just have this series of panels that flows by and just displays their content in a way that works well. And then at the bottom, we deliver the navigation. We repeat the navigation of the portfolio with iconography. We might be out of time. Let me see if I can sneak in or two more things. Let's see. I think that's probably going to do at least my presentation. Are there any questions, anything you guys like to talk about? Is there are there tools that somebody uses that they like better than something that we just showed here? Does anybody use any kind of a mapping tool or a diagram tool that they like to talk about? Well, I was going to say, we use Lucidchart a lot, but I like the look of this Mockingbird a lot better. Yeah, it's so easy. The thing that I like about Mockingbird, and one of the things that I didn't get to show you was, when Mockingbird, you have this whole set of elements, and you just kind of pull them in. And it's all the things that we work with. So obviously, we use a lot of these kind of panels here, when we're doing our diagrams, and then you just drop the type in. And again, the nice thing about it is that you can work with your team as you're doing it, or you can work with your client as you're doing it. Yes, sir? Or if you're just using the NEL team, sometimes you find your post types or one-third of the post types or fields on the other page. Two plugins that I use, it's Advanced Custom Fields. Advanced Custom Fields, yeah, we use that as well. If you want to get repeatable, it's a really great tool. You can take one, so it's free forever. And the second one is just Custom Post Types. It's good. It's a spin up, obviously, Custom Post Types. Yeah, no, that gives you great range. I mean, a lot of the times, we'll use this stuff. The reason why we like it is we'll work really fast and loose. And that's why we kind of like this stuff. So this brings us back to working as designers. When I first started building websites, I didn't really like the counter-intuitive aspect of it because we just wanted immediate results. And when you build, it has to be done in this process that's a lot more deliberate. Yes? And what's neat is that it presents you with a basic color, starting on pallet, or five colors. That's great. Every time you put a spacebar, it generates a whole new set of colors. And as you start to like to your colors, you can walk it down. And then only the other four will change, et cetera. Or you can put your own, if you know, that you have one or two client colors that have a different value, and then walk those down and see the other two from the change until you find a pallet. Wow, I didn't see this for the first time. Yeah.