Innholdsfortegnelse for No. 275 i Web Designer

“Sounds create the mood and set the pace of an interactive experience. Music enhances the suspense, and ramps up the intensity” 50 tools to make you better Every designer and developer needs the right tools in their creative and/or coding arsenal. The pros know all the best tools to use and that’s exactly who has chosen our collection for this issue’s lead feature. There is a cornucopia of talent that will make your everyday workflow, faster, easier, and, quite simply, better. Included in the line-up are 50 of the best prototyping and build tools, frameworks, colour tools and fonts, web animation, methodologies and testing, IDEs, code playgrounds and must-try browser extensions. Have a good look through the collection and see what fits your workflow. Audio and sound are crucial elements…

01. Amazonia Font amazoniafont.com Inspired by the exotic wildlife of the Amazon. Choose from the alphabet for more. 02. Barovier & Toso barovier.com/en Typography speed effects, plus stretch and snap image effects. 03. Célia LOPEZ celialopez.fr Multiple scrolling backgrounds, 3D objects, interactive expanding backgrounds. 04. Prince discography princeestate.com A simple pop-up window on hover presents music, images and video from the maestro. Graphics Robert Romanowicz bit.ly/2K5bgqc Gorgeous illustrations from the very talented pencil of Robert Romanowicz. Colour picker 05.05.18 bit.ly/2I8dUeu Typesetter Scotch bit.ly/2wrLw5D A clean, modern serif font that offers a nod to a historic past. Great for headlines. Word Press Kings and Queens kingsqueens.ancorathemes.com A simple, straightforward single-page theme with neatly themed sections. Includes eCommerce options.…

“Every store you visit, whether online or IRL, should represent a wholly unique experience. An experience infused with brand attributes in everything” It’s 2018. We’re at the height of innovation — and tomorrow will see us reach all-new heights. Technologies like self-driving cars, true artificial intelligence (AI), anthropomorphic robots, and privatised space travel are all right around the corner. They’re so imminently possible that we’re already seriously considering how these technologies stand to completely transform our civilisation. The state of eCommerce, on the other hand, seems mired in the past — 1997, to be exact. A prime example could be the comparison of a couple of reviews of top eCommerce platforms. Back in 1997 CNET ran a review stating: “For people who’ve been hanging back wondering if they should put…

What’s the story behind Semplice? How did it come into existence? My co-founder, Mike, and I originally built Semplice for our personal portfolios. We were dreaming about a perfect design portfolio, completely customised with beautifully branded case studies for each project. No other portfolio tool out there offered what we needed, so we built it ourselves. We imagined other creatives felt the same way; as a designer you have a specific vision for your portfolio, but not necessarily the time or coding knowledge to make it happen. With Semplice, you can make it happen. What sets Semplice apart from other portfolio builders? Many portfolio builders are focused on maintaining the status quo with trendy templates. Semplice is focused on building with pride. You have the freedom and power to create…

As we know, a strong defining factor for the production process of the ‘When to Travel’ project has been the connection between client and agency. It’s clear from speaking to them that Green Chameleon takes considerable pride in the on-going working relationship it enjoys with Inside Asia Tours, partaking in a variety of campaigns and projects. “We’re always thrilled when they come to us with a new brief as their in-depth knowledge and passion for travel makes working with them and coming up with concepts a real pleasure,” enthuses Design Director Nathan Riley. “The focus of this last project was always in highlighting IAT’s expert knowledge of the locations and the events that take place there, so working closely with them to ensure this was always kept at the forefront…

2003 Wefail is founded. Our first Flash site (http://archive.wefail.com/wefail/)launches our careers. Employees: 2 2003 Bob was our first client and we still work with him today, a lovely man. Employees: 2 2005 The handsome photographer Matthew and our infamous zoom engine. Employees: 2 2007 Two people and a three-week deadline, a tough job, but one we wanted to pull off. Employees: 2 2011 Our hipster platform game that gained six-million users on launch. Employees: 3 2012 A puzzle site linked to American Horror Story. Users had to unlock each section room-by-room. Employees: 3 2013 Monster’s Socks was our first app. It won best children’s fiction at the BolognaRagazzi Digital awards. Employees: 3 2015 The Ratboy HTML5 interactive site built for mobile and desktop. Employees: 3 2016 Our HTML5 game. Swipe…

Contextual information The background is a project that Mustafa has worked on, as well as the title, there is contextual information on the role he undertook for that project. On screen navigation To the left and right of the interface are quick links to ‘about’ and ‘contact’ which are commonly sought-after information. Ripple effect Every time the user moves their mouse, the image in the background ripples and distorts in real time, instantly drawing attention to the movement. Direct to the work If you would rather have a simpler interface then the work is on display in a simple list style from this menu. Change the slide The up and down arrows at the bottom of the interface allow the image slide to change and the ripple effect is used…

Animation applied to user interface elements have now become much more prominent and are no longer the delightful surprises they once were – now, they’re expected. The explosion of prototyping tools in the past few years has given web designers an opportunity to create detailed interactions and animations. These tools also give us an opportunity to learn new ideas and understand the purpose of the animation without getting to heavy. However, in front-end development, DOM elements can now be easily animated using CSS, and together with JavaScript and SVGs, you can create some amazing UI animations. So in this tutorial we will create a couple of UI elements for a fictitious restaurant and give them a nice hover effect that will include SVGs, CSS animations and a jQuery plugin that…

The website, https://threejs.org presents numerous real world applications detailing how the library is used in creating different visual effects. Additionally, a link further below in the site, (https://threejs.org/examples), provides access to diverse examples that you can learn from. However, it may appear daunting at first before you get to know your way around. To help you get started, click the very first example https://threejs.org/examples/#webgl_animation_cloth. This is the animation that you will see.…

Sounds are able to create powerful reactions on deep, instinctive levels. A baby’s cry can set a new parent into action without conscious thought, a sharp warning hiss of a snake can trigger adrenaline, and hearing that favourite song on the radio might bring a smile before you realise it. Scientists and thinkers have been pondering the relationship between sound and emotion for thousands of years. Modern day neuroscience has uncovered amazing insights into the relationship between our ears, minds and emotions. Deep within the brain, in the Amygdala, we processes memories and emotional reaction, while the Hippocampus controls behaviour and helps form memories. Within these most primal sectors of the mind, responses are triggered when we hear sound. Breathing, heart rate, brainwaves and hormone secretions are continuously affected by…

HTML <audio> The HTML <audio> tag allows you to embed music on websites and apps. Similar to the <video> tag, you can specify a source file, controls and several other options. This allows you to easily add audio to your page with minimal code. You can then target the element via JavaScript to give further control. It supports MP3, WAV, OGG and other formats, with MP3 being universally supported across modern browsers and devices. A simple example of using the <audio> tag: Some handy attributes specific to the element include: • Autoplay – to allow the audio to play once it is ready • Controls – controls for the audio file will be included on the page • Loop – if this one is included, the audio will loop and play again once…

While the audio element allows you to include plugin-free audio on your site, it is still limited. For maximum sound control, the Web Audio API allows you to generate sounds, play exist ones, create effects and much more. In this example you’ll load and play a sound file using the API. 1. INITIALISE THE AUDIO CONTEXT To start we need to set up our Audio Context, an audio canvas for our sounds. This method ensures maximum cross-browser support and fallback in case the API is not supported. A single audio context supports multiple sound inputs and complex audio graphs, so you only need one for each audio application we create. 2. CONNECT THE AUDIO GRAPH Any audio node’s output can be connected to any other audio node’s input by using…

MDN Web Docs - Web Audio API https://mzl.la/1ioq44h An in-depth look into the API with rich documentation and examples. Every aspect of the API is well covered. W3C - Web Audio https://bit.ly/2HM83z9 A repository containing the latest editor’s drafts of the W3C Web Audio API. This is the source where the standards are presented. Introduction to Web Audio API https://bit.ly/2jlgRgR A good introduction to using the API to create sounds by Greg Hovanesyan. Create a music-specific application using the oscillator audio source. Web Audio Weekly www.webaudioweekly.com A collection of news, stories and demos all about the Web Audio API. Covers a wide range of topics and examples to keep you learning.…

“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 12…

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 107 minutes of Beginners JavaScript video from StudioWeb (www.studioweb.com) • 6 Gold clothespin-style card mockups and 14 Midnight Photoshop filters 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 readers for digital too! Read on , tablet download your on , your computer great downloads – exclusive to your favourite magazines from Future! Secure and safe…

Everything you need to know about accessing your FileSilo account 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…

1. Visual content editor Semplice is built on WordPress, but you won’t see the WordPress CMS. The visual drag and drop content editor provides a live view of your page as you create it. 2. Mobile ready Your Semplice site is responsive by default, but you can also adjust mobile breakpoints straight from the desktop editor for seamless presentation at any screen size. 3. Fully brandable Nothing is off limits with Semplice. Every element of your portfolio is customisable, from navigation to button style to footer. You can even upload custom fonts. 4. Animations and transitions Add page transitions or motion to any piece of content. Choose triggers (on load, click, hover or scroll) and effects to create an elegant and interactive experience. 5. Efficient workflows Create site-wide presets for…

If you have your own portfolio site, you have probably spent more than your fair share of time trying to bring images of your work to life, making them interactive in some way that gets the attention of the user so that they want to explore the content further. Direction-Reveal is a small CSS and JavaScript library that will really help out any kind of portfolio that requires image and description formatting. In this day and age nearly every site has some sort of interaction on a page before you actually click through to the content. The way Direction-Reveal brings a novel approach to this problem is by grabbing the direction that the user’s mouse moves over the image. It uses this to trigger an animation, from the side that…

Poorly supported and largely ignored for most of the 2000s, in 2017 all modern web browsers can render SVG – and most vector drawing programs export it. SVG is the one graphic format that most closely responds to current web development demands of scalability, responsiveness, interactivity and performance. SVG is an XML language and file format, which allows you to code two-dimensional graphics that scale and can be manipulated via CSS or JavaScript. All SVG graphics are plotted on a coordinate system of at least an x and y axis. When authoring SVG, we give the browser instructions on where to plot points on the coordinate system and connect them. By connecting the plotted points we can create shapes, lines or paths. The <svg> tag allows you to add in…

“Sound, even more than visuals, is capable of making our mind believe we are in another world. It communicates on a deep level, directly tapping into our brains.” Sound is a critical element when making experiences engaging and compelling. If you need proof, try playing your favourite game or watching your favourite movie with the volume off. Ambient city noises, distant sirens, and low rumbling hums, drop you into the scene, even without the visuals. Sounds create the mood and set the pace of an interactive experience. Music enhances the suspense, ramps up the intensity, and ultimately triggers an emotional response, much more powerfully than visuals alone. Sound is capable of transporting us to another world as it communicates on a deep level, directly tapping into the brain. Psychology studies…

MP3 A compressed or ‘lossy’ format. Audio data is compressed and optimised for size and bit rate. This is the format you want to be using as often as possible. WAV The WAVE container format is an uncompressed audio file. Much larger sizes typically. Files in the WAVE container format typically end with the “.wav” extension. FLAC Uses lossless compression, meaning silence does not take up file space, but the uncompressed audio is retained. Larger file size, (smaller than wav), and not as well supported. Ogg Theora Vorbis Supported in desktop/ mobile Gecko (Firefox), Chrome, and Opera. Support can be added to Safari (but not on iOS) with an add-on. The format is not supported in IE in any way.…

Howler.JS https://howlerjs.com A solid, audio library for the modern web. A solid cross-platform solution, for managing multiple sound effects easily, with good documentation to get started quickly. Includes a wide range of file support, use of audio sprites, spatial audio for 3D experiences, automatic caching and has no dependencies. Pizzicato.JS  https://alemangui.github.io/pizzicato Another well documented Web Audio JavaScript library. Pizzicato has a simple set of methods for creating cool effects, using sound inputs, and managing sound files. Compressors, stereo panning, tremolo, reverb, flanger and many more effects are included, to start creating cool effects out of the gate. SoundJS https://createjs.com/soundjs SoundJS by Grant Skinner. A JavaScript library that provides a simple API, and powerful features to make working with audio extremely simple. Designed with cross-browser support in mind, it gracefully falls…

Angular Camp angularcamp.tech A two-day developer-driven conference and one-day workshops, brought to you by the community. ScotlandJS scotlandjs.com Want to learn about JavaScript and get a bit of whisky and gin tasting in as the same time? Then sign up now. Design & Content content.design A conference where designers and content strategists team up. Get a day of workshops and two days of talks. FullStack 2018 bit.ly/2G0pw12 Get three intensive days of learning and sharing from 68 experts who’re keen to pass on their skills and knowledge. Curry On 2018 curry-on.org/2018 Set in Amsterdam, Curry On is ‘a conference focused on the intersection of emerging languages and challenges’.…

Phase bit.ly/2Ia0heN In a band? Want to start your own record label? This theme has all the elements needed to make it happen. Buzznote bit.ly/2IuQiny A minimalist and easy-to-use theme. Big imagery coupled with serif and sans serif fonts equals a good-looking blog. Brewski bit.ly/2K8kWQW A bar-and-beer themed theme with big landing page images, neat animations and a shop layout for selling your beers. Benri bit.ly/2Ia0kat Not quite sure what you want? This multi-purpose theme has a host of layouts to choose from and is fully customisable. Baroque bit.ly/2jLmiWA An architectual-based theme with a fullscreen image slider. Big, bold typography and a clean design complete the look.…

The period after development and delivery of ‘When to Travel’ revealed a curious additional challenge for taking the project live. As part of Green Chameleon’s agreed service remit and relationship with client Inside Asia Tours, the campaign sites are actually hosted on GC’s own servers. This is because each, including this one, are all built with different frameworks and technologies that are separate to IAT’s main commercial website. “So one of the challenges faced here was the setup of a reverse proxy, which is essentially a set of server rules that allow users and search engines to see the campaign site as part of the IAT domain and therefore gain all of the SEO value generated, even though it is hosted somewhere else,” explains Tom Anderson, Creative Director. “This approach…

When we first started this project I really couldn’t see the end. A 20-minute music video built with illustrations we had to put together in-house before animating in AnimateCC and setting up camera rigs, 3D rotation and depth of field all in 5K. To make it harder on us we also decided to base the whole thing on a stage in a theatre, so the animated lullaby stories would be based within a parent environment of a theatre full of people. On top of that we’d also rotate the stage, so the camera floated around to the backstage view, which meant designing both a front and a back view for hundreds of moving pieces. We never make things easy for ourselves and halfway through I felt like we’d never complete…

PROTOTYPING AND BUILD TOOLS BIG HITTER 1 INVISION invisionapp.com InVision offers a way to string together individual static designs in order to create user flows. The tools are simple and easy to use, and allow syncing directly from Photoshop and Sketch before linking designs together. With powerful collaboration and comment features it’s clear to see why so many designers use it. FREE WITH PAID PLANS MUST TRY 2 FIGMA  figma.com Figma touts some impressive features, but the browser-based editor and cloud saving is the difference between most other design and prototyping tools. Figma 2.0 introduced new prototyping tools, bringing the abilities of multiple Adobe apps into one desktop and browser-based tool! FREE WITH PAID PLANS 3 MARVEL  marvelapp.com Marvel, much like Figma, provides an all-in-one experience for design,…

You may be wondering exactly how this works on a mobile or tablet device, given that there is no mouse to rollover the image. In step 14 the ‘enableTouch’ option is set to true; do this on all images that you want to work on mobile. The way it works is that to enable scrolling when the user flicks, there is a threshold that it will wait for before triggering the animation. The default is 250 milliseconds, so when a long press is detected the animation will happen. That’s the first part. If this is a link then the user needs to be taken to a link. Tapping a second time will fire the link and thus take the user to a new page. Because Direction-Reveal has thought about the…

SITES Freesound  https://freesound.org Freesound is a collaborative database of Creative Commons Licensed sounds. You can browse, download and share sounds. SoundJay  www.soundjay.com Library of free sounds you are allowed to use on your website, free of charge and royalty-free in your projects. Partners In Rhyme  www.partnersinrhyme.com Free and royalty-free music and sound effects. ROYALTY-FREE Pond 5  https://bit.ly/2JKstFb One of the world’s largest collection of royalty-free stock video and creative assets, sounds and music Premium Beat  www.premiumbeat.com High quality curated royalty-free music library, organised nicely by genres and moods. Audio Jungle  https://audiojungle.net Massive library of royalty-free sounds and music from $1. LICENCED Sound Stripe  https://soundstripe.com Membership model, for unlimited licenses for songs in large, curated music library.…

Paper Planes https://paperplanes.world Catch and throw Paper Planes with people around the world, using the power of the web sockets and connections. Discover your Patronus https://my.pottermore.com/patronus This experience transports users into a Harry Potter-inspired 3D environment, rich with sound and beautiful FX, eventually discovering their Patronus. The War of 1996 www.warof1996.com An incredible use of the custom sound FX as President Whitmore’s powerful speech combines with music from Independence Day for a unique audio experience.…

1 Offline support The headline feature of service workers is that they allow you to build pages that work offline and with intermittent network connection, by serving up content from a browser cache in the manner of your choosing. 2 Speed Nobody likes waiting for a page to load. Loading content from a cache is nearly instantaneous, and because you can control caching at a granular level, service workers allow you to take advantage of this without risking showing stale data. 3 Native features Because they run in the background, service workers let you do things you take for granted in native apps but couldn’t previously do on the web. Push notifications and background synchronisation are two examples of this.…

“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 infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions. Providing an unmatched value for your budget is the driving force behind our customer and managed infrastructure services. From single server to fully customised data centre suites, we focus on the IT solutions you…