Rss Bot

There's a difference between a design that looks good and a design that feels good. Your users want apps and websites that are intuitive and easy to use when they interact with it. Learn the best ways to create engaging designs with the UI and UX Design Bootcamp. You can get it on sale for just $39 (approx £27). The UI and UX Design Bootcamp is packed with more than 39 hours of design training taught by professionals who know the topic best. For anyone interested in the art of design, especially design that satisfies users, this bundle is a must-have resource. It's the best way to learn the principles of creating interactive design. It doesn't matter what you’re creating or what platform and tools you're working with, you'll pick up important concepts to help improve the functionality of your designs and keep your visitors coming back. You can pick up the UI and UX Design Bootcamp on sale right now for just $39 (approx £27). That's a 96 per cent saving on the retail price of $995 for a bundle that will improve your design projects, so grab this deal today! Related articles: The pro's guide to UI design 11 great UI designs Bad volume sliders are a masterclass in terrible UI design View the full article

It's midnight, and that one div on your site still looks like a child's toy chest. All the elements are a jumbled mess, and every time you play with CSS's display property, they rearrange themselves into an entirely different bit of nonsense. If you're like me, you'll probably solve this by muttering under your breath and becoming consistently more aggressive with your keyboard. And although that strategy has worked for me before, I recently set out to find a better way to understand the display property. It turns out the basics of display are much simpler than I originally thought. In fact, they use the same principles as packing a suitcase. I'm going to cover display:block, inline-block and inline. If you've arranged a suitcase in an orderly way before, you will see the parallel. If you're the sort of person that rams all your clothing in in a haphazard manner – well, there's only so much I can do for you. Our suitcase will contain three types of clothing: Delicates, like a collared shirt T-shirts that can be rolled up Socks or underwear that can be stuffed into gaps For reference, if we modelled the suitcase in HTML, it would look like this: The delicate items on top The collared shirt sits on a pile of the clothes beneath it. It is the only item that occupies its own layer Display:block is the default for most HTML elements. That means the element occupies the entire horizontal space within its container div. If it is next to other sibling elements, it will start a new line, and not allow other elements on its line. It is similar to the delicate items you put at the top of your suitcase. These are delicate or smart articles such as collared shirts. You don't want them to get wrinkled, so you make sure they are not pushed up against other pieces of clothing. This brings up one of the toughest parts of display:block. Notice how the collared shirt does not occupy the entire width of the suitcase? That does not mean other items will jump up to its level. Let's say this shirt is 60 per cent of the width of the suitcase; it would still block other elements from joining it on the top level. That is why there is an orange border in the picture. A display:block element will automatically add a margin around it if it does not occupy the entire horizontal space. Neatly packed T-shirts Here we can see the top and bottom rows of T-shirts, with four shirts in each Most of your suitcase is probably full of the rest of your clothing for your trip. For the sake of simplicity, we are going to cut this down to just T-shirts. There is a big debate on the internet as to whether folding or rolling is more efficient. I'm a folding kind of person. Anyway, in order to fit the most items, you line up your T-shirts side by side. This is exactly what display:inline-block is meant for. These elements can sit next to one another on the same line, as well as next to display:inline elements. Unlike display:inline elements, an inline-block element will move to the next line if it does not fit in its containing div alongside the other inline-block elements. In order to have a T-shirt spill onto the next row, you would need to cut it in half and use the remaining half to start a new row. Inline-block elements are not allowed to split in half if they do not fit on a line. The socks that fill in the gaps The socks are inline elements, which means they will fill the gaps around the T-shirts Check back to the original HTML and you'll note that there is one socks <div> between the eight T-shirts. But take a look at the horizontal view of the suitcase on the right. If there is one socks <div>, how can it end the middle row and begin the bottom row? This is the purpose of display:inline! An inline element will spill over to the next line if it exceeds the width of the div (in this way it is different from inline-block or block). Since our socks div is full of socks that are haphazardly stuffed into gaps, it can easily start filling the gap on the right side of the middle row and spill over to begin the bottom row. No socks will need to be cut in half for this to happen. This is why they can become inline, while T-shirts can only be inline-block. If the T-shirts on the middle row only took up 60 per cent of the width, the socks <div> would move up to fill the entire space on the rest of the row. Bon voyage This is the final CSS for our suitcase: Here are a couple alternate scenarios to illustrate the different uses of display. If the delicates on top had display:inline-block, they would fit in right alongside the T-shirts. Some of the T-shirts would move up to the top line, and the rest would adjust accordingly. There would be no comfortable buffer to the left and right of the collared shirt. If each T-shirt had display-block, you would have a massive stack of T-shirts on top of each other, one per line. If the socks had display:inline-block, they would all sit on the bottom row rather than flowing between the two rows. Some T-shirts would be pushed onto another row, forming a fourth line. There would be a gap on the right of the middle row of T-shirts. With the method I've outlined here, we end up with a neatly packed suitcase that makes best use of the available space. This article originally appeared in net magazine issue 289; buy it here! Related articles: 5 of the best resources for learning HTML and CSS Build complex layouts with PostCSS-Flexbox 28 outstanding examples of CSS View the full article

SuperFriendly director Dan Mall will be sharing his pro tips on how to stay relevant as a web designer at Generate New York 2018. Get your ticket now. For those of you with less than five years’ experience in web development, it’s likely you’re still finding your feet in regards to language features, frameworks, architecture and best practices. And although you may start each site with the best intentions, by the end, chances are all you want is for the thing to work well enough that you get paid. I’ve spent the past few years rescuing a variety of well-known brands’ sites that in theory should have been simple, but for a variety of reasons – successions of freelancers, a lack of top-down supervision – have turned into spaghetti-junctions of technical debt. 01. Follow the formula The thing I want to get out of the way is to assure you that we’ve all been there and there’s nothing wrong with not knowing everything. Programming is brilliant fun and the reason you want to do it every day is probably because you get to rise to a challenge, take the lead and deliver innovative solutions. But here’s the catch: what makes programming fun (being inventive and thinking on your feet) can inadvertently contribute to technical debt on larger, team-led projects. There exist established best practices, principles and patterns that have proven themselves over the years. It’s your job to research, learn and implement them – and, in the process, sacrifice a little of your individuality in return for maintainability and reliability. There’s a blog post called ‘You’re not paid to write code’ that sums it up rather well. 02. Sweat the small stuff Programming is very much about clarity, and when you can’t see the wood for the trees, the chances of your codebase staying purposefully lean and mean will be severely diminished. As such, your primary strategy for staying on top of things should be a fastidious focus on the basics. Be ultra-organised: worry about folder structures and file locations (frameworks can help here), ensure modules have consistent API orders, group common functionality, and use templates with delimiters. Make your code readable: use white space judiciously, and use comments to annotate grouping and clarify intent (but not bad code). You’re working as a team and you’re paid to be clear. Don’t cut corners: saving time now might seem like a good idea, but you can be sure that as the project grows, any sneaky laziness will be compounded and cost the project later. Throughout the process, make sure you correct mistakes as you go along. Sooner or later other code will end up relying on these errors. Stop the rot as soon as possible. If you make changes, make them consistently. Database columns, backend functions, API calls, JavaScript functions, DocComments, annotations, HTML attributes, CSS class names, and so on – make sure it all cascades down. 03. Stay structured Two versions of the same application routes file. Which makes it easier to understand the application's structure? There’s a temptation when building a self-contained site to quietly ignore encapsulation, and to litter the code with global references to app or to reach up through components with parent.parent.parent or such like. This quickly builds technical debt. Where possible, try to think of your app as a series of independent modules, and build on your framework’s best practices to eliminate tight coupling and interdependency. If it helps, try imagining you’re going to reuse parts of the app in other projects, and think how you would structure files, markup and code to facilitate this. You need to be vigilant for conflating responsibilities and ask yourself constantly: does this belong here? If code feels ‘icky’, it probably is. On team projects, lack of code reuse and copy/pasted code is a big problem. When you see repeated code, bite the bullet and refactor all instances to a function, module or template. Again, a good folder structure will make it easy for you to work out where to put things. 04. Beware over-complexity The refactored class on the right is a more readable, functional and testable version of the one on the left The key problem with complexity is that it masks and distracts from the original problem you were trying to solve and in turn ends up generating more code and more complexity, either in the same place or in other parts of the application. You end up in a vicious cycle. If your code is starting to look more like an algebra lesson than a well-maintained API, you need to take a step back. It may be that you need to refactor that particular chunk of code, refactor the class it’s in or reconsider your current approach to the problem you’re trying to solve. In extreme cases, you may need to look outside yet again. I recently refactored an extremely complicated view setup that I realised was the victim of a badly thought-out routing schema. By redesigning the convoluted routes into something sensible, I was able to ditch hundreds of lines of dense spaghetti-code in various classes, and remove some long-standing router hacks/bugs in the process. The one thing you should not do after writing some particularly obtuse code is sit back and marvel proudly at how difficult it is to read! The best code is elegant (read: not tricky); if yours isn’t, you have work to do. This article was originally published in issue 290 of net, the world's best-selling magazine for web designers and developers. Buy issue 290 or subscribe to net. Want further advice on polishing up your programming skills? Dan Mall is giving his talk Should Designers…? at Generate New York from 25 - 27 April 2018 Designers need to grow their skills to stay relevant and effective, but which are worth focusing on? Should designers learn to code, and, if so, can limited code knowledge really make a difference working with talented engineers? How can designers fit into Agile workflows? Does project methodology even matter anyway? What role does a designer have in creating, using, and maintaining design systems? In his talk at Generate New York from 25-27 April 2018, SuperFriendly director Dan Mall will share stories and perspectives to answer these questions and more, providing specific methodologies and techniques to help designers become even more indispensable, faster. Get your ticket now. Related articles: The developer tools you need to know right now 25 web development tips to boost your skills 10 things web developers must know to become truly amazing View the full article

You're reading Adobe Discontinues Muse and Business Catalyst Service, originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+! Some of you remember Muse, Adobe’s tool for creating websites. In case if you didn’t know, the app was still available for purchase from Adobe, but the latest major release was in 2015. And finally, on March 26, Adobe updated Muse, only to reveal that it had been discontinued. A Small Muse History Launched in […] View the full article

There are so many hurdles to slow us down, waste our time and distract us when we're trying to get things done. From the endless temptations for procrastination, to the sheer volume of tasks across different projects to keep track of, it can be overwhelming. Everyone has their own personal bottlenecks and distractions – whether it's constant email and social media alerts, annoying noises, or just basic lack of motivation. Many leading project management and collaboration tools have productivity enhancing features built in, but there isn't a one-size-fits-all solution to improve your productivity as a designer. Sometimes you need something more specific to scratch that itch, so read on to discover eight simple but effective tools to help make you more productive, whatever your own personal bugbears may be. 01. Focus on a task with Momentum Momentum is designed to lead you away from potential distractions The internet is awash with potential distractions, and even with the best will in the world, it's all too easy to disappear down an unexpected black hole and emerge an hour later with nothing much accomplished. Fortunately, there's a tool specifically designed to eliminate such distractions, and provide "inspiration, focus, and productivity" – and it's called Momentum. Every time you click another browser tab, Momentum is there to remind you to stay on track with the task you've set yourself. It's brutally simple, but surprisingly effective – like a little angel on your shoulder whispering motivation into your ear. Essentially, Momentum is based around 'habits' – and you can set up reminders, targets and schedules, as well as badges that show how many habits you have left to complete that day. Every time you complete a habit without distraction, the 'chain' grows longer – an additional game dynamic to motivate you. 02. Multi-task more easily with Magnet Magnet can help manage several app windows with ease If you're working on a Mac, the side-by-side app comparison offered by Windows isn't quite as intuitive, and you might be wasting precious time toggling between multiple apps when you're multi-tasking. Step up Magnet, another really simple concept designed to keep your workspace nicely organised at all times. By dragging application windows to the edges and corners of your screen, or by using keyboard shortcuts or the menu bar if you prefer, Magnet declutters yours screen by snapping windows into tiles: depending on where you drag, you can instantly make the window full-screen, half-screen, third-screen or quarter-screen, snapping it to the edges. Up to six external displays are supported. Copying, comparing and general multi-tasking is all made easier when windows are aligned neatly side by side, saving you time and making you more productive. 03. Block distractions with Freedom Use Freedom to block access to the things that will lead to procrastination Similar to Momentum, Freedom is all about keeping you focused on the task at hand. But rather than providing a chain-building incentive and constant encouragement, it takes a more heavy-handed approach that may suit you better. Basically, Freedom blocks the sites, and apps, that you know will stop you being productive – but you also know will constantly tempt you. Plus it works across PC, Mac, iOS and Android, so you can't get away with sneaking a quick look at your Facebook feed on your phone either. Similar alternatives include BlockSite and 1Focus – all of these tools enable you to control the duration of the block according to the task at hand. 04. Conquer your inbox with Spark Spark's Smart Inbox rises the most important items to the surface For many of us, Inbox Zero is a zen-like utopia that is pretty much unattainable. Emails are the ultimate distraction, as they are often work-related – so don't feel like procrastination – but aren't always urgent, even if they feel like they are at the time. Many subscribe to the theory that emails should only be checked and answered at specific times of day, giving the majority of your time to focussing on projects. If you need to check in, however, a tool such as Spark could help. Spark understands which of your emails are the most important, and moves them to the top of the list. Its Smart Inbox feature categorises everything into Personal, Notifications and Newsletters, and only notifies you when something is important. The intuitive search function saves time too. Other inbox management options include SaneBox, which promises to help you "get your life back and remember what free time feels like". The tool automatically filters only the most important messages into your main inbox, or 'Sanebox', shifting others to the 'SaneLater' or 'SaneArchive' folders. 05. Optimise your environment with Noizio There's nothing like soothing ambient sound to help you stay in the zone The effect of sound on our concentration and productivity levels can be enormous. Some sounds are indisputably distracting, others can actually help us to focus. This is the premise behind Noizio, which calls itself "your subtle companion." Noizio simply provides a range of ambient background sounds to help increase your productivity and block other, more distracting sounds that are currently driving you insane and slowing down your process. Available sounds include everything from a crackling campire, to a relaxing cafe, to the gentle lapping of waves on the shore. Its uses aren't restricted to productivity, of course – and span everything from relaxation to romance. Don't knock it 'til you've tried it. 06. Monitor your activities with Harvest If you don't know where all your time goes, Harvest will help keep track of it all While several of the tools above are geared up to managing or blocking out things that you know are distracting, you may not always be aware of what those are – or be unable to admit to yourself how much time you waste on certain things. In that case, you need a browser extension like Harvest. A simple time tracker, it gives you an honest, no-holds-barred report on exactly what eats up your time online – so you can do something about it. Similar alternatives include RescueTime, which runs in the background and analyses the percentage of your time spent on certain websites and tasks, and provides a daily 'productivity score' based on your activities. 07. Master the Pomodoro approach with Be Focused Pro Tackle tasks in the 25-minute chunks advocated by the Pomodoro Technique If you're not familiar with the Pomodoro Technique, it's a theory proposed by Francesco Cirilo, based on the principle that it's easier to focus for short periods of time. It's named after the tomato-shaped Pomodoro kitchen timers that Cirilo used as a student. According to the theory, one 'pomodoro' equates to 25 minutes of activity, after which you should take a five-minute break. After four pomodoros, a longer break of 15-20 minutes will help refresh you for the next run. There are many different online tools available to help you master this technique, but Be Focused Pro is one of the more advanced – with a clean, graphic interface and extra functions such as notifications and task lists. 08. Gamify your daily tasks with Time Time challenges you to complete tasks in the allocated time Many productivity tools use game mechanics to motivate you, making your task list more fun as well as more achievable. One such example is Time, which taps into your competitive streak and uses smart suggestions to keep things in perspective. The premise is simple and straightforward: you enter the task you need to focus on, and estimate how much time you need to dedicate to it. The background is green at first, but as time runs out it turns yellow, then red. If you take longer than expected, the app switches to 'overtime mode', and tracks how much extra time you've dedicated to the task. If that dynamic isn't game-like enough for you, Epic Win can inject a bit of excitement into your to-do list. You play as a character, and level-up when tasks are completed. You can even assign attributes to each task, to correspond to the abilities required to complete it – such as intellect, strength and stamina. Everyone's productivity needs are different, so if you think that approach would help motivate you, give it a try. Read more: 5 unusually effective ways design studios show work 8 tools to help you work remotely as a freelancer 8 iconic American logos that changed branding forever View the full article

Responsive web typography is tough – you need to have both design chops and technical know-how. But however tricky it might be, getting it wrong isn't an option, because typography is the cornerstone of web design. How do you get both the design and code right? How do your developers communicate with pixel-pushing designers? How can your designers make nonchalant developers care about typography? The quickest and simplest way is to get your designers and developers to speak the same language, respect each other for their craft, and seek to understand both the principles and limitations of web typography. This article aims to provide both designers and developers with the foundation from which to begin communication on the subject of typography. We will cover necessary design principles and explore practical solutions for responsive typography. What is good typography? 'Good' is always subjective; it isn't a fixed anchor that we can hinge communications on. For designers and developers to communicate effectively, we must begin by talking about a common denominator that both sides can understand. That denominator is the purpose of typography. Typography is the appearance of text; we're dressing text up. The purpose of dressing is to make the wearer appealing enough to attract a conversation, but not hold so much attention that the other party becomes distracted from the conversation. Likewise, the purpose of typography is to enable readers to focus and immerse themselves in the content of the text. Good typography, by definition, is typography that helps text fulfil its purpose of communication. Two things must happen for readers to focus and immerse themselves in the text. First, the typography must convey appropriate (if any) emotion. Second, the text must be easy to read. This brings us to four essential properties you need to get right. Font family Font size Line height (also called leading) Text width (also called text measure) Getting the right font family helps the underlying emotions of the text shine through. Getting the other three properties right ensures your text is easy to read. For the most part, designers are excellent at finding the right font family. So, for the rest of this article we'll focus on the other three factors. A modular scale derived from a base font size of 16px and a ratio of 1.5 The art of readable text The first step in any project is to set the font-size, line-height and width of your body text. This process is called typesetting. Begin by typesetting with a page that contains information a user needs. As much as possible, this page should contain multiple elements, like h1, h2, h3, body text and captions, for which you must make a conscious choice as to what works for your design. The more elements your page contains, the better your chances of setting a type scheme that works across the board. When you select the font-size, line-height and measure for your body text, make sure you use real content. If you don't have actual content, use text from Wikipedia instead of Lorem Ipsum. You also need to put yourself in the same situation you're typesetting for, because the distance between a reader's eyes and the screen is different for different devices. If you're typesetting for a mobile device, look at your output through a phone. If you're typesetting for a laptop, sit at your desk with your laptop, and so on. Once you've settled yourself in the right environment, start your typesetting process by first selecting font-size, followed by measure and finally line-height. Bear in mind that there's no perfect combination – just look at other pages you feel have good typography and you'll see that none of them use the same font-size, line-height and measure. So, what you're aiming for is simply text that's easy to read. Setting the right sizes is harder to explain in writing, so I've made some videos to help you out with font size, measure and leading. Here are some quick guidelines to help you ensure you have a good font size, leading and measure. Your font is too small if: You have to concentrate to read the text You have to squint your eyes You have the urge to zoom in Your font is too large if: You begin noticing letterforms instead of reading the content You can only read one to three words at a time You have the urge to zoom out Your text measure is too long if: You have to turn your head to read the text You lose concentration midway through Your text measure is too short if: You feel irritated when the text breaks to the next line Your eyes get tired from bouncing to the left and right rapidly Your leading is too narrow if: The text feels dense and overwhelming You read the wrong line of text accidentally Your leading is too large if: You get distracted by the white space between rows of words Always remember the definition of good typography: you're not after perfection, you're simply gunning for text that's easy to read. While doing so, you will want to test your typesetting choices with your audience (friends and co-workers make great testers too) to make sure you're right. Only move on to setting the sizes of other elements when you've finished typesetting the body text. Typesetting other elements Many designers and developers chose the font-size for elements like h1 and h2 visually, and simply hope that these magic numbers work well in their design. But there's no need to just pull numbers out of thin air; typographers have used typography scales for centuries to help with this. What you do is to pick a number from the typography scale as the size of your element. Unfortunately, these scales can't be directly used for the web because they're built for print design. Tim Brown, an expert in the field of typography, came up with a solution called a modular scale. It functions exactly like a typography scale, except you construct the modular scale with the body text you've decided on. Typographers have used this typography scale to select type sizes for centuries To create the modular scale, you take the body text font-size (also called base font-size) and multiply it by a ratio numerous times until you get a scale. Often, the ratio you use is derived from music (since music has roots in harmony). Above is an example of a scale created with the help of a modular scale calculator. When you're done constructing the modular scale, you can move on to typesetting the rest of your elements, picking a number from the scale as your font-size. Then set the leading and measure with the same process until you get a good balance of readable elements. Vertical rhythm The next step is to help gel the individual elements together using a technique called vertical rhythm. For one element to flow harmoniously into the next, we need to tweak the thing that joins them up: the white space. This white space must be large enough to differentiate one element from the next distinctly, but it must be small enough to ensure the flow isn't broken. How much white space should you use? Many designers choose a figure like 10px that is easy for them to design around. Many developers, on the other hand, tend to whip out a random number (like 6px) either from another grid system or an article they've read online. No wonder these two can't communicate. As you may imagine, there's no need to rely on a magic number for the white space; we can use a multiple of the line-height value of our body text. This is because we instinctively recognise white space patterns within text. The stronger the pattern, the safer we feel, and the easier it is to let our minds wander into the content. To use vertical rhythm, all you do is: Set the white space between elements to a multiple of the base line-height Set the line-height of all other elements to a multiple of the base line-height The multiple in question doesn't need to be an integer. You can use values like 0.5x and 1.25x of the base line-height to provide you with more flexibility. These values work because vertical rhythm uses the principle of repetition. We instinctively recognise the white space is equal to the base line-height since it's already repeated strongly Baseline grid or no? Whenever we mention vertical rhythm, the concept of a baseline grid inevitably comes into the picture. Although the baseline grid can potentially be helpful, it's mostly a train wreck because beginners focus so much energy on making text sit between (or on) baselines that they feel it's impossible to get vertical rhythm right. Honestly, you'll never get baseline grids to work perfectly on the web because the maths in typography always contains subpixels (like 24.8px), and all browsers handle subpixels differently. For example, some browsers cause every element on the page to be off by 1px. These 1px errors accumulate and push any elements placed lower down the page even further off the grid. As a result, I recommend against using a baseline grid. Moving on, let's step into the realm of responsive practices and designing for multiple screens. Due to the presence of subpixels, elements quickly end up misaligned from the baseline grid Typography for multiple screens Designing typography for multiple screens is no mean feat. There are three things we need to do from a design perspective. First, the distance between a user's eyes and their screen depends on what kind of device they're using. Generally, the user will place the device further away when using a larger screen. This phenomenon means you need to increase your font sizes as the device width increases. Second, we want to keep the proportions between the body text and other elements consistent. This means we have to increase the sizes of all elements as we increase the body text size. Third, at specific breakpoints we want to increase the font-size of specific elements (like the h1) by picking a different number from the modular scale. Doing so allows us to control the visual hierarchy and ensures that elements garner just enough attention to pull a user to read on. Coding for responsive typography We know we need to increase our text sizes proportionally. The easiest way to do this is to increase the font-size within the html selector. We also want to use relative units to respect a user's font-size preference. We also want to use a relative unit for other elements, so they scale according to the HTML font-size (h2 in the example below). If you need to change the font-size to a different number in the modular scale, all you do is change the font-size accordingly (h1 below). Although the process looks simple, new developers might face a ton of headaches because of the maths involved, which is why I recommend using functions and mixins to help out. I often use ms() from the modular scale library. With this, you can write ms(4) instead of 3.157em and ms(3) instead of 2.369em. An example of a function that can ease the load of calculating vertical rhythm is: This vr function allows you to write vr(3) for a multiple of three baselines instead of calculating it yourself. To help you (and myself) out even further, I've created a responsive typography library called Typi. The MS mixin makes it easier to get font-sizes derived from your modular scale Relative units All discussions about relative units end with a question of whether you should use rem or em units. I believe that rem and em have their unique use cases, and you should use them in different circumstances. Here are two rules that might help you choose which unit to use: Use em if the property needs to scale with font-size If not, use rem For more information on choosing between these units, see this article. Summing it up In this article you've learned the essentials of responsive web typography. Of course, you'll find more details as you dive deeper, both in theory and implementation, but what you have here covers 80 per cent of what you'll need in a real project. Equipped with this knowledge, you're ready to begin conversing with both designers and developers on how to design and code good typography for the responsive web. Responsive typography isn't incredibly difficult. It's just challenging because you need a huge amount of patience and diligence to uncover relevant principles, and apply them in a manner that suits the web. This article originally appeared in net magazine. Subscribe here. Related articles: Master accessible web typography Design a responsive site with em-based sizing 10 rules for making user-friendly web forms View the full article

When you're a big corporation, sorry can genuinely be the hardest word. Companies don't always get it right, and sometimes this means that an apology is in order. Most recently it's been Facebook in the spotlight with its full-page print apology for a massive data leak. If nothing else, Facebook's latest apology demonstrates that Mark Zuckerberg has a child's signature [click the icon in the top right the enlarge] But if it's not easy for us humans to apologise when we screw up, for companies it's even harder. Companies hate having to to admit they're wrong; it generally doesn't fit with their brand values, it might leave them open to lawsuits, and it can have a ruinous effect on their share price. Fantasy book cover art sparks online furore And that's why corporate apologies, should they happen at all (most companies know that the most furious Twitterstorms will blow over after a couple of days and that they can probably grit their teeth and ride it out) often come across as so mealy-mouthed and weaselly. They're usually drafted by committee, with half an eye on keeping the shareholders happy, so it's very rare you'll get a proper, hand-on-heart mea culpa. Sometimes companies get their apologies right; more often they get them wrong. And occasionally you have to marvel at a stunning piece of corporate not-giving-a-hoot. Here are some examples from across the board; bear them in mind if you're ever called upon to defuse an online row. 01. KFC It's rarely appropriate to use humour in an apology, but here KFC nails it [click the icon in the top right to enlarge] We all know what KFC's business is. It's chicken. No one's going to KFC for the coleslaw. So when KFC recently switched distributors and the chicken failed to arrive, resulting in most of its 900 UK restaurants having to shut down temporarily, it had a bit of a problem on its hands. With a social media storm and people even calling the police about the chicken crisis, KFC responded with a pitch-perfect full-page ad in The Sun and Metro, designed by Mother London. It put its hands up, accepted the blame and promised that it was working to rectify the issue, and did so with a brilliantly redesigned logo. Now that's how you do an apology. 02. Netflix Netflix managed to apologise, carry on exactly as before, then succeed massively Back in the olden days of 2011, when Netflix was still posting DVDs to subscribers, it managed to create huge customer upset when it dropped its all-in-one $9.99 monthly subscription and introduced separate $7.99 subscriptions for streaming and DVDs in the post, meaning a 60% price increase if you wanted both. Responding to angry subscribers, Netflix CEO Reed Hastings opened his letter with, "I messed up. I owe you an explanation." Good start. He followed it up with a sincere apology, and then explained that he was going to reverse any decisions: instead he'd split the DVDs-by-post bit of Netflix into a separate company, Qwikster. Qwikster lasted just a few weeks before shutting down; we all know where Netflix is now. 03. Apple A past master of the bland corporate apology that leaves nobody happy, Apple took a different approach when Taylor Swift announced a boycott of Apple Music for not paying artists for music played during its one-month free trial period. It instead took to Twitter, where its SVP of Internet Software and Services, Eddy Cue, settled the matter over two tweets: Taylor swiftly ended her boycott and eventually promoted Apple Music. 04. Pepsi We've spoken elsewhere of Pepsi's terrible ain't-protest-cool campaign from last year, but what we didn't mention was just how badly it handled the apology. "Pepsi was trying to project a global message of unity, peace and understanding," it says, overlooking the fact that it was actually trying to sell Pepsi. "Clearly we missed the mark, and we apologize," it continues. Fair enough. But then: "We did not intend to make light of any serious issue." And it's this business of intent that really dilutes the apology; it's basically trying to shrug the blame off by saying, we didn't mean to do it. Pepsi continues by stating that it's removing the content and halting any further rollout, and then finishes on this glorious note: "We also apologize for putting Kendall Jenner in this position." Don't mess with the Kardashians. 05. Dove Dove's apology was nearly as bad as the campaign that prompted it Having kicked off a massive row with an advert on Facebook that appeared to show a black woman transforming into a white woman after using its soap, Dove found itself uncomfortably in the spotlight, accused of using racist imagery. It responded with this tweet: What we have here is a textbook non-apology: Dove reducing its mess-up to missing the mark. Instead of apologising for what it's done, it instead states that it regrets the offence that it caused, a piece of semantic sleight-of-hand that amounts to, 'whatever, it's not our fault if you were offended'. 06. BrewDog Apologise? BrewDog? We've seen some good and bad examples of brand apologies, but leave it to BrewDog to do things differently. It recently hit the headlines with a ham-fisted promotion to mark International Women's Day, but it already had a reputation for a no-holds-barred, take-no-prisoners approach, as demonstrated when it tangled with The Portman Group, the responsibility body for the UK drinks industry body. In 2014 The Portman Group took issue with the name of BrewDog's Dead Pony Club ale and instructed licensees and retailers to to place orders; BrewDog responded thus: "On behalf of BrewDog PLC and its 14,691 individual shareholders, I would like to issue a formal apology to the Portman Group for not giving a shit about today’s ruling. Indeed, we are sorry for never giving a shit about anything the Portman Group has to say, and treating all of its statements with callous indifference and nonchalance." You can read BrewDog's full, withering response here. Related articles: How to interpret and follow brand guidelines Controversial sexy cow logo hits a bum note 5 tips for achieving brand consistency View the full article

You're reading Explore the Future of Typography with FS Industrie by Fontsmith, originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+! Fontsmith, the type foundry behind fonts like Hackney and Ingrid, launched FS Industrie, an adaptive type system that features five different widths and seven weights, for a total of more than 70 variants. Founded in 1997 by Jason Smith, Fontsmith, the London based type foundry, is a well-established name in the industry, known for creating […] View the full article

Making a logo should be a process of reduction (but not always simplicity), underpinned by a clarity of purpose and a conviction in execution. The LogoArchive project explores how designers have produced new and original logos over half a century, and conveyed an abundance of ideas through an economy of form. In these logo design tips and tricks, we'll share what we've learned. 01. Combine ideas Try to find a common ground When working two ideas together, look for commonalities of form. Although the awkward and the ugly do have their place in logo design, correlation, rather than dissonance, often delivers a more universally satisfactory outcome. 02. Make static forms dynamic Repeated shapes imply movement Use direction, pattern and repetition to give static forms a sense of motion and visual interest. This could be in the use of diagonal cuts or arrows, in the radial arrangement of objects, in the changing weight of lines, an increase in size, or a transition from one form to another. 03. Add layers Create designs with more than meets the eye Use line weight and negative space or the density of local objects to reveal secondary images. You can use this to build layers within a logo to create a visual hierarchy. This element of discovery and surprise has value for the audience, and the difficulty of its execution will help to differentiate it and secure memorability. 04. Study visual language Consider your demographic. Are they specialists or the wider consumer market? Look for connections between brand activities and form. Take the time to understand your audience’s perceptions and associations. The Idiosyncratic Look for themes in your particular field Study the visual language of the industry you’re working in. Does it have consistent and specific principles or symbols you can draw upon? Architecture, for example, has a quite a few that lend themselves well to the graphic. Space, structure, light, shade, flow and tension provide great points from which to begin constructing a logo that can engage a specific group. Many of these are recurring concepts, yet designers still manage to construct something new, distinctive and interesting from these elements. The Universal Some symbols smash the language barrier Arrows to imply speed and directness, globes to suggest the international, eyes to convey the observational. These are viable tools to communicate universal ideas. Although communicatively blunt, they can be an inclusive foundation from which to build on. Distinction can come in the way you render these, or pair them with an image, letter or form. The best examples of this type are often the product of good observational skills and an ability to recognise commonalities. This can be acquired by taking the time to really look at, rather than just browsing, tools like LogoArchive. 05. Use negative space Sometimes you say it best when you say nothing at all Consider negative space as a valuable object within your logo. Focus on the space you’ve created in and around your forms. Does it provide balance or an interesting contrast to the fill? Is it being used to add an additional image? Consider how negative space may become more prominent on screen or diminished across different substrates. Recognise and leverage this changing state. 06. Embrace the abstract Lateral thinking conjures up unique and memorable logos Logos do not need to be explicit in the ideas they convey. Abstraction frequently crops up on LogoArchive. This type of logo can be used to set a tone and convey a feeling. Look for imagery related to the business and industry, crop it down, make a pattern, reinterpret it. It doesn’t matter what people see within it. Leaving room for interpretation has value. People love puzzles, and having opportunities to make connections and draw their own conclusions. This is particularly useful in the art space. The visceral rather than the intellectual, and the subjective over the objective are also useful considerations, and are effective within the right context. 07. Find relevant symbols Your logo is free to stand on the shoulders of giants When it comes to representational forms, look to the brief. What are you being asked to articulate? How are these elements best expressed? Finding the right tool to communicate a particular idea is paramount. Logo is perhaps the most limited medium in today’s multimedia world, but still has the capacity to convey something of a brand. Is there a story to tell? Are there historical symbols or imagery associated with the brand? Are there values, history or processes unique to the brand? For broader brand identity programmes, consider how a logo can add to, complement or reinforce other ideas and assets. 08. Include contrast Opposites attract, even in logo design Consider combining opposing elements: the smooth and the sharp; the thick and the thin; the static and the dynamic; the positive and the negative; the abrupt and the transitional; the reductive and the ornate. The right contrast can be very striking, and draw impact and memorability from the simplest forms. 09. Multiply elements A single shape can be morphed into a lot of designs Use forms to build other forms. Duality and multiplicity – the creation of one image through the repetition or union of others – are good ways to draw distinction and interest from simple forms. Work together image and type or draw image from type. Use negative space and a commonality of form to work ideas together in a natural and distinctive way. Keep to just two ideas and look for a comfortable visual balance and a communicative clarity. 10. Make the most of sparse forms Remember the classic design mantra: less is more Use line weight and the density and grouping of objects to create a sense of light and shade, depth and structure. Cut out shadows and draw highlights to create a partial form but a complete image. Use illusory contours to imply rather than explicitly define shapes. Get more from less wherever possible. 11. Use fine details Make the most of modern high-definition tools Modern reproduction techniques and high-definition screens mean that designers can now have finer lines, closer shapes and more complex interwoven forms. Be open to using these. Although worth considering, scalability is a bit of a lingering and antiquated concept. Many of LogoArchive’s posts have very fine lines. Within the right context, they can convey detail, or deliver contrast to and emphasise heavier forms. Consider how you might scale up a logo while retaining its fine lines. This article was originally published in Computer Arts magazine. Subscribe now. Related articles: 10 of the best logos ever 5 big-brand logos that pass the silhouette test Logo design trends for 2018 View the full article

WordPress is a one of the most powerful tool for building professional websites, but making the most of it requires a great theme to really show off what the platform can do. This deal delivers lifetime access to professionally made, responsive themes from Dessign for just $29 (approx. £21)! The team at Dessign are professionals when it comes to crafting WordPress themes, and you can make the most of their work with this lifetime subscription. They have already put together over 170 themes that provide the flexibility and style you're after for your site, and new themes are added regularly so you'll never be left looking for more. These designs are SEO optimised and include XML files so you can make the themes your own. You can get a lifetime’s worth of WordPress themes on sale for 71% off the retail price. That makes your total just $29 (approx. £21). It's a great offer for a must-have resource for any web designer, so grab this deal today! Related articles: 40 brilliant WordPress tutorials Power a blog using the WordPress API 21 top-quality WordPress portfolio themes View the full article

Google went head-to-head with Apple yesterday as it launched the first tablet to run Chrome OS. Pitched as a rival to the iPad, the Acer Chromebook Tab 10 was unveiled a day before Apple's Education Event in Chicago. Apple is expected to reveal its own affordable, education-focused tablet range at its imminent conference. Not one to be left behind, Google's Chrome OS-powered tablet goes toe-to-toe with its competitor on both performance and price. Just like the iPad, the Tab 10 boasts a 9.7-inch, 2048 x 1536 display. It also comes with cameras that face both the front and rear, an OP1 processor, 4GB of RAM and 32GB of storage. A USB-C port, headphone jack and microSD slot complete the package. With an estimated nine hours of battery life, the Tab 10 is perfectly suited to riding out a whole school day. One of the Tab 10's standout features is that it also has stylus support. This comes in the shape of a built-in Wacom EMR stylus that, unlike the Apple Pencil, doesn't require charging. It's a canny move, especially considering that the Tab 10 supports Adobe Illustrator Draw. The Chromebook tablets are being pitched as the perfect tools for schools Priced at just $329, the Tab 10 might be slightly more expensive than some Chromebooks, which tend to start at less than $300. For schools already used to working with Chrome OS that are after a tablet, this is still an attractive price. And it's also exactly the same price as Apple's most affordable iPad. It remains to be seen if Apple will release a device that nudges ahead of the Tab 10 at its conference, but in the meantime we can expect to see Google's tablet roll out in North America during April, with a worldwide release lined up for May. Related articles: The best cheap Wacom tablet deals for March 2018 The best drawing tablet: our pick of the best graphics tablets in 2018 10 essential tablet accessories View the full article

Buy Dinosaur Art II on Amazon Mastering how to draw dinosaurs is a mix of artistry and scientific accuracy. On the one hand, scientists have discovered clues as to what these prehistoric beasts looked like from fossils and other evidence. But when it comes to texture and colour, we have no way of knowing for sure, so guesswork and imagination must also play a part. This is Steve Wright's second volume dedicated to dinosaur art In this way, a discipline known as 'palaeoart' has grown up over the years, working in a feedback loop with palaeontologists to bring their discoveries to the wider public through books, magazines and science papers. How to draw mythical creatures Steve Wright’s second book devoted to dinosaur art showcases the work of 10 major names in this niche field. Alongside the art itself, lengthy Q&As with each artist get to the bottom of how they carry out their research, their views on current scientific controversies, and the processes they use to create their art. Features work from top artists in this niche field If your knowledge of palaeontology is limited, you might get a bit lost: there’s just a short glossary that’s not particularly comprehensive. Yet anyone who loves dino art – or just dinosaurs in general – will find this a fascinating read. Buy Dinosaur Art II on Amazon This article was originally published in ImagineFX, the world's best-selling magazine for digital artists. Buy issue 156 or subscribe. View the full article

When I got the call from ImagineFX’s editor to draw a person – a life model – for the cover illustration, I was filled with energy and excitement. But the brief came with a hurdle: no nudity could grace the cover! I decided I would take on the challenge. 10 steps to improve your figure drawing Normally, I teach life drawing at university, but for this commission I planned to record the stages live at my first private figure-drawing workshop. I also decided to work with classic butcher’s paper (newsprint) and charcoal. Read on to find out how I created a figure drawing cover for ImagineFX issue #144. 01. Start drawing in charcoal Some of the designs were considered too risqué Time was tight for this particular commission, so I got scribbling right away. Above is a sample of some of the 22 quick charcoal poses I came up with, using a willow charcoal stick. I planned to add some ornaments to cover the more revealing poses, but they were still deemed too risqué for the cover. Eventually, the central figure was chosen, with a request to lift the head up. 02. Block in simple shapes Sometimes a plan comes together in ways you don't expect I had hired my go-to model and was all set, but on the day of the session she fell sick and was replaced last-minute by a model I’d never worked with before. These are the times an artist must dig deep for inner strength. I showed her the approved thumbnail, she struck the pose and I went to work blocking in the simple shapes with a willow charcoal stick. 03. Refer to human figure anatomy Click the icon to see the full size image During the class, I was also teaching my students about the foundation of the figure. Above you can see a study sheet drawn live during the class, which not only helps the students understand my workings, but also keeps my anatomical knowledge fresh. My motto is: Learn this stuff off by heart, then bury it in your subconscious. 04. Use 'gestural hand' for expressive lines A 'gestural hand' pencil grip makes artists draw from the shoulder To create more expressive lines I used ‘gestural hand’. This is when you hold the sharpened willow charcoal stick underhand, rather than using the ‘detail hand’ we use for writing. This enables me to draw from the shoulder rather than the stiff confines of the wrist. At this point I was refining the simple shapes and using the broad side of the charcoal for bigger tones. 05. Add solid lines with a charcoal pencil This unique pencil doesn't need sharpening Once I had found my basic shapes and proportions, I began to draw more solid lines. I used a charcoal pencil alongside willow charcoal – it's just a more dense version of the same material. A graphite pencil it would have been too shiny and grey. The pencil you can see in the image above is a ‘peel-off’ pencil that generally doesn’t need sharpening if you work big – you just peel the outer paper layer upward to reveal more of the point. It's very handy and clean to use. The best pencils for designers and artists 06. Draw without copying A model break is the perfect time for some improvising While the model was taking a break, I could work on the drawing without the old trap of copying exactly what’s in front of me. I used the time to rub into the charcoal shapes with my fingers, thumbs and a tissue. I also worked some broad gestural shapes into the background, to add movement to the figure. 07. Blend the connecting muscles Slight adjustments stop you getting bogged down in detail When the model returned, she asked if she could change her hand position for better balance. This was no problem because I rarely work on parts in detail and had barely sketched the hands. The thing with life drawing is that the model will shift slightly here and there. This isn’t entirely a bad thing, as it stops you from getting caught up in detail. With the drawing almost done, I started to study and blend the connecting muscles. At this point I was starting to consider style by making the lines more gestural. 08. Add contrast Time to deploy some artistic licence I added some texture to the background with crunched-up tissue, making the flesh appear softer by contrast. Contrast is something the eye always seeks, and we artists can add it as we please. The same goes for line: I placed thicker lines on the edge of the figure that was in shadow. 09. Pull out highlights with a kneaded eraser Use a putty eraser to pull out highlights It was time to give the drawing some love. I used a kneaded eraser to pull out some highlights – kneaded erasers are terrific because you can shape them like putty (they’re sometimes sold as Putty Erasers). Using the kneaded eraser also gave me the chance to carve into the neck and face to achieve the exotic look I wanted. At this stage the face no longer resembled the original life model at all. 10. Finish with an electric eraser Time to charge up the electric eraser Finally, for those stubborn areas that were clinging on to the grey charcoal I used an electric eraser. This tool is more commonly used on professional illustration board, which can take all kinds of punishment, but with a light touch it can also work well with butcher’s paper. This article was originally published in ImagineFX magazine issue 144. Buy it here. Related articles: Draw Faces in 15 Minutes 10 steps to improve your figure drawing Drawing techniques: 7 fundamentals of pencil drawing View the full article

Android is the world's most-used mobile OS – so what are the best Android apps to download if you're a designer, illustrator or artist? With increasingly powerful Android devices entering the marketplace, there's more choice than ever before for designers looking to create while on-the-move. But the Google Play store can be a bewildering place to attempt to separate the wheat from the chaff. That's why we've tried out a vast number of the best Android apps for designers and whittled our list down to our top 20. Whether you're looking to create vector graphics with your S Pen on a Samsung Galaxy Note 10.1, or sketch out a wireframe on your Google Pixel 2 XL, there will be an Android app to download here for you. Adobe launched its vector app Adobe Illustrator Draw on Android back in 2016, but even now it is virtually the only credible way to create vector drawings on a mobile device (unless you opt for a Windows-toting tablet). Illustrator Draw will be familiar to anyone used to its desktop sibling, and it doesn't scrimp on features, with configurable pen tips, layers, merge options, and more. Of course, Adobe hopes you will use Illustrator Draw with a Creative Cloud subscription, and that is really how to get the most out of it, with the ability to instantly send your work to Illustrator and Photoshop CC, license Adobe Stock images in the app, and publish direct to Behance. Download Adobe Illustrator Draw Autodesk is more renowned for its class-leading 3D applications, but in Sketchbook it has a powerful mainstream drawing app with arguably the most natural drawing experience of all. Features include 170 customisable brushes, full PSD layer and blending support, and switchable predictive stroke which transforms your hand-drawn lines and shapes into crisp, precise forms. Paired with a top-spec Android device – especially one with a stylus – Sketchbook is probably the best free-drawing app around. Download Sketchbook An app that caters more for big statements than subtleties, Photoshop Mix lets you cut out and combine elements from different images, blend layers and make adjustments to your creations on your Android device. PS Mix majors on ease-of-use, and it live-syncs with Photoshop CC meaning that when you make a change on your phone, it’ll show up instantly on your desktop. Usefully, you can take advantage of all the CC benefits with an Adobe Photography Plan, which saves a fair bit over a full Creative Cloud subscription. Download Adobe Photoshop Mix Developer Sean Brakefield completely overhauled his SVG vector graphics app Infinite Design in 2016, and with the very latest updates it is now a real alternative to Adobe's dominant Illustrator Draw. Infinite Design, as the name suggests, features an infinite canvas (pan, zoom, or rotate), but also infinite layers, infinite path editing, and infinite undo and redo with a history slider. It has myriad layer options; a transform tool to translate, scale, rotate, flip, distort, and skew; automatic shape detection; grids for reference or snapping; but its standout feature is the ability to create 3D images with five perspective tools. Also, a neat addition for users of Android apps on Chromebooks is the baked-in keyboard shortcuts. Download Infinite Design Photoshop Sketch is just one of many sketching apps in our countdown, but Adobe's offering will gravitate to the top of any Creative Cloud subscriber's list due to the benefits of concomitance that belonging to Adobe's suite of tools provides. However, it is a great sketching app in its own right, with features including blend modes, perspective grids and natural drawing tools, plus the ability to turn any photo into a brush using Capture CC from within the app. Download Adobe Photoshop Sketch Canva has been around as an online design tool since 2012 but has only very recently made the move to Android – so recently, in fact, that the only press image we could get hold of is the iPad version. The Android flavour is near-identical in terms of interface and features, which are excellent and plentiful respectively. More of a full graphic design suite than a cut-down photo editor, Canva can be used to create everything from logos to web mockups with access to a huge library of templates, icons, photos and fonts, many of which are free although 'premium' assets require an in-app purchase. Download Canva Mockups and wireframes have never been easier to create than with Adobe Comp. Using natural drawing gestures with your finger or stylus, you can sketch out rough layouts and Adobe Comp will transform it into a crisp, professional mockup. Brilliant for sketching on-the-fly during an ad hoc meeting or presentation, you can pull in vector shapes, images, colours and text styles, and then send your comps to Adobe Photoshop, Illustrator, InDesign or Muse to finish on your desktop in an instant. Download Adobe Comp CC If computer-aided drafting is your business, Autodesk's AutoCAD app is the perfect mobile assistant. It brings your technical drawings to any Android phone or tablet, and includes the ability to view and edit 3D and 2D DWG files. The smooth and intuitive interface is perfect for the touchscreen format, and crucially for site visits you can work offline. When online, the app synchronises with AutoCAD or AutoCAD LT on your desktop to ensure a continuous workflow. AutoCAD is free to download to your phone but, as befits a serious tool, it will cost you £6/$5 per month for the Premium version and double that for AutoCAD Ultimate, which adds 100GB cloud storage and 40MB maximum file size. Buy AutoCAD Popular iOS and desktop painting app Procreate has not made the journey across to Android, but fear not – Infinite Painter is here to provide a similar-feeling experience, and arguably a better one. Over 80 brush presets are available, or you can create your own, and there are Photoshop-compatible layers and blend modes. You can create 3D images with five perspective views, and it has tools aplenty: Transform tool, Pattern tool, Liquify tool, Gradient and Pattern Fill, and you can rotate and flip the infinite canvas with ease. Download Infinite Painter If you are looking for the incredible experience of 3D painting in virtual reality… you will need Google's Tilt Brush software, a hugely expensive workstation, and an HTC Vive or similar VR headset. Paint VR is a great bit of fun, however – an app to enjoy with your Android phone and a budget/bundled headset like Google Daydream or Samsung Gear VR. OK, it's incredibly simple with a standard colour wheel and a basic set of brushes to choose from, and the painting action is very awkward, but it is strangely addictive fun trying to create with such limitations – like using MS Paint with a cheap mechanical mouse in the 1990s. Buy Paint VR Find My Font is the original font-identification software, having debuted as a desktop app into which you would import photos to discover the fonts used – or a visually similar equivalent. Turning this clever tool into a mobile app opened up its horizons and allowed type-hungry designers to snap any piece of type in the wild and instantly discover something similar for use in design projects. With a database of over 150,000 fonts, the Android app can identify connected or fragmented letters and claims to achieve accurate matching results down to a mere 20px text height. Download Find My Font Adobe Capture is a real Swiss Army Knife of design apps, helping you to turn anything you see or sketch into vectors, materials, brushes and shapes for use in your projects. Capture also uses Adobe's advance AI tech to recognise type shapes and suggest visually similar fonts, creates geometric patterns from any image, and can create colour palettes from any photo in an instant. And coupled with a Creative Cloud account, your creations are available instantly in all the Adobe desktop apps you use. Download Adobe Capture CC Paperless is a solid, simple app for Android tablets that lets you draw and paint with pencil, watercolours, feather ink, and brushes. A series of basic tools are available, including Eraser tool, Paint bucket tool and Color picker tool, and usefully you can set line thickness, size, opacity and smoothing. Paperless could not be your only drawing app, and unfortunately its last update was in 2013 which suggests it will not be developed further, and you can only export to PNG, but as a straightforward digital sketchbook it works well. Buy Paperless This basic sketching app features 12 brushes, colour picker and eraser, but the user interface is the real winner here, as Sketcher Free enjoys an excellent tool picker and the beautifully responsive drawing engine is actually the much-vaunted web-based Sketchy tool from Mr Doob. This version of Sketcher is free to download, but you can splash out $0.99/£0.80 for Sketcher Pro and enjoy additional features such as adjustable canvas size and the ability to pan/zoom. Download Sketcher Free Remember Kuler, Adobe's colour-picking app? The developer of Color Reference does, and that's why this app is perfect for those who are less than impressed by Adobe's transformation of Kuler into the browser-based Color CC. Color Reference lets you create and export colour palettes, and features the ability to select colours from imported images and a wealth of auto-generated palettes. A bit of fun is the wallpaper creator, which allows you to design wallpapers for your phone based on your colour palettes. Download Color Reference The myPantone app enables you to create colour palettes on the move, cleverly extract Pantone colours from images, and quickly look up the reference number of a Pantone colour if you're out and about. You can export palettes for use in Adobe's Creative Cloud apps (and QuarkXPress, too). At a cent shy of $8, it is expensive for an Android app (which are usually free), but with no in-app purchases to worry about and access to Pantone Colour Libraries built-in, you are getting good value. Buy myPantone The highly rated ArtFlow app is an evergreen entry in our app lists, mainly because it gets the two essential basics of interface and drawing feel so right. It is user-friendly and simple, but that does not mean childish and basic – ArtFlow is definitely a tool that professional designers will find useful. It supports resolution up to 4096×4096 pixels, and its clever ‘Palm Rejection’ feature means it will never mistake your resting hand for your sketching one. You get access to 20 tools with the free version, plus only two layers and six levels of undo, but upgrade to Pro and you'll find your toolkit stuffed with 70 brushes, infinite undo, 16 layers and much more besides. Download ArtFlow Type:Rider is a stylish platform game that also teaches you about typography. In true typographic form you control a colon, acting as a linked pair of dots, and the action is simple left, right and jump with a selection of intuitive control schemes to work from. The levels themselves are typographically themed, with the landscape made up in part of letterforms from various typefaces. As you progress through the history of typography you meet newer typefaces and get to know their letterforms, often as you tumble off the edge of them and plummet to your death. Buy Type:Rider Related articles: 10 apps for endless design inspiration The 34 best photo apps The 28 best iPhone apps for designers View the full article

As a young painter, Matisse’s subject matter of languid women, artful objects clustered about them, pretty colours and decorative fabrics all felt way too middle class and bourgeois for my young and rebellious eye. But then I discovered that it was Matisse who goaded that other 20th century master, Picasso, into his experiments with Cubism. And while Matisse may have called Picasso ‘the boss,’ Picasso referred to Matisse as ‘the magician.’ How to frame your own art Magician, he certainly was. Matisse’s handling of colour and space had cast a spell on the world of art and design and influences us to this day. But how did he do this? Matisse said that he didn’t paint a subject literally, but rather he relayed the emotion it evoked for him; a very liberating idea if, like me, you’ve ever become bogged down in realistic portrayals that ticked all of the boxes but failed to stir the soul. So let’s dive into Matisse’s world, to create a free-flowing masterpiece in his style. 01. Pick an existing sketch with Matisse potential Sketches are the raw material of the painting If you want to paint like a master artist, getting into good sketchbook habits is essential. For this painting, pick a nude study from your sketchbook. If you don’t have any, or none that are quite right, sketch a few different poses, then pick one with potential for the Matisse treatment. 02. Paint a bright layer Block out the white canvas with a bold colour Paint a thin acrylic coat of Hansa Yellow all over your canvas board and set it aside to dry. The Hansa Yellow may be eye-wateringly bright, but it will prompt you to use other colours to match its saturation and brightness to make your painting pop. 03. Sketch carelessly Sketch as fast as you can to keep it loose Working on a sheet of A2 cartridge paper, rapidly sketch your chosen form using charcoal. Try to get this new drawing to fill the paper, and to make it as carelessly as you can. It’s easy to lose your nerve at this stage, but if the work is too tight now, there will be little hope for it later. “Exactitude,” said Matisse, “is not truth.” 04. Sketch again It takes a lot of work to appear effortless Before you even get a chance to be critical of your first charcoal sketch, wipe it off with a rag or a piece of kitchen towel and start again. You can’t force the marks you need for this type of work, they have to arrive in their own time – even if they take all day. Although it’s a sublimely simple painting, Matisse was occupied with The Dream for a whole year. 05. Join the sketches Reduce the sketch to its simplest form After sketching and rubbing the figure out several times, your last drawing should be a distillation of all of the previous ones, and executed in less than 10 lines. I got this tip from the magician himself, when I visited the chapel he designed in Vence. The adjoining gallery is filled with his drawings for the Stations of the Cross; each one worked and re-worked in this manner, with progressively fewer and fewer strokes. 06. Transfer with a square Transferring takes time, but it's worth it Square up your drawing so you can transfer it onto the now-dry canvas board. It’s a painstaking but essential step to make sure you get your composition right and preserve the simplicity of your original idea. Use a grid made up of 10cm squares and transfer your image using a large, soft pencil or charcoal. 07. Paint freely Keep the painting as loose as the drawing Mix up a colour like this combination of Phthalo Green with plenty of Titanium White, and apply it to a part of the background. To help keep your brush strokes loose and expressive, use a large varnish brush with splayed hairs. It doesn’t cover properly, and as it’s too big to go neatly up to the edges and into the corners – it’s ideal! 08. Build up skin tone Turquoise takes off the pink edge Mix a pink flesh colour by using Quinacridone Magenta and a smidgin of Hansa Yellow, then Titanium White, and a tiny dab of the turquoise mix to make it look less like candy floss. Include more greens and blues to make a darker skin tone. 09. Balance your colours’ harmonies and contrasts The colours don't quite fit yet The Cadmium Red Medium across the top doesn’t quite harmonise with my pink, and really jars against the turquoise. The idea is to try to get your colours to contrast without being too different tonally. If you’re not sure if you can achieve this, try taking a picture of the colours on your phone, then desaturating the image to greys. If the main colours (the pink, yellow and turquoise here) become pretty similar greys, then their tones are similar too. 10. Add patterns Crude techniques create amazing results Take inspiration for fabric designs and patterns from other sketches, roughly painting them on and scratching out details from the wet paint using a palette knife. Your painting really can be this crude, because it’s Matisse’s signature simplified nude and colours that ultimately hold everything together. Keeping the yellow ground energises the entire composition and the Cobalt Blue, top right, echoes the bottom left. 11. Outline the figure Time to get precise Now for the tricky part! Adjust the pressure on your size 8 Filbert to try to accentuate the figure’s form in black lines without tightly delineating it. You’re aiming for a sense of rhythmic sensuality, using a line that comes and goes, not an exact design. The line should unite the figure with the whole composition. “An expressive gesture with the advantage of permanence,” is how Matisse described it. 12. Make adjustments Green highlights finish off the image Down tools and put the painting out of sight. A few days later, you can return to it with a fresh eye and renewed energy to make any necessary alterations. I adjusted the line, added more red, varied the flesh tones and highlighted the pink with a complementary lime green. There are no shadows in Matisse’s world, only colour. “Colour,” he said, “exists in itself, possessing its own beauty.” This article was originally published in Paint & Draw magazine issue 3. Buy it here. Related articles: The secret to painting like Monet Review: I Love Art acrylic painting set Paint an epic New York scene View the full article

If you've bought anything from Amazon in the past few years, you'll have probably noticed a surprising number of adult colouring books topping the best-seller lists. Once a niche, colouring books for adults are now big business, with users extolling their calming virtues. But why? How effective is art as a therapeutic technique? And does this mean artists are the best-adjusted people on the planet? How to draw animals, people and landscapes Scottish illustrator Johanna Basford, whose colouring books for grown-ups have sold over 16 million copies worldwide, attributes their popularity to two aspects: accessibility, and a nostalgic craving for non-digital activities. "I get so many emails from people in all walks of life to say the books have helped them through a tough patch," says Basford. "From stressed-out 911 call operators in the US, to teens recuperating at eating disorder centres, elderly folks struggling with Alzheimer's or new mums with post-natal depression." An illustration from Johanna Basford’s adult colouring book, Lost Ocean The therapeutic benefits of art – whether it's basic sketching, more intricate pencil drawing or painting – have long been documented. And while psychotherapists point out that colouring isn't an automatic ticket to mindfulness, they do agree that the process of art-making can be a health-enhancing practice, which positively impacts the quality of life. Cathy Malchiodi is an international expert, writer and educator in the fields of art therapy and art in healthcare. She believes that while there are times when we need professional support – be that from a therapist, doctor, mentor, friend or community as a whole – art exists as a natural remedy for many of life's challenges; loss and trauma in particular. "There isn't any one particular way that this occurs," Malchiodi says. "But many artists have used their creative process to cope with their depression or other issues. Each person has his or her own path to reparation and recovery." A quick look at the rich heritage of famous artists who have explored intense psychological themes in their work proves Malchiodi right: Jean-Michel Basquiat, Edvard Munch, Vincent van Gogh… the list goes on. Whether the process is a vent, time out or something more complex altogether, it's clear that people have long sought therapeutic participation in art. One strategy among many Darren Yeow viewed torment as almost a superpower for characters like Wolverine For concept artist Darren Yeow, it's proven useful as one of myriad mental healthcare strategies he's undertaken over the years. However, he points out that art couldn't 'fix' some serious mental health issues he was facing, which needed the guidance of a professional counsellor. Yeow was sexually abused when he was young and says that he struggled with the fallout for many years. As a child, he drew monsters and "angry, scary-looking things". He explains: "That's probably why I liked to draw Venom, Wolverine and Batman: torment was almost a superpower for those guys. When I drew them, I felt like I channelled some of that hurt out on to the paper. It was just an unconscious act of self-soothing." In his teens, Yeow turned to martial arts as a way of regulating feelings of shame and hurt, to prevent them morphing into physical violence. Everything was fine, until a few years ago when a period of significant business and personal stress brought up a torrent of latent anger. "I found that I hadn't really tackled the underlying issues," Yeow admits. "When a particularly stressful incident occurred and I couldn't recall that I had punched a hole in the wall as a result, I felt it was time I needed to seek out professional help in dealing with my emotions, before things spiralled out of control." Incarnations of Immortality, by Rebecca Yanovskaya, is based on the series by Piers Anthony There's another angle, too. As every artist knows, the process of making art isn't always relaxing. For freelancers it can be lonely stuck at home in front of a screen all day, and for all creatives it can be frustrating – as Toronto-based illustrator Rebecca Yanovskaya knows only too well. "As much as I love art-making, it brings me a certain amount of anxiety as well," she says, "because of the need to create great pieces and live up to my expectations." So what about professional art therapy? Do artists have anything to gain in a professional forum? Yanovskaya has visited an art therapist before. She remains unconvinced as to how effective art can be as a therapeutic technique for working artists. "We're immersed in art in a money-making capacity," she argues. "Therapy for us might work better if it's something far removed from what we do every day." Non-artists can still benefit Johanna’s customers find solace in her adult colouring books – in the simple pleasure of putting pen to paper However, Malchiodi thinks there can be as much value for artists as for non-artists, as long as participants are committed to the process. "If one wants another perspective, and to experience art-making in a different way, then art therapy might be helpful," she says, "especially since one of its goals is to guide the individual toward new insights and experiences that support a sense of well-being through art." For anyone thinking about getting involved, there are plenty of options. "Online art-making communities offer art-making experiences for self-exploration and self-care, rather than therapy per se," she says. "Artists who are new to the idea of making art as self-care or as self-exploration may find this approach uncomfortable at first, but give it a shot; it sometimes even provides a new direction for your own artistic style and intentions." Just remember to leave your ego well out of it, warns Yanovskaya – and Yeow agrees: "Don't turn it into a study session or illustration assignment," the artist advises. "There's no need to impress other people. Just let the stylus flow." This article originally appeared in ImagineFX issue 137; buy it here! Related articles: How to draw animals, people and landscapes 6 top mindfulness tools for creatives Can pro artists achieve mindfulness through art? View the full article

No design job is perfect. But if you're no longer being creatively challenged at work, or feel that your skills aren't being fully utilised or appreciated – or you're just not giving it your all anymore – we have good news: there's never been a better time to quit your job. 5 tips to give you the edge when job hunting You have a number of options: you could switch studios, go freelance or start your own studio. Here, we're looking at the first option – but how do you know which studios are flying right now? What if you've been in your current job for a while and your contacts books is out of date? Here are five pro tips to help you scope out the jobs landscape and decide which studio to work at next. 01. Research online You'll find all the latest news and work from the design industry on Creative Bloq "Whilst the market is far more complex than it used to be," begins Stuart Youngs, "it's still comparatively small. There are so many more ways to discover which studio's are doing interesting work through blogs, social media, magazines and industry award schemes, for example." 02. Network at events For the best way to scope out the competition, though, you need to know how to network. "We're an industry awash with events," says Youngs. "My advice is to get to them and get chatting. You'll learn and you'll connect." 03. Engage with the community "Engage in the wider creative community in any way you can," agrees The Partners' Kath Tudball. "Find your voice on social media, immerse yourself in creative culture, attend the talks, ask questions, have an opinion and share it. Get out there and talk to people." 04. Check Computer Arts' UK Studio Rankings Computer Arts' annual ranking is a hit list of potential employers Every autumn, Computer Arts polls Britain's leading creative directors and studio founders to find out which studios they've been most impressed by over the last 12 months. The results feed into its annual UK Studio Rankings Top 50, which makes for valuable reading if you're looking for a new job. Find the latest list here. 05. Put out content Don't just scope out the competition, let them see you, too. "Put out content on a daily basis on every visual platform – Instagram, Tumblr, YouTube – that's relevant to your discipline," says Reiss Hinds from BLUP. "Also, use LinkedIn and a personal blog to get your work in front of every potential new employer that your work is congruent with." This article was originally published in issue 275 of Computer Arts, the world's best-selling design magazine. Buy issue 275 here or subscribe to Computer Arts here. Related articles: 6 terrifying job interview questions tamed How to tailor your portfolio to different jobs 8 tips for coping when you hate your job View the full article

A great way to grab attention – and keep hold of it – is to create a website layout that showcases your talents from the off. Ukraine web agency Vintage's site is a great example of this, drawing you into its VR design portfolio with an eye-catching combination of a pulsating logo built from glass particles and a lovely bit of glitch that activates on hover. Web animation: No code required A simple glitch effect used sparingly can give your site a vital little extra bit of visual interest, and it's surprisingly easy to implement. Here's how to do it. Download the files for this tutorial. 01. Add code to the body tag of your page Vintage's glitch effect is easy to reproduce if you know its secret Creating a simple glitch effect can be done in so many different ways. Here we are going to do it by having an animated GIF over the top of the text, which will be turned on and off in the display. First up, add this code to the body tag of your page. 02. Styling the display The content will use a specific typeface from Google Fonts called Work Sans. Grab the link from there and place it in your head section; then add the CSS to either style tags or a separate CSS file. The page is made black with white text and the holder is styled up for the text. 03. Displaying the glitch The glitch effect is going to be a background image that is placed directly over the top of the text. The important part here is that it is made invisible by reducing the opacity to zero so that it doesn't show up until the user interacts with the text. 04. Hold everything Add script tags to the end of the body section and create a cached reference to the 'glitch' div in the document. Then a variable named 'over' is set to false. This will be turned on and off when the user moves over the text. 05. Running the glitch The glitch function is called when the mouse moves over the text. If the glitch is not running then the glitch visibility is turned on and it is turned off after one and a half seconds. You can experiment with this and use a random number to make it more unpredictable. 06. Back to normality The glitch effect should not stay on as it would be too annoying to the user, but as an interactive element it works well. Here, the code resets the opacity back to zero so that it isn't visible over the top of the text. Get your ticket for Generate New York now Three-day web design event Generate New York is back. Taking place between 25-27 April 2018, headline speakers include SuperFriendly’s Dan Mall, web animation consultant Val Head, full-stack JavaScript developer Wes Bos and more. There’s also a full day of workshops and valuable networking opportunities – don’t miss it. Get your Generate ticket now. 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: Create glitch art with these intricate photo filters Animate SVG with JavaScript 10 great CSS animation resources View the full article

You're reading How to Start a Web Design Project [Infographic], originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+! There’s a first time for everything — and it’s finally time for your very first web design project! While landing your first gig is a huge accomplishment in itself, keeping your first client happy requires a whole different set of skills. … View the full article

If you've been in the frontend dev community for a while you have probably heard of a little thing called Atomic Design. Coined by Brad Frost, Atomic Design is a methodology that involves breaking a website layout down into its basic components, which are then reused throughout the site . There are many benefits to using Atomic Design. I will go through 10 important ones in this article. 01. You can mix and match components By breaking down components into basic atoms it's easy to see what parts of the site can be reused, and how they can be mixed and matched to form other molecules and even organisms. These five basic elements can be remixed to create a range of pages For example, let's say a site only contains five atoms: a small image, large image, paragraph, list item, and a link. You could create a very usable web page by duplicating and combining these atoms to make molecules. 02. Creating a style guide is simple If a site is created according to Atomic Design principles from the get-go, all the atoms and molecules that are created before the site is built can serve as a basic style guide. Even for sites that haven't been built atomically, it isn't difficult to extrapolate the basic components and put them together to construct more pages. Bear in mind, though, it is always best to create a site atomically from the beginning, rather than trying to introduce Atomic Design principles to a site later on. 03. Easy to understand layout The code of an atomically designed website is typically much easier to read than one created a more traditional way. This is true not only during the time of creation, but in the future when a site is being looked back on for reference or small tweaks. Because of the documentation around what atoms molecules and organisms are being used and where, it's easy to see what each part of the code represents. Another bonus of this is that it makes it easier to explain the codebase to a new developer. 04. Code is more consistent Pattern Lab is a collection of tools that make Atomic Design easier With Atomic Design, you use predefined atoms to create the site layout, it is easy to see which components are being used for different parts of the site. This reduces the likelihood of writing duplicate code. For example, if someone creates a site without using Atomic Design and they require, say, a red button, they would have to look through the whole site to try and find an existing one. If this did exist, they would need to copy and paste that code to the new instance. If there were no red buttons, they'd need to create a new one. With Atomic Design however, it is easy to go back through the list of atoms and find that exact red button. This becomes a much easier process when the Pattern Lab library is involved. Pattern Lab is a collection of tools that make Atomic Design easier. In our example, it would provide a search bar for atoms, making it easy to search for and find that exact red button. 05. No focus on pixel-perfect designs As the idea behind Atomic Design is to use atoms as the building blocks for site creation, it is less likely that a web developer will create many atoms for a similar thing. Instead, they can simply look through the list of existing atoms, and tweak them to create new atoms if required. A great example of this would be for titles on a site. Let's say a creator has a list of titles used for the site, all in black: a main header, sub-header and paragraph title. They haven't worked in the site in a while and need to come back to the site to add a new blue title. They could take a look at the titles that already exist and customise one of them to get the result they desire. 06. Quicker prototyping Having a list of atoms before site creation begins means you can mock up pages quickly and easily – all that is required is to pick and combine the required elements for the page. The mockup can then be customised and refined for the final site. 07. Easier to update and remove parts of the site As only one atom, molecule or organism is being changed at any one time, it is easy to ensure that any updates to a component are carried across to all other instances across the site. Similarly, unwanted components can easily be removed. 08. More modular file structure Although Atomic Design is very prevalent when it comes to markup (HTML), I believe these techniques can also be used for CSS, JavaScript, or any other languages used to create a site to make overall code more modular and reusable. I myself use atomic CSS for websites I create and have found great benefits to this approach. However, I believe with the arrival of things like HTML components it would make sense to separate CSS and JavaScript specific to an atom into its own folder along with the HTML, so if anything needs updating or deleting, you know exactly where to go and what to change. 09. Fewer components overall If a creator has a list of atoms, molecules and organisms presented to them before site creation begins, they are more likely to use what already exists than create new components for small variations. If a title with a font size of 4.5em is required for a design but there is already a 4em size title in existence from the list of atoms, it is more likely a creator will pick the 4em one than create a completely new title. This will result in fewer atoms being used overall, making for a cleaner and leaner website. 10. Explore Pattern Lab Pattern Lab is a static site generator, also from Brad Frost This isn't really a benefit so much of Atomic Design but a great tool created by Brad Frost and Dave Olsen to help with the process. It is essentially a static site generator that uses mustache for templates and a JavaScript viewer for interactivity. It's created with mobile-first design in mind with options to resize pages, add comments to sections of the site and code snippets. The original version is written in PHP, but there are two Node versions: one for gulp and the other for Grunt. I highly recommend messing about with the demo on the Pattern Lab site to give you a better understanding of how it works and Atomic Design in general. Related articles: 40 web design freebies to make your life easier How to build a full-page website in Angular How to create a pyramid layout with CSS Shapes View the full article

Creating a truly compelling social media campaign often depends on finding the perfect image for the job. It's all about attracting attention in a busy, cluttered, multi-channel environment, and telling a story quickly. According to research commissioned by iStock by Getty Images, demand for stock imagery has increased across the board, but there has been a notable shift towards digital uses. Social media leads the way with a staggering 74 per cent increase in the past year. With the number of brands competing for attention on social on the rise, it's more important than ever to get the messaging right. So read on for our six-step guide to finding the perfect image for your next social campaign... 01. Choose bold, attention-grabbing images Give people a reason to focus on what you're saying with an attention-grabbing image People scroll through their social feeds quickly and distractedly, often participating in multiple conversations at once. Put simply, if you don't give them a reason to focus on what you're saying, then they'll keep scrolling. When it comes to choosing the right image for your social campaign, high-contrast backgrounds, simple, dynamic compositions and vivid colour palettes are likely to stand out more, so generally steer away from overly complex subject matter or muted colours - although bright text can punch out of a black-and-white image beautifully. Ideally, you want people to digest your message in a split-second glance, and not have to spend time deciphering what's going on, or unpick an obscure visual metaphor. Simple images work best, so when you're searching for an image make sure your keywords are clear and specific. Using the Filters menu on iStock, you can refine your search quickly and easily. You can select the number of people in the shot, and the composition: one person, cropped in close, will likely be a more attention-grabbing choice for a small canvas on social media than a wide shot of a group. 02. Pick content with a human connection Consider the types of content that people choose to share on social media: they tend to be subjects that have genuine emotional resonance for them, their friends and family. They could be amusing, or thought-provoking, or just be a shrewd observation on everyday life Shareable content tends to be simple, easy to digest, and fairly universal in terms of relevance. Stunning, inspiring landscapes can be effective in the right context, but human faces, and people interacting in familiar social situations, are particularly universal. Pictures, or videos, of animals or children can inject humour and personality into a campaign, and the 'cute' factor can also encourage people to like, share or click through - again, provided it's pitched appropriately for the brand in question. When you're searching for an image, be as specific as you can to narrow down the results. A search for 'cat' on iStock returns over 90,000 images, whereas 'playful cat' gives you less than 900. It's a huge time-saver. Again, the Filters menu is useful to narrow things down quickly. If you plan to feature a face, select 'Portrait' or 'Close-up' under 'Image style' to find something with a dynamic composition. Look for images with flat-colour backgrounds, as clear space is ideal to add a campaign message. 03. Make the image tell your story Tell the right story with carefully selected images There's not much time to get your message across, and space is at a premium, so the message needs to be unmistakeable. Part of picking the right image for a successful social campaign is telling the right story: a visual shorthand to add context. For instance, if the campaign makes reference to a particular person, object or event, parodies another campaign, or includes some kind of standalone visual pun, you need to convey that reference as quickly as possible, so it's not lost in translation. Finding the perfect stock asset for this kind of purpose is all about knowing what you want before you search, as you could be trawling the image library for hours otherwise. As above, the more descriptive you can be with your keywords, the better. 04. Choose a suitable crop Optimise your images for every platform When you're designing a campaign that runs across multiple social networks, bear in mind the image dimension requirements for each of them. Take the time to optimise your campaign assets, rather than forcing the same image crop into many different formats. If you’d like to test the suitability of an image for a particular social platform, iStock Editor is a great tool that enables you to crop, add text and filters quickly and easily, without firing up Photoshop – see below for more. Also, inside iStock’s Filters menu is an 'Orientation' panel, which enables you to pick between vertical, horizontal, square and panoramic. Square images tend to suit Twitter and Instagram in particular, although remember that you'll need space to add the campaign message - so you may need to crop them differently to make room . Again, you can do this quickly and easily within iStock Editor. Content varies between platforms, as well as crop sizes: the kind of image that resonates strongly on one network may not fare so well on another. For instance, beautiful, evocative imagery works well on Instagram, whereas Facebook users are more likely to share funny, entertaining content and Twitter is all about fast-paced, interesting information. 05. Consider cultural relevance People are likely to respond to familiar imagery With the best will in the world, sometimes the only sure-fire way to see what kind of imagery works most effectively for a social campaign is to put it to the test. The beauty of platforms such as Facebook is that you can laser-target different campaigns according to age, location, interests and many other demographics. If a campaign is running in a particular territory, focus your efforts on testing different versions to put any assumptions to the test. People are likely to respond to familiar imagery: this could be as simple as featuring a local location, particular patterns or colours, or when it comes to faces, people of a particular nationality, ethnic or cultural background. Again, the Filters menu on iStock is an ideal tool for finding the right image as quickly as possible. You can search for images based on the overall colour of an image, and also narrow down locations by country or city to ensure local relevance. 06. Test images before you buy them iStock Editor comes complete with pre-set image dimensions so you can test how your image of choice will look cropped for Facebook, Twitter, Instagram or Pinterest If you’ve whittled down a shortlist of possible images and would like to see them in situ, iStock Editor is a simple online tool to help you mock up social graphics straight from the iStock library. Simply select ‘Edit this image’ from your asset of choice and you can crop, resize, add text, apply filters, and upload and place your own branded graphics in situ on the watermarked image. Once you’re happy, you can download the edited image to remove the watermark. As an additional time-saver, iStock Editor even has a range of popular web and social media image dimensions built in as pre-sets, so you can play around with different crops on the fly. iStock offers millions of exclusive images, illustrations and 4K video, perfect for your social campaigns. Visit now and new customers will receive 12 per cent off any product with code 12CBLOQNEW. Valid until 20th June 2018. View the full article

You're reading Progress Step UI Design Patterns: Tips, Freebies & Code Snippets, originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+! Progress steps are great for user experience. You typically find these on signup pages and checkout forms where the user needs to enter data across multiple steps. Breadcrumbs can also use this progress UI since they flow in a natural hierarchical order. But how can you design a progress bar structure that works for your site? […] View the full article

Web performance analyst Henri Helvetica will be sharing his pro tips on how to boost your site's performance at Generate New York 2018. Get your ticket now. Performance is finally becoming a bigger part of the conversation in web design and development. However, it can still be a challenge to get people to actually consume the great content that’s out there and adopt a performance approach on a more regular basis. Fortunately, freelance developer and web-performance analyst Henri Helvetica (real name Henri Brisard), is on hand to offer his top tips on souping up your site’s performance. 01. Endeavour to measure Helvetica suggests that first of all you have to ensure you measure. “You can never improve what you don’t measure, ” he explains. “Once you have your measurements and data laid out, you have to figure out what important elements to measure. You could have two pages that load in nine seconds, but one may have the viewport filled in much quicker, so you have a better user experience. "You have to measure what is important in the load process for your site and your commercial enterprise. Think about what’s important for your users to interact with. Every site has its own individual needs.” Once he’s had a look at a page load, which helps him pick up on how and when certain items load, Helvetica’s next step is usually to fire up Chrome DevTools to assess exactly what’s going on. It’s an obvious choice, because it’s right there and it’s free – you don’t need to jump into another tool to try to discover why a page may be slow. Yet many developers barely use it. “DevTools is a bit like a smoke detector, ” Helvetica argues. “If there’s a fire, DevTools will tell you. It will at least show you where the smoke is.” 02. Lose some page weight Then Helvetica looks at the waterfall, which will indicate various issues such as the size of an asset and the latency that was involved in loading it. If the site contains poorly sized images, for example, you will usually see a very long waterfall, which is one of the easier pain points to quickly pick up on. Images are one of the biggest culprits for a slow-loading site – an issue that can be fixed fairly easily. As they’re the largest source of data, images are also the largest source of data savings. “I would always take account of your page weight ,” Helvetica explains. “No matter how you slice it, if you have one image that’s 3MB, or even three images at 1MB each, you’re likely going to have a user-experience challenge. "That page weight will also be the victim of your network, because a cellular network can never really be predicted. So you want to make sure your assets are small and optimised for the viewport, which means you shouldn’t be able to see any desktop-size assets on a mobile device.” Helvetica also recommends lazy loading, a technique that delays the loading of an object until it’s needed. “Not all users are going to make it to the bottom of a page ,” he warns. “Quite often you may be loading assets that are never going to be seen. Employing lazy load is going to be very beneficial because you’re saving on data as well as battery drain or memory management. If you’re not loading the image, you’re not going to have any memory to usurp on the device.” 03. See how you stack up Another reason Helvetica favours DevTools is because it now also provides metrics like the first paint (the time it takes for the user to see the first pixel of content) and the first meaningful paint (the time it takes for the page’s primary content to become visible). Then there is the filmstrip (either in DevTools or performance tool WebPagetest) that shows incremental screenshots of the browser rendering a site, so you can see what a page looks like when it loads. By examining them you can figure out which assets were loaded when and look into ways of loading some of them at an earlier time in the timeline. In WebPagetest – which Helvetica praises for its inspiring level of detail – you can also export a video of the load and compare the filmstrip with that of a competitor. “Once you connect the dots, you can explore how to improve the user experience by bringing these assets into the viewport faster,” Helvetica explains. 04. Cut the clutter Helvetica highlights that design decisions have an impact on performance as well, and that your first load into the viewport ideally should not just be as quick as possible but also as clutter-free as possible. For that reason you need to understand the series of events that take place to render the initial view of a web page – the critical rendering path. These events can be optimised by avoiding loading assets that are not necessary and by making decisions around the selection of web fonts and image formats. “Make sure you keep your SVGs as complexity-free as possible ,” Helvetica suggests by way of an example. “Then you’ll have less code when you render your SVG. I hear this from developers all the time. They’ll get an SVG from the designers and have to send it back because it would affect performance.” 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 to net. Want further insight into souping up your site's speed? Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018 If you're interested in ensuring your pages load lightning fast, make sure you grab a ticket for Generate New York. Henri Helvetica will be perusing present-day and even experimental practices employed in measuring web apps, and providing performant user experiences, as well as offering more insight into measurements such as first paint, meaningful paint and time to interactive. Generate New York takes place from 25-27 April 2018. Get your ticket now. Related articles: 7 expert tips for nailing web performance 3 top tools for testing web performance Why web performance needs to feel fast View the full article

Illustration is hot right now, but that doesn't mean finding success is easy. At Offset Dublin, The AOI gathered together top illustrators – London-based Irish artist Claudine O'Sullivan, Karan Singh, who has worked everywhere from Tokyo to Sydney and is now based in Amsterdam, and Scott Bakal from Massachusetts – to discuss how they made it in this competitive industry. The good news is there are some simple dos and dont's to set you on the right track. Read on to find out their advice for breaking into illustration. 01. Do some personal projects Claudine O'Sullivan's personal leaf project led to new client work Throughout your career, but when you're first starting out in particular, personal projects can be a great way of building up your portfolio and steering the kind of work you're getting commissioned for. O'Sullivan started her career with just personal projects in her book, and off the back of that landed projects with MTV and WeTransfer. If you feel like you don't really have time, think again – a personal project can be something really simple. O'Sullivan uses side projects as a way to wind down and recharge after a big or stressful project, and as such likes to keep them simple. One involved just drawing leaves, and it ended up winning her lots of new work. 02. Do think about what you actually want This piece by Karan Singh is part of a personal exhibition "The natural instinct is to say yes to everyone [to start with] because you're just so grateful someone likes your shit," said The AOI's Lou Bones. But if you're saying yes to the kind of clients or work you don't really want to do, that's always going to be the kind of work you're commissioned for. Singh suggested figuring out the kind of creative environment you prefer and going after that. It might not always be big brands – some illustrators work better with a smaller, more personal client experience. "Our lives shouldn't hinge on client work; we're artists first," added Bakal. He spent the first seven years of his career doing what he thought was expected from him as an illustrator. He was successful but unhappy. Then one much more personal project set him on a totally different path. The lesson? Do what you want, not what you think you should do. 03. Don't follow trends At college, O'Sullivan found her style by just drawing While it's good to be inspired by a texture or an element of something you've seen, its a slippery slope to copying another illustrator you admire. "Don't follow trends!" emphasised Bones. "Speaking as someone who's seen all the illustrations in the world ever, a poor man's Malika Favre sticks out a mile." Where to go for inspiration, then? "At college, I was looking at all these artists," said O'Sullivan. "Eventually my tutor just said to me: stop looking at illustrators and just draw something!" 04. Don't move house A poster Singh created with Studio Koto to promote the city of Tokyo for Airbnb Unless you want to, that is. "You can be an illustrator anywhere," said Bones. "And if you speak english, you should be getting commissions from all over the world." In fact living somewhere doesn't mean that's where all your work will come from: when Singh lived in Tokyo, he only did two projects with local clients. With the help of the internet, promoting globally is easy. So there's no need to up sticks go the nearest big city to find success. 05. Do ask for more money Bakal offered advice for not undervaluing your skills Don't be scared of asking for more money. The worst that can happen is that the client will say no. There's no need to overthink it, either. "I just say: Can you do a bit better on the price?" explained Bakal. "Sometimes I don't even try and justify it." That little question alone can get the client to bump up your fee. Not only does every little help when you're just getting started, but it's also an important lesson in not undervaluing yourself. Read more: 5 ad campaigns that embraced a stupid idea How to break into children's book illustration Do you really need an agent? View the full article

adam&eveDDB's Richard Brim dropped a pretty incredible statistic into his talk at Offset Dublin: apparently, the UK spends £18.3 billion on advertising each year. Of that 4 per cent is remembered positively, 7 per cent is remembered negatively, and 89 per cent isn’t noticed of remembered at all. So how do you create work that is part of the 11 per cent that makes an impact? adam&eveDDB, where Brim is chief creative officer, has built a reputation on crafting adverts that make people sit up and take notice, and at Offset, Brim took to the stage to share how the studio found its success. "The fear of generic people laughing at you: That is where we will all fall down," he says. "Sometimes the most stupid ideas are the ones where the magic happens." It takes someone – and often it’s not the most senior or experienced person in the room, he says – to pluck up the courage to share an idea that makes everyone else go, ‘What the fuck?’ And then someone else to take a chance on it and champion it. In this article we look at some of the studio’s biggest ads in recent years, and how they all started out with someone suggesting something that was either ridiculously good or just ridiculous. Here's adam&eveDBB's rules for crafting an ad that people will remember. 01. Don’t start with an advert at all With its Love/Hate campaign, adam&eveDDB hit on something great. But it was starting to get tired. Cue a big brainstorming meeting where everyone had something to say on how to breathe new life into the idea. Mid-discussion, a junior planner piped up, ‘It must be genetic, right?’ Long story short, the studio ended up sponsoring a bone fide research campaign into whether the taste for Marmite was indeed genetically predisposed: the Marmite Gene Project. It ended up in the New Scientist, and had already started gaining serious traction when the studio ran its first TV ad for the campaign. In the midst of Brexit rows and Tesco threatening to delist the product, the ad prompted a massive uplift in sales. Tesco backed down. 02. Trust in a bonkers idea The concept behind a recent H&M campaign wasn’t too cohesive when it was first pitched to Brim. “Someone came into my office and just said: We want to shoot in Tokyo, we want Grace Jones, and we want a Wham! track.” While Brim didn’t quite know what to make of the idea, he decided to trust his team were on to something magical. While Grace Jones said ‘no’, Naomi Campbell and a host of other famous models did not. 03. Ignore the brief Skittles came to the studio wanting an ad that would appeal to millennials. One brave (or stupid) designer decided to ignore the brief entirely, instead pitching a campaign centred around Pride: during the festival, there was only one rainbow that mattered, they argued. So how about Skittles got rid of its rainbow for the weekend? The idea won over the studio, but when it came to getting the “very, very conservative” Mars on board, things got trickier. At first, they got a hard ‘no’. The idea was reshaped into an open letter from Skittles to Pride, to be published in the Evening Standard and Pride’s own magazine. Then Mars was offered a colour-drained Skittles float for the Pride parade, and someone looked into getting special white packs printed to go alongside it. The following year, the campaign took off for good, with Tesco adopting the campaign as its support of the Pride festival. Totally off brief, but hugely successful. 04. Lead, don't follow Typically, FIFA trends follow what’s going on in the real-world game, but for its FIFA 18 ad campaign, adam&eveDDB decided it would try and do things the other way round. It developed a brand new move dubbed ‘el tornado’ – a seamless dragback, flick, and spinning volley, and against the odds, managed to get EA Sports to introduce it into the computer game. The twist was that the real-would players would have to prove they could land 'el tornado' before their in-game avatars would be able to do it. And the pro footballers really went for it, with the studio even issuing FIFA certificates to those who proved their skills. 05. Take a risk with your biggest client The work that has gained the studio the most acclaim has been its long running relationship with John Lewis. Each year, adam&eveDDB is in charge of its hugely high-profile Christmas campaign, and as you’d expect, each year the pressure ramps up. 2017's ad started, much like the H&M campaign, with a not entirely complete concept. Someone pitched the idea of a load of rabbits on a trampoline, with a snowy backdrop. It would make a nice visual, they said. Then someone suggested that rabbits were’t quite right, but what about foxes? Eventually Buster the Boxer was born. “I stood back and looked at what we were filming for our biggest, most important client… and it was a load of woodland animals bouncing on a trampoline,” Brim smiles. “That was a definite ‘what the fuck’ moment.” Read more: 9 embarrassing branding blunders 25 logo design tips from the experts 6 times brands temporarily changed their packaging View the full article