Innholdsfortegnelse for No. 270 i Web Designer

Freelancers and businesses don’t want to stagnate, they want to create and produce. Workspaces such as THIS Workspace provide the perfect environment for this to happen. In need of inspiration? In need of advice? In need of interaction to stimulate your creative juices? Then head to your nearest workspace and sign up to discover the benefits today. CHESTER RIGHTON Opportunity Maker for THIS Workspace www.thiswork.space THIS Workspace is Bournemouth’s biggest creative co-working space located in the historic Old Print Rooms in the Echo Building. Home to an ever-growing community of entrepreneurs and businesses ranging from web designers, VR specialists, social media agencies, authors, charities and more. If you’re interested in a beautifully designed workspace to rent by the desk or studio, please enquire today. JOSHUA WINTERTON Partner at THIS Workspace…

Why Age? Should We End Aging Forever?  bit.ly/2gTPSIm Kurzgesagt – In a Nutshell This is a video that uses data in an engaging storytelling format with gorgeous graphics. This is just one of many. American Daily Routine  bit.ly/2yBIRag Nathan Yau An interactive infographic which looks at the daily routine of the average American citizen. Global Warning  networkosaka.com/Global-Warning Derek Kim This A1, free-to-download poster is a collection of graphs imparting vast amounts of information. All the Government Barbecues  bit.ly/2znH7wU Rodrigo Menegat This infographic represents what government expenses are being spent on. In this case “churrascarias”. Data Visualisation Weather Eindhoven  bit.ly/2yDoqVz studioterp.nl A visualisation of the weather in the Dutch town of Eindhoven across the months of the year. Also see the studio’s other work. Figure it out  fioapp.co/app Friedrich Riha Not…

SHOPIFY www.shopify.co.uk Shopify is one of the biggest and the most well known eCommerce solutions available for the general public. Currently there’s three different packages: the basic one starting at $29 per month, ranging to $299 a month for scaling your online shop. Shopify charges a 2.2% fee with an extra 20p charge for all online sales, but this is not the case if you use their Shopify Payments platform to process sales on your site. Not only is Shopify great because of its ease, but anyone can set up an online website directly with their packages, which include 24/7 support, a website or blog, free SSL certificates and fraud analysis – taking all the boring tedious stuff away from you. However, Shopify, as a blogging or online…

P5.JS p5js.org Processing is the holy grail for creative coders. It provides a language and an IDE to enable designers and nontechnical people to create stunning visualisations without getting buried in the technicalities. The p5.js library takes the principles of processing and applies them to the web. It delivers the same kinds of abstractions, which provide simplicity to the beginners and offer powerful control to experts. The bulk of the work happens within two functions – one controls the project setup, while the other draws to the page in a loop for the life of that project. The library supplies plenty of global methods and variables to update the page within these functions. For example, calling frameRate(60) lets p5.js do the hard work of maintaining a constant 60fps. SKETCH.JS soulwire.github.io/sketch.js…

Desktop browsers provide reassuring familiarity when it comes to creative projects. But by experimenting with different displays, users can get a more personalised experience which works for them. The principles of responsive design still hold true for creative coding projects as well. Users should be able to enjoy them regardless of device, whether that’s desktop, mobile, or projected on a giant screen. These differences can also be used to enhance the project further. By using media queries in CSS, mobile users could get an experience tailored to the smaller, handheld form factor. Since mobile users tend to be just one person, these visitors could be offered a more personalised view of a bigger platform, for example. Paper Planes, by company Active Theory (paperplanes.world), encouraged users to create virtual planes on…

“GET AS MANY TESTIMONIALS OR QUOTES AS YOU CAN DIRECTLY FROM THE PERSON YOU WORKED WITH ON THE PROJECT” 1 SCREENSHOTS AREN’T ALWAYS BEST Obviously you’ll be chuffed to bits with your sparkling new design so you’ll want to drop it in as many iPhone and Mac templates as you can, but that isn’t always the most attention-grabbing approach. Try using client photography as the ‘hero’ image on your landing page, then of course, use your screengrabs once you’re into a particular case study. If the client’s photos aren’t all that (very probable), look at what you’ve put on their homepage. Could you use their logo and their colours to send the message as opposed to tiny images of screenshots? 2 ATTENTION-GRABBING TITLES Instead of starting your case study off…

1. Initiate HTML document The first step is to create the HTML document that's responsible for storing the page details and its content. The document has an HTML container, which stores a head and body section. While the head section’s primary purpose is to link the external CSS file to the page, the body section will be used in Step 2 to store the visible page content. 2. Page content The page content consists of a main container for the primary page content, followed by a container for the ‘ping’ effect. The ping container requires an inner element to be controlled as the visible circle element. For SEO purposes, the ping container is placed at the bottom of the HTML. 3. CSS initiation With the HTML now complete, create a…

Inspired by tentwenty.me The Company logo The website company logo is always visible over the navigation. This is used in design strategy for supporting brand recognition. Simple navigation A more traditional navigation option is available by clicking on the hamburger icon to present a simpler, to-the-point menu. Navigation image Highlighted navigation options are accompanied by an associated image that describes the theme of the highlighted option’s content. Option subtitle text Subtitle appears positioned in a location that avoids conflict with the navigation image. Size and colour make it clear to read. Hovered navigation The navigable columns change colour when hovered by the user pointer. This could be used to help users to distinguish each option. Layout Design: Less is more While adding visual effects may look appealing, it’s important to…

HOT 101 This issue we have a collection of industry experts imparting their well-formed knowledge on a host of topics that will make you a better designer and developer in 2018. Discover design tips from Tobias Van Schneider, portfolio secrets, how to prototype with Origami, what’s new in Node 9 and much more. Page 16 Matt Crouch Matt is a frontend developer based in London. A developer’s life is often taken up creating run-of-the-mill sites. In this issue, Matt shows how those skills can instead help you get creative with code. Page 46 Mark Shufflebottom Mark is a Professor of Interaction Design at Sheridan College. This issue he is making waves with WebGL. He creates an animated liquid background effect to make a header that reacts to mouse movement. Page…

Parcel parceljs.org So what is Parcel? In a nutshell, it is a blazingly fast, zero-configuration web application bundler. So, what does it have to offer? There are automatic transforms using Babel, PostCSS, and PostHTML when needed and it has out-of-the-box support for JS, CSS, HTML, file assets, and more – no plugins needed. And, it has very fast bundle times. deeplearn.js deeplearnjs.org This is an open-source library that brings machine-learning building blocks to the web. It offers two APIs, enabling users to train neural networks in a browser. Chhota chhota.ga Chhota is a simple tool. It is a frontend url shortener without the need for a database. All you need is a single line of code to add to a page. Prettier prettier.io Prettier describes itself as an ‘opinionated code…

WTF … HOW MUCH!! According to Wikipedia these are the most expensive domain recorded. However, other domains have cost more, but these typically include content as well as the domain. LasVegas.com is reported to have cost a whopping $90m, while CarInsurance.com very nearly tops the $50m mark. Unbelievably Cars.com was valued at $872m. For a bit of fun why not find the (approx) value of a domain you own. Take a trip to www.siteprice.org Source http://bit.ly/2AQu4JN…

TWITTER With over 320 million active users in 2017, Twitter is a wealth of information. People are talking about every conceivable topic by posting pictures and video alongside their unfiltered reactions in real time. This makes it a goldmine for a creative coding project. The official API can bring back the tweets in the format needed along with other metadata that is open for analysis. This data can then be visualised in new and exciting ways. The Twitter API provides four defined ‘objects’ that can be retrieved – tweets, users, locations and entities. Entities include extra information linked to those objects including hashtags and media. Values on these objects are fixed and will only ever be extended upon, which means you will never lose access. Tweets themselves can be searched…

Even the most creative of coding projects can become stale after a while. An element of randomness can keep things fresh each time a piece of code runs. While that can come from user input, it can be interesting to see what code is capable off when it’s let off of the leash. Instead of defining what the output of a block of code would be, define a set of rules for it to follow. When a random starting position is defined, the end results will vary completely. Conway’s Game of Life is a great place to start. In a defined grid, each square can either be ‘on’ or ‘off’ depending on the squares around it. By colouring the squares dependant on their state, it generates an image. Repeating the…

1. A NEW PROTOTYPE We’re going to create a prototype for a mobile app which will allow us to swipe through pictures of cats and ‘like’ some of them. Once we’ve installed Origami Studio, we’ll create a new iPhone 8 prototype from the splash screen. 2. ADDING LAYERS We can start to add some layers to our prototype straight away. In this case, we’ll add a logo positioned at the top of the screen. We add the layer using the + button in the top right and selecting ‘Image Layer’. We can then resize and position it appropriately by highlighting and modifying the layer’s properties. After our brand, we’ll also add a heart image at the bottom of the screen to serve as our ‘like’ button. 3. CREATING AN INTERACTION…

“Greta Gerwig’s coming-of-age movie Lady Bird presents a charming promo site that delivers fullscreen video clips via a drag-and-drop quiz” http://ladybird.movie Designer: Watsondg — http://watsondg.com Development technologies jQuery, Underscore.js, HTML5 Boilerplate, Marionette.js…

As the web evolves there is always something new to learn. And what better way to boost your skills than by listening to the experts. Our very own Generate conference is awash with them and 2018 sees a host of contemporary, must-know topics presented by an incredible selection of industry gurus. So where can you get to see this fine array of talent in the coming year? 2018 sees not one, but two Generate 3-day conferences. The first of the year kicks-off in the city that never sleeps, New York City. To be precise the conference will reside at the glorious Metropolitan Pavilion in Manhattan’s desirable Chelsea neighbourhood from Wednesday 25th April – Friday 27th April 2018. Check out the venue site (Generate will take place on The Level) http://bit.ly/2Bjpbbv.…

FACEBOOK POWER TIPS 1 GET LOCAL If you are only going to do one thing with social media from now on then it should be this. Join as many local community groups as possible and post regularly in them. Get known, provide advice, answer questions. Just participate. People buy from people they know. So make sure everyone knows you. 2 KNOW YOUR AUDIENCE Every single Facebook tip boils down to one thing. Get to know the people around you, and make sure they know you. Talk to people, answer their questions for free, be the guy everyone likes, the first person they think of. Then when they need something, you’ll have already sold it. 3 MEMES People love to share funny pictures. The picture itself isn’t going to get you…

The world of mobile presents a completely different set of opportunities when it comes to creative coding. The wide variety of form factors and sensors open for use within the browser can make for some distinctive experiences. Mobile devices are almost exclusively touch interfaces. Browsers have the ability to detect and track multiple touches at once. This means that projects do not have to be led by a single point and can be manipulated in a much more intuitive way. All touch events use a ‘changedTouches’ property on the event. This holds a reference to all the touch points that changed dependent on the type of event, rather than a separate event for each touch point. By tracking these, it’s possible to map gestures or paint with touch. Accelerometers and…

1 FREECODECAMP bit.ly/2AwivqM freeCodeCamp is a website and community for learning frontend web development, with a particular focus on JavaScript. Its YouTube channel has handy pre-made playlists grouping videos into particular topics. It also has really interesting videos entitled ‘A day at’ which give an insight to working at some of the largest companies in the United States of America. SUBSCRIBERS: 221k 2 THE CODING TRAIN bit.ly/1TdluDY The Coding Train is an awesome YouTube channel where Daniel Shiffman posts his creative coding tutorials. Daniel’s presentation style is what makes this channel – he is both funny and engaging, and manages to keep his tutorials and content interesting even when discussing difficult and sometimes dry and complicated subjects. SUBSCRIBERS: 374k 3 ANA TUDOR bit.ly/2kk5iXk You will have no doubt seen Ana…

1. Initiate HTML document The first step is to initiate the document that will define the HTML page. This consists of a HTML container that stores the head and body sections. While the head section stores links to external CSS and JavaScript, the body section will store the visible content created in the next step. 2. HTML content The page content consists of a container labelled with a 'data-player' attribute. This container stores the individual quote elements – represented as span elements. Each of these contain the content for the individual quotes; this example uses a h3 title followed by a paragraph element. This structure’s presentation will be controlled via the JavaScript and CSS. 3. JavaScript initiation Create a new file called 'code.js'. This file starts with the initiation of…

Most web designers are constantly looking for ways to add a big impact to their site designs, as directed by clients to grab their users’ attention. This has evolved over the years from using a header graphic, to a slideshow under the menu. This later became full browser width, and now the vast majority of sites follow that same format. The sites that win ‘site of the day’ on the different web awards sites generally try and do something that is a little more unique than just having a giant slideshow. WebGL is great for this as adding something interactive can really grab the users’ attention and show that this isn’t the same as the other sites they’ve just visited. To make a splash in this tutorial, a liquid, reflective…

Essential assets and resources Get textures, fonts, backgrounds and more Exclusive video tutorials Learn to code/create with HTML, CSS, JS & PHP Tutorial project files All the assets you’ll need to follow our tutorials Plus, all of this is yours too… • All-new tutorial files to help you master this issue’s HTML, CSS and JavaScript techniques • Over 98 minutes of expert VR & JavaScript video from Pluralsight (www.pluralsight.com) • 30 Cheerful triangle patterns (www.sparklestock.com) • Hope poster Pop Art generator The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online access, from anywhere Free access for every reader, print and digital Download only the files you want, when you want All your gifts, from all your issues, in one place Get started…