Hey friends, welcome to Creative X. My name is Brad Hussey and I'm a web designer and today we're going to be looking at a website I came across, went on a little family holiday just recently here we went to Vancouver Island and British Columbia, Canada, one of my favorite places to go and to take my family. It's beautiful. We got the beaches, we got the old growth forests, the mass of evergreen trees and cedars, the smells, the sights, the saltiness. So this website, I want to take a look at this and I want to point out a few things and go through this website with you to show you why. I think it is a near perfect website, but anybody could do first impressions first.
I'm pulling this up and I'm already taken back to Vancouver Island. We just got back recently and you just brought me back. I mean, cheers to that. The first thing I notice is this beautiful image. It's spreading out across these hair, this hairline border. So it's kind of like you're in a postcard, but it's like you're taken into it because it comes outside of that border. Now, that's just an artistic interpretation here that I see. I also see these, like, paint smears on the on these images here, these graphics and like a cedar leaf. I think that's what it is. Like a fern or I don't know, it looks like a leaf from a cedar tree to me. And, and then like words where artists, fresh thinkers and I can't read that. So if that was important, information is lost on me and I've got good eyesight, I think nature, art, you know, it's kind of giving a little bit of vibe there.
Now, something I really love about this is the font. This is my favorite part of the whole site. This font is is it's a relatively straightforward sans serif font. But the way it's been customized and constructed and tweaked makes it really unique. And you see this branding all throughout British Columbia on more official organizations like the Ferry and like the the British Columbia branding and the tourism and stuff. It's a really interesting, cool treatment of a simple sans serif font. Fonts are vectors, are vector graphics, their lines and their shapes pull it into like figma, illustrator or whatever other vector based editing tool you want and you can convert the font to shapes and then you can move it around and customize, you know, the points, the anchor points and create a totally custom look.
And that's what they've done here with like the owl. They've made it smaller so that they can kind of come up into the baseline of, of the line above it and, and so on. It creates what otherwise would be so boring. It creates something really beautiful. Okay. So I wanted to point that out. That to me is the highlight that ties this all together. And so these are just first impressions here I had if I just scroll through, it's, it's I see a grid, I see imagery, a bit of them. I see a cool crop going on here. I see straightforward fonts and typography, a little bit of an interaction happening here, large kind of call out expressive typography, textures, imagery.
I see black and white portraits. I see this treatment of taking a leaf, some sort of leaf from the island. And we got, what, sea lions here? We've got driftwood, we've got rocks. I mean, it's like, okay, cool. And look, look here in the footer, really useful footer. We're going to get to this. We've got that font treatment as well where you have it as a font and you customize different letters to create a really interesting, unique visual experience. And that's the branding like look here, explore supernatural British Columbia, Canada same idea at different font here this is more of a of like a hand-drawn thing, but this is probably where it came from. I've noticed this before where it's this hand-drawn kind of like whimsical writing for the letters, but some of them are really small, some of them are tall, and it just creates this really cool visual experience.
And and then we see it here in a more in a less fanciful format, in a more of a just a basic sans serif font. But you see it, it's got that whimsy to it. It's got that really cool vibe to it. And here's another thing that they do as they split the word up. So Galliano or Galliano, whoever we pronounce at Island, Maine Island, Pender Island, Staten Island, Salt Spring Island. So these specifically Galliano, Maine, Citron and Pender, they've taken a single word.
And then just like split it up two separate lines and really cool artistic, creative treatment of what, you know, what you normally wouldn't do. It's very much a brand. It's like a logo for the island. The designer here is really trying to to digitize the physical experience of being on the island. This is my interpretation here. But it's I think it's pretty clear with the textures, with like the paint, with like the with the ceramics and the pottery with the leaf.
I mean, if I scroll through, I'm I'm looking at a cabin here. I see the stones. I could smell I could smell the cedar and the cool salty air. You can almost taste it. And these and these mussels like this, the sea shells and the muscles and the oysters and the clams like you can. You can, you can sense it. Headings are sans serif body copy as serif as a little bit of a balance. Now it kind of switched it up a little bit here.
So we have a heading treatment where we have a pre header or an eyebrow, some designers call it where you have kind of like this dual heading where you've got the eyebrow, which is this this word here which is smaller and then almost like the eye, which is like the heading, which is larger and more the focal point. So this, the eyebrow gives us the context for for what are we about to look at? It's like a category. Stay relaxed for a weekend or a while. Now, the eyebrow in this case is sans serif, all caps balanced with a larger serif style, just a normal capitalized sentence as the heading. So that's a cool treatment. And then after that, this is something that you see often and it's really easy to do and make your typography look great.
That theme is used throughout the site, so when you design something like that, save it. Save it as a component, save it as a theme, save it as a design system, because that you can reuse that you can swap colors out, you can change this background color of the card to something else that's within the color theme of the site for your site styles. You could change the colors of the fonts. You can change the color of the Call to Action button, and that is you design that once really while using that system. The proven system for nice design draws the user in. They understand the context, they can read it a bit and then boom, I want to see some accommodations. Okay, so and they probably use that throughout the rest of the site a little bit here. They change the color. If I were to go to an internal page, I'm sure I'd find that. So this brings me to the graphics and imagery. It's very graphic and image heavy site balanced with a lot of white space and just type and typography and content.
But they really take beautiful imagery and they put it up front and center, but they do something interesting with it. They don't just show a beautiful image, they layer it with texture, with like actual paint, like paint smears and like a leaf. Like it's like if you were to create a collage or create some sort of, I don't know, vision board or mood board, rather, in real life and you layer a leaf and you put a seashell and and you write something and then you smear some paint and you spill some espresso on it. The use real textures with images. And now here's another thing that I notice. See how they're layering this. They got the image of this woman reading in the back with a nice, you know, a nice coffee from Salt Spring Island.
And then they've got the cabin here that's been cropped so that it's layered over top of it with like the sail. Like it's just and then they got the content layered in front of that. So there's three layers here and it creates a really nice experience. Now look here. This to me is actually a weak idea here as nice where there's a bit of a parallax effect. But here, here's where I feel like something's not working here for me. So I see some some muscle shells here. They're up here at the top. There's a lot of distance from the lady here like this disconnected. And we've got the lady here cropped out. Not even that. Well, like, I feel like this is a lazy crop. Like I can see lazy crop job on that could have been done better even in this plate. I don't know like it's a little too and then was a scroll like you can see where it's cut off and it just loses its I don't know you lose me here on this one this could have just been not there at all or couldn't have done way better.
What I might have done was taken those muscle shells bring bring them down, have it be each of these be separate layers. The plate of food, the lady and the muscle shells could be three separate layers. So as you scroll, they move at different paces. Maybe the plate comes up faster. The lady's coming up really slow at the muscle shells, kind of like gently coming up behind her head. That could have been really cool and crop it better. It's like it was like an afterthought. Not so good. Okay, this is nice. Texture, texture. So imagery here, it's just a nice, beautiful image of driftwood. And they they probably actually went out and took these photographs instead, just using stock photos like typing in Vancouver Island or Driftwood and using it like take your own photographs if you if you can for your website, like bring the website design experience into the real world. Like go out. It's like shooting your own B-roll. You can go and get stock B-roll footage if you must, but if you can go out and shoot your own B-roll, like that's even cooler, that makes it even more fun of a creative experience.
It's more authentic. Same with your photographs. If you're going to use textures and you can go out and photograph that, like, that's cool. And I imagine they did that. It's a it's a motif that they use on every page and you'll see it. They've got textures layered, they got wildlife, they got animal, they got wildlife, they got some sort of geographic thing. They got texture. They got like nature, wildlife, some sort of botanical. And a person in black and white where the nature is, is in color and the person's in black and white, and then they have some sort of tagline in front of it. I just choose any random page like summer. I go down and you're going to see it. There it is. Look it this beautifully done. We've got black and white. We got a woman there. Nice hat. Looking off into the beautiful sunset that that always happens so long as it's not too cloudy. Look at this. The texture of the paper is mimicking the sky. What a nice kind of peninsula with the sea and a beautiful orca or killer whale coming out looking for its lunch.
What I'm noticing, as well as a really grid based layout, because there's a lot of content here. I mean, got blog posts you got, you're trying to get them to go to check out cottages, art galleries. There's lots of events, there's there's retreats. You can do. There's tons of different things that you can do on the island. So they're trying to take all that and organize it in a, in a hierarchical fashion that makes sense and organizing it into different categories. So let's check out accommodations here. Stay, rest, relax, repeat. We're using three R's. They're nice. Lots of sippin drinks. Okay? The way that they organize the content here works very well. We're we're we're kind of selling it. We're going that ethereal nature here, it's kind of like, ooh, giving you a vibe, giving you a feeling, draw you in emotionally, and then saying, like, here, now choose something.
And you can be like, You know what? I really want to go to Salt Spring, you know, in a cozy season. There you see winter. Look at this. They kind of said summer and winter. People don't necessarily think of winter as like the most appealing. I don't know. I'm from Canada. You deal with it. Winter is a thing and winter is actually a spectacular time of year. But they call it the cozy season because it really is. You go out and it's chilly and you get you get kind of the salty air and it's cold. And then you want to go in and be cozy. So the cozy season and you know what? I want to do some sort of I want to stay at a nice accommodation.
Sure. So let's see. And it's and it's organizing it all very nicely. It's it's a it's a, it's a grid, it's a mosaic style grid layout, nicely organized. And then it takes me off to cottages on Salt Spring. Cool. So they have a good organization and hierarchy here. It's very clear where the headers are. It's very clear where the where the calls to action are. They have a very consistent motif and treatment of the buttons. They have this almost like little card or placard or something with light drop, shadow, almost a little old school, but like in a nice way, they use the texture of it in a digital way, so they give a little bit of a drop shadow on the buttons.
They do it on the menu here. They also do it on other buttons. If I go to back to the home page here, you can see it right here. Little bit like the card is lifting on the left and the right here with that drop shadow. So now responsiveness and user experience. Oh, this is good. Let's take this page, let's resize this window.
So here we are probably in about tablet view. It's like a nice so far it's just resizing what was on the desktop. I feel like this would have changed. Let's resize this and see. Yes. So check this out. So we've got that card treatment where you've got the eyebrow as the header and then kind of like a bigger text to explain what's happening and then some calls to action to different islands with a nice image they're giving you a black and white image, give you a bit of a scenic view.
And if I resize this card because it's starting to get a little tight now, it got bigger on tablet. Now we're going down to probably about mobile view around here and so now it stacks on top. Great getting here. This this is pretty straight forward. I wonder if that font size gets smaller. Yes, it does. Really good treatment of the header here. The user experience, like if I open up that menu, boom, it's a mega menu and it's got nice categories organizing and categorizing a lot of information.
Well done. So a couple quick suggestions for improvement that I notice as looking through the site down in the footer actually, which is a nice treatment of a footer is a couple of things. This submit button is like what's happening? Why is this input like so far from the button? Like it should be right beside it attached to it. It should use a similar treatment as that shadow, perhaps a shadow treatment where the shadows on the left and the right side, it's lifting that little card. And so far away from it, like it doesn't make sense. Like it was an afterthought. So that that's sloppy in the vertical stacking of these social icons. Like I feel like and I understand this you build up the site, you design the site, and you get to the footer and you just like don't have the energy for it.
You just like, Oh, the footer, like, it's so fresh. I feel like we need to start with the footer. So the footer is amazing and then go to the rest of the site where it's already exciting and fun to create the hero and the content and the components. Start with the footer so that we have a great footer because I can see afterthought all over this and in small ways. And I don't mean to knock it here because it's actually really nicely done in in theory here, but this could be done way better. And the social icons, if you like, are just thrown in there. This hover effect is way too slow and goes like kind of a like a yucky gray go white like the rest of it is white go from the dark gray to white. Another piece of feedback is who made this? Like what team, what person, what freelancer, what agency? I want to know and I can't find it. Like normally, you know, you have maybe here at the bottom, maybe they made an agreement to not show who made it, but I don't know, like Vancouver Island is all about, you know, local and supporting local.
So if we had like a great local designer or a design team or a design studio who made this like, let's show it off. Like, let's, let's see it. I want to see who did it so we can look out, check out their other work, or, like, send them a note and say, Hey, this was great. Well done. Now, ultimately, at the end of the day, does the site accomplish its goal? I think the goal was take the viewer who may have heard of Vancouver Island or loves Vancouver Island and wants to go back or has always wanted to go and make them really want to go and then give them the resources and the information, any and everything that they need to plan their trip to get excited about their trip, to take their life on their a ten year anniversary on a beautiful hike like a nice seafood and wine tour or an art tour. Like that's what it's there for. If you want to know more about sharpening your skills and sharpening your eye for design and learning how to make great websites like this and what goes into a great website.
How to get more clients, how to price your work, how to become more of an artist, but also a great business person as a web designer. Then I invite you to join us in the Creative X Crew. It's my free community of web designers, web professionals, agency owners and freelancers alike, talent and brands alike. We're all there or collaborating, helping each other out. What do they say? A rising tide on Vancouver Island lifts all boats. That's what's happening in the creative X Crew. We meet every week for office hours. We do design feedback, design reviews. We help you out.
We partner you up with people, we collaborate. We have a great time. Join us in the creative X Crew. The links are in the description below. I really encourage you to do that because hey, the more the merrier. That's the place to be. If you want to be a great professional web designer. Anyway, thanks for watching. I hope you like this video. If you did smash or like subscribe or leave a comment down below.
Thanks for watching. Catching the next one..
