Innholdsfortegnelse for No. 260 i Web Designer

“According to this interactive New Year’s greetings card from digital dreamers Make Me Pulse, “Great ideas are made to be experienced”” 2017.makemepulse.com Designer: Make Me Pulse – makemepulse.com Development technologies HTML5, JavaScript (Cannon.js), SVG, WebGL…

PROJECT CAMPO ALLE COMETE WEB CAMPOALLECOMETE.IT/#!/EN AGENCY AQUEST WEB AQUEST.IT/EN PROJECT DURATION 4 MONTHS Where’s the wine? After a cursory glance at the Campo alle Comete site you may be wondering exactly what we are talking about. Campo alle Comete is an enchanted 3D world filled with sea, cypresses and perfectly matched sounds. The soothing soundtrack and subtle swaying animations mesmerise the viewer and compel them to explore deeper into the fairytale dimension that lies before them. The viewer will still be wondering what lies ahead, but they will not be able to resist the urge to do as they are told and ‘Drag to Discover’. Capturing a viewer’s attention is a key component in the process of getting them to stay and explore further. And this is exactly what…

With the recent repositioning, restructure and agency rebrand, the Greenwood Campbell website needed to not only emphasise Greenwood Campbell’s new identity but also put us on the map as a highly skilled and vibrant agency. The objective of the website was to be a skilled and engaging experience, encouraging new client opportunities and growth – which as a result increased brand awareness, traffic and engagement with the new Greenwood Campbell brand. The site features a virtual tour of the Greenwood Campbell studio, providing a fully immersive and engaging user experience while showcasing the culture, team and ethos of the agency. It boasts rich media, high-quality imagery and imaginative content, targeting leading brand marketers and business owners. Personalisation makes this site really special, tracking user behaviour and adapting the experience to…

LV= wanted to test whether their customers would purchase life insurance via a mobile device. From kick-off to completion including user research, designs, testing and prototype presentation, the project needed to be completed within a six-week timeframe. With a pure focus on UX, the project outline was to design, develop and test a series of prototypes for LV= customers. The challenge was to produce a mobile experience, which acted and behaved as a native mobile app. In order to optimise the conversion rate, we needed to streamline the number of steps involved in purchasing life insurance, while keeping UX at the heart of the project. The project consisted of four key stages – wireframes, design, HTML and testing. Our understanding of the psychology of users meant we knew certain elements…

EMMET.IO   emmet.io THE ESSENTIAL TOOLKIT FOR WEB DEVELOPERS Most text editors allow the re-use of frequently used code snippets. While snippets are a great way to speed up development, all implementations have common issues. Emmet takes the snippets concept to a whole new level. Dynamically parsed CSS-like expressions can be input, which produces an output depending on what is typed. Emmet is developed and optimised for web developers, but can be used with many programming languages. 01. Create elements Emmet is a plugin for a wide range of text editors like Atom and Sublime Text that allows developers to save time writing HTML. It’s great if you need to, for example, create a div with a class, using the command ‘div.classname’. 02. Create a document The ‘html’ command enables…

codepen.io CodePen is a fantastic tool for testing out bugs, collaborating and finding new inspiration. It’s very much the Pinterest of code. It works by allowing coders to create ‘pens’, which are sets of HTML, CSS and JavaScript. These can then be displayed in a profile, can collect feedback, and edited at a time that’s suitable. CodePen includes some great features to help write CSS faster than a standard IDE. Not only is CodePen the perfect place to test front-end code, it consists of some of the most talented and exceptional coders around. Developers can work collaboratively as a team from any environment, whenever they want to, with a great emphasis on positive encouragement and learning. The community is friendly and supportive, always moving towards the goal of a more…

WORKING WITH LAYOUTS In this section we will look at how the layout is assembled in Photoshop CC Once the final illustration has been imported into Photoshop CC as Smart Objects, one final process should be completed. Texture will be added into the illustration as a means of countering the flatness of vector shapes in order to create additional depth and visual interest. This can be When the illustration is complete the typographic approach needs to be developed. The typography plays a big role in the website’s readability and legibility. Since the illustration acts as the main feature of this particular website, the typography selected was minimal and simplistic. When applying typography it is important to structure the type according to a hierarchy. This is achieved by playing around with…

Custom post types are a powerful feature in WordPress that can streamline your administration process and organise your content into groups when other taxonomies aren’t distinct enough. Used in combination with post metadata, templates for archives and single-page templates, you can add detail to your front-end content while maintaining a sleek, accessible and user-friendly admin panel. Post types are primarily used for content that is semantically different to the rest, typically when the item can be set in a particular format like recipes or tutorials. In this tutorial, we’ll be using events as an example. An event always has a date, time and location, and while you could publish them as normal posts and assign a category to distinguish them from the other posts, the administration process can eventually become…

Essential assets and templates 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 • 180 minutes of expert JavaScript videos from Pluralsight (www.pluralsight.com) • 34 watercolour textures and elements from Go Media • 20 grunge textures from Jacobson Design Shop 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 The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online access, from anywhere Free access for every reader, print…

“Manchester agency Project Simply serves up a beautifully illustrated and colourful HTML extravaganza for Parklife music festival” www.parklife.uk.com Designer: Project Simply – projectsimply.com Development technologies HTML5, jQuery, PHP, CSS3…

1. Document structure Initiate the webpage document by defining its document structure. This consists of the HTML container, which has two sections – the head and body. The head is used to contain descriptive information such as the title, as well as links to external resources. In this case, the head links to the CSS stylesheet. The body is where the visible webpage content is placed in the next step. 2. Page content The page content for our example consists of a navigation containing links, along with a series of sections that correspond to the navigation links. Each of these sections contain a title, which the CSS rules will be set to animate into view when their container section is activated from the navigation menu. 3. Initiate style file The…

who Greenwood Campbell what Digital strategy, user experience (UX), digital design, mobile design, digital marketing, information architecture, front-end development, .NET development, web analytics where Granville Chambers, 21 Richmond Hill, Bournemouth, Dorset BH2 6BJ web greenwoodcampbell.com key clients Dixons Carphone • LV= • Ramsay Health Care • Prostate Cancer UK • VisitScotland Greenwood Campbell (formally IADigital) was launched as a two-man bedroom business focused on .NET development. The two founders, Adam Greenwood and Ian Campbell, started the agency in 2009, having previously worked together at a software company. Here they worked on some amazing projects together, but felt that they could do it better on their own. They began creating their secret business plan behind the scenes – which had to be quickly sped up when Adam managed to get…

“ADOBE EDGE FITS NICELY INTO YOUR WEB TOOLKIT. IT’S SIMPLE TO USE AND THE RESULT OF SOME SIMPLE ANIMATIONS WILL BRING YOUR PROJECTS TO LIFE”Guy Stradling Digital Director thinkingjuice.co.uk THE FASTEST AND MOST INTUITIVE SOFTWARE FOR HTML5 BANNERS Since HTML5 became the default standard for digital display advertising, Edge Animate has made it very accessible for digital production teams to adopt the standards as efficiently as possible. Edge Animate is powerful software that enables the creation of interactive animations for the web. It also provides the tools for digital publishing and rich media advertising, supporting desktop and mobile browsers effortlessly. The UI is very much in line with PS or Illustrator, and the timeline and canvas workspace is very beginner friendly. Edge Animate’s output is generated code using validated HTML5,…

01. Define our colours We can use variables in Sass like we would in JavaScript. Once you’ve determined which colours your project will use, we’ll create variables for each of them. We define variables with a dollar sign. 02. Creating the map A Sass map is a lot like an object in JavaScript, or any other key-value store. It’s very useful for utility classes like padding, margins, font sizes and so on. In this instance we’ll be creating colour classes to style text. The map you’ll see on FileSilo contains the colours we just defined. 03. The loop We’re going to loop over our map with an ‘each’ loop, using the key as the class name. For each row in our map we should end up with a class, for…

HOTJAR   hotjar.com Understanding how consumers use digital assets like websites is the most critical aspect of being a professional within the digital industry. It’s crucial to appreciate if a beautiful design is actually performing. Looking great but killing customer journeys is madness for any brand. By not measuring real users’ interactions, opportunities to convert them into loyal, profitable customers are overlooked. BALSAMIQ MOCKUPS   balsamiq.com Balsamiq Mockups is a quick and simple wireframing software that gives the tools needed to develop concepts and ideas easily, prototyping visually stimulating interfaces as rapidly as possible. It reproduces the experience of sketching on a whiteboard, and has multiple themes to give as much creativity as possible for produced ideas. All work is version controlled, and with great third-party support, exporting to HTML…

CREATING WIREFRAMES Wireframing forms an essential part of the design process. Wireframes should be seen as the visual guide or foundational structure of a website. Getting started The first step is to create a new document in Experience Design. You will then be asked to set up the dimensions on the desired canvas. The skeletal framework can be plotted out onto the canvas by tracing simple geometric shapes provided from the toolbar on the left-hand side. The shapes should then be clearly labelled in order to indicate which section belongs to the spatial zone. Buttons Once the foundational structure has been completed the website’s buttons need to be placed, which will be made use of in the prototyping process. Clearly indicate which elements are buttons with visual cues (ie. colour…

Being able to interpret and react to images has many powerful applications and can greatly improve the user experience of a page or app. Its uses range from facial recognition, perhaps the best-known example of which is Facebook’s friend tagging, through to camera-based control systems similar to the Xbox Kinect. The underlying principles of image processing, or computer vision, are complex, and not something we would want to implement from the ground up when creating an app. Fortunately, there are a number of libraries for the web that have done the hard work for us, making the functionality surprisingly straightforward to use and providing high-performance implementations. One such library is tracking.js (trackingjs.com), which provides a range of APIs for common computer vision tasks such as feature detection and colour recognition.…

PROTOTYPING WITH MARVEL Learn how to use the app to turn sketches and mockups into designs MULTIPLE BACKGROUNDS Share backgrounds across multiple elements with Multiple.js FULLSCREEN CSS MENUS Employ the power of CSS and JS to create all-screen navigation CODE WITH THE MEDIA SESSION API Build your own podcast with custom UI components Visit the WEB DESIGNER online shop at for back issues, books and merchandise ALL IN YOUR NEXT WEB DESIGNER Issue 261 on sale Thursday 27th April 2017…

“Frighteningly, over 90% of people didn’t know much about protecting themselves online” Staying secure online isn’t always at the forefront of web designers’ and developers’ minds. When designing and building it is rarely high on the list of priorities. How secure are the browsers we are testing in? How secure is Firefox? How secure is Chrome? How secure is Edge? How secure is Safari? You get the picture, but do you know how secure they are? Many make the assumption that all are safe and any issues will be dealt with by the vendor. And this is the case, but the vendor needs to know how we are using their browsers. When was the last time you updated your browser? We are making the assumption that as web designers and…

PWABuilder preview.pwabuilder.com PWA Builder brings together a collection of tools to build a Progressive Web App. Its premise is to take data from an existing site you have created and use that to generate a cross-platform PWA. Users can use the web-based approach or download the node-based CLI. It also includes the App Image Generator to create app icons for various platforms. Rough.js roughjs.com A lightweight, standalone Canvas-based library that lets users draw in a sketchy, hand-drawn style. Create lines, curves, arcs, polygons, circles and ellipses. Dwitter dwitter.net Sign up to the social site that brings together short and impressive JavaScript demos. Comment, edit and browse other people’s demos. AR.js github.com/jeromeetienne/AR.js Jerome Etienne is looking to make AR for the web a reality. It is open source, free of charge…

1. Document initiation The first step is to initiate the HTML document, which consists of the HTML container that stores the head and body sections. The head section is used to store descriptions of the document as well as links to external resources – the CSS file in this case. The body is used to store the visible content elements, to be added in the next step. 2. Visible content The visible content is stored inside the document’s body container. The animated elements will have a class name of ‘float’, allowing us to be selective of where the animation effect will appear. This enables us to use the effect as many times as we need to without adding complexity to the CSS rules. 3. Initiate style file With the HTML…

1. Page document The first step is to initiate the HTML document, which defines the document, its head and body. The head section is used to contain links to external resources (CSS and JavaScript files) and descriptions of the document such as the title. The body section is where the visible content will be placed in the next step. 2. Body content The content placed inside the document body is what will become visible to the user. Our example consists of two buttons for zooming in and out, along with the article frame and its zoomable section. All controllable elements are assigned an ID that will be used for referencing them via JavaScript and CSS where necessary. 3. Initiate the styling With the HTML content now complete, it’s time to…

Winter’s approached Greenwood Campbell to develop an online platform for parents to find the perfect school for their child when moving abroad. The vision was an end-to-end online subscription directory with an online portal for both schools and parents – showcasing over 12,000 schools worldwide. As a newly founded startup, Winter’s had very specific goals, targets and a demanding schedule. From concept, scoping, UX, build, testing and deployment – the Winter’s team needed to launch the website within a six-month timeframe. After researching a number of different concepts with Winter’s we created a flexible and clean design system, which was easy to understand and could adapt to the startup’s own changing business requirements. We created a unique custom-built map using Google with geospatial distance and area calculations, enabling parents to…

FOUNDERS 1 x Managing director1 x Technical director DEVELOPMENT TEAM 1 x Development Director1 x Digital Architect2 x Senior Developers1 x Creative Developer1 x Front End Dev1 x Mid-weight Developer1 x Junior Developer8 x Support Developers1 x UX Practitioner1 x Designer CLIENT SERVICES 1 x Account Director1 x Account Manager1 x Senior Account Executive2 x Account Executive2 x Senior Project Managers1 x Project Manager1 x Project Executive OTHER 1 x Marketing Director1 x Marketing Manager1 x Marketing Executive1 x New Business Director1 x Head of Customer Engagement1 x Financial Controller1 x Accounts Assistant1 x Head of Talent1 x Videographer1 x Executive Assistant DIGITAL MARKETING TEAM 1 x Senior Digital Marketing Manager 1 x Senior Digital Marketing Executive2 x Digital Marketing Executive…

“EASY TO LEARN, USE AND TEACH. WITHOUT QUESTION, THE BIGGEST IMPROVEMENT TO MY TEAM’S DEVELOPMENT WORKFLOW AND SPEED HAS BEEN BRINGING NPM INTO THE FOLD”Matt Leach Head of Development thinkingjuice.co.uk NPM THE MOST POWERFUL JS PACKAGE MANAGER, PERIOD   npmjs.com npm makes it simple for developers to share and reuse code, and it makes it easy to update the code that’s being shared. npm is one of the most powerful, feature-rich package managers around. Find, share, distribute and reuse code packages from thousands of developers, all from a terminal window. npm is distributed with Node.js by default, which means that when Node.js is downloaded, npm gets installed automatically on the development environment. npm makes it possible for digital teams to draw on the expertise of experts that have developed solutions…

DIRTY MARKUP   dirtymarkup.com The perfect solution to inherited code that’s already compiled, or just plain messy. Dirty Markup features an easy-to-use interface for tidying HTML, CSS and JS effortlessly. It features a well-documented REST API, and some great third-party apps. GOOGLE MOBILE-FRIENDLY TEST   search.google.com/search-console/mobile-friendly Knowing if the website meets Google’s criteria for mobile success is crucial. ‘Mobile first’ is the primary approach when designing and building digital applications, and the mobile-friendly test tool provided by Google makes sure that method is respected positively. W3 MARKUP VALIDATOR   validator.w3.org A free service used to check the validity of a production environment. Sites are defined by technical specifications, which usually include machine-readable grammar and vocabulary. Checking against these constraints is called validation, and this is what this tool does. GTMETRIX…

paletton.com One of the biggest bug bears for any developer is choosing the right colour palettes. Paletton is an online tool that provides an easy method for creating colour combinations and palettes of colours that work well together. The major advantage of Paletton is that it doesn’t use the modern computer RGB colour space, instead taking advantage of a classical colour wheel and applying colour theory. When used, it works within a specially created RYB colour spectrum, as opposed to what a typical graphics application uses. The ability to export into multiple languages and image formats allows for quick integration with any web project.…

Jump to top As this is a single-scrolling website the name Nobody Studios links back to the top of the page, and there is an animated strikethrough effect when the user rolls over this. Info panel Clicking on the Info button brings up an appropriate panel over the top. This has some lovely animated scribble drawings of the team. Scrolling text effect Every few seconds each line of text scrolls up so that the underscore sits at the top and Nobody_ sits at the bottom, then the whole thing repeats back. Scrolling down As the user scrolls down the page there is sample work, which when clicked on loads into the page without leaving. More animations All content that loads in or scrolls into view arrives with flourishes of animation…

4 MUST-HAVE FREE PLUGINS Fleurify wundes.com/JS4AI This extension will create floral shapes in Illustrator, which are great for developing new patterns, logos or icons. Close All Paths bit.ly/2mZNggk This useful plugin enables the designer to close all the open paths in the document currently opened without connecting touching paths. Layer Export metaphorical.net/note/on/layer_export Layer Export allows the designer to export each layer in the document as separate PNG or PDF files. ArtOptimizer zevrix.com/artoptimizer.php The ArtOptimizer extension reduces the size of Illustrator links by eliminating excess image data, while simultaneously performing essential image adjustments in the process. Check out the free trial ICONOGRAPHY Stand out from the crowd with your own custom icons 01. Sketch Sketch out the icons on a piece of paper.…

KARMA karma-runner.github.io/1.0/index.html TEST WEB APPS AUTOMAGICALLY Avoid the tedium of launching unit tests in various browsers by hand 1. Install Karma Karma is browser- and testrunner-agnostic: this means that developers are free to mix and match which parts of the framework are to be added to their project. For the following steps, we will assume that tests written using the Jasmine framework will be run in Google’s Chrome browser. 2. Create a configuration The Karma team makes developers’ lives easier by providing a full-blown configuration utility. It walks you through the set-up process in a step-by-step fashion, finally emitting a configuration file that can be edited with an editor of your choice whenever changes are needed. Which testing framework do you want to use ? Press tab to list…