Teaching Webflow To My Dad

Preparing our assets

eye icon
30
Min Read
By:
Joseph Virtue
teaching webflow to my dad episode graphic number seven

Summary

In this episode, we’ll find inspiration for our Nessie website project. We’ll pick out a font, choose colors, determine our website sections, write some copy, gather media, and make some basic changes in the style guide to prepare for our build.

Watch Here

Listen Here

Weekly tips

Spend time preparing assets

Pick 3 colors primary colors

Your font should be on brand and legible

Create a website section layout

Pre-write as much copy as possible

Test out a wide range of media

Transcript

Joseph: We are now going to start prepping the website. So we're going to work on adding in a pick, pick a font, get our color set change the actual fund headings inside the designer. And then we'll find some like website ideas of what you want. The Nessie site to look like, and we'll just probably grab screenshots of something like a very low fidelity mock up of the site.

And then on the next video, we'll start building it. So we're going to start over here. All right. So we already went and did a little research ahead of time on a font. So it called Scotland font. I'll make sure you like it. So is this font right here? So it was. So that's a good point. Okay. So I grabbed already downloaded that font.

So at some point I have to go in and change it. All right. So the next thing is we will need colors. So the question is, what kind of color theme are you thinking? Scotland flag is blue, so I don't know if you're wanting, what color theme are you wanting to go for the website?

Joel: I was thinking kind of a Scottish, like a kilt.

If we on Amazon, if you Google, like what kind of, that maybe like that red and green kind of that. Yeah, those, maybe those kinds, there you go. That kind of that gold run through there. Some blacks get that theme. All of that. Is that a plan? I don't know, tart that kind of that tartan.

Joseph: All right. So we will, or save image,

open image, a new deal. Let's just open up the image in new tab. We'll just keep, all so this will be our rough color themes. So we will need to hick. Primary color. So the question is, will this be a light colored website or a dark? So will it be white with some neutrals and then we'll do pops of color of green and red and black and gold, or what are you thinking?

Joel: So I would prefer on a little bit on the lighter side. So I would, I liked like the reds and the yellows and the, a little bit more brighter, happy. Cause nasty is a fun, happy. We're like on those couple of those sample images, they were the bright green, happy, fun cartoony. We like this to be more fun.

Poppy kind of colors, not the dark greens and the blacks. So we want this to be more vibrant and entertaining.

Joseph: So what color would you want as your primary light? Probably

Joel: needs to be white, maybe a maybe a slight Ray, maybe just so it's not pop, like stark white.

Joseph: All right. So off white hex code.

All right. What do you think about this one? Just do an off-white and F a F 96. Perfect. All right. So if you want to write that down in a doc real quick, that color COVID. All

Joel: right. Let me grab that. So our first one is FAF nine, six. All right. So this is our off.

Joseph: All right. So we need to see, is there a way to just use your.

Copy image. Can we just paste it?

Okay. Okay.

All right. Let's just do gold hex color.

They're going to type it in

gold. Oh, there we go. All right. So what are we thinking in terms of our yellow gold?

Joel: That, that one's not bad that you had your mother one to the right? This one. Yeah. That's not bad.

Joseph: All right. So that's F D F O one.

That's more yellow. It's definitely not gold. Like we look at this.

Joel: Oh yeah, you're right. Yeah.

Joseph: See, I really want that image.

Joel: Can you save that image off and see if we could drag it in? That is more of a pastel yellow though in that, in this

kilt.

Joseph: All right, we'll go back to this. See if at all. All right, there we go.

Let's right here. What do you think like this?

Yeah, that looks pretty decent. All right. So we've got E C D a seven seven, the

Joel: a seven, seven.

Joseph: Repeat that. What do

Joel: the a 7, 7 77.

Joseph: Okay. All right. And then we can grab like a burgundy red wait like this ordering man.

This one is. No, when you have, when you like, probably this let's go that. All right. So we've got B 24,

Joel: b24

BINGO

Joseph: F five E

Joel: I E.

Now we're getting pretty close to the university of Minnesota colors.

Joseph: They probably stole it from Scotland. All right. Then we want to find our green and you probably want to find a lighter on the green.

What do you think of that?

Joel: Those are all kinds of nice subdued. Yeah.

Joseph: Yeah. Low saturation. All right, so we got 55 56

F

six, two.

Joel: All right.

Joseph: All right. So we've got colors, we've got a font. So the next thing we'll want to figure out is our images. So how many images do you have currently, like on your NFTs and stuff and what other images are we gonna want? Actually, I'm just curious about messy flag images.

Joel: That's a good question. I, I think that there's probably a never ending supply of nessie images and I'm just going to log into my collection real quick and just see how many NFTs I have. So

Joseph: are we trying to keep this real looking? Are we keeping it cartoonish?

Joel: So a lot of my NFTs are cartoonish.

Joseph: Okay. We should probably stay similar

Joel: So I have about a dozen se and they are all very cartoonish, very silly, very goofy, low, mostly low Rez. There.

Joseph: All right. Okay. That's fine. Do you want to incorporate any like Scotland imagery or any stuff like that where we're, I'm just trying to think about, let's start thinking about the section.

So maybe that's what let's brainstorm sections. And then as we're talking through them, I can maybe do some Googling and you can write down what each section kind of look like. Maybe we'll grab some screenshots.

Joel: It would be fun to do a little bit. Pretend. So it adds a little bit of kind of authenticity to do a little bit about like where the law NES, would come from.

And so there's an, or a, of, legitimacy to, obviously Nessie is real, so we're not saying that Nessie isn't real, but K, we want to give maybe some maps a newspaper headline vibe. Section.

Joseph: All right. So if you've got your docs open, let's start going and trying to put our sections in order real quick.

Let's go to, can I look at web flows? We have to log in for. So I definitely think we need to have a like a

contact farm, if you've seen Nessie. Yes. I definitely think we need to do a sequel build all of your NFTs into a CMS, a data collection. Map

a map. Yup. A map section. I think it could be interesting. Cool to do. I think the header, I think should relate maybe to Scotland, like here was a Scotland header, a nice big image, and maybe we even pop one of we redo some, we touch up like hydro, rather the Nazis, even if it doesn't match the style into. And then, just like a little blurb of, have you seen Nessie or, Nelly Nessie exists or something like that. And we'll do text over here, full background image

Joel: do a background video of, Silva, Nessie sighting, or could we find some fun video to play somewhere?

Joseph: You could. We probably wouldn't. We used to, we have done that in projects before. Definitely slows down your site. So I would say, if we didn't have to, maybe not just a static image a little more accessible to little easier for putting it on different devices, but if we had a further on section, like a third or fourth set.

Joel: Could we do a grid of, I'm just picturing a grid of maybe the top six YouTube videos of Nessie related videos, the most six most popular YouTube videos about se

yeah,

Joseph: we can do that. People want a section of that?

Joel: Yeah.

Joseph: So is he an interesting opening oh, this is a video though. That's an interesting.

Even if there's a green skit, a still of Scotland or a lake or something as our opening. Okay. All right. Let's go back to the showcase. Let's just go by, we'll see some clone animals that are pretty popular.

Let's go by most liked. Let's see what we got in here. Okay. We can open up this. It's looks cute. That's openness live site. Let me know if any sections like stand out to you about, I said should screenshot and we could like remit.

Joel: Something like that with a map of the law behind it.

Joseph: Okay. So if you'll notice, this is a cool feature, this is called a fixed image. So as you scroll past the section, that image doesn't move. So gives that really cool faculty. Let's screenshot this, let's see that shift command or got a screenshot of that. Okay.

Joel: I like how that stuff faded in. I don't know how we would use that, but that was cool how the

Joseph: can definitely do that.

Joel: We, it, in, so mine, it was noticing some of those features how that

Joseph: selection.

Joel: Oh, interesting. They got a lot of cool features.

Joseph: Video, some quotes or something.

Okay, cool. Pretty cool site.

Joel: Yeah, there's a boatload of stuff here.

Everything's

Joseph: usable for. Trying to do. It's pretty cool. The background effect change

Joel: while we're the one guy stayed and the pink Panther faded in, that's pretty impressive.

Joseph: That's a pretty complex. Yeah.

Okay. One thing we'll want to decide is, do you like, do you want a sticky? Do you want a sticky nav? Do you want, so it keeps going down with you. Do you want a burger menu? So this one doesn't even have really a nav. Are you going to want an app? Do you want to just a single page scroll and then links are further down as you get in.

Joel: I would think we would always want the home page and a couple, I don't like a lot of buttons, but I think that I like having them always available

Joseph: hard to see, but it was cool concept. What else do we have where it's cool. Look in.

All right. So then I guess the other question is, do we want to start, do you want to pre-write any copy or would all of that? Just be stuff that will just come up with on the fly.

Joel: I could write some, I could write to start working on a few paragraphs or it will, it won't be hard to, to our, to rights. Some of that as we go,

Joseph: worst case we can throw in some alarm at some or something. Yep. Opening Webflow. Oops. No, I did not open it for flow. I wanted to view product details and I don't open the live site.

Okay. Here's a pretty cool one hover over and it zooms. It's pretty fancy. I think you can quick off probably, the next button. All right. So we'll need to, if you want to start downloading all of the images from all of your NFTs.

Joel: Okay.

Joseph: You can either screenshot them or save them or what. We'll want all of those. We'll do some more brainstorming in on the, okay. Okay. So this is the site where using all right. So here is the Nessie font. So what I did is I went to a project settings and I went over to the font thing and I just uploaded. Fondrick here, the Scotland font. So I just uploaded the OTF. And then now let's in the site. If we go back to the designer. All right. So I've got the controls at the moment.

That's fine. And we can do some tweaking right now. So I would go to the style guide page. The question is, how frequently do you want to use that?

Font? Do you want to use that Scotland font on all of the headings? Do you want to use it on the entire website? It might be hard to read on the little

Joel: read on all the texts. I would think headers would be the primary purpose.

Joseph: All right. So I'll show that. I don't know if we went over this on how you style classes. So there's one of two things you could do because we're gonna apply this to every heading. If I have to go in and change it for on all headings, what I'm gonna do is I'm actually gonna go to the body and I'm going to go.

So I just click the body element. And then I click the class thing and it'll come up as HTML tag. So any of the pink ones are our highest ranking classes. So we can, I can click this. I can also go over here and it shows all of the highest rated classes, the pink ones. So I'm getting body all pages. And you'll notice that these settings right here.

Which means the, all of the websites, font size, color, and height is getting pulled from this tag. So right here, when I change it, it will change everything on there. So we're going to go ahead and grab the Scotland one. Okay. And then what I'm going to do is go back and change it for the paragraph. So here's what the paragraph would look like.

Is that too hard to read? All right. So I'm going to go in here, grab the whole paragraph. And we're now going to go down here and change that too. When you go to enter, it's boring, but do they have inter here? Maybe that's something you'd have done.

Joel: Aerial is fine.

Joseph: Yeah, let's just do it

again. That's fine. All right. So we'll try to keep all of our paragraph texts, just nice and bland, and then all of this for the styles. So that's how we went in very quickly set up all of our funds. Okay. Okay, so we've got colors. Oh, why don't you give me, why don't you read me back those colors that you pulled out, go with their color palette.

All right. So what I want to do, I think,

thank you. I'll just grab this.

All right. So what is our primary?

Joel: Okay, so the first okay. You want the background color or which what we want to consider the primary color?

Joseph: The off-white

Joel: off-white is F a F nine f six.

Joseph: Okay. All right. Then our secondary.

Joel: So we have our gold or yellow.

Joseph: Is that what you want? Is the secondary one or do you want the red or the green?

Joel: Yeah, let's go. I guess let's go. Let's go green. Okay. So I think maybe it'd be the darker of the colors. 5, 5, 6

Joseph: All right. So real quick, I'm just going to see if this worked or not. It's going to grab this item and then they're actually wait, is there this way to get the colors right? And make sure that's is.

We set those up. Oh, okay. All right. So is the white, that is the off-white. What was the off white one?

Joel: F a f nine f six.

Joseph: All right. And then the green

Joel: green is 5, 5, 6.

Joseph: okay. And then the third one

Joel: E c d a 77.

Joseph: All right. And then what I'm gonna do is grab this element or the command C command. There's a spacer in there somewhere. I'm not really sure how their, okay. So I'm going to do is to add another color, make sure your command Z that real quick, I'm gonna grab this whole background color here. This background color black command C command V. So actually need to change these. I haven't been naming these rights. So the gap, this is right. So this now I need to background color gray.

I need to rename to green. Yeah. And then this one I need to rename to we'll call this yellow and then this one I'm going to click duplicate class. Cause I don't want to, if I started changing it, it would change this one. And now I can go in and name it red. All right, then what's the color.

Joel: Two four F five e.

Joseph: All right. So there's our colors.

Joel: That's looking pretty sharp.

Joseph: It goes and farmed. All so our buttons, our primary button. Oh, actually, here's the next thing we should do in all of our items. What I want to do is grab this color and I want to.

Add it as a swatch. So I'm going to do green number, go down to the yellow, grab this color, oops. Or this color, add it reviews and the plus button and go yellow. Then I'm going to go down here, add this color a red, and then we'll add this color as. Off white. All right. So now I go up to the button here. We can change the color quickly to what's a primary color.

We're going to want the buttons. The green, I think, was our secondary color. Then we'll go down here and we'll change the border color to green. We'll change the text color as well. All right, servers, the text program them misery here to green. Okay. Those are pretty hard. That button text is pretty hard to read on the buttons, but we'll see how it goes.

All right, then this one, we'll just change the text to green.

All right. Let's see our text color. We could make our text color, the green 'cause it's dark for doing a mainly white White thing. We could make our textile green that would pull in the green. So let's do that. So let's go. How do I want to do this? I think, do I just go? I might need to go to the H one is grab, where are you coming from? Painful. Oops. Is it pulling from where? So let's just say, if I change this, it's not going to change anything. All right. So I'm going to do is I'm going to go into the body tag again. So I'm going to go quick body, grab the body I'll pages, and we'll just go into the text color setting and we'll just change it from here to our green.

So that'll add. And it's still legible. We've got a double a on the white, so that's good.

All right. And slowly we're making progress here.

All right. I would say this is pretty decent where we're at a starting point for that.

What we'll want to do is I guess there's two things we're going to, we're going to probably do. So maybe we'll pause, we'll compile these things. We're going to compile all of the images into our assets panel, and then we will compile all of the screenshots of what we want the website to look like.

So we'll go find some inspiration and we'll lay out those screenshots in the order. And then our next video we'll go in and name the sections. Start adding just the bare elements. And then before, note we'll have a website built.

Joel: All right. I like it.

Joseph: Sweet. We will continue in the next step.

Thanks for reading!

Previous post

There are no previous posts

Next post

There is no next post