In today’s video, I want to talk about when you get designers block—some things that you can do to get inspired, to get ideas for your designs, and to leverage existing content out there to really create cutting-edge design content that creates and initiate an action from a user on your website.
So, for example, we are working with an educational client, we’re helping them brand their school and create an online website platform for them to convert people that are interested into a student or parent.
So the main tool, or the biggest tool that we’ll talk about today is called Invision. It is a prototyping product design platform where you can add your designs in there, you can create what’s called a mood board. And that’s going to be our focus for today.
A mood board is essentially a—it’s almost like a collage of images that are consistent with the brand that help you come up with ideas and concepts that you’ll use in that website.
So let’s go ahead and dive in. Invision is free for up to one prototype, or design. I’m going to create a mood board and sign into my account now to kind of show you how that process works. And I’m going to show you some websites where you can get some really great design inspiration in regards to laying out your website.
So in this case, we are working with an educational client, so we’re going to be creating or gathering educational content. Now, we usually do this after what’s called a brand discovery, which is about an hour and a half session with the client to go over their needs, their values, the logo and brand identity design. And then once we kind of dive into that we break into what’s called a mood board.
So we create a mood board and we give that mood board to a client, and let them kind of look at the concepts and designs that we have. And so I’m going to go into creating a new board here.
So I’m going to hit Plus, then I’m going to hit Board, I’m going to create a new board, I’m going to call this one The Village School, which is the name of our client here. And then I’m just going to do Masonry, that’s the best layout for me, because the images are based on the size that we add them in there.
And then when they hit get started. So once I do that, I have my mood board here. So I’m going to keep this window open. Now I’m going to show you some ideas.
Now usually, we’ll have the brand discovery document where we can reference specific design styles and elements. But I wanted to do this quick video to show you what that’s like. So I’m going to go and find some educational images and content that resonate with my client.
And so first thing I do is go to Dribble. Dribble is an amazing design platform that shows recent work from designers around the world. Amazingly fluid and modern work styles from Kawhi to Modern, just a bunch of design aesthetic.
I’m actually going to hit popular instead of following because I am following a few designers, and it’s going to show me everything that’s out there. I’m going to create a filter. And I’m going to use different derivatives of education.
So education, learning, that type of thing, so I’m going to put "education". I don’t want to single out websites, because I might sign some logos or branding, or maybe some print designs that I can incorporate into my aesthetic.
So right off the bat, this one stands out to me, this is an e-learning platform, I may be able to borrow and take some elements from this.
Now keep in mind, this is all work from designers on Dribble, Behance, other platforms like that. So you don’t want to completely copy what they’re doing. But you can take elements and get ideas for concepts that you’ll be using on your website design.
So I’m going to take this, I’m going to just drag it to my desktop. Now I’m going to go back to Invision in my mood board. And I’m going to just drop that in my mood board.
So as you can see, I have that first image here, I can click that. And then what I can also do is I can leave a comment. I can say, I love the aesthetic and color palette here. All right, I can post comments.
So now I can start to get ideas. I can share this with my client to also get their idea and incorporate some of the elements that they like as well.
So with that said, we had that one there. Now, I can go back and I can exit that. And I can keep scrolling and see if there’s any other elements that I like or that I might want to incorporate into our website design down the road.
So this is a great way to get your creative mind and thought process going in regards to how you’re going to lay out your website for your client.
So let’s actually go to Behance and see what they’ve got. Behance is another alternative to Dribble, it’s run by Adobe.
I think Adobe bought them, but essentially, search Behance. I’m going to do Education, so I’ll type that in, let that pop up and see what that looks like. I like this; “simplifying the lives of educational professionals.”
That’s some good copy. So I’m going to open up a new window for that. I might pull some elements from that design.
I like this one; “grade smarter, it’s time.” So this is more look seems like a teacher platform. But we may be able to pull some ideas from there as well, so we’ll open that one up also.
So I’ll just leave it at those two. I’m going to exit that, and then I’m going to go here.
So when you’re adding these to your mood boards, add comments so you can remember why you pulled, what made you look at that aesthetic, or what elements you think could work for your current client. Again, you want to do this with a brand discovery. But it helps you get the creative juices going, as I said.
So you can see this design called Red Rover, great logo, I love there the little backstory in the breakdown. So this looks like it’s a brand identity document.
This looks pretty awesome; “Simplifying the lives of educational professionals.” So some great illustrations here as well.
So I’m just going to take this and drag it to the desktop. And then I’m going to go back here, and I’m going to go here.
Now for me, I like this, the Serif font that they’re using, because it tells me "educational", you know, Times New Roman, those types of fonts, Serif fonts with the little hooks had that educational aspect to it. So I’m going to say, “Love the serif font here.” And I’m going to hit post.
Okay, so now I’m going to go to another platform called lapa.ninja. This has a whole bunch of homepage designs that you can get some ideas from, and it’s all organized by category.
So if I go to landing page, I hit that drop down, I can go to education, they already have pre-made categories, they also have color. So if you’re looking for a certain visual aesthetic, you can go there.
So I’m going to hit education. Once I hit education, it should load that page up in a few. So looking at that, I can go ahead and scroll down and look at some of these images that it loads.
So as I scroll, I really like this, this ABCD, this artificial intelligence educational platform looks pretty interesting, so I’m going to open that in a new window.
Let’s see, let’s keep going. Educational product like no other. Looks like a video platform.
So again, you can go through anything that strikes interest in you, just add it to your learn motion design from anywhere.
I love this layout and aesthetic. That’s really clean. Love the testimonial section here, might have to borrow that as well.
So we’ll open a window for that too, and let’s see. I like the illustrations that they use here so I’m going to get that one as well. So I’ll close that window out for now.
And again, I’m going to drag these to the desktop, love the design of this. I like this font here, so I’m going to take that and put it here.
So I have that landing page there. And then I’m going to take this one; School Of Motion. We’re going to drag that one to the desktop as well.
And then we’ll go back to our mood board. We’ll head back. And I’m going to drag these in here for our mood board.
And again, just make sure you’re adding comments to this so you remember why you added it. Because I’ve done in the past where I’ve gotten it and I was like, “Why did I like this image again?” So it’s just a great way to help you and define what you’re doing.
Okay, so that’s loading. So just make sure you add comments in there when you can, I’ll go back and I’ll add those later on.
Another platform you can use for inspiration, as well as templates and designs is called UI8.net. They have themes, they have templates, you can get ideas for these, you can even purchase sketch layouts and designs and edit them to the way you see fit. So this is a great way to kind of use an existing piece of content and leverage that to create and develop your design.
So here, I’m just going to do—I might type in education. I don’t know how many solutions we’ll have in regards to education, but it doesn’t hurt to try. And again, they provide these in different formats; Figma, Sketch, XD, Invision, Illustrator, all these different ones.
So I think I actually have this one, Five. So you can click it, you can look at the design aesthetics, and then you can download the XD or the Sketch file, and you can go and you can edit that in real-time to accommodate your needs.
So this is a great way to start if you don’t have a ton of ideas, if you need like some conceptual ideas on how to lay it out, this is an amazing platform to go ahead and use to design out your website.
So with that said, I’m going to go to this one called Logo Inspirations. This is for more so brand identity logo design.
You can see I click Popular and then I like to kind of cycle through some of these logos. And anytime I get ideas or concepts that I really like, I’ll just take them and add them to the desktop.
I don’t think that’s going to pull the image, but if I click it, it should bring me to the landing page for that account, then I can take those images and I can add them too.
So she has a really cool typography kind of layout design, it looks like she doesn’t some illustrations. This minimal owl is pretty cool. So I can click this owl concept because it’s like an owl mixed with like a butterfly, type of vibe.
But she does some really great work. So we can do a screenshot and add that to our doc as well. Also, The Love Academy, that’s great with the heart. So we can actually go ahead and smash that image.
And again, this is just for ideas for concepts, you do not want to take others work, you just want to use this to conceptualize and get ideas for your design.
Last one, and I do have more resources. I’ll add those in the comments. This is Designer Mill. This has some free resources that you can use: mock ups, sketch designs, all of these are free. So check this out when you can.
Again, just to recap, we used Invision, we used a mood board, we created a new mood board, and then you add your comments here and really start to flesh out your design and your idea.
So I hope that helps. If you have any questions, feel free to let me know, and we’ll talk soon.
