Web Designer - Issue 254 2016 (Gnv64)

(1)

CODE CUSTOM CSS PROPERTIES

EXPLORE THE POWERS OF CSS VARIABLES

BUILD FULLSCREEN EXPERIENCES

INTRODUCE HORIZONTAL AND VERTICAL PAGES TO PROJECTS

CREATE CROSS PLATFORM APPS

UTILISE HTML, CSS AND

JS TO DEVELOP WITH THE ELECTRON FRAMEWORK

ANIM

ATE T

EXT

WITH

CSS3

MAKE HEADLINES APPEAR AND DISAPPEAR

CS

S

FL

IP

EFFECTS

ENGAGE USERS WITH

DYNAMIC ELEMENTS

BEST

TWITTER

APIS

LEARN HOW TO

INTEGRATE, EMBED

& AUTHENTICATE

@W

ebD

esi

gne

rMa

g

/We

bDe

sig

ner

UK

P

A

G

E

S

O

F

E

X

P

E

R

T

U

T

O

R

I

A

L

S

�

jQuery

CSS3

H

T

M

L

5

5 J

J

a

v

a

S

c

r

i

p

t

ME

ET TH

E

WE

B

ANIMATIONS API

GET

INTERACTIVE WITH JA

VASCRIPT

SECRETS OF

UI

D

E

S

I

G

N

DISC

OVER

PA

TTERNS

&

H

O

W

TO

U

S

E T

H

E

M

W

E

B

FONTS

WHA

T’S

NEW WITH

PROS REVEAL THE LATEST

TRENDS & TOP TECHNIQUES

122

122ptMontsptMontserraerrat ExtraBt ExtraBoldold 51p51pt Tungstt Tungsten en SemSemiboliboldd

Abc

1

23

23 Abc123

Abc123

TYPEWOLF

FOUNDER TALKS

TYPE TRENDS

BONNE MARQUE

DELIVERS BEST

PRACTICES

CLEARLEFT

DISCUSS THE

FUTURE OF FONTS

FREE

�� MINUTES

OF HTML VIDEO

ISSUE 254 ISSUE 254

(2)

www.web.design

Stand out from the crowd and .design your

domain name to reﬂect what you do!

Web Designer readers get 40% oﬀ a .design domain name and

email address with code

WEBDESIGN40

www.yourname.design

*Discount valid on non-premium names only. Domain name and Porkbun Email renew annually at regular prices.

.com is so 1997

(3)

www.web.design

Stand out from the crowd and .design your

domain name to reﬂect what you do!

Web Designer readers get 40% oﬀ a .design domain name and

email address with code

WEBDESIGN40

www.yourname.design

*Discount valid on non-premium names only. Domain name and Porkbun Email renew annually at regular prices.

.com is so 1997

(4)

onts,they’r

onts,they’ree eveeverywhrywhere.Noere.No sitsite,e, appapp or

or prinprintedpublicatedpublicationcantioncan livlivee witwithouthout them

them.. But,But, whatwhat’s’s thethe latlatestest tretrend?nd? Whatare

Whatare thelatestthelatest stylstyles?es? WhaWhatt fonfontsts ar

aree hohott rirightnowghtnow?? TToo mamakeke sursuree youyou ar

aree ontheonthe trtraiaill oftheofthe hohottttesestt fofontnts,s, wewe spok

spokee toto thethe induindustrystry.. TyTypewopewolflf supr

supremoemo JereJeremiahmiah ShoaShoaf,f, webweb typog

typographraphyy evaevangelngelistist RichRichardard RuttRutterer andand BonnBonnee Marque creative director Alexander Engzell let Marque creative director Alexander Engzell let you into their world. The talented trio reveal the you into their world. The talented trio reveal the fonts that are trending, the foundries doing fonts that are trending, the foundries doing innovative work, how to choose the right font, innovative work, how to choose the right font, bes

bestt prapracticcticeses anandd whwhatat lieliess aheaheadad forfontsforfonts..

Ke

Keepiepingng wewebb fofontsnts comcompanpanyy thithiss ississueue isis ananothotherer fr

fronont-et-endnd fafavovoururiteite:: UIUI desdesignign.. It’It’ss allaboutpatteallaboutpatternsrns,, butbut it’it’ss als

alsoo aboaboutut chochoosiosingng therightpattetherightpatternrns.s. GetitGetit wrwrongandongand itit canbe

canbe the�inethe�ine linlinee betbetweeweenn sucsuccescesss andfailuandfailurere.. ThiThinknkinging Juic

Juice’se’s digidigitaltal diredirectorctor GuyGuy StraStradlindlingg givegivess thethe lowlowdownondownon theimpor

theimportantancece ofof gegettinttingg itit rigright,ht, thebestthebest tootoolsls foforr thejobthejob an

andd aa whwhololee hohostst ofexaofexampmpleless ofthosofthosee whwhoo hahavegotvegot itit rig

rightht toto guguideonideon thecorrthecorrectect dirdirectectionion.. Goi

Goingng dedevv sidside,e, it’it’ss TTwitwitteterr thathatt gegetsts anan exexamaminainatiotionn – kicking oﬀ wit

– kicking oﬀ with quick and eash quick and easy embeddingy embedding throughthrough toto the more code-intensi

the more code-intensive application of authenticatiove application of authentication.n. IfIf you want

you want TwTwitter in your itter in your projects, page projects, page 7474 isis thethe perfectperfect place to get started.

place to get started. As

As alwalwayays,s, enenjojoyy thethe ississueue..

Welcome

t

o

t

h

e

s

u

e

THEWEB

DES

IG

NER

MIS

SIO

N

Tobe

themost

ac

ces

sib

leand

inspiring

vo

icefor

the

industry

,

offe

ring

cutting-ed

ge

fea

tures

and

techni

quesvital

to

buildingfuture-pro

of

online

cont

ent

Steven

Jenkins

““

We’rehuge

believersin

cross-

cross-disciplinary

disciplinary

collabora

tion,

but

it’s

alsonot

unco

mmon

fo

r

ustohav

e

a

strategy

-only

project,

or

a

desig

n-onl

y

project

””

Odopod

Odopod fusefuse strategystrategy,, design,design, andtechnol

andtechnologytoogyto helhelpp leadleadinging companie

companiess innovainnovate.te.PagPagee 3434

“

Swiss

fo

undry

Gr

ill

i

Typ

e

ar

e

doing

innov

ati

ve

wo

rk.

The

y

onl

y

ha

v

e

a

sm

all

han

dful

of

fami

li

es,

bu

t

eac

h

on

e

stri

v

es

t

o

do

so

me

thing

different

”

Follow us on Twitter for all the news & conversation

@WebDesignerMag

Vi

sit ou

r blog f

or op

inio

n,

freeb

ies

&

mor

e

www.gadgetdaily.xyz

Highlight

meta meta __________________________________________________________________________________________________________________________________________________

3

3 <

<

>

welcome

F

Typewolf tells us what’s trending in type

Video Tuition

– 4 hours of expert visual web design video guides from

Pluralsight (pluralsight.com)

Assets

– 8 star �ilter PS actions and 10 grunge paint overlays

– 8 star �ilter PS actions and 10 grunge paint overlays from

from

SparkleStock

SparkleStock (sparklestock.com)

(sparklestock.com)

2

24

4 Designer resources

Designer resources

FREE

_–

_exclusiv

_{e with this}

_issue

www.filesilo.co.uk/webdesigner

– 3 HTML5/Responsive web templates

(5)

4

__________________________________________________________________________meta

<meta>

contributors

Got

web skills?

We’re always looking for the hottest web-design talent. Email [email protected]

with examples of your creative work

Neil Pearce

Neil is a web designer from Essex and has been contributing to the magazine for many years. In this issue he demonstrates how to use CSS to create an easy-to-implement card �lip e�fect. Simply add your own content. Page 54

Leon Brown

Leon is a freelance web developer and trainer who assists web developers in creating e��icient code for projects. This issue he reveals a host of techniques, as seen on the top-class website pages featured in our Lightbox. Page 18

Adam Onishi

Adam is a developer working on components and tooling in the Origami team at the Financial Times. This month Adam takes a look at CSS variables and how they are for more than just storing reusable values in your CSS. Page 58

MarkShu��lebottom

Mark is a professor of Interaction Design at Sheridan College of Advanced Learning and is also an Adobe Education Leader. In this issue Mark is using FullPage.js to create horizontal/vertical fullscreen experiences. Page 50

Matt Crouch

Matt is a front-end developer creating intuitive designs for Cinolla in Bournemouth. In this issue he takes a closer look at how to use the Web Animations API in your projects and pages. Page 80

David Howell

David is an experienced writer, author and journalist who runs his own company, Nexus Publishing. This issue he takes time out to chat with super-talented agency Odopod, who drive digital innovation. Page 34

GuyStradling

Guy is the digital director at award-winning agency Thinking Juice. This issue he tackles the world of UI design. He reveals invaluable practical advice on how to use UI patterns the right way, as well the best tools needed. Page 66

Tam Hanna

Tam’s career has seen him wrestle with a variety of stacks and languages. This issue he takes a closer look at the best Twitter APIs out there. He starts with the easier to implement, like embedding before tackling authentication. Page 74

This issue’s panel of experts

“

Delicate,

high-contrast

display serifs set

at large sizes look

gorgeous on

Retina screens.

This is a trend

we’ll see more of

in the future

”

Welcome to that

bit of the mag

where we learn

more about the

featured writers

and contributors…

Jeremiah Shoaf

Jeremiah is the kingpin at the excellent type site Typewolf. This issue he talks what’s trending and recommends cl assic and new fonts. Elsewhere we have web evangelist Richard Rutter and Bonne Marque creative director Alexandere Engzell on new fonts and the future of fonts. Page 40

Imagine Publishing Ltd

Richmond House, 33 Richmond Hill Bournemouth, Dorset, BH2 6EZ

 +44 (0)1202 586200

Web:www.imagine-publishing.co.uk www.gadgetdaily.xyz

www.greatdigitalmags.com

Magazine team

Editor Steven Jenkins

[email protected]

 01202 586233

Designer Harriet Knight Production Editor Carrie Mok Photographer James Sheppard Senior Art Editor Will Shum Editor In Chief Amy Squibb Publishing DirectorAaron Asadi Head of DesignRoss Andrews

Contributors

Stefan Mischook, Craig Murphy, Mark Billen, David Howell, Tom Wittlin, Jeremiah Shoaf, Richard Rutter, Alexander Engzell, Tam Hanna, Mark Shufﬂebottom, Neil Pearce, Adam Onishi, Leon Brown, Matt Crouch, Guy Stradling, Liam Warr, Newton Ribeiro de Oliveira, Greg Whitaker, Kym Winters, Phil King, Amelia Jones, Stephen Holmes, Carrie Mok

Advertising

Digital or printed media packs are available on request. Head of Sales Hang Deretz

 01202 586442

[email protected] Account Manager Luke Biddiscombe

 01202 586431

FileSilo.co.uk

Assets and resource ﬁles for this magazine can be found on this website.

Register now to unlock thousands of useful ﬁles. Support ﬁ[email protected]

International

Web Designer is available for licensing. Contact the International department to discuss opportunities. Head of International Licensing Cathy Blackman

 +44 (0) 1202 586401

[email protected]

Subscriptions

For all subscription enquiries: [email protected]

 0844 848 8413  +44 1795 592 878 www.imaginesubs.co.uk Head of Subscriptions Sharon Todd

Circulation

Circulation Director Darren Pearce

 01202 586200

Production

Production Director Jane Hawkins

 01202 586200

Finance

Finance Director Marco Peroni

Founder

Group Managing Director Damian Butt

Printing & Distribution

Printed by Southernprint Ltd, 17-21 Factory Road Upton Industrial Estate, Poole, Dorset, BH16 5SN Distributed in the UK, Eire & the Rest of the World by Marketforce, 5 Churchill Place, Canary Wharf, London E14 5HU

 0203 787 9060

www.marketforce.co.uk

Distributed in Australia by Gordon & Gotch Australia Pty Ltd, 26 Rodborough Road, Frenchs Forest, NSW 2086, Australia

 +61 2 9972 8800

www.gordongotch.com.au

Disclaimer

The publisher cannot accept responsibility for any unsolicited material lost or damaged in the post. All text and layout is the copyright of Imagine Publishing Ltd. Nothing in this magazine may be reproduced in whole or part without the written permission of the publisher. All copyrights are recognised and used speciﬁcally for the purpose of criticism and review. Although the magazine has endeavoured to ensure all information is correct at time of print, prices and availability may change. This magazine is fully independent and not afﬁliated in any way with the companies mentioned herein. If you submit material to Imagine Publishing via post, email, social network or any other means, you automatically grant Imagine Publishing an irrevocable, perpetual, royalty-free license to use the materials across its entire portfolio, in print, online and digital, and to deliver the images to existing and future clients, including but not limited to international licensees for reproduction in international, licensed editions of Imagine products. Any material you submit is sent at your risk and, although every care is taken, neither Imagine Publishing nor its employees, agents or subcontractors shall be liable for the loss or damage.

(6)

Our PCs come recommended,

ready & with next day delivery!

Chillblast Fusion Core i7

Custom Video / Photo Editing PC

BEST FOR: Photo and video editing,

power users, gaming after hours!

£1599.99

INC VAT

Monthly Payment Options Available

For full specs visit:

www.chillblast.com/FusionCorei7

Next Day

Delivery!

Fusion Photo OC VII

Photo Editing PC

- Intel Core i7-6800K Processor

- 32GB DDR4 Memory

- NVIDIA GeForce GTX 1070

- 256GB M.2 PCIe Solid State Drive

- Windows 10 Home

£2139.99

INC VAT

For full specs visit:

www.chillblast.com/photooc7

Fusion Photo OC Lite II

Photo Editing PC

£1299.99

INC VAT

For full specs visit:

www.chillblast.com/photooclite2

3 Laptop

£1099.99

INC VAT

For full specs visit:

www.chillblast.com/ocmobile3

Chillblast

The UK’s most awarded PC manufacturer

www.chillblast.com

01202 057 275

Prices are correct at time of going to print (26-08-16) E&OE

- Intel Core i7-6700K Processor

- 16GB DDR4 Memory

- NVIDIA GeForce GTX 750Ti

- 128GB M.2 PCIe Solid State Drive

- Windows 10 Home

- Intel Core i7-6700HQ Processor

- 16GB DDR3 Memory

- NVIDIA GeForce GTX 950M

- 128GB M.2 PCIe Solid State Drive

- Windows 10 Home

(7)

6

__________________________________________________________________________meta

<meta>

insid

Cutting-edgefeatures, techniques andinspiration for web creatives

Quick look…

08 Glorious, glorious GitHub

The popular repo hosting service is over eight years old and still growing. Web Designer looks at what’s been happening over the last year

10 Webkit: The best must-try

resources out there

Discover the libraries and frameworks that will make your site a better place to visit

11 Will AI kill coding?

Skynet isn’t here quite yet, but basic-level AI already is. How long will it be before it takes over web development?

16 Lightbox

A showcase of inspirational sites and the techniques used to create them

28 When Juice meets beer

Camden Town Brewery lets Shoreditch agency Studio Juice lend its design expertise to create an exciting new presence

34 Driving digital innovation

This time out it’s Odopod. They like to fuse strategy, design and technology to help leading companies innovate

40 What’s new with web fonts

Web Designer employs the talents of Typewolf, Clearleft and Bonne Marque to discuss what’s trending in type

66 The secrets of UI design

There’s lots of UI patterns out there, but how useful are they if you don’t know how to use them? Read on to �ind out more

74 Best Twitter APIs

Discover the best APIs and �ind how to embed, integrate and authenticate

92 Hosting listings

An extensive list of web hosting companies. Pick the perfect host for your needs

98 Next month

What’s in the next issue of Web Designer?

Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch…

[email protected]

@WebDesignerMag

www.gadgetdaily.xyz

ontents

Going retro withrecordsandtunes

Cover focus

34 A driving force for bringing digital innovation to clients

ProFile:

Odopod

40

16

(8)

meta _________________________________________________________________________

7 <tutorials>

Web gurus take you step-by-step

through professionaltechniques

74 Best Twitter APIs

Learnhow to embed, integrate and authenticate Twitter elements withthis collection

80 Say hellotothe Web Animations API

Take control of animationplaybackthrough JavaScript to create a reactive user experience

86 Build an appwith Electron

Put togethera cross-platform native application using Electron and popular web technologies

FileSilo

      

     

    

   

A comprehensive collection

of free designer resources!

96 Get the latest must-have resources and videos

web workshop

web developer



WEBDESIGNER

 

  

08 What has been happening

with GitHub?

The repository hosting service is constantly expanding and growing. Web Designer takes a closer look at who’s using what

10 Webkit: The best must-try

resources out there

Need a new framework or library? Then this is where you need to start

11 Comment:

 

The future is AI, but how long before it takes control of the way we develop for the web?

<header>

The tools and trends to

inspire your web projects

48 Activate a fullscreen menu

www.grannyssecret.com

Add a button that opens a fullscreen overlay menu

62 Animate text with CSS3

www.space-advisor.ca

Create a drawing e�fect that disappears and reappears

C

_{  }

  

   

   

  

 

Stefan Mischook

50 Build fullscreen experiences

Utilise the talents of the fullPage.js library to create horizontal and vertical one-page screens

54 Create a CSS3 �lip e�fect

Reveal your talents with an online business card that �lips on click to unveil more details and contact points

58 Code a custom theme with CSS

Discover how to use the powers of CSS Variables to instantly change how a page looks

96

66

UI design is everywhere online. Make sure you use the right patterns the right way

Never

miss an issue

Subscribe

Turn to page 64 now USA readers turn to

page 85 for an exclusive o�fer

(9)

itHub is theweb design/ developer community’s go-to repository, and a recent report fromGitHub reinforces its popularity. The GitHub Octoverse 2016 report takes a look back at the last 12 months and takes a peek at the highlights across that period. So, what has been happening?

Straight from the Open Source section, users are reliably informed that the code that sent Apollo 11 to the moon

(github.com/chrislgarry/Apollo-11 ) is there, along with an open source curriculum that helps non-pro�its among many others.

The online report can be found at octoverse.github.com and reveals what are the most starred open source

repositories on GitHub – eﬀectively the most popular. Browsing through what’s on oﬀer,you will seethatReact, ReactNative, Bootstrap, D3 andSwift are allvery popular repositories. The interactive nature of theOpen Source section isnot

immediately obvious, but the name of each entry redirects users directly to the selected library.

GitHub’s growth has been phenomenal since its inception. The report covers just 12 months, which re�lects its success. In that short time, GitHub had more than

5.8 million active users and over 19.4 million active repositories. What’s also impressive is the number of new students, developers and businesses that have joined the community. Over 5 million new users and 300,000 organisations joined the crew, with over 2.8 million creating their very �irst repository. Elsewhere, 815,000 made their �irst pull request.

It’s not just the numbers that impress, but the calibre of the people and

organisations using GitHub. One example is the US government (github.com/

WhiteHouse/source-code-policy). This gives visitors the option to share via a pull request or open an issue. But maybe the biggest surprise is that the organisation

withthe mostopen source contributorsis Microsoft.It has over 16,000contributors while Facebook comesin second with just over 15,600 contributors. Next up is Docker (docker.com), the world’s leading software containerisation platform. Angular is next, closely followed by Google. Also in the top ten are Apache and npm. If you want to take a closer look at each repository, click the organisation’s name and you can browse through everything that they have to oﬀer.

Looking at the repositories with the most open source contributors, things change around a little. Microsoft slips down the chart to sixth with its vscode repository, while Facebook moves one place above with the react-native repository. Elsewhere, Font-Awesome takes top spot, npm third, and Angular ninth and tenth with material and angular repositories respectively. The report also contains statistics for the most forked repositories and those with the most users reviewing code.

GitHub has always been the go-to repository on the web and its expansive growth proves that it is more popular than ever. Are you one of those people who don’t use it? If you are, join up now and become part of the community.

8

_______________________________________________________________________header

The web community’s favourite project hosting service is over

eight years old. We look at how it has grown over the last year

What’s happening

with GitHub?

GetWeb

Designer

digital

editions

WebDesigner’s latest digital addition to its burgeoning collection is The Developer’s Guide to JS. Check out how to get started with ES6, use Babel to compile code to work everywhere and get started with npm.

Don’t forget Animate with HTML & CSS and 3D and the Web. We cherry-pick a collection of the best animation and 3D techniques to add interest to any project.

Plus, check out Advanced Angular, 20 Quick�ire HTML & CSS techniques and Amazing Websites and How to Build them Vol 03. How can you get your hands on a Web Designer digital edition? Head to bit.ly/1hsGYgl to download the free WebDesigner p and�ind them waiting foryou

hase

G

News

[email protected] | @WebDesignerMag

CONTACT US AT:

Header

The tools, trends and news to

inspire your web projects.

Get your hands

on a collection

of the best

contemporary

techniques

5 most popular languages on GitHub

GitHub is awash with repositories,

libraries, frameworks and tools for

web designers and developers. But

what are the languages that get the

most love? At number one by a long

way is JavaScript. This ranks with

over twice as many pull requests as

second-placed candidate Java. CSS

currently sits in seventh place with

around 83% less than JavaScript.

Sadly for web designers, HTML is

nowhere to be seen. But if it’s JS

you want, Github is one of the best

destinations to �ind new and

established code bases.

2m

1m

1.5m

0.5m

0m

JavaScript Java Python Ruby PHP Source: https://octoverse.github.com 1.6m 0.76m 0.74m 0.74m 0.47m

(10)

header_______________________________________________________________________

9 Header

Graphics

Coffe Side

http://bit.ly/2dCUOBx

Co�fee and Star Wars has to be a winning combination, surely? Jady Salvatico thinks so and so do we.

WordPress

Travelia

travelia.softhopper.net

A responsive travel and outdoor theme with a personalised touch. Choose from ten di�ferent styles of layout.

Colour picker

Typesetter

TT Lakes

myfonts.com/fonts/type-type/tt-lakes/

Inspired by an unusual sign spottedin a former Finnish town, TT Lakes is a simple and functional sans-serif that has style without even trying. It consists of 54 typefaces and can take on any challenge.

Internet Princess

http://bit.ly/2dkcJfR

01. COBAYES

cobay.es/en/

Simple but engaging animations populate the journey

02. Shapish

shapish.com

Draw on the screen and see your eﬀort transformed into an animated pattern

03. Create Your Cocktail

russellandcodrinks.com

Create a cocktail in a virtual space. Then try at home

04. The Hidden Worlds of

the National Parks

http://bit.ly/2d9wPsq

Smart video tells a story

Inspiration

Sites of the month

02.

03. 01. 04. #A5518B #CEE1F1 #DA5391 #CDDC29 #C368A9

(11)

10

_____________________________________________________________________header

Onsen UI

onsen.io

Onsen UI provides a UI framework and tools for creating quick, good-looking HTML5 hybrid mobile apps based on PhoneGap / Cordova. It has no

framework dependencies, meaning that app development is easy with any of the many JavaScript frameworks currently on the market. All the tools you need a re in the cloud.

Lory

meandmax.github.io/lory

A touch-enabled slider written in vanilla JavaScript. You add the prerequisite HTML structure and CSS and then get creative with easy-to-add code snippets.

Reframe.js

dollarshaveclub.github.io/reframe.js Need your videos to work on all screens? This neat little plug-in wraps up any video in a responsive div with an intrinsic ratio to get the job done.

regl

regl.party

A new functional abstraction for WebGL. Creating is easier than writing raw code and has fewer overheads, making it faster than most existing frameworks.

webkit

TOP 5

Web conferences – November 2016

Get yourself a seat at the biggest and best conferences coming your way soon

ffconf

2016.ﬀconf.org

A conference with a diﬀerence. It’s a one-day event (run twice on consecutive days) focused on dev and CSS.

Gather North

gathernorth.com

A weekend conference for web designers, graphic designers, developers, bloggers, project managers and more.

HalfStack

halfstackconf.com

Staged in a pub, it features talks on contemporary front-end dev tools: ES6, TypeScript, React.js, Dojo 2 and more.

Frontier

www.frontierconf.com Eight speakers cover the many aspects of front-end design. And there’s an after party when you can meet other creatives.

Adobe Max

max.adobe.com

Three days of fun and frolics, MAX brings together over 200 expert speakers covering a myriad of creative subjects.

Header

Resources

[email protected] | @WebDesignerMag

CONTACT US AT:

Discover the must-try resources that

will make your site a better place

(12)

Header

Opinion

header_______________________________________________________________________

11

rti�icial intelligence (AI) is slowly being developed, but there is a way to go! True AI will take a while before it is realised. As it develops, you will start seeing the simple jobs replaced by AI long before it �inally gets to coders.

Scientists have divided AI into three categories:     

        

                   type of AI can only do a few simple things.

                  ahead and communicate. When that happens, AI will replace all jobs, not just coders.

Coding has a lot to do with being able to

communicate with humans, since you have to speak

with people to �igure out what they want in their websites           coders/developers often overlook: the importance of            big part of being a great coder.

Of all the skills that AI will have to learn, the nuances of human communication will be the most di�icult. So, long before AI will start coding, it will replace construction workers, truck drivers, accountants, maintenance workers and many other jobs.

…AI represents a huge change in our society and likely            play out. But what is clear is that the simple tasks will be replaced with AI before coding… given how complex coding can be.

        the alarm bells about the birth of AI. This includes                    

         into place and AI will likely be tightly controlled. This will further slow the adoption of full AI in any �ield. So this will further slow the replacement of live coders with AI.

As primitive AI begins to come online over the next 20 years, you will �irst see AI change the role of coders/developers. So, as we use frameworks and         development today, primitive AI will slowly works its way into development in an assistive role. Instead of replacing coders outright, AI will merely allow us more        aspects of an app.

Finally, given all the experts seem to think true AI            concerned. In fact, the fabric of society will change         be replaced.

Will AI kill coding?

A

Stefan Mischook

President studioweb.com

(13)

12

____________________________________________________________________________________________________________________________________________headerheader

Shoutem

shoutem.com shoutem.com

‘Everything you need to create amazing ‘Everything you need to create amazing apps’, Shoutem has a myriad tools apps’, Shoutem has a myriad tools toto help build the app you want. A help build the app you want. A drag-and-drop interface makes it ideal for those drop interface makes it ideal for those less savvy with code. It supports less savvy with code. It supports multiple content sources, has built-in multiple content sources, has built-in analytics, the option to introduce analytics, the option to introduce eCommerce and advertising. Plus, you eCommerce and advertising. Plus, you can preview any app on your mobile. can preview any app on your mobile.

Granim.js

sarcadass.github.io/granim.js sarcadass.github.io/granim.js

A small JavaScript library that produces A small JavaScript library that produces �luid and interactive gradient animations �luid and interactive gradient animations Select your colours and criteria. Add a Select your colours and criteria. Add a little extra with image backgrounds. little extra with image backgrounds.

Inferno.js

github.com/trueadm/inferno github.com/trueadm/inferno

An extremely fast, React-like JavaScript An extremely fast, React-like JavaScript library for building modern UIs. Inferno library for building modern UIs. Inferno is an isomorphic library for creating a is an isomorphic library for creating a high-performance UI, perfect for mobile. high-performance UI, perfect for mobile.

A nerd’s guide to colour

on the web

css-tricks.com/nerds-guide-color-web css-tricks.com/nerds-guide-color-web Colour is key to conveying a message. Colour is key to conveying a message. This resource oﬀers tips on the methods This resource oﬀers tips on the methods needed to get colour right on the web. needed to get colour right on the web.

webkit

TOP 5

Inspiratio

Inspirational

nal infogra

infographics

phics

Turn your data into a story with instant attention-grabbing impact, like these examples

Agriculture

visual.ly/agriculture visual.ly/agriculture

Lifelike illustrations interjected Lifelike illustrations interjected with cutaways make the world with cutaways make the world of agriculture more fascinating of agriculture more fascinating than you can imagine. than you can imagine.

Dangerous

bac

bacter

teria

ia

tabletopwhale.com tabletopwhale.com

Who knew bacteria could be so Who knew bacteria could be so interesting? This stylish interesting? This stylish �lowchart is very engaging. �lowchart is very engaging.

Mourinho in

the CL

bit.ly/2cwBZ0Q bit.ly/2cwBZ0Q

This football infographic is This football infographic is beautifully crafted with lots of beautifully crafted with lots of subtle additions. subtle additions.

Evolution of

the web

evolutionoftheweb.com evolutionoftheweb.com This example adds interactivity This example adds interactivity to entice the reader. Pop-ups to entice the reader. Pop-ups add a plethora of useful info. add a plethora of useful info.

Inspiring

infographics

bit.ly/2cU8ib1 bit.ly/2cU8ib1

Check out this collection of Check out this collection of printed press infographics printed press infographics inspired by the Rio Olympics. inspired by the Rio Olympics.

Header

Resources

[email protected]

.uk | | @W

@WebDesignerMag

ebDesignerMag

CONTACT US AT:

Discover the must-try resources that

will make your site a better place

(14)

nline sales psychology comes down to nline sales psychology comes down to seven fundamental core principles seven fundamental core principles that aim to reduce the amount of that aim to reduce the amount of ‘friction’ generated on a website and to ‘friction’ generated on a website and to also subconsciously improve the trust that your also subconsciously improve the trust that your website generates. Online sales psychology is heavily website generates. Online sales psychology is heavily based around ‘pattern recognition’ – which is our brain based around ‘pattern recognition’ – which is our brain looking to match what we are seeing to what we looking to match what we are seeing to what we already know, and looking for a short cut to complete already know, and looking for a short cut to complete the action/journey in front of us.

the action/journey in front of us.

When your visitors interact with your website, they When your visitors interact with your website, they look to match it with what they already know. For look to match it with what they already know. For example, people are used

example, people are used to navigating around anto navigating around an eCommerce website in a certain way: experience tells eCommerce website in a certain way: experience tells them where they should expect to �ind an item in your them where they should expect to �ind an item in your online store or how to search for it. If you break this online store or how to search for it. If you break this pattern, and for example put

pattern, and for example put your navigation on theyour navigation on the right-hand side of your website instead of the left – a right-hand side of your website instead of the left – a proven way to kill conversions – then this will add to the proven way to kill conversions – then this will add to the confusion and work that your visitor will have to do to confusion and work that your visitor will have to do to navigate around your website, as it breaks their navigate around your website, as it breaks their pattern. So, when designing or reviewing your pattern. So, when designing or reviewing your websites, remember that your visitors already have a websites, remember that your visitors already have a prede�ined pattern in their head, based

prede�ined pattern in their head, based on experience,on experience, of how to use your website. This means that with every of how to use your website. This means that with every click and every movement of their on-screen cursor, click and every movement of their on-screen cursor, your visitor has a set of prede�ined actions they expect your visitor has a set of prede�ined actions they expect from your website.

from your website.

Much more than a checklist of seven core principles Much more than a checklist of seven core principles that your website must maximise, online sales that your website must maximise, online sales psychology involves understanding your visitors’ psychology involves understanding your visitors’ browsing and buying behaviour and optimising your browsing and buying behaviour and optimising your website around these behaviours.

website around these behaviours.

Going one step further than simply using data Going one step further than simply using data analytics, a process of online

analytics, a process of online sales psychology is usingsales psychology is using screen-recording software to actually watch what your screen-recording software to actually watch what your visitors are doing, and why. Analytics only tells you if visitors are doing, and why. Analytics only tells you if there’s a potential issue; online sales psychology there’s a potential issue; online sales psychology identi�ies exactly what this issue is and resolves it. identi�ies exactly what this issue is and resolves it.

Craig Murphy

Managing director at ALT

altagency.co.uk

So, what are the seven core principles? So, what are the seven core principles? These principles are very simple, yet often These principles are very simple, yet often

overlooked, and form the absolute foundation to online overlooked, and form the absolute foundation to online sales psychology:

sales psychology:

Principle 1 – The irresistible characteristics of your call Principle 1 – The irresistible characteristics of your call

to action to action

Principle 2 – The psychology and use of colours Principle 2 – The psychology and use of colours Principle 3 – The three-second rule

Principle 3 – The three-second rule Principle 4 – The ‘F’ pattern Principle 4 – The ‘F’ pattern

Principle 5 – Simplify and reduce friction Principle 5 – Simplify and reduce friction Principle 6 – The trust elements Principle 6 – The trust elements Principle 7 – Testing, testing, testing Principle 7 – Testing, testing, testing

These seven principles apply in their simplest forms These seven principles apply in their simplest forms to all websites out there; whether it be an eCommerce to all websites out there; whether it be an eCommerce website or a lead generation website, the core website or a lead generation website, the core fundamentals are the same.

fundamentals are the same.

The seven principles are based around pre-existing The seven principles are based around pre-existing patterns that your visitors already have in their head. patterns that your visitors already have in their head. When thinking about eCommerce, it’s hard to ignore When thinking about eCommerce, it’s hard to ignore the eﬀect that Amazon has had on the way we shop the eﬀect that Amazon has had on the way we shop and the subconscious conditioning they have applied and the subconscious conditioning they have applied to us all! This does not mean that you should copy to us all! This does not mean that you should copy everything that Amazon has done, but look everything that Amazon has done, but look aroundaround their pages and really understand how the their pages and really understand how the design,design, content, layout and images work together. Look at content, layout and images work together. Look at how their pages convey the aforementioned seven how their pages convey the aforementioned seven principles and then look at all the copycat competitors principles and then look at all the copycat competitors who have tried to duplicate what they do without a who have tried to duplicate what they do without a core understandi

core understanding of ng of these principles – they do these principles – they do OK,OK, but not great. Then, lastly, take a look at those but not great. Then, lastly, take a look at those copycats who have not followed the seven core copycats who have not followed the seven core principles and it becomes clear

principles and it becomes clear to see how conditioningto see how conditioning around these principles plays a core part in how well a around these principles plays a core part in how well a website performs.

website performs.

Occasionally when you see an Amazon copycat style Occasionally when you see an Amazon copycat style website, you may see them attempt something website, you may see them attempt something diﬀerent to try to ‘break the pattern’. This could be using diﬀerent to try to ‘break the pattern’. This could be using a more complicated search bar or

a more complicated search bar or moving themoving the navigation from the left-hand side of the screen to the navigation from the left-hand side of the screen to the right-hand side of the screen. Not only does this break right-hand side of the screen. Not only does this break the pattern and expectations of a visitor, it creates the pattern and expectations of a visitor, it creates friction, makes them think, breaks the three-second rule friction, makes them think, breaks the three-second rule and kills conversions. Why? Because the visitor has a and kills conversions. Why? Because the visitor has a prede�ined experience in their head that they are used prede�ined experience in their head that they are used to, which has been built up subconsciously, by browsing to, which has been built up subconsciously, by browsing hundreds of websites, and [a diﬀerent layout] now hundreds of websites, and [a diﬀerent layout] now causes confusion within their mind… sending them causes confusion within their mind… sending them running for the red X or a competitor.

running for the red X or a competitor.

To get a more in-depth analysis of the seven To get a more in-depth analysis of the seven principles of online sales psychology, visit: principles of online sales psychology, visit: altagency.co.uk/online-sales-psychology altagency.co.uk/online-sales-psychology

O

Discover the processes that dictate how visitors ‘shop’ around a website

Th

The p

e pri

rin

nci

cip

plles

es o

off

online sales

psychology

““

Your visitor has a set

of predefined actions

they expect from

your website

””

Header

Comment

header header____________________________________________________________________________________________________________________________________________

13

(15)

W

e

l

o

v

e

m

a

ki

ng

W

eb

De

s

i

gn

e

r

a

n

our mission to make it the best it

However, we’re not perfect so we

how we could make Web Designe

better. That decision was easy: as

readers for their help. By answerin

questions, you could join the Web

reader’s panel. Sign up now

_.

Steven Jenkins

Editor

Reader Survey



_G

_e

_t

₁

₀

_%

_o

_f

_o

_u

_r

_b

_o

_k

_s

_a

_n

_d

_m

_a

_g

_a

_z

_i

_n

_e

_s



_Ge

_t

_ac

_c

_e

_ss

_t

_o

_an

_e

_x

_c

_lu

_si

_v

_e

_mo

_nt

_hl

_y

_su

_b

_sc

_ri

_p

_t

_io

_n

_of

_f

_er



_{Become eligible for exclusive competitions & free gifts}

T

a

k

e

o

u

r

th

r

ee

-m

i

n

ut

e

s

u

r

v

e

y

a

n

d

…

Have

your

say!

Jo

i

n

ou

r

te

am

toda

y

!

(16)

Last year we used your input

to make some fantastic

improvements, including…

Four changes

you asked for

in 2015…

Complete our survey & join the team today

www.gadgetdaily.xyz/wd-survey

Complete

survey

Step 1

Get

involved

Step 2

Earn

rewards

Step 3

1 Current web trends

The web is always changing so

keeping up with the latest trends,

tools, libraries, frameworks and

l

our aim

Mor

You wanted more tutorials and

web workshops, so that’s what we

try to give you every issue. More

tutorial pages for more learning.

3 Full-length features

In-depth features on the latest

design and development subjects.

We get the pros to give us the

lowdown on what you need to know.

4 Web development

We make sure that the

popular and up-and-coming tools,

libraries and frameworks get an

airing every issue.

Exclusive discount subscription to the magazine

Incredible savings for new and existing subscribers.

Plus Free delivery direct to your door.

Exclusive savings on mags and books

Get a 10% discount code to use at our online shop

Competitions

Get the chance

to enter exclusive

competitions for

money-can’t-buy prizes

Free gifts

Become eligible for

free gifts including

digital editions for

phones and tablets

Have your say

Gain a place on our

reader panel, giving

you regular input on

the magazine

Take part in our 2016 reader survey and yo

can enjoy these fantastic beneﬁts

Reader Survey

Only

takes 3

(17)

16

____________________________________________________________________lightbox

“

LA agency Let’s Build creates a

suitably retro site for the HBO TV

series Vinyl, with content arranged

into magazine-style issues

”

Developmenttechnologies WordPress, jQuery, WebGL, GSAP, Spotify Play Button

VinylCuts.NYC

vinylcuts.nyc/show/splash

(18)

lightbox ____________________________________________________________________

17 LightBox

VinylCuts.NYC

Above

Avant Garde Gothic by ITC is used exclusively throughout in several weights and served by Fonts.com

#F508C8 #3 670F1 #2CE8DF # FCE 300

(19)

18

____________________________________________________________________ lightbox

LightBox

VinylCuts.NYC

Use the old school television noise e

�fect to give a retro feel to elements of your website design

Create a TV noise effect for

website content

1. HTML initiation

The �irst step is to initialise the HTML document with a head and body section. The head section contains any page description information and links to resources – a CSS stylesheet in this example. The body section is used to store the main content – this HTML is de�ined in Step 2.

<!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”description” content=”description”> <title>Noise Effect</title>

2. Noise content

Areas of the page that will have the noise effect applied to them will have a “noise” class applied to them. In our example, we will display an image that will have the noise effect over it. The �inal element inside the noise effect is used to display the distortion over the content.

</div>

3. CSS initiation

Create a new �ile called styles.css. We start this �ile with CSS rules to describe the initial document state – for example page HTML and body tags. We want these to cover the full size of the screen without any borders. This is achieved by explicitly stating their size and padding so that no browser defaults are used.

body,html { display: block; width: 100%; height: 100%; background: #000; padding: 0; margin: 0; }

4. Noise components

There are two main parts of the noise eﬀect – the content container and the noise element to be placed over the content. The last element is selected as the noise eﬀect element. We start this de�inition by setting its background image; you can generate your own at www.cssmatic. com/noise-texture. .noise{ position: relative; } .noise > *:last-child{ background-image: url(noise.png); background-repeat: repeat; background-position: 0 0; }

5. Positioning the noise

With the content container using relative positioning, the noise element can be positioned absolutely at the top-left corner of its parent container. We also want to set the noise element to be the full width and height of the parent container, along with an opacity so that it only partially distorts the content it overlays. Finally, we also want to apply an animation – we’ll create this as “noiseMove” in the next step.

.noise > *:last-child{ position: absolute; opacity: .35; top: 0; left: 0; width: 100%; height: 100%;

animation: noiseMove 0.3s infinite linear alternate;

}

6. Noise animation

The noise eﬀect is now in place, but it is only a

semi-transparent image overlaying the content. We can make this image look like noise by making it appear to move in random places. We achieve this by de�ining the noiseMove animation to change the background image to random positions. @keyframes noiseMove{ 0% { background-position: 50px 300px; } 20% { background-position: -100px 0; } 40% { background-position: 150px -50px; } 60% { background-position: 0 -200px; } 80% { background-position: -10px -80px; } 100% { background-position: 70px 90px; } }

Distorted Content

This interesting eﬀect is good to use as part of decorative design, but make sure you don’t use it with important content as you may run into usability issues.

(20)

Enterprise features

• Load balancing

• VPN

• External ﬁrewall

Set up in seconds

• Easy to use

control panel

Cloud Servers

from:

£15.

00 per month ex VAT charged at 20%

UK data centres,

UK support

Flexible

Pay as you

use pricing

Call

0808 1686 777

or visit

fasthosts.co.uk/cloud-servers

SERVERS • WEB HOSTING • DOMAIN NAMES • EXCHANGE EMAIL

next generation Cloud Servers

(21)

20

__________________________________________________________________lightbox

“

Parisian Alexandre Rochet

seeks work in New York with a

slick portfolio site packed with

sophisticated transition effects

”

DevelopmenttechnologiesHTML5, JavaScript, SVG, CSS

Alexandre Rochet

alexandrerochet.com

(22)

lightbox ____________________________________________________________________

21

#8CB9DA #7CB1 DB #F7E2C3 #A1A0A5

Above

Domaine Display by Kilm Type Foundry is used across paragraph text within each project section

Above

Hazelwood Light font, designed by Jonas Hecksher and published by Playtype, is used on the tiny <h4> headings