Rss Bot

Every designer needs to know about user experience, commonly abbreviated to UX. And the first thing to understand is exactly what user experience actually is, as well as being clear about what it isn’t. UX is not web design, which is about the nuts and bolts of making digital interfaces function. It’s also distinct from (though closely related to) UI design, which is about designing the visuals of an app or website. Instead, UX is about making the experience a great one for the user – which means that in theory someone who can neither draw nor write code could be an expert in it. UX is most commonly associated with making apps and websites, but as Matt Theakston, experience design director at TH_NK points out, it goes way beyond that. “UX lives beyond the web,” he stresses. “It already flows, end-to-end, through the customer journey: from designing apps, shops, showrooms, cars, chairs or voice assistants like Amazon Echo. In the future, who knows where it’ll take us?" Where UX meets design You’re probably already more aware of UX than you realise, and as Spencer Buck, founder of Taxi Studio, says, getting on board doesn’t necessarily mean you have to become a fully fledged UX designer. “It’s about adding another layer to the thought process – being curious about how humans behave, and how we can influence that behaviour through good design.” The challenge faced by Taxi Studio when tasked with bringing Dolphin Solutions, a supplier of washroom products, online was balancing the premium nature of the brand with complex functional requirements Matthew Cockerill, creative director at Swift Creatives, agrees. “I don’t think it’s about graphic designers doing a UX role,” he says. “Instead, it’s about graphic designers and UX designers being able to understand each other’s processes and work together harmoniously and effectively.” And that’s less about learning a whole new discipline or methodology than taking what you already know and applying it in a different way, says Alec East, founder of Narrative Industries. “Going back to the Bauhaus, they taught students to eliminate the idea of the individual, and to focus on the productivity of design instead,” he says. “This means they had to understand how their designs would be used: the notion of form following function. For instance, in print design, if the typography is too small and dense, the reader’s enjoyment of the story is impaired.” UX involves applying similar principles to digital, East continues. “It means, for example, knowing the importance of removing cognitive load, whereby too much information on one screen can disorient the user.” Lee Carroll, senior interaction designer at Seymourpowell, offers more advice: “Placement, position, proximity, language, movement, colour, learned behaviour, bad habits, context, audience: these are all things user experience design draws on to achieve a goal,” he explains. “The biggest mistake you can make is going straight to the ‘idea’ or ‘concept’ – diving into designing how the interface should look and feel – without a deep understanding of the functions and processes that are required to make it work.” A UX challenge faced by Seymourpowell when creating a new VR design programme called Reality Works was to work out how the user selected and moved between different features and tools The most effective way to develop your UX skills is by communicating and collaborating more closely with people working in the field, says Buck. “So our print designers will collaborate with UX and digital designers on certain projects, and this works well as a way of expanding their thought processes with a real problem on the table, rather than through theoretical training.” Marta Lisboa, digital designer at CBA, agrees that improving your UX skills is less about studying and more about doing. “Like creativity, UX is a hard-earned skill, and like any other skill, it improves with practice,” she reasons. Look around you But that’s not all. Another important thing you can do is stay alive to the user experiences that are part of everyday life, says Max Ottignon, co-founder of Ragged Edge. “You’re interacting with UX every day anyway, whether it’s posting on Instagram or streaming a movie on Netflix,” he points out. “So try to engage your design brain while you do it. Analyse why the interface has been designed that way. Think about the techniques the designer has used to create a seamless, engaging journey. And as with anything else, it’s practice. Try to get your hands on some digital briefs and show what you can do.” Batch Organics is a health food service aimed at busy people, so user experience was paramount. Ragged Edge took pains to craft a customer journey that would work seamlessly across multiple devices Also, be aware that the ground is constantly shifting. “Today’s users, especially mobile users, are becoming less tolerant, more demanding, and they always want to be surprised,” says Lisboa. “The challenge is to continue being an innovator and develop experiences that are more relevant, delightful  and memorable. To provide metaphors that make screen-based interactions feel a bit more real. And to do all of this while adapting to rapidly evolving tech and digital trends.” To help you stay ahead of the curve, learning resources abound. East recommends books such as Don’t Make Me Think by Steve Krug and Ends: Why We Overlook Endings for Humans, Products, Services and Digital by Joseph Macleod, as well as following people such as @skrug, @wasbuxton and @jnd1er on Twitter. Theakston is a fan of The User Experience Team of One: A Research and Design Survival Guide by Leah Buley, Carroll urges you to attend a UX gathering such as the monthly London event IxDA, while Lisboa likes to keep up with new developments via Uxmag.com, UsabilityGeek.com and the Invisionapp.com blog. CBA's Marta Lisboa believes that improving user experience skills is less about studying and more about doing But always remember one thing, concludes East. “There are a bazillion books and blogs that will give you loads of rules, but the only person that counts in UX is the user; that’s why they’re the first letter in UX.” Ottignon agrees, and adds the following: “Put the user first, by using as little design as you can. UX isn’t about flashy creativity: it’s about crafting an experience that’s intuitive and stress-free. Don’t let design get in the way.” This article was originally published in issue 276 of Computer Arts, the world's best-selling design magazine. Buy issue 276 or subscribe to Computer Arts here. Related articles: New skills in UX design The 5 biggest UX design trends for 2018 Top tips for scaling up AR apps View the full article

Phenomenally successful creative talks series and ‘notworking’ community Glug has teamed up with international creative festival CANNT to launch an exciting series of events that will take place simultaneously around the world this June. Co-founded by Simon Gill (Isobar) and Laura Jordan Bambach (Mr President), CANNT Festival is an alternative creative event for anyone and everyone who can’t make it to the Cannes Lions Festival. This year, the event is going global – and you’re invited. Over 100 Glug x CANNT events will be launched in over 30 cities around the world from 16-25 June, at the same time as the Cannes Lions Awards. Glug will be holding events in many of its 30-plus existing city chapters, but the organisation is also calling for studios and agencies around the world to join in by hosting a one-off party or agency lunch event. There are two ways studios and agencies can get involved: 01. #CANNTlunch On Tuesday 19 June, studios and agencies are invited to open their doors for an hour and invite staff, clients, collaborators and local communities to come together for some inspiring short creative talks. All that hosts will need to organise are nibbles, drinks and two speakers. 02. Glug x CANNT Summer Party On Thursday 21 June, studios and agencies are invited to host a party, bringing together the local creative community to celebrate the industry and meet new people. Events can be anything from in-house drinks to a full-on summer party: hosts simply need to arrange the venue. For more information on how to run your own Glug X CANNT Summer Party or #CANNTlunch event, email jess@glugevents. Related articles: How to network successfully: 19 pro tips How to be a better speaker 10 inspirational design cities View the full article

In this masterclass, I'll reveal the basic steps you need to follow to perfect your figure drawing. I'll start with the first conception – or inkling of an idea – and take you through to the final presentation. Each written step is also covered in the video below, and involves applying core visual tools to develop your concept. Drawing is the graphical interface to your imagination: these techniques enable you to relate your idea to yourself and the world. The best pencils for designers and artists The aim of this workshop is to bring a feeling of life to your figures, based upon movement. We'll focus upon action – otherwise known as gesture – and the primary rendering steps involved in drawing a figure from imagination. Download the files you'll need for this masterclass. 01. Lead the eye Use your drawing tools to take viewers on a journey When drawing from life and imagination, the key is to understand the action that you're trying to depict. This is an analytical process. In this example, the lines lead you through the figure – they're not copies of shapes, outlines or stick figures. Each fragment leads you to the next, as if you were animating a journey through the figure, moving from one side to the other. It's not about creating dead drawings like CSI: it's all about transition. Make the viewer's eye move. 02. Go across the form Follow through, and take the line across and around the form. Imagine your pencil on the forms going over the contours The next primary technique involves drawing lines that go across and around the form, similar to a basic wireframe. Notice how this provides a clear understanding of the form in space. Focus on 3D, not shape or tone. 03. Build up the figure Draw very lightly so that you can change without erasing. Rehearse the strokes: three looks, two thinks, one application Here we come to the workhorse for describing form in action: the basic sphere. Drawing a sphere is the first step in the development of a figure. When adding spheres, focus upon creating clear, simple volumes. You can look at these as prototype anatomical structures, but don't become obsessed in making them perfect for now. These are general forms that will be adjusted as we go along. For now, pay particular attention to how they overlap. 04. Bring it to life The lines you put down show what you're thinking. Build the drawing Our goal as artists is to add a sense of life and movement to our drawings. So it's important that you use lines that communicate the gesture. Notice how the same simple spheres communicate very different actions. Every line has meaning. Your drawing needs to be purposeful in developing your first idea, which is your end goal. 05. All about reality Try putting two oranges in a stocking, and see what happens as you twist and bend it The way in which your drawing communicates a sense of physical reality is key to your figure having a sense of life. The first exercise in studying animation is the bouncing ball, and the primary elements of how the ball changes shape on hitting the ground and regains its shape in rebounding. Squash and stretch are fundamental drawing terms. I first heard these in discussions of the works of Michelangelo and Pontormo. Look at the Belvedere torso, copied by artists since Roman times. Note how I'm applying this basic concept to the simple forms of the figure. 06. Use the cylinder This approach also works for anything that's moving forward or backward When we drew the simple cross-contours back in step 02, each showed a section of a cylinder. Like the sphere, the cylinder becomes our next basic tool for figure drawing, and a building block for anatomical information. Where you place the ends of the cylinders and how you draw the ellipse are the main considerations in showing direction and foreshortening. The cylinder becomes part of a visual structure that we build anatomical structure on. 07. Symmetry awareness Don't get hung up on using boxes. They help, but aren't essential Pose analysis is key when drawing from a model. So far I've been building on an idea in my head, but when you're drawing from a model it's not often clear what the action is. Our next drawing tool is the box, which works to both clarify our understanding of the live model and our conceptual intent. This is because it introduces critical anatomical landmarks that show us symmetry – a key element in revealing action. 08. Make it move Make the pose yourself to feel the action At this point in the figure drawing, we get a merging of fundamental construction and anatomy in action. All the muscles are connected at two points; some at more. How the basic underlying structure moves and interacts affects the surface anatomy. So now is the perfect time to focus on not only the muscles, but the fabric of skin and fat on top of the muscles, and their interaction. Remember that everything goes over, around, compresses and stretches. 09. Keep the movement Feel the pencil as it goes over the form. Focus on the total, not the parts It's important to focus on how our original gesture sketch is applied in the development and rendering of the anatomy. We're drawing figures in action, not anatomy book illustrations. Each of the lines leading through the figure are transitions from one point to the next. Using these lines as guides, you can compose the anatomy to communicate the action. 10. Use the tone The rendering in a 3D computer model with the lights not set is the same as the modelling tone in a drawing Your first tonal rendering tool is the modelling tone. Push the sides back, and what faces you is in light. As the form turns away it goes into tone. The tones move the eye in the same way that lines do. They have to direct and describe the form. Don't copy tones, but use them to describe form. 11. Bring it to life The figure should look like it's in action – about to speak, turn, or just be in the process of doing something A major element in figure drawing that's often overlooked is the subjective content of the subject. In this example, notice how the look of the eyes and expression change the feeling of the drawing. Make the action and body language obvious, or no one will understand your intentions for the piece. 12. Use the photo, don't copy it When working from photographs, it's important to keep in mind that a copy of a figure in action doesn't mean the drawing will show action. You must create it. As I tell my students: we never copy; we analyse and construct. Compose the anatomy to show the action. This article originally appeared in ImagineFX issue 144; buy it here! Related articles: How to draw a face How to draw basic shapes How to draw people, animals and landscapes View the full article

Animation is eye-catching, attention-grabbing – and can be complicated to create. Usually making animated graphics takes a lot of work, but you can get professional quality work in minutes with the HTML5-based Animatron Studio Pro. Get a lifetime membership to the service for just $49.99 (approximately £36). Stimulating your audience with animation has never been easier. Use Animatron Studio Pro’s easy-to-master drag and drop system to get the look and style that you’re after. There’s no need for coding or complications, this tool uses a "what you see is what you get" editor that show you exactly how your final product will look. It’s simple, straightforward, and will provide your websites and mobile apps with an unmatched style. The lifetime membership to the powerful and extremely handy Animatron Studio Pro usually retails for $1,000. You can get it right now for just $49.99 (approx. £36). That's a saving of 95 per cent off the retail price – which is a huge saving for a must-have tool for any aspiring animator, so grab this deal today. Related articles: 8 ways to shine as an animator Learn to animate for kids The 27 greatest animated music videos View the full article

There’s nothing quite like some beautiful imagery to make your design portfolio come alive. But taking a good photo is more than just a simple ‘point and shoot’ exercise. If your photography skills are in need of a boost, you’re in luck. Our award-winning sister magazine Digital Camera has everything you need to start taking photos like a pro in no time. And if you subscribe today, you’ll get a full version of DxO OpticsPro 11 Essential – worth £99. Subscribe now to get your free software DxO OpticsPro 11 Essential is a powerful piece of photo editing software that lets you edit Raw and JPEG files, and is suitable for both Windows and Mac users. The program is being given away to every reader of Digital Camera in the issue that goes on sale in May. To make sure you don't miss out on this (and all the other gifts that come with the magazine every month) just subscribe by April 11 – and you’ll get your copy of DxO OpticsPro 11 Essential, for free, with the first issue that comes through the post. The best cameras for creatives in 2018 The software features all the exposure, dynamic range and colour controls that you would expect – but also includes built-in noise and distortion correction tools that will help optimise your images. And for high-contrast scenes, take advantage of the Smart Lighting feature to subtly boost detail in the shadow areas of your landscapes or portraits. Subscribe to Digital Camera today and get DxO's Optics Pro 11 for free! This advanced photo editing software has been designed specifically to give your creativity free rein. So don't miss out on this great offer – subscribe today. View the full article

App design is an exercise in brutally simple, user-centred design. The sweet spot is an interface that's as beautiful as it is functional. It should be intuitive to navigate, quick to load, but also incorporate little touches that make it unique and memorable. Thanks to the flat design revolution, and the prevalence of the pared-back aesthetic favoured by the likes of Apple and Google, many apps run the risk of looking similar. To some extent this is a positive thing, as users instinctively know how certain functions work. But it puts even more pressure on visual elements such as illustration or photography to help define the look and feel of the app. Read on for six expert tips on how to use images more effectively in app design... 01. Optimise photography for HD screens This app for Dollar Shave Club features a simple, very photography-led interface High-resolution screens are the norm now with most smartphones, which sets a bar of quality for the images you choose to use - particularly if you're using photography. For the iPhone X, you're working with a huge resolution of 1125 x 2436 pixels. Pixellation and fuzziness will look unprofessional, but fortunately these are easy to avoid if you source some decent-quality assets. Always bear loading time in mind, however – people expect things to load in a few seconds – so don't overdo it. Make every image count. Of course, sometimes it's inevitable that certain functions will take longer than that. That's where you need to think a bit more creatively, to make the wait more pleasant for the user – a loading spinner or progress bar is better than a blank or static screen. Another option is a 'skeleton screen' that loads information a piece at a time. 02. Make savvy use of animation Productivity app Doo uses functional animations to signify transitions, and quirky illustration adds personality Even the most subtle hint of animation can add charm and personality to your app, whether it's as simple as a functional transition, or something more character or story-driven that can surprise and delight the user. From a functional standpoint, animation can help people comprehend a state change in the app – what triggered it, the effect it's had, and how to initiate it again if necessary. It can also guide a user's attention to a particular point of the screen. Certain functional animations have in-built associations. For instance, if an element vanishes, the implication is that it's been removed entirely. A transition whereby it slides off to the side implies that it's simply hidden, and can be returned to later. The second type is known as 'delightful animation'. This adds warmth to your app, and makes it feel more human. It could incorporate anything from a playful treatment of a loading screen or progress bar, to tutorials about app features. 03. Pare everything back to basics This Chipotle Mexican Grill app combines a mouthwatering hero shot with a clear, simple call to action: 'Order now' One of the most universal rules of app design is to cut the clutter. You're working with a relatively tiny screen, and the more buttons, options and functions that are present on the screen at one time, the less intuitive the experience will be. Keep interface elements to a minimum, and only present the user with what they need to know. People want to perform tasks as quickly and efficiently as possible, ideally in a couple of taps, without scrolling through endless screens or inputting lots of data into complex forms. 04. Make all interface elements consistent A blue-green palette, rounded edges and stylised illustration all help give this Xfinity xFi app a coherent look and feel Consistency is also crucial, both in terms of visuals and functionality. A distinctive, coherent look and feel – even if the elements that define it are relatively subtle – helps users feel familiar and comfortable in the app, and ultimately make it easier and more intuitive to navigate. From a visual perspective, this includes structural elements such as colours, typefaces, buttons and labels. But also the use of illustration or photography: the style chosen, its role in the interface, and how frequently it appears. External consistency is important too. Where possible, an app should complement the look, feel and functionality of a brand's website – albeit simplified. Shared characteristics not only help avoid confusion, but also build brand recognition. 05. Design buttons with touch in mind Google's WazeRider app features large buttons and calls to action, with plenty of room to breathe between elements Another golden rule of app design is to design for touch screens, and particularly fingertips. Apple's guidelines state that buttons should be at least 44 x 44 pixels, but treat that as a minimum – if a buffer of an extra few pixels prevents the frustration of tapping the wrong thing, it's worth making room. Also bear in mind the space between interface elements, particularly buttons and other functional, interactive parts of the design. Even if your buttons are a decent size, if they're bunched too close together it can make accidental tapping more likely, which can annoy users and make them more likely to abandon the app. Different screen sizes are also a factor, particularly as high-end smartphones get larger. Held with one hand, certain areas of a larger screen are more challenging to reach than others, and may require stretching or even a readjusted grip. Frequent interactions and key navigation elements should be comfortable to reach, while more risky options such as delete and erase – which users will want to avoid triggering by accident – make more sense to be placed slightly out of reach. 06. Create hierarchy with size and colour Thanks to its large text and punchy colour, the monthly income figure in Clarity Money is the most prominent element Aside from games, the majority of mobile apps are essentially lists of some form or another – lists of options; functions; things to do, watch or play. As an app designer, part of your role is to make that framework more interesting, and easier to navigate. Even in a simple, pared-back interface with minimal design elements in play, it's important to establish a strong hierarchy to steer users towards the most important information, and make calls to action as clear as possible. Size is one solution: the largest element on the page should, usually, also be the most important. But colour can be very effective too. If presented with a list of menu options graded from black to light grey, people will assume the darker colour is more important and gravitate towards that. There are certain associations to bear in mind, too – particularly the colours red and green. A 'confirm' button in red next to a 'cancel' button in green will confound users' expectations and confuse them. According to W3C's accessibility guidelines, however, colour should never be the only signifier: text labels, or icons such as ticks or crosses, all help make your design accessible. Related articles: How to use images more effectively in digital ad campaigns 7 innovative ways to photograph your portfolio 5 brands so strong they don't need a logo View the full article

Last year during a user testing session for the BBC News app, one of the users made a comment that has really stuck with me. They declared: “I like to flow”. I don’t think there’s a better summary of what performance means to our users. On a fast app or website, the user can flow around, interact and engage with the content. Flowing experiences are good for site owners too. A fast-flowing experience helps users achieve their goals and in turn we achieve our organisations’ goals. Amazon and others have demonstrated the strong link between performance and user activity: as the wait for pages goes down, the amount of time and money the user spends goes up. Cut the distance with a cache Caches are created when a small amount of something is stored closer to where it is needed, normally to prevent rework. For example, if I am eating Skittles, I tend to pour a few into my hand and then eat from there. In effect, I am creating a cache of Skittles in my hand as it’s quicker to eat them that way than going back to the packet. This same pattern is used in technology. There are three caches we have to consider: Server caches: Cached data on the server, such as the results of database queries 
Network caches: Caches built into the network, sometimes by the site operator (known as a reverse proxy cache), but more often by ISPs or other networking providers 
Browser cache: The browser stores files on the user’s hard drive for reuse by the user Caching can make for a huge performance improvement; at the BBC I have seen caching increase performance more than 20 times in production code. It is beneficial for site operators too. With caching, more users can be supported by the same hardware. This reduces the cost in hardware per user and therefore reduces website operating costs. Design with the cache in mind For it to be effective, we want to use cached data as much as possible. To extend the Skittles analogy, if I want a blue Skittle but I don’t have any blue Skittles in my hand (aka my cache), I will have to go back to the packet. This is known as the ‘hit rate’. It’s a ‘hit’ when the item is in the cache and a ‘miss’ when it’s not. We want a high hit rate so the cache takes most of the load. One of the simplest methods to increase hit rate is to reduce variation. Stretching my Skittles analogy a bit, imagine if all Skittles were red. That way, any Skittle in my hand would be a cache hit; I would never need to go back to the packet. Applying this to the web, if we can give the same page to as many users as possible, the cache becomes more effective as more requests will hit the cache. Cache HTML for a short time The News homepage uses a 30-second max-age cache header to get content in front of users quickly without too much load So that’s the theory. Let’s get practical. Let’s start by looking at caching the request for the HTML. Caching of all file types is controlled using HTTP headers. The headers are meta data (data about data) sent from the server to the browser and visible to all the network hardware in-between. To tell the world it has permission to cache our pages and to share that cache between users, we set the following header: Here, we have also set a time limit: the maximum amount of time the cache should reuse this page for, in seconds. For this example, I have set it to 30 seconds. By setting the page to ‘public’, the user’s browser (and any hardware along the way) will keep a copy. So the first page load will make a request, but all page loads after that will reuse the original response, until the time limit is reached. The effect of network hardware along the way can be profound. Many large networks (such as ISPs) will have a cache shared between users. Mobile operators also use this technique heavily – for example, to cache and recompress images served over 3G. Site operators can also place an HTTP cache in front of their service. This is what we have done at the BBC. Cache static assets for ages BBC iPlayer stores static assets for a year – alterations to the URL ensures users see new versions promptly A technique we use a lot at the BBC is to treat static assets (like images, CSS and scripts) differently to how we treat pages. Caching HTML pages for too long can result in users missing content updates but we can take advantage of this behaviour when it comes to static assets. At the BBC we send all static assets with a maximum age of 31,536,000 seconds set in the cache header. This ensures the assets are cached for 365 days. In effect, assets are only requested once. This is good for performance but bad for flexibility as changes to that asset will take a long time to get to the user. In order to work around this, every time we release a new version of a page, we change the URL where the assets are kept. This trick means that new changes are put in front of users immediately but we still get the same performance benefits. Final words Caching in order to enhance website performance will in turn lower operating costs for our websites and preserve our users’ flow, leading to a great user experience. This article was originally published in issue 279 of net, the world's best-selling magazine for web designers and developers. Buy issue 279 or subscribe to net. Want to learn other ways to give your sites a speed boost? Jason Lengstorf is giving his workshop Modern Front-End Performance Strategies and Techniques at Generate New York from 25 27 April 2018 Jason Lengstorf is a developer, designer, author and friendly bear. His focus is on the efficiency and performance of people, teams and software. At IBM, he creates processes and systems to Make The Right Thing The Easy Thing™. At all other times, he wanders the earth in search of new and better snacks. In his workshop Modern Front-End Performance Strategies and Techniques at Generate New York from 25-27 April 2018, Jason will be showing attendees how to improve perceived load times – how long it feels like it takes to load a page – as well as actual load times, using only front-end techniques including: The skeleton loading pattern Better loading for static assets Lazy loading Service workers Better build processes and more! Generate New York takes place from 25-27 April 2018. Get your ticket now. Related articles: 4 tips to improve your page’s performance 7 expert tips for nailing web performance 3 simple ways to speed up your website View the full article

Researchers said a Mirai botnet variant, possibly linked to the IoTroop or Reaper botnet, was leveraged in attacks against the financial sector. View the full article

Excellent use of colour theory in design is one of those things that separates the great from the average. While subjective and nuanced, colour is a powerful tool that can define the emotion and tone of a digital experience. For something so important, my own workflow around colour was severely lacking. 3 huge colour trends for 2018 Although there are plenty of great resources already out there, I found there was no way to browse and compare original colour combinations quickly that felt ready to use. That's what I intended to solve by building Khroma. Pick a colour, any colour The Khroma training screen with the chosen colour bar up top One of the exciting things about Khroma is that you get to train an AI algorithm to act like an extension of your colour designer brain. The challenge is that in order to do that well, you must choose 50 colours that you like. When building the algorithm, I tried to make it work with less but the results weren't good enough. Fifty ensures that the generator has a decent range to be varied and flexible enough to help with all of your designs. The training process is relatively unstructured and is probably equal parts science and art. A few pro tips from my experience should help you get the most out of it. It's worth mentioning briefly here how the algorithm works. Your 50 colours will be used to train a neural network that will be able to recognise hundreds of thousands of other similar colours that you'll like (we'll call this your colour affinity). It knows which colours you don't like because it's not in the original 50 you chose. That means if you don't select dark brown, you won't see it. That's fine if you're not a dark brown fan but not if you miss something you really like. That's what makes going for variety so important. To start training your Khroma generator, go to khroma.co and click Personalize. You'll see some instruction and an infinite scrolling wall of colour blocks. A click on one of these blocks will add it to your chosen colours bar and another will remove it. The best way to proceed is to scroll through and choose any colour that jumps out as something you might want to use in a design. This works well for the first 30 colours. Time to refine At this point you'll want to look up at the chosen colour bar and see how it's shaping up. If this was your document colours in Sketch, would you have everything you need? The next 20 colours from here should be about refinement. As you proceed a little tooltip will pop out with some suggestions, eg 'picking some more magenta, yellow, and pale colours will improve your results'. I recommend trying to stick to these but don't be afraid to continue picking new colours. From here you should pick 10 more, bringing the total to 40. Look up at the bar again. Do you see colours that are virtually the same? It's not unusual to pick the same colours more than once since, well, you like them. But that won't be useful to your algorithm. I had a friend try an early prototype and he told me his results weren't very good. "It's mostly just blue," he said. "Did you pick mostly blue in your training?" I replied. "Yes. I really like blue." The best outcome will come from finding the widest breadth of colour affinity possible. It you mouse over a repeated colour in the top bar, you can click to remove it. This frees that slot for a colour you haven't yet chosen. Do some pruning of any repeats and continue to fill in new colours until you have five picks remaining. Toss in some wildcards I've found it rewarding to throw in some wildcards for my last five picks. These are colours that I don't think I'd ever use on their own. Often I've been pleasantly surprised by what Khroma does with them. When next to other colours, they seem to fit perfectly in a way I wouldn't have imagined. When you've chosen your wildcards you'll see a Train button pop up in the top right. You can continue to pick colours for as long as you'd like from this point but if your chosen colours look like a nice dark to light palette with lots of variety, you're probably set to begin training. Training should take about three minutes. You can expect the accuracy to get up to the high 90s. This essentially represents how well the algorithm can identify your colours. You can actually go back and edit your training colours later on if you want to try out some tweaks. Build your collection When the training process finishes, you'll be dropped into the generator. You'll be presented with an infinitely scrolling grid of colour combos in the type template. Each combo has an info panel you can open up to see details like the name, hex and RGB values, as well as a WCAG accessibility ratio. With the heart icon on the top right, you can start building a collection of your favourites. Find the right combo Doing a palette search with #8BD2CA and #32514E. If you're not seeing anything you like, try rearranging the colours in the search bar Search is one of the most powerful features of Khroma. Often I'll have a loose idea of what I'm looking for, or I'm already working with a certain colour and want to find complements. Since Khroma gives you access to hundreds of thousands of RGB colours in your affinity range, it seemed important to be able to sift through them. There are different parameters you can search with: type, hue, name, Hex and RGB. Types include dark, light, pastel, pale, deep, muted, rich, bright and neon. Hues are warm, cool, red, orange, yellow, green, cyan, blue, violet, purple and magenta. There are 1,566 specific colours you can search for with names like 'royal blue' and 'coffee'. Lastly, it accepts Hex and RGB values. Since Khroma works with two colour combos, save for palettes, there are two slots for search queries. If you enter one term in the search bar and search, you'll get results matching that term for the first colour slot and the second will be random. For example, if you search for 'bright', you'll get a high-saturation colour and a random pair with it. If you search 'bright and blue', you'll get those bright colours and a random blue in the second slot. You can also chain type and hue terms together, like 'bright blue' and 'pale yellow', for example. The details of each pair of colours. Everything can be copied with just a click for quick usage One big use cases where search is especially useful is when you have two colours you like and want to find complements to them. You would just enter those exact colours (#8BD2CA and #32514E say) and search under the palette template. Sometimes you'll search for a colour or term that isn't in your affinity range. That's where the bias controls come into play. You'll see them as two click and drag fields in the top right of the toolbar. Bias represents how strict the generator is in matching colours to the 50 you chose. Each colour Khroma generates runs through the algorithm and gets a percentage (how likely it believes you will like the colour) in response. If that percentage is beneath the bias, it will be thrown out and the process repeats. In the case of an out of range search query, the bias is automatically lowered until it can pass the threshold test. If it's totally out of your range (like our dark brown from earlier), then it will automatically turn it to 0. This way, every colour you get in Khroma defaults to your affinity but is able to adjust so you're not only limited to those colours. Custom images The five templates of Khroma – you can see the palette adding a couple more colours to the mix You can find a few handy options in the top right under the Settings icon. One of them is the ability to upload a custom image to the image template. You don't need to do anything to the image beforehand; just make sure it's the right size. While you can go ahead and use your own headshot (I won't judge), it's better to think of it as the ability to make your own template. Take a screenshot of something you're working on in Sketch or your design tool of choice, upload it, and start browsing limitless combinations! I hope you give Khroma a try and find it a useful and powerful addition to your design toolkit. This article was originally published in issue 303 of net, the world's best-selling magazine for web designers and developers. Buy issue 303 or subscribe here. Related articles: 5 tips for understanding colour theory The best colour tools for web designers 7 tips to manage colour better on the web View the full article

Think you know your alphabet? It's a skill drummed into us from an early age, but have we forgotten the fundamentals of letter shapes as we move away from handwriting and spend more and more of our time on digital devices? A recent study by Johns Hopkins University certainly explored the role of writing in learning letter shapes, and questioned whether or not massive exposure leads to more accurate and accessible knowledge. Part of the experiment invites viewers to complete the seemingly simple task of identifying the correct letter G from a lineup of four variants. But is it really that easy? Take the test for yourself with the video below. How did you do? Even though the letter G has appeared multiple times in this article, we still can't blame you for guessing an incorrect version. Everyone on our team got it wrong and letters are kind of our trade. In fact, a startling number of people appear to have trouble choosing the correct letter shape. As graduate researcher Gali Ellenblum points out, many participants "have no idea what they are talking about" when it comes to the letter G. To discover the reason behind this inconsistency of lettering knowledge, watch the team explain in the video below. Related articles: Quiz: What CSS framework should you use? QUIZ: Guess the logo – can you identify these brands? QUIZ: Guess the extreme close-up logos View the full article

Forget movie wallpapers and posters, it's movie title sequences that can often be the most important part of a film. Working in a similar way to a landing page for a website, movie titles set the tone, atmosphere and characters for the audience, all of which can make or break an opening scene. The likes of Saul Bass and Kyle Cooper have set the highest of movie title standards and as you'll see from this list, many graphic designers have clearly been influenced by them, while creating a new breed of iconic and culturally relevant movie title sequences of their own. Here – in no particular order – we pick some of the best movie title sequences ever created and professional designers tell us why they work. 01. Deadpool Studio: 20th Century Fox Sequence Designer: Blur Studio Year of release: 2016 The opening sequence to Marvel's 2016 super-anti-hero blockbuster does a first-rate job of subverting the traditional action movie tropes, replacing the standard credits with a sequence of all the clichéd casting decisions that we've come to expect. It's such a tonic to see the cast described in terms such as 'God's perfect idiot', ' A hot chick', 'A British villain' and 'A gratuitous cameo', not to mention the director summed up as 'An overpaid tool', that you might miss the glorious detail in the main business of the title sequence: a leisurely 3D pan through a frozen moment in time, gradually revealing an epic, overblown car crash. 02. The Pink Panther Studio: Mirisch Company/United Artists Sequence Designer: DePatie-Freleng Enterprises Year of release: 1963 Blake Edwards' 1963 comedy The Pink Panther is a generally uninspired crime caper that's redeemed by two things: Peter Sellers' relentlessly funny performance as Inspector Clouseau, and its spectacular title sequence that marries Henry Mancini's instantly recognisabletheme tune to animation by the legendary Friz Freleng. The creator of iconic cartoon characters such as Yosemite Sam, Speed Gonzales and Sylvester and Tweety, Freleng produced an inspired cartoon short for The Pink Panther, turning the film's titular diamond into an actual pink panther who proved so popular that he swiftly became the star of his own long-running series of cartoons, as well as featuring in the titles of nearly all of the Pink Panther movie sequels. 03. Guardians of the Galaxy Vol. 2 Studio: 20th Century Fox Sequence Designer: Framestore Year of release: 2017 The 2017 sequel to Marvel's Guardians of the Galaxy kicks off with an epic title sequence that cleverly combines 11 different visual effect shots into a single tracking shot. And while in the normal course of things we'd be concentrating on the pitched battle between the the Guardians and a massive tentacled beast, the title sequence neatly focuses instead on Baby Groot dancing to ELO's 'Mr Blue Sky', virtually oblivious to the mayhem unfolding around him. It's joyful, explosive stuff that sets the tone for the rest of the movie perfectly. 04. Vertigo Studio: Paramount Pictures Sequence Designer: Saul Bass Year of release: 1958 "Alfred Hitchcock may have been the master of suspense, but Saul Bass was undoubtedly the master of suspenseful title sequences," says freelance graphic designer and illustrator Joe Stone. "Everything from the shifty eyes, melodramatic music to the swooping typography give a sense of unease, culminating in the shifting, spiralling shapes and patterns that twist in and out of Kim Novak's pupils. Still effective and tense more than 50 years later, this is one of the most iconic title sequences committed to film." 05. JCVD Studio: Gaumont Sequence Designer: Gaumont Year of release: 2008 "In 2008 Jean-Claude Van Damme was a laughing stock," comments Erskine Design designer Tim Maggs. "He hadn't had a hit film since 1994's 'Time Cop' and since then had produced a stream of straight-to-video garbage. If anyone was going to take this film seriously, the title sequence for JCVD had to take on the unenviable task of restoring his pride and possibly throw in a laugh or too at the same time. "A three and a half minute one-take non-stop action-packed choreography whirlwind awaits. This insane crescendo of aggression building to Van Damme's escape – only for the scene to be ruined by a clumsy extra at the last moment – and you to realise that this was all a deceitful ruse. "The accompanying military font and contrasting backing soul track 'Hard Times' play right into the scene's hands, pushing you further into your initial presumption that this is just another Van Damme trash fest." 06. Batman Studio: Warner Bros. Sequence Designer: Richard Morrison Year of release: 1989 "This was one of the first films I ever watched at the cinema, and I can clearly remember the impact it had on the unnerved audience," says Autodesk 3D solutions engineer Jamie Gwilliam. "We are confronted by distinctive yellow text on black/blue tones, which echo the bold bat-wing logo. We are then left for two and a half minutes, unsure of what we're witnessing. Is it Gotham City? Is it the bat-cave? "The slow camera pace symbolises the measured sweeping motion of a bat soaring over its prey, accompanied by intense and evocative audio. We are flung into the film's dark tones, which we then witness for the remainder of the 1989 cult-classic. "We're confronted by bold graphics, which complement the narrative, whilst ensuring we proudly focus on the movie crew's talents, seamlessly building the audiences suspense." 07. Star Wars Studio: Lucasfilm & 20th Century Fox Sequence Designer: Dennis Muren Year of release: 1977 "The infamous 'crawl' has by now become an unmistakable part of contemporary pop culture, and has been praised, analysed and parodied in equal measure," says graphic designer Tom Muller. Still, 35 years on, the brutal simplicity of the titles haven't lost any impact, especially coupled with the equally revered John Williams score. "The perfect timing of the hard cut between 'A long time ago in a galaxy far, far away...' and the bombastic reveal of the title followed by the 'story so far' synopsis crawling over the screen (a nice homage to old pulp serials) make no qualms about the fact you're about to see something of epic proportions." 08. Mission Impossible: Ghost Protocol Studio: Paramount Sequence Designer: Kyle Cooper Year of release: 2011 Graphic designer Andrew Kelsall says: "The great thing about the sequence – apart from only starting a full 10 minutes into the feature – is the explosive start when a fuse is lit as the music begins. This fuse is subsequently featured throughout the entire sequence and ties the whole thing together, with the camera following it wherever it goes. "With burning circuit boards, skyscrapers with graphically-overlaid blueprints, an underwater shot, bullets, missiles and fast cars, the viewer tends to miss the fact that some of the movie ending (such as the circular car park) is featured in these opening credits! Overall, a captivating and enthralling sequence." 09. Enter the Void Studio: Fidélité Films Sequence Designer: Tom Kan Year of release: 2009 An onslaught of typographic design, Tom Kan's opening title sequence for Gaspar Noé's Enter the Void is certainly not for the faint-hearted. The typographical choices were picked to depict each team member's personality and style throughout the film and is often described as a homage to their hard work throughout the filming process. The finishing touch of LFO's 'Freak' perfectly sets the tone for the rest of the movie. 10. Scott Pilgrim vs. the World Studio: Universal Pictures Sequence Designer: Richard Kenworthy Year of release: 2010 "I felt like Knives Chau when I first saw this sequence," designer Joe Stone comments. "The hyper-kinetic, multi-coloured onslaught of text and imagery, soundtracked by Beck's incredible interpretation of Sex Bom-omb, was just the perfect way to start the film. "The references to each character played by the actor whose name is displayed is such a brilliant touch and offers tantalising hints at things to come. Everything about it matches the stylised comic-book world of the movie so well, which gets the film off to a great start." 11. Lord of the Rings Studio: Miramax Films Sequence Designer: Year of release: 1978 Artist and musician Daryl Waller says: "This was released the year that I was born. My Dad taped it onto VHS from the TV in the 80's. It thrilled and terrified me in equal measure. The opening sequence is a mixture of live action in silhouette and animation in black deep red. "A voice tells the story of the ring so far. This film has haunted me over the years, the way it looks, the music, the creepy atmosphere of it. Later on at college I studied NC Wyeth, who influenced Bakshi; and I made some work directly influenced by both." 12. Se7en Studio: New Line Cinema Sequence Designer: Kyle Cooper Year of release: 1995 "I admit that this one has become almost 'required viewing' if you ever discuss opening titles, and rightly so," Tom Muller comments. "The maniacal amount of detail that went into the title sequence (with a vast amount of props created just for giving the audience a few glimpses into John Doe's deranged mind), coupled with the remixed NIN track 'Closer', make you shift uncomfortably in your seat, anxious for what's to be unleashed, and in one fell swoop it made title design cool and relevant again." 13. Catch Me If You Can Studio: Dreamworks Sequence Designer: Kuntzel and Deygas Year of release: 2002 "The first movie title scene that came to mind for me was Catch Me If You Can, which by its simple illustrative nature is highly memorable," says graphic designer Jacob Cass. "The scenes take you through a sneak peak of the movie which always helps set the mood and the jazzy soundtrack tops it off perfectly." 14. Touch of Evil Studio: Universal Sequence Designer: Orson Welles Year of release: 1958 VFX artist Paul Franklin says: "The opening shot of Orson Welles' film Touch of Evil isn't really a title sequence in the strictest sense, but in it's tightly choreographed three minutes and 20 seconds it does a masterful job of setting up the tension at the heart of the story. "From the moment we see an unknown pair of hands literally starting the clock ticking through to the climax of the scene the camera is in constant, restless movement. Despite Venice Beach standing in for Mexico – and Charlton Heston standing in for a Mexican – the image is compellingly authentic, alive with an excited anticipation of what is to come." 15. Napoleon Dynamite Studio: Fox Searchlights Pictures Sequence Designer: Jared Hess Year of release: 2004 When Napoleon Dynamite was first made, the budget was so tight that the filmmakers didn't actually have an opening title sequence. Once the film sold to Foxlight, Jared Hess was able to film the iconic titles that have gone on to influence many a film. Sticking to the film's organic look, the sequence features an array of objects including burgers, highschool IDs and ready meals. Not bad for a title sequence that was shot just with a 35mm camera and a Kino Flo in the basement of Jared's close friend and photographer Aaron Ruell. 16. Kiss Kiss Bang Bang Studio: Warner Bros. Sequence Designer: Danny Yount Year of release: 2005 "Stylish and witty, this clever sequence has its tongue planted firmly in its cheek," Joe Stone says. "Borrowing heavily from Saul Bass' iconic style, the wonderful animation employs a bold colour scheme and great typography to playfully poke fun at the film-noir genre while still giving a brief overview of the story and locations the film takes place in. It's a perfect match for the funny and intelligent film." 17. Fight Club Studio: Fox 2000 Pictures Sequence Designer: Kevin Tod Haug & P. Scott Makela Year of release: 1999 3D artist Rob Redman says: "Everybody knows the first rule of Fight Club, but the opening sequence is one of the most memorable from the 90s – so let's break the rule and talk about it.... "The titles run for a minute and a half and set the scene and tone of the film perfectly. Starting off at the fear centre of the narrator's brain – the viewer is taken on a rollercoaster ride through a beautifully dark and disturbing ride out to the skull, complete with neuron firing 'lighting'. Technically the shots were pretty cutting edge at the time. VFX supervisor Kevin Mack led the team from Digital Domain who used ray tracing for depth of field effects. "The actual neural pathways were plotted using L-systems, which were more usually used for creating trees and natural growth patterns. The feeling of being taken on a ride meant some compromise with the technical accuracy of the biological aspect of the shots (supplied by medical artist Kathryn Jones), but the final result leaves a real sense of a white water journey being taken. "The overriding impression you are left with is one of slight unsettled anxiety and unease and you're left in no doubt that you're about to watch film with themes of darkness and introspection." 18. Juno Studio: Fox Searchlight Pictures Sequence Designer: Gareth Smith & Jenny Lee Year of release: 2007 Love it or hate it, Juno has become a cult classic since its release back in 2007. The opening titles perfectly set the scene of teenage innocence and instantly depict Ellen Page as the main character. As she walks through her home town, designers Gareth and Jenny use a mixture of 2D and 3D animation along with hand-drawn illustrations. The song 'All I Want is You' by Barry Louis Polisar finishes off the title sequence perfectly, as Ellen Page effortlessly glides into live action. 19. The Shining Studio: Warner Bros. Sequence Designer: Greg McGillivray & Garrett Brown Year of release: 1980 "This stands out as one of the best title sequences ever to me, not to say in particular for the horror/thriller genre," Tom Muller says. "It's a deceptively simple and economic approach (like a lot of Kubrick title sequences) that, in a few minutes, proves to be the perfect setup for the film. "The flyover sequence, combined with Wendy Carlos' haunting synth score, hammer home the isolation of the characters within the vastness of the landscape. Whilst you're following the tiny car in an almost sublime landscape, the hints of Indian chanting add to the overall dreadful eeriness of the titles, enhanced by the cold credit sequence which rolls in reverse over the screen. You're almost relieved when you finally arrive at the Overlook Hotel - but then you still have to discover room 237." 20. Snatch WARNING: Explicit content! Studio: Columbia Pictures Corporation Sequence Designer: Stuart Hilton Year of release: 2000 "Snatch begins with an ingenious title sequence," Tim Maggs comments. "Ignoring the convention of introducing the actors' names, it focuses instead on characters, thus giving the audience an immediate head start in understanding the complex plot. "The titles flow seamlessly and quickly, interspersed with gritty, pop-art like freeze-frames. As well as introducing the characters, the title sequence cleverly shows their entwined connections whilst the motif of exchanged monetary objects alludes to a subliminal parallel desire the men all share." 21. 101 Dalmatians Studio: Walt Disney Productions Sequence Designer: Stephen Frankfurt Year of release: 1961 "Disney title sequences have always had incredible attention to detail – a convention that goes right back to the early days of the animation studio," Simon Jobling comments. "101 Dalmatians is a prime example of this. The aesthetics of the title sequence are typical of 1961. "The retro feel of the typography and illustration, the way the score of the soundtrack audibly matches the animation motion – it really engages with the audience. It makes typically boring credits exciting, especially with the mood of the music." 22. The Girl with the Dragon Tattoo Studio: Columbia Pictures Sequence Designer: Neil Kellerhouse & Blur Studios Year of release: 2011 "Full of hints at story elements and references to the characters, it's easy to be overwhelmed by the sheer amount of imagery presented in this sequence," says Joe Stone. "From keyboards and phoenixes to blooming flowers and grabbing hands, it creates an abstract map of Lisbeth Salander's mind, all drench in thick black tar. Offset by tasteful and subtle typography and driven by Trent Reznor and Karen O's thumping version of Immigrant Song, it's a dramatic and intense start that sets the dark tone for the rest of the film." Like this? Read these: The 10 best 3D movies of 2018 15 Cinema 4D tutorials to up your 3D skills 30 top examples of 3D art View the full article

The global creative industries have never been stronger. According to a 2015 report from UNESCO, in 2013, the creative economy employed nearly 30 million people worldwide and generated $2.25 billion in revenue – accounting for three per cent of the world’s GDP. Since then, the global creative industries have continued to grow, driving economic growth and raising quality of life all over the world. This is great news for designers: whether you’re considering a permanent change of scenery post Brexit or Trump, or simply planning an inspirational holiday, there are dozens of exciting cities to choose from. 5 creative cities for weekend getaways So where are the most amazing places to live, work and visit as a creative professional? We’ve analysed the stats to bring you 10 of the best. Of course, this isn’t a definitive list – we haven’t mentioned Tokyo, Paris, San Francisco or Sydney, to name but a few. And should we have included the world’s leading supercities, London and New York, when increasingly unaffordable rents are forcing some creatives out of the city? Debate aside, what we can tell you is that the following cities are shining examples of creative economies. Each has its challenges, but all are packed with culture, innovation and stunning examples of design being used for good. Read on for some truly global inspiration… 01. Mexico City Mexico City has a powerful story to tell and is packed with creative possibilities Named one of the 50 most beautiful cities in the world by Condé Nast Traveler, Mexico City will become the sixth World Design Capital in 2018. The title recognises Mexico City’s commitment to using design as an effective tool for economic, social and cultural development – making it an inspirational model for other global cities, and an attractive destination for creatives. Home to branches of world-class design studios like Anagrama – which has more Facebook followers than Sagmeister & Walsh – the city isn’t short on design talent or work opportunities. Nearly every major American corporation has a presence in the oldest capital in the Americas, from Apple and Amazon to Procter & Gamble, and in 2014, the creative sector accounted for seven per cent of the GDP. “There’s a lot of work; everyone is busy,” says Rafael Prieto, co-founder of branding and architecture agency, Savvy Studio. “There are a lot of companies and the city itself is all about entrepreneurship – there’s always someone opening something. Competition exists, but it’s healthy and makes things interesting.” The cost of living in Mexico City might be higher than the national average, but so are average design wages, points out Prieto, although they’re still a whopping 60 per cent lower than in London. And inspiration is everywhere: Mexico City is a melting pot of history and culture. Recognised as a World Heritage City in 1987, historic monuments like the Palacio de Bellas and ancient Aztec temple ruins Templo Mayor attract tourists from all over the world, while numerous museums, art galleries and theatres provide constant cultural activity. “I chose to live in Mexico City because of its character,” says Prieto. “It’s relevant, it has energy, and somehow it feels that there are possibilities – creative people from everywhere are all busy just doing their thing,” he smiles. 02. Berlin Living costs go far in Berlin Long a hotspot for the trendy start-up scene, Germany’s culturally diverse, tolerant and cosmopolitan capital remains a thriving mecca for talented creative minds from all around the world. In fact, according to the UNESCO Creative Cities Network Monitoring Report 2008-2016, creativity is Berlin’s key distinguishing feature today. More than 195,000 people are currently working in the creative industries – that’s 10 per cent of all employees in Berlin. The city’s 30,000 companies in the sector generate a yearly turnover of more than €18 billion, adds the report, which shows that a dense landscape of design companies, service providers, showrooms, fairs and sales platforms has emerged in the last decade. So why is Berlin so attractive to designers? With consistently high scores in international rankings for quality of life, affordable rents and moderate cost of living, it’s an economically viable proposition for studios, freelancers and big business alike. Factor in the city’s rich cultural offerings, vibrant atmosphere and outstanding education facilities, and it’s not difficult to see why heavy hitters like Edenspiekermann have a base here. “Berlin’s vibe is much more chilled than, say, London,” says Lauren Kelly, a ‘designer-comepsychologist’ at design studio DURA, and founder of Glug Berlin. “There’s more of a focus on quality of life and life outside of work – the lower cost of living, sprawling parks and long summers definitely help. Money goes further, so there’s time to play, experiment and work on side projects.” If you’re visiting the city, she suggests taking a walk to Teufelsberg. “It used to be NSA’s listening towers before the wall fell,” she explains. “Afterwards it became the playground of graffiti artists. It’s a great spot to enjoy breathtaking views.” According to Coroflot, the median annual salary for a graphic designer is €36,000. That’s lower than other capital cities, says Kelly, but she points out that pay goes further in Berlin. “There’s a lot of opportunity for designers, especially those working in digital and product, due to increasing investment in the start-up scene,” she adds. “You can already see the influx of talent and business after recent political shifts outside of Germany. It’s a really exciting time to be here.” 03. New York New York is a competitive but world class place to be A raft of research puts New York City as the world’s leading creative hub. According to EY’s Global Talent in Global Cities 2015 study, New York takes the top spot for “creative class attraction”. Its unique cultural scene is, it says: “embedded in a cosmopolitan and forward-thinking urban environment, generally considered beneficial to creative activities.” Certainly much work is available: NYC is America’s capital of finance and law, and with big business comes big design opportunities – as the city’s dense network of studios and agencies attests. According to AIGA, in 2014, NYC had 52 per cent more graphic design jobs than the next most-concentrated US city it studied (Los Angeles). But competition between design shops is high. “New York attracts super bright people, all aiming for the same prize: to be the best. It takes incredible focus, discipline and hard work to run a business here,” points out Richard Cumming, owner of experiential marketing agency Two Goats Creative and founder of the New York Chapter of Glug. He’s worked at leading advertising agencies around the world and says NYC is one of the most multi-sensorial, immersive cities he’s ever lived in: “Between every blink, I take in a wealth of creative inspiration. And it’s great for networking.” Salaries are good. Coroflot puts the median graphic designer annual wage at $51,000; while others place it closer to $65,000. “If you’re a good freelance senior designer, you could earn $1,250 per day,” adds Cumming. But with the cost of living 20 per cent more in NYC than London, and 68 per cent more than the average US state (AIGA), it doesn’t always go far. “Apartments are small and expensive, food is expensive, medical is ridiculously complicated and expensive, and entertainment is amazing – but expensive,” he says. However, despite many arts organisations being priced out of Manhattan, NYC’s economic power, openness to ideas and world-class cultural assets remain a potent combination for creatives. “The vibe is electric, enthusiastic, positive, progressive, exploratory, encouraging, competitive, courteous and kind,” says Cumming. “It’s not just about the city either: New York state is vast and has much to offer – I encourage you to explore all of it.” 04. London London has beaten off competition to be the UK's number one creative centre When the New York Times declared London the design capital of the world in September 2012, there were 1.7 million jobs in the creative industries across the UK. By 2015, this figure had risen to 1.9 million, with a huge 40 per cent of those based in the capital. One thing is clear: despite the growth of creative clusters like Bristol, Manchester and Edinburgh, London remains the epicentre of the UK’s booming creative industries. Steeped in history, London is a magnetic, multicultural metropolis that attracts business, tourism and talent. A world-class education system ensures a culturally diverse incubation of design talent, while a wealth of high-profile international design firms promise jobs, competition and opportunity. “London has top-class music, art, fashion, sport, tech, film and design – the list doesn’t really end,” agrees Hamish Gardner, a designer at creative agency The Beautiful Meme. “As graphic designers, we have the privilege to dip in and out of these worlds. I’d recommend it to anyone.” Yet London failed to make the world’s top 30 cities for best quality of life in Mercer’s 2016 survey. Social unrest dented the capital’s stability during the 2011 London riots, and today the UK faces new challenges with Brexit. Cost of living, too, is wildly inflated compared to the rest of the country. So how tough is it to make it as a designer in the Big Smoke? “Entry level internships and placements normally pay London ‘living wage’ – £19K per year,” reflects Gardner. “A junior salary will make things easier, but we’re talking about London. We pay twice whatever you do for what you buy.” Nevertheless, London remains a tantalising creative prospect. “Competition is tough, but the huge wash of agencies and studios that range in discipline from packaging to 3D allows you to specialise, and carve a niche for your creative path without alienating too many job opportunities,” he adds. “This alone is a huge advantage to seeking meaningful design work in London.” 05. Cape Town Cape Town has progressed over the years to become an exciting creative hub A visit to Cape Town soon shows why designers are drawn to the city. The 2014 World Design Capital is home to a number of flagship global industry events, including the annual Design Indaba conference and festival, as well as a high number of design-led organisations, events, networks and publications. Inspiration is everywhere. Influenced by Zulu, Xhosa and other African tribes – as well as Dutch, British, German, French and Indonesian settlers – distinct neighbourhoods with diverse histories and architecture offer cultural stimulation, while breathtaking landscapes, an agreeable climate and a relatively low cost of living add to the appeal. Statistics from Numbeo show that the cost of living in Cape Town is 55.45 per cent lower than in New York and 46.38 per cent lower than London. Wages are lower, too, of course: according to Ad Talent’s 2016 salary survey, graphic designers with two to five years’ experience earn on average between R168,000-300,000 per year (versus R192,000-R360,000 in Johannesburg). However, while South Africa has made significant strides since 1994 to reduce extreme poverty and crime, Cape Town ranked within the 10 most violent cities in the world in the most recent report from the Mexican Council for Public Security and Criminal Justice. Nevertheless, creativity is a key driver of growth. The Design Indaba Expo, for example, contributed more than R2 billion to the South African GDP over the seven years in which it ran. Pure Creative founder Andrew Burke returned to South Africa in the 1990s after 10 years living and working in the UK. He watched a new energy develop after Mandela’s release in 1990: “This energy passed over into the world of design and was simply electric,” he recalls. “From typographers to product manufacturers, fashion designers and artists, creatives are no longer ashamed to be African. We have embraced our unique history, taking inspiration from the geographic colours, landscape textures and the many tribes of Africa to develop an entirely new style that can stand proudly on the international design stage. It’s an exciting design hub,” he says. 06. Seoul Seoul has lots of opportunities and a wonderful quality of life A fast-paced metropolis with a vibrant pop culture, ancient historical sites, exciting nightlife, an innovative arts scene and one of the world’s fastest digital infrastructure systems, Seoul has transformed into a prosperous, global cultural capital in a remarkably short amount of time. Since the 1990s, the South Korean government has targeted the creative industries to drive growth – and with approximately 73 per cent of Korean designers concentrated in Seoul, the city sits firmly at the heart of the national design scene. Cost of living is only 2.5 per cent lower than in London, but low crime rates, high quality of life and a thriving design scene make it an attractive destination for creatives. “Lots of things happen here – projects, festivals and exhibitions,” confirms Jin Kang, a member of Seoul-based design collective Ordinary People. “It’s fast-paced, and this atmosphere challenges us to create cool new projects. There are a lot of opportunities and many fun people. We recommend a visit.” 07. Barcelona A saturation of good studios makes Barcelona the place to be There’s more to Barcelona than the Sagrada Família, Antoni Gaudí and the Picasso Museum. Design is everywhere: bold logos and vibrant identities cover the buses, beach and boulevards, while a rich concentration of progressive studios and freelancers – including the likes of Mucho, Hey, Toormix and Folch – continue to raise the stakes in exciting, forward-thinking design. Barcelona is undoubtedly an attractive proposition for creatives. But despite its cultural diversity and ideal climate, the city dropped to 39 in Mercer’s 2016 Quality of Living Survey after the recession, which hit the city hard. “‘Rent’ has become the world’s most hated word here,” says Nathalie Koutia, communications director of OFFF Barcelona. She adds that creatives in Barcelona are more likely to be working for companies abroad than on local projects. Hey founder Verònica Fuerte agrees. “There aren’t a lot of opportunities here, and Barcelona is becoming very expensive to live. The cost of living has gone up but our salaries haven’t.” However, neither wouldn’t leave: “I love it here,” says Fuerte. “It’s intimate, uncomplicated and exciting. The design scene is very active – there’s a lot of collaboration – and there’s a good balance between work and life. I can’t imagine living in a city where it’s grey all day.” 08. Buenos Aires From the sublime to the ridiculous, Buenos Aires has it all Dubbed the ‘Paris of the Southern Hemisphere’, Buenos Aires is a seductive city of contrasts and contradictions. Skyscrapers sit alongside shanty towns; global trends are interpreted with the city’s effervescent Latin lifeblood. “It’s magical and crude at the same time,” says Mariano Sigal, founder of multidisciplinary design studio Cinco. “An air of freedom and non-prejudice transits its streets, and this is translated into the design scene: simple, neutral lines coexist with pop colours; French curves are mixed with rational and modernist terminations. There is an orderly disorder that’s very difficult to describe.” Between 2004 and 2012, the creative sector grew by 89.1 per cent in real terms, according to UNESCO’s 2016 Buenos Aires City of Design report. Today it represents up to 8.6 per cent of the city’s GDP and 9.1 per cent of the city’s workforce, employing almost 150,000 people. “Unfortunately, the country is in a recessive stage, economically speaking,” says Sigal, adding that independent designers have responded by creating “small, genuine brands” – which is where the interesting work is, in lieu of a large local client pool. “Designers can support themselves, though, and live in Buenos Aires in a dignified way – they can have good wine from time to time and enjoy the wonderful Argentine beef,” he adds. Mercer’s 2016 Quality of Living Survey ranked Buenos Aires relatively low (93rd out of 230 countries) thanks to issues in safety and drug-related violence, but with a low cost of living (34.65 per cent lower than London), good work-life balance and a rich cultural heritage, Buenos Aires remains an attractive proposition for expats and visitors. 09. Montreal Montreal has a lot to offer studio workers and freelance designers Montreal isn’t called a ‘city of designers’ for nothing. Data obtained by UNESCO shows that in 2015, over 25,000 designers worked in the city, with the field responsible for 34 per cent of the overall economic impact of the cultural sector. With a thriving arts and music scene, Montreal is young, multicultural and boasts some of the most exciting names in the industry – including studio Vallée Duhamel. “Montreal is big enough to have all the good parts of a city; nice museums, great restaurants and a very good music scene, but at the same time it’s small enough that you can connect with a lot of different people and grow a network that’s really interesting professionally,” says Julien Vallée, cofounder of Vallée Duhamel. He highlights Mile End – an ethnically diverse neighbourhood in-between Montreal’s francophone and anglophone districts – as a particularly active neighbourhood for creatives. Salaries tend to be a little lower than other cities in Canada – Payscale.com puts Montreal’s median graphic designer salary at C$40,222 – but the cost of living is lower too. “There are a lot of great studios and freelancers here,” adds Vallée. 10. Melbourne It might be expensive but Melbourne is worth it In Melbourne, food and drink are taken as seriously as design. Peer into any of the city’s gritty alleyways and you’ll be rewarded with cool cafes, trendy bars and boutique galleries, while a thriving design culture ensures creativity around every corner. “You can’t walk far without seeing a really well-crafted piece of graphic communication, cool sign or cafe identity,” says Pete Johnson, founder of design studio Can I Play. “There are world-class graphic, fashion and furniture designers along with some of the best architects on the planet. Inspiration is only a block or two away.” Average pay sits around AU$50,190 per year, says PayScale, but while cost of living is cheaper than Sydney, Melbourne isn’t cheap. “Housing prices are though the roof,” says Johnson, adding that design is a popular career choice so competition for jobs can be tough. “That said, it’s a great place to get in the mood to design. And everyone seems to be having a good time on a Friday evening!” This article was originally published in Computer Arts magazine issue 264. Buy it here. Related articles: The city guide website that's curated by designers for designers 18 incredible design museum trips 10 top cities for design graduates to thrive View the full article

You’ve racked up tons of data over the years, and now you need a place to keep it all. Zoolz Cloud Storage can keep your most important data safe and easily accessible so your favourite photos, videos and files are always there when you need them. Get a lifetime subscription on sale now for only $49.99 (approx. £36). Zoolz Cloud Storage provides both the convenience of access and the peace of mind of knowing your files are always safe. This cloud backup system quickly and quietly backs up your files and stores them in the cloud, where you can view and access them anytime you want. You'll get a total of 2GB of space: 1TB of Instant Vault, where you can drag and drop your files from desktop or mobile, and 1TB of Cold Storage, which provides a swift and automatic backup. You can get a lifetime subscription to Zoolz Cloud Storage for just $49.99 (approx. £36). That's a saving of over 98 per cent off the retail price, so grab it today to safeguard all your files! Related articles: Google's free cloud storage app is finally here 8 best external hard drives and SSDs for Mac and PC users in 2018 Here's how hackers are stealing your data View the full article

Over the past several years, I've noticed the term 'visual regression testing' cropping up in web development conversations more and more... and for good reason. It promises to provide tremendous value for those who are tired of manually checking their sites for style issues. With this growing popularity, it seems like every month there's a new tool released, each promising to provide awesome visual regression testing automation. Unfortunately, I've found most to be more dream than reality, the truth being that these types of tests are deceptively complicated. There are, however, a few that stand out from the crowd. While each has its benefits and drawbacks, I believe every tool in this list is worth a look. A quick chart looking at the major features of five of the most popular visual regression tools out there [click the icon to enlarge] 01. Wraith Wraith has been around for several years. It was one of the first tools on the scene, and it continues to see enhancements in functionality, with over 200 pull requests closed in its GitHub repo. It's the go-to tool for anyone developing in Ruby. Try it out From your project directory, run wraith setup. Then run wraith capture configs/config.yaml. This will run a set of tests on two different versions of the BBC homepage. After completing your test run, check out your screenshot gallery by opening the newly created shots/gallery.html page in your browser of choice. You can also customise your tests. In the configs/config.yaml file you can update the sites and pages to test, along with setting screen widths and diff mode. Pros and cons YAML configuration file is simple to work with You can compare two different URLs Installation can be tricky if you're not familiar with Ruby Running interactions specific to individual pages can be difficult 02. PhantomCSS Another veteran option, PhantomCSS has been a popular choice among frontend developers. Its familiarity and functionality make PhantomCSS a great choice for frontend folks looking to stretch their legs in terms of website testing. Built on top of PhantomJS/CasperJS, PhantomCSS adds to the fantastic functionality provided by those two tools. Try it out Create a new JavaScript file with the following code: Then run your file via the CapserJS CLI: casperjs test myfile.js. Your script will run in the background and your images will be saved to the screenshots folder. Pros and cons Many tutorials and presentations on it Built on top of CasperJS, allowing integration of page actions into tests Tests limited to PhantomJS No interface for reviewing/managing screenshots 03. Gemini I find Gemini appealing because it packages traditional Selenium testing in an interface that isn't too complicated. As with PhantomCSS, you can define custom actions around your screengrabs. Unlike PhantomCSS, Gemini goes several steps further by providing 'test suites' that can help organise your code. Try it out Create a .gemini.yml file with the following contents (replacing the URL to your Selenium grid server): Then create a test file, and put it into the gemini folder in the root of your project. The file can be as simple as: Next, create your baseline images by running gemini update. You should see one test passed. You can run a regression test via gemini test, which will compare the new images with the ones stored inside the gemini/screens directory. Pros and cons Selenium integration allows you to test on a wide variety of browsers and devices Well-documented site with various examples Provides a framework for sorting tests into suites No direct access to Selenium, limiting the type of actions you can take on a page Running the same test on multiple resolutions requires advanced configuration 04. WebdriverCSS First, a caveat: the future of WebdriverCSS is uncertain, as there are efforts to replace it with a more up-to-date module. That said, I think it's still worth mentioning, as the same basic structure will carry on to the next implementation. Like Gemini, WebdriverCSS hooks into Selenium for its functionality. It also sits on top of another tool: WebdriverIO. Because it is part of the WebdriverIO ecosystem, it benefits from everything that framework has to provide. This includes hundreds of commands you can send to the browser, before and after taking screenshots. WebdriverCSS also integrates well with test frameworks like Mocha, Jasmine and Cucumber.js. Add in connectivity with cloud Selenium services like Sauce Labs and Browserstack and you've got a full-featured functional test suite with visual regression testing as the cherry on the top. Try it out Create a new JavaScript file (test.js) in your project with the following content: Run the test by typing this command into your command line: $ node test.js. Validate the images that were created by checking the webdrivercss folder. If you run your test again and the screenshots change, you'll notice a diff folder will be added and the respective diff images will be inside of it. Pros and cons Since it uses WebdriverIO, you can take advantage of all the features that framework provides Quick configuration of different screen resolutions Enables you to hide/mask certain areas of the screenshot Future uncertain as this specific plugin is no longer officially maintained Requires you to learn how to use WebdriverIO 05. Spectre Unlike the other tools on this list, Spectre doesn't run tests. Instead, it focuses on providing image comparison capabilities, along with an admin interface for managing screenshots. In normal use, you'd pair Spectre up with a tool like WebdriverIO or PhantomJS. The latter would do the work of capturing the screenshots, while Spectre would manage storing and processing of images. I'm a fan of this, as the separation of concerns makes it easier as a community to have a testing tool of our choice, but also build out a common admin interface. Try it out On your Spectre website, open up the path /tests/new/. From there you can customise the test information and upload an initial screenshot. After submitting your test, go to the main page of your site where you'll see a 'Test Project' created, along with a notification of 1 passed. You can click on any of the links on that page for further details on the test. Next, go back to the /tests/new page and upload a new image. When completed, return to the main page and you'll see that Spectre ran the comparison and is now reporting a failing test. Pros and cons Clean, friendly interface for managing screenshots Doesn't try to do too many things, focusing efforts on a specific area of the testing landscape Requires knowledge of Ruby server setup Requires you to know how to send data/screenshots via a REST API Honourable mentions There are a few tools that I feel are worth mentioning, even if they didn't get a featured spot in the list above. They are: Galen Framework Shoov BackstopJS For a comprehensive list of tools and articles on the subject, check out visualregressiontesting.com. What next? 'That list is great, but can't you just tell me which tool to use?' I hear you ask. Well ... no, because it greatly depends on what you're testing. If you're checking a fairly simple site, Wraith or Gemini are great options. But if you need to mimic user actions, then WebdriverCSS or PhantomCSS would be a better fit. If you're unsure, don't worry. Just pick one and try it out. No matter which tool you choose, you'll learn valuable lessons about frontend testing and just how powerful (albeit complicated) it can be. This article originally appeared in net magazine issue 290; buy it here! Related articles: All you need to know about mockups, wireframes, and prototypes 15 web design secrets from the world's biggest brands Join UXPin's free online conference on agile UX View the full article

Presentation is crucial in a design portfolio. And whether the final outcome is digital or printed, a beautifully art-directed approach to photographing your work can help you stand out from the crowd. The best cameras for creatives in 2018 This is particularly true of printed collateral and packaging work, as it's always hard to do justice in a flat, still image. The more creative, dynamic and original the approach, the better. Read on to discover six top design agencies that have nailed the art of shooting work for their portfolios... 01. Add punch with a vibrant backdrop Mexican studio Anagrama shot its Cocofloss project on a vibrant coloured background One of the simplest but most effective ways to add punch to your portfolio images is to shoot your work on a brightly coloured backdrop. Although shooting on white and then adding a background colour later in Photoshop is always an option, coloured backdrops – perhaps even combined with coloured lighting – can achieve a memorable effect that leaps off the page or screen. Mexican branding agency Anagrama used exactly this technique to shoot promotional images for Cocofloss, a California-based company making flossing a "fun and rewarding experience for everyone". Anagrama developed a fun, vibrant visual language, using a pastel-based colour palette and holographic foil to break from the clinical white usually favoured by oral care brands. Shooting on a bright backdrop not only complemented the vibrant packs themselves, but also reflected beautifully in the foil detailing. 02. Art-direct a scene to add interest New York agency Vault49 took the time to art direct a simple scene to show off its PARKS!DE Brooklyn branding Showcasing digital work in print is, if anything, more challenging than doing the opposite, as any interaction and motion design elements are lost in the static image. And while showcasing online work in its natural habitat is theoretically as simple as including the appropriate hyperlink, sometimes a stylised image is needed to add some extra wow factor when it's presented in a portfolio environment. Stock imagery of laptops, tablets and smartphones can be great to mock up digital work in situ for this purpose, and can save both time and money shooting the same hardware yourself over and over. But sometimes it's worth going the extra mile. The branding scheme features beautiful hand-drawn illustrations, which also feature in the portfolio showcase New York-based agency Vault49 did exactly that to show off its branding work for The PARKS!DE Brooklyn, a luxury NYC apartment complex. Tasked with appealing to millennials with a lifestyle-driven message, the agency created a comprehensive branding system, and accompanying promo materials – with refined handcrafted illustrations used to add a touch of sophistication. In Vault49's online portfolio, the PARKS!DE Brooklyn website is showcased on a laptop, iPad and iPhone in a carefully art directed 'scene' that continues the lifetime theme, complete with miniature shrubs, textured backdrop, and accessories such as a notebook and wooden pencil holder. 03. Arrange print collateral in quirky ways Hey Studio's gridded notebooks could have been shot on white, but the grid pattern adds an extra stylised twist Just as with digital work, sometimes a high-quality stock image can help you showcase your print collateral effectively – comping your latest identity work onto stylish shot of some blank stationery will certainly save you time and money. However, a quick search for branding work on a platform such as Behance will demonstrate just how many similar shots of isometric collections of stationery there are. It can pay off to do things differently to suit the project at hand, or to establish a unique style of art direction for your studio. Raising one notebook on a jet-black box adds an extra dimension to the portfolio shoot To promote its range of high-quality gridded notebooks, Barcelona-based Hey Studio photographed them carefully aligned on matching grid-patterned paper, for an incredibly striking effect. In one image, Hey also made use of a jet-black box – also perfectly aligned with the grid pattern – to raise one notebook above the others, creating an eye-catching geometric interplay between the different objects that adds an extra stylised twist. 04. Adds GIFs and slideshows to demonstrate processes Trapped In Suburbia used a simple animated GIF to demonstrate the 'bake to reveal' process for its Talking Ceramics book Sometimes still images aren't quite enough to communicate why people should care about a project, especially if there's an exciting creative process or dynamic interactive feature to show off. Dutch studio Trapped In Suburbia has built a reputation for its innovative, boundary-breaking uses of special print treatments and engaging interactive technologies, and its Talking Ceramics book was certainly no exception. In homage to the transformative, unpredictable power of a ceramicist's kiln, the book – white at first – must be baked in an oven to reveal the cover design. The Dutch studio also took plenty of before-and-after photos, and shows a selection of spreads in a slideshow format While the studio took plenty of before and after sequence images for use in the portfolio, the exciting nature of the process needed something more in-depth to show it off to full effect. Trapped In Suburbia created an animated GIF to show the book cover at different stages of 'baking', as well as producing a video explaining how it all works. A special edition version of the book also featured a 1mm thick porcelain cover intended to crack over time, to encourage the reader to embrace the beauty of mistakes. 05. Explore different angles and detail shots Entitled Paper Wraps Stone, Build's sample book for Arjowiggins Creative Papers needed to be shot carefully When it comes to printed portfolio items, particularly where different paper weights and textures, and special inks and finishes are involved, it's worth taking the time to shoot a range of different angles on the piece to show it off to best effect. For its promotional notebook for Arjowiggins Creative Papers, entitled Paper Wraps Stone, Leeds-based studio Build worked with a selection of different papers, as well as a debossed cover and metallic silver Pantone. Build took the time to photograph a range of different angles and detail shots to show off the texture of the paper The final book has a matt grey cover with simple black type, and many of the colours inside are fairly muted, such as pale blue, beige and soft peach. If not photographed carefully for a portfolio, it's the kind of project that could recede easily. Accordingly, Build shot the book to accommodate a wide range of different angles and close-up details, ensuring a range of angles and perspectives as well as showing off the soft sheen from the metallic Pantone, the crispness of the binding, and the subtle texture of the special papers. 06. Combine video and stills to explain experiences FIELD begins by showing off the stunningly immersive generative visuals from its Vision Wall installation in video form Showing experiential work in a portfolio is one of the biggest challenges a designer can face: in many cases, it's impossible to replicate the immersive experience of actually being there in person. This is particularly true of a print portfolio, but even online with video at your disposal it can still provide a unique set of hurdles. It's important to document the actual installation as faithfully as possible, using whatever tools are available. Specialising in generative design and interactive, immersive installation work, FIELD has mastered the art of documenting experiential design work – and in most cases, it involves finding the perfect balance between stills and video. The agency then moves on to show the visuals in situ on the giant screens at the KAPSARC Centre One example is its Vision Wall, a permanent installation of three ever-changing generative artworks in the KAPSARC Centre, Saudi Arabia, designed as metaphors for the spirit of scientific research. FIELD leads the case study in its online portfolio with a screen-filling explosion of motion graphics, but then features a wide range of images of the giant screens in situ, with a mesmerised onlooker in the foreground. It's an important addition to add scale, but also to try and put you in that person's shoes. As all the above examples attest, the best way to treat any given project in your portfolio depends largely on context, but the common factor is that taking the time and effort to document it effectively will really pay off in the long run. Related articles: 5 brands so strong they don't need a logo 7 ways to make your design studio a better place to work 5 inspired self-promo ideas for design agencies View the full article

CSS Grid is perfect for creating two-axis layouts of rows and columns. The syntax is simple and makes page layout a breeze. Layouts that would have required multiple nested containers can now be simply described in CSS. Grid works differently to other layout properties, since applying the ‘grid’ value to the ‘display’ property will affect any direct children. These elements are now grid items and will be positioned according to the rules you set on the parent (unless being specially placed). Get to grips with the grid Grid brings a number of new features: Grid gap 
Instead of using margins, Grid has its own property for defining gaps between grid items, enabling the layout of the grid to be defined and unaffected by any gaps. Grid systems (like those found in inuit and Twitter Bootstrap) usually rely on setting negative margins in order to align everything correctly. The Fr unit 
Short for fraction, this new unit of measurement is used to split the layout into fractions, with or without a gap. Grid placement 
CSS Grid allows for any element to be prioritised and positioned anywhere on the grid before all other items, which are then positioned automatically. Grid areas and templates 
Named areas on the grid are defined, which can then be referenced to define the layout in an almost ASCII fashion. minmax() 
The ‘minmax()’ property value enables you to apply a minimum and maximum size for grid items, columns and rows. This feature is sadly missing from Flexbox and every other layout module in CSS. Build your grids CSS Grid’s powerful areas and templates enable complicated layouts to be easily achieved. You start by applying a name to the elements within your grid using the ‘grid-area’ property – for example ‘header { grid-area: header; }’. Once you have named all of the areas in your grid you can then use the ‘grid-template-areas’ property to describe the layout. The code example above describes a three-by-three grid, you simply repeat the name of the grid item if you want it to span multiple columns or rows. You can also use media-queries in order to change the grid layout for different-sized screens. You can then use the new ‘fr’ unit to define how the width is split among the different columns: The example shown above will split the available width into five equal width values; in other words it will apply one-fifth to the first column, three-fifths to the second column and the final fifth to the final column. In order to size the rows you can use the new ‘minmax’ property value to size the top and bottom columns to their content and then allow the middle row to span the remaining space in the grid. This article was originally published in issue 271 of creative web design magazine Web Designer. Buy issue 271 or subscribe to Web Designer. Want to strengthen your CSS Grid skills? Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018 As a designer and front-end developer at a software development agency, Brenda Storer has been using CSS Grid in production for websites since its initial release to browsers in March 2017 and is a big fan. In her talk at Generate New York from 25-27 April 2018, Brenda will show step-by-step how you can progressively enhance your site with CSS Grid and write a bulletproof fallback for older browsers (or even continue to use your current grid framework as a fallback), all with pure CSS: no JavaScript required. Generate New York takes place from 25-27 April 2018. Get your ticket now. Related articles: CSS Grid Layout secrets revealed Create a responsive layout with CSS Grid Get up to speed with CSS Grid View the full article

Security experts say breaches impacting Delta Air Lines and Sears customers is tied to malware planted on a third-party chat service. View the full article

If you're looking for a free blog or a platform for your design portfolio then there are plenty to choose from these days. It's always tempting to default to WordPress, but if you want a strong alternative then you should check out the brand new version of Craft CMS. Choose a website builder: 17 top tools In development for the past three years, and completely rewritten and redesigned, Craft 3 is available now and claims to be three times faster than the previous version, as well as boasting hundreds of new features and improvements to help you get your next site online with ease. Craft enables you to create custom content models so that you get exactly the site you want. You can see what your pages will look like in real-time with a built-in Live Preview that updates as you type, and with its Matrix field it becomes simple to create longer-form pages with multiple content types. And if you're aiming for an international audience, it features powerful localisation tools to help you target specific languages and territories. Essential new features of Craft Craft 3's image editor means you can prepare pictures without the need for Photoshop New features in version 3 include Multi-Site, enabling you to run multiple sister sites from a single Craft install, an image editor with which you can crop, rotate, flip, and set focal points on all your images, and an inline asset preview that lets view your photos and assets everywhere in Craft CMS by pressing Shift + Spacebar. The biggest new feature, though, is the Craft Plugin Store: a secure online marketplace that enables you to buy plugins directly through the Craft Control Panel without having to hunt through third-party sites. It's the easiest way to add extra functionality to your site or to implement extra tools to match your skillset. Get all the plugins you need in Craft 3's secure Plugin Store You can find out more about Craft 3's new features here. Cost-wise, the great news is that the Solo version – ideal if you're building a website for yourself or for a friend – is completely free. And if you're building sites professionally for clients or teams you'll want the Pro version, which comes in at a very reasonable $299 plus $59 per year for updates, and offers user accounts, custom branding and developer support. If you want to try it out you can hit the Craft demo page to get your own demo site to fool around with, but if you want to jump straight in it's available to download or buy right now. Related articles: 50 amazing tools for developers 2018 Why you need a content style guide (built into your CMS) 4 top online shop solutions View the full article

A malware family called Rarog is becoming an appealing and affordable entry point for hackers to run cryptocurrency mining campaigns, researchers say. View the full article

Whatever happened to our love for man’s best friend? It’s a question posed by a dissenter in Wes Anderson’s latest film, Isle of Dogs, which tells of a struggle between people and canines. In the stop motion film dogs are exiled to a vast garbage-dump island, but if the exhibition for Isle of Dogs is anything to go by, the love for our four-legged friends is as strong as ever. Located in The Store X on The Strand in London, the Isle of Dogs exhibition saw fans of the film queuing up in droves to get a closer look at the film’s leads. The film, which was shot over 445 days at East London’s 3 Mills Studios with a crew of more than 670 people, features more than 240 sets and 1097 puppets. This extensive amount of work went into creating the 144,000 still frames that make up the film’s 100 minute duration. A taste of this craftsmanship can be seen in the exhibition, which feels right at home in The Store X’s open gallery space. Models and sets are showcased in the open, giving attendees a rare chance to see details from the film up close and personal. All that separates you and the stars of the film are white lines painted on the floor, which ties in nicely to the totalitarian tone of the film. Here are some of our favourite bits from the exhibition. 01. The scale of the sets It’s hard to get a grasp of how large the characters and sets are when you’re watching an animated film. After all, cinemagoers have become so used to post-production ramping up the wow-factor of what we watch. However we were stunned by the size of the sets and characters on display here. From the towering Megasaki Municipal Dome to the city’s temple, the scale of these models goes beyond what we expected and gives you a greater appreciation of the handiwork that went into making them. 02. Animation insight As well as defying our expectations in terms of size, the setup of the models gave us a deeper understanding of how the film was made. For example, one sequence in the Isle of Dogs sees a tracking shot pan through a laboratory as scientists work on a cure for the canine population. Viewers would be forgiven for expecting this sequence to be stitched together from various shots and sets, but at the exhibition we see that the laboratory was constructed in such a way that cameras could easily shoot across it. The use of electrical lighting for street lights and the bauble in Atari’s headset also surprised us. Given that the film is a stop motion animation we weren’t sure if lighting would interfere with the shooting process, so it’s fascinating to see how these elements can all work together. 03. Time to catch what we missed Isle of Dogs is absolutely packed with references to Japanese art and culture. Some of these, like the use of famous paintings including The Great Wave off Kanagawa, are immediately obvious. However some of the more subtle nods to the country might have passed you by as the film plays out. The exhibition offers a great chance to mull over the small details and let some of the more artistic allusions sneak up on you. Take the model of Atari’s crashed plane, for example. This stunning set piece was permanently surrounded by admirers snapping on their smartphones when we visited, but it’s only when you take a second to step back that a similarity to a certain flag starts to emerge... 04. Attention to detail It’s a sad truth that a lot of hard art design work goes unseen by the time a film is released. While some details are lost in the edit, others are only seen on the screen for a few seconds. Getting the chance to see these models in person lets viewers explore the characters and sets on their own terms and uncover hidden gems. These include the beautiful paintings on the walls of mayor Kobayashi’s bath-house, to the intricate statues and scriptures found on the Megasaki temple. Imagery of cats in the temple are more obvious when you get more time to study the set, which helps to reinforce some of the subtle themes that Wes Anderson has weaved into the film. (Are felines behind all this hostility to dogs?) 05. A cafe set in… the cafe set When you walk into the Isle of Dogs exhibition, you’re immediately transported into the Megasaki noodle bar set from the film, complete with propaganda blaring from a television that loops with animation from the movie. In a clever bit of curation, the model of the noodle bar set is situated in the corner of the real life eatery it inspired. Once you’ve finished taking a picture of the set you turn around and find that you’re inside the world of the film. It’s a nice touch that helps to immerse you into the world of the Isle of Dogs before you head on the the exhibition proper. If this has whetted your appetite for the exhibition, you’re in luck. The Store X has extended its run from 5 April through to 8 April, so you’ve still got time to visit. Isle of Dogs is in cinemas now. Related articles: View the full article

Reeking of flouro inks and heavy with luxurious Fedrigoni paper, TypeNotes issue one arrived last year to a blaze of industry acclaim and promptly sold out. For a magazine largely devoted to the specialist art of typography, this immediate success was as surprising as it was gratifying for creative director Jason Smith. His London-based boutique type foundry, Fontsmith, has been creating unique fonts since 1997, providing typographical solutions for agencies such as The Partners, Dixon Baxi and ManvsMachine, and designing bespoke fonts for everyone from the BBC to Xerox. London studio The Counter Press designed TypeNotes Fontsmith’s TypeNotes blog was already a popular resource for designers to check out new fonts, pick up expert advice and absorb a broad range of design commentary. “I thought, why not open this up to a much wider audience, create new content and make an actual magazine, a genuine magazine,” Smith explains, fresh from the release of issue two earlier this year, which has won yet more industry plaudits. “We already had the concept, we just needed to rework it into a more traditional medium.” Hardcore font fetishism With little experience in magazine publishing, Smith recruited design studio and letterpress workshop The Counter Press to handle the look and feel of the magazine, and design industry stalwart Emily Gosling (senior editor at AIGA Eye on Design) to provide the editorial muscle and ensure the magazine was more than just a Fontsmith typography showcase. “The fact it’s published by Fontsmith makes no difference,” Gosling explains. “There’s total freedom with what we publish, as long as it’s interesting and relevant for our audience: people who are into typography and graphic design, either professionally or otherwise” Respected designer Astrid Stavro shares five things she looks for when she hires a designer in issue two of TypeNotes So as well as hardcore font-fetishist reports on tattooing, stone-carving and sign writing, there is also plenty of wider-reaching reporting ('Five things I look for when hiring a designer'), opinion pieces ('Has less is more gone too far?') plus profiles of industry talents. A bound-in (tragi) comic by Babak Ganjei, exposing a freelance illustrator's day-to-day subsistence, is so funny it justifies the cover price alone. And there are many welcome variations on well-worn tropes: an interview with 3D illustrator Jack Sachs discusses his creative process through his own sketchbooks, for example. Meanwhile, a bound-in (tragi) comic by Babak Ganjei, exposing a freelance illustrator's day-to-day subsistence is so funny it justifies the cover price alone. Few magazine execute a sucker punch with their first issue, but thanks to Gosling’s experience and obvious passion for design, TypeNotes effortlessly skips straight past the awkward baby steps of a fledgling title to deliver an ambitious, satisfying design journal, brimming with confidence and possessing a clear editorial identity. Type porn Issue two’s showpiece article – Type Porn – is a vertiginous plunge into the history of X-rated movie posters of the 60s and 70s, Gosling herself investigating the psychology at work behind the lurid yet often beautiful posters (think Deep Throat). A fascination with the slightly seamier side of design is also evident in an interview with Nigel Waymouth – a key figure in 60s psychedelic design – who looks back on the energy and romanticism (and drugs) that shaped the design of the sexual revolution, a font-themed entry point burrowing down into a much wider discussion of design culture. Type Porn looks at the history of X-rated movie posters in the 60s and 70s And when TypeNotes does hit hardcore full-geek mode ('To The Point' is a celebration of unusual punctuation marks) the beautiful layouts (courtesy of The Counter Press’ David Marshall and Elizabeth Ellis) are delivered so elegantly that even those with only a casual interest in the complex alchemy of typography will be intrigued. The magazine stands as testament to the passion of all involved. “Once we had the magazine in our hands, it smelt and felt great,” Smith remembers, “and the indie mag shops loved it too”. Tattoo artists talk about the intricacies of lettering onto skin in issue of two of TypeNotes His desire to “make a physical thing… something beautiful and engaging,” has been matched by Gosling’s determination to escape a “depressingly screen-based life” and make something readers could savour instead of frantically thumbing through “on a little cracked phone screen”. Just two issues down, TypeNotes already feels like an old favourite. We’re intrigued to see how this beautiful magazine continues to develop when the third issue arrives later this year. Issue two of TypeNotes magazine, £10, is available from the Fontsmith shop. Also read: 30 books every graphic designer should read View the full article

Making a name for yourself in the design industry takes time, skill and patience. It's not just about having a show-stopping design portfolio: this fast-paced industry means creative folk need to continually look for ways to upskill so you can lead from the front. Tobias van Schneider was born in Germany, raised in Austria, and now lives and works in New York City. He's gone from self-taught beginnings to lead product designer and art director at Spotify, and is currently the co-founder of Semplice, a portfolio tool for designers. He describes himself as a "designer and maker", and he possesses a spectacular beard. Here, he imparts five simple maxims to help you raise your design game. 01. Forget the idea of overnight success "We love to celebrate success stories and put people we admire on a pedestal," says van Schneider. "But we forget even the most successful people had to start somewhere and worked hard to get where they are today. There's no such thing as an overnight success." 02. Remember any project can change your life "Look at every task or project that comes your way, even the seemingly small and insignificant ones, as an opportunity," he advises. "You never know where an article you write, a video you make or a design you create might take you. Say yes until you can afford to say no." Every project that comes your way, even a side project, could bring with it a life-altering opportunity 03. Be stupid "The greatest ideas never make it into the world because we’re too afraid of what other people think. We fear failure and come up with excuses. We overcomplicate and our idea dies before we’ve even begun. Keep it simple, be stupid." 04. Trust your gut "With all the information in the world at our fingertips, we can easily talk ourselves in circles," says says van Schneider. "Information often fails us, but intuition almost never does. Your intuition is the sum of your experiences, learnings and a little magic. Do what feels right." 05. Don’t do it for money "Of course we need money to live, but it shouldn’t be our main motivator," he adds. "Aim to make what you need to get by. This will open up opportunities and relationships you wouldn’t otherwise consider, and work that actually excites you. Money usually ruins the fun, but fun brings the money." This article was originally published in issue 270 of creative web design magazine Web Designer. Buy issue 270 here or subscribe to Web Designer here. Related articles: 8 challenges to overcome to achieve your creative dreams Add a glitch effect to your website 10 great CSS animation resources View the full article

Big companies – those with millions (if not billions) of users – tend to have complex problems that attract some of the best talent the market has to offer. The bigger the company, the bigger the challenge. But bringing together so many brilliant minds also provides an opportunity to do great things. When it comes to shaping our online experiences, big companies have proven to be very influential in recent years, offering disruptive user experiences, new ways of loading and displaying content, and elegant approaches to getting the users where they want to go. That’s what happens when your teams are at the top of their game. We spoke to designers from these brands to explore how they present their products to users, and the processes that have led them to design success. 01. Be humble Cap Watkins, BuzzFeed "Be humble about your work. That’s really what it all comes down to. A lot of designers do a project and try to keep it to themselves until it’s perfect, or reject feedback because it’s not what they had in their mind. The goal of the BuzzFeed design team is to let the content shine through "Being humble allows for the possibility that your design choices may be wrong, and opens you up to receiving feedback and information from your coworkers, users, people in other departments, and so on. It’s probably one of the most important traits for anyone – designer or not – when it comes to producing great work." 02. Create a community Nick Myers, Fitbit "Our organisational structure helps designers have more impact and be more efficient. Many internal design teams are centralised, but the Fitbit UX team’s designers are integrated across product development. This means, typically, that members of the design team sit with members of product and engineering to collaborate directly on a specific feature or platform element. Designers and engineers sit together at Fitbit "This means designers can be more focused, as opposed to multitasking in a centralised agency-like model. They also have more input on product strategy and can see the work through to launch, so it’s generally a lot more rewarding. We work hard to help designers feel like part of the community by assigning design managers to support teams in clusters." 03. Share early and often Sam Horner, Netflix "The Netflix design team starts by ideating concepts, and uses a blend of speaking with users and live data to develop them. These insights allow us to build stronger ideas, unbounded by opinion or bias, and design wholly focused on our users. In Netflix’s 2015 redesign, major alterations were made to the UX, based on years of research "We share early and share often, encouraging everyone on our team to have a voice. No single person has control over what gets created, empowering designers with ownership over their work. Our flat team structure means designers are consulted by others based on their skills, not their title. Netflix doesn’t impose any processes on our designers, we simply give them access to the resources they need to create great TV experiences." 04. Learn to improve Garlon Cheung, BBC "At the BBC the audience is at our core, so gaining insights and testing is important. Because of diverse audience needs, every team works in different ways to achieve this, but the overall mentality is learning to improve. This means making design decisions backed by evidence. It’s vital we use both quantitative and qualitative research to understand what people do and why they do it. BBC sites such as the iPlayer are the result of thorough research into audience needs "New methods appear frequently and teams experiment to see what is effective and what isn’t. We’re constantly improving how we collaborate and broadening our skillset. A big organisation like ours needs great communication and great people, so we give them the freedom to be the best at what they do." 05. Be inclusive Ashleigh Axios, Automattic "Automattic is a distributed company, with people in 51 countries around the globe unifying around the single goal of making the web a better, more equitable place. We believe that open source is one of the most powerful ideas of our generation and that collaboration leads to innovation. We share as many of our ideas, resources and code with the world as we can, priding ourselves on our inclusiveness. With employees all over the world – in 51 countries – communication is key at Automattic "We Automatticians also have a hunger to learn from our peers, products and users. We’re an incredibly flat company – we believe ideas can come from anywhere and recognise that our results are better when we treat each individual as a catalyst for much-needed change." 06. Mix it up Netta Marshall, Airbnb "We have a team dedicated to creating tools for designers, as well as an expansive Design Language System, and an internal tool called Airshots that allows us to quickly and easily see what everyone else is designing. Since designers are embedded into sub-teams and sit with cross-functional members, this tool gives us visibility into what designers on other teams are focusing on. AIrbnb’s Design Language System is just one of a suite of tools created for the designers at the homestay network "Being in close proximity to non-designers is useful for picking up new skills as well. If you want to learn to code, prototype, analyse data or research, there’s someone who’s more than happy to sit down and share their knowledge with you. As a designer, being open to different perspectives as a default is great when you’re designing for such an international audience." 07. Understand the problem Fiona Yeung, Google "UX design is an iterative, collaborative and ongoing process that involves many different people along the way. My first step in any design project is to understand the problem as well as who the target users are and what they want. It’s our responsibility to understand why we are designing something first, before we can jump right in. Design staff at the search giant share work often "On my team at Google, we like to create use cases and personas, starting off with low-fidelity mockups in the early stages before moving on to hi-fi designs to demonstrate and test our ideas, catching any gaps in our solutions." 08. Open up your processes Nick Myers, Fitbit "One critical stage in our process is the group design critique. Each week, two design teams share work with the rest of the designers and researchers. The session is carefully facilitated to get the most out of the time together. The Fitbit team are very open with each other when solving design problems "A team shares the problem they’re trying to solve, the design solution, the users they’re designing for and where they are in the process. They also share the feedback they’re looking for from the rest of the team. After any clarifying questions have been asked, the team offers silent feedback via Post-It notes. The presenting team reviews the notes and open discussion happens around the bigger topics. We’ve evolved the process over many years and continue to refine it as the team has grown. "The session helps the larger team participate in projects across Fitbit. Any system inconsistencies that may arise can be resolved. A lot of productive discourse happens in this session in a way that challenges the team. Most of all, the feedback is additive and helps the team push their work further than they would have on their own." Next page: Top insights from designers at Twitter, Shopify and Etsy 09. Rethink critique Kurt Varner, Dropbox "Design critique. Such a loaded term, and one that is filled with nuance and sits differently in the mind of almost every designer. At Dropbox, we recently revamped our feedback process to align expectations and increase its effectiveness. While seemingly obvious, each piece was thoughtfully crafted to meet the needs of our team. At Dropbox, critique meetings are referred to as ‘design sessions’, to remove negative connotations "First, we’ve relabelled them ‘design sessions’ to remove negative connotations. We problem-solve together to increase idea generation and reduce the expectation that a single designer can create the perfect solution. We don’t anchor things to a TV: designers use printed flows, Post-Its, sketches, whiteboarding and so on. "There are three one-hour sessions per week, and this helps to keep the time between feedback loops short. We also keep the team size small, inviting only the people with the right context, and ensure there’s a low barrier to entry – no presentation needed – to encourage feedback early and often." 10. Focus on feedback Alexander Mayes, Facebook "For me, the single most important part about being a designer in any design process is knowing how to give and receive feedback. Yeah, yeah, in my head I say it too – ‘That’s so clichéd, we get it: Pick your battles, have thick skin, don’t be attached to your work…’ But even at a place like Instagram and Facebook, it’s something that is valued above most things. Feedback is key at Facebook "It’s something that is so ingrained in our design process that there’s literally no way to not be excellent at it. To move ahead you have to be great with relationships and there’s nothing more challenging to your relationships, as a designer than your ability to give and receive feedback. Honestly, it’s something that – even after typing all that – I can say I still struggle with at times." 11. Know your customers Randy Hunt, Etsy "It’s not about you; it’s about someone else. Call them user, customer, prospect, audience, or simply person. When they are similar to you, it’s reasonable to think it’s about you. Either you’re wrong, or you’re right but won’t continue to be as your audience grows. If you don’t know who ‘they’ are, what their motivations are, and what’s important to them, what are you doing to learn and continue learning?" Imagine your customer as someone different to you, says Hunt 12. Encourage ownership Serena Ngai, Shopify "I lead a design team at Shopify focused on our third-party partner and developer ecosystem. At the beginning of the year, I realised that our usual process wasn’t working any more. Our ecosystem was rapidly growing and our UX team was trying to accomplish too much. We weren’t achieving the quality we expect at Shopify, and we didn’t have time to go deep into finding solutions. At Shopify, each designer becomes an expert in their domain "Our new process focuses on product themes: bringing together teams and projects that share similar goals and technical stacks so that each designer becomes an expert on a certain domain. This inspires a sense of ownership within the team, and empowers us to influence priority and scope of project. Most importantly, it also gives us time to focus so we can create experiences and quality we are truly proud of." 13. Don’t design alone Malthe Sigurdsson, Stripe "You should almost never design for or by yourself – you’re a sample size of one, you’re biased, and it’s a big world out there. This is doubly true for a product like Stripe, which is used by hundreds of thousands of businesses of all shapes and sizes, from cattle companies in Nebraska to app developers in Cairo. Stripe serves so many diverse clients, talking to others is key "The solution is – as is often the case in life – communication. Talk early, talk often, and talk to a lot of your users. Obtaining a deep understanding of what they’re really trying to do will help you design a truly helpful product." 14. Adapt your approach Nick Myers, Fitbit "It’s hard to use just one approach across hardware and software with such a diverse set of features as at Fitbit. Designing for hardware requires rigorous planning and up-front design exploration over a long timeframe. If we’re designing feature updates or clearly defined new features, the process tends to be simple and straightforward and work within a standard agile approach. Designing for hardware requires rigorous planning and up-front design exploration "Most fascinating are the features we design that are completely new and push us into the unknown. In these cases, I advocate we build-to-learn, as it’s very difficult to predict how design solutions will fare when people interact with them over a long period of time. "Ultimately, we’re trying to help people live healthier, more active lives. Changing behaviour is complex, so the effectiveness of a design often doesn’t become clear until we see outcomes in the real world." 15. Keep consistent Ashlie Ford, Twitter "When a large group of designers is solving disparate challenges for an array of products, it’s no surprise that consistency becomes a challenge itself. To solve this, we’ve established a design system of reusable styles, components and patterns. A consistent design system makes life easier for everyone "The design system provides a shared vocabulary that helps teams seamlessly develop within the same product ecosystem and at a much more rapid pace than before. Since design and engineering develop system elements once, this lets teams spend more time on the user problem, rather than on the building blocks of the system." Illustration: Elly Walton This article originally appeared in net magazine issue 290; buy it here! Related articles: Do we really need to build this? Why design is key to Airbnb's incredible success Interview: Lara Hogan View the full article

Coming up with a great product is a skill, but knowing how to sell it is a totally different talent. Marketing your product online is an entirely different beast than working with old media. Luckily, the Digital Marketing Foundations Mega Bundle is here to help. Get it on sale now for 96 per cent off the retail price. Being successful requires some luck, but it requires even more know-how. In order to optimise everything about your website and grow your online presence to a size bigger than you could have ever imagined, you need the Digital Marketing Foundations Mega Bundle. This eight-course collection will teach you how to master every aspect of online marketing, from search engine optimisation to how to make the most of platforms like Facebook, Twitter, YouTube, and Pinterest. You can improve your website and brand with the Digital Marketing Foundations Mega Bundle, on sale right now for 96 per cent off the retail price. That's a huge saving for a bundle that will help make you money, so grab this deal today. View the full article

Photography’s greatest gift to the artist is that it freezes motion – perfect for reference. So when I started learning how to draw outside and got into en plein air painting, I had to contend with the fact that reality doesn’t hold still. What is plein air painting? Painting en plain air is the practice of painting outdoors, capturing people, landscapes and scenes in natural light – rather than painting indoors from reference sketches, photographs, life models and so on. Painting outside became popular with the French Impressionists. It was made possible with the invention of transportable paint tubes and the plein air easel, and involves a unique set of challenges, skills and techniques, which we’ll walk through here. Painting moving objects en plein air When you're plein air painting, the sun moves across the sky, dragging every shadow around with it. It ducks behind clouds. It changes colour. And that’s not all. People and animals come and go. Trees move. Waves roll in and roll out. Boats swing around as the wind shifts. You don’t realise how fluid reality is until you try to paint it. How to draw movement: 16 top tips Sometimes the movement is slight, and it’s easy to adjust your drawing or painting to match. Other times, say when you’re trying to capture someone walking along eating an ice cream cone, you have seconds to capture the entire thing: posture, clothing, hair, lighting, dripping ice cream... It’s enough to make anyone hyperventilate. So take a deep breath and grab your best pencils. Everything is going to change while you work, yes, but the answer isn’t to rush to get it all in before that happens. You can’t win that battle. Instead, start by looking... 01. Think of your eye as the camera The world isn’t a photograph. It moves and changes all the time. Keeping up requires observation combined with a deep visual vocabulary. Take a “snapshot” with your eyes, trying to pull in as much information as possible: the angle of her shoulders, the hunch of his back, the way the water catches the light. Calm down, and get as much information in as you can in the moments you have. 02. Organise what you see Sketching is how artists take notes. So part of your opening snapshot should include a sketch. Make some choices about how to organise what you see into an artistic composition. When things change and you get distracted, your sketch will help bring you back to your idea. 03. Draw what you see Keep your sketches where you can see them as you paint The beauty of plein air painting, and working from life versus a photo, is that life offers perfect information. The colours are 100 per cent accurate. The resolution is infinite. Now is the time to give your close observation muscles a workout. Really work to see what’s there, as we so rarely do. 04. Draw what you know Because you only have a moment to capture things that are moving and changing, you need a broad visual understanding to fill in the blanks. There’s no shortcut to developing this, just lots and lots of drawing. Take notes with your eyes, then fill in the gaps with your understanding. 05. Lots and lots of drawing Coffee shops and retirement homes are prime sketching locations. People tend to stay still. Next time, I’ll get into what sort of gear you need to begin your plein air adventure, but here’s tool number one: a sketchbook. Keep one on you at all times. Pull it out instead of your mobile phone when you’re at the doctor’s office or coffee shop. Deepen your visual understanding. This article was originally published in issue 157 of ImagineFX, the world's best-selling magazine for digital artists. Buy issue 157 or subscribe to ImagineFX here. Related articles: Master negative painting in watercolour Review: Rosemary & Co Pocket Watercolour Brushes Staedtler watercolour pencils View the full article