Innholdsfortegnelse for No. 288 i Web Designer

Leading Design https://2019.leadingdesignconf.com/newyork A conference for people who lead/oversee design direction. Learn more from industry leaders who share their expertise. UX Scotland https://uxscotland.net/2019 This is a three-day, hands-on, practical UX and design conference aimed at the software, web, and mobile community. Patterns Day https://patternsday.com Aimed at designers and developers whose focus is on design systems, pattern libraries, style guides, and components. CSSDay https://cssday.nl/2019 This two-day expert event in Amsterdam has a host of big name speakers, including Rachel Andrews, Brad Frost and Jared Spool. JSNation https://jsnation.com/ Spread over four days, exclusively for JS devs. There two days of workshops, one of speakers and a hangout day.…

“This innovative quiz experience marries video sequences with text entry to test knowledge of sign language phrases” https://bit.ly/2VbyyRf Designer: www.epiphanysearch.co.uk Colours Tools Vue.js, GSAP, MP4 video Fonts The Avenir Next LT font family by LinoType is used throughout in Regular, Medium and Bold typefaces…

“3D CSS provides a relatively simple, legible and well-supported means of utilising CSS transform properties across a plane of depth, without the need for complex JavaScript implementations, offering plenty of opportunity to create complex and impactful elements at a lower technical cost”Adam Kuhn https://codepen.io/cobra_winfrey “Every image, every scene, can tell a story. WebGL 3D enables photorealistic, interactive experiences that can reach a mass audience through the web, all without plug-ins. Three.js is the most popular 3D library for WebGL 3D in the world.”Richard Mattka http://richardmattka.com…

1. Enable shadows in the renderer One key element for realistic scenes in 3D are shadows. To add shadows to a scene, tell the renderer to use shadows. Add this code just after declaring the renderer: 2. Add lights that cast shadows In Three.js, each light that casts a shadow must be enabled to do so. Point lights and Spot lights are the best to use for this. Use the following code to enable shadow casting when adding lights to a scene. 3. Add shadow properties to lights Each light has shadow properties to customise. Control the size of the shadow map for more or less precision quality. Also control the camera near and far distances for when shadows should be drawn. These properties allow fine tuning for optimal performance.…

The browser now has two speech API’s to work with and both are used in this tutorial. The Speech Recognition API is the newer of the two and according to caniuse.com has fairly limited browser penetration at 68%. This API is still being clearly defined by the W3C, but is worth getting used to as this could provide some major accessibility going forward on the web. The speech synthesis API has been around for much longer and has much more support in browsers with 88% penetration. This allows for the browser to read text back to the user, again an essential feature for accessibility. Not only that, as users start to become more used to speaking into devices such as Siri, Alexa and Google home, this will become second nature…

React’s hook pattern is a great way to provide added benefits to functional components without requiring a full class approach. For components that are already classes, or React projects that are not using the latest version, React Spring also provides an API using the render prop pattern. Render props provide their information slightly differently, but are otherwise the same as hooks. Springs, trails and transitions are all supplied by their own components. There are also extra components to help with specific animations, such as <Keyframes /> and <Parallax />. While hooks are the preferred approach, both APIs will remain equally supported going forward. For more information on how to use the render props API, visit the docs at https://www.react-spring.io/docs/props…

Windows Subsystem for Linux (WSL) is a native Linux environment that provides Windows users with a bash terminal. To install it open PowerShell as Administrator and run the following and restart: In Microsoft Store, search for `Ubuntu , click Get, then Install. Launch Ubuntu from Start menu. You will be prompted to set a username and password for the Linux environment. Finally, update the repository package lists with `sudo apt-get update. You now have a full Linux environment on Windows. For the rest of the tutorial, we will refer to this Ubuntu app as the terminal. If these steps do not work, check docs.microsoft. com/en-us/windows/wsl/install-win10 for more details.…

Adam Kuhn & Richard Mattka Adam is senior web dev at Kong, a constant Codepen tinkerer and CSS lover. Richard is an award-winning interactive technologist who loves to explores WebGL 3D with Three.js. Together they bring a host of top techniques to create impressive 3D that works in the browser. Page 46 “WebGL 3D enables photorealistic, interactive experiences that can reach mass audiences through the web all without plug-ins.” Matt Crouch Matt is a front-end developer in London. UI animations in React often involve a trade-off between simplicity and performance. In this issue, he takes a look at React Spring — a library that could make all the difference. Page 70 Mark Shufflebottom Mark is a professor of Interaction Design at Sheridan College near Toronto. In this issue, he uses…

Brakt http://brakt.mix-theme.com A simple theme for creative bloggers. A central image slider is followed by smaller images, before revealing more content. Deus http://wpgalaxy.co/deus/default A magazine theme with a host of variations of the default to suit a specific type — fashion, politics, games, video and an RTL version. Blacksilver https://blacksilver.imaginem.co A theme aimed at photographers, or those looking for fullscreen options to display images. Includes sliders and transitions. Shopaddict https://shopaddict.cmsmasters.net Homepages aimed at various merchandise — books, macarons, clothes, perfume and more. Well-crafted, well-presented. Vintage Retrolie https://retrolie.thememove.com This is a theme for those looking for vintage design, retro photography, or the retro category. Over 20 layouts to choose from.…

“Provider of “dope” music for commercial trailers, Pusher serves a symphony of work samples through an innovative rotating UI” https ://pushermusic.com Designer: http://blackrainbow.la Colours Tools Three.js, GSAP, soundmanager2 Fonts Lato font, designed by Adam Twardoch, Botio Nikoltchev and Łukasz Dziedzic, is used in Light and Bold typefaces throughout…

1. HTML document Initiate the project by defining the HTML document structure. This consists a description for the HTML container, which stores the head and body sections. While the head section is used to link the external CSS stylesheet file to the page, the body section will store the visible content elements created in step 2. 2. HTML content Content to be presented with the typing effect will make use of a class called “typing”. This example demonstrates how text using a h1 heading tag will have the typing effect applied by using “typing” class. The CSS for the effect will be created to work with any type of element. 3. CSS: colours Create a new file called “styles.css” — the file linked to the HTML document from its head…

WWW.DYNO.COM Our core goal was improving online conversion rates. We began by auditing the website to identify the problem areas, and the most significant opportunities for improvement, leaving no digital stone unturned. Then we initiated a site overhaul, working closely with the client and their partner agencies — focusing on structure, UX, and most importantly of all, the conversion journey. Our audit of the existing site explored everything from UI and UX, through to SEO and structure. We created pen portrait personas to match the different audiences, and then we mapped their journeys through the site. We compared this with competitor research, and went on to convert the pain points into recommendations. Using simple principles as the guides to our next steps, we outlined the roadmap for the online transformation.…

Models and Geometry Three.js allows the use of a number of basic geometries, such as boxes, to construct models, like this one. Geometry is customisable as well, to angle edges or extend the basic shapes. To get a great look, use detail, and interesting shapes and patterns. In this case, use a 3D modelling application like blender or Cinema4D to construct the main structures import as FBX, OBJ or GLTF into Three.js. Keep camera positioning in mind. Look for interesting angles! Watch a favourite movie and notice how the camera is used to create interest and drama even with subtle motion and angles. Environment Maps or Static Backgrounds There are several options to create backgrounds in 3D scenes. If the background is going to always be static and not react…

1. Setup Be sure Three.js is set up, and that there is a scene, camera and renderer. Add a variable to hold a reference to the text, to translate it in 3D space later. To create a background like the image, use the scene.background option. Use the following code for that: 2. Add lights Next, use a directional light to emulate big light sources like the sun. Use point or spot lights to emulate more position based lighting. Use this code to light the scene: 3. Creating materials Create a material for the surface of text objects, like any other 3D textures. This example created a simple grid patterned texture in PhotoShop, and then used the following code to create the material: 4. Load font with FontLoader Several fonts are…

While a customer’s data will not appear in the main navigation of the website, if the portal contains more sensitive information — such as contracts or billing details — then it needs to be password protected. WordPress contains inbuilt support for password protecting posts. In the WordPress post editor, under visibility options, select “password protected” and enter the desired password to access this customer. The template files need to be altered in order to support the WordPress password protection. Alter the single-tu_customer. php file, and just inside the loop, use if(post_password_required( )): to show a password form if no password has been entered. If the password has been entered, or the password cookie exists, then it will display the content of the page.…

Silky smooth animation can make an average website feel more engaging. In contrast, having components that stutter and slow down the page can ruin a great experience. While React Spring will optimise the calculations, we can help matters by only animating certain properties on an element. All browsers update their visuals in three stages — calculating layout, painting the layers that make up that layout, and then compositing them together. Animations that only affect that last step will animate better. While this varies across browsers, it is broadly limited to “opacity” and “transform” properties. Interpolating React Springs values into one of these two properties will go a long way, and, with a little creativity, can cover a lot of use-cases. To see the steps each property affects, reference the CSS…

A site is deployed to a web-host so it can be viewed online. For our site, this is done by uploading the contents of dist to a directory on a web-host that the URL points to. Linking a URL to a directory on a server is done through the web-host’s control panel. For more details, contact customer support, as this is outside this tutorial’s scope. File transfers to web-hosts can be done using the File Transfer Protocol (FTP). This is insecure, however, and uses a password for authentication. Secure Copy Protocol (SCP) can instead be used, which utilises the Secure Shell (SSH) protocol that uses a pair of keys for authentication and is more secure. Not all web-hosts support SSH, so we’ll create two gulp deployment tasks, deploy and ftp-deploy,…

Babylon.js www.babylonjs.com Babylon.js 4.0 is the latest version of the WebGL-based graphics engine. Including a new Inspector, support for ammo.js and WebXR, and a host of optimisations to make the engine more efficient. Test run the engine via its playground at www. babylonjsplayground.com. Check out the featured demos to see what the engine can do. Themosis https://framework.themosis.com The Themosis framework is a custom WordPress stack. It provides an object oriented development structure to code professional WordPress applications. Uppy https://uppy.io Uppy is a modular open source JavaScript file uploader. It fetches files locally from online services, such as Dropbox, Google Drive and Instagram. Can also get files from a device or camera. Interactive Typography Cheatsheet https://codepo8.github.io/typography-cheatsheet Need to know the names of the finer points of typography? Find out what a…

“Fledgling French designer presents already impressive project experience with a portfolio rich with scrolling effects” https://gautiermaillard.com Designer: www.alexisbenoliel.fr Colours Tools Vue.js, Hammer.js, Google Font API Fonts GT Super Display by Noël Leu, Mirco Schiavone and Reto Moser is a serif typeface used in Light and Bold variants Aktiv Grotesk by Dalton Maag is the secondary font that's being used in Regular and Medium typefaces across supplementary paragraph text…

1. Page initiation The first step is to define the HTML structure of the web page document. This consists of the web page’s HTML container, which stores a head and body section. While the head section loads the external CSS and JavaScript files, it’s the body section that’s used to store the page content elements created in step 2. 2. Navigation container The page content consists of a navigation container and its content. The navigation is marked with a “foldout” class, and stores the options for the navigation. The only exception is the first child element, which is to be used as the open/close button. The CSS and JavaScript created in later steps will define how these elements are presented and respond to user interaction. 3. JavaScript: link search Create…

What do you get when you combine remote-controlled toys with wireless Bluetooth cameras? The answer of course is the “Drone” phenomenon that has exploded in popularity over recent years. In fact, that pervasiveness has rightfully caused concern about the qualification of drone flyers to safely, and responsibly control their crafts. While there isn’t a formal “drone license” yet, certainly within the UK, there are some remote pilot certifications required for commercial operation, with numerous training courses available. Our featured project this time links directly here, offering a clever example of how imagination and immersion can be applied to train would-be droners. Drone VR, from online educators Certify-ED, is a web and browser-based virtual reality experience that supports the Oculus Go headset. Featuring real world physics and weather conditions across seven…

Founded in 2006, Waste Creative was born out of pure frustration. Visar Statovci and Mike Petricevic were both part of a full-service marketing agency. Historically, it was a PR driven outfit, so when they expanded into creative and production, they adopted a backward approach where ideas and creative were screened and reviewed by the client services team, and more often than not, the ideas were altered before being delivered to the client. There were loads of unnecessary layers of management, ridiculous marketing buzzwords, long pointless meetings and baseless opinions. Visar and Mike could clearly see there had to be a better way. Waste was founded on the principle of cutting out unnecessary agency fluff in favour of urgency, expertise and a no-fuss attitude. Thirteen years on, that attitude has never…

1. Define our elements HAML is utilised to efficiently generate over 100 elements, defining only the 3D faces that will be visible on hover, and wrapping them all in a parent element, used here to define perspective and transition properties, and apply a hover state for the big reveal. In order to properly place all elements, select the hover state by default, rotating the wrapper on both 2D and 3D planes. 2. Mixin magic This is where preprocessors like SASS & LESS give a nice little assist. Using an SCSS list and a custom mixin to iterate through each list row, define the 3D block placement, simply defining pixel dimensions for width, length, x and y positions, background colour and z-axis position. 3. Let’s get loopy The remaining work is…

1 Use layers at depths Adding foreground objects and mid-background will add depth and enhance the composition of a scene. Camera motion with these layers of depth will really make the animation stand out. With a pool in clear focus in the foreground, then progressively less and less distinct layers moving into the distance, the scene becomes expansive. 2 Use depth of field In film and photography lenses, are used to great effect. Capture this look by narrowing the focus to an area of interest in a close-up of detailed scenes. Use post-processing shaders to help with this, or simply blur out textures and objects manually at depths that are too close or far away. 3 Use ambient effects Although they can come at a cost of processing power, ambient…

For years, there has been a large variety of 3D model formats with varying levels of performance and support. Now glTF has emerged as a viable standard format to use. There are exporters or convertors available for many of the major 3D applications. glTF reduces the size of 3D assets, and the real-time processing needed to use those assets. Both GLB and GLTF versions of the format are well supported by the Three.js library. glTF is compact to transmit and fast to load. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras. You’ll also see that loading glTF scene data is extremely easy inside Three.js, making it an excellent choice whenever possible You can read more about the format here: khronos.org/gltf/…

“Referring to best of breed digital interfaces for inspiration is par for the course, but collating and examining the UIs that frustrate us, learning from their mistakes, is just as important in informing good design practice”Joss Cook Design manager • dribbble.com/josscook 1 KNOW WHO YOU’RE DESIGNING FOR 1 Tasks like user research, wireframing, testing and information architecture design are often seen as the responsibility of a UX designer, but we’re starting to see a growing blend of the UX/UI designer role emerging. According to Invision, “66% of UX designer job postings request UI skills” (www.invisionapp.com/inside-design/ux-ui-designer), so if it has become important for UX designers to understand visual design, branding and typography, it’s only right that UI designers should get involved, or at least have a base understanding of the aforementioned…