NET The Voice of Web Design

Complete details on design interface animations

Val head, raFael Conde, Paul BoaG, aaron GustaFson

116 Pages

14134 Reads



PDF Format

14.7 MB

HTML Learning

Download PDF format

  • Val head, raFael Conde, Paul BoaG, aaron GustaFson   
  • 116 Pages   
  • 27 Feb 2015
  • Page - 1

    design interface animations Project Issue 265 : April 2015 : Improve your HTmL forms Develop forms that work on any device reaL-TIme apps wITH anguLarJs Convert your app to real time with Firebase 15 specTacuLar skeTcH pLugIns Get more from this top web and UI design tool The voice of web design How to develop WordPress themes faster free read more..

  • Page - 2

    read more..

  • Page - 3

    april 2015 3 Welcome editor’s note Featured authors raFael Conde Rafael is the co-founder of SketchCasts. On page 76 he runs down his top 15 handy Sketch plugins w: t: @rafahari Val head Val is a designer who loves web animation. On page 68 she explains how to create amazing interface read more..

  • Page - 4

    4 april 2015 Art contributions mAnAgement content and marketing director Nial Ferguson actionURI( actionURI( actionURI( Head of content & ma rketing, photography, creative and design Matthew Pierce actionURI( read more..

  • Page - 5

    read more..

  • Page - 6

    6 april 2015 contents Issue 265 : April 2015 : The TruTh abouT uX design 28 Paul boag argues it’s time UX designers made their way into the boardroom ToP ConTenT ManageMenT 26 angus edwardson unpicks the movement tackling the concept of content-first WorksPaCe 18 Lahaina Mae Mondoñedo gives a tour of web design read more..

  • Page - 7

    april 2015 7 Contents Design inteRFace animations design inTerFaCe aniMaTions 68 Val head explains how you can use the classic principles of animation to help master amazing motion design 15 aWesoMe skeTCh PLugins 76 rafael Conde runs down his favourite Sketch plugins, and shows you how to use them to speed up your workflow design read more..

  • Page - 8

    8 april 2015 Christmas timewarp The most incredible thing just happened today. I was walking with my dog and near our building, on a bench, there was a .net magazine issue #5 from April 1995! What are the odds when just yesterday I got an email from net saying it’s celebrating its 20th year. All of that just happened here read more..

  • Page - 9

    april 2015 9 Network How many domain names do you own? tHE PoLL CooL stuff we Learned tHis montH Microsoft spartan When Google built a browser it named it Chrome, after that decorative guff on cars. Now Microsoft is following suit. It is hoping to deliver a sparse and streamlined affair, and so has dubbed its new window on the read more..

  • Page - 10

    10 april 2015 SVG Canvas questions SVG or HTML5 Canvas? Simon Nolan, Manchester, UK ss: It depends on what you are working on. SVG has many advantages over HTML5 Canvas – the most important being that SVG content is accessible, while Canvas content is not. Moreover, animating SVGs with CSS, SMIL or JS is easier than animating Canvas – the read more..

  • Page - 11

    april 2015 11 Q&As make SVG the better choice for things like infographics, for example, and web app user interfaces. HTML5 Canvas is a great choice for creating interactive and dynamic bitmap images, generating and exporting raster graphics, editing images, and operations that require pixel-based control. PerforManCe Buy-in inCentives What’s your advice read more..

  • Page - 12

    12 april 2015 exchange Q&As Seo sitemaP sHaRing Sitemap submission – yes or no? Jordan Foord, Sydney, AU LZ: There is a big ongoing debate about the pros and cons, and dos and don’ts relating to sitemaps. My answer is – it doesn’t cost anything to generate one (especially if you use or similar), but it may help your site read more..

  • Page - 13

    read more..

  • Page - 14

    The conference for web designers, presented by net and Creative Bloq, is back! Here’s why you need to be there. 01 ENJOY AN OUTSTANDING SPEAKER LINE-UP We’ve put together a stellar bunch of people for this event. See 02 PICK ’N’ MI X There are two tracks, so you can choose the talks most relevant to your job and read more..

  • Page - 15

    april 2015 15 People, projects & paraphernalia This monTh FeaTuring... Side PROJeCT OF THe MONTH 16 david Gillett shares what he’s learnt in his photography project 12 by 12 – now in its third year, and still going strong BeYONd PiXeLS 20 Randall Bohannon gives an insight into the patience, precision and practice that goes into read more..

  • Page - 16

    16 april 2015 FEED Side project net: How did you get involved in photography? DG: Although I get a great deal of satisfaction from being a freelance designer, I started to feel as though I wasn’t building new skills. Photography seemed like a natural fit for me. I attended a few courses and took part in a number of photographic projects but read more..

  • Page - 17

    Can’t decide what’s right for your site? We asked our Twitter followers about the perils and pitfalls of A/B testing Opt in Or Opt Out @garethllew has a double- pronged approach: “Research with Mouseflow and test with Optimizely.” @mattpointblank, however, cites a cautionary blog post from @sumall about not using Optimizely correctly: “Read this before getting too read more..

  • Page - 18

    1 18 april 2015 nclud is a creative agency that lives at the convergence of design and technology. Our company consists of designers, developers and strategists, and our studio is central to our work and culture. At nclud, we’re habitual challengers of the status quo, and our workspace is no exception. Designed by our creative read more..

  • Page - 19

    read more..

  • Page - 20

    PR OF IL E 20 april 2015 FEED Beyond pixels One afternoon, I had gone to see a touring exhibition about the Whydah Gally, a ship that was used for privateering – a pirate ship, if you will. On display was a beautiful model of the actual ship, and I was in awe. My love for model ship building was born. At first, it was just a cool read more..

  • Page - 21

    april 2015 21 Need list (1) This four-part book series tackles the A-Z of Sass development, from starting out to getting really Sassy ( (2) Want to know which UX course to study or how to get a UX job? This book helps you master all things UX ( (3) Looking for a new way to test your responsive websites? read more..

  • Page - 22

    Print edition, back issues and sPecial editions available at digital editions available on itunes, google Play, kindle, nook and Zinio ISSUE 266 on SalE 19 March ThE MonEy ISSUE We reveal how much you should charge, how to create amazing ecommerce sites, and much more! next month PlUS BUIld fUlly rESPonSIvE aPPS wITh foUndaTIon read more..

  • Page - 23

    april 2015 23 Feed EVENT GUIDE HTML5 Days Date: 4-6 March 2015 Location: Munich, DE Get to grips with hTML5 over three days with this intense series of workshops. it runs concurrently with JavaScript Days and angular JS Days, so there’s plenty to choose from if you’re already a markup master. MinneWebCon 2015 Date: 13-14 apriL 2015 read more..

  • Page - 24

    Terms & conditions: Prices and savings quoted are compared to buying full priced UK print and digital issues. You will receive 13 issues in a year. If you are dissatisfied in any way you can write to us or call us to cancel your subscription at any time and we will refund you for all un-mailed issues. Prices correct at point of print read more..

  • Page - 25

    save up to 60 % tWo simple Ways to subscribe online: phone: 0844 848 2852 and quote code: print15, digital15 or bundle15 NeW print & digital edition From £32.49 Enjoy a combined print and digital subscription, and take advantage of print as well as exploring the fully interactive digital experience ● Print edition read more..

  • Page - 26

    Opinions, thoughts & ad vice Great content manaGement Angus Edwardson takes a closer look at the emerging movement that’s tackling the concept of ‘content-first’ The relatively new (or at least newly defined) role of ‘content designer’ throws up some interesting arguments when it comes to the ‘content-first’ approach to web design. A read more..

  • Page - 27

    april 2015 27 Opinion tent-265). So while the design community is screaming about needing to give more love to content, an almost inverse movement is happening on the other side of the fence. Here, I’ll outline a simple approach that can help us work together on website projects. The idea is to design sites that can be easily managed by read more..

  • Page - 28

    VOICES Essay 28 april 2015 read more..

  • Page - 29

    april 2015 29 Essay You may have mastered slick interfaces – but if you want to really affect a user’s experience, get out of Photoshop and into the boardroom, says Paul Boag The TruTh abouT uX design Illustration by Ben Mounsey When you think about user experience design, what do you think of? A beautifully crafted inter- face? Sketching read more..

  • Page - 30

    VOICES Essay 30 april 2015 the user experience. Nobody will give you permission, but as Grace Hopper said: It’s better to ask forgiveness than permission. It means an end to saying ‘I don’t have the authority to change that’. I realise that writing this is easy. Doing it is much harder – but it is possible. I have done it and so can read more..

  • Page - 31

    read more..

  • Page - 32

    32 april 2015 Voices Interview Brad Frost Words by Martin Cooper Photography by Noah Purdy The web designer and Generate speaker on cutting out showmanship, turning traditional publishing on its head, and why the big agency model is shifting Info job: Web designer w: t: @brad_frost read more..

  • Page - 33

    april 2015 33 Interview read more..

  • Page - 34

    Voices Interview 34 april 2015 Brad Frost is not a man for fancy job descriptions. “I’m a web designer, I leave it simply like that, ” he smiles. “I don’t like getting too far into the weeds with titles.” These days he specialises in helping clients move to a responsive way of working. This, he’s keen to point out, read more..

  • Page - 35

    Interview april 2015 35 In such situations, having an objective outsider present can help bring clarity to the situation. “Those can be difficult conversa- tions to have, ” Frost explains, “and I feel like as an outsider I’m sometimes able to play the role of therapist, to get people to open up.” nailing deliverables At this read more..

  • Page - 36

    Voices Interview 36 april 2015 clients’ needs, both clients and agencies need to evolve their processes to work more col- laboratively and efficiently.” call fOr unicOrns So, what’s Frost idea of a perfect team and structure? “In an ideal world everyone is a unicorn, ” he quips. “They magically traverse between Ruby, Photoshop and PHP.” read more..

  • Page - 37

    read more..

  • Page - 38

    VOICES Big question 38 april 2015 Jessica HiscHe Lettering artist and type designer The first thing I do is ask myself: what kind of content do I have the most of? If it’s mostly paragraph text, I’ll start with a workhorse text face (something that works well at text sizes and comes in enough weights read more..

  • Page - 39

    april 2015 39 resources Kai bracH Web designer, OffScreen In order to provide a rounded experience to readers of my print magazine and visitors to my website alike, I’ve chosen the same fonts for online and offline. The initial selection was made with cross-platform availability in mind, specifically looking for a very read more..

  • Page - 40

    40 april 2015 Voices Q&A net: Does your work at Citizens Advice differ from the work you did at GOV.UK? SR: Both sites have the same audience – potentially anyone in the UK – but that’s pretty much where the similarity ends. We’ve done a lot of research already on the Citizens Advice Alpha ( – the prototype for the read more..

  • Page - 41

    april 2015 41 Opinion Careers Pr OF IL e Justin Jewett explains why being a good technical director is all about the clients The idea of having someone on your staff who directs your tech is pretty strange. Taken literally, it seems like you’re describing someone who sits above the developers on your team and directs them to do read more..

  • Page - 42

    Never miss aN issue! NETM.AG/NET-iPAd (UK) , NETM.AG/NET-iPAd-US (US) Download net’s interactive iPad edition, or read a print replica on your iPhone or iPod Touch Got aN aPPLe DeviCe? #263 FEB 2015 Discover the design tools set to revolutionise your workflow this year, plus we look at how to boost site speed by #262 JAN 2015 We reveal everything read more..

  • Page - 43

    cATch UP oN ANy iSSUES yoU’vE MiSSEd By dowNloAdiNG oUr diGiTAl EdiTioNS net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and more. PreFer to reaD oN aNDroiD, PC or maC? NETM.AG/NET-GooGlEPlAy NETM.AG/NET-ZiNio #260 Nov 2014 Explore the advanced techniques that will help you build responsive sites that work read more..

  • Page - 44

    Gallery Inspirational sites 44 april 2015 Art of the Title, Cactuslab Art of the Title is an online directory focusing on the process, history and credits of movie and television opening title sequences. The site, which was built by New Zealand-based studio Cactuslab, shows how engaging an archive can be, while still read more..

  • Page - 45

    april 2015 45 Inspirational sites The new site for Manchester-based, six-person design studio Fieldwork is packed with character, bursts of colour and stunning portfolio work. “Playfulness is a really important aspect of the work we do at Fieldwork, so we had to make sure that came across on the homepage,” says Loz Ives, who co-founded read more..

  • Page - 46

    Gallery Inspirational sites 46 april 2015 site of the month Bluecadet Japanese author Haruki Murakami is known for penning novels that deal with duality, conflict, fantasy and reality, and that are played out through multiple plot lines. His new website, designed by Philadelphia-based Bluecadet in collaboration with Knopf Doubleday Publishing read more..

  • Page - 47

    april 2015 47 Inspirational sites An in-house team at responsible clothing company Everlane has built a site experience that makes online shopping personable again. Head of technology Nan Yu led a team of designers and engineers to craft a site as transparent as the company’s goals. The pages include plenty of simply presented information outlining facts about read more..

  • Page - 48

    Gallery Inspirational sites 48 april 2015 Agent Pekka, Craig & Karl, Nordkapp Freese Coffee’s bold, clever new microsite was created with the help of Craig & Karl’s brilliant illustration skills, Agent Pekka’s design work and Nordkapp’s development expertise. Coffee addicts can scroll through the site, read more..

  • Page - 49

    april 2015 49 Inspirational sites Brian Hoff, Carlos Gavina Brian Hoff’s new responsive website is a masterpiece of visually stunning, interactive design. Hoff himself led the art direction, design, workflows, interactions and content creation, while frontend developer Carlos Gavina took charge of development and the read more..

  • Page - 50

    Gallery Inspirational sites 50 april 2015 Universal Pictures In late November, the new Jurassic World website was launched as a teaser for the 3D movie coming out in the summer of 2015. The whole site acts as a theme park marketing site, with opening hours, weather info, schedules, RaptorPasses, wait times, hotel info, maps read more..

  • Page - 51

    read more..

  • Page - 52

    52 december 2013 52 march 2015 Sublime design & creative advice How we built 64 Fiasco Design brought Penguin Books’ vision to life in a site that allows users to read key imprint Pelican’s books directly in the browser ProFile 58 Shane Mielke – aka MilkBeast – shares some of the stories behind creating immersive 3D experiences read more..

  • Page - 53

    2 My Month what have you been doing this month? Moved to Edinburgh and started a new job with Blonde, and worked on App Delight – a project for DabbleDabble. which sites have you visited for inspiration? for app interactions and for general creativity. what have you been watching? The Lego read more..

  • Page - 54

    54 april 2015 ShowcaSe Design challenge natalie larkin peTlove comes to the animal kingdom with a site that helps breeders find their pet’s perfect partner PetLove is a dating website for animals, where owners can search for matching mates for their pets. It enables the user to create a profile page for their pet, including key features, read more..

  • Page - 55

    toM wade CiTy siTTer Owners can rest assured when travelling, thanks to this handy service that helps them find a reliable pet-sitter 1 4 5 2 I recently went abroad with my girlfriend, and we regretfully needed to leave our kitten behind to be looked after by friends and family. City Sitter is a networking tool for those not fortunate enough to have that read more..

  • Page - 56

    ShowcaSe Focus on Fully responsive Focus on Gene Crawford explains why, in order to make your sites truly responsive, you need to look beyond the breakpoints As the main editor of UnmatchedStyle. com, I review a lot of websites. And while most of them are ‘responsive’ , there is still a very large majority that are not what could be called ‘fully read more..

  • Page - 57

    This all-new guide includes everything you need to do more with JavaScript, the programming language of the web. Through 27 practical projects, you’ll learn how to speed up both your workflow and the performance of your sites and apps. Become a JavaScript master today! on sale now! Available at all good newsagents and online at read more..

  • Page - 58

    Profile This master-of-all-trades is as happy coding as he is animating or art directing ... just don’t ask him to sit still Shane Mielke Shane Mielke’s client list boasts some of Hollywood’s biggest blockbusting franchises. He’s broken new ground with immersive 3D experiences for the likes of The Hunger Games, Batman, The Lord of the read more..

  • Page - 59

    Profile Profile Profile info Location: Orange County, California Established: 1996 Clients: Adobe, Ford, Warner Bros. Awards: 32 FWA Sites of the Day, two FWA Sites of the Month, three FWA Mobile of the Day, one Adobe Cutting Edge Award, two Awwwards net: Who are you and what do you do? SM: Some people remember me by my original moniker, read more..

  • Page - 60

    60 april 2015 ShowcaSe Profile I’ve always said that my biggest career achievement is being able to do something I love. I thank God every day for the fact that I stumbled into a career that keeps me happy, challenged, creative and paid. net: How do you choose your projects? SM: To be honest, they’ve chosen me most of the time. read more..

  • Page - 61

    Profile april 2015 61 build, code and animate everything from start to finish if I need. There is no task too big or too small that I can’t or won’t do. net: The Batman: Arkham Knight – Batmobile Experience ( is an amazing feat. What would you say are the site’s biggest achievements? SM: That was my first WebGL project read more..

  • Page - 62

    62 april 2015 ShowcaSe Profile created on a computer. Expecting 100 per cent cinematic reality in the window of a browser just isn’t realistic. net: What technologies are getting you excited at the moment? SM: Canvas and WebGL development are skills I’ve picked up over the past year- and-a-half that really have me excited. The possibilities are read more..

  • Page - 63

    Graphic design Web design 3D Digital art actionURI( The number one destination for web design news, views and how-tos. Get Creative Bloq direct to your inbox with our weekly web design newsletter read more..

  • Page - 64

    ShowcaSe How we built 64 april 2015 Fiasco Design and Penguin Books came together to create a flexible new site that brought a key imprint to a connected audience Pelican How we built ( 1) As part of the relaunch of the brand, the iconic Pelican logo was redesigned and brought soaring into the 21st Century. ( 2) Getting the reading experience read more..

  • Page - 65

    How we built april 2015 65 Tom morris Tom is a Bristolian designer, poet and preacher who loves imagining better communities. He is head of digital at Fiasco w: t: @TomMorris1988 Ben sTeers Ben is co-founder and creative director at Fiasco Design, a freelance designer and perpetual doer w: t: @BenSteers read more..

  • Page - 66

    5 ShowcaSe How we built 66 april 2015 1 2 4 3 evolution A look at how the Pelican website evolved over the course of the 11-month project (1) Initial wireframes of the website were drawn out on Post-it notes. (2) The very first prototype was a very basic, one-page responsive website, with a big emphasis on typography and hierarchy. (3) Early read more..

  • Page - 67

    april 2015 67 net: Can you talk us through the design and typographic decisions you made? MY: For me legibility is the most important part of the whole site – my aim is to provide a comfortable, enjoyable reading experience. That’s relatively easy to achieve in print, where I’m used to having extremely fine-grained control of the read more..

  • Page - 68

    68 april 2015 FeatureS Cover feature Authors Val Head Designer Val is known for her work with web animation. she teaches workshops on interface animation, wrote the CSS Animations pocket guide and will be speaking at Generate New York in April IllustrAtIoN luke O’neill luke is a graphic designer and illustrator based in read more..

  • Page - 69

    april 2015 69 Cover feature design interface animations read more..

  • Page - 70

    70 april 2015 FeatureS Cover feature We’ll take a closer look at the three principles that are particularly key to interface animations: timing, secondary action and follow through. Timing & spacing: It really is everything My improv teacher always tells us that timing is the key to comedy. As it happens, timing is also the key to read more..

  • Page - 71

    april 2015 71 Cover feature bounce back up a little. The bounce is short, which informs us the dots have some weight to them. At the other extreme, linear easing appears mechanical and lacks life. Linear motion holds the exact same constant speed across the entire duration of the motion; there’s no slowing down or speeding up at all. It’s read more..

  • Page - 72

    72 april 2015 FeatureS Cover feature Stripe checkout the 3D rotation part of the form-expanding animation in the Checkout flow is an example of secondary a stop. Follow through is the motion of overshooting the final destination by a small amount and then coming back to settle into place. In the Slides changelog timeline (, each read more..

  • Page - 73

    april 2015 73 Cover feature A timing check Timing is always a good one to start with. Our alert box is using the ease- out timing function, so it comes in at a higher speed and then slows into place in a low-key kind of way. Not bad, but it’s still a little lacklustre considering the task at hand. This is the last step in our read more..

  • Page - 74

    74 april 2015 FeatureS Cover feature Resources adding motion Recommended reads on adding meaningful motion to interfaces: ● ‘ Provide meaning with motion’ by Paul Stamatiou ( ● ‘ ui animation and uX: a not so secret friendship’ by Val Head ( ● ‘ Transitional interfaces’ by Pasquale d’Silva ( read more..

  • Page - 75

    april 2015 75 Cover feature left In our final version, the alert box container, text content and button animate in with complimentary motion Below one of my favourite sources of motion design inspiration! Art of the title features breakdowns and case studies galore drastically as half the speed. Don’t be shy in chopping these durations down. To finish read more..

  • Page - 76

    read more..

  • Page - 77

    april 2015 77 Secondary feature Sketch is becoming more and more popular amongst designers and developers as their web and UI design tool of choice. What some may not know is that there is a diverse and powerful community of people working to extend the functionality and features of Sketch by building custom plugins. In this article, I read more..

  • Page - 78

    78 april 2015 Features Secondary feature grid with circles and a label below, select them and, with this plugin, generate profile pictures and names in seconds. 3 GeneRate IcnS Built by Nathan Rutzky, this plugin does one thing and one thing well. Sketch offers a pretty handsome number of export file formats – PNG, JPG, read more..

  • Page - 79

    april 2015 79 Secondary feature creates a group with your text block, a shape for the structure or background of your button, and renames the text block to ‘0:0:0:0’. Th ese values are the padding values for your button, exactly like CSS’s syntax. So you can rename this layer to something like ‘10:20:10:20’ an d your button will have 10px read more..

  • Page - 80

    80 april 2015 Features Secondary feature option is especially handy when dealing with round shapes, for example. 10 GeneRate andRoId aSSetS If I have to be completely honest, I never really understood all of the different resolutions and pixel densities of Android. Gladly I never really had to, and it’s probably read more..

  • Page - 81

    april 2015 81 Secondary feature 14 dIvIne pRopoRtIonS Designers love grids. They love logic behind emotion, and divine proportions are just that – divine. This plugin takes a shape and generates, for example, an overlaid golden spiral (, or a grid based on the sections created by the golden spiral, read more..

  • Page - 82

    Learn 7 Ways to Deploy Your Next Website A free video course from Mijingo. Just for you. Redemption code: NETDEPLOY Your website is designed and coded. What's the best way to get it on the server? read more..

  • Page - 83

    april 2015 83 0 0 0 0 0 Mobile/tablet 0 0 0 0 0 Desktop Tips, tricks & techniques This monTh FeaTuring... exclusive videos Browser supporT We feel it’s important to inform our readers which browsers the technologies covered in our tutorials work with. Our browser support info is inspired by @andismith’s excellent When Can I Use web widget read more..

  • Page - 84

    PROJECTS WordPress 84 april 2015 Every good developer knows to look for ways to reduce repetitious work and let their computer handle mundane, mindless tasks. CSS preprocessors like Sass give us several valuable tools to help automate the frontend coding process. For example, with Sass we can use variables. So instead of running a ‘find and read more..

  • Page - 85

    april 2015 85 WordPress theme stylesheets to Sass is done for you. I typically start new themes with the Underscores template from Automattic ( When creating a new theme package from its website, you’ll find a ‘_sassify!’ op tion if you click the ‘Advanced Options’ link. This will provide Automattic’s default Sass library read more..

  • Page - 86

    PROJECTS WordPress 86 april 2015 superstar Sass is the most mature, stable and powerful professional- grade CSS extension language This tells compilers not to create a unique CSS file based on this Sass file. A compiler app that watches a folder full of Sass and automatically generates CSS will create style.css based on style.scss , but read more..

  • Page - 87

    april 2015 87 WordPress Video Micah Godbolt’s ’Get Your Sass in Line’ presentation covers how to share Sass files in an organised way You can use a Sass feature called ‘nesting’ to h elp make complex selectors more readable. Your starting CSS may include styles for multiple elements in the site sidebar: .sidebar h1 { read more..

  • Page - 88

    PROJECTS WordPress 88 april 2015 Here’s a run-down of some good places to look if you want to explore further. The first several articles are specific to WordPress developers getting started with Sass. The rest of the links offer broader insight into good Sass organisation and maintenance processes. ‘Sass for WordPress developers’ by James Steinbach read more..

  • Page - 89

    april 2015 89 WordPress Video In this ‘Getting Sassy with WordPress’ presentation at WordCamp NYC, Tracy Rotton explains how Sass helps WP developers and gives an overview of some of Sass’ powerful features to rely on Sass mixins, Compass’ mixin library ( allows user configuration and stays read more..

  • Page - 90

    PROJECTS Prototyping 90 april 2015 Designers will tell you that design isn’t just how something looks, it’s how it works and how it feels. Nowhere is this more evident than in the world of app design. Working in Sketch or Photoshop results in nice visuals, but these tools don’t do a great job of explaining how the app will feel. read more..

  • Page - 91

    Prototyping april 2015 91 Step 2 Create a new prototype project and select ‘iPhone 5’ as your screen size Step 1 Kick things off by signing up for a free 30-day Pixate trial account The first thing we need to do is upload the image assets that you downloaded earlier from pixatepics-265. Drag and drop them onto the Pixate website to read more..

  • Page - 92

    PROJECTS Prototyping 92 april 2015 this is represented as a white background with a red diagonal line through it). In the layers list, drag the new shape into the ‘screen1’ gr ouping. This will soon be our key tappable area in this prototype. It doesn’t do anything yet, but we’ll fix that in the next step. Allow me to introduce you read more..

  • Page - 93

    Prototyping april 2015 93 down to find the new one we just added. Change the Based on: drop-downs to ‘titlebar’ and ‘tap’. Then change the left property to ‘320’. Tr y this on your device, and you should be able to make ‘screen2’ an imate on and off. 16 Now ‘screen2’ is d oing its job, but we need to make read more..

  • Page - 94

    PROJECTS Touch 94 april 2015 Recently, my company – Askew Brook – and another local design company won a contract to work on an interactive touchscreen installation. Although it wasn’t something we’d had a lot of experience of, I was keen to take the project on as it used my web development skills to solve a different kind of read more..

  • Page - 95

    april 2015 95 Touch managed the overall experience and gave the user the ability to start, clear or even end the show. These were placed around the edge of the screen and made large enough to easily identify and touch – not only making the installation simpler to use and helping the user feel like they knew what they were doing. The read more..

  • Page - 96

    NEW BUNDLE OFFER! SUBSCRIBE TO COMPUTER ARTS Enjoy the tactile beauty of our print edition and the interactive delights of our award-winning iPad edition in one package, and get behind-the-scenes access to top studios, pro analysis of the latest trends and inspiration that lasts all year Your subscription will then continue at £32.99 e very 6 months – saving 30% on read more..

  • Page - 97

    Head to head april 2015 97 Fact File GET STARTED SimpleWebRTC, EasyRTC and Peer. js libraries; service providers like PubNub and Xirsys; and services such as and offer easy starting points. REQUIREMENTS Development requires a standard text editor, a WebRTC-compatible browser, a tool such as Chrome Dev Tools with read more..

  • Page - 98

    PROJECTS HTML forms 98 april 2015 HTML forms are probably among the most complex interfaces a frontend web designer has to create. They involve a bunch of different elements, labels, messaging, validation and errors – it’s a lot to wrap your head around. From a user experience perspective, they are similarly challenging: a poorly read more..

  • Page - 99

    april 2015 99 HTML forms element around the form control. I like to use that approach with radio and checkbox controls: <label><input type="radio" name="confirm" value="yes"> Yes</label> Here the label "Yes" is associated with the radio button implicitly. Explicit association involves using the for attribute, read more..

  • Page - 100

    PROJECTS HTML forms 100 april 2015 ARIA (Accessible Rich Internet Applications ) supports two similar concepts: ‘described by’ and ‘labeled by’ (via the aria- describedby and aria-labeledby attributes, respectively). As they are similar, it can sometimes be difficult to choose the appropriate option. Thankfully, however, forms offer a read more..

  • Page - 101

    april 2015 101 HTML forms form if there was not a value for this field. Sadly, at present, screen readers don’t get this information, but there is an ARIA attribute equivalent: aria- required . Including this attribute with a "true" value will announce that the field is required in the form: <input required read more..

  • Page - 102

    Fascinating reports from the bleeding edge of tech Innovations, culture and geek culture explored Join the UK’s leading online tech community EXPLORE NEW WORLDS OF TECHNOLOGY GADGETS, SCIENCE, DESIGN AND MORE Not your average technology website actionURI( read more..

  • Page - 103

    Web standards april 2015 103 As web developers, we have to pay attention to save our users’ resources and bandwidth – especially in today’s world driven by mobile devices and connections. In the last few years, the W3C and the Web Hypertext Application Technology Working Group (WHATWG) have standardised many JavaScript APIs in order to fill the gap read more..

  • Page - 104

    PROJECTS AngularJS 104 april 2015 Imagine connecting an AngularJS application to a fully functional backend in a matter of minutes. Now imagine every client connected to your app would reflect changes to your data in real time. We are going to do exactly that, by taking an existing AngularJS leaderboard application, which only stores data in read more..

  • Page - 105

    april 2015 105 AngularJS The leaderboard page is actually a subset of the admin dashboard, which allows us to use the same controller for both views. adding a contestant In our dashboard, we will add a form that will allow us to add a new contestant. We are showing one input – to update the contestant’s lane – but the format read more..

  • Page - 106

    PROJECTS AngularJS 106 april 2015 service.updateContestant = function (contestant) { // Already in memory }; removing a contestant The final piece of the application we need to talk about is the ability to remove a contestant. In the dashboard, we have an extra column that we will use to add a button that calls main.removeContestant read more..

  • Page - 107

    april 2015 107 AngularJS reSource remote mobile Lukas Ruebbelke has created an additional view for a mobile device. It works as a remote, enabling users to alter an athlete’s score on the go. Find it in the GitHub repo at and generate a URL based on that application name. Next, we need to add the read more..

  • Page - 108

    PROJECTS JavaScript 108 april 2015 Mobile gaming using HTML5 Canvas has come a long way over the past 18 months. It’s an exciting time in the industry as it has given app and game developers a new platform to create content for, and as a result a wide range of frameworks have been launched to help developers create better applications. There read more..

  • Page - 109

    april 2015 109 JavaScript CocoonJS gives your HTML5 Canvas-based applications fantastic speed increases when publishing for mobile platforms. If you type Ludei into the Apple App Store or Google Play, you will find its Tic-Tac-Toe game, as well as WebGL examples in its LudeiWebGL app – Canvas doesn’t just mean 2D games and applications. When playing these read more..

  • Page - 110

    PROJECTS JavaScript 110 april 2015 new features The features page is an excellent place to quickly see just how much CocoonJS offers developers specify 1920 x 1080px as the screen resolution at the top of the browser window and then refresh your browser. That looks much better! I’ve created a gulp task that prepares a zip file of our content read more..

  • Page - 111

    april 2015 111 JavaScript any project, Launchers are invaluable. Click on the ‘Compile Launcher’ item from the left-hand sub-menu and choose your development platform (I’ve opted for ‘Google Play Store – Android’ for this tutorial). Tick the box, hit the ‘Create Launcher’ button and Ludei will compile a launcher with your previously entered read more..

  • Page - 112

    PROJECTS JavaScript 112 april 2015 ResouRce This article is focused on Android and Phaser, but other JS game development frameworks are just as easy to work with. Here’s a great iOS and Kiwi.js example: FirinG Copying the index.html from ‘Step 2 – Firing’ , we can see two new variables added ( groupPlayerLaser and read more..

  • Page - 113

    read more..

  • Page - 114

    114 april 2015 PROJECTS Accessibility One of the best things you can do to improve the accessibility of any site is to make sure it is both keyboard-accessible and keyboard-usable. There are a few simple steps you can follow to help ensure this is the case. First, use natively accessible elements (buttons, other form controls, links) for all read more..

  • Page - 115

    New york 17 April 2015 Learn responsive web design, user experience, CSS, the Internet of Things, how to present to clients and much more! tickets oN sale Now actionURI( actionURI( Dave rupert leaD Developer, paravel ireNe pereyra user experieNce Director aND read more..

  • Page - 116

    Projects Switch from CSS to Sass in WordPress Build a moving app mockup with Pixate Design an interactive touch experience Create simple, accessible forms Build a real-time app with Firebase Publish mobile games with CocoonJS Where ideas take shape. actionURI( With Shutterstock’s diverse library of over 45 million images, videos, and audio tracks, read more..

Write Your Review