Streaming live at 10am (PST)

No Man's Sky website redesign


#1

Hi guys!

I thought I'd share this with y'all because I'm pretty happy with it and it really shows off the possibilities you can achieve with Webflow.

I'm still blown away by the visuals every time I pick up No Man's Sky and despite all the bad press the game's received since it's release, from a designer's perspective, I personally think this game is fascinating.

Thus, I was inspired to remake the pulsing Atlas diamond from the game in full 3D using just some divs and transformations. I then turned this little project into a full remake of the game's website homepage. to add some depth to the background, I've added some parallax movement based on mouse movement and I love the final product.

Last note: I've noticed the 3D CSS doesn't display correctly on many browsers so I suggest you view it in Chrome.

Enjoy!

No Man's Sky Website

My website share link (currently being overhauled)


#2

Hi Olliepop! This is fantastic! Your octahedron is not perfectly aligned though! :slight_smile: I've created all the Platonic Solids in Webflow... try creating an icosahedron, now that was a challenge! (yes, I'm showing off!) I was so impressed that I could do this with Webflow: http://webfonicsolids.webflow.io/

Yes, its a shame 3D transforms don't work properly in other browsers. The flip cards on my site above don't work very well in Firefox or IE.

Regards
Kai


#3

They're really cool Keejo! I like how you just used an image to fill the faces of your tetrahedron and octahedron, in hindsight, I should have done the same.

The problem with the octahedron from No Man's Sky (seen on the official website HERE) is that it isn't perfectly symmetrical, and therefore very difficult to perfectly align. I wanted to get the shape as close to the original as possible and so I just had to get the angles as accurate as I could.

Thanks for the feedback!
Ollie


#4

Hi Ollie, you're right... the NMS shape is a stretched out octahedron... I in no way meant to diminish your efforts! If you didn't use images to make the triangle shapes, what did you use? if you don't mind me asking!

I was really looking forward to NMS but PC release has not gone well. Gutted that its not multiple player either.

Good to meet you on the forum.

Regards
Kai


#5

Hey Keejo, sorry for not replying sooner.

No worries, I created the triangular faces using a div with a full height border on the base and a half width, transparent border on the sides, a bit like this:

On the topic of NMS, I agree, the lack of multiplayer is a real disappointment, I hope they plan to add it in future updates.

Nice to meet you too!


#6

Thanks Ollie, no problem!

That's interesting... I would never have thought of that!

Sorry to ask another question but how did you do the little video demo? ...that's really handy to help explain stuff.

I hope they add it too. It's amazing how MNS are keeping quiet about the lies and hype about multiplayer, hoping everyone will just forget about it. I think that's Sony's influence.

Regards!


#7

Yeah, my goal was originally to use the octahedron as a small loading animation and so I wanted to keep it as small as possible to minimise loading time but on hindsight, when it became part of a webpage, I should have changed it to images.

No problem, ask away! I captured my screen using a program called Bandicam and then edited it slightly in Premiere Pro and exported as a GIF.

Yeah agreed, people have looked back at interviews and the way Hello Games answered questions regarding multiplayer now seems pretty deceptive unfortunately.


#8

Wow guys you both rock !
These demonstrations are fantastic and also show how good Webflow can be.
Thank you so much to share this with the community.
BTW @Olliepop do u also know a macintosh alternative for Bandicam ?
Thank you by advance.
Regards


#9

Hey @Blaise_Posmyouck, no, you rock! :slight_smile:
I hear screenflow is good for Macs. Quicktime can also do screen capturing.
I hope this helps!


#10

Thank you very much for the fast reply.
Keep doing great stuff :slight_smile:
Take care.


#11