netMay 2018的目錄

It’s perhaps fitting that as I settle into my new role as editor of net, we’re considering the new reality of web design. Having gotten devoted Pokefans out in the streets en masse and homeowners arranging flatpack furniture via their mobile phones, augmented reality (AR) is rapidly taking over in the web-design space. Thanks in no small part to AR.js and WebAR, it is now enabling developers to create designs that break the bounds of the page and offer a highly enriched experience as people browse the net. That’s why this issue we’re doing a deep dive into all things AR. Alexandra Etienne, the AR/VR evangelist, is looking into the current state of play for AR and examining the many applications it could have for web design. But this isn’t…

SIDE PROJECT OF THE MONTH To kick off, can you give us a quick summary of what the site is about? Aperitif is a simple online HTML prototype generator that allows designers and developers to quickly mock up a website layout or prototype within seconds. The end product is a dynamic prototype, complete with the stylings of the selected theme and JavaScript to power the various modules available. What was the inspiration for creating the service? We wanted to give seasoned designers and developers the means to generate a quick starting point for their concept. This could then be used as a face-value prototype or the skeleton of a more ambitious development project. Users new to web design can also hit the ground running with Aperitif, generating pages and pulling…

BEYOND PIXELS By day I’m a freelance designer at Luckychair (luckychair.com) and an assistant professor of web and graphic design. By night I’m un étudiant français, blissfully and casually learning French by playing word games on my smartphone’s Duolingo app. There’s something about learning that keeps life fresh for me. I love the ‘beginner’s mind’, that awkward and exciting way it feels when you’re at the very beginning of something new. While studying the language as a teen, I remember how thrilled I was when French words came to mind just as readily as English. J’aime ma chaise verte confortable. Regarde ce chat moelleux. Merde, il pleut: ou est mon parapluie? The placement of words in a French sentence is often different to how they appear in English. Adjectives and…

When you’re embarking upon the design of a new product or service, one of the first questions you should ask is: is there a pressing need for this? If there is no need, stop. It’s really not that complicated, yet – all too often – we turn our talents towards needlessness. As designers we are faced with a choice about what we turn our talents to. We can use these talents to create and improve what the world needs, or we can add to the mass of products for which there really is no need – or for which there is often an artificially created need. When millions of dollars – $120m to be precise – are being spent to solve the ‘problem’ of juicing (http://bit.ly/juiceroguardian), which was Silicon Valley…

www.sundaecollective.com The variety of websites and services available for recruitment today is extraordinary. However, in the creative sectors where freelancing is widespread, it can be difficult to find opportunities that enable you to pursue your interests and passions with other like-minded folk. Sundae is a platform that aims to enable creators to collaborate with brands and other makers to bring ideas to life. Whether you’re a choreographer, chef, mixologist, filmmaker, illustrator, coder or blogger, if you create, then this hub is for you. The concept itself is great, and the website quite simply makes you want to become part of a vibrant, creative community. The homepage video is a celebration of all things creative, and communicates the vast range of talent and possibility available within the creative industries. You’re invited…

www.egwineco.com Personality is one of the things you remember most prominently when you first meet someone, and it’s similar when you visit a website for the first time. The site for Essentially Geared Wine Co. makes a great first impression, using vibrant colours, bold fonts and videos to engage its audience within seconds of entering the site. The brand leverages its site to be the key communicator of its ethos: ‘We’re inspired by Mother Nature’. Packaging the wine in sustainable cans, Essentially Geared Wine Co. carries its ‘no fuss’ ethos through the site, implementing beautifully shot videos featuring people enjoying outdoor activities, quality time with friends or family, and the beauty of nature. A light-hearted and humorous persona is also evident through the way it recommends food pairings for the…

Set in a former plant nursery within the lush parklands of Auckland Domain, GraftonGreen is more than just student accommodation – it’s a unique, carbon-neutral, eco-lifestyle offering. Students can choose to offset their accommodation costs by working in a market garden, which supplies local restaurants with organically grown produce. The website showcases the lifestyle aspect of the village with engaging photography and branding in a teal and warm-grey colour scheme. This keeps the ‘green’ aspect of the name and concept from getting too literal while still being in the greenish part of the colour wheel. A combination of Larish Neue and Untitled Sans mixes a character-filled serif with a plain workhorse font designed by Wellington type designer Kris Sowersby. The target audience is socially conscious millennials, so a crafted feel…

www.whitevinyldesign.com Luke Twyman comes from a background of music and video games, and you can see these influences in his work. He most recently caught our eye with a stunning site for the record label Ninja Tune, revisiting its 2017 releases, and his portfolio is thick with inventive approaches to data viz, procedural generation and interactive music. We caught up with him to find out how he does it. Hi Luke! Can you tell us a bit about your background? I guess I started about 16 years ago. I’d been making small video games as a hobby, initially just using some drag-and-drop software, and then gradually dipping into code and making some simple audio and visual experiments. While I was at uni I attended some crash courses in HTML and…

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 incredibly easy to port across other implementations, such as three.js or Unity or even your own custom WebGL, as 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 1.0. They can be more precise (more digits past the decimal), but they have this range. RGBA values are normalised. We also typically use screen resolution and fragment position to create normalised uv or position values. For example: `vec2 uv = fragCoord.xy / iResolution.xy;` Macros Fragment shaders can…

When you’re setting the position of the images on the y-axis, you’re also setting the speed of motion. That’s because as you scroll through the section, the first image travels from y-position of 1000px to y-position of-1000px – a distance of 2000px. The second image travels a shorter distance of 704px as it moves from a y-position of -352px to a y-position of 352px. So it appears there are three planes or levels of depth in that section: the first level, in which the image appears closer and also to be moving faster; the second, where almost all the other images appear to move at a normal rate; and the third, in which the image appears farther back, and to be moving at a much slower rate.…

Web accessibility is something you know we should be acknowledging. In the UK, it is reported there are over 11 million people with recorded disabilities and many require assistive technologies to help perceive content. There should be no excuse for not thinking about accessibility. But I bet you won’t be surprised to hear there are a lot of websites out there that suffer with poor accessibility. It’s easy to say that you should be thinking about web accessibility right from the start but with every project, there are plenty of things to be doing first. The best opportunity to start thinking about accessibility is when you’re writing copy and deciding on the architecture of your site. This is because 29% of users that require assistive technologies use screen readers and…

CLIENTS FROM HELL I work for a video production agency. Almost a year ago, my boss told me about an animated video project that needed to be done within two weeks and that I should drop everything as soon as the script was delivered. Two weeks later I received a rough outline of the project from the client but was told not to start work as it wasn’t approved. Over the next month, I was CCed in a series of exasperated emails about the state of the script. Finally I got a full version and my boss told me to get it done. I made the video in two weeks and submitted it to the client to review. Almost a month passed without feedback. Then a few comments came in,…

net: What do you do in your job as developer advocate for Microsoft? RB: I’m a feedback conduit working to ensure that the community has a voice in shaping Microsoft’s product direction. Microsoft needs to know where and how it can contribute back to developers, whether that’s through OSS, AI or developer tools. The only way to really get a pulse for what’s happening is to get involved in things like open-source efforts, conferences, or hackathons; basically go where the developers are and actively engage them. It’s why the role of developer advocate has become so important. We’re able to speak with developers without all of the marketing mumbo jumbo and relate to their needs on a technical level. net: What challenges face Microsoft in today’s web? RB: Microsoft has…

WebAssembly (wasm) is different to other web APIs you might have played with. Rather than adding new HTML or JavaScript features, it’s a standard that defines a binary executable format for client-side applications on the web, which can be run in the browser while taking advantage of the speed and low-level hardware capabilities of machine code. While it’s a relatively new standard only now gaining attention, it’s already supported in all major browsers, and has a budding ecosystem of tools. This represents a major change for the web, where JavaScript (or abstractions of it such as TypeScript) has been the only language available for coding. The introduction of WebAssembly means that there is now a platform to enable C, C++ and other code to be written and compiled to run…

www.fonterra.com/nz/en/campaign/from-here-toeverywhere.html “This type of design is needed in the constantly evolving digital landscape”BRAD MARSH, @SCDBOURNEMOUTH Fonterra created a 3D experience using WebGL, to show how New Zealand dairy innovation has improved health and nutrition around the world. Visitors can explore the world by spinning and clicking the globe, to fully understand the ‘everywhere’ nature of Kiwi dairy innovation. It’s slick, easy to navigate, and most importantly, provides users with an interesting way of understanding more about global distribution. As well as providing a unique and creative way of engaging users, I think it’s a brilliant way to educate students and young people about the global economy. The UX is the best element of this platform. Giving users the choice of which countries to explore makes the experience more memorable. It’s…

“Each theme is an outstanding piece of work, packed with the features we need and our clients demand”Jonathon Burton, NHS Webteam Whatever your organisation, you need a great website. Creating and maintaining one that suits your ever-changing needs can be difficult and expensive. Thankfully, uSkinned’s starter kits are future-proof, adaptable and easy-to-use, so no matter how much your site changes, they’ll grow with it. And right now, you can get 15 percent off of your next uSkinned purchase with the code 15OFFCB. Head over to http://bit.ly/2CpdGeY for more. uSkinned’s themes are designed with users in mind, and make it easy for anyone to create a beautiful, professional-looking site. Whether you’re a web designer or developer, marketing professional or non-profit volunteer, run your own business or work for a digital agency, or…

Marble Heights offers hassle-free, all-inclusive student accommodation, and a welcoming, reassuring and stress-free experience at university/college. With a variety of rooms to suit, it offers a comfortable, stylish and safe place to live. The site is designed to convey the impression of somewhere welcoming, supportive, happy and relaxed. Moving away from the accustomed static background image, the use of video will aim to increase engagement, while providing a glimpse of life at Marble Heights. Users will have access to an easy-to-use search narrative, enabling them to find accommodation in the city they’ll be attending. And a simple yet effective typographical hierarchy will easily direct the user while scrolling and browsing throughout the site. To support the idea of a ‘happy and relaxed’ environment, the core font used was Gotham Rounded…

Imagine you are at home, relaxing at the weekend. You are on the couch, your favourite spot in the house. But instead of watching TV you are immersed in a very entertaining scene taking place on your living room floor. There is a whole world coming to life; characters engaged in battle, whole armies facing each other, horses thumping at full speed, blood spilling, snow falling, fires burning… maybe even a dragon or two? Or you are at work, designing and visualising a virtual object: an architectural prototype, a property on which you want to invest, or a 3D model you want to create. Imagine that you can modify it just by zooming, swiping, or with drag/drop movements onto empty space. You are not crazy! You can see it, the…

Graphic shaders are an incredibly powerful technology that enable a vast array of effects, by working directly with the graphics hardware of devices. Some aspects are hardwired to the hardware, while others are programmable. It’s these programmable ‘shaders’ where we can get in and create some amazing results. In last issue’s article we learned about what shaders are, and dug into creating our first ones. This tutorial is going to focus on processing images in our shaders. It’s going to scratch the surface of what can be done, but will give you something practical you can use. Again, the primary goal is to get you inspired so you can start creating as soon as possible. IMAGE POST-PROCESSING We see image processing everywhere today. Instagram filters, blur effects, transformations and colour…

Many browsers on countless devices aim to support a growing web technology stack. Unfortunately, finding out what works where often means extensive manual testing. Web content should be compatible with as many browsers as possible. Compatibility, like accessibility, is an important concern if you wish to avoid excluding people from your website or app. However, it is often difficult to tell whether a certain feature works in a given browser; for example is it supported correctly, does it require a prefix, or is it supported with a non-standard name or behaviour? This can quickly multiply – do you research every feature in your code to tell if they are supported enough? If your CSS files use more than 200 properties, you will probably start guessing how far back browsers are…

Whether you are starting out as a JavaScript developer, or have been using the language for some time now, you would no doubt agree that one area that breaks the consistency of your user interface is the traditional JavaScript dialog box. While dialog boxes enable user interactivity across different browsers using either the alert ( ), prompt ( ) or confirm ( ) functions, they are somewhat unappealing and inflexible, let alone breaking away from the UI/UX of your website. One approach to solving this problem that has gained in popularity is the use of SweetAlert JavaScript library. The library, which is developed using CSS and JavaScript, comes in as a replacement for the traditional JavaScript dialogs and modal windows. It’s easy to use, wonderfully simple to learn, and transforms…

Send your questions to netmag@futurenet.com QUESTION OF THE MONTH What do you think are the biggest barriers to PWAs becoming more widespread, and how can we, as a web community, help? Sally Lait, Suffolk, UK AR: Uncertainty around browser support for some PWA features has caused partners and teams we’re working with to question their value. I’m incredibly optimistic about that story changing in 2018: in addition to Chrome, Opera and Samsung’s deep PWA support, Microsoft is bringing PWAs to the Microsoft Store, Apple has implemented service workers, and Firefox has added PWA support to its Android product. The biggest objections are falling away. The web community can help by taking a longer-term view. The fact that something isn’t implemented on one (or even a few) browsers can’t continue to…

WORKSPACE We’re lucky enough to be based in Southampton on the sometimes sunny south coast, a few minutes walk away from the common. We’ve been in our quirky studio for just over two years and it’s a friendly open space for our talented team of digital designers and developers. A big feature in the office is, of course, the pool/meeting room table (1) where our team spends its breaks having pool tournaments. Let’s see if you can spot a sneak peek of our makeshift scoreboard. If the team isn’t playing pool then this is the space we use to host our workshops and client meetings. And what better way to treat your clients than by serving them a coffee in one of our Hinge branded mugs (2)? Our day to…

It’s easy for front-end developers to feel overwhelmed these days. What should you learn next? Which framework is going to take off? There are no absolute answers, of course, but if full-stack developer Wes Bos creates a course on a new technology, it’s safe to say it has matured enough for you to be able to pick it up and not waste your time on it. The latest one is CSS Grid (cssgrid.io), a free video course that more than 35,000 people signed up to in the first week alone. This new course took Wes around two and a half months of full-time work to build, requiring a lot of upfront investment so he could understand and explain it comfortably. To pay for this massive investment, Mozilla came on board…

www.wwf.org.au WWF Australia boasts a website worthy of its reputation. Celebrating wildlife and nature, the bold, colourful site invites users to become completely immersed in the natural world. Vibrant images showcase the beauty of amazing wildlife, and invite users to learn about different species. Videos enable visitors to understand the links between modern behaviours and the damage to some of the world’s most beautiful habitats. The website also sheds light on conditions of those working within the natural world. One video in particular opened my eyes to illegal fishing practices. I had no idea how common illegal, unregulated fishing vessels are, or how the food I eat may have been sourced through one of these practices. As we begin to gain awareness of the issues surrounding the world we live…

www.bitterrenter.nyc The journey from teenager to adulthood is a roller coaster of emotions. Before you know it, it’s time to start looking for your own place. It’s an exciting time, gaining independence and imagining all the fun you can have without anyone to nag you to clean up after yourself. But where do you start? Which area of your favourite city can you realistically afford to live in? Do you need to consider sharing for a while? There are so many questions in the minds of young property hunters. Luckily, for those in New York City, there’s a platform that takes the hassle out of the process. Bitter Renter is an interactive guide built by a New Yorker who had experienced the disheartening nature of apartment hunting in the city,…

Liberty Properties offers luxury facilities to university students of any age in the UK. The name ‘Liberty’ alludes to freedom away from control, restriction or hampering conditions. It is aimed at students willing to spend a little bit more cash on their accommodation. Implementing a premium look and feel was essential. I achieved this by using clean lines within the layout and typography, setting the design to a horizontal and vertical grid, and keeping the UI simple and not overcrowded. On the homepage, we have immediate reassurance messaging and student interviews from various stages. Liberty Properties uses state-of-the-art technology, and so does the site. It’s built as a PWA, offering a seamless experience with fast-loading, smooth transitions, push notifications, and PWA features that work offline. Liberty also provides video tours…

CLOSE UP (1) The site offers fans a dynamic online experience, detailed content and up-to-the-minute news and results. (2) Previous game medals are visualised using subtle animations and hover states – a compelling way to discover information about past competing athletes. (3) A simple design ensures the latest results are easily accessible, with the option to filter by your favourite sport. (4) The intuitive Algolia search function makes it easy for users to access the information they need as quickly as possible. (5) Each sport has its own page, outlining Team England’s participation in the sport, key facts for fans and individual athlete profiles. (6) The site hosts an impressive archive of interesting historical information about Team England’s performance in the Games. DAN YOUNG Dan is the design manager at…

Data visualisation – or dataviz – is a hydra-headed beast that brings together a variety of disciplines: visual communication, data journalism, information, UI and design. A great data visualisation should be: • beautiful (visually striking) • informative (true to the data) • useful (easy to manipulate, filter and also explore) • interesting and insightful (providing strong communication) When done well, a data visualisation solution can help people understand relationships and patterns, see the significance of data through a particular lens, and communicate effectively by telling data-driven stories. The reason for this is that the human brain is very good at identifying trends if given the right visual cues. To get from A to B, or rather, from raw data to insight, dataviz designers create a kind of codified language using…

Your website landing page is a crucial element in web design. Its effectiveness can translate to increased conversions and when it involves an ecommerce website, this can be very important. Landing pages are designed with a single focused objective – known as a Call to Action (CTA). This CTA needs to be simple and obvious enough to work – simplicity is key here as your landing page is the first real opportunity you have to introduce your business, or the product or products you sell. So the use of nice colours and images to compliment the calls to action and the user experience is a must. So, in this tutorial, we will look at how we can build a simple landing page for a fashion brand for both men and…

We are focused on the fragment shaders in this tutorial, but just for context, we should mention the vertex shader’s role in image processing. The vertex shader (the first in the pipeline) defines a uniform variable for us that samples the image data that we refer to as a Texture. A typical declaration for this would be: `uniform sampler2D iChannel0;` This gets passed down the pipeline so we are able to access this data in our fragment shader (the last shader in the pipeline). We define the uniform again in the head of shader and then can access it via a built-in GLSL function called Texture or Texture2D in some contexts, like this: `texture(iChannel0,xy);` This function returns a vec4 (four part) variable for the specific pixel we are processing. This…

The parallax effect creates an illusion of depth and perspective. You can achieve it by moving visual elements at different speeds. Creating animations using the parallax effect can serve many purposes, and enables your visitors to engage with your site’s content in various ways, for example showing how something works or highlighting the anatomy of a product. Or it can create a visual effect that keeps your site’s visitors surfing for longer. Webflow’s new Interactions 2.0 makes integrating such animations in your website a snap, without you having to write a single line of code. In this tutorial, you’ll learn how to apply a scroll-based interaction to multiple images. The images in the section will appear to be moving at varying velocities. This simulates a realistic feeling of depth because…