V!nc3r Posted November 9, 2018 Share Posted November 9, 2018 I always found a little too cheap the rotating effect of the logo in the default loading screen (asymmetry and logo upside-down). Since the 4.0 coming, that could be a detail to enhance. So I've started to do few tests, that you will find here: https://www.nothing-is-3d.com/tmp/bjs-logo-ideas/ But before going further, 'cause these kind of things takes a lot of time to test, I wants to know: what do you think about updating this loading logo? what do you think about my tests linked above? have you other ideas to suggest? what are the technical limitations of this loading? (cause I supposed it's write in the core of babylon.js, that's whyI made few tests using embed svg) jerome and Gijs 2 Quote Link to comment Share on other sites More sharing options...
Guest Posted November 10, 2018 Share Posted November 10, 2018 Excellent idea! Let me add @PatrickRyan to this thread as I would love to get his feedback Technically the loading logo has to be a CSS animation Quote Link to comment Share on other sites More sharing options...
V!nc3r Posted November 10, 2018 Author Share Posted November 10, 2018 And the logo itself is a base64 image right now I suppose? (in which src file can I check it by the way?) Can it be an svg animated through javascript (like I tried here) ? (this probably leads to browser incompatibility I suppose) [edit] by the way, don't know about that but maybe svg elements can be animated through css? that's could be awesome Quote Link to comment Share on other sites More sharing options...
Guest Posted November 11, 2018 Share Posted November 11, 2018 Yep svg are considered like iamges. Current logo is here:https://github.com/BabylonJS/Babylon.js/blob/master/src/Loading/babylon.loadingScreen.ts#L98 V!nc3r 1 Quote Link to comment Share on other sites More sharing options...
V!nc3r Posted November 14, 2018 Author Share Posted November 14, 2018 Here a little progress, for now which one you guys prefer? https://raw.githubusercontent.com/Vinc3r/graphic-assets/master/BJS-loading-screen/_ideas_/logo-BJS-render/multiple-views0000-0100.mp4 Do not hesitate to suggest me ideas. Currently these anims are made using Blender, allowing quick-and-dirty tests, but I try to only use CSSable animations. Quote Link to comment Share on other sites More sharing options...
Gijs Posted November 14, 2018 Share Posted November 14, 2018 @V!nc3r, I like how active the cube is at #3, it looks like a lot of computing/loading is going on! Quote Link to comment Share on other sites More sharing options...
V!nc3r Posted November 14, 2018 Author Share Posted November 14, 2018 yep, maybe it could looks better with progress bar or rotating thing Quote Link to comment Share on other sites More sharing options...
PatrickRyan Posted November 14, 2018 Share Posted November 14, 2018 @V!nc3r I totally agree with you that the spin on the Babylon.js logo as it stand could be better. In that vein, we are in the middle of a complete rebranding effort for Babylon.js as a whole and the loading animation is obviously part of that work. We expect to launch it with the 4.0 release. That said, I did want to take a chance to lay out what we are using as guidelines for motion and the UX design principles behind them. We need to have an indeterminate spinner for loading assets as we won't be able to know how long the assets will take to load. The challenge with indeterminate spinners is that whenever you have a noticeable loop in the animation (as in the animation has a pause before starting over or the logo builds up to completion and then disappears to build again) the user will subconsciously notice the loop and count it. If they notice the number of loops taking longer than normal, they will start building anxiety and likely click away. For an indeterminate spinner, you want pleasing motion that is almost hypnotic so that the user gets lost in appreciation of the motion and does not notice the time passed as easily. This may seem strange and manipulative, but most of UX design is about easing tensions and anxiety for the user to keep them engaged. We would like to use the spinner as a branding moment, but I am not convinced that means it needs to be the logo being manipulated. If you've noticed what Google has been doing with their branding moments in their various properties, their spinners are all about the google branded colors as dots. You get the tie back to the brand because of the colors, but they aren't in the position to need to manipulate their logo to do it. Most brands do not allow additional elements being added to their logo. There are clear guidelines for standoff of additional elements and for the most part changing the treatment of the logo is regulated by the standards guidelines. This is to maintain recognition of the identity with consumers and build trust. It has been shown in many cases where simply changing the packaging of a product can cause a drop in sales as the consumer distrusts that this is the same product they've always purchased. In some ways, brands have been beaten back into submission by consumers when they change their brand too much. A good example of this is when Coca-Cola tried to use New Coke as it's new brand to compete with Pepsi in the 1980s. Now what you see is a unification of branding, even within subsets of offerings. Even with Diet Coke having a different name, the logo is styled to feel like Coca-Cola to reinforce the overall brand. We have to design our motion around the limitations of CSS so that will be a forcing function for what the loading screen looks like. We want to reinforce the brand, but at the same time adhere to good design principles and be easily recognizable. This is most important when people who may not be familiar with Babylon.js run across a site that uses us as a viewer. We want them to become aware of the engine even if they aren't going to be building with it. It's the same idea as the launch of a video game where you see all the logos of the middleware or engines on screen or the start of a movie where you see all of the logos of the production houses that worked on it. Hopefully this gives you some insight into what we are planning. We agree with you that the current motion isn't a representation that we want to stick with and violates several of the points above. Let me know if you have more questions or want to discuss the design principles more. inteja, V!nc3r and bghgary 2 1 Quote Link to comment Share on other sites More sharing options...
V!nc3r Posted November 14, 2018 Author Share Posted November 14, 2018 That's nice explanations! I'm probably not the best person to be in charge of that, especially 'cause I don't have much experience in UX things. When you say Quote we are in the middle of a complete rebranding effort does that mean you already have a guy on this task? Quote Link to comment Share on other sites More sharing options...
PatrickRyan Posted November 14, 2018 Share Posted November 14, 2018 14 minutes ago, V!nc3r said: That's nice explanations! I'm probably not the best person to be in charge of that, especially 'cause I don't have much experience in UX things. When you say does that mean you already have a guy on this task? Yes, we had a designer initially working on some new directions for the branding with me art directing the effort. Unfortunately he was pulled to another team before he could complete the work so I will be taking over the design myself going forward to help speed the process along. Quote Link to comment Share on other sites More sharing options...
V!nc3r Posted November 14, 2018 Author Share Posted November 14, 2018 OK so I suppose I can stop working on this myself-auto-assignation task isn't it? Nice to see that a rebranding process is on the move! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.