⛺️ WordFest Live - The Festival of WordPress Catch Up Now
The festival of WordPress
March 4th 2022
Brought to you by

5 Quick Design Tips To Level Up Your Web Designs

Session overview

What to expect:

This talk is aimed at making people better at design. This presentation will teach people some of the most essential but basic design principles to follow. It will also cover a few quick tips to make them almost instantly better at designing amazing looking websites.

Edit Transcript

Corey Dodd – 5 quick design tips to level up your web designs

Nexcess: [00:00:00] Oh, great. My website crashed again, I give up. Don’t give up on your dreams, Jordan! Who are you? It’s me. You from the future. Your professional website is not out of reach. You just need Nexcess. With Nexcess managed hosting, you get lightening fast load times built-in performance monitoring and updates, and always awesome support, 24 7 365. For all your projects. Whoa. Yeah.

Weglot: Discover Weglot the [00:01:00] simple translation solution for your website. All you have to do is add Weglot to your website, select the languages that you need, and that’s it. Your website is now available in multiple languages.[00:02:00]

Yoast: Do you know, the Yoast SEO, plugin, the red, orange, and green feedback bullets that help you optimize your posts for the web. It runs on millions of websites. We try to make SEO understandable and accessible to everyone.

Bluehost: Who says building an online store has to be hard with Bluehost website builder. It’s more than just easy. It’s tell us your thing and smart AI will take it from there easy. It’s WooCommerce friendly. So you can add one of these or swap this for that easy. It’s set up shop in minutes with unlimited products, easy. Whether you sell boots, books or bowls, it’s create an online store with Bluehost, easy build beyond boundaries with Bluehost.

Olamide Egbayelo: [00:03:00] Welcome to WordFest! We’re in Asia now, and as part of our 24 hours of celebrating the people, the technology and the Big Orange Heart of WordPress, WordFest Live, not only delivers a festival educational content, wellness sessions and networking opportunities, but it is also a fundraiser for Big Orange Heart.

Olamide Egbayelo: Please visit that donate link at any time to support the mission of our organization. WordFest Live is a 24 hour opportunity for the WordPress community to come together, to feel less isolated, learn from one another and be present with each other.

Olamide Egbayelo: Our first speaker in this region is Cory Dodd [00:04:00] with five quick designs tips with five quick design tips to level up your web designs. Corey’s a 20 plus year design veteran and the agency owner and agency owner based in Geelong, Australia. He has built, designed team. And directed large scale projects, mentored designers and developers in both one-on-one and group settings, and works with a huge number of national and local brands across the country.

Olamide Egbayelo: Corey helps designers, improve the skills and teaches them how to build more profitable businesses using the power of design. So let’s welcome, Corey!

Corey Dodd: Hello? I hope you’re enjoying WordFest. Thanks for taking some time out to listen to me talk about [00:05:00] design. This is my presentation called the five quick tips to level up your design.

Corey Dodd: And in this presentation, I want to walk through what it means to do better design work. I believe when we do better work, we can charge more and we get to work with better clients. Design has been extremely valuable for me. It has paid for my entire life. So who am I? My name is Corey. I’ve been doing this for over 20 years, nearly 25 years.

Corey Dodd: I’ve worked for all sorts of places, small agencies, large agencies, national agencies, and I run my own agency, Elk Creative. I have been teaching other designers, I’ve mentored other designers and I’ve recently completed a course teaching designers, how to build websites with no code in Oxygen. I’m taking a bit of a turn here and giving away some of my design tips.

Corey Dodd: So buckle in, because we have a lot to get through. All right. Let’s not mess around. Let’s get [00:06:00] into tip number one, creating layouts, that command attention. Now the best place to start, or the easiest place to start with. This is through the use of hierarchy in our layouts. Now, what is hierarchy and why is it in.

Corey Dodd: Both very good questions, which we’re going to answer now. So hierarchy is essentially a design principle that draws from a lot of different areas or elements of design, things like color, scale, contrast, alignment, position, proximity, and also things like patterns and repetition. Now these can be used individually or together.

Corey Dodd: To bring attention to certain areas of our website. Now hierarchy, isn’t actually about what appears first in a design, but what commands the most attention or where we want to draw the users are. And a really [00:07:00] good real world example of this is something like a podium at the Olympics. Now this is a great example because, well, when we look at this, we can see that it goes from second, to first, to third and naturally the logic would say that we go first, second, third, or maybe third, second, first up to the first place.

Corey Dodd: But what they’ve done with a podium is put the first person in the middle, the winner in the middle, and then giving them an elevated stance. This means that even if you don’t know, or you’ve never seen a podium before, it becomes pretty obvious who the most important person on that podium is.

Corey Dodd: We can really clearly see through the hierarchy there what’s going. Now in page layouts, this is going to look something like this. Now of course, these are just examples. Um, but you can see on the left here that if we’re giving everything the same amount of work, It [00:08:00] becomes almost impossible to pull out anything of any importance.

Corey Dodd: It all just looks the same. Whereas if we look at the layout on the right, what we’re seeing is through the use of highlighting different things with different sizes, highlighting things with color, using space, repeating the same sorts of elements, grouping things together where told a story, and we can focus on one thing at a time.

Corey Dodd: Okay. Now, what does this look like in the real world? I’m going to open up a real world example of a site that I’m working on at the moment. Now this isn’t the full redesign. This is actually just re-imagining this page without actually changing anything. So I want to stress here that, um, that this is just an example only.

Corey Dodd: So let’s take it. Now you can see here, there is a lot going on. It’s probably more problems than actually just simple hierarchy here, [00:09:00] but a lot of this can be fixed just by focusing on some of those areas, areas of hierarchy. Just to get some focus back now, overall, there’s a lot of strength on the, on the fonts there.

Corey Dodd: I want to pull all this stuff back. Um, and generally I want to just pull back, um, of the focus and make it a bit more softer. Um, and then focus on some of the hierarchy. So some of the key things that I can see is the navigation is absolutely huge for no reason. We’ve got headings that are basically bunting up against each other, that we can’t tell if they’re their headings or their buttons.

Corey Dodd: Um, we’ve also got some things. Uh, drawing too much attention rather than not getting enough, like this green background behind the water biodiversity and land projects. For some reason, this is brighter than the other sections there. Those four key sections. And so actually is demanding a bit more [00:10:00] attention.

Corey Dodd: Okay, I’m going to fix these three key areas. I’m going to go through these step by step. So the first thing I look at is just reducing the type of graphy I’ve pulled out that background there, and you can already say this is so much cleaner, but, and a lot more focused. I’ve given it a little bit of padding around the low.

Corey Dodd: And I’ve still got this issue with the contact and the portal buttons. I really believed that the functionality of these is probably similar in the fact that our user isn’t going to use them like the rest of the navigation, that almost like bouncing kind of sections. Someone’s going to land on the site and either click contact and then leave, or they’re going to bounce and head off to this portal.

Corey Dodd: So we might as well group these together. So the person isn’t actually jumping from left to right left to right there’s attention is poured into one area. Now looking at these right now, they are probably too big. I’ve just done this in the [00:11:00] CSS for this example, just to get us an idea of what we’re trying to do, but they do feel a little big.

Corey Dodd: So probably in the real world would scare. Back. Um, but you can see that it is giving that navigation a lot more focus. It becomes a lot more functionable. All right. The next thing we tackle here is these four primary sections on the homepage. What I’ve done is reduced that color, the brightness behind the water biodiversity section, you can see that already more balanced.

Corey Dodd: I’ve increased the sizes of the images, added a bit more padding around the headings, and we can see this is now taking up about half the page. And it’s clear that these are kind of the primary things on the home page. Now it’s to help the user understand there’s four key areas, and there’s a guess four journeys that people can head down.

Corey Dodd: If they’re looking for permit type information, or if they’re looking at about how to get involved, for example, it becomes a lot [00:12:00] clearer that these are headings and their sections within those headings. Now, lastly, I’ve just added a lot and I’m in a lot of space around these buttons. They were being lost again.

Corey Dodd: If I was, if this was a real project, I may be trying to, re-imagine how they look. But really essentially what I was trying to do with this example is show how much impact we can make without changing. Well, the design itself. So you can see here with the left or right. What’s really happening here is we’ve we’ve I guess, got some more focus in the design.

Corey Dodd: It’s a lot more calmer and it’s a lot easier for the person, the user to know what they should be doing at any one point in time. Now. Yes, we’ve lost some real estate. And most of that is through the space that I’ve added around those three buttons down the bottom, but overall, we’re getting a lot more professional, a lot more, um, you know, [00:13:00] user friendly, our layout.

Corey Dodd: Now this design, now isn’t going to win any awards, but it’s certainly a lot cleaner and a lot more professional. And because it’s a lot easier for the customer to use, we’re going to see that there’s more value for our clients. So this really is a leveling up our design without really doing anything.

Corey Dodd: There’s been no changes in the order. Apart from those buttons, it’s just changing the focus. All right, now let’s get into tip number two. Choosing colors that don’t suck. Now this is some color tips or maybe it’s a rant, but it’s colors come up quite a lot. People ask how do I find colors or how do I work with colors of the difficult.

Corey Dodd: Often, what I see happening is people linking to things that are color generators or their favorite color palettes, which is all well and good, but this [00:14:00] isn’t the best way to tackle this situation. Now I’m not talking about situations where clients don’t have existing assets, like low. If this happens and you’re creating some, a website, it’s going to be difficult to know where to start.

Corey Dodd: And it’s kind of a bit of a branding exercise to create colors for them. But in situations where clients have colors, maybe they’ve got a style guide and maybe they’ve got an existing logo. Maybe they have some already existing marketing material. These are the places we need to get our colors. We need to work with the colors that they have, if not, we’re actually doing that client and that brand a bit of a disservice, we’re kind of removing some of that brand equity that they have developed.

Corey Dodd: Now it’s all very good to think about things like color theory. And I’m not going to stop anyone from going down that path, educating themselves on how color works is [00:15:00] great. There are six basic color schemes, or there is a seventh, we’ve got monochromatic, complimentary split complimentary. And now I guess, triad triadic.

Corey Dodd: And there is a seventh one, which is a square a, which is very much like the triadic, uh, color scheme, right there. That’s great to know about these things and how they work. But as I’ve said, if a client has an existing color scheme, we should be working with this. Even if we do not feel that this color scheme is right now, one of the best ways to work with this is to lean into the color.

Corey Dodd: Now a lot of people actually back away from color and they think if I use less of it, then this will help. Now I’m going to show a couple of real world examples where I’ve worked with colors that, uh, almost seemed against the proposition of the brand or what someone was trying to achieve. Now let’s take a look at this first [00:16:00] one here.

Corey Dodd: This project, this was a childcare center and they wanted something that was light and bright and energetic. And this was the logo and identity that they had. Now, this was being used in signage and on vehicles. It wasn’t something that was going to be changed. We want it to work with this color and this well, this logo, and really grab the things in it and still trying to achieve that bright looking website.

Corey Dodd: Now this is what they already have, and this is what a perfect example of someone pulling away, um, rather than sort of really grabbing those dark colors. Those. Bright oranges and the yellows, you haven’t even used. The black of condom pulled away from this and used colors that were, um, like white. And even in some examples, there were stuff like sands in, et cetera.

Corey Dodd: [00:17:00] Um, in the other pages now that’s the only screenshot I have left of this site. Um, there is another example of how they were using this on their marketing material and the stuff that we’ve done with them. So this is the actual site. This is what we’ve produced for them. And you can see I’m really actually embracing that dark color.

Corey Dodd: Um, now there are four sections in this where the colors like the orange and the reds take over the whole screen. They really become a key feature, but this is still light and bright, have introduced a few graphical elements, um, a few playful things to sort of add to that tone. But all up, even with the use of strong colors, light blacks, and reds, we’re still able to make something that is really bright and vibrant, which is a part of the brief.

Corey Dodd: Again, let’s have a quick look at how this was used before and after in their marketing. [00:18:00] He can see again on that left side there, that they were almost probably scared to embrace that black. So that views this sort of like a wood grain in the background and these white areas. Whereas we’ve now embraced that black as a part of it and using those colors to sort of punch through and really give some bright vibrancy.

Corey Dodd: Now it may have felt wrong to have worked with the black. Kind of embracing that and embracing that dark color really come up with something that’s A unique, B on brand, and C still fits the brief of creating something that’s brought energetic and well suitable for a childcare center. Now I do have another example where a similar thing happened.

Corey Dodd: Now again, I’ve just got the left and the right examples here. Now this is another children’s charity or it’s another child based, um, client, but it’s a children’s [00:19:00] charity. Now their logo literally has like seven or eight colors in it. And the old website and the old marketing material didn’t really embrace the current.

Corey Dodd: They kind of just use a little bits of the colors as highlights here and there. Um, you can see that donate button isn’t even the right color. So there we go. Now, what we did when we started working with them was we actually embrace that color a lot more. A core thing that we did was we chose a one color as the hero, which was the blue.

Corey Dodd: And then we using all these other colors as highlights and we’re using them quite often, actually every single color is represented in the site, even for blog categories and things like that. But the real important thing here was the, we embraced that color now. They’ve actually gone on to use this as their marketing material and their, and their base for their marketing material.

Corey Dodd: They’ve even had vehicle wraps, et cetera, done with this. So you can see what [00:20:00] happens when we actually embrace some. Now working with color is actually a lot of fun and it can be challenging, but if you change your beliefs around stuff that you don’t like, and actually really lean into the color, you can look for solutions in there that still fulfill the brief.

Corey Dodd: And again, this can really elevate your work and make it stand out. And so it looks better in your portfolio and it’s very appealing. You deliver more value to your customer. So that’s the last point on to make about color? All right. On to tip number three, getting your spacing. Perfect. Now this is all about white the space, and you may be thinking with white space of something that looks out a little bit like this.

Corey Dodd: Now, this is a project I’m working on at the moment, and yes, it’s uses a lot of white space, but I want to point out that white space has [00:21:00] nothing to do with the color white. You have a white space on any color background or with any image background, but it’s essentially just the space that we have between elements that gives it room to breathe.

Corey Dodd: Now it’s a great tool to master. And it can actually really change the tone of a business’s website, make it look a lot more professional or cheap, depending on the amount of space that you want to use now. Yes, not every single website we work on is an expensive product. And so we can change the amount of white space, but there are still some simple things that we can look out for with spaces.

Corey Dodd: But if I’m going to give one tip around white space, it’s that we should be giving it more white space than we normally do. I very rarely see websites where there’s too much space and I always see websites where there’s not enough space. [00:22:00] So again, let’s have a look at a couple of quick examples here.

Corey Dodd: This is a website that I have with a client, and this is the. I want to show you the after and there’s a lot going on here, but you can already see the amount of white space that’s been added to actually change how this looks. The design has changed a lot overall. So I’m going to focus in on a few elements on the actual page and just break down where some of the white space has been used to add a little bit more of, um, a little bit more class and a little bit more focus.

Corey Dodd: So here, we’ve got essentially the same content. We’ve got your local acknowledgeable global opportunities and our vision. Now what I’ve done here is actually allowed more space, um, between eight elements of the stuff isn’t so crammed in. If you look on the left-hand side, we’ve got a few spacing issues where our, [00:23:00] our vision has a strange gap between the text and the image.

Corey Dodd: But then the space top and bottom between where the text is and in the gray box, it’s all really, really tight. Um, and this just makes it feel kind of cluttered and almost claustrophobic and contrast what I’ve got here on the right hand side is something that really breathes as a little bit less content on the actual page, but it has a lot more focus and a lot more class.

Corey Dodd: Again, let’s have a look at another element here. We’ve got four projects and we are saying, take a look at some of our latest projects. And there’s a few key elements here. There’s a few differences I’m using rollovers. So when they roll over, they see that additional information rather than trying to ram it all in.

Corey Dodd: But if you look on the left-hand side, there’s some examples where the text gets crazily close to the buttons, and this just makes it look [00:24:00] really really cheap or that it hasn’t been planned out very well. So this is just something to keep an eye on to, to pay attention to where spacing really, it matters. Now you can just see the difference.

Corey Dodd: I’ve used a logo and the image is just adding so much stuff. So by reducing some of those things, um, we’re actually making it easier for the person to understand what it is. All they need to know is that these are projects. These ones have been sold out, and if they want to click the view project and they can find out that information, they don’t need to know all of that stuff upfront or were making that assumption.

Corey Dodd: All right now, this is the last part. This is just looking at something that’s really, really obvious here. This is a part of their footer in their about page. Um, and we’ve got some core values. Now I’ve used up a lot of space around this. Um, I’ve got that information centered. There’s a lot of space above and [00:25:00] beside these values and it really just makes these things feel like they’re important.

Corey Dodd: Now, this is actually the values of the businesses are the things that they’re meant to stand for. This. Shouldn’t be like cluttered and an an end note that hasn’t really been thought through in the website design itself. So it’s really important with our white space, what we’re saying and what we’re trying to achieve.

Corey Dodd: And that’s really important. The way that we use space actually tells a story and just like hierarchy it, they kind of go hand in hand. It gives us some room to breathe when we’re looking at content and it just adds a level of class to the work that we do. So pay attention to white space, make friends with white space and now on to tip number four.

Corey Dodd: Why [00:26:00] keeping things consistent is the key. And yes, this is all about consistency. And this might be an angle that you’ve taken with clients yourself. So why is consistency important? Well, when things are consistent, they are familiar. When they’re familiar, we are comfortable with them. We want to learn things like where the navigation is, and we don’t want to relearn those things.

Corey Dodd: When we jump from page to page, we want to feel like we’re in the same place. Yes, we want a little bit of variety, but we don’t want to feel distracted or uncomfortable because the opposite is true with consistency. When things are inconsistent, they lead to people feeling uncomfortable. They lead to them, subconsciously questioning other things like the quality of the actual supplies.

Corey Dodd: That’s a really big deal. And that’s why consistency [00:27:00] is so important. Now I’m going to try and show here the balance between getting things consistent and having things as well, quite various at the same time. And that is a bit of a balancing act. Now there are a few things that you can do, and that is setting like global ideas.

Corey Dodd: Having global colors and having the same amount of spacing, getting those things right, is really going to keep things consistent. But let’s take a look at a bit of a project and we’ll just go through some of the difference between the old site where things are consistent and then the new one. So you can see here, this is a site I’ve worked on for content snare, and this is the oldest site.

Corey Dodd: If we go through each page, what you’ll see. Is that there starts to get some inconsistency in consistencies, around the colors that are used, the amount of space for areas, the sizing of fonts, the types of backgrounds that are being used, [00:28:00] the lack of backgrounds and even the height of areas. So if we look at those exact same pages where we’ve got the home page here, now, this is the rate is on.

Corey Dodd: It’s a totally different brand. I understand that we’re just actually looking at the space here, not the brand that I’ve created here. Um, and this is a totally different design, but you can see, there are some things we’ve got here. Like if we jump from page to page, we can see that these all have the same sort of height.

Corey Dodd: Um, for the, the actual header. We’ve got a similar thing where we’ve got a little blue heading the white, heading blue, heading white heading. We’ve got this large text. And we’ve got large texts used here. These things are kept the same size, but even when we jump from this templates page here and our home page, this goes from a dark purple to a light purple.

Corey Dodd: But the spacing here where this.is, and though that bright goes from the purple and on this one [00:29:00] where it goes to the white is the same. We’re keeping all of that spacing feeling very consistent. Now the reason why this is so important is because we’re really showing the users that they’re in the same place, getting things consistent was actually a really important part of this project was something that people had pointed out to them and they knew that consistency was an issue.

Corey Dodd: Now, one of the things that really helped with this was to actually design everything upfront and not to design in the browser as we go. This meant that we had a total overarching idea of what the site was and what elements we had. And then beyond actually just creating a few core pages rather than designing a page by page.

Corey Dodd: We actually created a pattern library. So what our call to actions would look like what our cards would look like, custom layout, our [00:30:00] heroes, our signers, various things like that. We created a library for this, and that meant that we kept the zone, the design itself, and the website really consistent, but also vibrant and energetic at the same time, it gave it a really polished look and an amazing end result.

Corey Dodd: So keep working on consistency because it is the key. All right now on to the last point, point number five, using typography to say more. Now, obviously this is about typography, which is a big topic. If I was going to pick a one thing to talk about with typography, it is the personality of type choosing the right typeface.

Corey Dodd: It really is important. A lot of people have their go to typeface and Montserrat won’t fix every problem. So what we need to consider. When we [00:31:00] choose a typeface is what we’re trying to say. Look at the topography and see what it says, how it makes you feel. It becomes pretty obvious when a font is elegant or when a font is fun.

Corey Dodd: Now, I’m going to show a couple of examples and I’m going to actually point out my website and I’m going to show that we’ve the actual type just quickly messed up. So you can see here that I’ve just used a default font and. Totally totally changes the actual personality of the type there. And you can see, this is what I actually have led with.

Corey Dodd: This is the type that I do use, and this is sort of friendly type, and that’s a really, really important let’s put them side by side and you can see the difference here. So yes, there’s one that has a separate weight, but it’s more than the way it’s actually the letter shapes that actually change. Feel of the design itself.

Corey Dodd: It [00:32:00] changes the message that we’re trying to communicate. And I’m going to move on and I’m going to show you another example. I’m using my site again here, and I’m going to compare this to my agency site. So this is the site for the agency that I run. And this also has a typeface that I would say is a little bit of fun as well.

Corey Dodd: It’s got some personality, but it’s clearly a little bit more considered. It’s trying to position me as. Uh, a conscious and authority person. Who’s thinking about design and that’s really important, but it still has a fun and casual element. If we put them side by side, we can see the difference between them.

Corey Dodd: The left hand. One is well. Childish, but it really, really is inviting. And it really is trying to say that I’m a friend, that’s literally what the word says, but the typeface as well, I’m trying to actually be really, really casual, but really, really friendly. Now on the right hand [00:33:00] side, I’m still trying to show that I have personality, but it’s just a lot more serious.

Corey Dodd: So the important thing that I want to point out with type is how much personal. Actually conveys. So should think about the typefaces that we use because when we choose the wrong type face, we can send the wrong message and the wrong type face or bad typography can really let a design down on the whole.

Corey Dodd: Now, if we get it right, we can actually elevate how designs and come up with something that is far superior. And that wraps up the presentation. Thank you very much for spending your time. I know we covered a lot and it was a bit of a whirlwind. So hopefully you can see that just by applying a few basic design principles, how much you can level up your design.

Corey Dodd: Now, if this [00:34:00] is something that is of interest to you, I will be sticking around and answering questions, which will be super exciting. But also I’d love to hear your feedback. Email me [email protected]. And now that I’ve finished my Oxygen course, I am considering putting together a course about this. So visit the site, https://coreydodd.com.

Corey Dodd: Look for the course design masters, and sign up to express your interest. I’d love to see if other people are interested in learning about this. All right, let’s get these questions going.

Olamide Egbayelo: Thank you Corey, that was a really awesome session. Um, I learned so much about, um, designing and all of that, but yeah. Welcome to welcome everyone to the question and answer session. If you have questions, please do not hesitate to share with us.

Olamide Egbayelo: Okay. So I have quite a number of [00:35:00] questions here. So you talked a lot about consistency, so how do designers stay consistent? I mean, you have to think about tools you need to use and getting the best out, and then you still need to be consistent. So can you tell us more about that?

Corey Dodd: Yeah. So consistency really is one of the most important things. I think when you’re working within specifically a website, it shouldn’t be so hard. It gets harder when you’re walking, working across multiple. Multiple projects or multiple mediums. So if you’re working on a print document, for example, um, as a designer, my job is generally to create style guides for brands, and that helps with keeping that consistent.

Corey Dodd: It gives people an idea. Um, you know exactly what type of graffiti they’re using, um, you know, how they’re meant to talk even in their, in their language, um, and how design elements should look and how they should feel. Um, but when you’re working on your own projects, it’s really about, um, creating I guess, a group of rules that you [00:36:00] want to, to, to have as, as your, um, I guess to structure the website around, um, and a really good way to do that is to design one part of the website.

Corey Dodd: First, maybe you’re designing up the homepage and then try and look at ways that you can reuse elements. And then rather than sort of starting from scratch, using the exact same elements and just slightly changing them, you know, to suit the content you’ve got right, rather than re-imagining them every time. So I use really like, um, well-defined color palettes.

Corey Dodd: So the color palettes I use are often quite small and I’ll stick to them quite rigidly. I won’t add the new colors just because I, um, I want to, and I think that’s another thing about consistency. It’s about, it’s about working with the things that you’ve got and sometimes you feel like you want to do something just because you want to, because it feels final because you think I need to draw some attention.

Corey Dodd: And it’s trying to get away from just doing the things that are, that you desire to do, just because it [00:37:00] seems like fun and just sticking to the, to the rules, which sounds boring. But if you work within it, you actually get a lot better work, a lot more consistant work.

Olamide Egbayelo: Oh, great. Thank you for the wonderful answer. So, um, before I go to the audience questions, um, I also have one other question for you.

Olamide Egbayelo: So, uh, talk about planning. Um, planning is actually one of the most important part of design. And, um, so what, how many hours do you think. What duration do you think that the designers should focus on planning the design process? So how long should the design process go in? How long should you plan?

Corey Dodd: Yeah, that’s a tough one. It depends on the size of the project, obviously, but if you’re talking about something that’s, you know, I don’t know, let’s say you’re talking about something. That’s got five or six screens that you’re trying to design. Um, look, I’m easily be sinking 20, 30, 40 hours into. Which seems like a lot of [00:38:00] time.

Corey Dodd: Um, and some people, they, they don’t want to spend that time. Um, but it really is important for me to get the work again consistent, um, to get it to the best out of that I can and I’m charging for that time. Um, and that’s really important as well. Like. Th th the better work you can do that. The more attention to detail you can give you design, um, the more you can charge for it, the more you’ll stand out.

Corey Dodd: So that’s sort of the whole point of this talk really to make you work better, um, and make yourself more attractive to clients to make your work more valuable. Um, but yeah, look, I do take the design side seriously. I’m not the fastest worker either, and that’s, I have to allow for that. Um, but I think it’s important.

Corey Dodd: It’s not a sort of explaining. Um, you know, there are some people that, that kind of, um, try and rush the design process, or don’t have a design process and now, you know, designers, they go. Um, but even if you’re, if you started to add some design time into your process, now [00:39:00] the time that it saves you is huge.

Corey Dodd: So if I’m working on a, on a large project or I do design for someone else, um, the amount of time that that’s saving them by having all of the decisions, um, already made up, like all the decisions made. In the design process really is. Um, yeah, it really is saves a lot of time in the long run.

Olamide Egbayelo: Alright, thank you. So, uh, we’ll have a question from the audience. We’ll have a question from Jenna. So Jenna is asking, do you have any go-to resource resources for things like padding others, struggle to know how much space to put.

Corey Dodd: Ooh. So the short answer is no, I don’t have any resources that I use if this is all done by, um, training and, and, um, from years of experience, uh, as far as things like padding, it’s generally more than what people people allow for currently.

Corey Dodd: I think a lot of [00:40:00] people, um, the common mistake is real estate. We always think about real estate and you know, I’ve been in the industry. Uh, a long time. And that used to be something that people would talk about, like how fitting stuff above the fold and fitting more stuff on the page. Um, but we’re used to scrolling around on websites.

Corey Dodd: We use that stuff all day that, you know, Instagram and Facebook and all of these apps that just scroll forever. So it’s about using the right amount of space. So I wouldn’t allow more space. It’s just about allowing the amount of space that gives the user a chance to focus on the most important thing or one, one or two things at a time.

Corey Dodd: You don’t want them distracted. Um, so that’s really important. So I don’t have any go-to resources. I do treat this on a, um, You know, project by project basis when I’m, when I’m working on it. So, um, yeah, the only tip I can give specifically there is to, um, you know, specifically around space is to give yourself a little bit more space than, than what you probably think.[00:41:00]

Olamide Egbayelo: Okay. Um, thank you, Jenna. I hope, um, Corey has answered your questions. Uh, remember you can still drop your questions in the live chat, Corey is here for, to engage. So, uh, I mean, I have another question for you. Um, so you, you said you don’t have any go-to or resources. I mean, as, as a designer, you should have, um, most have tools that every designer should have or should be able to use very well.

Olamide Egbayelo: It could be planning tools, it could be designed tools. It could be tools that help you to stay consistent. It could be productivity tools. So can you share some of your, really, go-to tools with us?

Corey Dodd: This is my favorite tool. A bit of paper and some pencil. It sounds really stupid, but, um, yeah, it’s my go to thing. I’d start. Yeah, it doesn’t matter if I’m doing branding or [00:42:00] I’m doing, you know, um, website design. Uh, I can just sketch ideas out really quickly and often move to all just really rough ideas.

Corey Dodd: I’m not drawing what a website design would look like, but I might sort of try and map out the hierarchy of the content. So what content I want to go first. And it’s just an easy tool for me. Um, but as far as the main tools that I use, uh, I’m a creative cloud person. I’ve always been using Adobe. I don’t think that the tool really matters.

Corey Dodd: It’s about the attention to detail and sort of spending some time. Um, one thing that I do believe with Adobe though, as it is kind of an industry standard. So if you’re looking for employment opportunities and stuff like that, if you, if you’re just going to work for yourself, it doesn’t, it doesn’t matter so much.

Corey Dodd: But if you’re going to want to get employed. So sort of standard tools that you want to know about these days are obviously the Adobe creative cloud suite. Um, things like Figma and Sketch are also pretty important [00:43:00] for, um, you know, the web design industry, but there’s a lot of other tools out there that I know people use all the time, like Canva and that sort of stuff.

Corey Dodd: Um, at the end of the day, whatever helps you get your ideas out. It’s totally fine, but I am all of my web design is done in XD, so I’ll use creative cloud. Um, and I like XD purely because it is a Adobe product and I can move between the programs pretty easily. So if I need to do some illustration work, I can quickly open up, um, illustrator and start, you know, making up some, some ideas and then copy that into an XD file.

Corey Dodd: If you’re using. Figma or Sketch you, you know, it’s harder to open up. Um, th th that’s just my personal preference, but I found it harder to work without the other creative cloud pro programs, but I noticed so well.

Olamide Egbayelo: All right. Great. Thanks for sharing. We have another question from my audience. Um, [00:44:00] Fernando Eiella is asking redesigning in the context of keeping a client sites performant, performant. How does one deal with clients that want, or need homogeneous videos or pictures on the on page?

Corey Dodd: Um, that’s a tough question. So I think that as far as like, you know, optimization and what you’re trying to achieve in this design, if something needs to be fast loading, for instance, That’s a conversation to have pretty early, um, and really try and address that.

Corey Dodd: And I know there is the school of thought that the client’s always right. Um, but then there is the school of thought that the client is hiring an expert. So, if you can kind of position yourself as someone who, um, is an expert and takes less orders, so you sort of diagnose problems and, and that’s the best way to start with that.

Corey Dodd: So rather than starting relationship with a client [00:45:00] where they’re dictating, what you do, you essentially say that, what are you going. You’re trying to work out what those goals are. And then when you present design ideas back to them, you explain how those, um, those design ideas have helped help the client meet those goals.

Corey Dodd: And then when I have ideas that are actually not going to help them, that are, that are, that are, I don’t want to say bad ideas, but let’s say bad ideas. Um, I explained to them that it doesn’t help them achieve their goals. It’s so it’s really not about my personal taste versus the clients. At the end of the day, I don’t, I’m not to design things that I like.

Corey Dodd: I’m designing things that are going to work for their customers and help my clients achieve their goals. So if you start with someone’s goals, what they’re trying to achieve, um, that’s probably the best way to tackle.

Olamide Egbayelo: Oh, awesome. Um, I hope that’s Fernando. I hope that Corey has been able to [00:46:00] answer your question. So I know that, um, I still have another question for you while we wait for more audience questions. So I know that, um, this session is what’s clearly for designers, people who are already professional designers or intermediate or expert designers.

Olamide Egbayelo: So, um, um, I just want to put you on the spot here. What teams do you have for beginners? Because I know that there are people who are just taxing or about study design journey and, um, they have listened to you. They’ve watched you speak about this teams and all that. So can you tell us, can you list about four to five things that it began as designers should look, you know,

Corey Dodd: I was actually toying with the idea of speaking about developing your eye. And I think that’s one of the most important things with getting better at design or I’m doing good design is actually, um, one being [00:47:00] interested in design and, and seeing seeing it in the world, you know, noticing what things do you like noticing what things other people like, and then trying to work out why they liked them.

Corey Dodd: And that doesn’t need to be websites all the time. You know how someone likes a pair of shoes or someone likes a certain car. It’s not to your taste, trying to understand what it is about those things that, that are appealing because, because design isn’t just about, um, the visual elements. It’s it’s about how things work and how they function.

Corey Dodd: So yeah, developing your eyes is really important. So keeping up with trends, working out what stuff looks good to you. And, and so that’s number one. Um, another thing is. You working out your vocabulary, so you can actually talk about design and it’s, it’s a tough thing to do. And, um, it’s a skill that a lot of people, uh, lack, being able to explain their designs in a way that isn’t talking about nonsense.[00:48:00]

Corey Dodd: That’s all the fluffy stuff about design. Um, so it’s really important. Like I said, in the other point about having goals. And so our tip here is to when you’re taking a design brief with a client, or you’re taking that, you’re doing a discovery session. For example, if you’re asking them about the things that they like, um, really keep your ear open and listen out for the language they use.

Corey Dodd: So if someone’s saying the words, you know, fun or bold or bright, um, you might want to slow that down and work out what that means to them because someone’s idea of fun might be. More conservative than yours. So it’s working out what they actually mean because they’re subjective terms, but then also remember the words that they’ve used.

Corey Dodd: And then when you talk about. Use the same language. So you presented design back to someone and say, look, this is really bright. It’s really bold and fun. And they go, oh, that’s exactly what I wanted. And it’s just through the language abuse. So that’s another tip or what’s another tip for beginners. Um, just to, just to design for fun.

Corey Dodd: Like [00:49:00] when I first started designing, I would design for fun. I’m not talking about designing for free. I don’t think people should design for free, but I think they should design for, for fun. So I think, I think if you can design stuff, um, you know, Play around in the space, even now I’ll, I’ll still, you know, I try ideas out.

Corey Dodd: I’ve been doing this for too long, 20, over 20 years and I still just try out new ideas just to see where they take me. Um, and also look at things. And if you see things that are cool, that’s another, that’s probably the last thing. If you see things that are really cool, just create, uh, a memory bank or some sort of way of capturing images of.

Corey Dodd: Keep it in a folder of things that you like, things that you think are fun. Um, I know there’s stuff around stealing ideas, but as far as the idea of, um, stealing versus inspiration, to me, the idea of where that crosses the line is if you look at something and you’re directly copying it, um, versus getting [00:50:00] inspired by where that line is.

Corey Dodd: There’s a, there’s a thing where if you steal from one, if you take it from one source, it’s stealing and if you take from many it’s being inspired by it. So if you have lots of things, if you’re getting, um, your colors from over here and then you’re getting, you know, the topography ideas are from here and you’re getting spacing ideas from.

Corey Dodd: Then you really just being influenced by a whole lot of stuff, rather than directly seeing something you love and trying to copy it. So keep things that you think are cool. Keep them in a file. And just, you know, when you’ve got a new project to start and it seems like something that’s fun, maybe you look at the things that you think are fun.

Corey Dodd: If you’ve got something that’s meant to be corporate, look at the things that you think are corporate that are really cool and try and try and get some inspiration.

Olamide Egbayelo: All right. Thank you so much. Those are really wonderful tips and talking about inspiration. We have a question on inspiration. Okay. So, um, Jenna is asking, where do you find you find your inspiration?

Corey Dodd: Yeah, [00:51:00] that’s a really good question. So I try to be pretty mindful. My job has designed and that’s what I do. That’s essentially all I get paid to do. Um, and that’s branding websites. It’s all sorts of stuff. Um, where are trying to get my inspiration is generally not from the job that I’m working on. So if I’m doing a website, I try not to go look at websites to get inspiration.

Corey Dodd: I’ll try and look in magazines at, um, you know, brochure, layouts and stuff like that. Um, and when I’m doing branding, I like to look into stuff in the real world. Like if you go out and know. You know, notice things on buildings and stuff. For example, that’s always really good. I’m not the sort of person that opens up Pinterest and then types in, you know, whale logo, if I’ve got a client that needs, you know, a whale for for a logo.

Corey Dodd: That’s I think that leads me to a very specific place. Um, so I try to look at things that aren’t literally what I’m working on, stuff for me to do. So I’m not gonna sit around and look up website inspiration. I don’t think there’s. Wrong [00:52:00] with doing that, but that’s not where I get my inspiration myself.

Corey Dodd: Um, and we’ve finding inspiration specifically, if you’ve got a website to do, and let’s say it’s a fashion website, you know, there’s nothing wrong with opening up Pinterest and topping and fashion websites and finding cool ideas. Um, but I would go back to that constant concept that I said before, grab, grab 50 ideas that you like, put them in a folder, look at them, absorb them and then try and come up with something. But look at the things that you like to understand why you like them. If it’s about big type of graphy, then you know, you want to work with big topography. If it’s about full-size images, et cetera. So rather than grabbing one thing that you like and copying it, um, yeah. Take a few ideas from a few places.

Olamide Egbayelo: So powerful. That’s so powerful. Thank you so much. Corey. It’s been nice having you, you know, sharing your design tips with us. And most [00:53:00] importantly, it’s been really nice having you join us at WordFest Live. Um, in Asia, we were at a time and all of us. So do you have one last word just to say bye to our audience?

Corey Dodd: All I want to say is well done for taking the time out and coming to WordFest. I think I, hopefully you’re learning a lot. Hopefully it was valuable for you to suspend some time with me, um, and just go enjoy WordFest Live, share it and tell everyone about it. They might be able to be catching sessions that are coming up. Thank you everyone.

Olamide Egbayelo: So thank you everyone for joining us. Uh, We appreciate you and thanks to our sponsors, Bluehost, Cloudways, GoDaddy Pro, Nexcess, Yoast, and Weglot please, um, be sure to visits their tents and chat with them. You might even win some [00:54:00] prizes. So don’t miss out on that, but also don’t forget to get your photos snapped in the photo booth and tweet it out with the WordFest Live hashtag.

Olamide Egbayelo: And thank you so much to our media partners and micro sponsors in the community, in the community tent, um, in the community tent in the next hour. Cloudways have their hourly giveaway with a special guest activity. So there’s also what our break in the, um, here at stage two. So make sure you add over to the community tent and we’ll be back on the hour.

Olamide Egbayelo: So please make sure that our Big Orange Heart is full go onto the community center now, and we’ll see you right after there might be giveaways for you. Don’t miss out on that. I’m adding to the community tent right now. So I’ll see you there.[00:55:00] .

Share this session