Really nice site. All the animations are subtle and tasteful. I like that the logo is never still. Its aways moving any time you see it. I wonder if in the future we could see logos that are 100% in motion and never seen stagnant.
Thanks! And yes, constant motion is the goal for future implementations of the logo
Also really nice how the 2 logos (the one at the top of the page, and the one on the fixed header) stay synced up. Another subtle touch.
Animations are fuego, love the loading state
Thanks for sharing! Its a great work all together in terms of clean design, graphics, colors & animations. But from UX point of view I found animation bit distracting. May be you can activate them on specific interactions. (Like on roll over state or so.)
I've never seen a more broken website. I don't know if I just accessed it while you were working on it or something, but it is completely broken in Safari and Chrome and nearly crashed my machine.
Hi Laura, sorry for the delay in response. I believe I have fixed the issues you are talking about. (If you subscribe to comments..) would you be able to check the site again and let me know if it is still broken? if so, what OS do you have? thanks. maybe check my comment to Benjamin for some context.
Hi Blake, I've had another look and it's much improved. It works better in Chrome than Safari but I could see content in both to begin with. Eventually it broke my graphics card and I had to restart the machine though.
Can I ask why you chose WebGL? I think you could achieve the animations I saw in SVG and it would deal with your processing problem.
You also need to optimise your images, you could lose up to 60% on some of them. I don't want to make any assumptions about your workflow so I will just share how I do it. Save For Web in PS and test different file types to see which is the smallest, then run through an optimisation engine such as MozJPEG or PNGCrush. I use Gulp to automate this and also to concatenate and minify SASS/CSS and JS. This is JS heavy site so that could make a difference, although only a small one. If you're serious about front end this is definitely a thing to look into.
The design is fantastic but unfortunately in web dev it doesn't make a difference if the performance isn't there because the site is unusable.
I hope this was helpful :-)
p.s. I'm using latest browser versions on El Capitan on a 2010 iMac.
I guess I'll be the anti dribble-esque "SWEET!" guy.
Is this a side-project of an official O&M thing? If it's an O&M thing I'm kinda disappointed in it. Mostly because it feels a bit lazy (see #1 below).
It's broken in Safari. The page loads in a broken state for about a second and then is replaced by a full-screen youtube video. All you can do is play it. No other options exist. No logo, information, menu, etc is available. I'm not sure how this would even get by the most basic of QA passes.
Why does everything need to fade in as I scroll? If you scroll even at a normal pace, a lot of times I see a blank white page for a second and then content fades in. Why? I think it might be nice if it did it as you scrolled the first time down from the top, but it feels awfully weird to have it keep doing it over and over. IMHO, it would feel cleaner without it at all. It adds nothing to the experience in this capacity (entire sections fading in versus supporting graphics/imagery).
I'm not sure what the point of the spinning clocks are. When you hover over one, it slows the others down, but this really doesn't make much sense as supporting imagery to the "6 years" and it's phases... because the clocks are all random. I'd prefer to see unique imagery that helps support the notion of a timeline and various stages to opening day.
I will say though, I am very intrigued by the color changes that happen dynamically. It's different/unique without being "in your face". Nice!
Hi Benjamin, I appreciate your honest feedback! Not sure if you subscribe to replies, and I apologize as two weeks have gone by, but I'd like to respond, at least for posterity i guess. No, this is not an O&M thing. This is a side project where I wore many hats, trying to give a voice to an ambitious entrepreneur trying to change the world. 1. I am a designer first, and i taught myself front end development. As this was a side project, it was not put through a rigourous QA. The safari bug baffled me as it worked on my machine in safari, but not on other OS's.. Didnt find that until launch. For some reason, the compressed format of sass minification was the issue. 2. I ditched the fade in effect. It did well in our limited user testing, so I kept it around, but all in all it didn't add much really, and just took a toll in performance. Gone. 3. I also abandoned the spinning clocks, and made an icon set that is much more communicative.
I hope you don't still feel the project is lazy, as I am but 1 person and this is a passion project, that I make time for on the side of my full time job. I did a logo design exploratory, logo animation exploratory, content and communication strategy, edited the launch video, designed and built the front end (went through 3 iterations), and CD'd the building illustrations, interview video, and music composition. I am curious if you have a different overall opinion about the site as it is now. I want to make it as good as it can be, which is hard to do when we are not yet funded.
…But you know it’s excessive the moment when all these animations start to make your fan noisier. For the record I’m using an rMBP 13-inch.
I'm workin' on making these a good deal less taxing on the processor. Do you think the animations are excessive from a motion & communication standpoint? or just regarding performance. thanks Peiran.
From both a performance and a design standpoint. I think it is excessive when every time I scroll down a bit, new content always “appear” (in animation), so I’m getting moving stuff in my face constantly. And not just constant, new moving stuff – you’re making it so the new stuff that’s introduced animately also contains animation! (The small clocks) This is just a lot of moving stuff adding to the cognitive load asking for attention. But worse, none of this motion is crucial, i.e. demanding my attention when the stuff deserves it! (Example: input field wiggles with wrong password)
I get the motive of yours trying to make eye candy (and eye candy can be fantastic if used properly), but too much novelty can be overwhelming. Apple likes this too; my Safari dies every time I tried to open their Apple Music page.
Hey Peiran, Thanks for the feedback. Not sure if you subscribe to comment replies, as some time has gone by... but I've gone and made several design adjustments and performance enhancements. I paused all the offscreen animations and removed a good deal of the excessive motion, and lazy loaded all the images. I removed the spinning clocks and replaced them with a more communicative set of icons. Im curious how you feel about it now, I agree that stripping it down was for the better. Thanks! :)
Much better, much less annoying. The small little animated logo at top bar when scrolled down isn’t cropped properly (black pixels at top of image). The moving map at the background now becomes a rather nice touch since it’s only used at top and bottom. Vertical rhythm / advancement still needs improvement, but I do agree that restraining the motion makes a big difference.