Table of contents for February 2016 in net

These are stressful times, and – reflecting over the last year – it’s hard to remember the good news. For me personally, one of the most impactful talks of 2015 was Eric Meyer’s ‘Designing for Crisis’, and we’re thrilled that Eric has written an essay on the topic for this issue (page 28). It’s a wakeup call: we tend to design for the perfect situation, but in reality this is rare. All sites will at some point be accessed by people in stressed situations, who can barely focus on your awesome design and beautifully crafted copy. The reason may be a personal crisis – as in Eric’s case – or a political one. Our work can help people in need; it can also enable those who don’t have a reliable…

Trying to learn everything about web development is an impossible task, yet people seem to try anyway. This can lead to burnout and mental health issues. I am involved with a few web meetup groups, and I’ve found it incredible how many talented developers are friendly and willing to help others. One of the developers I’ve had the privilege of meeting is Bobby Bobak (@bobek_balinek). At one meetup, we were discussing ‘unplugging’ together, and decided to set up something quick, easy and inclusive in the community. We came up with digiHike: an organised hiking group for people who speak geek. I remember having a really productive evening with Bobby. I was sat in my front room, communicating with Bobby over Slack. Within 30 minutes, we had a logo, and Twitter,…

A few years back, I designed an annual report for a polarising non-profit. Everything was looking great, including the printer’s last PDF proof. After over 10,000 reports had been printed (several pages and a speciality paper cover, printed with metallic ink, saddle-stitched with staples), the CEO called me in a panic. Client: There’s a huge mistake! My signature on the welcome letter in the inner front cover is missing! Me: You’re right, that’s odd. It was in the final printer proof. I called the printer and they checked their digital files. Apparently the linked signature image had somehow ‘fallen off’ when the cover was printed. They apologised and offered to make a stamp of the CEO’s signature, which they’d use to stamp the thousands of reports with metallic ink. Me:…

INFO job: Designer t: @cameronmoll w: www.cameronmoll.com The best web conference speakers need two things. First, an impressive track record in web design, ideally on projects the audience is already familiar with. And second, to be able to draw out lessons from those experiences, which everyone can apply to their own projects. Cameron Moll scores highly on both counts. The thing he’s best known for is very well known indeed. Authentic Jobs, which he founded in 2009, is one of the most popular job sites for web professionals. But it doesn’t just provide a service in matching the right vacancies to the right designers. The team’s constant battle to provide a high-quality user experience also provides Moll with raw material for his insightful talks. And that will certainly be the case…

SITE OF THE MONTH “The tiniest details have been considered, such as panning the sound as the world is pivoted” Tifany Rayside (@tmrDevelops) Over the Hills was created by French digital studio ultranoir, working with illustrator mcbess to present his group’s EP of the same name. The mixture of sound and exploration are perfectly coordinated to create a captivating experience. “We tried to push the boundaries of what we thought was possible with interactive 3D and sound on the web. We had fun playing with mcbess’ twisted cartoon style in building funny interactions based around a 3D spatial sound experience,” says lead developer Jérémy Saint-Prix. The project even made it into the real world, when the gramophone built for the project was 3D printed, painted by mcbess and exhibited in…

A personal project by creative director Jean Helfenstein, this site showcases the three phases your brain goes though when trying to come up with a solution to a problem. ‘Extract’ (“When you have a problem but don’t know the solution,” says Helfenstein) is visualised as a black sphere representing a brain, which is solid and inaccessible. ‘Sort’ (“When you have all those wild ideas, but you need to analyse them to see if they’re good”) is shown as a collection of particles. When the user rolls over each, it either fades out or transforms into a bubble. Finally, there’s ‘connect’: “Here you are able to connect the good ideas to find the idea that will solve your problem.” This project does a lot to immerse me in a new world.…

Cosmos is an aspiring astronaut’s paradise with rides to make a thrill-seeker’s heart race and facilities to stimulate and inspire young minds to learn more about the universe. The site is targeted at families looking for a fun day out and young people who want to get their adrenaline pumping. As this is a brand new theme park, the homepage is targeted towards new visitors and gives an idea of what they can expect from the park before they arrive. The homepage makes it really easy to book your tickets. Dynamic elements such as the countdown to the chosen date, along with subtle parallax effects and hover transitions, add a touch of depth and intrigue to keep users engaged. As the theme park’s popularity increases, the focus of the homepage…

SIDE PROJECT OF THE MONTH INFO job: Frontend developer w: una.im t: @Una net: How did you come up with the idea of creating Instagram-style filters in CSS for CSSgram (www.una.im/CSSgram)? UK: To be honest, the Instagram bit was kind of an afterthought. I’ve been playing a lot with CSS filters, gradients and blend modes lately, and have built a few web experiments. I presented my research to CSS Conf EU, using Instagram filters as examples to show how you can create any visual filter you want, purely in the browser. I was then asked by multiple people if those filters were available for use online. net: How can users create the fun filter effects? UK: Basically, it’s a mix of CSS filters (sepia, greyscale, saturation and so on) and pseudo-elements that…

When ecommerce software company Shopify moved to its new Ottawa, Canada headquarters in September 2014, we explored the halls like kids on a tour of Willy Wonka’s chocolate factory. Six floors – totalling 102,000 square feet – are filled with coworking pods, cosy corners and places to put your feet up. Our team worked with a world-class architecture firm to ensure there were workplaces for extroverts and introverts alike. They poured more than 180,000 pounds of concrete to create custom staircases between floors that allow conversations to continue, instead of being cut off by closing elevator doors. Every floor has a different theme, including Canadiana and streetscapes. My favourite nook is the library (1), nestled on our speakeasy-themed floor. Each meeting room on this floor is named after a cocktail,…

We work in an industry that is growing at a huge rate. It’s never been a better time to be working in digital; there are far more jobs and opportunities than there are people to fill them. If you are a company creating a new digital department, be that taking digital in-house or launching a traditional print or ad agency, you’re going to want to hire people with experience to do it. The problem is, the majority of jobs are for senior people and ask for three or more years of experience. Whilst this is great for established web pros, it creates two serious problems for our industry. THE PROBLEMS First of all, the digital industry can’t grow. In UX, where I work, many jobs ask for five years’ experience.…

Sensational design and superb development “The simple geometric animations really tell the story of the product and how it works. They say so much with just a small amount of motion” Val Head (@vlh) SARAH DRASNER Sarah is a senior UX engineer at Trulia and a staff writer for CSS-Tricks. She is based in San Francisco, California w: sarahdrasnerdesign.com t: @sarah_edo This site for Vibrant’s haptic communicator Thumper has a beautiful balance of subtlety in motion and moments of innovation and impact. I was immediately drawn to the attention to detail, use of asymmetry, and how precise and refined the small animations were. Site animator Chris Gannon’s (gannon.tv) explanation of what was done makes it even more intriguing: “Whilst working out the speed of the Thumper pulse, we had to refer…

Anyone who has used a US government site has, for the most part, endured a mixture of disorienting design patterns and dysfunctional code. This set of design standards for the US government is a breath of fresh air. One of the things that’s most powerful about this set of design standards is its accessibility. “We have examples of how to use the colours, and show examples that have already been tested for colour contrast. Accessibility is probably one of the key differentiators between what we’re doing and other frameworks,” says lead frontend engineer Maya Benari. It’s impressive that this framework has taken measures to be well-built, beautifully designed and carefully thought-out. The team took the time to write good documentation, not just for what CSS should be written, but for…

Marketing sites have a hard job of making an object seem epic and monumental, but Philipp und Keuntje took that challenge and ran with it. In this site for Sennheiser’s Orpheus headphones, users can explore a monumental soundscape, or create their own. The interface invites users to explore a forgotten stone ruin, where their duty is to both destroy a giant stone pillar and simultaneously create a track, generated by the sound of their strikes. They can then share their track with others within the site, or on other social networks. Unit director of digital Mike John Otto says, “With an experience that includes both film elements and 3D graphics, one of our key objectives was to ensure these transitions were seamlessly executed. The website needed to have wide reach…

The Park of Doom is a simple, easy to use site for visitors of all ages. A key feature on the homepage is the large photos, videos and details about the ride experiences on offer – these aim to boost up children’s excitement about the park. A simple navigation menu opens up to provide more details about the ride section. The user can then click on the link to open up that particular ride’s page to see more photos, videos, height and age information. There will also be calls to action for buying tickets, details of hours of operation and more. The interface feels exciting, starting with a single, close-up photo of a rollercoaster. The videos will open fullscreen in a lightbox within the site, and interior pages will feature…

www.hellomonday.com INFO Location: New York, Copenhagen, Aarhus (Denmark) Founded: 2006 Areas of expertise: Digital strategy, innovation, concepting, branding, UX, UI, development Selected clients: Google, NASA, YouTube, MoMA, Greenpeace, Bang & Olufsen Awards: 92 FWAs, 30 Awwwards, Awwwards Agency of the Year 2014 and 2015 We spend our whole lives at work, so shouldn’t we make it as fun and fulfilling as possible? It sounds like a pipe dream, but Hello Monday explicitly aims to make it a reality. On the international agency’s website, it calls itself ‘a creative playground rather than a production factory’. Fine words, but how does that work in practice? We chatted to president Andreas Anderskou and brand strategist Katie Hertel to find out. net: You say Hello Monday’s ethos is to turn the worst day of…

AUTHOR ANDY BUDD Andy co-founded Clearleft (clearleft.com), one of the first UX agencies in the UK. In 2015 he curated the dConstruct conference on the theme of designing for the future Like me, I’m sure many of you grew up on a diet of science fiction; imagining future worlds through the work of authors like Isaac Asimov, Philip K. Dick and William Gibson. Science fiction, or speculative fiction as purists prefer to call it, has the power to transport us into the future to ask important and difficult questions about the world we’ve created. What would it be like to live in a world dominated by surveillance (1984), constantly tracked by adverts (Minority Report), or surrounded by robot helpers (pretty much every sci-fi movie ever)? Of course, the questions posed…

DATE: 7-9 NOVEMBER 2015 LOCATION: BERLIN, GERMANY URL: beyondtellerrand.com Not many conferences in our industry boast a schedule that ranges from progressive enhancement via style guides to the history of typography on bank notes. But that is exactly what the second edition of beyond tellerrand Berlin accomplished, staying true to its aim of making attendees think outside the box. The sold-out two-day event attracted delegates from 27 different countries, including Israel, Korea, South Africa and Pakistan, who collectively connected over 840 devices to the conference Wi-Fi. Whether they all accessed really fast-loading sites we do not know. If everyone took to heart what Steve Souders and Mark Zeaman covered in their opening talk, however, chances are attendees will access a lot more performance-optimised sites on their devices at next year’s conference.…

This site for video game franchise Halo has such an extraordinary navigation structure. The user moves through an intuitive, timeline-esque view, with fractured pieces of Halo helmets acting as user engagements for the game. “We used WebGL particles that use a 3D model to form the shape of the game characters’ helmets, 3D CSS to animate in the pieces of user content, and Canvas to draw and animate the timeline at the bottom,” says Rachel Smith, interactive developer at Active Theory. “It’s a good example of combining web technologies depending on what the interface needs.” The mysterious shattering and rebuilding of elements could be disorienting, but instead, feels completely fluid. The slight tilting of the user stories, and even elements such as contact modals, unite the design and motion across…

“A deep, engaging site that shares the agency’s design culture while encouraging visitors to explore its physical space. I love the subtle touches of animation” DUDLEY STOR EY (@DUDLEYSTOREY) In a design climate where websites are all beginning to share the same layout, Greenwood Campbell breaks the mould without sacrificing ease of navigation. The treatment of text and layout on the digital agency’s site is magazine-esque, with bold typography and asymmetrical compositions. “We studied the websites of many digital agencies we liked, and noticed two main UX approaches: linear and non-linear content discovery. We tried to find a solution that would present our office space and show the size of our company, but most importantly bring the feeling of trust and credibility across to users,” says Marek Miś, frontend developer…

Perched atop a mountain in a not too distant galaxy, high-adrenaline thrill park Moron Mountain accepts visitors seven days a week, 24 hours a day. Moron Mountain has no issues getting its customers to return on a regular basis. How? By being the most connected theme park in the universe. Mobile applications that sync with wearable devices (like the Apple watch) record everything the user does in the park. This allows visitors to rack up points that go towards park perks, keeping them coming back for more. The site itself centres around a search bar that lets users search the entire site and returns results in a similar way to a search engine. It would use a framework like Solr – this is relatively future-proof because it’s scalable, fault tolerant,…

BRIEF Subaru tasked creative agency Carmichael Lynch and digital studio Resn with capturing the spirit of its zero landfill status in an interactive timeline that could house video, photos, text, animation and links to other content. CLOSE UP (1) The main view of the interactive timeline is the tree rings. Each ring features a clickable link, beginning with the oldest in centre and getting more recent. (2) The rings open and spread organically, and data points appear and disappear on hover. (3) Users can toggle between Time mode and Category mode, enabling them to explore the site as a chronological timeline or filtered by themes like movies or ways to help. (4) On click, the rings unfold into a more traditional horizontal timeline, including months and days. (5) While not…

While trying to finish CSS 2.1, the CSS Working Group realised that creating a large singular specification was proving difficult. The specification wasn’t easy to read, maintain or develop. Due to these difficulties, the W3C made the wise decision to split the language into independent modules for future iterations. This decision resulted in CSS features being added at a record pace. In the past few years we’ve seen the standardisation of animation properties, improved typography and new layout techniques, to name a few. These features gave us new visual and interactive capabilities, but didn’t solve some of the core problems with how CSS is authored. What sort of problems, you ask? Missing features that would make developers’ lives easier and DRY out code. Conveniences such as variables, nested selectors, mixins…

One of the issues I enjoy digging into when auditing sites for accessibility is consistency; making sure repeated terms and functionality appear and behave the same way across the entire website. Aligning common elements in this way makes for a predictable experience that supports the user when they are exploring the site. One of the four principles of WCAG 2.0 states that websites should be ‘predictable’. Under this, there are two criteria that depend specifically on consistency. 3.2.3 dictates that navigational items (e.g. navbar links, previous and next arrows, breadcrumbs) occur in the same relative order each time they are repeated. 3.2.4 rules that components that have the same functionality (e.g. carousels, tabs, buttons) are identified consistently. It’s understandable that someone might think that adding a little variety would make…