Isaac: Alright.
Hey guys, welcome to our very first Weplay.
We are reviewing a landing page for a very,
very popular game and seeing if we can teach
some stuff about web design and what you guys
can do for your own websites.
So, to start with, we have the amazing landing
page at the beginning.
So, first thoughts?
Meng, what are your thoughts on this?
Meng: Alright, so, first of all, blown away
by the colours.
It’s rare to see yellow used so well - that
doesn’t make my eyes bleed.
It’s very, very distinct and I love how
it makes the call to action for the ‘Pre
Order Now’ button just pop.
Also a really big fan of the embedded video not utilising the usual square shape and also,
one big thing is, with the image of the main
character.
Having him look over towards the video is
a very popular conversion technique which
drives people to look over at a particular
area of the landing page.
So, overall, super impressed so far.
Isaac: Great.
Cale, what about from a web design perspective?
Cale: Yeah, I mean, it’s functional.
It’s easy.
As Meng said, the CTA is the focus, I guess,
of that whole landing page.
That’s the first thing they want, your eyes
to lead towards there, and they do that very well.
They also want you to pre order, obviously.
So, making it that prominent as soon as you
get to the website is really good
Isaac: Cool. Yeah.
I guess just from a design perspective, as
Meng said, the colour yellow is used really well.
They’ve got a really bold colour palette.
That is something that a lot of people like
at the moment.
It’s very like, on trend kind of look – the
cyberpunk thing- and I think they’ve actually
set the tone with that.
They’ve really created this interest in
this, kind of, visual style again.
Leading on from what Meng was saying, the
way that the character’s eye draws you to
the video, that’s a very common design technique
called ‘Z readout’.
So, basically, that’s just the way that
you’re naturally gonna be drawn to scan
down a webpage.
So it’s, you know, a very simple thing that
they’ve employed.
They’ve done it well.
They’ve just kept all the information, kind
of, in that configuration and then the last
thing in the Z is the CTA.
Yeah, and I like the nice little glitch hover
effect.
So, that’s pretty cool.
Okay, so, moving on now to the next part.
So we’ve got some pull quotes from famous
video game sites.
Yeah, I mean, it’s pretty simple but what
do you guys think?
So, I guess we’ll start with Meng again.
Meng: The glitch effect is so cool.
I love that they’ve kept the consistency
of the colours.
So, that blue, pretty sure that’s the same
blue that’s used as the play button on the embedded video
The heading for this really stands out.
“The real you is not enough.”
It’s quite strong, as well, I feel personally
attacked.
Just gorgeous image, such a high def image
and that is the same person from the landing
page, isn’t it?
That’s the same character, I’m assuming,
anyway.
Cale: Yeah, that’s the main character
Meng: Yeah, quite like this section.
It’s very simple.
I think I would have preferred, maybe, if
that image did something.
So, some hover effects.
So like, for example, if you hover over the
billboards, maybe they glitched or moved.
That would be a really cool design thing but
apart from that, yeah, it’s not bad
Isaac: Yeah.
Cale?
Cale: Yeah, they’ve done the testimonial
sliders really nice.
It’s hard to make testimonial sliders interesting.
So just giving it that little, kind of, glitch
effect as it moves keeps in with their branding
and fits the design and just makes something
that’s usually boring and at the bottom
of your website a bit more interactive, I
guess.
The bottom image, yeah, it’s really nice.
I wonder if that’s in-game footage or if
that’s just concept art.
I’m struggling to read the text, though.
Not “The Real You is Not Enough,” the
one underneath.
I think there’s a bit of a readability issue
there with how thin the text is on such a
strong background.
Isaac: Yeah, I would agree.
When you’re dealing with that level of contrast
with yellow and black, you really do need
to have the black – if it is the secondary
colour, or the colour of the text – it does
need to be bold to be readable.
Meng, from what you were saying, I think that
an idea that would have worked really well
was having, maybe, kind of a parallax effect
in this image because it does have such a
depth of field in it.
That would have been nice to see them play
with slicing this image up and, kind of, creating
the impression that you can see off into the
landscape.
It’s still a pretty amazing image.
Okay, next part.
So, yeah, fairly standard stuff, what are
our thoughts?
Cale: It’s pretty simple.
Just, I guess, shows the main features of
the game.
I would like if, once you hover the images,
that they do something like play a small,
five second clip of whatever is happening
there but it does what it’s meant to, I
guess, shows you “Play as a mercenary outlaw,
Live in a city of the future, steal the implant
that grants eternal life.”
Basically explains a little bit about what
the game is about, gets you interested, gets
you hyped.
Meng: Yeah, I’ve gotta agree, there, with
Cale.
I would have loved if there were, like, little
short gifs.
For example, the first one with the chick,
maybe pop it around the corner and the car
driving off and maybe like, the last one with
the guy – head butting the screen, or something.
Just a little animation like that, that would
be really cool.
The white-on-black text is much more readable
than the black-on-yellow previously.
I also think it would have been interesting
if they also made the yellow bars utilise
the same, sort of, cut off shape as the previous
buttons.
I think that would have been a nice touch
if they did that.
Isaac: Yeah, no, I agree.
I mean, even here, just a subtle little cut
out would have been a nice touch.
Yeah, it’s very basic.
I guess, though, with this game as we all
know, it is a game that there’s not a lot
known about the meat of it.
So, they are kind of, holding their cards
close to their chest.
On another landing page, you would expect
this section to link to other articles or
other sections on this landing page that would
then further explain the concept, but here
you’re just getting a bit of a sneak.
That’s the purpose of the page but that’s
fine, it works well and then we’ve got a
pretty basic newsletter form here.
I mean, not much you can say about it.
I mean, it’s got standard – if you guys
want to send me an email, send it to this
one – Right, I forgot, I’ve got to click
the box and then that works.
Yeah, it works.
simple.
I mean, just from a design perspective, having
it in this very heavy black section of the
website, using the yellow for the contrast
works really well.
Just to draw your attention straight to it
because it does become, when you’re scrolling
down at least, in this part, the most visually
interesting thing there.
Yeah, I don’t know if you guys have any
thoughts on the newsletter form
Cale: I like the flashing line in ‘Enter
your email address.’
It keeps in with that whole cyberpunk feel
because, you know, that’s what you get with
your WordPress’s and your command lines
when you need to type something.
So, it’s a good way to show that you can.
Even though it’s got ‘Enter your email
address’ there, it’s another way of people
going, “Right, I can type in this area.”
Meng: I like that they’ve kept – because
consistency is so important for me – so
the fact that they’ve used that same yellow
to make it really pop out, as well.
Fantastic.
They’ve also employed that cut out shape,
so not just a straight rectangular shape.
One thing I will say is, when you put in your
email and it didn’t automatically pop up
- the black of the ‘submit’ button didn’t
automatically pop – that aha moment of “Oh,
I didn’t tick the ‘I would like to receive
blah, blah, blah the confirmation box.”
I would have liked if they made that more
obvious.
So, either have the confirmation box already
checked or, have like, you know when you start
typing an email it has that red helper note
to say you have tick this before you can submit,
sort of thing.
Isaac: Yeah, and also, let’s be real here,
sneaking in that you sign up for the newsletter
together with the age confirmation thing.
Kind of, a bit, not nice.
Like, you have to do both, you can’t just
be like “I’m 16 and I don’t want this.”
Cale: Yeah, but this whole area is ‘sign
up for the Cyberpunk 2077 newsletter.’
So, if you’re typing it there –
Isaac: That’s true, and I guess you have
to be a certain age.
Yeah, you may as well.
Okay, now, the carousel.
Okay, I’m gonna say one thing: I don’t
like these buttons.
I like the animation, I just don’t like
the colour of them.
I feel like this white is, meh, but that’s
all I’m gonna say for now.
Other than that, you guys go.
Cale: I mean, it’s a pretty standard media
section showing screenshots, wallpapers and
concept art.
There’s not much you can do.
The hover effect over the image is a nice
little touch.
Does it do anything when you change pages?
No, and if you click the arrows left and right,
does it do anything?
Isaac: Not those ones.
No, I don’t actually think they have – Wait,
there we go.
Okay, that’s pretty cool
Cale: Okay.
Okay, yeah, so that’s got quite a nice effect.
I mean, that’s all you can really do with
a media section.
It’s just there so you actually look at
the pictures, so trying to add too much stuff
into it but they’ve found a nice balance
Meng: I do like the shape of the buttons.
It kind of reminds me of a SIM card, for some
reason, but I have to agree with you in terms
of I’m not so confident on this off-white,
sort of, light grey colour because another
thing is, it makes the writing hard to see,
as well, for those buttons.
For the ‘screenshots, wallpapers and concept
art’ buttons.
It does make it a bit hard to see, so that
might be another readability issue.
I’m a huge fan of like, the transition animations.
So when you click through, or click right
or left, how they have that transition animation-
I love that.
That’s a fantastic touch
Isaac: Definitely
Meng: Another thing is, when you click on
any of the images, they give you those different
dimensions so they can download the media
assets and I think that’s fantastic because
any good landing page will give like, any
type of value proposition and getting something
for free is always a fantastic way to encourage
people to either want to sign up to the newsletter,
or to pre-order, in this case.
So providing that for the user is really,
really good.
Big ticks for the landing page.
Big ticks.
Isaac: Yeah, alright, new section.
Fairly standard, as well.
Just going back on the colour, I like this
blue.
I would have liked to have seen it used a
bit more throughout the other sections of
the page but, whatever.
I kind of, probably, would have preferred
there be some images but, at the same time,
that does contrast well with this image-heavy
section that you’ve just been through.
So, I think those two parts play off each
other quite well.
You know, carrying on that shape with the
design and branding elements, I guess, of
the game.
Adding those little, simple touches that make
it not just a bunch of boxes with text in
them.
Should we click on one, as well?
Just to see what their other pages –
Cale: Yeah, let’s have a look at one – Yeah,
sure.
Isaac: Yeah, so, it’s kind of a –
Cale: Standard blog
Isaac: Yep, standard blog.
You know, they’ve got a lot of great imagery,
so they can use that and yeah, just keeping
it simple.
Having socials on the site is nice.
If you’ve got a short article, it makes
sense that you can just share it as quickly
as possible.
Yeah, good stuff.
Meng: I’m a big fan of the slide-ins for
the links at the very bottom.
So when you go down, all the links, kind of,
slide in.
I love that.
It’s just really subtle but any kind of
small animation like that, I’m a huge fan
of.
Where the text kind of slides in.
One thing I am confused about is the use of
the two different colours for the links.
So, they’ve got like, the blue for some
and then they’ve got yellow for others.
So I wonder if that would work better if they
just kept with just the yellow, or just the
blue, but that’s more of like, ‘I wonder
how that would work,’ kind of thing.
Isaac: I mean, I think in the context of this
site – because it’s got that, kind of,
tech, glitch thing going on- it works, but
I think on another website it might feel a
little bit like someone’s just tried to
cram a bunch of different little special effects
in there and it seems like they’re kind
of overdressing their site.
Meng: Yeah
Isaac: Like, if a professional website had
something like that, you might be a bit like
“Okay, cool, I get it.”
Okay, so, I mean from here I guess we’re
at the bottom of the webpage, so it makes
sense we go to the responsive.
There we go.
So, let’s start from the beginning.
That’s not working.
Minor technical difficulties.
Should we maybe choose a bigger one?
I feel like this isn’t like –
Cale: Yeah, choose like, an XL
Isaac: Okay, cool.
I can change it in post.
Yeah, so this is a really nice, vertical rearrangement
of that header image, and you know, going
straight down, I mean, I guess it’s not
as clear that the video link is – Obviously
the Youtube button is pretty obvious, but
probably would have been nice to actually
see Keanu again.
And yeah, like here obviously they’ve fixed
that readability issue which is probably something
they could have done on the desktop version
as well.
Meng: Yeah, see the white-on-black just works
so much better
Isaac: And then, at the same time, I guess
they didn’t want to cover that half of the
car because I was like, you could have just
extended that yellow box down but, eh.
Isaac: Yeah, so this part, fairly standard.
Cool.
Cool, cool cool.
Great.
Yeah, I mean, this is a very responsive site.
Wait, yeah, that makes sense
Meng: Yeah, that’s a nice touch.
Yeah, that is
Isaac: And that’s what it’s all about,
being responsive, isn’t it?
Meng: It actually does look more aesthetic
like this
Isaac: I agree
Cale: Okay.
Yeah, that’s actually –wow – that’s
quite nice
Isaac: Yeah, I kind of, almost, would have
preferred the media and the news section to
be next to each other on the desktop but I
feel like the news wouldn’t have had as
much attention given to it
Meng: Yeah
Isaac: Okay then.
So that the website, so what score are we
going to give it out of 5?
Cale: I give it a 4.5.
I mean, there’s nothing really wrong with
it.
A few small readability issues, like just
with that one section but apart from that,
it does exactly what it’s meant to do.
It looks good, it fits in with their branding.
Everything is smooth, it works really well
on responsive.
Bonus points for having Keanu Reeves in the
video on the homepage, of course.
Isaac: Definitely
Cale: So, yeah, I’ll go with that.
It’s a beautiful site and I’m super pumped
for the game
Meng: I think I’ll probably give it, like,
a 4.7.
It, pretty much, ticks all the right boxes
for a landing page right now.
Everything conduces to like, driving people
to their main call of action and it’s the
only button in the entire landing page that’s
red which is the ‘Pre-order now.’
So, fantastic, love that.
They provide a value proposition.
The way that they’ve done the testimonial
side is so simple.
I love that they didn’t give a huge, massive
snippet of the entire reviews which is what
a lot of people tend to do and I’m not a
big fan of that
Isaac: It’s actually screwing up
Cale: No, it’s because you’ve gone from responsive, back.
You need to refresh it in desktop.
Sometimes that can happen.
Yeah.
Isaac: Oh okay
Cale: It’s just a little bug with how Chrome
handles responsive.
Sorry, continue
Meng: But yeah, also, I feel like they could
have gone that one step further with the design
for the second section.
Just having some sort of animation, or hover
effect, or kind of utilising a parallax, almost,
design with what you were suggesting.
And also with that 3 column images, same concept,
I feel like they kind of just went with “Oh
this is simple and its good” and they kind
of just stopped there.
And, probably, just the readability on some
sections.
So the black on the yellow.
I think another thing, as well, that they
could have done in that section is if they
bolded certain words so that could have been
a really useful technique so when your eyes
skim over that text, you would pick up on
the most important aspects of it.
Cale: Yeah, you could bold like, “Open world,
action-adventure, power, glamour.”
Meng: Exactly
Cale: Just those key words in that small phrase,
make them stand out.
Yeah, that’s actually a really good idea.
I didn’t think of that.
Meng: And the one last thing I’ll say is,
that heading for the newsletter section.
The “Always First.”
That messaging, kind of, gets lost on me.
I feel like they could have utilised something
a bit more effective there like, “Be the
first to know,” or like, you know, “Get
updates as they come” or something along
those lines.
Like, “Always First” is kind of lost on
me in that aspect, but apart from that, I
love the consistency.
Consistency on a landing page is like, so
vital and so important and they’ve done
that really, really well
Isaac: Okay.
I’m going to give it a 4, personally.
Only in that, it was just something I noticed
because we are talking about it as a landing
page and, just, something that I feel that
most landing pages - I mean, maybe it works
just for this one because it’s a different
market.
Gamers, different way- but I feel like with
most other landing pages, you would have that
CTA again somewhere on the landing page.
You wouldn’t give someone just one opportunity
to do that and they’ve really only done
it once.
They don’t have it anywhere else.
So that’s my one gripe with it.
Only in terms of like, as an example for other
people creating landing pages, don’t do that.
But this screen in itself is, pretty much,
anything you actually need to sell the product.
You don’t need anything more because it’s
showing you the product and then telling you
that you can get it there.
So, yeah, just for that reason.
Cale: I think you’re right, if they just
left this one page as their landing page,
I think that would’ve been perfect.
They don’t need anything past it.
Isaac: Absolutely, yeah.
Okay, cool.
Alright, I guess we are done for this one.
Have a fun afternoon guys and we’ll catch
each other later
Cale: Stay safe
Meng: Alright.
Thanks, Isaac
Cale: See you, guys
Isaac: It’s alright.
Thanks.
