New HTML5 sites, though, seem to prove Steve Jobs right. If the 10 websites below are any indication, most developers will soon be jumping ship from Flash and moving over to the incredible and plugin-free capabilites of HTML5.
1. Form Follows Function
URL: http://fff.cmiscm.com/#!/main
Jongmin Kim is a Korean-born designer who lives in New York City and is the senior designer and developer for Firstborn Multimedia. His company works for A-list companies like Sony, Cadillac and Pepsi. However, Kim might be better-known for his personal work than for his commercial work; his Form Follows Function site is a collection of entrancing and engrossing "interactive experiences" that highlight just how far HTML5 can go. The award-winning site includes a spinning navigation wheel on the homepage, with each interactive experience represented by a card. By clicking on a card, an interactive experience opens up. Each one is as much a piece of art as it is a chance to push HTML5 to its limits.
Some of Kim's artistic interactive pieces are inspired by well-known artists. "Raining Men," for example, is essentially an interactive version of Rene Magritte's famous painting of the same name. "Hue Blending" takes a cue from Andy Warhol's grids of soup cans, and "Color Pixelated" uses Van Gogh's "Starry Night" as its basis.
Each piece allows the user to interact with Kim's work. In "Raining Men," the user can change the direction of the silhouettes of the men as they rain down from the top of the screen; "Wiper Typography" permits the user to control the direction and speed of an imagined windshield wiper blade as it pushes letters on and off of the screen
2. Parallax.js
URL: http://wagerfield.github.io/parallax/
Parallax scrolling, for the uninitiated, is an animation technique that's been used since the 1940s to enhance the sensation of depth within a two-dimensional environment. In essence, the background images scroll through the screen at a rate slower than the foreground images. Since the days of Atari, video game designers have been using parallax scrolling to make video games more immersive.
Parallax engines have been used by website designers to create intriguing, often one-page websites that take a storytelling approach in their navigation to keep the visitor scrolling down almost indefinitely on a single page. Much like the original animation technique of parallax scrolling, the background images often move at a different rate than the foreground images on these sites or are covered up by a foreground layer as the user scrolls down. On other parallax websites, the long scroll down the page smoothly moves the user from one interactive experience on the site to another.
Parallax.js is a JavaScript API that enables web developers to create these parallax effects. Unlike many parallax engines around today, however, Parallax.js, which was designed by Matt Wagerfield and Claudio Guglieri, creates parallax scrolling sites that automatically respond to mobile device orientation and screen size. Furthermore, Wagerfield and Guglieri have made their parallax engine open source, allowing any designer to download and utilize the engine.
The demo site for the Parallax.js engine is the URL listed above. It relies upon HTML5 and CSS3 along with JavaScript for its artistic, beautiful animations and effects.
3. Idis
URL: http://ididthis.idispharma.com
Not everyone in the world has easy access to the medicines that they need. Some medicines are so specialized or unusual that they have to be flown in from other parts of the globe to treat patients. By the time the permits and paperwork are completed for the government agencies that monitor such medicines, it's often too late for the patients. In places like the United States, this isn't typically a problem. In places like China, India, Pakistan and other developing nations, however, it's a big problem. Furthermore, even within the United States and other developed nations, the hard-to-get nature of rare medicines can create critical drug shortages. In 2011 alone, 251 drugs were in short supply around the U.S.
Stepping into this pharmaceutical vacuum has been Idis, a British-based pharmaceutical access company. Idis is not a drugmaker itself; Idis works as a bridge between doctors, hospitals, their patients, governments and pharmaceutical companies. Through relying upon Idis, some doctors, patients and hospitals have been able to fill their pharmaceutical needs in mere days, compared to the weeks or even months it might have taken to gain access to those drugs without the company's help.
Today, Idis has a new HTML5-based website that tells the very human stories behind the facts and figures of drug shortages. The "I Did This with Idis" site is not the company's main website; rather, it provides the "human side" of the Idis company story. Indeed, the website's tagline is "Human stories of hope and survival across the globe."
Visitors to the website are immediately greeted with an accordion-style line of images; clicking on any image expands the photo across the screen. On the expanded photograph appears a map and a person's name, such as "Sarah's Story." Clicking again takes the visitor to more information about that particular individual's medical story. In the case of Sarah, a video takes up most of the above-the-fold space at the top, showing Sarah, interviews with people in her life and the happy ending in which Idis saves the day. Below the video is a simpler text-and-photo based version of the story.
Other than the accordion-style frontpage of photographs, the small Idis logo in the upper left-hand portion of the screen, another button at the top that says simply "Info" and two social media links, the "I Did This with Idis" website has no other navigation. There are no footers, menus, company contact information or the like. Instead, the visitors are intuitively led towards the "Info" button if they want to find out more. A short, above-the-fold only page appears with basic company information, a link to its brochure and an email address. The site, therefore, is a perfect example of how less can often be more when it comes to website design.
4. HotelStyle
URL: http://www.hotelstyle.biz/
If Mel Gibson's character Mad Max had, at some point after the apocalypse, decided to go into business as a fashion designer, his clothing collections and his male models might look something like those at HotelStyle. It might not look like high fashion to the rest of us, but fashion trends have started in Italy for generations, which is where HotelStyle is located. The company, which has stores in Verona, Bologna, Andria, Bisceglie and other cities throughout Italy, offers the type of fashion items one might expect to find on a modern-day Jack Kerouac or Allen Ginsberg. Tight blue jeans, unusual combinations of sport jackets and t-shirts, denim and biker-style leather are the types of men's clothing offered by HotelStyle.
Like its fashion items, HotelStyle's website is simple and almost rebellious. As with many sites these days, and not unlike the Idis site outlined above, HotelStyle has opted to err on the side of giving visitors too little information rather than too much. There are no press releases on this site, no blog, no endearing "about us" page. The site is sparse, filled mostly with pictures, videos and long, vertically scrolling pages that tell HotelStyle's tale along with one, Duck Dynasty-style bearded male model wearing different outfits. None of the traditional SEO tactics are found on the HotelStyle website. Instead of using the website for that, HotelStyle uses its Facebook account to keep a running dialogue with its customers.
From a design point of view, the HotelStyle website is light and fast-loading thanks to its minimalism. However, its hard to imagine a similar site designed with Flash having such a quick load-time. Again, HTML5 shows off on the HotelStyle site; whether viewers dress like Mad Max or not, the clean, quirky site will be a welcome relief from traditional fashion websites.
5. Kennedy + Castro
URL: http://www.kennedyandcastro.com/en/
It should never come as a surprise when design firms and ad agencies make the most of the latest technologies and design trends. As such, it is no surprise that Kennedy + Castro, an ad agency founded in London with offices in that city, Rome and New York, has a spectacular, unusual, light-hearted but awe-inspiring website.
Upon arriving at the site, the company's buzzword-worthy tagline, "The missing link between brands and people," appears, followed by a poetic-but-vague one-sentence description of what the company does. As the user scrolls down, a cartoonish skeleton of a pig begins to draw itself on the screen. (Get the symbolism? "Kennedy + Castro = Bay of Pigs.") The more the user scrolls down, the more the pig starts to flesh itself out. Inner organs begin to reveal themselves, labeled with different parts of the site's navigation buttons. As the heart appears, for example, a label notifies the user that it represents the company's "People." The pig's intestines, strangely enough, represent "Works." The lungs represent "Clients."
As the user continues to scroll down, the pig fleshes out completely, politely covering itself and all its organs with a purplish outer skin. Clicking on one of the navigation links below, such as "People," quickly skins the pig, reveals the heart and allows the user to click "View," which then takes the user to the "People" page.
As if this unusual homepage was not already strange enough, most individual pages on the site have another unique feature: Instead of scrolling down to read additional content, users scroll across the screen. On the "Organization" page, for example, the user can scroll across the screen for some time, reading the different tidbits that Kennedy + Castro found to be important. If the user gets bored with all that scrolling, however, he or she can always jump to certain sub-sections using the navigation buttons at the top. Once again, HTML5 proves itself to be more versatile than Flash on this site; while Flash probably could have been used to achieve similar effects, HTML5 can do it all without a plugin, making the Kennedy + Castro site as easy to navigate on a mobile device as on a traditional computer.
Read More Like Comment Share
No comments:
Post a Comment