Índex per April 2018 a net

There’s no doubt that we’ve witnessed a dramatic change in web technologies over the years, as modern browsers and design tools have evolved in terms of both their power and creativity. We can now interact with vast amounts of information like never before. And this combination of power and creativity has produced some of the most dynamic websites out there. Whether it’s hover transitions or more creative animated art, there really is no escaping the domination of animation on modern websites today. This issue, creative couple and industry experts Ana Travas and Sergej Skrjanec explore why animation has become such an important design element, what it offers websites, and where it’s heading in the future. Our second feature takes a look at Progressive Web Apps. Author and trainer Maximiliano Firtman…

My design studio is part of a shared workspace in my hometown of Port Talbot, South Wales. After initially working from home for six months, I took the opportunity to move here and work alongside other creative professionals. I have been here for two years. It’s a very friendly and fun environment. Everyone here is passionate about the work we do and willing to share knowledge, ideas and discoveries. We have a spacious room with several workstations, beaming with natural light thanks to four large windows; it’s an open-plan communal area with a large meeting table with chairs and a bench – an ideal gathering place for project meetings, brainstorming ideas and researching. We also have additional rooms for private meetings and video calls. The most prominent part of my…

net: What gave you the idea to launch Design Academy and how did you go about it? LE: As a designer, I work with developers on a daily basis. One thing I realised was that developers had an abundance of ideas for side projects, but got held back by the design. They felt like they knew good design when they saw it, but they couldn’t figure out how to translate their good taste into their work. Design Academy was launched to teach developers how to make something look good, without needing to become a designer. It started with me posting content on my blog about how developers can learn design. The content resonated and grew into a community. After two years, I’ve finally launched a course on Design Fundamentals, which…

We Create Digital is made up of highly experienced web developers and graphic designers fuelled by a genuine passion for technology. Until recently, Adobe Illustrator was our go-to application for graphic design – indeed, it has been a mainstay for many designers since its introduction in 1987. While a plethora of competing products have been introduced since, most have fallen by the wayside and enabled Adobe to maintain its domination of the market. Affinity has risen as Adobe’s newest – and possibly fiercest – challenger yet, drawing parallels to two of Adobe’s flagship applications: Illustrator and Photoshop. Affinity Designer is a professional vector graphics app with power to spare. Affinity Photo is a dedicated image-editing application boasting a wealth of highly refined tools for image readjustment and enhancement. Affinity Designer…

“Every element draws you in and they balance a large amount of information with a clean and engaging design”HOLLY TURNER, DESIGNER AT TATE There’s a brilliant corner of the web reserved for sites that deliver truly wonderful niche ideas that derive from pop culture – Obachan fits into this category perfectly. Each month the subscribers of Obachan receive a box of Japanese curated items via Japan Post. As the items are made in Japan, it offers location-based exclusivity to the users. The type of items you can expect to get your hands on from Obachan include ceramics, washi stationery, old and new fashioned toys, textiles and prints. What’s not to like about Obachan? An appealing service for collectors and designers, the website blends traditional Japanese artefact culture with modern offerings.…

For fun, and pretty much just because, let’s admire the new one-page website G ifme. This site boasts a computer advertising its latest Sketch app plugin to view real-time GI Fs inside your Sketch design software. While I’m unable to think of a commercial project that I’ve worked on that would have benefitted from this plugin, I can’t help but admire the retro/ modern crossover collaboration that’s been achieved with the website’s UI. I spoke to Guillermo Duran, who designed the website, about the process he went through: “ I started by sketching wireframes on a piece of paper to materialise all my ideas. Then I used tools such as Sketch app, Photoshop and Principle to bring the idea to life. I dedicated a lot of time to designing the…

Over the past few years, we have witnessed a change in web technologies and the way we interact with vast amounts of information. Modern browsers and design tools offer a lot in terms of creative power. Mobile devices have turned into pocket powerhouses with enough oomph to push all those Retina screen pixels without breaking a sweat. It should therefore come as no surprise that dynamic websites, which tap into all this power, are emerging on a daily basis. In fact, you would be hard-pressed to find a modern website that doesn’t make use of animation in some way, be it in the form of simple hover transitions or in full-blown pieces of animated pixel art. There is a good reason for that, and the trend is likely to continue…

Uniforms Please note that 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 your own custom WebGL, as most are standard and have only slight variations in name. Normalized values Often in shaders we work with normalized 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 normalized. We also typically use screen resolution and fragment position to create normalized uv or position values. For example: vec2 uv = fragCoord.xy / iResolution.xy; Macros Fragment shaders…

Most typical experiences on the web are client-driven. The client requests a page or performs an action, and the server responds. This is fine most of the time, but it relies on the client to know when something needs to happen. For some use cases, you need the server to provide information as soon as it’s available, or even a two-way exchange of information in real time. Chat apps are a great example of this: imagine if you needed to refresh the page to check if a new message has been received. WebSockets are one solution, and provide bi-directional communication between a client and server in real time. Use cases for this go beyond live chat. Streaming information in real time is one use case (think social updates, weather, stock…

In 2013 I felt I had the world at my feet; my freelancing was going well, I was beginning a speaking career, and loved attending all the meet-ups and conferences You wouldn’t have known I was ill because it was quite easy to hide as I’d recovered to 80 to 90 per cent of ‘normal’ health. However, I was dangerously caught up in the lifestyle of working in tech; I didn’t think twice if I had to work every evening and weekend – this felt like a badge of honour. The warning signs were there but I ignored them until I burnt out, battled depression and then relapsed. Five years on, everything has changed and it’s no longer possible to hide my illness; I regularly use a wheelchair and on…

My team and I were working on a project for a client towards the end of last year. Client: We need this delivered before Christmas. Me: Here is our first draft – please review it and give us your feedback ASAP. Our office is closing in a week for Christmas, but we can turn around the revisions quickly. Client: I’ll get my feedback over to you today. I must stress that I need this before Christmas. No feedback arrives. Me: I’m following up on that feedback. If we don’t get it before we close for Christmas the project won’t be finished in time. Client: Right, sorry! I’ll get it to you soon. I really, really need this finished before Christmas. The feedback never came. I chase them again, reminding them…

In 2007, Cynthia Savard Saucier was backpacking across Central America with her two best friends and, while in Guatemala, stayed in a remote hotel that could only be accessed by boat. It was there that her friend suffered a severe allergic reaction after having eaten a cereal that contained nuts. He always travelled with his dual injector, but as his muscles started to spasm, he was unable to inject himself. Cynthia managed to administer the first injection but when they were on the boat speeding to the closest clinic, wind whipping her face, the driver shouting in Spanish, she tried to inject the second dose – but the device didn’t work. Cynthia read the very long instructions, but couldn’t work them out. Out of desperation she stabbed her friend’s leg…

SITE OF THE MONTH Packed with bold typography and enticing information design, One Shared House tells the story of extreme communal living. Inspired by a radical experiment carried out 30 years ago in Amsterdam and the emerging popularity of co-living, we learn about the intricacies involved with sharing a living space with strangers. What items are commonly agreed upon to share? Which nation is the most accommodating to the co-living ethos? Watch the short movie to learn about the inspiration behind this project. Visiting the survey page enables users to contribute to research with a stats view available upon completion. Once presented with the stats you’ll begin to recognise your own co-living traits within the results. The beautifully designed results engage users with the content, and spurs them into new…

Many creatives and creative communities rely on the generosity of their supporters to fund their ventures; Buy Me A Coffee has built a platform that enables creatives to accept donations via their own profile on the website. I admire the purpose and goals of this site – to spend time designing and building a platform that aims to fund the grass roots of the creative industry is an honourable ethos. It has got off to a great start, with many members being donated ‘coffees’ on a regular basis. One profile in particular caught my eye; although not strictly a creative community, Little Hands Big Hearts is a charity being creative with its methods of raising money to support its local islanders in Bali who are impacted by the Mt Gunung…

Source is an organisation devoted to acquiring and sharing environmental data that would typically be scattered across municipal/government websites, or perhaps not be online at all. The goal of Source is to make this information as accessible as possible via natural-language queries and a direct interface; essentially, Siri for environmental data. Given the complex design of many public websites and online databases, an intuitive approach to browsing public data seems necessary. The design is primarily text-based. Vaguely suggestive of a command-line, it implies the site’s data-focused nature; the colour palette is limited to 8-bit colours associated with textbased computer terminals. (More information-heavy inner pages would have dark text on a light background for legibility.) For the typography, I’m using IBM Plex; it’s free and open source, which I think matches…

CLOSE UP (1) Uncluttered, fit-to-screen grid utilising beautiful photography for the three main areas of the site. (2) Elegant typography using the modern sans-serif font Avenir and the diagonal line inspired by the logo’s icon is used throughout the site. (3) A hamburger menu is used for the top-level navigation and is suitable for the tech savvy audience. Once clicked, the menu slides in from the right-hand edge, taking up half the screen in symmetry. (4) A subtle animated queue for the user to explore the rest of the homepage, once clicked it automatically scrolls down the page. (5) On hover for each section/image of the homepage, supporting text animates in with an arrow, while the image fades to a dark-grey tint, increasing legibility. This helps the user to decide…

PWA support started with Chrome on Android, and is now available on most other Android browsers, such as Opera, Firefox, Samsung Internet and UCWeb. But there will also be full PWA support on iPhones and iPads from iOS 11.3, and they will be available on Edge for Windows and Chrome on desktop operating systems later this year. To help you create a good experience for this growing user base, we’re going to share some vital tricks and ideas. WebAPK vs Android shortcut In 2017, Chrome rolled out a new feature for Android users: WebAPK. Now, when your users install your PWA (if it meets the requirements), a Google Play server will create an APK (Android Package, a native app container) on the fly and install it in the device as…

View source files here! All the files you need for this tutorial can be found at http://bit.ly/2DlZDeY In 1999, I built my first website using Web Studio 1.0. Web Studio was a graphic user interface. It was possible to create a new canvas and drag and drop elements into it. I then set up a free domain and hosting with GeoCities and voila! I had a website. Fast forward to 2004, inspired by the work of 2advanced.com, I wanted to take steps further and so like many others, I set out to build a band website. A lot has changed since then. In this article, I’m going to be taking a trip down memory lane and re-create the same site for the web today. So, let’s start! First off, generally…

Graphic shaders are everywhere – on your phone, the web, the games you play and the movies you see. They create a virtually infinite range of effects: they’re used as photo filters to alter lighting, colours, saturation and contrast; they can produce blur, blooms and bokeh effects; create depth effects with normal mapping and bump mapping; or chroma keying for blue-screen/green-screen effects for film. The applications are endless. This is the first in a series of tutorials on graphic shaders, designed to get you started using shaders in your projects. The goal is to get you inspired so you can start creating as soon as possible. WHAT IS A GRAPHIC SHADER? In the interest of time, this is going to be really brief. Shaders are a set of instructions that…

I recently began a project with a client who had a new starter. The first thing the new hire did was open Safari to download Chrome, as the company uses G Suite, which runs best on Chrome. In 2008, when Google released Chrome, much of the computing world used Windows XP, and Internet Explorer 7 was the most popular browser. Over the next few years, Chrome grew in popularity and eventually eclipsed all other browsers. Today, Chrome boasts 55 per cent of all browser traffic, according to StatCounter (http://gs.statcounter.com/browser-marketshare). In my opinion, it was Chrome’s developer tools and compliance with web standards that helped it become so influential. The standards for an ‘open web platform’ are defined by the World Wide Web Consortium (W3C), whose members include Google, international companies,…

There are alternative ways of implementing true, real-time communications on the web these days. WebSockets are essentially a protocol that can be implemented on a web server using a variety of libraries. Technically Socket.IO itself is not a pure WebSocket library, but rather a custom protocol that will use WebSockets if they are available. It also provides fallback support if they are not, using older methods, such as AJAX long polling. Its underlying WebSocket implementation is μWebSockets (http://github.com/uNetworking/uWebSockets). Alternative WebSocket implementations are also available for Node.js, as well as for other web servers, so whether you’re using JavaScript, Java or another language server-side, you can take advantage of them. If you’re sticking with Node, then ws (https:// github.com/websockets/ws) is another popular implementation. WebSockets themselves are also only one of a…

Send your questions to netmag@futurenet.com Daniel Schutzsmith, Hudson Valley, New York JC: The real opportunity is to seek out a model that’s not engagement. When someone says ‘engagement’, I hear ‘theft of attention’. An overwhelming tide of technologies, brands and causes vie for our attention, and it’s not sustainable. We get design tactics that manipulate people into spending more time in a product than is in their own best interests. The question of the moment: how can we create experiences that focus and respect attention instead of distracting it? Amazon and Uber popularised one-click interactions that actually limit engagement and let you get on with your life. How might we bring a similarly efficient, transactional model to more experiences? Get the message across, make the sale and then move on…

One of the hardest things to get right in business is pricing. It’s difficult when you’re starting out to know where to begin, especially if you’re lacking experience. Pricing is essentially a conundrum: set the price too high and you’ll never make a sale; set the price too low and you’ll find yourself anchored to a pricing point that you may live to regret. Get the price right, however, and everything will fall into place. At the end of the day, price is a story and how you tell that story matters. We all deserve to be paid for what we do – we have skills that others don’t. It’s important to value your work, to truly believe in that value and to share a pricing story based on that…

For some time now, the paradigm for web service architecture has been RESTful services, which enable representations of resources from one system (usually in JSON form) to be made available to another over a network. A basic REST service might expose a /customer/ resource that returns a collection of all customers in a company’s system. An HTTP GET request to /customer/12/ would return the record for customer number 12, attributes as JSON properties. It’s this simplicity that has made REST so attractive. However, there are limitations to RESTful services that can make more complex use cases needlessly convoluted. As a result, in 2015, Facebook’s GraphQL was unleashed. GraphQL offers an alternative paradigm and language that overcomes many of the perceived shortcomings of REST, and alongside Facebook counts Twitter, GitHub and…

Brand guidelines with a pulse is now a thing thanks to Brandpad; I can see why too, as many brand identities have cultural and societal impacts on such a huge scale that there’s a constant need for guidelines to evolve – almost daily. Documenting guidelines has traditionally been a monotonous process involving many (and I mean many) static PDF amends and exports. Luckily, Brandpad has the tools and style to take brand guidelines to a whole new – and far more interesting – level. This slick and usable platform enables designers, developers and clients to collaborate in creating stunning brand guidelines in the cloud. Making a small amendment to your brand guidelines is now as easy as logging in, dropping an asset into the document and logging out. Espen Harstad,…

“The immediate otherworldly visuals stimulated a curiosity within me to find out more about the company”JOSH MILLGATE, FREELANCE DESIGN AND BRANDING Evoulve is a company that focuses on transforming emerging ideas into viable products. The futuristic website aesthetic emits beauty from a UI galaxy far, far away. The zoom on the planet and the seamless storytelling as the user scrolls down the page showcases some impressive UI elements. I spoke to Lewis Webber from Fleava, the design agency that built the site, to learn about the process behind building it: “We used Three.js and WebGL technology to draw (render) the globe on an HTML canvas. Three.js is a cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser. Once we had the globe done,…

ADITO is a call to action to try and stop the destruction of the oceans. This has been highlighted recently by Planet Earth II and the increasing focus on plastic waste and the effects on wildlife and our coastlines. Costs for a charity of this nature are paramount as it is a type of charity that often struggles for real investment. As such, minimising ongoing costs is a priority. The site runs on a JAMstack (Javascript, API and Markup), meaning there are no real charges to speak of as it is hosted via Github pages. The main focus of the site is awareness, events, data capture via a newsletter signup and, of course, a call for donations. It goes without saying that the site is device agnostic and is focusing…

Fully poseable and fun to play with, the team at ToyFight have been pumping out inspired work since 2015; we find out more When it comes to really grabbing the attention of potential clients, it’s hard to beat ToyFight’s site (toyfight. co), where the company’s founders and creative directors, Leigh Whipday and Jonny Lander, have been painstakingly re-created as poseable action figures complete with their own accessories. It’s a fantastic introduction to a company that prides itself on creating great work with lots of attention to detail, while having fun at the same time. Founded by Leigh and Jonny in 2015 after many years spent working in various agencies and as freelancers, ToyFight has grown to accommodate seven full-time employees in its Manchester studio, and has worked with some prestigious…

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. Several shaders work together in what is called 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. What is a fragment shader? This shader, which is typically the last in the pipeline, instructs each fragment or pixel what…

Origami Studio is a prototyping tool built and used by the design team at Facebook to explore, iterate and test ideas. It’s best equipped for prototyping mobile apps, but it’s also suitable for tablet, TV, watch and desktop apps, too. It can handle anything from user flows to micro-interactions, but you’ll need to first design any foundations using a design tool like Sketch. You can apply minor styles in Origami, such as colours, but designing an app from scratch is something of a challenge (it’s the animation features that really make Origami Studio a mighty tool for designers). It’s free, but limited to macOS users only. Today we’ll acquaint ourselves with Origami Studio as we learn how to create micro-interactions. We’ll start by copying layers from Sketch to Origami, and…

We’ve only scratched the surface of what WebSockets and Socket.IO can do. Fortunately, they’ve been around for a while and are well supported, so there’s a wealth of information available online to help you. socket.io documentation http://socket.io/docs/emit-cheatsheet/ Socket.IO has documentation and examples on its site. Of particular use is the ‘emit cheatsheet’, which gives you a quick rundown of how to gain more control over what happens when you emit messages. Mozilla Developer Network http://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API MDN is always a good port of call for web technologies, and its section on WebSockets includes tutorials on working with them in various languages, as well as a list of alternative implementations to look at. When to use an HTTP call instead of a WebSocket http://blogs.windows.com/buildingapps/2016/03/14/when-to-use-ahttp-call-instead-of-a-websocket-or-http-2-0/ If you’re wondering whether WebSockets are the right…