Magzter Gold (Sitewide CA)

Magzter Gold (Sitewide CA)

Digital Delivery

The Web Design Book April 1st, 2016 Digital Back Issue Cover

The Web Design Book Magazine (Digital)

(Write a Review)

Single Digital Issue

The Web Design Book Vol 6

$11.99

Powered By Zinio

Zinio

Satisfaction Guaranteed

Instant Start

Also available on ZINIO Unlimited logo

Get unlimited access to The Web Design Book Magazine (Digital) & 5000+ other magazines

1-month free trial

Renews at $8.99/month after trial.
Cancel anytime.

Get unlimited access to The Web Design Book Magazine (Digital) & 5000+ other magazines. Renews at just $8.99/month after trial. Cancel anytime.

Start Trial Learn more

39 Articles

Analyse your CSS

THE TOP TOOLS, ESSENTIAL TECHNIQUES AND THE BEST ADVICE FOR STYLING PERFECTION CSSLinting is just like any other type of linting, in that it is “a tool that flags suspicious usage in software written in any computer language” (from the Wikipedia page on programmatic linting). Front-end developers are likely aware of JSONLint and JSLint. Well now there’s CSSLint, which analyses CSS and helps developers write CSS that conforms to a set of performance and syntax of best practices. ‘Helps’ is understating it really, CSSLint throws errors and if used as part of a build server – say, TeamCity for example – it will cause builds to fail. This is both a good and a bad thing. It means the rules are enforced with harsh penalties, but bad rules will create…

Analyse your CSS

Bring design and build together

At this point it’s fair to say that CSS preprocessors have captured the imagination of the industry and have become prevalent in production – the most well known being: Sass and SCSS, Less and Stylus. At this point in time there isn’t much to tell these preprocessors apart. They all have fairly similar capabilities, just with each going about it a different way and with a slightly differing syntax. The basic premise of CSS preprocessing is to provide more powerful tooling to developers and also enable more expressive code. This has its pros and cons – the more advanced the tool is, the more skill it will take to use it effectively. In line with this, some of the most basic and easiest to use features of CSS preprocessing are…

Bring design and build together

Style guides: why you need them

Style guides are a brilliant idea, however they are usually woefully executed in practice. The idea is that at any point in time there is a working document visible to the project team that captures the look and feel of core components – and this includes typography, buttons and form fields. What actually happens though is that the working document becomes stale and discarded by most of the project team, and that’s because it captures the look and feel of the project from two months ago. An out-of-date working document is pretty useless because the project team can’t use it for anything they’re working on at that moment – it simply gathers dust, becoming a relic. There are probably many reasons for stale style guides, but the biggest standout is…

Style guides: why you need them

5 Photoshop extensions

CSS Hat csshat.com Including any plugin that “writes code for the developer” is always going to be controversial, but CSS Hat does an okay job. When it comes to trying to scratch something together in minutes or unpicking several font styles at once – it can be a handy pallette to have, especially for those who don’t have a mental CSS encyclopedia. render.ly render.ly If something needs exporting, render.ly is the right tool for the job. The basic premise is that each top-level group in a PSD is a ‘screen’. and child groups with names beginning with “&” get exported as separate states of that screen. Render.ly also generates webfonts for icons in vector format. No more manual image exporting from PSDs. InVision invisionapp.com InVision takes designs and provides an…

5 Photoshop extensions

Improve performance

CSS sprites can really help cut down on the number of HTTP requests made on each page load. When done effectively, sprites can have a big impact on performance, especially on mobile, where the number of simultaneous connections is limited or perhaps the data connection is just plain slow. Unfortunately, they’re also quite costly to create and maintain when done manually – especially if icons need to change sizes late in the build. This is where css-sprite (an npm package) comes in: give it a bunch of images and it returns a stylesheet (in your preprocessor of choice) and a single image. What is particularly good about css-sprite is that it is capable of laying the sprites out in multiple ways. Vertical and horizontal are options, but the best is…

Improve performance

Our expert Tam Hanna works with Symbian software products and a variety of coding languages. This issue he reveals the best plugins for powering up jQuery TWEAK PHOTOS Plugin: Image Editor bit.ly/1hIv6c1 Category: Photo editing Users love to edit uploaded pictures on the web. Image Editor provides a svelte little GUI wrapper around the Camanjs filter library: it saves you from the hassle of coding a set of sliders, buttons and symbols which come together to make up a little editor. Getting started with the Image Editor plugin requires the embedding of four libraries and a picture box – our test harness starts out like this: Keep in mind that the download is not complete and that’s because each of the libraries also expects its resources to be in place…

Inspiration: Guggenheim ZERO

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Around the Countdown to ZERO clock you’ll find featured artists and close access to the artworks Designer Hello Monday Site exhibitions.guggenheim.org/zero The Solomon R. Guggenheim Museum on Fifth Avenue New York is one of the most iconic art galleries in the world. The cylindrical, shell-like building, designed by Frank Lloyd-Wright in 1959, typically plays host to art exhibitions – with ZERO currently running until January 2015. Titled ZERO: Countdown to Tomorrow, this dedicated website provides a rich, virtual preview of the featured exhibits and links to booking viewings. Opening on an intriguing abstract video sequence and landing within a clean white template, artworks are arranged within a clock-like rollover wheel. Clicking on a node reveals each example, moving to neighbouring pieces left and right or…

Inspiration: Guggenheim ZERO

Build 3D experiences with PlayCanvas

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 HTML5 Canvas has been a fantastic addition to the web’s feature set for 2D experiences, allowing for easy adoption among developers with straight forward APIs, documentation, and generally quick development times. HTML5 canvas has made the web the go-to platform, should someone want to learn what’s involved in creating a 2D experience quickly and with minimal fuss. Despite 3D experiences with native web technologies being a reality for the same amount of time as 2D ones, there hasn’t been as much progress. Even drawing something as simple as a triangle in WebGL means learning about things called shaders and understanding what a buffer is. This complexity really whittled down the number of people making engaging experiences for the platform. Until libraries like three.js came about, a…

Build 3D experiences with PlayCanvas

Inspiration: brightly digital agency

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Designer brightly Site teambrightly.com The latest in a long line of noteworthy agency websites so far this year, this stellar effort from Michigan-based studio brightly is a shining example. Operating out of Grand Rapids, the website exhibits a rather apt, tangible sense of “team” that floods out from this cascading WordPress-powered template. Opening on an animated PNG of an unfurling Swiss Army knife, suitably reconfigured for digital deployment, the message is multidisciplinary. These “Crafters of Clarity”, who are known for delivering projects across a broad industry spectrum, have a creative story to tell. Built around a long central ‘page’ that behaves more like a vertical slider, sections branch offto screen right producing a waterfall-like feel to the navigation. Horizontal threads detailing team biographies, working process and…

Inspiration: brightly digital agency

Create a 3D navigation menu with HTML

The amount of space available for websites can often be limited, especially where the website is being used on a small screen. With the different information components in your design competing for screen space, it is important to make sure that you give each element the most appropriate placement in the design of the page or the screen. A more recent addition to the CSS specification is the use of 3D elements. We are all familiar with the default 2D presentation of webpage elements, in which we can position them on the page by using their horizontal and vertical coordinates; the 3D presentation features takes this one step further by allowing elements to be presented with depth perspective, which can then be used for rotation and making the elements appear…

Create a 3D navigation menu with HTML

Master responsive image techniques

DOWNLOAD TUTORIAL FILES http://www.filesilo.co.uk/bks-894 Ever since responsive web design became a thing designers and developers have wanted better tools to manage imagery across many different clients and viewports. With the advent of the srcset attribute and picture elements, this is now achievable in modern browsers and responsive images are even starting to become possible on mobile devices, with Android 4.4.4 offering good native support. For aging browsers, Scott Jehl’s picturefill JavaScript polyfill can be used to plaster over the cracks – although network performance will still be an issue. The pinnacle of this new feature set from HTML5 is the picture element, enabling creative teams finite control of how images are presented to their web browser – creative teams are finally able to give art direction on a per-client basis.…

Master responsive image techniques

Inspiration: Namale – Joyaux Uniques

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Designer PHOENIX Site creationsnamale.com If there’s one UI trend that has come to characterise the desktop web over the past couple years, it is scrolling effects. Content animated and given a sense of depth on scroll, often provides an illusion of long pages when in fact only browser height is occupied. This new design for jewellery brand Créations Namale pulls a similar jQuery-driven trick that leaves you confused and scratching your head. The main page feeds a succession of fashion photography through a bordered area, almost like a viewing pane for focusing the eye. Gorgeously shot imagery then performs 50/50 splits to cleverly reassemble and invite full-width zooms on click. It’s purposefully puzzling but achieved with such elegance from Montreal studio PHOENIX, thanks to a painstakingly…

Inspiration: Namale – Joyaux Uniques

Be a jQuery code master

The current state of jQuery IT’S BEEN TEN YEARS SINCE INITIAL RELEASE, BUT WEB DEVELOPERS STILL NEED TO KEEP AN EYE ON JQUERY Falling victim of its own success in recent years, jQuery can sometimes be described as ‘not-cool’ – especially when used in the same sentence as libraries like Angular or React. JQuery doesn’t include a templating language or follow a MV* pattern, yet it’s still an incredibly useful library in the modern developer’s toolset. JQuery’s gentle learning curve can be a great introduction to JavaScript and since conception it’s become the go-to for a first ‘taste’ of JavaScript – a language that is leaving its browser only roots behind. The library enables complex topics to be introduced sooner and in bite-size chunks. The more experienced developer should remind…

Be a jQuery code master

Make an image-based pop-up animation menu

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Hover effects – they never go out of fashion. No matter how much web design progresses away from the desktop and further into the touchscreen world, where hover effects become moot, designers still love to come up with new and entertaining rewards for placing the cursor on a relevant area of the page. Not only does it deliver the doorway to the next step in the user experience, but it also make it more entertaining to knock on that door in the first place. Take sports channel ESPN’s website: a veritable feast of background video, parallax animations, responsive layouts and, of course, impressive hover effects. In this Web Workshop, we’re going to create our own version of the pop-out menu items that appear about halfway down…

Make an image-based pop-up animation menu

Build your own jQuery plugin

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 J Query is everywhere: very few web designers can make do without it. For quite some time, developers have proceeded to create expansion modules intended to add extra logic to the product. While the logic contained in these so-called plugins can reign from benign to supercomplex, the actual steps involved in coding and uploading tend to be similar regardless of product complexity. Yes, you are reading right: interfacing a charting plugin to jQuery is just as easy as creating a little demo toolkit. Due to JavaScript’s unique habits, hacking together a plugin is a sure-fire way to creating hordes of angry users: jQuery’s developers established a series of ‘best practices’ which need to be respected if a plugin is to feel right. But fret not: we…

Build your own jQuery plugin

Inspiration: Weget

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Designer Weget Enterprise Site weget.nl/en Weget is a digital and design studio based in the city of Groningen, Netherlands, offering a range of services. Whether you require essential web products for big or small business startups, eCommerce, web applications or hosting and domains – you’ll find it here. Recognised for notable design work across numerous CSS award nominations, this unique portfolio experience details Weget’s work in all languages. Content is arranged in a lengthy structure more akin to a header slider component than a traditional web page. These seven screen-width panels are defined by HTML5

Inspiration: Weget

Manage JS with asynchronous tasks

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Using callback functions is a sure-fire way to induce JavaScript bloat: we know of some code examples where the accomplishment of a single task requires the presence of a dozen callbacks. Furthermore, callbacks are not a catch-all solution for event handling. As the use of exceptions spreads over to JavaScript, keeping an eye on the various error sources becomes tedious pretty quickly. Even though Promises have not been fully formalised at the time of writing, they nevertheless provide a fascinating alternative to callbacks. In principle, a Promise is but a state machine object whose state reflects the situation of the task at hand. Deploying Promises significantly reduces the efforts involved in callback and event handling. When done right, core functions can be observed at a glance.…

Manage JS with asynchronous tasks

Robust JS code with TypeScript library

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 JavaScript’s liberal syntax declaration lets developers do all kinds of weird and wonderful things. Programmers used to restrictive class-based systems will need to aquaint themselves to the new working environment. Google engineer Addy Osmani collected design patterns which helps this process – when, and only when, applied correctly. Duck typing is even worse though: it permits the creation of bugs which occur only when the code path in question is executed. Murphy’s law then ensures that this will happen on the computer of an important client. TypeScript solves these problems by creating a statically typed dialect of JavaScript which is verified via a more stringent execution environment. Transgressions are punished mercilessly, defective code never makes it to the browser. Microsoft does its magic via a process…

Robust JS code with TypeScript library

Master Google’s best APIS

Software is an unique product in that it can be multiplied with minimal cost. Once the development has been footed, adding new installations tends to be an issue of purchasing extra hardware. Google has used this very approach to produce a variety of APIs, providing web designers access to building blocks used for the realisation of its own services. Some of them are, fortunately for us, made available for free: Google willingly foots the bill in order to tie developers closer to its own ecosystem. In addition to the eventual introduction of monetisation (well-established APIs tend to stop being free when enough people use them), Google furthermore profits from the ability to get its APIs stress-tested by third parties without needing to pay them for their work. Another, possibly more…

Master Google’s best APIS

Get free web hosting with GitHub Pages

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Traditionally, developers solved the problem of hosting by adding a link to content hosted at an external website. Few coders know that each and every GitHub repository comes with a dedicated area for files which are served via a normal web server. In fact, GitHub supports three different repository types. A Project site acts as a deployment vector for the above-mentioned cide examples. User and/or organisation sites differ from project sites in that they are instead intended to represent a firm or an individual’s web presence. From a technical point of view, taking GitHub’s offering is interesting as long as websites remain static. GitHub does not provide databases or other “active” content – if you plan to host a forum or a WordPress-managed blog, this is…

Get free web hosting with GitHub Pages

Make a resizable sliding panel for your content

EXPERT INSIGHT Not for mobile Even though our slider looks awesome on a desktop, be aware that it is not particularily well suited to the needs of mobile phone users. Most smartphones are used in portrait mode, where horizontal space is at a premium. Drag and drop also requires a level of accuracy difficult to achieve on touchscreens. Research has repeatedly proven that humans have their fair share of problems interpreting numbers. If data is spruced up visually, keeping tabs on information is much easier. This instalment of our never-ending series on web techniques was inspired by a website (sparetime. arkivert.no/en) which makes use of draggable columns to represent an amount of information visually. Users arranged the width of multiple columns on the screen in order to map their behavioural…

Make a resizable sliding panel for your content

Inspiration: Project Schoolkrant

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Designers J. Walter Thompson (JWT) Amsterdam, Superhero Cheesecake Site projectschoolkrant.nl This rich educational site produced by JWT Amsterdam and commissioned by De Persgroep Publishing’s daily Algemeen Dagblad, a major national Dutch newspaper, acts as a curriculum tool for teachers and pupils alike. Built around five colourful lesson sections spanning news gathering, interview, photography, writing and design skills, the content culminates in compiling a school newspaper. Video tutorials from virtual tutors and a collection of animated characters combine beautifully to form an engaging experience for eager young eyes and minds. A three-pillar approach marries colourful environments, playful learning assets and game-like features throughout. Completing tests unlocks badges as rewards to mark progress so visitors can return, log in and continue at leisure. The keenest kids can even…

Inspiration: Project Schoolkrant

Create split-screen sliding panel effects

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 EXPERT INSIGHT The rise of the preloader Many websites now feature preloaders, all this does is present a holding screen until all the content is loaded. When using large images, it is essential to wait until they have loaded before presenting them to the user, otherwise they would think that the site isn’t working properly with content missing. The creators of the new By Association Only website state that the “hardest website to build is your own site”. This is a statement that would certainly ring true with many web designers. Client work always takes priority so it can be difficult finding the time to create your own website, but at the same time you are always going to be judged by your own site, so…

Create split-screen sliding panel effects

TESTING TESTING

Unit testing started to become fashionable more than ten years ago. Its core idea is simple: since testing is a repetitive manual activity, it could also be handled by computers. Frameworks permitted the creation of small routines called unit tests, which were run automatically on request. Results could then be compared against predefined good and bad constants – the concept caught on like wildfire. Unit tests are but one of the many automatic testing tools. As computational resources and research into artificial intelligence proceeded, static analysis became possible. It is based on a set of commonly encountered mistakes. Incoming product code is then compared against these known errors. Since then, even more advanced systems saw the light of day. User interface tests manipulate the GUI stack of the platform, thereby…

TESTING TESTING

Animate an interface with TweenMax

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Animations are now an integral part of the front-end designer’s skillset. Having an understanding of how to create and add animations can really enhance the user experience of a product and makes the interface come alive. A well-timed shake to show the user has input the wrong values will link with the user’s mental model of a negative shake of the head. Sliding the interface to some new part can be a compelling and satisfying resolution to clicking the interface. Understanding CSS animation and transitions is crucial to becoming good with these, but sometimes the front-end designer needs a helping hand. They need a consistent way to write animation that works in all instances whether animating DOM elements, Canvas illustrations, SVGs or WebGL 3D objects. In…

Animate an interface with TweenMax

Build with PhoneGap

As a web designer you’ve cut your chops learning how to create beautiful designs on the web with HTML, CSS and probably even JavaScript. The beautiful part about designing for the web is that it is ubiquitous. Provided you’re sticking to web standards, your design should look consistent bar the odd browser quirk. When the app scene arrived in the latter half of the Noughties, development became split into silos with development teams needing to know Objective C and the Cocoa Touch framework for iOS, Java for Android or C# for Windows phone. Yet the web community was probably the most able to design for these, given their ability to work across multiple platforms already. This is where PhoneGap came into being, in order to fill that hole. PhoneGap was…

Build with PhoneGap

Desktop apps with NW.js and JavaScript

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Over the last 25 years, the browser has opened new windows (see what we did there) on content and code distribution. Whole ecosystems have sprung up to support the creation and deployment of apps that can be accessed with a simple URL. Despite how great the browser has become at integrating itself into operating systems, we still sometimes find that we want an app that we can install on our system and run at any time with just that extra little bit of power. What we need is something with the low-level access of Node with the ease of development of browsers and a way to package it all up as an app that can be run on our traditional OS like any regular, native app.…

Desktop apps with NW.js and JavaScript

Create a unique mobile 3D interface

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Part 1 Build an augmented menu that hooks into a mobile’s device orientation controls to create a bespoke browsing experience with three.js Creating compelling web experiences for mobile devices has come a long way, there are a whole raft of phone functions that designers can plug in to and access without the need for packaging up the mobile site as an app. In this tutorial what is being achieved with the native mobile web would have been pretty hard to conceive as an app going back just a few years, but now this is running purely as a mobile optimised website. The site itself will be in 3D and rendered by three.js but instead of this being rendered with the WebGL renderer, the scene will be…

Create a unique mobile 3D interface

Create a unique mobile 3D interface

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Part 2 Part two of our tutorial takes an augmented menu that uses the mobile’s device orientation controls and adds interaction to create a fully working site experience In part one of this tutorial in issue 242, a unique mobile augmented website menu was created. The site was created with the help of the three.js library and was rendered using the CSS3 renderer rather than the WebGL renderer to give maximum compatibility with devices. The 3D was an integrated part of the design as the user had to rotate their phone around them to display the interface, augmenting the site around them. This placed the user in the centre of the interface. The movement of the phone was created using the ‘Device Orientation Controls’ that come…

Create a unique mobile 3D interface

Develop a web app quickly with Lucee

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 To some, CFML (ColdFusion Markup Language) may not mean anything. To others it may be perceived as an out-of-date language no longer used. In fact CFML is 20-years-old this year and it was born the same year as PHP and JavaScript. If you haven’t yet experienced building a CMFL application yet, then now is your chance to do so. Lucee, a completely open source CFML engine, was released in January 2015. As a fork from an existing CFML engine Lucee did not have to start from scratch and had a fantastic core engine to build upon. In this tutorial we will download and install an Express edition (self-contained) version of Lucee 5, which includes all of the latest additions to the code syntax and language. We…

Develop a web app quickly with Lucee

Use Ionic to create a native app

Ever wanted to develop a native application but have been put off by learning a new language and ecosystem? Enter the Ionic framework which allows you to apply your JavaScript knowledge to build hybrid apps. Ionic offer other services to build APIs, a WYSIWYG editor, push notification handling, analytics, and much more. We’ll be concentrating on just building with the core framework. Ionic is fast but still not as performant as building natively; this makes it very well suited for prototyping or delivering an MVP. Ionic was released in 2013 by a company called Drifty. Since then it has seen increasing adoption due to its ease-of-use and modern toolchain. It also looks gorgeous out-the-box and isn’t opinionated about the editor you use like some similar mobile frameworks. Ionic is powered…

Use Ionic to create a native app

Create desktop applications with Electron

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 GitHub have created an open source project called Electron (formerly Atom-Shell) that combines Chromium, on which Google’s Chrome is built, and Node.js, a JavaScript environment designed for building applications. The result enables the building of cross-platform desktop applications using HTML, CSS and JavaScript. Companies such as Microsoft, Facebook, Slack and more have started to make use of Electron. Electron applications normally start out with a single JavaScript file which is executed initially. The code within it has control over the main process, can create and control new application windows and listen for important events. Each window that is created can be set to render your UI through the use of HTML, CSS and JavaScript. The JavaScript executed within a window can also access special Electron APIs…

Create desktop applications with Electron

MAKING AN IMPACT

THE HISTORY OF CLIMATE CHANGE Though his study of Antarctic ice, Glaude Lorius was the first scientist to prove the impace of human activity on out climate. His extraordinary life intermingles science and polar adventures. Wild-Touch and Luc Jacquet invite you to share this unprecedented epic to better understand the incredible phenomena that effect us all. The world is constantly changing, progress is pushing forward, but with progress comes caveats. The serious issue of climate change is one that has been ignored by some, with only the dedicated few bringing the truth to the fore. But, these dedicated few have kept bringing the facts to the table until the outcome could and cannot be ignored. Education is often the key to making people aware of what’s happening outside of their…

MAKING AN IMPACT

INVENTING TOMORROW

who DPDK what Creative strategy and digital production for a wide range of engaging projects and products where Calandstraat 5a, 3016 CA, Rotterdam, The Netherlands web DPDK.com Key clients Peugeot Nationale Nederlanden DS Automobiles Vitens Sense / SOA AIDS NEDERLAND Defining DPDK can be difficult, as the agency offers a diverse range of skills to its clients. Whether they need a production company, design boutique, game studio or technology services, DPDK brings fresh and dynamic solutions to every account. Few agencies have the breadth of skills that DPDK possesses, placing it at the forefront of the digital design that shapes our world. Pim van Helten, CEO at DPDK, explains how the agency came into being: “Officially, the agency started in 2001 with Rolf Vreijdenberger and myself, but it took shape…

INVENTING TOMORROW

INTERACTIVE ARTISANS

who Cartelle what An Amsterdam-based interactive studio focused on digital design, motion, development and strategy where Elandsstraat 22, 1016 SG, Amsterdam web cartelle.nl Key clients Adult Swim G-Star adidas Scotch & Soda Red Light Radio Founded in 2009 by Johnny Slack and Stevijn van Olst, Cartelle began a partnership that would see the two founders as well as their colleagues develop new interactive experiences for brands from all around the world. Johnny explained how Cartelle became a reality: “We started out when I was working at AKQA Amsterdam tasked to help build the creative development team. Stevijn was a freelance art director and creative helping to get new Nike work. “We were paired up and I would create rapid flash prototypes to coincide with the decks Stevijn was creating to…

INTERACTIVE ARTISANS

changing Perceptions

Originally founded in 2001, Phoenix The Creative Studio strives to make every brand they work with and every campaign they create not only communicates with its intended audience, but also touches their lives. With open and fresh approaches to what branding means in today’s digital spaces, Phoenix has its finger on the pulse of the zeitgeist. Fouad Mallouk, president and CEO of Phoenix The Creative Studio explains his journey to starting Phoenix: “Victor Mallouk, my grandfather, [was] a successful businessman between 1935-75 in England and Egypt, but left Egypt for Canada after the last war. He then started a small design and print brokerage firm, VN Graphic and Printing, which was enough to sustain my grandparents, but he didn’t want to expand his business. “As a younger man (16-17) I…

changing Perceptions

who AllofUs what AllofUs is an award-winning digital agency specialising in the planning and design of customer experiences for the interconnected age where 7- 11 Herbrand Street, London, WC1N 1EX web allofus.com Key clients Google British Museum Bastei Lübbe V&A Ikea with diverse yet complementary careers that led to the founding of AllofUs, the agency has moved in and out of private ownership to arrive at its current structure that will see new products and services that could disrupt several current industries before too soon. “The original founders all met at a wellrespected interactive design agency,” explained MD, Phil Gerrard. “We were, in effect, the management team at Digit. My background is in advertising where I also got involved with digital early on building big websites for clients. When I…

BREAKING BOUNDARIES

who Amaze what A leading, full-service digital marketing, technology and commerce consultancy. Born 20 years ago inside the Learning Methods Unit of John Moores University, Liverpool where Royalty House, 72-74 Dean Street, London, W1D 3SG web amaze.com Key clients The Co-operative Group Virgin Trains East Coast Toyota Lexus ASICS Amaze was established in the year 1995, out of the Learning Methods Unit of John Moores University, Liverpool – with a global scope, Amaze has developed to become not only one of the world’s leading digital design agencies, but also a consultancy that looks closely at how human behaviour, branding and the digital landscape integrate together. CEO Natalie Gross explains: “Founded by the late digital media luminary Roy Stringer, and led by him and Peter Fowler, the unit was originally formed…

BREAKING BOUNDARIES

FileSil To access FileSilo, please visit filesilo.co.uk/bks-894 01 Follow the on-screen instructions to create an account with our secure FileSilo system, log in and unlock the bookazine by answering a simple question about it. You can now access the content for free at any time. 02 Once you have logged in, you are free to explore the wealth of content available on FileSilo, from great video tutorials and online guides to superb downloadable resources. And the more bookazines you purchase, the more your instantly accessible collection of digital content will grow. 03 You can access FileSilo on any desktop, tablet or smartphone device using any popular browser (such as Safari, Firefox or Google Chrome). However, we recommend that you use a desktop to download content, as you may not be…

In This Issue

Description

Details

Reviews

Recent Digital Issues Browse all

Recent The Web Design Book Digital Issues Browse all back issues

The Web Design Book Magazine (Digital) Subscription March 11th, 2015 Issue

The Web Design Book Magazine (Digital) The Web Design Book Vol 4: $11.99

The Web Design Book Magazine (Digital) Subscription August 6th, 2014 Issue

The Web Design Book Magazine (Digital) The Web Design Book Vol 3: $11.99

The Web Design Book Magazine (Digital) Subscription September 4th, 2013 Issue

The Web Design Book Magazine (Digital) Vol. 2: $11.99

The Web Design Book Magazine (Digital) Subscription May 20th, 2012 Issue

The Web Design Book Magazine (Digital) The Web Design Book: $11.99

The Web Design Book Magazine (Digital) Subscription August 28th, 2015 Issue

The Web Design Book Magazine (Digital) The Web Design Book Vol 5: $11.99

The Web Design Book Magazine (Digital) Subscription March 11th, 2015 Issue

The Web Design Book Magazine (Digital) The Web Design Book Vol 4: $11.99

The Web Design Book Magazine (Digital) Subscription August 6th, 2014 Issue

The Web Design Book Magazine (Digital) The Web Design Book Vol 3: $11.99

The Web Design Book Magazine (Digital) Subscription September 4th, 2013 Issue

The Web Design Book Magazine (Digital) Vol. 2: $11.99

The Web Design Book Magazine (Digital) Subscription May 20th, 2012 Issue

The Web Design Book Magazine (Digital) The Web Design Book: $11.99

The Web Design Book Magazine (Digital) Subscription August 28th, 2015 Issue

The Web Design Book Magazine (Digital) The Web Design Book Vol 5: $11.99

The Web Design Book Magazine (Digital) Subscription March 11th, 2015 Issue

The Web Design Book Magazine (Digital) The Web Design Book Vol 4: $11.99

The Web Design Book Magazine (Digital) Subscription August 6th, 2014 Issue

The Web Design Book Magazine (Digital) The Web Design Book Vol 3: $11.99

The Web Design Book Magazine (Digital) Subscription September 4th, 2013 Issue

The Web Design Book Magazine (Digital) Vol. 2: $11.99

Customers Also Viewed

The Ultimate Road Bike Maintenance Magazine (Digital) Subscription May 22nd, 2014 Issue

The Ultimate Road Bike Maintenance Magazine (Digital)

The Ultimate Road Bike Maintenance: $3.11

The Ultimate PC Building Handbook Magazine (Digital) Subscription January 1st, 2016 Issue

The Ultimate PC Building Handbook Magazine (Digital)

The Ultimate PC Building Handbook - Vol2: $7.28

The Universe the Story so Far Magazine (Digital) Subscription May 1st, 2016 Issue

The Universe the Story so Far Magazine (Digital)

The Universe the Story so Far: $10.40

The Ultimate PS4 Handbook Magazine (Digital) Subscription May 16th, 2014 Issue

The Ultimate PS4 Handbook Magazine (Digital)

The Ultimate PS4 Handbook: $7.28

The Windows 7 Book Magazine (Digital) Subscription July 25th, 2012 Issue

The Windows 7 Book Magazine (Digital)

The Windows 7 Book: $11.99

The Web Design Annual Magazine (Digital) Subscription November 18th, 2015 Issue

The Web Design Annual Magazine (Digital)

The Web Design Annual Vol 1: $11.99

The Ultimate World Cup Guide 2010 Magazine (Digital) Subscription May 21st, 2010 Issue

The Ultimate World Cup Guide 2010 Magazine (Digital)

The Ultimate World Cup Guide: $6.24

The Windows 8 Book Magazine (Digital) Subscription September 3rd, 2014 Issue

The Windows 8 Book Magazine (Digital)

Volume 1: $8.99

The Vintage Wedding Book Magazine (Digital) Subscription March 1st, 2016 Issue

The Vintage Wedding Book Magazine (Digital)

The Vintage Wedding Book 2016: $8.99

The ZX Spectrum / Commodore 64 Book 30th Anniversary Special Magazine (Digital) Subscription May 23rd, 2016 Issue

The ZX Spectrum / Commodore 64 Book 30th Anniversary Special Magazine (Digital)

The ZX Spectrum / Commodore 64 Book: $8.99

The Ultimate Road Bike Maintenance Magazine (Digital) Subscription May 22nd, 2014 Issue

The Ultimate Road Bike Maintenance Magazine (Digital)

The Ultimate Road Bike Maintenance: $3.11

The Ultimate PC Building Handbook Magazine (Digital) Subscription January 1st, 2016 Issue

The Ultimate PC Building Handbook Magazine (Digital)

The Ultimate PC Building Handbook - Vol2: $7.28

The Universe the Story so Far Magazine (Digital) Subscription May 1st, 2016 Issue

The Universe the Story so Far Magazine (Digital)

The Universe the Story so Far: $10.40

The Ultimate PS4 Handbook Magazine (Digital) Subscription May 16th, 2014 Issue

The Ultimate PS4 Handbook Magazine (Digital)

The Ultimate PS4 Handbook: $7.28

The Windows 7 Book Magazine (Digital) Subscription July 25th, 2012 Issue

The Windows 7 Book Magazine (Digital)

The Windows 7 Book: $11.99

The Web Design Annual Magazine (Digital) Subscription November 18th, 2015 Issue

The Web Design Annual Magazine (Digital)

The Web Design Annual Vol 1: $11.99

The Ultimate World Cup Guide 2010 Magazine (Digital) Subscription May 21st, 2010 Issue

The Ultimate World Cup Guide 2010 Magazine (Digital)

The Ultimate World Cup Guide: $6.24

The Windows 8 Book Magazine (Digital) Subscription September 3rd, 2014 Issue

The Windows 8 Book Magazine (Digital)

Volume 1: $8.99

Reviews