We have a brand new design and new animations and layout for the home page. The home page we had was temporary, awaiting the 4 sections (services, Knowledge Base, Articles and Projects) to go live with content and obviously we needed a little time to create the new design. Having this time, a new design was created in Illustrator, then turned into a layout on a local machine. The new design sections have been condensed to remove duplicates and remove the unneeded sections and added a USP (unique Selling Point) section and an About section. Each section has a new layout that changes depending on the device viewed on so fully responsive, as before, but layouts between devices very different per section. We tested the new design for performance, SEO and UX locally before pushing the new design live as usual, but with the new animations and fades we looked at memory too.
As usual we look at Google Lighthouse to give us a steer on our UX and performance and this is at 90% with the new design. There is some room for improvement so we'll take a look at that in the coming weeks.
All animations have been recreated in Adobe Animate and re-coded from scratch to use the JS animate function instead of the mix of CSS and JS but we'd like to look at animated svg or png to take advantage of vectors and/or antialiasing depending on format. We've also added in the air balloon animation that was missing before. All the images have been re-created shaving a little off the size helping performance.
The home page is looking much closer to finished but there are still a few more sections to go, but they can be added at a later date.
If you're interested in the how we did any of this or would like something like it for your business then contact us and we'll see how we can help.