Sommaire pour May 2019 de net

Compared to other creative industries, web design is a chimera. Neither one thing or the other, it sits halfway between mathematical, scientific rigour and intuitive, aesthetic creativity. That’s why I think one of the most important qualities a designer or developer can have is flexibility – having tools that adapt to the task at hand means you can tackle problems as they arise. This is what makes variable fonts such an exciting technology. Rather than having to package umpteen different fonts just to produce a formulaic site, they’re enabling designers to produce radical typographic sites – all while shipping less code. And if this has whet your appetite, Mandy Michael is on hand this issue to show how you can use variable fonts to maximise creativity and minimise code. But…

How can I go about finding volunteer opportunities for my dev skills? Emeli Gordon, Nova Scotia, Canada AS: Finding volunteer developer positions is surprisingly hard! Here are some good places to start. Volunteer websites + Onlinevolunteering.org connects volunteers with projects around the world for a variety of roles; developer positions definitely exist. Other similar sites include VolunteerMatch, Do-it and Create The Good. Open-source projects + As a developer, open-source projects are a great way to contribute. FreeCodeCamp has a few projects on its website and GitHub is always a treasure trove of open-source projects you can contribute towards. Follow your passion + The best success often comes from working on something you’re passionate about. If there’s a nonprofit you’ve supported or whose cause you believe in, contact them. PS: we’re…

SIDE PROJECT OF THE MONTH Tell us what UX Triggers does. Imagine having the ability to upload any design, marketing material or website for a detailed market research report within minutes. UX Triggers analyses your image by breaking down the colour psychology of the composition. If you’re interested in the goldenratio portion of design, each report also employs a set of overlays to understand where key focal points in a design exist. For marketers, UX Triggers has a premium level that utilises research data to generate market acceptance ratings by gender, age group and provides scores for quality, trust, reliability and emotional triggers like fear, courage, fun and loneliness. Why did you create it? I created the first prototype that focused exclusively on the golden-ratio tool about ten years ago.…

Like many people my age (late 30s) I learnt to build websites by viewing the source of sites I thought looked good. This way, I discovered you could use tables to have a page laid out how you fancied and framesets to persist elements of the page on screen while other parts scrolled. I found this form of learning by discovery stuck in my head better than being taught by someone. Thankfully these old HTML techniques are long gone and the complexity and quality of the websites (or web applications) we build has increased drastically. What does remain, though, is the ability to view the source of the page you’re viewing. We’ve seen a burgeoning amount of build tooling, a proliferation of new server-side languages (such as Rust and Go)…

We are programmed to produce things that will be perceived in the best possible light. We want to create objects that are as perfect in real life as they appear in our imagination. In product design, there’s also a lot of time spent understanding the ‘ideal’ journey for audiences and mapping the single, golden path to each goal. But this practice is a failure. It ignores the single most incontrovertible fact of life: stuff breaks. Even the most perfect designs must incorporate the possibility of things going wrong – otherwise, they’re incomplete. FAILURE AFFECTS ALL FORMS OF DESIGN While I’m going to focus on digital products, the potential for failure is everywhere. From finding your way around an airport to remembering all of your insurance details in an emergency: everything…

BRIEF Needing a way to explain its AI-powered risk engine to the insurance industry, Cytora brought in Set Reset to develop a site that could communicate the benefits of technology within a single, easy-to-understand page. CLOSE UP (1) The story is driven by the bold animated illustrations so the image container takes the majority of the real estate. (2) To help people skim the content, labels highlight when new actors enter a scene. The user should be able to understand the story in simple terms without reading it all. (3) A vertical progress bar subtly calls out the user’s position in the narrative, while mirroring the scroll direction. (4) Bite-sized paragraphs make the content easy to digest and link to each stage of the animation. The user can also use…

Decovar is a display font with a range of variations designed by David Berlow for Google. As an experimental typeface, it has many different and unusual axes that give the user many creative options. It’s because of Decovar’s many stylistic variations that it is my favourite variable font to experiment with. I used Decovar to create my first really interesting effect with variable fonts: The Growing Text. View all the code on CodePen (https://codepen.io/mandymichael/pen/YYaWop). Though Decovar does not explicitly have this style defined, it was created by combining two of the axis variations – forming a ‘leaf’. I was able to animate the text using CSS animations to make it appear as though the text was growing. For the first time on the web, we can animate the text itself…

PWA EBOOK This ebook, which was only recently published in partnership with Awwwards, provides the most comprehensive resources on how to start going about building a PWA (https://www.awwwards.com/PWA-ebook). LIBRARIES AND MODULES Workbox is also a great online guide that has useful step-bystep codelabs and an abundance of best practices (https://developers.google.com/web/tools/workbox). STEP-BY-STEP GUIDES To integrate AMP with PWA for maximum results there are some codelabs that are relatively easy to follow here (https://codelabs.developers.google.com/codelabs/amp-pwaworkbox/#0). OTHER USEFUL RESOURCES Lighthouse is an open-source, automated tool for improving the quality of your web apps. It is already integrated into the Chrome DevTools Audits panel but if you prefer, it can also be run from the command line, as a Node module (https://www.npmjs.com/package/lighthouse), or by installing the Chrome Extension (https://netm.ag/2tEzAJA).…

Three.js https://threejs.org Loads of examples, code and extensive documentation to get you going and inspired, beyond the basics. Three.js is the leading library of WebGL 3D. Three.js Online Docs https://threejs.org/docs/#api/en/core/Geometry The online docs are an invaluable resource for understanding the ins and outs of the code. The link given here is to the section on geometry, so you can jump straight to the extra options and features if you need them. Blender https://www.blender.org/ Blender is a free, open-source, 3D application with a built-in Three. js exporter. When you need to go beyond simple geometries, Blender is a great choice to start creating and exporting your own. Sketchfab https://sketchfab.com Not only does Sketchfab include an impressive library of models that can be exported in a variety of formats that work great…

React Developer Tools, an extension available on both Firefox and Chrome browsers, is a tool provided by Facebook to help debug your React apps. It can also be pretty helpful at identifying where re-renders are happening in your app, giving you the opportunity to refactor the code if you think it’s necessary. To find out where re-renders are occurring in your app, open the Developer Tools. Along the top of the pane you should see a number of options, including ‘Elements’, ‘Console’ and other tools you’ve probably used before. Once you’ve installed the React Developer Tools you should see a new item labelled ‘React’ near the far end of this list. If you click on the cog icon, you’ll see some additional settings, including ‘Highlight Updates’. Try interacting with your…

CLIENTS FROM HELL I’m a newbie freelance web developer who just finished working for my first client, and not coincidentally, my first Client From Hell. Me: Okay. Everything is finished with the final QA and all the checks have been made. Can I just check with you that the website is completed to your satisfaction? Client: Absolutely. I think we’re ready to deploy. I’ll send you the information that you’ll need to do that. Me: As per the contract, I do need the payment up front before I deploy. Client: I didn’t agree to that. Me: You signed the contract. I went over this requirement with you. Client: Well, I don’t agree with it. Me: Unfortunately, I have a requirement that deployment doesn’t happen without final payment. I can deploy…

INFO job: Director of design education at InVision w: invisionapp.com t: @LeahBuley Could you briefly introduce yourself? I’ve been working in the experience design industry for almost 20 years, so I guess you could call me a veteran. Before I joined the design education team at InVision, I was a principal analyst at Forrester, where I researched the business impact of design. I’ve also worked at Intuit and Adaptive Path and am the author of The User Experience Team of One, a research and design survival guide for UX practitioners. ‘Director of design education’ is an interesting job title. What does it actually involve? InVision is the digital product design platform used to create some of the world’s best digital experiences. Our technology is used by a wide range of…

INFO job: Designer, WebGL developer, frontend developer w: shanemielke.com t: @shanemielke Could you briefly introduce yourself to anyone who doesn’t know you? I’m a creative director, designer, WebGL developer, front-end developer, animator, photographer, author, coach and Cyberdyne Systems T-1000 Model 101 living in Southern California. I am currently working on projects for Adobe, Blizzard Entertainment, Gyroscope, SpaceX and NASA. I also serve as a judge for the Adobe Design Achievement Awards, helping to promote design students. Why did you write Launch It? I did not sit down with the intent of writing a book. While on vacation with my family in Santa Cruz, we stopped to buy some books and magazines to read. I noticed a stand next to the register with several small impulse buy books for sale. One…

You may have heard the joke about the two types of website, each with a slightly different layout that is represented all over the web. As web designers and developers we have often been limited by the technologies available to us. As someone who loves experimenting with CSS on the web, I like to push the boundaries of what we think is possible with design in code; it was because of this I started creating Photoshop-like text effects with just fonts and CSS. During my experiments I started incorporating variable fonts and it became clear to me that they present many unique opportunities that are simply not possible with standard font files. Today we’ll cover what variable fonts are, how we can use them and the creative opportunities they provide.…

Axis-Praxis https://www.axis-praxis.org A great tool for experimenting with a variety of different variable fonts. The original variable fonts resource. Variable Fonts https://v-fonts.com Variable Fonts offers an extensive list of currently available variable fonts, who made them, where to find more information, download the fonts to use and licensing options. Font Playground https://play.typedetail.com/ Another place for experimenting with variable fonts, Font Playground has a really fun and unique interface for users to explore. Variable Fonts Guide https://developer.mozilla.org/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide The variable fonts guide by MDN Web Docs is a really great resource for new users, with information explaining how to use variable fonts, the considerations you need to be aware of, browser support and fallbacks.…

The scene The scene is a container object that encapsulates the other objects and elements that we wish to show. Camera Three.js has a few different camera classes, including a Perspective camera, which we will use for 3D and an Orthographic camera, used for rendering 2D scenes or UI elements. Renderer The Renderer handles the display of the 3D scene using WebGL. It targets an HTML <canvas> element to draw into. Typically you will call the renderer to render each frame. Materials Three.js comes with several materials, such as Normal, Basic, Lambert, Phong and Shader. Materials are used to texture the faces of an object’s geometry. Attributes include things such as textures maps, colour and opacity. Geometry Geometry defines the vertices of an object to draw it. Faces created by…

Learn more about how to use the Context API by using the following resources: The official React documentation is a great place to start because it is written so well and includes real-world examples that are easy to follow. Courses and blog posts I used the official docs to get started using Context, as well as Flavio Copes’ guide to the Context API (https://flaviocopes.com/react-context-api/) and Kent C Dodds’ course, Advanced React Component Patterns, on egghead.io (https://egghead.io/courses/advanced-react-component-patterns). Those resources are great but there’s nothing like diving in and trying it for yourself. It’ll be challenging to begin with but that’s the best way to learn! I freely admit to getting frustrated, writing poor implementations and having to start over many times before I understood Context well enough to use it in…

In a world of fancy designs and delightful animations, designers and developers strive for ways to get the most out of CSS. This is particularly true if developers and designers aim to achieve the same experience across a range of browsers. Libraries and open-source solutions are proliferating but sometimes the most effective tools lie in the default CSS properties and some clever maths. In this context, CSS transform is one of the unsung heroes of a style transformation. Compared to prebuilt libraries, it gives fine-grained, pixel-level control over the transformation and enables users to scale, rotate, skew and flip objects. To get the most out of the CSS transform operation, we need to go back to the linear algebra and geometry in which transform is rooted. Don’t panic: this is…

Boring, boring forms. We can hardly blame designers for trying to come up with innovative ways to make them more interesting but how many of these form trends actually hold up in terms of usability? Let’s take a look, starting with forms inside modals. FORM MODALS Placing forms inside modals and having them appear dynamically seems like an obvious solution to an otherwise overly complex situation. After all, forms don’t take up any significant amount of space, so why do they need their own dedicated URL? Actually, there are several reasons. Accessibility The most important reason is that if we’re making modals accessible (and obviously we should be), then they should be easily dismissed by hitting the esc key or by clicking the modal’s whitespace. Now with the modals being…

WORKSPACE I’m an American expat living in The Netherlands. My studio is located in the heart of a tiny Dutch city named Breda and is a stone’s throw away from a gothic church that stands 97 metres tall and was completed in 1547. My studio has a direct view of the church that is situated right in the city centre. I have been working out of my studio for four years now, working with brands such as IBM and Xbox. My computer setup is pretty simple these days. I have a Thunderbolt monitor and a second vertical monitor that I use with a MacBook, since I’m now a hybrid product designer and UX engineer frequently bouncing between code and design [1]. In addition to the technical hardware, you can’t forget…

GSAP, JQUERY, HTML5 HISTORY API KWOK YIN MAK – PORTFOLIO https://www.kwokyinmak.com Kwok was born in Hong Kong, grew up in Florida and currently works for creative agency Ueno in New York. His wonderful portfolio website draws on what must be a hugely cosmopolitan 30-year background and demonstrates an impressive eye for UI design. Opening on some hanzi characters, the site makes typography an important focal point throughout with oversized Anglo-Chinese translations. This cultural duality is obviously a theme for Kwok and the recognition that design has taken him a long way is underlined with real charm on the site. Hover over the About section and he tells you how many kilometres you are from his New York home, while emphasising a desire to collaborate. The real star of this URL…

With it feeling like human attention spans have shrunk to less than that of a goldfish, quality web content is critical to earning consumer attention. As more people shift to smartphones, low conversion rates on mobile mean that companies miss out on vital revenue opportunities. In this world we live in, we are now faced with more impatient and demanding users. In less than three seconds, the user expects to be provided with an instant online experience. It doesn’t matter if it’s on the fastest WiFi connection or even the weakest network connectivity; it all boils down to eliminating what I like to call a ‘mobile-gap’. Design mobile-first With mobile frequently the first touchpoint to the open web, it’s amazing to see how often it has been overlooked. Mobile is…

WebGL enables real-time rendering of complex 3D and 2D scenes and animations in the web browser. WebGL is now integrated fully into web standards, enabling physics, image processing and effects to be part of the web page canvas. You get the benefit of GPU-accelerated experiences, with the worldwide reach of the internet via the browser. All users now have instant access to beautiful experiences in their browser and right in the palm of their hands. In this article we’ll explore 3D geometry using Three.js. You’ll add some built-in geometry first and progress to customising those shapes. Then you’ll learn how to merge shapes to create new, optimised ones. You’ll also discover how to create your custom geometry from scratch! THREE.JS 3D FOR THE WEB Three.js is an open-source 3D library…

People are demanding more and more out of their online services and businesses strive to exceed these demands – which leads us to create more and more complex sites – which leads us to create larger and larger JavaScript bundles. But is there a solution that enables us to continue delivering a first-class experience for users while at the same time still building for these levels of complexity? One good way of achieving this – and at the same time delivering more performant apps – is by using React’s Context API. WHAT IS CONTEXT AND WHY USE IT? Sharing data and other properties across multiple React components previously required either an additional library (popular ones include Redux or Apollo GraphQL) or having to get busy with a lot of ‘prop…

According to the NHS’s latest figures, there are almost two million people in the UK who suffer with sight loss, meaning it can be a struggle to use a graphical user interface (GUI). For these individuals, voice assistants could offer a new medium through which people can communicate with online services. Simple tasks like checking the weather through to more complex tasks like checking a bank balance and managing payments can be all actioned through the power of voice. It’s not just the sight impaired who can benefit from voice assistants. A person with limited mobility or who experiences pain during movement can complete tasks without causing discomfort. By optimising a checkout process for voice, for example, you can reduce the process down to a few voice commands using customer…

WCAG-Compliant Forms https://www.w3.org/WAI/tutorials/forms/ The WCAG (Web Content Accessibility Guidelines) are the most concise resource for designing accessibility. The form section outlines what is expected of designers and developers alike in order to ensure form UIs are completely accessible to disabled users. Best Practices for Mobile Form Design https://www.smashingmagazine.com/2018/08/best-practices-formobile-form-design/ Smashing Magazine author Nick Babich dives into the finer details of designing mobile forms, also covering specific user flows like ecommerce checkout and how forms impact conversions. Awwwards – Forms and Input https://www.awwwards.com/websites/forms-and-input/ A compilation of websites with innovative and/or high-usability forms. If you’re looking for form design inspiration and you’d like to actually self-test the examples, bookmark this resource.…