Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Si Digital: a responsive jQuery masterclass

Digital chemistry comes to life on the re-branded site for this agency that produces bespoke apps and websites

As a group of designers that manipulate silicon, Si is an apt name for this business, as Si is the chemical symbol for that element.

Lead designer Tom O’Malley explained the thought behind the name: “Silicon is also one of the main elements which makes up sand and being that we’re a coastal company, the focus on the symbol Si seemed perfect. We set to work on re-branding around this science theme, honing our vision of creating ‘Digital Chemistry’.”
The site design is striking from the initial landing page and gives a flavour of what to expect as you move through each page. “We wanted to re-think the idea of a landing page,” explained lead developer Alex Crooks. “We looked at the classic Honda adverts, where a chain reaction occurred, as various car parts knocked into each other. We wanted to take our users on a journey down the page, which interested and engaged them for as long as possible.”

Alex was tasked with creating the site’s animated components. He used a series of divs that held the tubes and liquid elements inside. Using jQuery animate and jQuery UI draggable ensured that the site was responsive across all platforms it can be viewed on. As a new approach to the vertical scroll, the flowing liquid is a winning formula which encourages visitors to move through the site where Si’s expertise can be communicate.