Determining website revisions
Summary
In this episode, we will make a list of all the changes we want to make to our website. During the previous episode, we made high-level design choices and now we will hone in.
Watch Here
Listen Here
Weekly tips
Revisions are part of the web design process
Only allow high level feedback
Only design one breakpoint before starting revisions
Gather all feedback before implementing
Transcript
Joseph: All right. So in this video, we are going to go over the website where it's sitting and pretend we're doing our first round of revisions. So we'll scroll through on your screen. And anything we want to change, we'll come up with a plan, like the overall plan of like, all right, we want to do this.
We want to do this and I'll take notes on my computer and you just go through and be picky about how we want to do this design, this cell. Okay. Let's jump into it.
Joel: I think we can handle being picky.
Joseph: All right. So if you want to just start with, let's start with the navigator and I'm going to start taking some notes about things you'd want to change.
Joel: All right. The nav bar, we already talked about that. The font is a little bit hard to read. I think we could address that with maybe at least to increasing the font size of the nav bar text might be a good place. First place to start.
The other thing that we could address in the now bar is that there isn't maybe any logo or graphic or anything in there to calm and they think would be to have some kind of a site identify.
Joseph: Are you happy with keeping the color? I guess that's really the only other element,
Joel: I guess that would be a kind of in combination with the site identifier. And so maybe we could test our theme colors. We got our gold and red to embed in there yet. We haven't really used those yet. At all. So maybe that would be a place to test those two colors.
I think that would be the. Test of my bar. No. Do, as we're going through this, do we want to test go down for responsiveness and test in the other on down? Or do we just want to handle desktop for now for right now?
Joseph: Yeah, we'll just do desktop. I think we'll start working responsively later on.
Joel: All right. Fair enough.
In our hero section, the, obviously we got the background image interacts with the text.
So we would either want to extend the graphics so that the graphic, that little castle ruin drops lower, not the text ends up in the sky. Or we could fade out the graphic more. We could dark in the graphic, we could lighten the text. So I think we've got a lot of different options, how we could address the go either contrast or move text.
Joseph: So what am I writing down? What are you wanting? What are you wanting?
Joel: I think we could increase the overall size of the graphic, open the proportion, and then maybe that alone would in put the that might put the text in the sky.
Joseph: And you like the text to located, like in that.
Joel: Yeah. So I would like, I if we increase the, how much graphic there is, I think that would put the text op in the sky. And then I think I would like to increase the size of the text a little bit. Because I would want it bigger than like in our newspaper heading, if that's going conflict with that, I think I would, or compete with it. I think I would want the Nessie sighting a little bit higher, bolder, larger that it is. And then we want a little bit to do something a little bit of with the contrast.
So either wash out the image or. Punch up the, what do you think on the text? Or do you make the text?
Joseph: I don't know. I personally don't like it aligned in the center. That's just my general gut. But if you like it there, I think once it's in the sky, yeah. You can figure that out because obviously if you dark in the image, it's gonna be harder to read that sentence and you have to go very dark to be able to read it in white. So I'm assuming you're probably gonna have to end up leaving it as is.
Okay. We can see how that plays out. Once you make the image bigger and the text bigger.
Joel: I don't mind washing the image out even a little bit more kind of opaque getting the image out, even just a touch. And then just have that, having the image, having the text up in the sky is
Joseph: okay. Yeah. That's what you want to do. That's probably it for that section.
Joel: For me now, I think we have tried to shrink this a little bit. We had tried to bring the container down to a medium. And I don't think it took for some reason. I say you want to make the image smaller. Yeah. I think we just want to bring that container in a little bit.
Joseph: Anything else?
Joel: Otherwise I think we like that. We're happy with that. I think it's fun the way the next image. The next section as we're scrolling to the next section with a map stays in place. So that's really nice.
So for the map section, I'll want to add some more texts. The search for Nessie begins and I'm going to want to increase the font size on that. And then just add some more. We do like how that fades and then adding more copy will increase the height of that.
That whole bar has that scrolls. Okay. Alright. I do have a question just as a font question, the upper case letters like here in this title, the upper case letters don't seem to be in that font. Are they, is that the same font? Is that just how they are?
Joseph: I have no clue. It's custom font, so however they made it.
Joel: Okay. Just seems slightly, it seems like this more like a traditional times, new Roman, and then it's the lower case seem to be very, seems to be a lot of contrast between the upper case on the lower case, like in this and this, my, the, my NFL. Both seem to be two different font styles.
Joseph: We can certainly go and check and make sure that that wasn't the setting we missed. You could even click off the preview button real quick, just for that sake and hover over the.
Grab over the nMF and the T. And then quick, a await real quick, and just change it around in there real quick, just to see where you hover over Scotland again, or sorry. Okay. Select something else, then go back to Scotland. Yeah. Okay. So it seems like that's where it's coming from. So I dunno, let's just be a font thing. So you could always lower it, lower that to a non capped and take everything to lowercase if you want. All right. So back to the next one. So the NFT sort of section what you want done on that.
Joel: actually what might be interesting? Just oops.
Joseph: All right. We can worry about the fonts.
Joel: Yeah. Okay. So the, my NFTs section we'd probably want to add some of the pear, the description and some of the other information we had added into the CMS.
Joseph: I am upon looking further. I think it might just be a case font. So yeah, you might just need to switch everything into lower case and we can do that later. Okay.
Joel: All right.
Joseph: Okay. What's next?
Joel: Form is good.
Joseph: Okay the button, the forms that you can't, the buttons, the wrong color, you don't have a header for it, like describing what it is. The fonts are hard to read, probably should re sort some of those other fields and stuff.
Okay. You're right. The width of the form is not, it was not a great, we should probably bring that in quite a bit with buttons. Order title better. All right. It's now the history section.
So we need to. Yeah. Sorry, what do you want on that? I guess I'm not just jumping ahead of myself here.
Joel: Okay. So this is, are we calling this the origin section? I think. Yeah. So here we're a title, like what you said on the form that makes sense a title and then surprise some different colors for each of the tabs would be good. That could be interesting. Color coordinated, and then we need some more content. And
I was, oh man. I was be interesting to see which one we would want to default it to be interesting to learn some of that. If you can default which one it starts with.
So that would just be interesting learning. Can I have it default to one of them? Can I have a default to none of them selected? Can they all be closed?
And there might be a field like a a slight background color around or something to tie in the parameter of the field of the background of the I want to use the word container, but that might not be the right one. That's something to just give a parameter of perimeter
Joseph: talking about that section or the content tabs
Joel: of the content tabs.
Joseph: So just inside where the copy is.
Joel: Yes.
Joseph: Okay.
Joel: Just to give a visual, a perimeter.
Joseph: Okay.
Joel: And then some is a divider to break up that from the videos, maybe something to introduce the videos or just a site segment to the videos inner introducing a sixth, the video, just so there that's a visual be balanced.
Joseph: Okay. And then the footer, I don't know if that's going to appear as anything else, but then what do you want done in the footer?
Joel: So we got to give some credits to the town, to the law, to the great people of Scotland to.
Joseph: And how do you, what are you looking for? What does that mean to you? Logo.
All right. I'll just put those into a logo in the bottom left links in the middle and Scotland flag in the bottom. Perfect. Okay. All right. So I think that we just now in our next video, I think we'll go in and work on implementing those changes. And then we'll really start working either going responsive or working on interactions and stuff. Yeah, I think that's it for this video.
Joel: Very good.
Joseph: All right. The next one.
