Managing a website designed for a barbecue food truck. And here we have four variations of a barbecue food truck website. And I'm pretty impressed. These are really valid concepts for a food truck brand, but I want an image like this. I want some really cool image. So this to me doesn't look complete, obviously looks like some artistic rendering. It's not really that literal. I get the idea, but I want something more photo realistic. So I'm going to ask my journey. A.I. to imagine a photorealistic yellow barbecue food truck on a dark, fiery background. And here we have. Oh, my goodness. Like, this is insane. Look at this. Look at these options. Hey, friends, welcome to Creative X. My name is Brad Hussey and I'm a web designer. Today we're going to be using some cool A.I. tools to revolutionize the way that we design and build and plan out and launch websites. It's crazy. We're going to be using chatbots to structure and create content for our site. We're going to be using mid journey A.I. to create A.I. art and some mockups and concepts for our different sites, for different industries. We're going to use it to create a concept for a logo. It's going to be awesome. Then we're going to be using Ed X, which is my favorite No Code Web creation platform to build the site that we utilized A.I. to help augment the whole process. By the end of this, you're going to see how this entire web design, web creation process that we normally do manually, and it's very time intensive and time consuming. We're going to be using A.I. to speed this process up incredibly. All right. So first up, we're going to use a tool called Mid Journey, A.I., Mid Journey. AI's essentially our generation A.I. tool lets you create lots of different things. For example, in the community showcase, you can see just some of the crazy things people are creating. We've got like Star Wars storm troopers. That is like a really accurate portrait. There's things like these fantastical fantasy type designs and vector graphics, actual images of like a of a roses in a snow garden. All right, so in mid journey A.I., you have to write some prompts. So basically you would use the mid journey web app if you have a premium subscription or you use discord. I believe that's how it works. I'm pretty new to how this works either. So I, you know, I'm not an expert on this tool, but I know enough to kind of get what it is I'm looking for. So imagine a website UI for a premium New York City law firm. And here are the variations I got out of the gate. So I've got four variation agents, all that high end sort of rigid, you know, bookcases, brown tones, golds suits like this is pretty good. Now, looking at it, you can kind of see some of them are a bit strange like this. Number two, it's like a website inside of a framed photograph of a very strange concept for it. But I mean, I get the idea here. Number three, looks a little bit dated to me that UI. The image is interesting, though. Number four, I kind of like it's got a it's got a a clean sort of paper effect. The texture in the background. But number one stands out to me as the most interesting. Obviously, like his hands look a little strange in the text here. It's not real text just giving you kind of like an artistic rendering of a website user interface. It's by no means generating content that will come. But for this, I like this. What I'm going to do is I'm going to create a variation of this first one. So I'm going to ask mid journey AI to create some variations of this first version. And here are those variations. You can see it's a variation of the same idea. Well, we got the same concept, but four variations. And so what I could do if I liked one of these specifically, I could say, let's upscale one of these variations and not just simply means create a higher quality version of it. It'll create some variations of it. Of that, too, if I want. But I'm just going to create an upscaled version of one of these concepts which will allow me to download it as an image that I can then use to start designing the site or building it out more into the next step. So I've gone ahead and upscaled one of the options. Now, you could see it's a higher quality image. I could actually save the image and you know, it's a 1536 by 1024. So this is enough for me to like download this image and start working with it, maybe in Figma and I can start to design the elements. I could take certain parts out and say, okay, I see, I see the grid, I see how this has been structured. It's obviously a very rough mockup, but it's something to work with. What I want to do, though, is I want to try another industry. I want to try something different. So my wife is a professional photographer and I like photography. I like the art of photography. And so I want to try and create some concepts for a photography website. Let's imagine a website landing page for professional landscape photographer in black and white. I want it to be premium artistic UI UX renderings and I want it to be an aspect ratio of three by two, a quality of two, and I want four versions. So here we go. Mid journey. I created these four variations of these fantastical fantasy kind of style, black and white landscape photographer websites, concepts. You know what I something about this number four that I quite like so I want to create I'm going to ask modern AI to create variations of number four. So let's do that. So here are the variations that it generated. So all the same, just slight variations in the in the subject of the of the art here. So you can see a number one. It's got like a bit of a navigation menu and some sort of weird rendering of a logo. So I can see that. And the text here with the call to action and probably social icons or a contact button over here and then variations of of the same. So these are all kind of the same just slight changes in what is in the photograph and some of the UI. But I'm going to try one more industry here. I want to ask mid journey I to imagine a website design for a barbecue food truck. And here we have four variations of a barbecue food truck website and I'm pretty impressed. These are really valid concepts for a food truck brand and you can see it. It's kind of like rugged. There's fire is like this vintage looking truck. You know, some of the trucks are like semi trucks, but like you got like or a camper, but we've got genuine brand kind of concept for food trucks. This is really cool. And I couldn't I can play with this variation and the prompt as well if I want it to be like a food truck that was selling like ice cream, it probably wouldn't generate these kind of really intense, kind of more harsh, masculine, vintage, rough around the edges, fiery barbecue food trucks. It would create something that's a little bit more friendly, childlike, you know, colorful, more neons, maybe something like that. So I'm going to create some more variations here and see what we can come up with. This looks good. I mean, this is a concept that I like. So what would I do with this? How would I turn this into a website? Well, there's a couple next steps. And so what I would want here is, I mean, I could save this image and use this and start designing it based on this in figma. But what I probably would do is I'm going to use this layout as inspiration and I'll build out my own version of it in our in our third step, where we start building this out in editor X without code. But I want an image like this, I want some really cool image. So this to me doesn't look complete, obviously looks like some artistic rendering. It's not really that literal. I get the idea, but I want something more photorealistic. I want to think like in cool fantastical. I've used that word a lot so far, but I want it to look a little more like a truck, like a food truck, not like somebody kind of sketched it in. So what I'm going to do is actually going to create another prompt in my journey, not to create a website, but rather to actually create the actual food truck that I can use that as the image, as the centerpiece for our site. So I'm going to ask my journey. I to imagine a photorealistic yellow barbecue food truck on a dark, fiery background. And here we have oh, my goodness. Like, this is insane. Look at this. Look at these options. Like, this last one is incredible. Look at the fire in the embers and the sparks like, this is so cool. This second one, though, really stands out to me. It looks more like a food truck. It's got the awning, it's got the order window. There is fire happening here, but it's a little more abstract. So I'm going to create some variations on version two. So here we have some variations and now we're looking a little more like we can use this. All of these are cool, so I'm just going to pick one and create a more upscale variation on what I see here. There it is, nice and big. Now we've got an asset that we can use as a centerpiece for our site. Very cool. Okay, so now that we've decided on our website concept, we're going to use that barbecue food truck style website. So if I want to create this website, the next stage in the design process of building the site is to understand and create a site map, some content, some structure. So we need that figured out. So typically in the past when you create site maps, you need to take out your journal or your piece of paper, you know, or a document on your computer, and you need to start mapping out the structure of the site. What pages do you want? What sub pages, you know, what would you want on that? So what I'm going to do is I'm going to open up a new chat with chat. You've probably heard of it. We've talked about it on the channel before and it's blown up. It's going crazy. It's going to be huge this year. Okay. I think we've only seen the beginning of it and I don't know how I feel about that. But in the meantime, let's have a little fun and ask chat JPT. Let's create a site map for a barbecue food truck. Say, All right, so it's saying we need a home page introducing the barbecue food truck. An overview of the menu and services. A menu page with all the barbecue dishes, drinks available, including meats, dishes, side dishes and drinks locations. This page will provide information where the barbecue food truck can be found during the days and times will be parked at each location. Page can include a map or list of locations, events page. So this is any upcoming events that the food truck will be attending about us information about the team in the barbecue food truck, the chefs, the staff contact us for booking requests. A blog for articles. Thank you page. So commonly asked questions like dietary restrictions, payment options, catering services, social media page and a legal page for any legal information about the barbecue food truck, such as terms privacy and refund policies. Wow. Okay, so we have a ten page site map already structured out for our barbecue food truck site. Now, I could leave it at this and just run with it. Use this as inspiration and take it from here. Thank you, Amy, for assisting me in speeding up this process. I'll. I'll take it from here. We can also ask you to create variations or say, you know what? Just too many pages here. We don't need that many pages. Let's reduce this. So why don't we try that? Here's a revised top level site map of your page. So homepage a menu page, locations page. Contact us, social media and illegal page. Okay. It says here. It even gives me a reason why it chose this. Let's say that this is our site and we want to use this as our site. So what I would do here is I copy this, drag it over into paste it into a document or a notion file or however you create your structure so that you have something to work with. Okay. So because it like understands our context of a conversation, I can reference things and it knows what we're talking about now roughly. So I could not tell it. Every time I'm creating content for a barbecue food truck site, it already knows it. So I can just kind of continue our conversation like you're talking to a generally smart robot who knows what our conversation. I don't even know what the fact I'm saying this is insane. Ethics and stuff aside, that'll be a future conversation here. But for now, let's ask chat GTI to generate some content for our homepage. Okay. So here's some sample content for the barbecue food truck homepage. So we got welcome to our barbecue food truck. We're family owned, operated barbecue food truck. Very cool. And it's a pulled pork ribs, chicken, beef brisket. It knows it knows what I like at this barbecue food truck. Big beans, mac and cheese, coleslaw. Of course you got this. Our truck could be found in locations around town. You can hire us for next event. Let's say I want to create a variation of this, but I want it to be a little more like cheeky. Something like that. Oh, and it's got, like, cheeky. Got all the fixings you crave from creamy mac and cheese. The tangy coleslaw, smoky baked beans. Don't take our word for it. Come see us in person. Give it a try. We're also on the move. Always on the move. Bringing the barbecue goodness to you. And you know what? I want a better headline than that. I'm actually liking barbecue done. Right. Come try your mouthwatering menu. Sweet. Okay, so I'm going to copy this content out. All right, so here we got our homepage. Let's call that done. All right, so next is our menu page. Let's create some content for our menu page. All right, so here's some sample content we got. Welcome to Pitmaster Barbecue. Serve up delicious slow self barbecue that is cooked to perfection, amazing meats, pulled pork ribs, chicken, beef, brisket sides, coleslaw, baked beans, mac and cheese. Corn on the cob. That's cool. Soda, lemonade, iced tea, water. I mean, that's good enough, but I can ask you to create variations. I can ask you to use a certain tone, you know, or reduce the menu. Simplify the menu. You have less items. But you know what? This is good enough. So let's just copy this, paste it in there. Our menu is done. All right, so now I'm going to ask you to create content for locations page, but I want to be specific about our location. So we're going to say we're located in Hannah Alberta, Canada. It's a little bit of a ways away from where I am, but Hannah Alberta, for those of you who don't know, that's the hometown of Nickelback. And I don't care what you think about Nickelback, but that's going to be our theme for this food truck and Alberta hometown of Nickelback. I mean, when add to the Pitmaster Barbecue Food Truck locations, we're proud to call Hannah Alberta the proud hometown of super famous, ultra popular, excellent hard rock band Nickelback, our home base. From here, we travel around the area to bring our delicious barbecue to all our fans. You can find our you can find us at the following locations. Main Street, Farmer's Market, private events. That's sweet. Oh, that is so good. Okay, so now we're going to take what we've done so far, put it into Editor X and actually build out a site utilizing the inspiration from the design that we generated with Mid Journey II and start building this out in Editor X. So here is the layout roughly that we're going for. So we've got a big image, big background image, we've got a logo navigation, we've got a card on the, on the right hand side of the screen with information and a call to action. Some basic footer elements here, footer now. But what I just realized is we need a logo. So what I'm going to do to create a concept here is ask mid journey air to create a logo. So here we've got our upscaled pig with four nostrils with like greens in its mouth, red teeth. I mean, this is, this is intense. I like big blue, so I'm going to save this. And now usually an editor X I like to start with a color theme like some site colors it's a good place to start. So what I want to do is I'm going to ask chat type in our chat that we just had about barbecue content. Since it's got some context, I'm going to ask it to generate a color palette for a barbecue food truck site. All right. So here's a sample color palette and hex codes that we could use for the site right in cheerful shade of orange feelings of warmth and sunshine that are rich, warm, red. We got a classic white. We've got a soft, muted gray, a deep, dark gray. Okay, so I'm not sure this is going to have the colors that we quite want. If I'm looking at our mark up here, this is we've got some blacks and some orange and red, I guess, you know, maybe maybe it will work. Maybe it will work. Now, I'm not sure how this will look. So let's go ahead and convert these over into Editor X. We've got our color palette. I'm going to ignore these greens and blues here, but these three at the top work for me. Now what about fonts will be used for barbecue future performance railway. I see as a designer myself these fonts I'm not entirely sure it knows the context of like what a barbecue food track font would look like. It's kind of just picking some generic, free, accessible fonts. This is where the I have a good creative designer with an understanding and type design would be much better for this. All right, so rye seems like a font that we could use. It's kind of that barbecue style fonts, you know, it's something that, you know, might work in this context. So I'm going to do is I'm actually going to download this family and I'm going to upload it into Editor X. All right. So now I'm going to choose Rye Regular Perfect to apply that. I'm going to do it to all of our headaches. So now I'm going to upload in our media manager here. I'm going to upload my graphic of my food truck. I'm going to upload the logo and then we're going to get started. All right, here we go. We've got our images. And what we could do is let's just go out here and we're going to delete this logo up in the header. I'm going to add my image or my assets or my media uploads. Actually, here's my logo. I can attach it to the header. All right, there's our logo. Let's check out our mark up here to see what we got. So we've got a dark background. Okay, so let's make everything dark here. So I'm going to open up my colors. So we want our background to be dark. We want our text to be like a creamy white. And I'm going to modify this a little bit lighter. There we go. Plie. Okay. I'm going to move that in just this a little bit. Now we need to bring in that real thick background image. Okay. And now I actually want to make the background of this header transparent, pinned it to the top overlap. Okay. So now we are getting somewhere. So now I'm going to add some pages so that we have it in our menu up here. And so that's going to be home menu, location, contact and legal. So what I'm going to do here is I'm going to click on our menu here, manage the menu, we're going to manage the menu. We're going to add items, site pages, all pages, except for the legal page. That looks pretty good. All right. Now we're talking. So let's look at our markup again. So what I'm going to do is I'm going to do some sort of variation here where we have our home page contents. We need our heading. So let's see, where would I put my heading here? This is looking pretty good. And then I want our call to action button here as well. So I'm going to throw in a button header. Let's make some adjustments. We're going to create additions and a fill color. All right. So let's preview this. So far. I mean, here is our rough markup that was created, a low fi markup with a I and here is our more semi polished version in Editor X. We've got a bit more of a concept here. I'm not totally in love with this because I'm covering the front of the truck. Maybe what I would do is crop out this image, move it over to the right, and put this content on the right so we can see that the image is full glory because it's pretty fantastic. The logo totally works, the color palette works, the fonts are all right. I make a few more passes at this. I think I can come up with a really nice site that is fully responsive, designed without much design work. Just asking a I creating all the content. We've got all the content here for the rest of our pages. We can fill that out. Then we can use Editor X to clear out the pages, create actual menus. You can actually use Editor X apps to to book a table. Not that there's a table here at this specific restaurant, but you know what I mean. We can add contact format locations, we can embed maps, we can do all this stuff without code, all augmenting our process with AI. This is crazy. I think combining all these things, it's going to revolutionize and speed up the way we build and design sites. But is A.I. going to replace human designers, or will it help make the entire industry even more efficient and precise? Check out this video somewhere here to see what my thoughts are on if AI is going to replace people in the creative design industry. And if you want to continue this conversation, join us in the Creative X Crew where we meet every week in office hours. We have discussions about the intersection of technology, A.I., creativity and freelancing. Join us there and we'll catch you in the next one.
