Innholdsfortegnelse for No. 276 i Web Designer

“Interactive font specimen and eCommerce website that showcases Amazônia, a font design inspired by the Amazon rainforest” https://amazoniafont.com Designer: Trama http://tramastudio.net Colours Tools Magento Enterprise, jQuery, WooCommerce, SVG Fonts Amazônia Script comprises of 763 glyphs, supports 85 languages and is naturally featured extensively throughout to promote the typeface. Amazônia Script Life and Life Alt provide a contrasting character set of 52 endangered animal dingbats.…

Since 2016 — around Christmas time, we work on our ‘Wishes’. The founders set the entire studio a creative challenge to solve, without the safety of the typical constraints of a client project to guide them. It’s a makemepulse project and it’s designed for two things: for the team to do dope shit, and to share our values and a bit of our culture with everybody else. It started as a way to reconnect with our passion, which stems from a quote of André Malraux that “great ideas are made to be experienced.” Last year we updated our logo and the company identity, which informed this year’s brief: how can people experience our new identity? Brainstorming with 20 people is always a tricky thing, but after hundreds of graphic references…

In February 2017 we released a campaign website to promote the launch of a new video game, Tom Clancy’s Ghost Recon Wildlands. The agency, DDB° Paris, briefed us with a unique idea: they wanted to produce the first ever documentary on a virtual world using extensive game capture to reveal the lives and rituals of every character inside the World With No Heroes. Using assets supplied by Ubisoft, first we conceived and built a ‘living map’ of Bolivia where the game is set and rendered it for web in real-time 3D using our in-house framework, NanoGL. Then we developed a mini-game that put players at the heart of the documentary, where you follow the narrative of a cocaine heist gone wrong via surveillance cameras dispatched throughout the map. Players can…

“RATHER THAN LOAD THREE DIFFERENT MODELS, ALL THE ADJUSTMENTS TO ONE MODEL WILL BE DONE IN CODE TO MAKE IT LOAD QUICKLY ON MOBILE” 1. GETTING STARTED Open the ‘start’ folder in your IDE and inside the ‘index.html’ page find the script tags. All the code in the tutorial will go inside these. To test the app you will need to have a server and if you want to test on a phone you will need to host the files on a ‘https’ server. Add the initial variables in the script tags: 2. LOAD THE MODEL To make the AR scene work, a model will be loaded. You will see that once loaded it is stored in the variable ‘model1’. This is then scaled and cloned twice for the three…

Highlighted option Animated navigation text appears when the ‘=’ icon is hovered by the user’s mouse; the background circle guarantees visibility. Initial content The main content area initially presents a default image, allowing the website to be perceived as ready if the video loads slow. Unhighlighted option Options that are not hovered by the mouse pointer appear as an icon – without any animated text shown until hovered by the user. Background border Border spacing around the main content area allows visible content to appear without obstruction from the browser window. Content video The video is designed to blend in with the loading image, allowing it to become an attention grabbing surprise for site visitors. Inspired by www.this.design EXPERT ADVICE Configuration The best results in content design are achieved with…

Styling a component-based application can get difficult. While build tools such as Webpack can digest and create stylesheets made for each section, they remain unaware of the application as a whole. Changes in state have to be toggled with class names, which are prone to misuse and issues with specificity. The results are bloated classes, repeated properties and a set of styles that do not play well together. For application components to be more easily reused, they should know about the bigger picture. Styles and logic should be aware and respond to one another. One way to tackle this is to use CSS-in-JS tools such as Fela. On its own, Fela is a way of taking objects that define styles and convert them to atomic CSS classes. The styles it…

The ability to create sites and apps using components makes modern web development a fairly slick experience, and is the backbone of almost every modern frontend framework. Web Components offer a standards-driven approach to doing this, meaning you’re building vanilla code for the web and don’t depend on any specific framework. You might already be familiar with the web component standards: shadow DOM, HTML templates, HTML imports and custom elements. It’s the last of these which is the real crux of web components, since ultimately what you’re trying to do is create your own HTML tags which encapsulate markup and behaviour you define. While you could certainly get started building web components with nothing but a text editor, it can be a bit fiddly. Luckily, like everything on the web,…

We’ve used a couple of decorators, @Component, @Prop and @State, in our tutorial, but there are others which Stencil uses that are worth being aware of. We’ve already talked briefly about @Event and @ Listen. Here are the others: • @Watch listens for an update to a property, and passes its associated method to the old and new property value when triggered. • @Method is used to expose methods as part of a public API. Methods annotated this way can be called directly from outside a component. • @Element is used to refer to the host HTML element inside its own component, which can be useful to modify its properties on the fly.…

“ Whatever skill level you are, it won’t make much difference if you don’t have decent content. Think about appropriate use cases for AR before jumping in” Mark Shufflebottom Mark is a Professor of Interaction Design at Sheridan College, an Adobe Education Leader and a veteran contributor to Web Designer. In this issue he explores what is happening in the world of WebAR and takes you through the process of creating markers and building an app using the AR.js library. Page 42 Ashley Firth Ashley is Head of Frontend development and Digital Accessibility at startup energy supplier Octopus Energy. In this issue, he weighs up the pros and cons of CSS reprocessors, focusing on the best of Sass and Stylus. Page 66 Tam Hanna Tam started out wiggling command lines…

JSUI github.com/kitze/JSUI Need a tool for visually organising, creating, and managing JavaScript projects? This tool from Generate London (www.generateconf.com) speaker Kitze can organise and group apps, generate new apps, search apps, has a project dashboard, and lets users search project files, run scripts, manage dependencies and apply plugins. ml5js ml5js.org This library provides access to machine learning algorithms and models in the browser. It builds on top of the JavaScript library TensorFlow.js. hybrids github.com/hybridsjs/hybrids Hybrids is a UI library for creating Web Components with a simple API. It uses plain objects with property descriptors and pure functions. Paper.js paperjs.org Paper.js calls itself ‘The Swiss Army Knife of Vector Graphics Scripting’ It is an open-source scripting framework that runs on top of the HTML5 Canvas. CONTACT US AT: webdesigner@futurenet.com |…

Tenon tenon.io How important is web accessibility? Extremely important. The web is for everyone so you need to make sure your site is up to scratch. Tenon is a paid-for tool that boasts a comprehensive set of features. There is a Free option, but this is limited. For a quick test, simply add the desired URL to be see a list of issues that the tool has found. 1.1.1.1 1.1.1.1 Everyone uses the web and wherever you go can be tracked. This neatly named tool will protect your privacy and speed up your browsing. Wakamai Fondue wakamaifondue.com Need to know more about a font? Then simply drag the font onto the page for more info including characters, glyphs, size, format, designer and more. Retro Hit Counter joshwcomeau.github.io/react-retro-hit-counter Who can resist…

1. Initiate HTML document The first step is to define the document structure that will store the HTML content. This consists of the document container, which stores the head and body sections. While the head section stores inks to the external CSS and JavaScript resources, the body stores the visible content created in Step 2. 2. HTML content This step defines the visible HTML content. Take note of how the texts designated to have the blur effect are all contained within a container that has the ‘blur’ class. This class is used by JavaScript to reference the text items in Step 3, and by CSS in later steps. 3. Automated animation delay Create a new file called ‘code.js’. Each item inside the blur container is to be presented three seconds…

We already know that development decisions were not only affected by the short timescale for this project, but also longer-term maintenance. Bandit Wines’ eco-friendly packaging was therefore not the only future-conscious theme, when it came to the site giving value to its client after launch. “When our clients don’t have any type of digital or IT support internally, we want to work with them on any form of maintenance to ensure that any and all design and copy changes are done with little or no difficulties,” Digital Director Justin Witt explains. “Even working within a CMS there can be bugs that arise once copy is added or deleted, or when different photography and imagery sizes are changed. It’s up to us as the creative agency to advise our clients on…

Last year we worked on an awesome campaign with BETC for the launch of the new Canal/HBO series The Young Pope starring Jude Law. The agency team had the fantastic idea to recreate his holiness Pius Thirteenth as an artificial intelligence that could spread God’s word to the people via the internet. We greatly admire these kinds of ideas, where you get to create a personalised and contextual interaction with an audience that’s less advertising, more entertaining. Their ambition was big — to monitor one million online comments and respond to as many as possible in a real-time and contextual way. Makemepulse used IBM Watson’s natural language classifier, combined with machine-learning algorithms and a semantic analyser to understand the emotional context of what users were posting. Then, drawing from a…

Google has announced a range of significant updates to its Analytics reporting platform, utilising its machine-learning capabilities to create a deeper understanding of individual users. This is music to marketers and website owner’s ears, since we are working hard to meet a resounding user demand for online experiences that are both relevant and personal. The more we know about our users’ behaviour, the better equipped we are to make smart choices about our website, mobile app (iOS and Android) and application development investments. These critical updates comprise four new features: all of which will help us to measure customer journeys at a deeper level, while accurately understanding individual user engagement across channels and devices. This tutorial highlights the latest four enhancements, which include: Lifetime Metrics and Dimensions; Audience Reporting; Conversion…

Throughout this tutorial the transform property is used extensively. Can’t remember, or not quite sure what the ‘transform’ property can do? We are going to take more detailed look here. The ‘transform’ property allows you to manipulate elements by rotating, skewing, scaling and translating. The above rule rotates an element clockwise from its original position. Conversely, using a negative value would rotate an element in the opposite direction, ie to the left. You can get even more specific by using either the ‘X’ or ‘Y’ axis as shown in the next code snippet. You can also use ‘translate’ to position elements, using either pixels or percentages. These values can be any length value, like 50px or 2.5em. One value will move the element to the right (negative values to the…

Tools like SASS and PostCSS helped change the way we compose styles. While writing CSS in JavaScript has its benefits for component-based applications, we lose access to the helper functions and mixins that these tools provided to streamline the process. Polished is a set of helper methods designed to output a range of CSS properties and values. By taking dynamic values as arguments, it removes much of the string interpolation required when writing CSS-in-JS techniques. There are multiple functions designed to manipulate colours, such as ‘desaturate’ and ‘opacify’. These can take colour values in a variety of formats, understand them and perform alterations before passing them back. This means they can be curried together to perform the exact adjustments required. You can find out more about Polished at: polished.js.org…

Trends in the world of design and creative are always changing. Designers and creatives are always to looking to see what the next trends are and, hopefully, jump on board to ensure that they, or their company, are ahead of the game, or at the very least on track with what is happening. Econsultancy, in partnership with Adobe, recently released its 2018 Digital Trends for Creative and Design Leaders report. So what does the document reveal? The key findings of the report found that “The frontend experience is becoming increasingly important in a world of digital disruption and lower consumer tolerance of poorly designed products”. Elsewhere the key findings state “that design-driven companies are almost twice as likely as other companies to be significantly outperforming their competitors (32 per cent…

“Webbywinning visual designer and art director Xavier presents a series of dynamic scrolling case studies of notable projects” https://xaviercusso.com Designers: Xavier Cussó burundanga.studio/#/home Christian MacMillan cmacmillanmarin.com Colours Tools HTML5, GSAP TweenMax Fonts The Univers LT font by Adrian Frutiger for Linotype is the only font used across all text in either Standard or Black varieties.…

WHEN WE DARE TO CONSIDER what the term ‘brand’ really means in today’s multichannel world, it’s a pretty abstract yet increasingly nuanced concept. We’re constantly told we’re all expected to be brands of ourselves, particularly online, when it comes to projecting the most engaging aspects of our personality, experience and abilities into the digital ether. For companies, however, things are more literal, and probably more vital, when the capture of audience attention is so pivotal to market success. The pursuit of effective corporate web branding could be argued as being the most important of all, and it’s hardly surprising digital agencies often need that sixth sense for good marketing. Operating out of Mare Island, California, Affinity Creative Group are one example for whom the philosophy for the work they do…

1. SUPER CHARGE  https://bit.ly/2xqABtl Running on the prototype browsers WebARonARCore and WebARonARKit this is a great experiment to show the visual capabilities, giving you a super power to unleash a ball of energy in your surroundings. 2. WORLD HERITAGE SUNKEN VESSEL  https://bit.ly/2kyEbZ7 Built for the UNESCO World Heritage Site ‘Prehistoric Stilt Buildings around the Alps’, this gave visitors to the Vienna Ball of Science 2018, an insight into cultural heritage by revealing a sunken vessel. 3. ENARGY https://bit.ly/2LGbCFo This experimental project allows the phone’s camera to be pointed at an appliance to see how much energy it was using by hooking up to data from smart plugs that power the appliance. This was built using A-Frame, showing the sophistication that can be achieved with the library. 4. A-FRAME…

AR.JS  https://bit.ly/2yFnznw The definitive library leading the way for bringing AR to the web browser. Use either Three.JS or the simpler A-Frame to display your content with this library. While at the moment it is mostly marker-based AR content, there is an example of it working with Google’s Tango platform. GOOGLE AR  https://bit.ly/2LHMkqz Google have developed two browsers for AR (WebARonARCore for Android and WebARonARKit for iOS). If your phone can support these browsers you can install them. Using Three.JS build 3D AR content using a phone’s abilities to see flat surfaces and position your 3D content on them. JEELIZ FACE FILTER  https://bit.ly/2LJN66o This is still technically AR but focuses purely on detecting faces and augmenting 3D model content on top of the detected faces. Think of all those filters…

Using the same data modelling techniques that determine ‘smart lists and goals’, Analytics calculates the percentage conversion probability dimension, and the average conversion probability metric, to determine a user’s likelihood to convert. Transactions for each user are then evaluated, and the resulting probability of conversion is expressed as an average score of 1 (meaning least probable) to 100 (most probable) for all users during the date range. By identifying recent website visitors with the highest probability of a future conversion, we can segment these potentially-converting users and create audiences for analysis and target them specifically in remarketing campaigns.…

Less lesscss.org Less is stylistically very similar to SASS in its feature set, and so anyone that has used one will feel right at home with the other. Its popularity boosted heavily after it was used in the source Twitter Bootstrap. It has since moved to SASS in Bootstrap 5, but it has left a lot of people comfortable using its syntax. The fact that it is so similar to Sass makes it difficult to advocate when Sass is more widely used, actively developed, and feature-rich – indeed this feature would be comparing the two (as many have before) if there were more differences and unique selling points about it. It still remains a popular and strong preprocessor though. Pros • Many web developers are familiar with JavaScript and because…

New installation experience There is life after the death of the TeleRik Platform One of the most interesting aspects of TeleRik’s NativeScript was the TeleRik platform: an integrated development environment which lived in your browser, and handled compiling and other processes. Sadly, the product was discontinued in May. Alternatively, NativeScript sidekick is offered at https://www.nativescript.org/nativescriptsidekick. It is available for Windows, Linux and Mac OS. When the installation has been completed, you need to check the presence of the tns command – especially on Ubuntu, the installation routine sometimes forgets to deploy the necessary declaration to your bashrc file. In the next step, start the product from the desktop and follow the instructions on the screen. The product will, among other things, require you to log in with the TeleRik or…

When a component is styled using Fela, the resulting class names are a seemingly random collection of letters rather than anything to do with the component itself. This is because Fela uses an approach called ‘atomic CSS’. Atomic (or ‘functional’) CSS creates classes for each different style and applies these to each element individually instead of using a specific ID or class name to define how each element should appear. These are usually generated by a tool like Fela, but they can also be created by hand. The advantage of using a tool to generate them is that it guarantees all the classes it generates are being used on the site. The end result is a smaller set of styles that are predictable, reusable and avoid common specificity issues that…

We’ve looked at how to pass data from a parent component to a child via props, but a common scenario is to need to pass data back to the parent component - a button press, for example. Since props are in most cases immutable within a component, the approach you take to this is the same as you’d use in React. The solution is to use an event model. The actual implementation of this looks slightly different to React, though. With Stencil, you can use the @Emit decorator to specify and event that a component emits, then use the @Listen decorator in another component to respond to it.…