BLOG SIX- Si Digital’s JavaScript Magic

屏幕快照 2014-11-09 下午2.44.26

This JavaScript site is Si Digital‘s new-look portfolio and blog. This grabs the attention via its intriguing homepage animations, all done through JavaScript. We can see such technique easily guides the user through our services, with liquid moving through tubes activating an animation at each stage.

To achieve this effect they used jQuery .animate(), using its step() option to work out where the liquid was in the tube – and if it needed to activate any other animations on its journey. We know that viewers tend to find their own interest whenever they head on a site and engage. Everybody reads at different paces. Here, Si Digital tried to find the right balance for the liquid speed, which is not too slow but trackable. Not too much embed of JavaScript makes such great impact on the overall effect to a site. Finding the creative way to present is sometimes more important than the actual technical showcase.


One Design Company-Clean and Consistent


I have been dreaming to work for this Chicago based private design company, One Design, for quite awhile. It’s getting harder to find such a design company that sticks with their design principle and keep it consistent on every single platform they involved. Here, for instance, is their website, consisting their work portfolio, company intro, staff and contact information for job openings. It’s undeniable that most design companies tend to have a decent looking website as the trend pushes them to go digital and treat their digital image as the most essential.  One Design makes things even better as they notices the importance of linking the website with company’s design language.  The whole site keeps the blue color head to toe and all the elements stay in a similar taste that is simple, visual-heavy and straight forward, even the team member info. All the navigation works perfectly.I always know where i am and what to do if I want to go to another desired place.  I just can not express how much i love the opening animation on landing page, not just because of its smoothness but the overall design which, unsurprisingly, still plays under One Design’s iconic style. It’s such a great move to include the company message into this animation.

I really want to learn the transition effect when hoover mouse onto the portfolio images.  I’m not sure about if this effect can only be achieved by java or not but definitely worth to learn. The 90 degree rotation on the MORE WORK button also looks neat and it seems CSS can make that happen.

the Guardians HV DONE IT AGAIN! —BLOG 4

The NSA Files: Decoded – what the surveillance revelations mean for you blew my mind already for being an amazing interactive online story telling piece with crazy amount of attention to detail, perfect layout and all the other design stuff. But this one, Gay rights in the US, state by state, just boosts the Guardians to a even higher level.

Trying to tell a story about gay rights is never a simple task especially when the range is “state by state.” It can be either super boring to read with tons of stats and text if you try to tell the reader everything or too superficial, losing all the importance if you make it too generic. The web designers from the Guardians found the best way to tell a compelling, interesting story about this serious issue. They combine infographic with amazing simple but super fun interactive feature. The design is consistent as all the states are illustrated in a pie chart. Colors are added to serve as certain annotation which is very clear to understand. The whole experience is straight forward and engaging. Viewers are able to see and check whichever factor about gay rights they are interested in, marriage, housing, employment, etc.

This is by far one of the greatest combination of interactive online story plus infographics. What we can learn right here is the importance of being consistent with your design. You may call it “keep it simple” but technically it’s about consistency with your design language. Set up color palette, design elements and one central design direction before you started to work on anything physically in the web. Viewers don’t prefer how fancy or how many cool design elements are there on a website but prefer a decent-looking, unique and user friendly one. Remember that.


CSS Technique Explained- MoreSleep

MoreSleep, a creative agency from Berlin, offered a stylish but user-friendly portfolio site.


Large font-size values, neat scrolling effects and a red-heavy, contrasted colour scheme make this site stand out.  CSS transitions make it smoother to navigate through pages and content. Background-size properties are used to control the scaling of images at different sizes. Even the newsletter signup form is styled to match the clean look and feel.

One major CSS technique I found it worth to mention is the so-called Pesudo-elements. A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to:

  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element

The most widely used pseudo-element is the ::first-line pseudo-element, which is  used to add a special style to the first line of a text. However, in the case of MoreSleep, it inserted a lot ::before and ::after pseudo codes. The ::before (::after) pseudo-element can be used to insert some content before (after) the content of an element.

Columbia Missourian, just look at it

Usability and user experience are things I always want to talk about when it comes to website design. 

It’s tough for modern, fast-paced, fully-digitized people to live a day without website surfing. Nobody wants to spend 5 minutes figuring how to navigate himself on a site and what exactly info he is looking at. Any confusion could be disastrous to a web’s subscription. It’s especially difficulty for news org to come up a user friendly website which has to contains all the information and insure every visitor is able to locate himself and find the desirable news with minimum effort. Without question, the Guardian helped the Brits to get on the podium again. The page design and set up are from the Guardian are by far the best I have ever seen in any news website. And it’s the usability and user experience that made the Guardian website gold. Every time I set myself on any Guardian’s page, it neither makes me ponder nor takes away my precious time, never. The whole site text-book like follows Krug’s criteria. The best is definitely how the divide up the section: its three-column hierarchy is very easy to distinguish. We normally read from left to right, which explains the reason Guardian puts all essential news on the left column, while feature stories in the middle and the miscellaneous to the right. Then they fully take advantage of color and white space, making the normally cluttered news page super easy to navigate. 

In contrast, our local Columbia Missourian is still living in 2010. JUST LOOK AT ITS LANDING PAGE. 

There are technically THREE top menu bars, which is absolutely mind-blowing to me. When you hovers under the menu bar located right down the logo, it brings you even more choice. Not to mention the tiny text and cheap-looking fonts from these menu bars. The top picture sliding bar looks horrible to me and when I hover my mouse on it, guess what, more text!

The whole front landing page of Missourian is very hard to make viewer focus. What usually grabs people’s attention is bright color and picture. I jumped into the page and immediately I started to staring at the feature story’s picture on the bottom and it took me quite a while to read all the text and realized “no that’s not something i was looking for.” Sections are ok-ly located on the left column with red bold text to distinguish from each other, a good decision. But a bad decision for having text only. It’s just painful to look at or try to search the valuable info. The whole left column gives me a feeling that i’m looking at some kind of data base, thanks to the help by the time they added next to each news title.  

I cannot believe that all the big names from Columbia Missourian(also from our J-school) are able to bare such miserable web design. I highly recommend people who in charge web development take a close look at the Guardian’s approach in terms of color balance, menu bar design, picture vs text balance and hierarchy. Please.

The Good:

The Bad:

NSA Files Decoded by The Guardian

NSA files decoded  Edward Snowden s surveillance revelations explained   World news
Traditionally, New York Times usually takes care the business easily when it comes to interactive online storytelling. A number of awards they won on such category proved their capability. This time, however, the British Guardian took the crown as they did an unbelievably fantastic job for its online feature story of NSA surveillance in the US and around the world. It’s by far one of the best online storytelling I have ever read, clean, simple but innovative and man they are really good at tailoring the CSS!
The issue, NSA Files Decoded is massive,  featuring a number of videos, infographics, interactive elements and of course millions of words, but all you need to do to navigate the page is scrolling, that simple. Interestingly, I noticed beginning late 2013, the implement of scrolling in web page design has been elevated to a new level, simply because it fits readers’ control habit. As long as it’s done properly, nobody will dislike reading a online story combined with multiple media by simply scrolling their center mouse wheel.
And that’s just the beginning. As a graphic designer, the color scheme between text and graphics, the font, the whole layout are just plainly text-book like gold. Notice the balance between blue and red color through out the whole story: red color takes majority of the graphic and texts that are clearly important to the story, while blue serves as a complimentary color implemented perfectly with some of the reds to create a complete design that looks well-balanced. All the interviewees are centered in the page, the frame-less design not only looks spot-on but makes them perfectly aesthetically fit the whole story board. And the attention to detail in effort to make the report easy to navigate and easy to read whichever part you want is just spot on: the video’s auto play is instant and smooth while a “stop auto-play” button is always available under each interview video. In addition, the default volume is appropriately set up, neither too loud nor too low to be heard. In case you want to know a bit more about the interviewee, they prepared a twitter button with each interviewee. More than that, a navigation bar always stays at top with six number buttons for readers to go back and forth through the report rather than scrolling like a maniac. Bravo!
The interactive elements, how could we miss them. All I want to say is that people The Guardian must hired some of the best animation makers as well as graphic designers. I just found all the elements are super fun to play with while serve a great role to either inform audience more information visually or explain some of the jargons remarkably. My fav will definitely be the illustration on POR and PGP, coolest design ever seen, 
A simple sum up ultimately, this is undoubtedly one of the best online story you could find today, it’s well balanced in terms of multimedia elements. The Guardian recognized that they needed to help people understand the implications, connections, and impact of this news. So they weaved together video interviews, text, source documents, timelines and interactive tools to offer the reader a complete and comprehensive story. 
Remember, scrolling is the king 😛
John Ye