Innholdsfortegnelse for No. 274 i Web Designer

“Inclusive design considers as many people’s needs and abilities as possible, instead of a ‘one size fits all’ to the experience” Design for emerging experiences As the web landscape changes so does the user experience and to stay competitive you need to embrace the new. One thing that doesn’t change is the user. If they have a poor user experience they will simply look elsewhere. So what are the emerging experiences that you need to consider today and what are the tools needed to achieve the right results? In our lead feature (p42) Laura Yarrow from Experience UX reveals the seven key themes that you should be designing for: Inclusivity and accessibility, immersion, trust and transparency, coherence, conversation, collaboration and efficiency. Alongside these key themes she reveals the tools that…

01. Kontrapunkt  bit.ly/2DDrTFQ A font that resounds to sound. Play onsite to see how it works. 02. Webflow Ecommerce  webflow.com/ecommerce Animations abound. Scroll down to see the magic unfold. 03. Playground  bit.ly/2GuCdlR Discover the delights of 3D in this interactive game. 04. Oncode Institute  momkai.com Transition animations with a touch of the out there. Graphics Gibberish Worlds 6 bit.ly/2GRjRie Collection of surreal illustrations from the very talented hand of Ori Toor. Colour picker Cool Kids bit.ly/2H3aAl5 Typesetter Zesta bit.ly/2H5dJAX Zesta is a family of high-contrast serif fonts, intended for use in display typography. WordPress StuffPost bit.ly/2uE9rOd A strong contemporary WordPress theme that’s perfect for news-led sites.…

“Shared hosting would seem to have a major advantage – cost. But the downside is that it may have limitations that become more apparent as time goes by” To have a live website on the internet, you’re going to need web hosting, but of the two most common hosting choices today – cloud hosting and shared hosting – which one is the best for your business? So, what’s the difference? Put simply, cloud hosting is a service that is dedicated to you, while shared hosting means that you have to share the server resources with other users. At first glance, shared hosting would seem to have a major advantage – cost. But the downside is that it may have limitations that become more apparent as time goes by and requirements…

A uniquely vital element of the PopCorn TV project was in its use of music, something that doesn’t always feature much beyond a background loop. The creative team in this instance applied high production values, befitting the classic show references hidden in the quiz itself. “The other big creative challenge was to create an original approach to sound design that would reinforce a universe steeped very much in nostalgia,” explains Creative Designer and Art Director on the project, Romain Zitouni. “So here we chose the synth wave genre, a musical trend inspired by the retro sounds and electronica of the 1980s. This lead to a total of six incredible tracks being composed especially for the game by the very talented Eric ‘Elvis’ Simonet.” In fact, fans of PopCorn TV will…

2011 FX Digital incorporates as Juicy Webs and begin operating from Matt’s family home. Employees: 2 2013 Outgrowing the family home, Juicy Webs moves into a small office in the Truman Brewery. Employees: 2 2014 Juicy Webs change its name to FX Digital and welcomes Ben and Joy on as its first employees. Employees: 4 2015 FX Digital outgrows its original office and move to a bigger space in the Truman Brewery. Employees: 5 2016 Mission Control and Census One websites launched with WebGL experiences. Employees: 5 2017 FX Digital outgrows its office yet again and moves to a bigger space in the Truman Brewery. Hugely successful launch of PrimeResi membership website. Employees: 7 2018 FX Digital moves into the fast lane winning a key account. Employees: 11…

Dark Pattern Library darkpatterns.org/ Dark Patterns are tricks used in websites and apps that make you buy or sign up for things that you didn’t mean to. The purpose of the Dark Pattern Library site is to spread awareness and to document the companies that use such techniques. Government Research Consent Guidelines bit.ly/2uhg2fo The UK government website contains an entire manual on service design and the consent forms you need signed to ensure you can be trusted with a person’s data gathered during user research. Figma figma.com Figma is a browser-based design tool that makes it easier for teams to create software. Present and prototype in the same tool as you design. Version control your team designs. Float Team Schedule float.com Float enables you to visualise your team’s project assignments,…

React is one of the most popular JavaScript frameworks in use today. Created by Facebook to help it build user interfaces, React brings simplicity, speed, and scalability to web projects. In this tutorial, we’re going to use React to create a simple modal component, which is optimised for both desktop and mobile devices. To enhance the modal, we’ll be using React’s relatively new and very useful portal functionality, which enables us to render an element outside of the DOM hierarchy of its parent component, whilst still behaving like a normal React child. To begin, download the tutorial files from Filesilo, then open the ‘website-template’ directory in your preferred text editor. In Terminal, ‘CD’ into ‘website-template’ and then run ‘npm install’ to install all of the project’s dependencies. We can then…

1 Use layers Adding foreground, mid and background objects will add depth and enhance the composition of your scene. Camera motion with these layers of depth will really make your animation stand out. 2 Use Depth of Field In film and photography lenses are used to great effect. By narrowing your focus to your area of interest you can capture this look. You can use post-processing shaders to help, based on distance form camera. Or you can simply blur out textures and objects manually at depths that are close or far away, depending on your scene 3 Use ambient effects Although they can come at a cost of processing power, ambient effects are a great way to add depth and interest to your scene. Dust particles, film grain or noise,…

“THE GOOD NEWS IS THAT, IN TERMS OF LANGUAGE SYNTAX, JSX ITSELF IS A VERY STRAIGHTFORWARD EXTENSION OF JAVASCRIPT” MEET REACT Unless you’ve been marooned on a desert island for the last few years, you’ve probably heard of React. Created by Facebook in 2013, it remains to date arguably the most popular front-end framework. Like most other current frameworks, React enables you to create modular web apps using ‘components;, which makes it much easier to build and maintain large scale apps. Unlike some other popular frameworks, like Angular, React is focused only on the user interface (the ‘view’ in an MVC framework). In years gone by, one of the major challenges with web development was managing the complexity as projects grew larger. The lack of a straightforward module system, and…

“Premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK” Featured host: Netcetera netcetera.co.uk 03330 439780 About us Formed in 1996, Netcetera is one of Europe’s leading web hosting service providers, with customers in over 75 countries worldwide. As the premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK, Netcetera offers an array of services designed to more effectively manage IT What we offer • Managed hosting – A full range of solutions for a cost-effective, reliable, secure host. • Cloud hosting – Linux, Windows, Hybrid and Private Cloud Solutions with support and scalability features. infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions.…

Essential assets and resources Get textures, fonts, backgrounds and more Exclusive video tutorials Learn to code/create with HTML, CSS, JS & PHP Tutorial project files All the assets you’ll need to follow our tutorials Plus, all of this is yours too... • All-new tutorial files to help you master this issue’s HTML, CSS and JavaScript techniques • Over 79 minutes of Beginners JavaScript video from StudioWeb (www.studioweb.com) • 14 pink Photoshop filters and 10 wooden picture frame mockups from Sparklestock (www.sparklestock.com) Log in to www.filesilo.co.uk/webdesigner Register to get instant access to this pack of must-have creative resources, how-to videos and tutorial assets Free for digital readers, too! Read on your tablet, download on your computer The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe…

“ Over the next year, expect to see inclusive and ethical design become an expected part of the UX Design process” Laura Yarrow Laura is a UX architect at Bournemouth-based agency Experience UX. With a background in web development and a love of new technology. This issue Laura shares the future themes UX practitioners will find themselves designing for, and the tools that will support their work. Page 42 Simon Jones Simon leads software engineering teams working with a variety of frontend technologies, including React. This issue, he covers the basics of how React, and associated technologies like JSX, can help you build web apps. Page 74 Mark Shufflebottom Mark is a Professor of Interaction Design at Sheridan College and is also an Adobe Education Leader. In this tutorial, Mark…

Airplane Toggle bit.ly/2Eep2Ue Toggle switches with added character can say so much in such a small space. This is a great example of the art. Transforming Nutrition Facts bit.ly/2H36Y2i Who would have thought that labels could be so interesting. This codepen demonstrates how to reformat information for different shapes and sizes. 3D Hex Mosaic bit.ly/2q3Dfyr A large image is overlaid with a maze of hexagons that move in the direction of the cursor and reveal more on hover. Sausage Factory bit.ly/2H4O5vV The power of ThreeJs is keenly demonstrated here with shaders in what looks like a giant sausage factory. The Big Bang bit.ly/2H1rWyx GPGPU particles using texture caches for position and velocity. Take a look – it looks even better in action.…

Design for inclusivity Understand the diverse range of users needs Sometimes referred to as ‘Universal Design’, inclusive design considers as many people’s needs and abilities as possible, instead of a ‘one size fits all’ approach to the experience. As designers it can be easy to unwittingly design for those that are just like ourselves, or prioritise these considerations due to tight budgets or deadlines. As designers we should be aiming to include people with varying ranges of cognitive or physical disability, rather than exclude them. Designers should do this by removing the barriers that create extra effort and separation, enabling the end user of your product or service to have the confidence to participate equally, and without support. Over the next year, expect to see inclusive and ethical design become…

Axure axure.com Create simple click-through diagrams or highly functional, rich prototypes with conditional logic, dynamic content, animations, math functions, and data-driven interactions. Use Axure Share to upload content to share with your team. Asana asana.com Asana is an online project management tool, designed to help teams track their work. Asana gives you everything you need to stay in sync, hit deadlines, and reach your goals. MockFlow mockflow.com MockFlow provides a full solution for design teams, which includes wireframing, sitemaps, UI spec systems, design workflow and more. Enables you to plan and create better user interfaces together within a single suite. Storyboard That storyboardthat.com Storyboards are a fun and engaging way to relay research findings and user journeys to stakeholders. Use their extensive image library and flexible templates to create storyboards…

With the rise of social applications, a big part of their popularity has been their built-in photo manipulation tools. Instagram has become synonymous with filters and more recently social apps have capitalised on the rise of Augmented Reality to recognise faces in images and to overlay props on various facial features. This has been hugely popular among users and a contributing factor in the mobile success of certain apps. In this tutorial, an app for creating photos with face detection will be created running in the web browser. The facial recognition is added using the clmtracker (constrained local models tracker) library and then props will be added to the face using P5js to manipulate the HTML5 canvas. The clmtracker recognises 70 unique points on a face giving access to the…

1 Optimise your model Reducing your model to the lowest number or vertices and faces is always going to improve the performance and give more cycles to work with. Remove interior geometry if it’s not visible, remove anything the camera will never see. Use optimisation tools like MeshLab (http://www.meshlab.net) for best results. 2 Bake in detail Incredible amounts of detail can be simply baked into the texture that covers the mesh. The earth from space looks like a sphere, and the textures can be highly detailed, giving the illusion of terrain and depth, where the surface is actually smooth. Multiple textures, or reusing geometry at slightly different scales and transparency can yield beautiful results. 3 Bump maps for surface details Bump maps provide incredible detail by using a texture instead…

We’re going to be creating the layout for a page that includes a newsfeed and a little chat box in the corner. To do this we’ll leverage the following features to create a better experience and work around some issues. You’ll need Chrome 65+ or Firefox 59+. There is a repo to accompany this tutorial which contains the step-by-step code: https://github.com/danielcrisp/hot-new-css-features 1. The HTML for the newsfeed First we need to set up some super simple, repeating markup for our newsfeed. Let’s create a ‘.container’ div with an unordered list inside. Give the ‘<ul>’ the class of ‘.feed’, then create 10 list-items each containing a div with the ‘.card’ class and the text Card 1, Card 2 etc. Finally create another list-item in between 5 and 6 with a class…

01 Follow the instructions on screen to create an account with our secure FileSilo system. Log in and unlock the issue by answering a simple question about the magazine. 02 You can access FileSilo on any computer, tablet or smartphone device using any popular browser. However, we recommend that you use a computer to download content, as you may not be able to download files to other devices. 03 If you have any problems with accessing content on FileSilo, take a look at the FAQs online or email our team at the address below. filesilohelp@futurenet.com…

Kerning 2018.kerning.it A two-day conference (with two days of workshops) in Italy and dedicated solely to typography and web typography. UX Scotland uxscotland.net/2018 A hands-on, practical UX & design conference where participants can connect and learn from their peers. CSSDay cssday.nl/2018 Head to Amsterdam for two days of CSS and UX insight from leading experts, including Vitaly Friedman and Sara Soueidan. An Event Apart bit.ly/2D70LAt A host of well-known speakers focusing on digital design, UX, content, code, and much more for three days. Webinale webinale.de/en A five-day event in Berlin aimed at digital professionals, trendsetters and web makers with over 70 speakers.…

Beginning as a hobby in 2010, co-founder Matthew Duhig was at The University of Southampton when his sister asked him if he could create a website for her new bridal business. “Although confident that I could build the site my design ability was a bit limited, so I asked my school friend Tom (Smith) to design a logo and layout, Matt explains. “He was, at the time, studying Computer Animation at Portsmouth and gladly accepted the challenge.” “After completing the design and build my sister started recommending us to businesses that she would meet on her travels. It wasn’t long before we had our second gig. We were delighted to be given the opportunity to develop a site for another local bridal company and were going to be paid £300!…

A-Frame aframe.io A-Frame is a web framework for building Virtual Reality (VR) experiences. Originally developed by Mozilla, it is an independent open source project. A-Frame is HTML, making it simple to get started. Microsoft HoloLens microsoft.com/en-gb/hololens Microsoft’s ‘mixed-reality’ product, HoloLens, is the first self-contained, holographic computer, enabling you to engage with your digital content and interact with holograms in the world around you. Funkify Disability Simulator funkify.org Funkify is an extension for Chrome that helps you experience the web and interfaces through the eyes of users with different abilities and disabilities. Funkify is created by a team of usability and accessibility experts in Sweden. Stark getstark.co The colour-blind simulator and contrast checker for Sketch. Simulate the various forms of colour-blindness by quickly previewing your Sketch designs and make adjustments as…

BotPreview botpreview.com Sketch and design your own chatbot interactions using the BotPreview online editor and share them or export as static HTML or MP4/GIF video, without writing a single line of code. Botsociety botsociety.io Design voice and chat interfaces using the online web editor by quickly building a high-fidelity preview of your next chatbot or voice assistant. Botsociety takes care of the appearance, the platform limitations, the preview, the export and the user testing for you. Botmock botmock.com Botmock uses a drag-and-drop editor with templates to build prototypes of conversational design. Map out the customer’s journey, and create a live preview that can be exported to GIF and video. Bots UI Kit for Sketch bots.mockuuups.com A simple and fully customisable Sketch UI kit to help you design and showcase your…

The first page that your visitors land on in your website has a significant influence on their subsequent actions in the website. On the one hand, it may influence them to navigate to other pages or undertake specific actions such as clicking buttons; while on the other, it may put them off, causing them to leave the site. As such, it is important to ensure your landing page appeals to your visitors in order to influence their latter decisions. One way to achieve this feat is to implement interactivity using a particle system. Such a system comprises of a lot of tiny particles moving about in the page. The particles interact with one another in addition to responding to user actions such as mouse movements and mouse clicks. This tutorial…

“Every image, every scene, can tell a story. Advanced WebGL now enables photorealistic, interactive rendering that can reach mass audience through the web without plugins. It’s an exciting time to be in web development and VFX”Richard Mattka Award-winning interactive director, author, VFX artist Explore alien landscapes, underwater worlds or ancient gauntlets. Interact with life-like models that speak and react as you engage with them. Build beautiful cinematic sequences to launch into a new game or website. Learn the latest features of a new computer by viewing it from every possible angle, or dive into an exploded view. Imagine a site for a new car, where you could examine each part in as much detail as you wish, then watch it reassemble before your eyes. Turn on your VR headset, get…

1 Use performance stats tools Three.js and other WebGL libraries include performance measuring tools (stats.js). You want to aim for 60FPS as often as possible. Smooth performance depends on minimising per frame computations. Keep an eye on your performance and the end result will be silky smooth. 2 Simplify geometry Use built-in geometries where you can. If it’s a planet try using a sphere and bake in surface details into the bump map and textures. See how much you can reduce the segments or polygons as well and maintain a good look. Also try to use buffer geometry and reuse geometry whenever possible – this will reduce draw calls and boost performance. 3 Reduce lights Light computations are expensive. Shadows as well. Try to reduce the calculations required to cast…

As developers, we sometimes take CSS for granted. By changing a couple of properties, we can change the look of an entire website. Browser vendors are doing a lot of work on our behalf to get to that point. But as new CSS features come out, it can be a while until we get to use them for production sites. Users with old browsers will be stuck with a downgraded, progressively enhanced set of styles that do not look as good as those in modern browsers. Houdini is set to change all that. It is a collection of draft specifications that gives developers access to some of the behind-the-scenes magic provided by CSS. Once all the specifications are complete, developers will be able to use JavaScript to determine how aspects…

“No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks” Featured: Northcoders northcoders.com Twitter : @northcoders Facebook: Northcoders About us Northcoders is the coding bootcamp for the north, based in the heart of Manchester and built upon northern values of grit, determination and community spirit. No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks at their full-time bootcamp, or fit their course around your life with their 24-week part-time bootcamp. Their internal career support team will help find you work as a developer, setting up interviews with your choices of Northcoders Hiring Partners across the north of England. What we offer • Full-time: Fast-track your career in just…