Innholdsfortegnelse for No. 277 i Web Designer

“This engaging, 360-degree interactive experience uses WebGL technologies to digitally reimagine Alessi’s fragrances collaboration with Marcel Wanders” Designers: Triboo http://triboo.com Monogrid www.mono-grid.com/en Colours Tools Three.js, GLSL Shaders, Vue.js, CSS3 Fonts Gotham, by Tobias Frere-Jones and published by Hoefler & Co, is used exclusively in Book variety to style all site text.…

1. Page document initiation The webpage is defined with HTML, which must define the document structure. This consists of the HTML container, which stores the head and body sections. While the head section is used to load the external CSS and JavaScript, the body section is used to store the HTML created in step 2. 2. HTML content The page content consists of text containers for each group of text that the animation is to be applied to. Any element can be used as the container; the most important feature is the application of the 'slide' class. This will be used by JavaScript and CSS to apply the effect. 3. JavaScript manipulation Create a new file called 'code.js'. The JavaScript must find the containers that the 'slide' class has been…

FOR MANY WHO STILL BELIEVE in the founding conceptual pillars upon which the internet was built on, a big word is freedom. The ‘superhighway’ of inter-linked URLs and, at the time, pretty crude HTML documents would set a precedent for something open and diplomatic. Everyone could find himself or herself a presence, not just to visit but grow the rapidly expanding world with voices unrestricted by any kind of policing or formal restriction. Some of those liberties may have been traded surreptitiously since, but what does remain is a strong platform for collectiveness that has the power to influence real-world thinking. As the politics of division threaten to keep us apart, the web proves furtive ground for acceptance, embracing change and certainly bringing people together. This is really the goal…

This project was all about The Body Shop’s mobile site and how it could be improved. The starting point for the mobile project was the need for The Body Shop to understand their customer better, the conversion funnels and the pain points. It was about understanding the full journey and how the ‘why’ complements the ‘what’ of analytics. What are the users’ buying decisions? How can we optimise their purchasing journey? We ran usability tests on the mobile site and worked on the company’s navigation redesign project. One of the key aims of the navigation redesign was to improve the taxonomy of the mobile site. The research we conducted helped highlight which products were causing ambiguity, and where customers were getting confused or lost on their journey. The golden nugget…

Our work for Lily’s Kitchen started as all our projects do, with an initial client planning meeting to fully discover what their needs, objectives and requirements for the project were. It’s important to us that we listen carefully to our clients, and really understand both their business and emotional needs for the project, to enable us to do a great job. We find that keeping communication lines open throughout the project are key to happy client relationships, so we regularly check in to make sure they are kept up to date with our progress. We then spent time analysing and testing their current information architecture to understand where users would look for information and see where improvements could be made. With a new design of the website soon to be…

“STARTING OFF WITH THE GRID CAN BE DAUNTING AT FIRST, BUT IT’S SMOOTH SAILING ONCE YOU GET TO GRIPS WITH THE SYNTAX” The arrival of Flexbox has allowed us to spend less time polluting our code with clear fixes, hacks and workarounds, and focus more on writing concise CSS and HTML. While Flexbox is essential for any UI dev’s toolbox, it’s best suited for working in one single direction at a time. This is usually enough, as we are usually only restricted on one axis at a time (for example, the width of the page is restricted, but not the height). However, in the cases where we are restricted in both dimensions, say a dashboard style app, then CSS Grid is definitely one to shine. Starting off with the grid…

Three.js includes many lights you can use to light your scene. These include spot, directional, ambient, point and several other types. Ambient lights flood a scene with light, which you can also tint. It increases overall brightness and is great for increasing a scene’s light without adding more directional lights. Spot lights shine with a beam, much like a flashlight. You can see the circle of light on the receiving object if the beam radius is tight enough. Directional lights are like spots, except they have no circle. They cast evenly from a direction, much like how the sun lights the earth. Use directional light to emulate the sun. And point lights shine evenly in all directions from a specific position in 3D space. Think of these like a bare…

While WebSockets are well supported in modern browsers, they will not work in IE9 and Opera Mini and can be hard to scale up to lots of users. While providing support for these cases may be tricky, there are some tools that can make things easier. Socket.IO provides real-time communication between devices – primarily through WebSockets but with fallback options like long polling. They provide both server and client APIs to enable easy communication. This is done through channels, which can send messages to specific clients. SockJS is a similar platform that caters for different server environments, ie Python and Erlang. It creates an abstraction over WebSockets to make communication easier. Both are set up to work with thousands of clients with ease. To help work with WebSockets, it makes…

Back in the old days, a ‘traditional’ hosting company charged around £40 per month for your own VPS. It could be used to host various client projects ranging from WordPress installs to simple, one-page static sites. But rarely did it ever get even close to be being used to its full potential. Ultimately, it was more hassle than it was worth; a user had to maintain the VM, update the OS, fix vulnerabilities and generally do all the things that were hard to understand and didn’t want to do — and pay more for the privilege! An alternative is to start hosting a portfolio or project on AWS. It’s a lightweight, static site so it should be quick anyway, but on AWS it is blazing fast. Plus AWS’s CloudFront distributes…

Mirum Andrew Collinson is a UI Team Lead at Mirum. He has 17 years of experience and is joined by Paul Sandwell (Interface engineer) and Dan Hughes (JavaScript engineer) for this article. Discover the latest and greatest CSS you need to be using in your projects and take a peek at what’s coming to the spec very soon. Page 42 “Things have become far more complicated for developers as people expect more, but now they are now slowly being merged into CSS as formal standards” Alex Lee Alex is a UX designer and minimalism advocate at Impression (www.impression.co.uk) and a Nottingham Forest supporter. This issue he focuses on streamlining web projects with Sketch and Zeplin. Page 68 Mark Shufflebottom Mark is a Professor of Interaction Design at Sheridan College. In…

Layoutit layoutit.com/grid As we all know, grids are very much the basis of any good page layout and CSS Grid has given designers and developers plenty of power. But if you don’t want to take the time out to learn CSS Grid, or just need something fast, then this tool is a great choice. Add your columns/grids, name the different components of the layout and then grab the code. Variable Fonts v-fonts.com Want to try out a variable font and see what it has to offer? Then this simple slider-powered font resource is just what you need. Essential Image Optimization images.guide Image optimisation is an often forgotten, but essential art. This extensive e-book tells you pretty much everything that you need to know. Accessibility bit.ly/2BxyhPr Accessibility needs to be a…

Mobile Feature Checker bit.ly/2IYUCaV Which of the hottest new APIs works on the small screen? Does the API you want to use have support across mobile browsers? This simple site is split into two: Safe and Unsupported. Find the API you want to use and click ‘Which browsers support this?’ for more info. Gio.js giojs.org Gio.js is a declarative 3D Globe data visualisation library built with Three.js. It’s simple to use with fully interactive, rich 3D results. Selection.js bit.ly/2lV9xd3 A simple, lightweight library to realise visual DOM Selections. Supports any CSS library. Plus it has support for Node.js and touchscreen devices. Angular Augury augury.angular.io In a nutshell, Angular Augury is a Google Chrome Dev Tools extension for debugging Angular 2 applications. Gives insights into app structure and more. CONTACT US…

1. Document initiation Initiate the webpage with the HTML document definition. This consists of the HTML document container, which stores the head and body sections. While the head section is used to load the external CSS and JavaScript resources, the body is used in step 2 for the visible page content elements. 2. HTML content The webpage content consists of the text element that the ripple effect is to be applied to. This example uses article containers, but any element type can be used as long as the 'ripple' class is applied. This class will be used by JavaScript and CSS to apply the effect. 3. Text manipulation Create a new file called 'code.js'. The code in this file waits for page loading to complete, upon which filing all containers…

“Creative humanitarian website that blends bold typographic work and brushstroke interactions with the vibrant work of artist Leo Lowentraut.” https://art4globalgoals.com/en Designers: Denkwerk www.denkwerk.com Polyclick https://polyclick.io Colours Tools HTML5, PHP, TypeKit Fonts Druk by Berton Hasebe is used in its Condensed X Super variety to add a distinctive bold contrast to headings. Adrianna font, available via TypeKit is employed across a myriad of typefaces including Light, Regular and Extended Bold.…

Perhaps the biggest initial hurdle for Universal Love was settling on a visual theme that would adequately live up to the vibrant music at the project’s heart. An undoubted advantage here, however, was the ability to reference the album’s already commissioned artwork, with the Your Majesty designers able to use it as a touchstone for setting their own aesthetic aims. “Given the vibrant cover artwork from Craig and Karl as inspiration, the possibilities for creative expression were endless,” starts Senior Producer Michael Hoang. “In order to ensure the platform achieves its monumental mission, we established an execution strategy that aims to balance both communication and emotional objectives.” This formulation of an ‘execution strategy’ would set out some rule-based goals for what the visual concept for the website should fulfil. Firstly…

The Open University recognised that their complaints and appeals process was long-winded, confusing, and resulted in a high proportion of complaints being escalated to official complaints. We were asked to conduct a full user review of the complaints and appeals process to identify the issues and produce a clear plan for how the online system should be redesigned. We adopted a user-centred design approach to the problem. We first understood who the users would be, what the context of use was, and then evaluated their experience before redesigning it. We produced an audit report of best practice complaints processes by conducting a full audit of the existing process to map out every step in the customer journey. We then looked at ‘best in class’ complaints processes in alternative industries to…

“THINGS HAVE BECOME FAR MORE COMPLICATED FOR DEVELOPERS AS PEOPLE EXPECT MORE” As the web has rapidly evolved, it almost seems that apologetic CSS has been left behind. Each week something happens, but seldom where it matters – the interface. The internet follows an almost everlasting converge-then-diverge-then-converge model in applications, and now it’s the turn of CSS. As more frameworks, ideas and standards have emerged, complexity has skyrocketed with more and more helper technologies being invented from necessity; things have become far more complicated for developers as people expect more, but now they are slowly being merged into CSS as formal standards. CSS has become unrecognisable from its early inception in the 1990s. And what to the future? We can probably say now that CSS of the future will see…

Getting an image to fill a content box is often done by making use of the ‘background-size: cover|contain’ styles, however, previous attempts to recreate this behaviour for images or videos has been somewhat clunky. Thankfully the ‘object-fit’ property has emerged, seemingly out of nowhere, to help. This can be used to achieve the same result but on media assets such as images and videos. ‘Object-fit’ can take five values: • ‘Fill’: stretches the asset to fit the parent container • ‘Contain’: scales the asset to fit inside the parent container, maintaining aspect ratio (similar to ‘background-size: contain’) • ‘Cover:’ scales the asset to completely fill the parent container, cropping from the sides where necessary (similar to ‘background-size: cover’) • ‘Scale-down’: similar to contain, however, this will only scale the asset…

Flash is slowly being abandoned by Adobe in favour of HTML5 and JavaScript; its official end-of-life is set for the year 2020. And that’s where this article will come in handy. The tips described below aim to help HTML5 game developers in avoiding common mistakes when converting their Flash games to JavaScript, as well as making the whole development process go as smooth as possible. Fixing bugs and improving performance also translates to players spending more time in the game and thus on your site. All you need is basic knowledge about JavaScript, WebGL and the Phaser framework. With the rise of HTML5 usage, many companies start redoing their most popular titles to get rid of outdated Flash and match their products to the latest industry standards. This change is…

When you are creating your 3D content for use with head tracking, you will want to make sure that you do not create double-sided objects. The way models work in 3D is that they have one side which is ‘seen’ by the renderer — this is known as the ‘normal’. Even if your 3D modelling package shows both sides, you will only see one when you export it. For making a helmet model this is important. The back of the helmet should be visible if you turn your head but not on the inside as this would obscure the face. Your modelling package should allow you to see the normal side. In the image (left), they are shown as yellow polygons so that you know the outside is visible, if…

1. Initiate HTML document The first step is to define the structure of the HTML document that becomes the webpage. This consists of a HTML container for the head and body sections. The head section references to the external CSS and JavaScript resources, while the body section stores the page content created in step 2. 2. Page content The webpage content consists of a navigation container that stores a collection of links. For the fade in effect to be possible, the text inside the links need to be presented as a child element – hence the use of span tags. This allows CSS to control the text independently of their link container. 3. CSS navigation With the HTML now complete, create a new file called ‘styles.css’. Each link inside the…

Applications on the web are commonplace nowadays. Developing these constant communication systems can be tricky using traditional methods. REST APIs are a solution, but frequent requests to the server can slow things down and can end up being a poor experience for the user. WebSockets are a step up from regular HTTP requests. They allow real-time communication between a server and a browser. Any update from either side will instantly notify the other without the overhead of a regular HTTP request. React is, in its nature, a dynamic framework. By updating an application’s state, we can change how it behaves. That information can come from any source – including WebSockets. By passing data from a socket into React’s state, communication between clients can become instantaneous. In this tutorial, we will…

Browsers are a key component of the web experience and they are slowly supporting more and more technologies. The future is bright for designers and developers, but as we all know different browsers offer different support. One day, maybe, browsers will all be equal and designers and developers won’t have to worry about who supports what. We live in hope. Every so often Web Designer likes to look at how the browser market is evolving and what it might tell us. There may be no surprises in what takes top spot in the browser market. Yes, it’s Google Chrome. Worldwide and across all platforms it has a 58.94 percent market share (as of June 2018), a rise of around five percent since last year. If we dig down into the…

“Built around a multiple-choice test, this distinctive site quizzes visitors on the EU’s General Data Protection Regulation (GDPR) laws” Designers: Ogury https://www.ogury.com Mashvp https://mashvp.com Colours Tools SVG, GSAP, PixiJS Fonts The Favorit font designed by Johannes Breyer and Fabian Harb at DINAMO Typefaces is used predominantly across Light, Regular and Bold weights. Sharp Grotesk Bold 20 by Lucas Sharp makes an appearance within the GDPR logo and countdown sequences.…

1. Page initiation The first step is to initiate the web page definition. This is made from markup describing the HTML page container. There are two sections that the document container stores. The head is used to load the Javascript and CSS, while the body section stores visible content that will be defined in the following step. 2. Body content The body content consists of a container that the effect is applied to. This container stores any visible text and has the “dashEffect” class. It is this class that will be used to allow the Javascript and CSS to find where to apply the effect. You can apply the effect to multiple elements by applying the “dashEffect” class. 3. Container search Create a new file called “code.js”. Page content is…

experience UX is the brainchild of a psychologist and a project manager. Co-founder Damian Rees, graduated university with a degree in Applied Psychology and spent his early years working in UX including a stint at the BBC and National Air Traffic Control. Whilst at the BBC he stepped in for the Head of UX becoming the lynchpin co-ordinating all user research for the organisation, where he had a lightbulb moment. ”I realised that none of these high profile UX agencies were asking the right questions or delivering any effective solutions to the problems they we’re uncovering in their research,” Damian explains. “I knew there was far a better way to design great experiences, so I started developing a business plan. It wasn’t until my path crossed with Ali (Carmichael, co-founder…

Within CSS, to reuse code throughout a build, you used to have to type it out manually over and over, then preprocessors came along and the world was good – except you had to install and compile them, which wasn’t always as easy as it should be. Now within CSS you are able to use custom variables that allow you to pass through a string of content into your code such as a colour or size etc. Yet, unlike preprocessors, you can update the variable to be something different when used within a media query, which removes the necessity of declaring a specific variable to be used in each media query. The variable is declared inside ‘:root’ and is then applied to your tag via the ‘var(--variable-name)’ code, but as…

Applying background images is typically a stable part of every project build. But sometimes there is the need to be a little more creative with what can be done with the background image. This is where ‘blend-mode’ comes in to it. “THE CODE TO USE FOR BLENDING YOUR BACKGROUND IS FAIRLY SIMPLE - ALL YOU NEED IS ONE LINE OF CSS” By using ‘blend-mode’ you’ve got a little more freedom over how a background image works with the background colour instead of the usual background on top of the background colour. ‘Blendmode’ works by combining the background image with the background colour with a defined style. The options you can use are normal, multiply, screen, overlay, darken, lighten, colour-dodge, saturation, colour and luminosity. The code to use for blending your…

Rotating geometry The geometric Tetrahedrons spin in the background and look a little like constellations. The line thickness around them animates on the edges. Fading back The other character fades further back and becomes slightly transparent to give more emphasis on the character that’s selected. Bringing to front When the user hovers over one of the characters their image moves forward and enlarges to bring emphasis to the selection. Main menu The main menu is available over on the left of the screen. This brings an overlay with the various options available. Changing titles As the character scales up and moves forward, the title in the centre of the screen changes and fades in to view giving context to the user’s selection. Smokey background The background has a particle system…

In this article, we have focused mainly on Phaser v2. However, a newer version of Phaser is now available. This is also worth checking out. It introduced a plethora of features, such as multiple cameras, scenes, tilemaps and the Matter.js physics engine. If you are brave enough and want to create truly remarkable things in browsers, then WebGL is the right thing to learn from the ground up. It’s a lower level of abstraction than various game-building frameworks or tools, but it allows you to achieve greater performance and quality even if you work on 2D games or demos. Among the websites you may find useful when learning the basics of WebGL is WebGL Fundamentals (https://webglfundamentals.org), which uses interactive demos. In addition to that, to find out more about WebGL…

Animated background Full-screen navigation is complemented by a video background that helps to increase the visual appeal of the webpage presentation. GDPR notification This is a smart approach to presenting the data privacy notification for GDPR compliance without being too intrusive. Sub navigation items A secondary navigation is presented with a smaller font size, allowing lesser visibility for options that aren’t the main focus. Main navigation The main navigation options are presented with a font size that clearly stands out from the background and any other page content. Link containers Each navigation link uses spacing to clearly separate themselves from other items. It’s also used as part of the intro animation. EXPERT ADVICE Focused navigation Full-screen navigation is a useful approach for content design where the only focus is to…

WebSockets are a relative newcomer to browsers, but they work off HTTP – the same principle that browsers have used for years. Each WebSocket connection starts as a regular HTTP request to the server. A special ‘Upgrade’ header tells the server it would rather use WebSockets to communicate. If the server accepts, it sends back its own ‘Upgrade’ header telling both parties to use a WebSocket instead. This is known as the handshake phase. From then on, both the browser and the server can start sending messages in simple formats such strings. This all comes without the overhead of headers and cookies that accompany regular HTTP requests. The connection stays open for as long as either party is connected. The result is real-time communication with low latency.…

In this article we’re going to show you how to deploy your single-page application (SPA) to a cloud-hosting platform, such as Google Cloud Platform (GCP). We’ll show two different options; deploying to Google App Engine and deploying to Firebase Hosting, both of which are based on Google Cloud infrastructure, but provide different offerings — we will come to this later. Your SPA could be built using React, Vue.js, Angular or even something bespoke — it doesn’t really matter, the process is the same. For this tutorial we’ll use Angular’s CLI tool to create a very simple app so we actually have something with routing to deploy, then we’ll set up a simple Node.js server and finally deploy the whole thing to GCP. To do this you will need a Google…

This tutorial only covers Google Cloud Platform and Firebase, but there are plenty of other great options out there. AWS, Google Cloud Platform and Azure are the big players and offer all sorts of complicated and wonderful things, however the learning curve can be pretty steep. Because of this there are a number of other providers that utilise the big player’s infrastructure but provide their own abstraction for particular purposes that greatly simplifies the developer’s job. Firebase does this by providing a super-easy deployment process to GCP. Heroku does a similar thing for AWS. Netlify — the new kid on the block — sits on top of (at least) GCP, AWS and Rackspace Cloud to minimise downtime. The compromise of this simplicity is usually the cost.…