When it comes to making a great impression online, the devil is very much in the details. Cutting corners on our web design can have a big impact on the overall appearance of your site while tweaking even the tiniest factor can make everything look more professional and more impressive – which translates as more visitors, more sales and more profit.
If you have a website or an app then it may have some basic animations for opening new pages or closing elements etc. If you’ve implemented animations like this at all then congratulations – you’re already one step ahead of much of the competition. At the same time though, if you’ve just settled for a stock animation then this might not be making the very most of what you could potentially do. Case in point – have you considered an ‘ease-in’ or an ‘ease-out’? These describe slight changes to animations in which the objects accelerate and decelerate at the start and end of the movement. There’s another aspect to consider too called the ‘overshoot’ in which the object will travel slightly too fast – almost excitedly – and then be forced to ‘bounce back’ into the correct position. While these changes may seem almost imperceptible, they can actually make a massive difference to the overall sheen of the app or website by giving it that professional polish and lending your elements almost a ‘personality’ of their own. You can add more elements to an animation too. Why fade in or come in from the left when you can do both?
Here’s something you’ve probably never considered: which way are the images on your website facing? In other words, if your image had a face, would it be looking in at the text, or away off to the edge? You might not realize this, but if you look at professional sites and magazines it’s always the former: all elements point in towards the content, which has the effect of bringing the viewers’ eyes in that way too. Again, you probably wouldn’t think it would make that much difference, but now that we’ve been trained to expect this setup, your site will look less professional unless it features it.
Here’s a brilliant example of a very small design element having a big difference – rounding the edges of your boxes. Even doing this ever-so-slightly will again show attention to detail and give your app, website or book the appearance of being customized by a professional team and not just created in a ‘cookie cutter’ conveyor belt type manner. Add custom edges to your CSS elements and you’ll notice instantly how much better everything looks.