Table of contents for July 2018 in net

Truly elegant design is about achieving transformative results in as few steps as possible. It wasn’t just braggadocio when Archimedes claimed a lever and a place to stand would enable him to move the world; it was the perfect illustration of how innovative design produces maximal results for minimum toil. This is a principle every designer should aspire to: creating friction-free products that amplify their users’ efforts. That’s why this issue we’ve been looking at streamlining design and reducing friction in the way you work. Tom May investigates how tuning up your process and making your workflow as aerodynamic as possible can optimise your output, helping you to deliver designs at scale. Meanwhile, our guide to better testing will help you clear any grit from the engines of your dev…

INFO job: Writer, designer and educator w: tinybooks.org t: @fehler In a world where we’re faced with endless choice – one that offers a wealth of products and services, all just a hyperlink away – how do you stand out from the crowd and avoid a race to the bottom on price? One answer is to focus on service, using the experiences you design around your products and services to ensure your customers return year after year after year. This ‘halo’ of secondary experience, which surrounds your core offering, enables you to build relentless loyalty around your brand. The design of this halo – all of the touchpoints at which you come into contact with your customers – is as important as the design of your product or service itself and it…

The relevance of UX design in industries is important to note because it shows businesses are starting to intentionally centre their products around people. What we might not have realised before and what good UX design aims to accomplish is that, in order to create good products, we need to understand people. Bad design often results in a lack of empathy and when I mean empathy, I mean a basic to deep understanding of who we are creating our products for. When we don’t understand our audience, we fail to see the problem they are going through and end up designing for ourselves – essentially basing it on what we think is right for people. This mindset is detrimental because it wastes time and money and we fall victim to…

grapple.co.uk INFO Location: LeedsDesigning since: 2006Expertise: Strategy, UX, design, motion, build, emergenceClients: Hisense, MelodyVR Sony Music, AEIAwards: 10 Awwwards, 12 CSSDA, 1 BAFTA How did Grapple come together? Chloe Waddington, account director (CW): The history of the agency goes back to around 2005 and we would love to say that it was a visionary decision to launch a digital offering but the reality is a bit different. The current owner of the agency was running an agency called prego* and one of their largest clients was William Hill. In those days, most of the work we were doing for them was mailing game software CDs, as broadband hadn’t been rolled out residentially. With the dawn of online access, William Hill started to ask us to produce emails, microsites and other…

CLOSE UP (1) In the complete Investing for People campaign, we’ve showcased what happens when you let robots decide where your money goes. The site opens up in a similar vein with a clear question: are you actually human? (2) Robots are capable of more than you think. That’s why we created a video of a robot passing the classic Captcha test. (3) The pixelated transitions help tie all the different elements together in a fitting way. (4) Through a classic Captcha style test, we helped people understand the point of the site. (5) We also added moving and changing text, to reproduce by humans only. (6) Triodos’ view on what is sustainable and would be right to invest in is never far away. (7) Once a person passes the…

Matt is a software engineer for Vidsy in London, where he helps bring creators and brands closer together. He works on the front-end products using a mix of React and TypeScript. w: www.mattcrouch.net t: @mattcrouchuk Web development is more complicated now than a few years ago. Browser features, front-end frameworks and best practices change almost monthly and there is always something to update. And with this comes risk. How can we be sure these changes won’t have unintended side effects? Testing is all about mitigating risk. If a user has trouble using a site, they are less likely to come back and more likely to jump over to a competitor. By checking every decision that gets made when developing a site, it reduces the chance that users will have a sub-par experience.…

For the longest time, Node.js streams had a reputation of being hard to work with and even harder to understand. Over the years, developers created many packages with the sole purpose of making working with streams easier. Luckily, in recent versions of Node.js, the streams’ API were improved and it became a lot easier to implement and consume streams in Node.js natively without any external libraries. Let’s look at an example demonstrating the difference streams can make in code when it comes to memory consumption. We’ll create a big file first: Look what was used to create that big file. A writable stream! The fs module can be used to read from and write to files using a stream interface. In the example we’ve just looked at, we’re writing 1…

More and more frequently, designers and developers are acknowledging the importance of motion design in the context of user experience. Animation on the web is no longer a way to delight and wow the user but a functional tool that makes experiences easy, fun and memorable. Animation in the context of user interfaces is still a very new field. There aren’t many resources out there that teach best practice or show common patterns of UI animation that we can follow. Most of the time, it’s about experimentation and perhaps a bit of trial and error. All we really need to be aware of is how the user interacts with our UI animations and whether it makes sense to them. What we don’t want to be doing is scaring them off.…

If you missed previous articles or are new to graphic shaders, here is the quick primer. Multiple shaders work together in the graphics pipeline. Some are programmable, some are locked to the hardware. We’re most interested in two shaders in the pipeline – vertex shaders and fragment shaders. These are the core of the OpenGL Shading Language and the WebGL graphics pipeline. We’re going to focus on fragment shaders in these tutorials. GLSL (OpenGL Shading Language) shaders compile and run on a wide range of platforms. You can apply what you learn to any environment that uses OpenGL, OpenGL ES or WebGL. This means you can use this knowledge for websites, three.js, iOS games, interactive installations, Unity, openFrameworks, Processing and many others. What is a fragment shader? This shader, which…

I was designing some branding and a website for a restaurant. I agreed to a VERY competitive price despite a short time frame. Because I’d recently finished some major projects, I was able to provide prompt service, responding within 15 minutes even though I was in a different city than the client. Of course, no good deed goes unpunished. Me: So tell me about your target group. Client: We want a fresh design for young and middle-aged people with a higher income. I proposed a concept with the little information I had. Client: I don’t like it: it will scare off older clients. Me: Right but the brief said the branding should be targeted at younger people. Client: No, I never said that. Our clientele is mainly older. I had…

INFO job: UX/UI w: stephaniewalter.fr t: @WalterStephanie You’ve been talking about ‘cheating the UX’ recently. What exactly do you mean by that? You’ve optimised every request and piece of code you could, yet your users are still complaining. Even worse: they don’t complain, they leave. This is where we start talking about perception. Our human brain works in a certain way. Knowing how it works helps us to build sites and products that users perceive as easy and fast to use. So I’m talking about techniques such as micro-interactions, visual feedbacks, skeleton screens and optimistic UIs. At my talks, I show you the best progress-loading indicator depending on the situation. I explain how to deconstruct waiting time to build a video streaming experience and how to communicate speed perception to…

WEBGL, GSAP. PIXI.JS ANALYTICA PROJECTS http://analyticaprojects.com/ Analytica Projects is a quality assurance company specialising in food security and its new website has brought a different approach to the world of corporate design. The top-view map navigation unfolds beautifully with smooth transitions that guide the user in a step-by-step experience with a full focus on the message. It is, in fact, all message. A navigation knob provides an interesting reference for progression and translates the linear nature of the site into a different dimension. The site’s emphasis on storytelling speaks for itself and stands out because of its focus on the human side of the company. As stated by Rubén Sánchez, founder and designer of Veintidós Grados, the agency behind the site: “We wanted to show in a funny and visual…

Montréal Blues Festival is a music festival based around blues and blues-inspired rock n’ roll. I decided to use bold imagery for the landing page and also for the general aesthetic. The hero section holds the main details of the festival. It will also showcase the festival line-up with rotating images and video clips. The hero section is designed to scale so the text is set in viewport units to ensure it maintains layout and spacing. The text and colour layers use CSS blend modes on top of the images and video clips to give the content even more visual interest and appeal. The site’s most important function is to enable potential festivalgoers to get the information they need, so each section is accessible from the homepage. The line-up is…

The original aim of the world wide web was to serve as a platform for presenting content. Since its inception, it has evolved to become a platform for delivering all types of content, data and software applications. It is only logical to conclude that the web will continue to evolve as new technologies are embraced by industry and consumers. While the web is primarily experienced inside the browser, the content you see only touches the surface of the web. Web 2.0 was a milestone in the development of web standards, which heralded user-generated content and a better ability to present it. The emerging wave of innovation for the web is based around data, enabling improved scope for functionality of internet-connected systems. The usefulness of software systems, whether they exist on…

Shaping functions Generative art with GLSL makes use of various functions to ‘shape’ your output. We used sin and cos (sine and cosine) in these examples along with mod (modulo). There are many other useful functions you can experiment with using the code we created. Some of these include: Uniforms Each render tool will have its own little nuances, such as built-in uniforms (variables) passed to the fragment shader, for things like Time or Resolution. Shadertoy uses iTime, iResolution and iMouse, for example. These are super easy to port across other implementations such as three.js, Unity or even your own custom WebGL because most are standard and have only slight variations in name. Normalised values Often in shaders we work with normalised values. This means they range from 0.0 to…

Due to the number of constraints to consider when building a website, many developers and designers neglect user accessibility. But by ignoring user compatibility or just adding it as an afterthought, you are robbing your client by not giving them a full service. People using screen readers, speech navigation, keyboard navigation, one-handed keyboards or those with a learning disability (which affects web navigation), make up 20% of internet customers – are there any business owners that would be happy about losing 20% of the market for no valid reason? So it’s important to think about accessibility from the off, getting your design and wireframe accessibility checked before anything else. This can be done alone; however seeking expert advice ensures you are doing things right the first time. HeX Productions is…

Send your questions to netmag@futurenet.com QUESTION OF THE MONTH What is Microsoft doing to eradicate systemic human bias from its AI? Phil Nash, Australia TL: First, we’re recognising that there is unintentional bias in existing AI algorithms. Then, creating a set of design principles for AI such as: fair, reliable and safe, private and secure, inclusive, transparent and accountable. It is fundamental that we use AI not to replace humans but to augment the human experience. It’s not enough, though, just for Microsoft to follow its own principles. We are also working with other organisations and companies to continually come together to tackle the big challenges and include government. If you want to understand Microsoft’s strategy and thoughtfulness around these issues, we’ve created a book called The Future Computed at:…

If you wanted to create an office space where Chinese goblins could run riot then Mogwai Media has it covered in our homely first floor office, where the feminine clashes comfortably with the masculine. (1) A dynamic mood board lit with twinkly fairy lights and rainbows of paint swatches stands out with examples of innovative art and photography. The fairy lights bring about feelings of late summer nights, open fires, a glass of something fruity and openhearted conversations with friends – they’re a magical background! The demonstrations of colour are also important. Each colour has an emotion attached to it and playing with colour is something that I never get bored of. (2) The Mogwai Media office is not only a creative space but its location is very deliberate. The…

INFO job: Content strategist and digital consultant w: https://contentdesign.london t: @escmum Sarah Richards created ‘content design’ at the UK Government Digital Service (GDS). Between 2010 and 2014, her team worked on making copy on the public-sector information website gov.uk findable, usable and understandable. It was a massive, complicated project, based on user-centred design, which was unusual at the time – especially for governments. She now runs the Content Design Centre (https://contentdesign.london), a small eight-people agency providing training and consulting in content strategy and design for organisations around the world. She’s also written a book about the discipline that she created, aptly named Content Design (https://contentdesign.london/home/book/). “Content design is a way of thinking,” Sarah explains. “It’s about using data and evidence to give the audience what they need, at the time they need…

Fiesta 2018 is the best faux Latin music festival; the line-up features the top artists in the Latin music industry. Latin music lovers from all over the world converge at the yearly event held every summer in Miami, Florida, the Latin capital of the world. The brand created for this epic event is very bold, bright and colourful, representing the lively spirit and passion of the Latin community, its rich culture and folklore. Due to the brand’s bright and vivid colours it is important to keep the other design elements simple. I was able to achieve that by maintaining good use of space, light text areas, simple typography and clean lines within the layout. The photography is vibrant and fun. I chose Gibson as the primary typeface because of its…

Based in Weston-super-Mare, Tom May is a freelance writer and editor with more than 20 years’ experience in magazine journalism. He is currently editor of net’s sister title Professional Photography. t: @tom_may Marcus (@MJFainty) is a graphic designer running MJ Faint Design Co. He also works as an art editor on a national film and TV publication. w: www.mjfaintdesign.co Once upon a time, the word ‘automation’ conjured mainly negative connotations in the mind of the professional web designer. It made you think of programmatic software that generated cheap but badly coded sites for those who couldn’t afford the services of a web designer. Or perhaps the sort of basic service you yourself would offer a cash-poor client, using a pre-built WordPress or Drupal template. But today all that’s changing. The automation of…

Here’s a list of resources with detailed information about the topics covered in the tutorial and more core Node.js topics. Having a good understanding of these topics is strongly recommended before diving into creating real-world stream-based Node.js applications. Node.js Event-Driven Architecture https://medium.freecodecamp.org/understanding-node-js-eventdriven-architecture-223292fcbc2d An in-depth look at Node’s most important internal design concept: its event-driven architecture. Requiring modules in Node.js https://medium.freecodecamp.org/requiring-modules-in-node-jseverything-you-need-to-know-e7fbd119be8 Everything you need to know about the concept of requiring modules with a Node application. Advanced Node.js https://www.pluralsight.com/courses/nodejs-advanced My Pluralsight course about the core Node.js concepts and API modules from utility modules all the way to streams and clusters. Node.js Beyond the Basics https://jscomplete.com/master-node Master the Node.js runtime beyond the basic usage with topics like built-in modules, streams, child processes, the cluster module, scaling Node.js applications and more.…

Shaders enable a wide range of effects by working directly with the graphics hardware of devices. In previous articles, we learned what shaders are and created our first ones. We also learned about post-processing, making greyscale and sepia tones, water animation effects and blurs, all with just a few lines of code. This tutorial will explore some very powerful generative effects that can be created with colour and intensity. They are excellent examples of how little code is required to create incredible effects using GLSL. We’re just scratching the surface of what can be done but it will give you something practical you can use. My goal is to remove some of the mystery around shaders and get you inspired. I want to get you creating your own effects as…

With so many new roles becoming the norm in today’s design industry, an all-in-one screen design tool doesn’t make sense for every designer. Product designers don’t always execute high-fidelity prototypes themselves and those more focused on visual design don’t necessarily prototype interactions either. In this day and age, the various steps in the average design workflow are often shared between a team of designers. The consequence of that is a number of different tools designed to help create different deliverables. Overflow (https://overflow.io/) helps macOS-based screen designers demonstrate and experiment with user flows by creating detailed diagrams that tell stories. Along with the ability to mock up alternative user flows and ways to ‘go back’ to previous screens, Overflow makes it overwhelmingly easy to describe what each step in the user…