The design and build of the Si digital website
Having successfully created ourselves a new identity, our next project was to completely rethink our web presence. Being a digital agency, this is by far our most important promotional tool and therefore a great opportunity to showcase our new brand.
Ideas, illustrations and the landing page
With our ‘digital chemistry’ theme, we all sat down to discuss how it could be translated in a fun and understandable way. We wanted to really promote our services on the landing page but take a direction that would set us apart from other agencies. We considered the idea of a journey, inspired by things like the old Honda adverts, where a chain of clever events occurred, slowly guiding you through until the end where you’re presented with the call to action, a car. We envisaged the Si chemical liquid found in the symbol, leading the user down the page. This would occur by the liquid flowing through a series of tubes that travel into a specific piece of technology, activating each in turn. This was a unique way to engage the user with our content. We understood that some people are visual and others prefer to read every word on the page. This idea struck a happy medium, as even if you glossed over every word on the landing page, you’d still be able to grasp an understanding by seeing the illustrations through the journey. Once at the end of the animation, you would be greeted by our call to action in the footer, to contact us if you’d like to work with us.
Tom got to work on wireframing and sketching all of the ideas. To do this, he used a combination of our IdeaPaint wall which he’d use to flesh out the initial ideas and then move to his trusty pencil and paper. It wasn’t too long before he’d illustrated each stage of the desired animation by hand, allowing us to really visualise what it might look like. This was all laid out on the meeting room table in sequence, where we discussed, collaborated and iterated accordingly.
Tom spent a few days with his head down in Photoshop, recreating his sketches into pixel perfect illustrations and designed some of the global elements such as the header and footer. The landing page was really taking shape as a static visual and we were all loving the clean, minimal, yet intriguing style. Mandy then began tailoring the content for each stage, really simplifying our processes into concise, digestible paragraphs. Tom continued to work on producing the wireframes and visuals for the other pages, while Alex began working on the animations.
Bringing the homepage to life
The solution Alex chose for the liquid was to create a series of divs that held the tubes and liquid elements inside. It would start at width 0% and increase to 100% inside the tube using jQuery animate(). The animate function had a step() option which allowed us to check on the liquid’s progress on it’s way to 100% width or height (depending on the direction of the tube). Utilising this we were able to trigger other animations based on the water’s progress through the tubes, such as the iMac’s webpage being built.
Controlling the liquid speed was an interesting challenge as people read at varying speeds (or not at all). We chose a speed that allowed us to comfortably read the text without feeling too rushed. To overcome the issue of those that read even slower we made sure the liquid paused at the top of each stage and waited for the user to scroll down before continuing.
Those that had no interest in waiting for the liquid were still presented with relevant loading animations and could still read all the content if they scrolled ahead.
The beakers and heart rate monitor were created with canvas as adding more complex jQuery animations would have had a negative impact on the smoothness of the liquid. The liquid in the beakers was built up with a series of particles that would experience random impulses of force in order to maintain a wave-like motion. The heart rate monitor was created with an array of points on the canvas that the line moved between.
The A/B area was a fun way to demonstrate split testing to our visitors. Their choice determines the final route for the liquid similar to a real split test where the best performing design/copy layout would be used going forward. The pulsating buttons were achieved using CSS3 keyframes, altering the scale with an “ease-out” to give the pulsing effect. We also show live stats about the percentage of users that made the same choice as you, and there are even office bets down for the final percentage after 3 weeks (Alex would like you to click B more)!
A fun and exciting team
We all love being part of the team at Si digital and we really wanted to give our visitors a glimpse of what we’re all about and what we get up to inside and outside of the office. There were so many ideas for this page, but one of the main focuses was the idea of the timeline. This was conceptualised as a way of giving visitors an easy experience to access some of the key landmarks that we achieve as a company and some more light hearted bits.
The timeline is entirely dynamic and pulls in data from our social network accounts and blog posts. The user can drag the timeline using their mouse or keyboard and clicking on events shows more information. The timeline base was built on the jQuery draggable() function, the rest was simply a case of defining boundaries for a random max height, alternating up/down directions and auto opening events we’d marked as featured. The elastic edges (when you try to drag too far to the right or left) were achieved using jQuery animate() to return the timeline to it’s base left/right position.
Easier ways to find us
Making sure your contact details are readily available for any client or prospective client is crucial, the easier to obtain the better. We wanted to take the contact page that one step further and really make it convenient for our clients to come and see us. Rather than copying and pasting your post code, going off site and then entering it into google maps before a journey, we wanted to keep this all on the page. Tom designed a simple way for visitors to enter their post code to obtain directions, reinforcing it with the friendly illustration style adopted across the site. On inputting your post code, the page loads a step by step guide to reaching us, supported by a large interactive map. This data was pulled from the Google Maps API which allowed us to re-create their directions service, without taking visitors offsite, and maintaining our branding.
Although this didn’t reinvent the wheel in terms of obtaining directions, it built upon and added to the experience of the Si digital site, by allowing visitors to interact directly with the contact page. This worked perfectly when applied responsively to mobile, with a simple touch of the ‘use my location’ button we grab your GPS position and give you directions straight to our front door.
Illustrating the blog
Illustrations were a big part of the original ‘Something Interesting’ website and it’s this attention to detail that we wanted to maintain on the Si digital site. We decided that each blog post deserved its very own illustration, which gave Tom the fairly big task of illustrating some of our key blog posts that we’d written over the last few years. We didn’t want to over populate the page with social links, categories or tags. We kept the design really minimal to engage the user with the content. Within each post, we simply suggest other posts of interest at the bottom of each page, based on relevant topics. A small detail on the blog page that we all loved was the load more arrow, which once clicked, depicts the Si symbol animating like an egg timer. It’s small details like this that just add that little bit more to an experience.
It’s not just a job
Being a healthy, growing company, every now and again we have an exciting job vacancy. We wanted to treat the jobs page as not only a way of presenting an opportunity, but a way to let any potential employees know how fun it is to work here. We could of created so many illustrations to promote the perks, but we chose four that we value and that make us smile. Tom illustrated some Pepsi Max cans, as we provide an unlimited supply.
Time management is something we do extremely well and we wanted to communicate this with the illustration and summary: ‘working smartly 9 to 5′ ‘providing the latest iMac’ and ‘pizza and movie Fridays’ were just a couple of others that we enjoy at Si digital. The page on the whole, like all of the other pages on the site, was kept really clean and simple. When resized on tablet or mobile it has such a great charm.
We are currently looking for a great Web Developer to join the team, come and see for yourself .
Keeping corporate visitors and our grans happy
Cross browser testing, the job every developer dreads. It was a particular concern in this project due to the extent of new technologies being utilised across the site. We knew we the jQuery animations would hold up, but canvas and CSS3 are definitely not supported in older IE versions. The way developers used to provide fixes for older browsers was to target specific versions of IE in various style sheets. This wouldn’t be enough for us as some of the technology was so new it wouldn’t necessarily work in all modern browsers, especially across mobile devices.
The solution was modernizr, a fantastic feature detection library. Using modernizr we were able to detect the browser’s capabilities and provide fallbacks or fixes based on what it could support, rather than it’s specific version or vendor. For example if the browser didn’t support canvas we could provide a static image, or fall back to an animated gif image.
During our testing we found that animations were paused while the user was scrolling and this lead to a jarring experience compared with the fluidity of the desktop version. For smaller devices we switched out the animated version with a responsive static replica. We still guided mobile users through the page with the use of the tubes, and we gave all the illustrations gorgeous retina versions for devices that supported it.
To finish up
Even though designing a site for yourselves is one of the hardest briefs you’ll ever have, what made this project so great was how much fun we had creating it. We really were able to use our imagination and reflect who we are as a company to produce something we all love looking at and interacting with. We hope our clients and new users will too! From conception right through to it’s completion, the whole team here at Si digital played a role in the success of our new website.