Mister Slyther Posted July 25, 2017 Share Posted July 25, 2017 I've been reading and looking at UI animation and prototyping. So I decided to have a go and do it on my own design. While I'm still experimenting and testing things, considering loading times is something very important as well. This is just an experiment at the moment. I used Adobe Aftereffects and Adobe Experience Design for the design, exporting the assets individually and then putting them in AfterEffects. 1 Link to comment Share on other sites More sharing options...
Botre Posted July 25, 2017 Share Posted July 25, 2017 What exactly is the point of animating those elements? Imho animating for the sake of animating tends to feel a bit powerpointy. Link to comment Share on other sites More sharing options...
Mister Slyther Posted July 25, 2017 Author Share Posted July 25, 2017 15 minutes ago, Botre said: What exactly is the point of animating those elements? Imho animating for the sake of animating tends to feel a bit powerpointy. There are tons of sites that use Jquery & Javascript to animate elements of their website. I'm sure you've seen those by now, haven't you? Animations are also used in Apps, and I have to learn animation for UI Prototyping as well. Link to comment Share on other sites More sharing options...
Botre Posted July 25, 2017 Share Posted July 25, 2017 26 minutes ago, Mister Slyther said: There are tons of sites that use Jquery & Javascript to animate elements of their website. I'm sure you've seen those by now, haven't you? Animations are also used in Apps, and I have to learn animation for UI Prototyping as well. That's a very weak argument, just because you can doesn't mean you should. How does animating the navbar items enhance the customer experience whatsoever? Link to comment Share on other sites More sharing options...
Mister Slyther Posted July 25, 2017 Author Share Posted July 25, 2017 (edited) 7 minutes ago, Botre said: That's a very weak argument, just because you can doesn't mean you should. How does animating the navbar items enhance the customer experience whatsoever? Small simple animations are engaging and interesting, they pull users into the design and help develop an interest towards the content they are viewing. Also animation helps with adding instructions and direction for the content of the site, you can control the order of the information being displayed using animation. It's something that's really trending and will continue to do so. What makes it trendy is realism. However, too much of it can be a distraction and cause a bad experience for the user. So doing it in moderation is alright and has a good effect. Edited July 25, 2017 by Mister Slyther Link to comment Share on other sites More sharing options...
primelf Posted July 25, 2017 Share Posted July 25, 2017 1 hour ago, Mister Slyther said: Small simple animations are engaging and interesting, they pull users into the design and help develop an interest towards the content they are viewing. Also animation helps with adding instructions and direction for the content of the site, you can control the order of the information being displayed using animation. It's something that's really trending and will continue to do so. What makes it trendy is realism. However, too much of it can be a distraction and cause a bad experience for the user. So doing it in moderation is alright and has a good effect. While I agree with animations being engaging and quite essential to a powerful and unique design - I don't agree with the animations used for this. The nav bar is definitely the weakest aspect of this design. Not only does the font not fit the theme of the website - the animation just feels... gross? By going on this website you have to wait for a boring animation and an ugly font to load in. On the contrary, the main header and subheader animation and font fit beautifully and is a great example of good animation. It's quick, clean, and not too much while still adding a little bit of life to an otherwise static website. I would have the navigation stay static as well as change the font and underline. It's too bulky and needs to be thinner - create the line yourself rather than just using the underline option in your typography settings. Aside from that if you really want to incorporate animation animate the circles as you load in. I'm not sure the use of them but this would bring more attention to them. The final tip I would have would be to tone down the gradient. It's somewhat empowering and just lowering the opacity a slight amount could benefit the overall design greatly!! I apologize if this isn't what you were going for and by no means am I 100% spot on with this recommendations, but from what I've learned I would love to see you try this out and see what you think of the result! If you have any questions feel free to ask, UI design is my passion! Link to comment Share on other sites More sharing options...
Mister Slyther Posted July 25, 2017 Author Share Posted July 25, 2017 (edited) 6 minutes ago, primelf said: While I agree with animations being engaging and quite essential to a powerful and unique design - I don't agree with the animations used for this. The nav bar is definitely the weakest aspect of this design. Not only does the font not fit the theme of the website - the animation just feels... gross? By going on this website you have to wait for a boring animation and an ugly font to load in. On the contrary, the main header and subheader animation and font fit beautifully and is a great example of good animation. It's quick, clean, and not too much while still adding a little bit of life to an otherwise static website. I would have the navigation stay static as well as change the font and underline. It's too bulky and needs to be thinner - create the line yourself rather than just using the underline option in your typography settings. Aside from that if you really want to incorporate animation animate the circles as you load in. I'm not sure the use of them but this would bring more attention to them. The final tip I would have would be to tone down the gradient. It's somewhat empowering and just lowering the opacity a slight amount could benefit the overall design greatly!! I apologize if this isn't what you were going for and by no means am I 100% spot on with this recommendations, but from what I've learned I would love to see you try this out and see what you think of the result! If you have any questions feel free to ask, UI design is my passion! I appreciate the feedback and coming another UI designer your feedback is valuable While the font has been picked on by a few users that did give feedback, some liked it and some haven't. So it is quite subjective. I do agree with the animation of the navigation taking too long, it can be changed definitely. Also, the circles represent pagination. You can see it here: http://i.imgur.com/PE6Ym10.png By no means you should apologize, i appreciate your critic! Can you link a site where I can see some of your work? I'm interested to take a look Edited July 25, 2017 by Mister Slyther Link to comment Share on other sites More sharing options...
primelf Posted July 25, 2017 Share Posted July 25, 2017 24 minutes ago, Mister Slyther said: I appreciate the feedback and coming another UI designer your feedback is valuable While the font has been picked on by a few users that did give feedback, some liked it and some haven't. So it is quite subjective. I do agree with the animation of the navigation taking too long, it can be changed definitely. Also, the circles represent pagination. You can see it here: http://i.imgur.com/PE6Ym10.png By no means you should apologize, i appreciate your critic! Can you link a site where I can see some of your work? I'm interested to take a look Had a feeling it was pagination - wasn't too sure though! One recommendation I have for that would be to change the location of the one that's on the window. Generally, I locate any pagination elements relative to what represents the website or that is an element of the background that stands out. If anything, for this image, at least choose a window that isn't black haha. I don't have my personal website up right now actually because I'm trying to come up with a unique design for it. But whenever I get on my PC I'll see what I can find. I'm actually going to go ahead and PM you to because I have a few questions for you 1 Link to comment Share on other sites More sharing options...
LumbridgeFarms Posted October 1, 2017 Share Posted October 1, 2017 Looks good man Link to comment Share on other sites More sharing options...
