Mujib took the time to dissect three of his favorite websites with the infamous parallax scrolling effect. Mujib is Junior Web Designer at Stampede.

It’s official: all the guys (and the girls) in Stampede are crazy about parallax scrolling effect. It has found its way into almost every requirement and statement of work we have – it is almost like we are trying to find an excuse to use and experiment with its capability. Furthermore, it’s the in thing. Every web folk should know it.

Parallax? Well son, elaborate.

If you must know, parallax scrolling effect is like the coolest magic trick to hit the web design shores at the moment. Before this it was used widely in video games for years. According to Line25, the effect became popular when it was implemented in the background of Silverback app website. Back then it was only used as an Easter egg – visible only when the browser is resized. Now the effect has since evolved and seen as part of a scrolling feature of a web site, where multiple backgrounds seem to move at different speeds.

Hm, I am intrigued. Can you show me how it works?

You are lucky. Here I have in my sleeve is a showcase of three of my favorite websites with this effect – let me show you how awesome it is. Don’t only take my word for it – please also click on the links and experience it for yourself.

#1 – 360 Long Street Zurich

URL. Concept and design by Hinderling Volkart, Zürich, Switzerland.

If you are being observant after you are done picking your jaw off the floor, you would notice that 360 Long Street Zürich is filled with eye-catching elements. It is another one of those little big details discovery in user experience.

These bubbles in red animate as you encounter them by scrolling through the street along the way. Click on the information underlined and you will be taken to another realm – for example, another person’s room where you can further explore his/her room by more scrolling and listen to his/her favorite music.

The icon on the top right of the browser will let you experience the street life in Zürich whether it is day or night. And if you are careful enough to notice, every people we see on the streets have their faces blurred.

The parallax utilization in this website is made by extracting images from a video scene. When scrolling started, the menu on the right screen will fade out and animated video images will appear until video ends. A high resolution image will  appear when scrolling stops.

As you scroll, flying bubbles will move from the bottom to the top, in left and right curve directions.

#2 – Cultural Solutions UK

URL. Concept and design by Hoohaa Design.

Cultural Solutions UK is one of the websites with parallax scrolling effect that I had my eye on. Staying true to the nature of a designer, I could not help noticing some eye-catching elements implemented in this website.

… like these cute icons distribution to the buttons.

Or the fact that the animated background will follow the cursor along the header. (You have to give this a try yourself to see how it works.)

Not to forget the noticeable heading designed with good color contrast and excellent choice in typography.

You gotta love the scrolling news ticker for its Twitter feed too!

Unlike 360 Long Street Zürich website, the parallax utilization for Cultural Solutions UK is not that heavy and complicated. The effect is mostly applied to the menu buttons, but it is enough to add that wow factor to the website.

#3 – Smart USA

URL. Concept and design by Smart USA itself.

I believe this is my favorite out of all three. Everything in the website – the title, the description and the visuals are so appealing you wish you had worked in this.

How the parallax effect works in here that as you scroll in the homepage, the car would zoom in closer to you. In fact, most of the navigations are done by scrolling, but if you get tired of doing so, you can always click the buttons in dots at the right corner of the site.

Cool! So, how do I learn how to achieve this effect?

Parallax scrolling effect is done with the help of well-defined images, jQuery and CSS3. There are many tutorials you could find around the web – among these are ones done by WebDesign Shock, Richard Shepherd and Theme Forest. You could also go see behind-the-scene works that goes into the making of Nike Better World website, the pioneer of parallax scrolling effect in web design.

Awesome! I will go create one now!

Good luck!

In my wonderful years of working as a web designer, I’ve developed a habit of browsing visuals and keeping a snapshot of anything intriguing. I snapped colors, color names, shapes, the immaculate use of white space, serifs, uncanny headings, scientific drawings, book covers, vintage packaging (hell, vintage anything!) and even hand-made circus illustrations circa 1910.

I’m not a classically-trained designer, so from the day I naively decided to be one, I rely primarily on observation and the readiness to stumble really badly and then gain a hopefully steadier footing. As a result, I rarely need to visit web design galleries prior to a design work. It’s good because all the snapshots I’ve kept steers me away from directly copying another designer’s work. It also brings about passive inspiration – the type that burns in your brain for quite a while before you find some good use for it. I’m happy to report that I have six years’ worth of this happy design baggage.

Here is a collection of a few design and UI work I did at Stampede for May 2011. Instead of a full shot, I’ve chosen bits and pieces that matters to me when observing another web designer at work.

In a way, this is a monthly design journal, but I do hope anyone who shares the same peculiarities as mine would find these useful for their very own visual musings.

“Stop worrying about the fold. Don’t throw your best practices out the window, but stop cramming stuff above a certain pixel point. You’re not helping anyone. Open up your designs and give your users some visual breathing room. If your content is compelling enough your users will read it to the end.”

- Boxes and Arrows on Blasting the Myth of the Fold

I have been planning and designing websites for quite a while now and in recent years, the same notes keep creeping into our clients’ revision request: “Reduce the header height, move sections upward, try to keep everything above the fold.”

This could be a residue of the news-print industry where newspapers come folded up and the area “above the fold” must be exciting enough to compel people to purchase the paper.

We can apply the same argument to a website, whereby the fold line represents the area where vertical scrolling is required to view more content of a webpage. Instead of cramming as many “important information” into the area, try to prioritize and understand your audience. A first time visitor to your website needs a reason to stay intrigued past 5 seconds. Think of the area above fold as a compelling opportunity to entice, not overwhelm. In most cases, a simple but good, well-thought imagery and a line or two even better copy will hook enough for them to want more.

More importantly, by keeping restraint on what goes above fold, you are letting your most important content breathe.

Also remember that most people browsing the web today understands the purpose of scrolling. Every visitor to your website needs to learn quickly what your website is about, or else you’ll lose them. You will not do any better by crowding the header area – that would only dilute your message. What you want is just the right combination of visual impact and concise information. If they have quickly discovered what your website is about and now interested in the rest of your content, they will scroll to read more.

(photo by Alan)

Up to this hour, we’re still doing last minute removal of things from the original Stampede v3 design. With the amount of content we’re dealing with – 24 dissected portfolio pieces at last count – 8 months of detailing work on weekend and after hours don’t seem at all extravagant.

All in all, I spent around 180 hours of design time and that’s not only because of the level of complexity involved, but mostly the routine of going macro when everything is done, then removing almost half of it.

I still do incremental design change after sending the templates for Joomlafication, some so minute that only the most observant will notice. If we don’t have our own internal programming powerhouse, I can only imagine the costly bleeding.

Because this is the most ambitious project we have done for ourselves just yet, tension does run high and heated arguments over design vs code were so commonplace that when we finally come to an agreement, it was worth sitting back to take in what just happened. Such is the merry partnership I have with Dov.

It took 4 major revisions, countless minor ones, a bit of going back and forth with the rest of the team for valuable insight (whether to place this element or that on the right or left or scrap it altogether). Stampede v3 was almost a practice of convoluted layering (up to 400 at last count) to achieve a particular blend, testing out new composition for different content type, revising typography properties. Let me not bore you. Needless to say, it required plenty of patience as well.

Though I must say the only constant throughout the revisions was our signature color red. Our new logo and branding does not go through multiple iterations like most design agencies do. The branding – if you can call it that – was a split second decision of deciding what embodies Stampede. After that was decided and validated by the rest of the team, we now have a new logo, polished and all but still represents the very same identity.

Stampede has been very blessed and lucky, to say the least. We have a good score of clients who pretty much leave most design and development decision to us. We also get smart young people generous enough with their passion and time to become part of our team. I felt it’s about time for us to share values that have prevailed since Stampede’s very early days so we have designed and built a special page for this. As co-policymaker at Stampede, I probably have more fun with the Values page than most people expected.

So when v3 is finally launched, you may find it look way simpler than the actual effort – I sure hope so after the many hours spent mulling over what to safely remove and what to keep.

But then again, Stampede’s own website design has always been a sort of escapism for us from daily client requirements. It’s something we don’t do everyday and probably will never do again. For that reason alone, I know a few more days of punishing pixels is worth it.

Illustrations by Catrina Dulay, California.

“…and still making heads turn.”

Shaza Hakim works from her office overlooking the valley of Gunung Raya, where wreathed hornbills swoop down from the mountains in pair and dusky-leaf langurs swing from tree to tree. Shaza is the Creative Lead at Stampede.

It’s amazing, mind-numbing even. It has been three years and Bird Malaysia is still getting reviews from design galleries and making it into “n-list of Website with Awesome footer/navigation/header/color Design” blog posts. The best part of all, it’s also one of the few recognized designs proudly bearing the word “Malaysia”.

Thank you to the good people at Junglewalla for letting us go nuts with Bird Malaysia!