cursosdeinformaticaonline-blog

[cursosdeinformaticaonline-blog]

Void

"That was beautiful – what the heck just happened?" So you might say to yourself after your first visit to Void, a (predominantly) monochrome, glitchy outer-space meditation that straddles the line between soothing and eerie. London agency Hi-ReS! built the journey by stitching several pre-existing interactive web projects into a tapestry of sound and motion.

Void calls to mind two award-winning and immensely atmospheric iOS games: it has that cosmic aural floatiness of Hemisphere Games' Osmos and the impossible geometries of ustwo's Monument Valley. But this is very much of the web. Three-dimensional effects (which at times feel six- or 10-dimensional) were created using the three.js library, and Web Audio has been pushed to its limits.

Working with Web Audio was "fun and interesting", says Nicholas Salzano, head of production at Hi-ReS! "We used a sound synthesis programming library, CoffeeCollider, to create and distort the sounds for the Hi-Res! artwork." As with the experience of, say, watching movies by David Lynch, the best mindset for visiting Void may be one of a non-rigid mindfulness, paying attention without trying to analyse things too concretely. Like a labyrinth or a nautilus shell, this project serves, in Salzano's words, as an "interactive playground", offering us mystery, rhythm and the opportunity to reflect.

[cursosdeinformaticaonline-blog]

tota11y

Making accessible websites is critically important. However, the techniques and testing involved often seem like they require deep specialisation that can make web developers and designers feel like they're adrift.

Enter tota11y: a simple tool that can be included as a JavaScript file in a page or, even more simply, used as a bookmarklet on any site. It flags items in the page that run afoul of accessibility guidelines - low visual contrast or missing textual alternatives for images, say. Wayward elements are flagged visually, making it easy to snap a screen grab and show team members or clients exactly what the issues are, while the expanded explanations coach users on methods to quickly fix the glitches. Khan Academy's website for tota11y is not overtly glamorous, but then, important work isn't always glitzy. The down-to-business simplicity of the text – both in appearance and in content – belies the complexity of the problem the tool itself aims to alleviate.

[cursosdeinformaticaonline-blog]

Masi Tupungato

This wonderful website from international digital creative agency AQuest for Masi Tupungato, a winemaking project based in Italy, almost lets the imagery speak for itself.

Unusually, a loading screen is used for each of the pages as the crisp fullscreen images load up. Usually this would be a big no-no – users want the content as soon as possible. However, here it actually improves the user's experience by ensuring images are fully loaded before any content is unveiled. The design creates a sense of empathy, leaving users feeling like they've been to the winery and picked the grapes themselves.

The site can be on the heavy side on some pages (ranging from 1.2MB up to 5MB in weight), which could be improved by introducing some lazy loading techniques. However, despite its weight, the site is well-built, with the start render in under one second and return visits loading within the second mark too. The framework is based on unsemantic.com, which is a successor to the 960 Grid System. When viewing the site on desktop and larger viewports, users are able to see and interact with each of the wines separately. They can take advantage of the larger screen size to display all of the wine characteristics and details side- by-side. In contrast, on the mobile site the details and description slide in and can be slid away again smoothly.

[cursosdeinformaticaonline-blog]

IBM Design

In the past few years, IBM has invested in growing a design programme and steering the company towards a human-centric approach to creating software. It recently came out with the IBM Design Language, which contains an update for its animation vocabulary. It provides design guidance and resources for web developers, all open-sourced on GitHub. Advertisement

What I love about this animation update (even more than the fact that it's open sourced) is how the studio looks at IBM's heritage and the physical world for inspiration, instead of other digital properties. Hayley Hughes, IBM design language lead, says that the team pulled inspiration from machines; in particular their solid planes, physical mass and rigid surfaces. "From the powerful strike of a printing arm to the smooth slide of a typewriter carriage, each movement was fit for purpose and designed with intent," she explains. "Our software demands the same attention to detail to make products feel lively and realistic." Why is animation so critical to IBM's Design Language? "Just as a person's body language helps you read the conversation, animation relays critical information that helps users understand how to navigate and use our products," Hughes says.

[cursosdeinformaticaonline-blog]

Code Conf

The site for CodeConf really goes above and beyond the standard conference website. The conference was held in Nashville, Tennessee, and everything about this design pays homage to this location.

The website itself is nicely responsive and has a warm, cohesive colour palette. The whimsical illustrations give the site character and create a playful country-rock aesthetic that continues throughout the page (and even into the event itself).

No details are spared, as even the menu's decorative horizontal rules (only seen on smaller screen sizes) flow with the country-rock aesthetic. The site implements Google Maps for location features, and is built with jQuery and AngularJS. Everything is illustrated: all of the venues, the 'set list' of speakers, the call to action for buying tickets, and breaks between sections. There is also a fun cast of characters that can be found dotted around the site: vector cacti, unicorns, dragons, octocats, and cowboys and girls playing music and posing playfully around the page.

[cursosdeinformaticaonline-blog]

Leg Work Studio

Leg Work does a lot of great work on the web, from graphic design to interaction and media. So it comes as no surprise to find that its own personal site is no exception. The studio's personality shines through via fun, mixed-media illustrations. It combines vintage photo effects (such as the dot grid pattern) with digitally painted white accents and scans of physical handwriting to create unique art to represent the agency.

However, it is not just the illustrations that make this website notable – the interactive animations really bring it to life. Some of the illustrations themselves are actually videos instead of static visuals, created with After Effects, and website components like the sidebar animate smoothly.

The website is designed with mobile in mind, and mobile interactions are mirrored in the desktop experience, where the user can swipe with the track pad to get through the sections. The website is built using Modernizr to ensure compatibility, and jQuery for interactions.

[cursosdeinformaticaonline-blog]

Louis Browns

For this website about the history of the St. Louis Browns baseball team, digital agency HLK has crafted a very beautiful experience. The site reads like a well-crafted vintage book, complete with chapters and textured typography. Users can scroll through each chapter for a time-based, story-like experience.

Inspiration for the site has been pulled from 1920s manuscripts and advertisements, with many of the images directly from the years they are describing. This brings a uniquely dated feel to a modern, digital space. This is complemented by a grey-and-brown toned colour scheme, accented by a single shade of orange. Some of my favourite parts of this site are the little details, such as the menu button (circular with a hamburger menu inside) that converts to a baseball on hover. I also love the timeline on the left-hand side, which follows the screen and updates on scroll. The site is built using Node.js and the Express framework to allow for smooth updating and flow between content.

[cursosdeinformaticaonline-blog]

Javascript

JavaScript creates platforms that can engage a user and ensure that they remember your site and continue to revisit. It can be used to create games, APIs, scrolling abilities and much more.

The internet is full of web design inspiration, including great examples of JavaScript being used to bring a website to life and provide great user experiences. Here we pick some of our favourite examples of JavaScript in action for your inspiration.