We started with messaging that informed the ad’s narrative content and offered a nod to the history of web development: “From table layouts to media queries, Media Temple has offered state of the art hosting to developers since 1998.” To bring the message to life, we considered ideas like an arcade-style game or an interactive timeline. Instead of advertising a single product or service, we wanted to make a positive statement about our brand in a clever way that would resonate with the site’s audience.
Web design animation project code#
At the end, I include links to the code of the entire project as well as a bare-bones version of my animation framework that you can use as a starting point in your own web animations, both on CodePen. In this quick case study, I’ll walk through the thinking behind some of the decisions I made, from storyboard to launch. The resulting ad is a lightweight animated banner built with only HTML, CSS (I used LESS), and JavaScript, framed by developer-friendly messaging. If this was going to compete for attention on a site that showcases some really great dev and design work, it needed to look good and be built in such a way that CodePen’s audience would want see under the hood. Media Temple wanted to leave a good impression, so this couldn’t be a typical GIF banner. It shouldn’t take too much time to load, bandwidth (especially on mobile), or browser resources. It’s an ad, not the content that’s driving users to the site. It must look great at 275 x 275, and scale down to 125 x 125. In creating the ad, we had a few technical and conceptual constraints. It was an exciting opportunity for Media Temple to boost its brand presence in the developer community and a chance for me to experiment with CSS and JavaScript-driven motion graphics, on a platform visited by thousands daily. For the month of April, Media Temple was offered ad banner space on CodePen.io, an online community for sharing and exchanging front-end code snippets.
0 kommentar(er)
