Rss Bot

Siemens patched two vulnerabilities in products, SIMATIC CP and XHQ, commonly found in industrial control system setups this week

View the full article

Ask any freelancer what their biggest worry is, and it’s likely to involve money. How do you decide what to charge for your talents when you're first starting out – or negotiate higher rates once you know what you’re doing? And can you get enough invoices paid on time each month to cover your outgoings?

Subscribe to Computer Arts and get 5 issues for £5!

That freelance dream of being your own boss, taking on the projects you want, setting your own hours, and working in your underwear (if you so choose) may be clouded by this financial uncertainty if you don’t get your affairs in order.

Cash in as a freelancer – advice on pricing, pitching, persuading and more...

But fear not. The cover feature in July's Computer Arts is packed with great advice to help you conquer all your cash concerns as a freelancer – from selling yourself to new clients, to chasing up late-paying existing ones.

Character design trends and branding tips

New trends in character design, according to Pictoplasma

With the help of the co-founders of Pictoplasma, CA also investigates the vibrant world of character design with an inspiring journey through the four hottest trends to watch out for this year.

How The Clearing creates "clear, defendable territory" for its clients

Elsewhere, take a trip to The Clearing to discover why finding ‘clear, defendable territory’ should be the goal of any branding project. The Brand Impact Award-winning agency sheds some light on its process, and shares some tips for how to defend that territory once you find it.

Buy Computer Arts issue 268 now!

This issue is bursting with other inspiring design content, including:

Sign maker Luke Stockdale reveals why signs should be beautiful as well as functional

Showcase features the very best graphic design, illustration and motion work

How to make judges notice your work, according to D&AD New Blood

Behind the scenes with Studio Sutherl&, most-awarded design studio at D&AD 2017

• More from Computer Arts

View the full article

Mike Mimoso and Chris Brook discuss the news of the week, including Citizen Lab's latest report, WannaCry hitting Honda, GhostHook, and Fireball.

View the full article

We have a cracking selection of new tools for graphic designers in this month’s round up. From the new iPad Pro to a wildly discounted collection of world-class fonts, vintage Smart PSDs and all the best new books and design bundles, you’ll find all sorts of goodies here to speed up your workflow and boost your skills.

And don’t forget, it’s graduate show season. That means D&AD New Blood is back, and with it another bumper crop of talented creatives ready to set the world alight with their ideas – you’ll find details below. 

Read on for June’s 10 best graphic design tools…

01. iPad Pro

Apple brings the iPad Pro closer to the MacBook replacement you need

Out now, Apple’s new iPad Pros boast brighter and more colourful screens that respond faster to both touch and the Apple Pencil, so if you’re looking to create on the move, they’re worth a look. Replacing the 9.7-inch iPad Pro is a new 10.5-inch model, which benefits from a 20 per cent larger screen – meaning it can accommodate a full-size digital keyboard. And the 12.9-inch version has received an update, too.

See also:

• Apple unveils new iMac Pro for design professionals
• What if Apple made a Surface Book?

02. SST typeface

The SST font has variations for Thai, Arabic, Japanese and other alphabets

Monotype has released a new sans serif font, SST. Originally designed for Sony, the typeface lies somewhere between Frutiger and Helvetica in design. It can support nearly 100 languages and numerous consumer touchpoints, and aims to strike “a careful balance between style requirements and cultural sensitivities”. Available in six different weights and italics, it’s ultra-legible.

03. The Ink Fanatic's Bundle: PSD Kit

Currently on sale for $49 instead of $79, so get in quick!

Need to quickly add some vintage ink effects to your designs? RetroSupply is running a sale on a massive bundle of seven of its best-selling Smart PSD ink packs. Effects include halftones, ink rollers, screenprints, letterpress, matchbook effects and 70s ink effects – and each pack comes with bonus brushes and textures.

04. D&AD New Blood

Plan your visit to spot some new talent

Ok, the D&AD New Blood Festival is in July, but now’s a good time to put it in your diary. From 5-6 July, once again London’s Old Truman Brewery will be hosting work from this year’s best and brightest design, advertising, illustration and animation graduates. Bringing industry and new creative talent face-to-face, this is the place to be if you’re looking for new gradates, collaborators or if you simply want to get a glimpse of tomorrow’s creative superstars. 

Plus, we’ll be reporting from graduate shows the length and breadth of the UK, so keep an eye on the site throughout the summer.

05. The Inspiring, Creative Vector Collection

Thousands of vectors are on offer, with a huge range of styles

Expiring on 3 July, The Inspiring, Creative Vector Collection brings you a huge collection of world-class vectors licensed to use in commercial work for $29. The full price of the bundle is $2,503 so it’s a bit of a bargain. Head over to Design Cuts for a full run down of all the fonts in the bundle. If you miss out on this deal, click on 'Current Bundle' at Designcuts.com to see if the current deal is of interest to you.

06. Bittersweet: Noma Bar (Limited Edition)

Noma Bar's illustrations have featured in Empire, the New York Times, Wired, the Guardian, Time Out and more

Illustrator and master of negative space Noma Bar has released a dazzling collection of some of his favourite illustration in this limited, slipcased edition, which became available on Amazon this month. Packed with creative inspiration, it’s perfect for the studio bookshelf – and comes with a print, too.

07. The Photocopy Hate Machine

Priced at $29, the Photoshop bundle is packed with gritty textures scanned at 1200 DPI

Inspired by 90s alternative rock flyers, half-dead high school photocopy machines and the possibilities of cheap, mass duplication, the Photocopy Hate Machine Photoshop bundle is packed with gritty high-res textures, texture brushes and a smart PSD for instant results.

08. Fur, Hair and Grass Brushes

These $10 brushes emulate the textures of fur, hair and grass

For $10 you’ll get 52 realistic, high-res, 3D rendered fur, hair and grass brushes for Photoshop in this pack from Instanbul-based Mehmet Sensoy. It contains two abr files: brushes below 2500px are for CS2-CS5 users, while brushes up to 5000px are for CS6-CS2017 users.

09. Stencil Type: Steven Heller and Louise Fili

Pick up the cheaper paperback version of popular 2015 title, Stencil Type

The paperback version of Steven Heller and Louise Fili’s 2015 hardback title, Stencil Type, is officially on sale from 6 July this year – but available now on Amazon. A follow-up to cult typography volumes Scripts and Shadow Type, this 352-page title presents hundreds of examples of stencils from the 19th to the 20th centuries. It’s a rich resource for any designer looking for type inspiration.

10. Watercolor ink Photoshop brushes

These brushes were made from scanning real watercolour brush strokes

After some realistic-looking watercolour Photoshop brushes? Try this set of 30 stamp brushes from MiksKS. Ranging between 387px and 1799px, the brushes were handmade and create a transparency effect when layered.

Liked this? Read these similar articles:

• Is your design retro… or just dated?
• Are movie posters in a design crisis?
• What creative pros want from the next Illustrator CC release
• 
  

View the full article

Fighting attackers needs a new approach that leverages a public-private data sharing framework, enabling immediate and collective responses.

View the full article

Freelancing looks idyllic from the outside. Working with the best clients, choosing fun projects, determining your own hours and working from home or wherever you like. But there’s a lot that happens under the hood to keep the momentum going.

Doing the actual freelance work for your clients never takes up 100 per cent of your time. Soon you’ll be swamped with paperwork and admin – writing proposals, drawing up contracts, sending invoices, writing down tasks and managing your workflow.

To accommodate that, we’ve seen an abundance of tools spring into the market to assist freelancers. You can now write proposals and send them directly to the client without ever opening up your email. Instantly glance at your revenue for the month and compare it to last year’s. Check how much time you spent on that new project last week.

To help find the best, I’ve broken down the tools into the following categories: proposals, finance, legal, time management, workflow and bonus tools. Let’s begin!

Next page: Proposal tools for freelancers

The value of a great proposal shouldn't be underestimated – they can be the key to winning or losing a project. These tools aim to make things simpler by providing templates and customisation features. Many also enable you to send the proposal smoothly to the client and track its progress.

01. Prospero 

This stripped-back proposal tool will also help you price your project

Prospero not only helps you create a proposal but also helps you price the project. There are no dashboards or even account settings – its strength lies in helping you create a proposal, rather than just letting you fly blind. It promises 'More client, more money, less headache'.

When you create a proposal, Prospero asks you some brief questions, such as your rate, the time it will take you to complete the project, and the type of work you're doing (Prospero covers print and branding proposals as well as web and app design). It then smartly generates a proposal based on your answers, which you can edit. 

There's no design customisation (only text editing options), but the default design isn't bad. When you're finished with the proposal, you can download it as a PDF or send it directly to the client. It costs $20 per signed proposal on the Pay As You Go plan or $25 per month for unlimited proposals.

02. Nusii 

The proposal editing in this tool is attractive and simple, and once completed you can send it straight to the client

Nusii's dashboard not only lets you create proposals, it also lets you glance over your sales revenue or proposal acceptance rate. It uses the available data in a useful way so you can keep track of how proposals are progressing. The 'send to client' experience is smooth, and you're notified when a client views it.

The proposal editing process in Nusii is attractive and simple. However, visual customisation is limited and you can't insert tables – an odd decision considering freelancers often like to include a breakdown of deliverables and expenses in a table. A nice touch is that the tool supports a range of currencies and languages, so you can use it almost anywhere. It costs from $29 per month.

03. Proposify 

Select a proposal template to get started with this WYSIWYG option

A true WYSIWYG tool, Proposify comes with a range of templates. Though pretty bland, the templates give you a nice place to start if you're new to writing proposals, and the editor includes a range of customisable features (and even some basic drawing tools). However, it is quite like a word processor – you don't get that beautiful proposal writing experience.

Priced from $40 per month, One of the benefits of Proposify is that you can embed videos and images. It also lets you create content snippets to drop into your proposals and reuse, which is a great time saver.

Next page: Finance tools for freelancers

Keeping track of the money coming in and out is essential to the sustainability of any business. If you're looking to get better insights into your earnings, try one of the following finance tools.

04. Invoiced 

This tool lets you work with whichever payment method you prefer

Invoiced was co-founded by a freelance web developer, and inspired by his own personal struggles. This tool makes it nice and easy to create and send invoices to your clients. The specific payment method is up to you – Invoiced integrates with Stripe so you can set up online payments via credit card, Bitcoin, PayPal, or even offline.

The smarts of Invoiced are in its ability to track your collections efficiency, how long it takes on average for you to get paid, and any monthly recurring revenue (useful for clients on a retainer). It costs from $99 per month and if you're using an accounting tool to keep track of finances, Invoiced integrates with both Xero and QuickBooks.

05. Zipbooks 

This new, free accounting tool lets you track all of your financial information

ZipBooks is an accounting tool that's not only free, but also beautifully designed and simple to use. You can use it to create invoices, track your time, manage payments and clients, track your expenses, and more. 

Once you're logged in you'll see a nice dashboard that displays your billings versus collections, revenue in the last 12 months, average collection period and more. Handily, you can set up late payment reminders for those clients that need them.

06. Momenteo 

With a travel expense feature built in, Momenteo is perfect for freelancers who like to roam

With its travel expense feature built in, Momenteo is a great invoicing tool for freelance digital nomads. Momenteo will also turn approved estimates into invoices without any additional work. Refreshingly, unlike many other tools, Momenteo just has one pricing plan, with the option to pay $20 per month or $200 annually. You'll get access to all features and unlimited use of the tool during your subscription.

07. Bonsai

Send contracts, create invoices and collect payments, all via a seamless UX in this free tool

Bonsai is a free tool that gives freelancers the ability to send contracts, invoice and collect payments. Not only is the functionality of Bonsai great, but the design and user experience is seamless. The tool is easy and enjoyable to use, omitting any unnecessary clutter. 

When creating a contract, Bonsai will ask you a few questions, including your basic info, project brief, rate, when you'd like to be paid and so on. The tool will then provide an editable contract on your behalf that you can send to the client straight from the tool. Once electronically signed, Bonsai generates an invoice for you to issue. You can also set the invoices to be recurring – handy.

08. Wave 

This free tool contains all the bare bones of accounting software without the unnecessary extras

Wave is another popular, free option. This straightforward tool has all the bare bones you'd expect from accounting software, but without the unnecessary bells and whistles. Its invoice flow moves through visual steps, making it easy to keep track of where a project is up to in the payment process. A nice touch is that you can create free, unlimited invoices on the go via the iOS or Android app.

It's easy enough to send a receipt, set up a Stripe integration and connect your own bank account. Payroll features do exist, but are currently limited to the US and Canada only. You'll probably want to invite your accountant in to take care of the reporting features, like balance sheets and income statements. 

Next page: Legal tools for freelancers

Not the most fun category, but definitely one of the most important. Contracts don't have to be as scary as they sound, and they're good for you and your client. While these tools are helpful and often include templates, if you're unsure about the laws in your country you should consult a professional.

09. Termsfeed 

TermsFeed has a range of free terms templates for you to use

Selling products online? Chances are you're going to need some legal documentation, such as a returns policy. TermsFeed has a range of free terms templates for you to use, including Terms & Conditions, Privacy Policy, and Terms of Service. There's also a generator that asks you a range of questions and then builds a contract best suited to your use. 

10. Shake

Need a contract? Choose from a range of templates and get expert advice

A basic contracting tool, Shake by LegalShield lets you choose from a range of free contract templates. A nice addition is that you can choose a contract template for an assignment-based or licensing project, and send the contract through the app or via email to be signed electronically on a smart device. 

Once you've created your contract, you can choose to get it reviewed by a lawyer. While this sounds generous, Shake redirects you to a law firm, which requires an additional fee. The design of the contracts is very basic, and you can't currently edit the look and feel yourself.

Next page: Time management tools for freelancers

The one thing we all wish we had more of is time. Unfortunately, we can't make more time, but we can choose how to spend it. Covering everything from time tracking to scheduling to estimation, time management tools are useful for any freelancer, even those who don't bill based on time (like me).

11. Cushion

Rather than tracking time, Cushion lets you schedule your hours for work and time off

Rather than tracking time, Cushion helps you schedule your time – and not just at work. You can schedule time spent on projects, as well as time off. It highlights when you've overbooked yourself, to help you avoid burnout and encourage you to manage your time better. Priced from $5 per month, it's easy to set up. Cushion also lets you display a badge on your website to show when you're available, which is helpful for those interested in working with you.

12. Timely

A feature letting you compare your planned and logged hours helps you plan your time better

Elegantly simple time tracking software, Timely greets you with a calendar view the first time you log in. There's no timer – rather, Timely encourages you to fill in the hours you've worked on a particular project. You can view the history of a project and gain a good overview of time spent across all areas of the business.

This tool lets you enter both your planned and logged hours so you can see the difference in your estimations – a nice way to teach you to estimate your time better if you're always getting it wrong! Priced from $14 per month, Timely works in the cloud or via your browser.

13. Harpoon 

Create projects, track time, allocate invoices and record expenses

Though it may seem overwhelming at first, once you've spent a little time with Harpoon and oriented yourself, you'll see it's a powerful tool. Harpoon lets you create projects, from which you can then track your average revenue per project (or per month, day or hour, if you prefer) and check outstanding invoices. 

There's also an event revenue forecast, with spaces where you can set yourself goals and define your work habits (for example, how many hours per week you work). This makes it a great place to encourage you to plan ahead and keep track of your goals. Costing from $19 per month, Harpoon is almost like an all-in-one tool, with smart reporting and dashboard features. The only things it lacks are contracts and proposals.

14. Freelancy

If you bill by the hour, Freelancy will turn your tracked time into invoices – no maths required

Freelancy lets you turn time tracked into invoices, quickly and easily upon project completion. If you bill per hour, it works out your fee. Freelancy's reporting feature gives you a calendar overview of when you split your time, which you can filter by date or by project to see how long you've spent on what. You can download these reports as CSVs and charts to send to clients.

While automatically creating invoices from your time tracked is handy, you can also create invoices manually if you prefer. There's a one-off charge of $29.90 per person, for "unlimited everything and email support".

15. Toggl

Track the time you spend on projects and view summary reports

After tracking the time you've spent on certain projects, Toggl uses that data to generate reports. The desktop app reminds you to track your time and lets you do so without having to log in to the web app.

Toggl also lets you create private and team-wide workspaces. So you can manage your own time as well as collaborators' time, to work out the total time spent on a project. Toggl costs from $9 per user per month.

Next page: Workflow tools for freelancers

Workflow tools can often take a little more effort to get your head around as they can be complex, yet powerful. If you want to upgrade from a paper-and-pen to-do list, a digital workflow tool has benefits – especially when it comes to organising bigger projects.

16. Flow

In this tool, you can set up tasks to work on privately before sharing them with your team

At its core, Flow lets you create workspaces and tasks so you can keep on top of your projects. Like many workflow tools, Flow lets you collaborate with team members through task assignment and in-built chat. There's also a 'focus mode' that turns off notifications temporarily and lets your team know when you'll next be available. 

Users create tasks to be completed, which are then organised into projects. You can create team-wide or private tasks that you can share with your team members later. The calendar view gives you a nice overview of what's coming up soon, and you can filter to see just your own tasks or everyone's. If you find a bit of free time you can navigate to the 'unassigned' section to be pick up a task. Flow costs from $17 per month.

17. Azendoo

Filter tasks, check the calendar overview, create repeating tasks and more

Azendoo is a powerful workflow and communications tool with a beautiful design and user experience. View analytics, attach documents, and group and organise your tasks into subjects. 

The whole experience has been thought through – you can filter on tasks, see a calendar overview, create repeating tasks, set due dates and add checklists. You can also broadcast messages, send direct messages to team members (if you have any) and view notifications. Priced from $7.50 per user per month, it's a great tool for keeping you on top of things.

Next page: Bonus tools for freelancers

There's more to freelancing than just finance, time management and proposals. Sometimes freelance life can throw up more unexpected challenges. We've rounded up three bonus tools to help you boost your creativity, get paid on time (without the stress) and prototype your ideas quickly and easily.

18. Just Tell Julie 

Got a client that won't pay? Just call in Julie Elster to get your money in the bank

Stuck in a situation where the client isn't paying? Julie Elster offers to work as your accounts receivable virtual assistant to help retrieve absent payments. She works by calling your client on the phone and being "thermonuclear nice". She has a proven track record, and is highly rated within the freelance industry. You pay $99 upfront, then when she collects she keeps 35% of the fee.

19. Briefbox 

Pick from a diverse range of hypothetical briefs to get your creative juices flowing

Briefbox is a collection of hypothetical briefs to help keep your creative juices flowing when you're between projects. The team at Briefbox write a range of imaginative briefs – everything from designing local currency to creating branding for a painter – so you just need to pick one and get designing. 

Once you're done, you can upload your work to the site and get feedback from the community. A basic account is free, while a Pro account costs from $6.75 per month. Pro accounts offer tips from trade professionals, and constructive criticism on every submission.

20. Atomic

Prototypes are a great way to get ideas across, and Atomic offers a quick way to build and share them

Create and share prototypes with your client with Atomic, the fastest way to design beautiful interactions. Import an existing design from Sketch or Photoshop (or design in the tool itself), then link the pages together and fine-tune the transitions to create your prototype.

Once finished, you can easily share your prototype with the client by sending them a link. The client can then add any comments or feedback on your design. It's free for one user to create one prototype, or from $19 per month for more.

Full disclosure: Femke van Schoonhoven works in marketing and design for Atomic.

This article originally appeared in net magazine issue 284 and has been updated.

Related articles:

• 25 tips for staying sane as a freelancer
• 7 underrated apps for freelance creatives
• How to market yourself as a freelance designer: 7 top tips

View the full article

When you’re building a website, where should you place its logo? A quick glance around the most popular sites on the web provides a clear consensus. It needs to go in the top-left corner.

Need evidence? Just check out YouTube, Vimeo, Amazon, Instagram, eBay, Adidas, BBC, Wikipedia, Reddit, Dribbble, Netflix, Ford, BP, Levis, Shell, O2, Sony, NASA and even this very site.

McDonald’s website follows convention by slapping its logo in the top-left corner of the page

In these particular examples, the logos are all wordmarks. But it's the same deal when it comes to symbol logos, as can be seen on the Airbnb, Spotify, Nike, Facebook, Pinterest and Apple websites.

So is that it? Should you follow the crowd and stick your logo in the same place that everyone else does?

Centre logos for a print look

Well, if you were to centre your logo or place it in the top-right corner, you wouldn't be entirely alone. One category of website that often centres its logo is that of newspapers and magazines.

The approach here is to replicate the familiar look of the printed version’s masthead. Examples of sites that follow this convention include Washington Post, The New York Times, Los Angeles Times, The Boston Globe, The Times, Financial Times, The Spectator, New Statesman, British Vogue, Radio Times and Wired.

Online magazines like Wired replicate the print experience by centring their logo on their web pages

Even if you're not a newspaper, you may still want to convey the feel of a traditional printed document, newsletter or newspaper by centring your logo in this headline-style way.

Examples of this strategy can be seen on this sites for Virginia’s Smithfield Station hotel, the foundation for artist Richard Diebenkorn, and fashion house Sunspel.

However, let’s be clear: print publishers are in no way united on centring their logos online. Most British newspapers, for instance, stick to web norms by placing their logo in the top-left corner, including The Sun, The Mirror, Daily Telegraph, Mail Online and Daily Express. Doing so signals that the publications are forward-facing and fully immersed in developing their digital offerings.

Logo placement outliers

Away from traditional print publishers, examples of logos on websites that are centred or placed on the right are few and few between.

Samsung is among a rare breed of website that centres its logo

There are some other sites that centre their logos, including Samsung, while the sites for Amnesty International and the Guardian have theirs placed on the right. But in the main, these are lonely outliers.

Another notable exception to the rule appears to be search engine homepages, including Google, Bing, Yahoo, Duck Duck Go, Wolfram Alpha and Baidu, where the logo appears next to or above the search bar, although this can be very much considered a special category of website.

Search engine homepages are a special category when it comes to the placement of logos

So what’s behind this overwhelming consensus about where to place the logo?

Why are logos usually placed top-left?

Historically, placing the logo on the left was partly a function of how browsers rendered websites on screens. A fixed browser width meant that if your logo was positioned on the right (or even in the centre) it might not have appeared at all, depending on the size of the screen and the shape of the browser window. 

For the client who was already urging you to 'make the logo bigger', that was always going to be a no-no.

The logo’s placement in the top-left has a long history

The shift to the left also relates with how those in the West (as opposed to Asian and Arabic cultures) traditionally read printed content: left to right, and top to bottom. These deep-seated habits have naturally carried over to reading on digital devices, as eye-tracking research from the Nielsen Norman Group has shown.

Why buck the logo placement trend?

Given that the pattern of placing the logo top-left is so established, the only logical reason for placing your logo elsewhere is to deliberately flout this convention, perhaps in an attempt to catch people’s eye and make your site look different and innovative.

And you might think that’s fine. Because although you’d never consider confounding users by moving the search box, menu button or main nav bar from their standard positions, that doesn’t apply to logos because they have no functional purpose, right? Wrong.

Whether you realise it or not, your users do expect that logo to serve a functional purpose. Which is that when they click on it, they’ll be returned to the homepage. And so if it’s not where they expect, it’s going to massively disrupt their normal customer journey.

Research by the Nielsen Norman Group shows how important logo placement is for the usability of a website

In fact, according to research, users find getting back to the homepage about six times harder when the logo is placed in the centre of a page compared to when it’s in the top-left.

Maybe if you have a centred logo but a ‘Home’ button in the top-left corner, as Aberdeen agency JAMstudio does, then users won’t feel quite so disrupted.

But in general, we’d recommend that if you’re trying to make your design eye-catching and innovative, you should probably just find a better way to do it.

Logos in multiple places

Placing your logo in the top-left corner doesn’t mean you can’t also feature your logo elsewhere on the page, of course. Many sites like to give more voice to their branding by also including the logo in the sidebar or footer. 

The Envato Tuts+ network boosts its branding by featuring its logo in the footer as well as the top-left

A good example of this is the Envato Tuts+ network of free tutorial websites. It’s easy to imagine clicking through from Twitter, following an entire tutorial and still not noticing which site you’re visiting, so it makes sense to add a little extra emphasis to its branding in this way.

But while there’s nothing wrong with including multiple instances of your logo on your website, always bear in mind that users will expect each and every one of these to function as a link back to the homepage.

Surprisingly, this is something Google currently fails to do on many of its satellite sites, such as Gmail or Google Drive. Even though the Google logo is widely associated with its search page, clicking on it within these services actually takes you back to the homepage for the sister service, rather than to google.com.

Wherever you are in Apple’s ecosystem, the Apple logo takes you back to apple.com

In contrast, on all web pages in Apple’s network, including iTunes, clicking the Apple logo always takes you back to your local version of apple.com.

Thanks go to Stewart Ainslie, WithPrint, Montgomery Kern‏, Mark B‏ and Alon Koppel‏ for their help in writing this article.

View the full article

Every designer deserves access to great tools in order to create. VectorState provides just that. Dip into this huge library of assets any time you want by grabbing a two-year subscription, on sale now for 80% off the retail price.

VectorState understands what creatives need to work. It seeks out quality vectors that could be used in just about any project and makes them available for designers. With VectorState, you get royalty-free access to more than 1.1 million curated vectors. That number is always growing, so you can be sure you'll never run out of inspiration.

You can get two-year access to VectorState on sale for just $31 (approx £24). That's an 80% saving off the retail price for an essential library for designers, so grab this deal today!

View the full article

There's nothing quite like the sight of a playful pooch to put a smile on your face, right? This brilliant selection of dogs are more than part of the furniture at various design offices and studios – they're an essential member of the team. And they're not just in the office on Bring Your Dog to Work Day(today!), but every day!

Including everything from a high-energy Vizsla and flatulent Bulldog, to a couple of small but mighty Chihuahuas and a menace of a Jack Russell, here are some of the most characterful canines to brighten up your day. 

01. Freddie the Jack Russell

Freddie is Creative Bloq's unofficial office dog – don't be fooled by those big brown eyes!

We're huge fans of our four-legged canine friends here at Creative Bloq, but, sadly, CB HQ is unable to allow them into the office. However, that doesn't mean we don't have an office dog. This furry fella, eight-year-old Freddie the Jack Russell, has recently started joining the CB team on monthly meetings, stealing the hearts of all the staff in the local coffee joint and luring them into a false sense of security with his big brown dinner plate eyes.

He helps his human, CB associate editor Kerrie Hughes, keep the world's top design website running by keeping her very alert and on her toes. How so? By regularly stealing unsuspecting lunch-goers' sandwiches and generally being a total menace.

02. Sloane the Vizsla

Sloane is quick to let her human Steve Fisher know when he's been working too long

Sloane the Vizsla makes the life of human Steve Fisher, the founder of Canadian UX, content strategy and web technology consultancy the Republic of Quality, all the better.  

"Sloane is a high-energy Vizsla that loves to go for hikes in Vancouver's north shore rain forest with me pretty much every day [photographic evidence can be found on Instagram @hellofisher]. She’s quick to let me know when I’ve been working too long by climbing up onto the chair with me. My office is made 100 per cent better with her around. #ilovemydog."

03. Ziggy the Bulldog

"Ziggy is the glue that holds the whole operation together," says Frost

Life is never dull for web designer Brad Frost with Ziggy the Bulldog around. "I work from home with my brother and my wife who runs her own business. Ziggy is the glue that holds the whole operation together. His snores contribute to conference calls, his gas clears rooms (it's his way of telling us we need to get up and stretch our legs), and his hilarious presence ensures there's never a dull moment in the office." 

04. Scruffy and Duff the Shih Tzus (cross Spaniel)

Scruffy (left) and Duff belong to podcast host Debbie Millman

Adorable creatures are Scruffy (left) and Duff provide their human, author, educator, brand strategist and host of the podcast Design Matters Debbie Millman with nothing but unconditional love. Scruffy, a male, is a Shih Tzu while Duff, the female, is a mix of that and a Spaniel.

In an interview with Core77, Millman was asked about design and her dogs: "On their best day, brands could aspire to be like dogs, evoking that sense of connectivity," she said. 

05. Franklin the Shiba Inu

Franklin the Shiba Inu keeps designer Justin Maller grounded

We'd like to introduce you to Franklin the Shiba Inu, whose human is New York-based freelance designer and illustrator Justin Maller. 

"Being a freelancer is lonely," Maller admits. "Usually, there are no other people around. This has its pros and cons – people are great for loneliness but usually a pain in the ass for everything else.

"Dogs are like people, but furrier and more awesome – they don't talk back, they learn tricks, do cute shit constantly and basically unequivocally think you're great. They also force you to get up from your desk and leave the house a few times a day to go on things called 'walks'."

06. Mattie the Australian Shepherd

Mattie is Paula Scher's absolute favourite

Mattie the Australian Shepherd accompanies Pentagram partner Paula Scher to the office every day. During in an interview with Fast Co Design, Scher was asked what the favourite thing she owned was: "My dog! He’s an Australian shepherd, my fourth one. Their names have all started with M–Matty, Mickey, Molly, and Mimi."

07. Sir Oliver Ottoman of the High Country the Havanese

Sir Oliver Ottoman of the High Country, or Ollie for short, is always around to provide his designer human Stanley Hainsworth with some creative inspiration. The founder and chief creative officer of Tether, a creative, cross-discipline studio, Hainsworth is never far away from Ollie, who (as you can see from his Instagram account) accompanies him in the office and on design jobs regularly.

08. Olivia the Golden Retriever mix

"Olivia is the most reliable creative partner we have," says Neo Pangea founder Brett Bagenstose

Olivia the Golden Retriever mix is the resident office dog at digital boutique Neo Pangea. "Always ready for a brainstorm or a belly rub, Olivia is the most reliable creative partner we have… just don’t leave food out on the counter," says Brett Bagenstose, founder and self-titled 'Baron of Pixels' at Neo Pangea. 

Related articles:

• 10 ways to make your desk more comfortable
• What time should designers get up in the morning?
• The expert guide to working from home

View the full article

From outsmarting Predator and avoiding aliens to just how the infamous flux capacitor works, these infographics all provide interesting facts on some of the best loved movies of all time. Check out this brilliant collection of movie infographics to inspire you.

Use the icon in the top-right of each image to see it full-size.

01. Interstellar

This infographic makes sense of Interstellar's timeline

The 2014 sci-fi smash-hit Interstellar was visually stunning, but with a plot that hangs off the theories of quantum mechanics, it left more than one viewer scratching their head and reaching for the rewind button. This beautifully rendered movie infographic lays out the timeline for us, complete with character timelines to help make sense of the storyline. 

It’s the work of Frametale, an entertainment marketing agency with offices in Los Angeles and Instanbul, led by creative director Dogan Can Gundogdu. 

02. Star Wars Episode IV

Click the image to explore the full (much more impressive) infographic

Why sit through the whole of Star Wars Episode IV again, when you can instead savour it in infographic form? SWANH.net, created by Swiss illustrator Martin Panchaud, turns the first Star Wars movie into an epic 123m infographic. Created in Illustrator CC, using 157 pictures across 22 separate files, it took him over a year to produce.

03. Die Hard

Brilliant Die Hard infographics break down body counts, explosions and much more

This brilliant Die Hard infographic breaks down body counts, explosions, plot points and much more – and there's one for each of the five films in the franchise. Having a certain way with words, we particularly like the addition of John McClane's more memorable and humorous lines.

04. Pulp Fiction

Click the icon to enlarge the image

Designer, photographer and Tarantino fan Noah Daniel Smith has shuffled cult classic Pulp Fiction back into chronological order in this detail-packed infographic. Back in 2012, Smith sold over 1,000 posters of his design via a Kickstarter campaign, and it’s since soared in popularity. Each character is assigned their own colour, but there’s also different line styles employed depending on whether they’re ‘moving’, ‘not moving’ or ‘dead’. Handy.

There's also a Kill Bill version for fellow Tarantino enthusiasts.

05. Back to the Future

The creative team at Sloshspot break down exactly how the flux capacitor sends Marty and Doc Brown on their many adventures

An '80s classic, Back to the Future is a firm film favourite for many. With such a big following, there are hundreds of pieces of BTTF fan art online, including this brilliant infographic by the team at Sloshspot, which provides great insight on how the legendary flux capacitor makes time travel possible.

06. Inception

A simple but beautiful design for the 2010 brain-scrambling movie Inception by graphic designer Rick Slusher

We love this simple but beautiful infographic for Christopher Nolan's 2010 blockbuster movie Inception. Let's face it, given how complex the film is, a little bit of simplicity to explain it goes a long way. The illustration was created by New York-based graphic designer Rick Slusher. His elegant summary of the film depicts each character as a coloured line, and the layers of dreams as concentric circles.

07. Batman

The comic book style shows how the Batmobile has evolved a lot over time

Batman has many amazing gadgets, but one thing that makes him one of the coolest superheroes is his Batmobile. The vehicle's design has come a long way over the years, being continually updated to look sexier, sleeker and to incorporate the fanciest of tools. This infographic from Car Insurance charts just how much Batman's trusty Batmobile has changed throughout its history.

08. Star Wars

Random facts, strategically placed, create this cool Darth Vader design

Such a popular franchise, Star Wars fans everywhere are constantly creating artwork inspired by George Lucas' story. And this original design, based on Darth Vader's helmet, is another of our favourites. Type detailing random facts about the films have been strategically placed to create the clever design.

09. Alien vs Predator

Useful tips for surviving Predator or aliens

While it's an incredibly small possibility, it's worth taking a look at Steven Taubman's handy infographic about our chances of survival should two of the deadliest extra terrestrial lifeforms take over the world. Basically, humans wouldn't stand a chance. But it does provide some useful tips, should you encounter Predator or a face hugger. Although we're not sure how effective a bag over the head would be!

10. 250 best movies of all time

Is your favourite film in this cool subway-inspired infographic?

This impressive subway-inspired map of movies was created by designer David Honorat. The map shows the 250 best movies, as voted by IMDb.com users in June 2009, with the legend detailing genre of film instead of train lines. Take a look at the cinematographic subway plan and see how many stations you've already visited.

Related articles:

• Pro tips for creating interactive infographics
• The 100 best infographics
• 10 best movie posters from the 1990s

View the full article

While many great website builders and beautiful free themes make building your own portfolio site easier than ever, a little knowledge of HTML is really useful. It enables you to look under your site's bonnet to see how everything fits together, and to fine-tune things when the default settings aren't doing it for you.

But all those tags can be a little daunting – especially since HTML is an ongoing project, with new elements being introduced as the technology evolves. So Digital.com has come up with this useful interactive HTML cheat sheet.

Digital.com's HTML cheat sheet is a web design gold mine

It features a full list of all the HTML elements that you can browse alphabetically – in a very attractive isometric layout – as well as by category. Click on one of the html code tags to read a descriptions of that element, as well as helpful code examples that you can plunder when you try to implement a new feature for yourself.

Code examples make it easy to get the hang of those pesky tags

Plus if you don't want to be eternally switching browser tabs when you can't tell your <article> from your <body>, Digital.com has thoughtfully provided a downloadable PDF version of its cheat sheet that you can save to your computer or print out and keep on your desk.

There's even a PDF version to download and print out

You can find the cheat sheet – made with a little assistance from Mozilla – over at Digital.com.

Related articles:

• 16 amazing HTML examples
• 5 of the best resources for learning HTML and CSS
• 23 steps to the perfect website layout

View the full article

Cisco patched three vulnerabilities in three products this week that if exploited, could have resulted in a denial of service, crash and in some instances, arbitrary and remote code execution.

View the full article

The good news is the cost of a data breach is down double-digits, the bad news the size and scope of breaches is creeping up.

View the full article

Developers with Drupal patched three vulnerabilities, one critical, one being exploited in the wild, in Drupal’s core engine on Wednesday.

View the full article

Researchers at CyberArk have developed a bypass for Windows PatchGuard that leverages Intel's Processor Trace (Intel PT) technology to execute code at the kernel.

View the full article

When we reviewed Adobe Illustrator CC 2017 recently, it was obvious that the Creative Cloud 2017 release remains a fantastic tool for all kinds of design work – from crisp vector logos, to app icons, to UI and web prototyping, to illustration to... well, pretty much anything, really. 

But of course, Illustrator isn’t perfect, so we wanted to find out what creative pros really need from the app. Here's what they want Adobe to improve for the next version of Illustrator.

01. Improve Colour Picker options

Photoshop currently offers superior colour picker options

“This has bugged me for years,” says illustrator and design lead at Havas helia, Aaron Miller. “If you have the colour picker window open, you can’t simply select a background colour from anywhere on the screen or apply a swatch like you can in Photoshop. The cursor should change to the Eyedropper tool, so you’re free to select any colour.”

02. Boost bitmap rendering

“Illustrator’s vector capabilities are second to none, but its bitmap rendering for the canvas and exporting are a long way behind,” explains Marc Edwards, founder of Bjango. “In terms of antialiasing steps for shapes, there are only a few possible steps: 0%, 25%, 50%, 75% and 100% opacity.”

03. Fix the snapping bug

Illustrator Von Glitschka is very vocal about what he wants from the next version of Illustrator. “Fix the damn snapping bug that was introduced through a CC update four-plus years ago,” he says. “Snapping is a fundamental feature of vector building, and to have a so-called pro app fail at that level is absurd.” Not sure what he means by the snapping bug? Watch the video above, which he sent to Adobe’s engineers.

04. Sort out the stability

"Illustrator CC 2017 21.1.0 is the most unstable version of CC yet,” continues Glitschka. He points out that at Adobe MAX in October, Adobe announced it would be focusing on making Illustrator more stable, but he hasn't seen much evidence of this so far.

“I’ve been tracking my crashes since 1 January 2017 and so far I’ve had 41. March alone had 11. At Adobe MAX, Adobe stated that for the first time in 25 years Illustrator has a larger user base than Photoshop. Now, if that is true – and I’ll assume it is – why not make Ai rock-stable?”

05. Add snappy text alignment

Want to align your text centrally within a button? You can't... yet

Illustrator CC 2017 brings a lot of new text enhancements, but Miller wants more. “I know many people use Illustrator for a more design-based approach and work with type,” he explains. “Something that InDesign does really well is to offer the ability to align text vertically within a text box. This combined with central alignment of the paragraph would mean text could sit ‘centrally’ within a button, for example.”

06. Enable better rendering

Edwards also wants better rendering performance. “Enabling Illustrator CC’s GPU rendering option improves performance, but reduces rendering quality even further,” he says. “Illustrator’s pixel preview also has many rendering issues, including stray pixels and other artefacts. Gradient rendering with dithering would improve the quality of canvas rendering, and also bitmap output, too.”

07. Increase artboard limits

At the moment, artboards are capped at 100

Artboards have made it possible to create multi-page documents at different page sizes, but Edwards doesn’t think the functionality is quite good enough. "I’d like the artboard limit increased from 100,” he says. “For larger projects that use artboards for exporting, 100 artboards are often not enough.”

08. Let us copy beloved effects

Miller wants to be able to copy effects

The Appearance panel is great and shows the effects and properties applied to a shape, but Miller wants more. “I do wish you could copy an effect like you can copy layer styles within Photoshop. This would make making working with effects so much easier. There are ways around this – like using graphic styles – but they feel counterproductive.”

09. Bring back default anchor points

“Two releases ago, Adobe decided on the fly to remove anchor points being shown by default on vector shapes. Who asked for that? No-one, it just did it,” muses Von Glitschka. “It got so much blowback it added a preference to return it to normal.”

10. Communicate with designers better

“The Illustrator team gets pushed so hard to develop features that will be used to push CC services,” says Von Glitschka. “They care more about that than stability. They’ll also actively remove features that don’t encourage CC use. For example, on the Adobe Draw app for iPad they removed the feature that gave users the ability to simply email your art to anyone as a PDF. They replaced it with uploading it to CC, so you can’t share it easily. It’s a convoluted hot mess.”

Related articles:

• 21 Illustrator shortcuts to speed up your workflow
• Create product icons in Illustrator
• 100 amazing Adobe Illustrator tutorials

View the full article

This tutorial will take you through how to design and model a new furry 3D creature. To create this strokable creature we will follow my workflow, working on the base character, blocking the hair and fur in, and adjusting the scene. 

In addition, you will see the design process I use to create a new piece, including blending my reference images with renders and how I rework the main subject to step up the overall quality of the design. There's a video of my process below, followed by a step-by-step breakdown of my process.

• Download the supporting files here

01. Find a concept

First, find a good reference image to work from

First, I look for a reference image that's natural but strong. I go to unsplash.com, where people put amazing photos up for free commercial use. I want a scene with good lighting that I can use for a backplate. I decide to test a kitchen scene.

02. Set the scene

Work out the shapes of the scene and box model them

Now I have my image, it's time to set the camera and perspective. With Maya it's not that easy to get the angle right – I have to tweak and eyeball a little bit. My workflow here is to get the basic shapes of the scene and box model them.

Once I have the basic shapes, I set the camera and the view angle. It's really important to take your time here and make sure you have the perspective right because this will define the success of the scene.

03. Establish the basic light setup

Use your reference photo as a lighting guide

Now it's time to set up the light. In my reference photo I can see an area of light at the top of my scene, so I put a light there. I add one more physical light behind my camera as a secondary light. For realism and to blend the scene and the backplate, I normally add a dome light with the backplate images, which generates GI and a little ambient light, providing a dim illumination of the scene.

04. Work on character conceptualisation

A basic character gives you lots of potential to play around

I want my character to do something similar to the man in the reference image, and to blend in with the pasta in the photograph. I design a really basic character to play with – just a blob with arms and two eyes. It doesn't even have legs, because this guy will always be behind the counter.

05. Test the scene  

Render a quick test to spot any early issues

With everything blocked in and the main character in position, it's time to test the scene. I put all the models in the scene with no visibility to cast shadows and render the first test. I blend the render and the photograph to test the scale, the model, the light and the angle of the camera. I find my backplate has a green and blue tint over the shadows that I'll have to remove later.

06. Do some basic grooming

Use groomable splines if there's no animation involved

It's time to start grooming. I use Core XGen, though this technique will work with any other hair system. When working with hair, the important thing is to achieve a good flow and an interesting silhouette. 

For this kind of character, with no animation, I like to use groomable splines. I think about how the character moves and behaves, as this will affect his fur. This specific character has to work a lot with his hands and gets covered in steam often, so his hair will look heavy and not that fluffy.

07. Adjust length and silhouette

With the flow sorted, block out the silhouette and length

Once I have the flow of the hair, I start blocking out the silhouette and the length. I give my creature shorter hair on his hands but furrier, pointy ears and longer hair on his armpits. I block out the eyes and the mouth.

08. Set up the hair

Use a random expression to give the hair some variety

Now I generate the hair for the first time to check its fidelity and how it looks. When you first generate the hair it often comes out in chunks or planes. I test first with a really low density hair, and don't overscale the model. 

For the hair, I break the connection on the Width and set up a random expression to define with float rand (float min, float max) to help me control the hair and add some variation to the width, making it look more natural. One the hair is visible, you can adjust the flow and length.

09. Employ the clump modifier

Work out the basic shape of hair clumps

For this groom, I use a short hair with a mid-density on the base clumps and closed tip to enhance the effect of humidity, and a higher density on the second level of clumps with an open tip. I make the clumps thicker than the regular hair, so they appear sticky. I want small groups of hairs with a wavy configuration on the noise, to look thick on the roots and thinner on the tips with a wavy end. 

10. Use the coil and noise modifiers

Use coil and noise modifiers to vary your clumps

Once I have the basic shape of the clumps, I need to add a little bit of randomness, as the clumps start to reveal more detail. To add new variations I use the Noise Modifier, and for this case I also add a Coil Modifier with a low influence to simulate the wetness and oil on the hair. 

For the noise, I use a base modifier to add the first layer of variation, affecting the tips more than the bases, with a frequency of 4 and a magnitude of 1. This means each strand will move four times from base to tip with a max magnitude of 1 over the tips. 

Next page: Give your creature character and add some props

11. Make the hairs more realistic

The cut modifier gives hairs a more realistic look

Now I use the Cut modifier to simulate some hairs to be cut, broken or shortened over a random parameter, giving a better shape at the edges and a more realistic look. I test the amounts depending on the scales of the hair until I'm pleased. I normally reduce 20% of the hair, and the values vary depending on the groom. For this character, I reduce between 0.0 and 0.2 units per hair.

12. Refine the shape

Now it's back to the grooming

With all the basic modifiers in place, it's time to start grooming again. Now I can see how the groom will look in the future, and the shape is clear, I can adjust the basic groom to have more variance, or to be smoother, to have clumps and coils, or to have a different flow, in each part. The groom can change any time but with all the modifiers in place it's better to work out the shape now.

13. Set up the strays

Add a bit of frizz with the noise modifier

Next, I use an expression to define a custom percentage parameter on the Noise Modifier. With this expression on the Magnitude attribute, I can define how many hairs I affect with the noise parameters, giving me a custom stray attribute for a flexible frizz effect. Here I add two new Noise Modifiers on top of the Cut Modifier with different attributes to make the final look.

14. Test assembly 

Do a second test to see how it's all coming together

With all the modifiers in place, I do a second assembly test. This time I add a basic colour to my groom and render with the same set-up, with a colour correction for the backplate. I find some problems with the blending between the render and the actual photograph, but can see that the light is working. 

In Photoshop I add an exposure adjustment with a gradient to add more light into the render to blend it better into the scene. The model isn't quite working, so I decide to start exploring different options.

15. Explore characterisation

Step back from your character to get a fresh perspective

When working on a scene, you need to explore and to correct yourself, feed your brain and sometimes even stay away from your work for a while so that you can see it with fresh eyes. 

For this project, I needed to try out some different methods and add new elements into the scene. Here I try an apron, a chef's hat, different mouths and facial hair and even some weird mouth drawn onto a Post-it note. Finally, I decide to work with the apron and hat.

16. Adjust the pose

A more flexible pose adds life to your character

To make the props work I need to make the pose more flexible. I add movement to the hands and rotate the body, but keep the basic shape from the photograph as I still want to use the pasta from the backplate. I make the ears longer and separate them to give more movement and a better silhouette. 

17. Model the hat

A jaunty angle works wonders for any hat

For the hat, I use a really basic workflow. With some references and taking the early concept into account, I model the base shape in Maya and play around with the model to see where it could work.The hat works in the centre of the head, between the ears, with a little tilt to look more relaxed and cool. 

After that I take the model into ZBrush to work on the final detailing and use some cloth alphas to make the final look. 

18. Model the apron

Realistic aprons are harder to make than you realise

It takes me more time to finish the apron. I work on the base model directly in Maya and test it over the groom itself because it needs to collide with the hairs. I mainly model the basic shape on a really low-poly and set the parts where the stitches should be. 

In ZBrush I decide to add a far higher level of detail and put a lot of work into making the apron look as realistic as possible. With the cloth alphas and also using the Dam_Standard Brush, along with stitches alphas, I manage to make a good-looking model and surface texture for the apron.

19. Test the props

Do a props test to see if it all works together

With all of the models done, it's time to test them in the scene. I import both objects and try them directly with the high-res models. I really like the hat but am not sure about the apron. There is still something missing in the main character, a kind of lack of connectivity. I know the image I have in mind but need to make it real in the scene. 

20. Redesign the character  

Don't be afraid to go back and remodel your character

After some thought and a break from looking at the screen, I decide I need to reshape the main design. I work directly in ZBrush to adjust the eye cavity to make it friendlier. I also decide to add a big mouth with some gigantic teeth, and rework the hands. The main shape is still there but the character has a lot more personality.

Next page: Retopology, final render, and post production

21. Retopology

Rework the topology to ensure the hair still fits

As he now has a mouth and bigger eyes, I'll need to make selections to adjust the shapes of the hair and where it should grow. I work the retopology of the character completely on Maya, as I want total control over the flow of the edges and loops, and the new tools in Maya 2017 make the character animation-ready.

22. Make the UV map

Make a UV map ready for adding textures

I need to paint the textures, and to do so, the UV will be useful – even if XGen uses Ptex it's still necessary to have a good UV map. Once more, I decide to test the new UV tools that come with the Maya 2017 update 3, which are now simpler, amazingly fast and really easy to use. 

23. Re-groom 

It's time to go back and groom again

I re-groom the new character still using the groomable splines. I repeat most of the process from before but this time I spend more time on the basic groom. I select just the faces that I want to grow hair from, leaving the eyes and the mouth out of the selection. I work even more on the flow of the hair, add eyebrows by making the hair longer over the eyes, and add more noise into the actual groom, not just on modifiers. 

For the hair between the character's ears, I make the hair longer and use the Part Brush to give it shape. I also reduce the length of the hair around the eyes and the mouth, giving a gradient effect between the long and short hair.

24. Import the modifiers

Save time by bringing in the old modifiers

I want to use all the old modifiers, so I go to the old XGen scene and right-click on each modifier, hit Save Modifier, and name each one in order as this will affect the result. To re-import them into the new scene, on the Modifiers tab I click on the folder icon and select Load User. 

I import my saved modifiers one by one to build up the same result as before. This time I create masks over the clump modifiers to affect less of the face, producing a smoother result with fewer clumps there.

25. Create the moustache

Use XGen's Guides to make a moustache

I decide to reintroduce the moustache. For this kind of hair, the best way to work is using XGen's Guides as it's faster and the results are great. Working with guides is really easy – I draw just half of the moustache guides, repeating the same process of making the shape and adjusting the size with a rand expression as before. When I find a shape I like I just mirror the guides and the moustache shape is done. 

For the final detail, I use the Move Guide tool to make some irregularities on the groom. I follow the same pattern with two Clump Modifiers, a Noise Modifier and finally a Cut Modifier, with just a few strays.

26. Paint the colour

This will look less horrifying once it's on your model

To add colour to the groom, I need to create a custom attribute for the render system to read the information. To do so, I go to Preview and Output and in Custom Shader Parameters I create a Custom Colour Attribute using the root_color convention. 

Next I click on the option next to the Attribute to create a map. I click the brush icon and with the Maya 3D paint tool options I start painting my textures. I use a fox's colours as a reference for this guy. If you want to create a custom texture you can generate the Ptex map with Mudbox or 3DCoat – just remember to overwrite the map that Maya created for the custom texture.

27. Create material

Use Redshift to create your materials

I use Redshift for this render. The basic material for hair is almost perfect, so I just make the reflection a bit glossier. I create an RS Attribute Lookup to call in the root_color info. I connect this to the internal reflection of the RShair, and with a multiply/divide node connect the Transmission colour and change the value of the multiplier to 1.5. I finally connect the RS Attribute Lookup to the diffuse slot of the RShair and change the weight of the diffuse value until I like the result.

28. Do the final render 

Try to match the original photograph's depth of field

Now I set the render configuration. For smooth results with Redshift, activate Hair min pixel width under the OPT tab on render settings, to solve the transparency of the hair and fix the tessellation, making hair smoother and reducing the render time. 

For the render settings, I use max samples of 512 and change the adaptive error threshold to 0.01 as I want almost no noise on the render. On the camera I set an exposure photographic lens and a bokeh lens to simulate the DOF on the photograph.

29. Blend the render and the backplate

Now you need to put everything together

With the final render in place, it's time to begin the final assembly. First I remove the colour and try to leave the backplate as clean as possible to make the blend with the backplate. I always try to remove any colour information and use the backplate in its pristine state. 

I mix the render and add a mask for the foreground to leave the table and the plates behind the render. Having the render on the scene means I'll need to colour-correct the render so that its colour intensity, saturation and white and black points are close to the backplate's from the image. I put a B&W adjustment on top of everything to help me to fix the values of the render from there.

30. Post-production and effects

The free Nik collection is great for post-processing in Photoshop

With both the render and the backplate under the same lighting conditions, it's now easier to work on the post-production elements. I normally use the Nik collection pack to help me with the process and with blending it better. At this stage, I can also add effects to the scene – I add more steam coming out from the stove behind the character. With a radial blur, I give a motion blur effect just to the arms. 

31. Colour grading and cropping

A few final fixes and you're good to go

Finally at the end of the road, I can finalise the colour grading, fix the contrast and give more balance to the tones, including lightening the colour of his moustache. I am still not too sure about the look of the scene, but I flip it around horizontally and it creates the effect I was hoping for. 

I work a little bit more on the contrast on the wall to make the character's silhouette more visible and striking. I finally do a crop with a little rotation of the composition to fix the tension points and the render is done!

This article originally appeared in 3D World issue 223; buy it here!

Related articles:

• How to create furry cartoon characters
• Make your own character bible
• How to use blend shapes to animate characters

View the full article

Creating a design targeted towards children can be hard. If you try too hard to be 'down with the kids' you'll just appear foolish. Perhaps the best way to approach designs for kids is to speak to them on their own terms. 

That's the thinking behind these 10 child-friendly fonts, which range from young childlike crayon writing to fun bubble writing to neat cursive handwriting worthy of full marks in any school writing test. Comic Sans, be gone! These kids fonts would look perfect on packaging designs, posters and books.

01. Kids Crayon

A great font with a cheeky message

Format: TT

Getting us started on our list of the best kids fonts is the appropriately named Kids Crayon. Doing just what it says on the tin, this textured font is taken from the crayon handwriting of creator Ian Williams' five-year-old kids. With all the idiosyncrasies that only kids could create, this charming font will only set you back £7.99 (about $10).

02. Kids Script

This font balances calligraphy with children's writing

Format: OTF, TT

Kids' writing isn't necessarily always clumsy and chalky. Take Kids Script, a font that is based on the calligraphic handwriting models used in Spanish schools in the 1940s. It might sound an esoteric starting point, but the result is a fresh font with a unique edge. Download the three-font family for £49.99 (about $63.50).

03. PF Kids Pro

This series came about while designing birthday invitations

Format: OTF

PF Kids Pro is another font that uses real life writing as a starting point. In this case, the daughter of Alexandros Papalexis can find her writing immortalised in font form. Created while designing invitations to her birthday party, this rough around the edges font is available in three weights for £140 (about $177.50).

04. La Mona Kids

This kooky font has lots of attention-grabbing gimmicks

Format: OTF

Time for something completely different. Speaking to kids in their own handwriting is all well and good (and there's more of that to come) but sometimes a font needs to grab their attention. Enter La Mona Kids, a fun bubble writing font loaded with odd details that are impossible to ignore. What's more, you can grab the eight fonts in the family for just £35.99 (about $45.50).

05. Butterfly Kids

We're not sure this is the best tag line for a kids' font

Format: OTF

Head over to the Butterfly Kids download page and you'll see the font describe itself as being all about "spreading cheer! Be fun. Be cute. Be happy!" With its curly letter shapes and OpenType ligatures, we'd be hard pressed to disagree. This single font is yours to download for only £13.99 (about $18).

06. Cool Crayon

The beauty of blackboard chalk without the horrible noise

Format: TTF

Another font from the school-inspired camp, Cool Crayon is a typeface that emulates the gritty texture of blackboard chalk. (Although we can't help but think, do kids these days even know what blackboards are? Answers on a postcard... or maybe a Tweet.) This font is available free for personal use only, but you can licence it from designer David Kerkhoff's site Hanoded Fonts.

07. CookieMonster

We all sat next to someone in class who dotted their i's with hearts

Format: TTF

Maybe it's just us, but this font is a typographic flashback to sitting next to someone in school who dotted their i's with love hearts and more than likely wrote in neon gel pen. Either way, Cookie Monster is a fun kids' handwriting font that you can download for personal use for free (or negotiate a commercial license with the designer, Des, via the contact details in the font description).

08. Crayon En Folie

(It's French for pencil madness)

Format: TT

If none of the other pencil fonts on our list are quite what you're looking for, perhaps Crayon En Folie is what you need. This kids' font takes your standard pencil typeface and gives them a splash of colour. Download it for £10.99 (about $14).

09. JollyGood Sans Condensed

It's not, we repeat not, Comic Sans

Format: OTF

A cute font with Sans in the name? Don't worry, JollyGood Sans doesn't have the nauseating edge of Comic Sans. In fact, this typeface is pleasant on the eye and slimmed down so you can fit more letters on the page. And given that it's made for posters and books, it's a practical design choice, too. Download eight fonts for £70.99 (about $90).

10. Kids

The definitively named kids' font

Format: TTF

When a kids' font is simply named Kids, you know you're on to a winner. Evoking the inky block lettering you'll find in exercise books (again, are they still a thing? Or is it all iPads in classrooms now?), this set comes with uppercase and lowercase letters, plus a whole host of numbers and symbols. Best of all, you can grab it for free.

Read some of our other great posts, like:

• Great free handwriting fonts
• Typography rules and terms every designer must know
• 10 different fonts to give your projects a unique edge

View the full article

WordPress is the perfect platform for just about any website, from a simple portfolio page to an online store. To get the look and functionality that your site needs, you can count on professionally crafted WordPress.org themes from TeslaThemes. Get lifetime access for just $39 (approx £30).

TeslaThemes is known for its high quality, premium WordPress themes. It's already crafted more than 66 incredible themes and is adding new options all the time. With lifetime access, you'll be able to make use of any of these themes any time you want. Plus you'll get full HTML documentation, step-by-step instructions, plugins, and customisable PSD files to make them work exactly how you want.

If you want a lifetime’s worth of the expert craftsmanship of TeslaThemes, you can get the collection now for 84% off. That makes your total just $39 (approx £30). It's a great price for a must-have resource for anyone building a WordPress.org site, so grab it today!

View the full article

JavaScript started its life as a browser-based language used for adding interactivity to web pages, but it has evolved tremendously over the past few years. Once Node.js enabled JavaScript to be run on the server, it opened up a world of possibilities, and more language innovations were inevitable.

As the language grew, these evolutionary stepping stones led to the next major version of JavaScript: ECMAScript 2015 (previously known as ES6). Along with this new version came a new release cycle. After its major update in 2015, the JavaScript language will now start seeing smaller updates every year, allowing it to keep evolving through smaller, more frequent iterations.

Let’s take a look at some of my favourite JavaScript tips, tricks and tools. These will give you some web design inspiration and they're sure to blow your mind, especially if you haven’t kept up with how JavaScript has grown up over the years. These tools are split into different themes – navigate to the page you want using the drop-down menu above.

01. Write tomorrow's JavaScript today with Babel

Babel allows developers to write code using the latest version of JavaScript without sacrificing compatibility with older browsers

Not all browsers understand ES2015 code yet, so in order to use the latest features of the language today, we need a tool like Babel. This transforms ES2015 code into normal ES5 JavaScript code that all browsers are able to interpret. It is common for developers to include Babel in their deployment process through build systems such as gulp or webpack.

This approach allows devs to use the latest tech while ensuring their apps remain compatible with old browser versions, but only at the deployment stage.

02. Explore new ways of declaring variables

In ES2015, JavaScript introduced two new ways of declaring variables: let and const. let is used when a variable will be reassigned, whereas const keeps a variable from being reassigned. Note that using const does not freeze arrays and objects, and it doesn’t stop properties from being mutated. Instead, it just keeps the variable itself from being reassigned.

The main benefit that both let and const deliver over var is that when using var your variables get scoped to the top of the current function, therefore making the variable available to the whole function. In contrast, let and const are scoped to their closest block, allowing developers to declare variables within if, while, for and even switch blocks, without worrying about the variable scope leaking outside of that context.

JavaScript is among the fastest growing programming languages

03. Use arrow functions to keep 'this' intact

Another feature that’s been added to JavaScript recently is arrow functions. These have the ability to keep the this context intact, especially when using it within callbacks that might get called from somewhere else (i.e. adding an event listener with jQuery, and so on). Essentially, arrow functions replace the need to add .bind(this) at the end of a function declaration.

There are two main ways of writing arrow functions: one-liners and multiple-liners. One-liners have only one expression and return the value of that given expression, without the need for curly braces. Multiple-liners, on the other hand, have curly braces and the return keyword must be used explicitly.

04. Use promises to avoid a callback can of worms

JavaScript does a lot of its operations asynchronously, so passing callback functions while waiting for other things to happen is a pretty standard pattern. The problem begins, though, when you’re executing an async action that will trigger another async action, and so forth. You’ll likely be passing many nested callback functions, which will make the code cluttered and harder to read.

Promises solve this problem by helping you execute code in the right order, in a concise manner, while keeping operations asynchronous. The API is pretty neat: you tell the code to do something, then something else, then something else – and you’re even able to catch errors along the way.

Learn JavaScript for free and stay up to date with the latest news on JavaScript.com

Next page: Functional programming tips

05. Replace 'for' loops with 'map' to keep things simple

Let’s pretend we have an array of numbers and we’d like to produce another array by doubling all of the numbers from the first array. One way to do this is to declare an empty array, write a for loop, and set a number in the second array by looking up the index on the first array and doubling it.

 Or we could use a more concise solution by mapping an array to another array:

06. Replace 'for' loops with 'filter'

This time, let’s pretend we have an array of numbers and we’d like to produce another array containing only the even numbers from the first array. Again, one way of doing this would be to declare an empty array, write a for loop, and write an if statement to check if the number at the index is even (for example).

Or, we could use the filter method available for arrays:

07. Use 'reduce' instead of 'for' loops

For this exercise, let’s calculate the sum of all of the numbers in an array. One way to do this would be to declare a variable that has zero as its initial value. Then, we would write a for loop and traverse our array, taking each number and adding it to our newly created variable. 

Or we could use the reduce method:

Of course, we could combine all three concepts by multiplying all the numbers by 7 and adding all the numbers that are smaller than 20:

08. Take advantage of immutability

Data immutability is a common concept in functional languages. Immutable data allows programs to detect changes early on by comparing object references, instead of having to continually check and iterate through objects to see if we need to refresh the data on the screen.

Since, by default, objects and arrays are not immutable in JavaScript, there is a library to help accomplish this. It’s called Immutable.js and it was developed and open-sourced by an engineering team at Facebook.

Next page: Server-side JavaScript with Node.js

09. Node.js: Avoid switching language context

This platform for developing server-side web apps has opened up a world of new possibilities

Node.js is what allows JavaScript to be used on the server side. This has some interesting side effects, like making developers crazy-productive because they don’t have to change the language context when switching back and forth between client and server code.

It also allows libraries to be shared between the client and the server, which decreases the amount of duplicate code one has to write.

10. NPM: The world's largest package manager

With over 300 thousand packages, npm (the node package manager) has become the biggest package manager in the world, containing more packages than Java’s Maven Central Repository, PHP’s Packagist, and even .NET’s nuget. Plus, the level of collaboration that happens within the community means writing an application has never been so convenient.

• 10 really useful responsive web design tutorials

11. NPM: Bring in frontend dependencies

This has grown into the world’s largest package manager

Over the years, there have been many recommended practices around bringing in external dependencies into your local codebase. What are the best practices for using libraries like Bootstrap or Zurb Foundation? Including them from a central CDN or downloading everything manually from their website?

With the rise of the npm, an increasing number of developers are getting rid of alternative solutions like Bower and simply sticking to npm for everything. Yes, even CSS dependencies.

Next page: JavaScript UI frameworks and libraries

12. Angular: One framework to rule them all

Angular is a JavaScript framework maintained by Google with the help of the open-source community. The first version of the framework was based on an MVClike pattern, cleaning up a lot of the clutter we saw in larger codebases that relied on the jQuery-style of programming. The newest version, Angular 2, has taken things to the next level, transforming Angular into a full platform that allows development of not only web UIs, but also native mobile development and more!

13. React: The view library that shook the UI world

This JavaScript framework is maintained by a team at Google with the help of the open-source community, and the latest version makes it suitable for native mobile development

React is a view library. This might sound small and innocent, but don’t underestimate it, as this little library put a dent in the whole UI development world. When React launched, it garnered contrasting opinions from veteran web developers. Fortunately, the Facebook engineering team knew it was on to something. Applications written with React carry a component-based architecture, keeping things small and composable. It often adopts functional paradigms to solve problems.

14. Ember: What if Ruby on Rails spoke JavaScript?

Opinionated framework Ember.js has the world’s cutest framework mascot: Tomster

If you’ve ever used Ruby on Rails to write a web app, you’ll know it uses the convention-over-configuration paradigm. This means it’s very opinionated about how apps should be written, which is exactly what the team behind Ember delivers for JS developers. Ember is a very complete framework with predictable development practices. This makes it easy to use all the best practices while writing applications.

15. Redux: State of management for all

One of the hardest parts of writing apps with highly dynamic user interfaces is keeping up with the application’s state. This is the problem the Redux library addresses. Redux is commonly used alongside React and is slowly being adopted by the Angular community. It helps you write applications that behave consistently and it offers a great developer experience. So if you’re writing an app that might become very large, you should consider using Redux from the get-go.

Next page: Other fun JavaScript features

16. Try visual regression testing with PhantomCSS

Every developer that’s been around for long enough has accidentally pushed a bug to production at one point or another. There’s no shame in that. Especially with UI development, it’s hard to prevent errors within CSS and HTML markup. Or is it? It turns out there is a package called PhantomCSS that helps with visual regression testing. It works by taking screenshots of before and after changes and calculating the difference between the two images.

17. Go beyond 'console.log'

Using console.log() to display data in the console while writing JavaScript apps is pretty common, but did you know you can use other console methods – such as dir() and table() – to help you visualise data while developing? 

That’s right; for a more interactive way of visualising objects in the console, use console.dir(object). If you have an array of objects you’d like to visualise, you can use console.table(array) to create a beautifully formatted table displaying all your data. Much easier on the eyes.

18. Use 'debugger'

One feature that often gets overlooked by developers is the debugger keyword. Instead of using console.log() to do some pseudo-debugging, simply add the debugger and modern browsers like Google Chrome will add a breakpoint so you can have a deeper look at your app’s state, including all local variables.

19. Remember semicolons are optional

Did you know that semicolons are (mostly) optional in JavaScript? The official JavaScript language specification has a feature called automatic semicolon insertion (ASI) that has caused riots within the community – pitchforks included. The reality is that an increasing number of developers are dropping semicolons in their JavaScript code, mostly due to personal preference. If that’s something you’re interested in doing, be sure to use a code linter such as ESLint to help you avoid some bugs and pitfalls.

20. Have a strict-typed codebase

A project by Facebook, Flow uses type inference to find bugs

An argument that some devs coming from other languages like to use against writing large-scale JavaScript apps is the lack of a strict type system. If that was only reason that kept them from migrating, it’s time for them to reconsider! 

There are two main projects that add an optional strict-type system to JavaScript: Flow, which was developed at Facebook, and TypeScript, developed at Microsoft. While using different strategies, both these projects aim to add catch bugs early by adding a JavaScript-friendly type system to applications.

This article was originally published in net magazine issue 285. Buy it here.

Related articles:

• 12 must-have code testing tools
• 5 hot new ways to use JavaScript
• 20 top examples of JavaScript

View the full article

Motion design is a necessary skill for the modern web. With web animation thriving, everyone from UX designers to front-end developers needs an appreciation for what motion can add to their work.

The character and energy that motion brings to an app or system interface works wonderfully on the web, too. Motion is a valuable interaction design tool. These are exciting times! 

So how can we develop an eye for motion and put traditional animation principles into practice for web design?

Great interface animation is useful, conveys information and does it with restraint and style. That's a tall order, but it's not out of reach. Restraint and style is where motion design skills come in. Well designed motion keeps our audience focused on the quality experience instead of distracting them with awkward bells and whistles.

Classic animation principles

Web animations are enticing to visitors

The bible of animation, if there were one, would be The Illusion of Life by Disney animators Ollie Johnston and Frank Thomas. This book features the 12 principles of animation by which Disney imitated life in its animated films.

These principles are time-tested, and even though they're written for an entirely different medium, we can apply them to animated interactions with great results. Learning to identify each of these principles will help you develop an eye for animation and give you a basis for evaluating and designing interactions. 

The 12 classic principles are: squash and stretch, anticipation, staging, straight ahead and pose to pose, follow through, slow in and slow out, arcs, secondary action, timing, exaggeration, solid drawing and appeal.

They don't all apply equally to our efforts in interface animation, but it's still helpful to know what each entails. We'll take a closer look at the three principles that are particularly key to interface animations: timing, secondary action and follow through.

Web animation timing and spacing

The bouncy motion of the dots in Dots conveys an energetic playfulness and creates momentum

My improv teacher always tells us that timing is the key to comedy. As it happens, timing is also the key to animation. In animation, timing is all about how long an action takes.

In the classic text, it's said that correct timing makes an object appear to obey the laws of physics. It gives cues as to the weight of an object and which forces have acted upon it. When it comes to interface animation, our goal isn't always to replicate the physical world, though. We tend to focus on the aspect of timing that establishes an object's 'personality'. So much can be communicated through timing!

Learn more about interactive web animation with award-winning SVG specialist Chris Gannon, at Generate London

For web animation, spacing comes down to the easing (the timing function) that we apply to an animating property. Easing determines how speed changes occur across the duration of an animation. That's how we indicate mood and personality. The duration of an animation also plays a role here, but the easing does most of the talking.

Strong bouncy timing, like the motion of the dots in the Dots game, conveys an energetic, playful feeling. It can often feel even a bit childish at times. Scroll down on the game's website for a short animation and look closely at the way the dots move – when they fall into place they bounce back up a little. The bounce is short, which informs us the dots have some weight to them.

The animating object moves the same distance in each frame, to give a steady speed

At the other extreme, linear easing appears mechanical and lacks life. Linear motion holds a constant speed across the entire duration of the motion so there's no slowing down or speeding up at all. That's impossible in the real world, thanks to things like gravity! Linear easing communicates nothing useful about the mass or nature of the moving object.

The funny thing about timing is that despite its potential to communicate, and all the effort we might devote to choosing it, all animations have to happen quickly. One of the biggest motion design crimes out there is to make your UI animations too slow. It takes practice to get timing right, but the more you do it, the better you'll get. Prototyping animations is very effective for getting your timing down.

Secondary action in web animation

The 3D rotation part of the form-expanding animation in the Checkout flow is an example of secondary action

Secondary action is additional animation that complements, or occurs as a reaction to, the primary animation. In traditional animation, this might be something like a character whistling or moving her arms around while she walks. In interfaces, it's how nearby elements move in reaction to the main motion.

Websites and apps can't whistle or move their arms, so the opportunities for secondary action aren't always as obvious. However, they do have related elements and some elements that move together. Those are prime candidates for secondary action.

Twitter's heart animation is a good example of secondary action. The main action is the heart scaling up. The circles and little particles that fly out around it are secondary actions that enhance the heart's effect.

Follow through and overlapping action online

Follow through and overlapping action are two closely related concepts that deal with how an object comes to a stop. Follow through is the motion of overshooting the final destination by a small amount and then coming back to settle into place.

In the Slides changelog timeline, each item in the list shoots out a little further than its destination before settling back to a stop. That's follow through in action.

Similarly, overlapping action is the concept that not all parts of an object come to a stop at the same time. For example, a dog's floppy ears keep moving forward even after their body has come to a stop.

Unless you're working with some sort of physics engine, you'll be faking or approximating these concepts with easing choices or keyframe placement. There's nothing wrong with that. Hinting at these familiar concepts with any type of animation goes a long way to creating a more realistic feeling.

Next page: Putting animation principles into web design

Putting animation principles into web design

To start with, everything in our example moves in and animates at once, like one solid connected object

It's fun to read about these principles, but they're more useful when we put them into action. Let's take a stab at putting these techniques into practice with some CSS animation.

Our example is an animated alert box that confirms your booking at a fictitious cat café. It animates onto the screen to let us know our booking task has successfully been completed.

Our starting point is a bit, well, lacking. Our alert box does the bare minimum: it animates into view, followed by the associated button, which fades in below it. There's nothing all that compelling about it... at least not yet.

Set the timing of your web animation

This is the easing our example starts with, using the ease-out keyword in CSS

Contrast this with our ease-out easing. The curve extends past the top, creating the follow through

Timing is always a good one to start with. Our alert box is using the ease-out timing function, so it comes in at a higher speed and then slows into place in a low-key kind of way. Not bad, but it's still a little lacklustre considering the task at hand.

This is the last step in our transaction. We've just finished our task and booked something fun and exciting (at least, if you like cats). A little more energy and excitement is in order for this situation! A change to our easing will help take care of that.

We'll keep the general feel of an ease-out, but we'll amp it up with a custom cubic Bézier function created on cubic-bezier.com. We'll have our new easing shoot out past the end point and then snap back into place.

Our new animation now reads:

With that change we've accomplished two things: We've created follow through action by having our box overshoot its destination. We've made the motion feel more energetic by using a curve with more drastic speed changes. In our example of how it looks now it's still too slow, but we'll address that at the end.

Add secondary action to your web animation

Our button is a prime candidate for some secondary action. It's related to our main alert box, and it can appear slightly afterwards. Its delayed fade-in hints at some secondary action, but we could create a more dramatic effect by having it slide out from under the body of the alert box, as if it's sliding down into place as a reaction to the alert box's upward motion.

To accomplish this, we'll add one set of keyframes for that slide down action:

Add that animation to our button in addition to its fading in, with slight delays on both so they happen when the main motion has mostly completed:

It's already looking like a much more sophisticated and energetic animation!

Add some overlap to the animation

All of the content within our alert box is moving at the same rate, like it's a flat piece of glass with the text etched onto it. This doesn't fit with our goal of creating an energetic, fun mood with the motion. Animating the text inside the box separately will create some overlapping action to give the motion more life and create the effect of energy transferring from one element to another.

To accomplish this, I'll add one more set of keyframes for a less pronounced slide in. I'll apply these to the h2, h3 and the paragraph inside the box, each with a delay. The new set of keyframes is a shortened version of our slideIn animation:

All three elements are assigned that animation with varying delays:

Our example is really starting to shape up now.

Sass variables to manage delays and durations

Sass can save you some headaches when it comes to adjusting related durations and delays. I like to set my related durations and delays relative to a global Sass variable – like $dur:.6s, for example – then multiply that variable as needed for related delays and durations. It's a huge time-saver.

Add final touches and speed the whole thing up

In our final version, the alert box container, text content and button animate in with complimentary motion

We tend to keep animations slower than they need to be while we're designing them. And for good reason: we need to see what's happening in order to make our design decisions.

It takes much less time to 'read' an animation than it does to design it, though. Our eyes and brains work very quickly when reading motion, so speeding up our animations is almost always necessary – sometimes as drastically as half the speed. Don't be shy in chopping these durations down.

To finish off our example, we'll cut down the durations and adjust the delays accordingly. Optionally, we can also add in some Sass variables for the cubic Bézier values and durations to tidy things up. See our example in its final state.

After those few tweaks, our alert box animation is looking much more polished. All the motion involved has been aligned to the message we wanted to convey, using a few of the classic animation principles.

These techniques, along with the other eight in the list, can be applied to nearly any web animation task. The more we put them into practice, the better our motion design skills will become.

Want to know more about web animation? Award-winning SVG specialist Chris Gannon will talk about interactive web animation at Generate London on 21/22 September, while Aaron Gustafson will explore adaptive interfaces and demonstrate how they smartly morph to meet their users’ needs. The two-day/one-track conference will also cover conversational interfaces, web performance, accessibility, building interfaces for the next billion and much more. If you want to stay ahead of the game with advice from the industry's best, reserve your spot today!

This article was originally published in net magazine. 

Related articles:

• Understand the 12 principles of animation
• 10 golden rules for responsive SVGs
• Happy 30th birthday GIF!

View the full article

You're reading Designing Content Upgrade Signup Forms that Grab Attention, originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

The best email opt-in forms use a lead magnet to draw attention and gather emails. You can spend weeks tweaking a signup form but the biggest factor is usually the content offer. There’s a special type of lead magnet called a content upgrade which gets placed on a relevant piece of content. This usually converts much higher and it’s […]

View the full article

Having started life as a private label brand in 2009, watch designer BREDA has come a long way over the years and now operates out of a watch design studio in Dallas, Texas. In fact it has even made big steps forwards during the last 12 months, with its watches addressing some of the design and material flaws we pointed out in our BREDA Valor watches review.

As ever, BREDA is a brand that focuses on creating premium watch designs within an accessible price range, so it's a relief to see that the craftsmanship is finally on par with its reasonable pricing.

The watches we were given to review come from BREDA's Bresson range. While we found the Valor selection of watches a little lacking in terms of the strap material quality, this isn't the case with the bold and chunky Bresson models. Each comes with thick, genuine leather straps that look more than capable of standing up to being repeatedly fastened day in, day out.

The strap material is an improvement on BREDA's previous watches

The centrepiece of a Bresson watch is its durable case. Just like the stitchless strap, the case has a robust feel and weight to it and is comfortable to wear. And while it's chunky, you won't feel one arm weighing conspicuously more than the other while you're wearing it.

Taking its name from photographer Henri Cartier-Bresson, the Bresson watch "captures elements from the lens of a camera." Time itself is displayed with an easy to read matte dial and a white watch face with embossed minute markers. The result is a design that has an elegant functionality that both looks good and meets the practical demands of the user.

The only issue we ran into while reviewing this range was a usability flaw with the buckle. On one model the buckle unclipped itself while the strap was being fastened, but this was easily clipped back into place and the watch continues to be worn just fine.

The stylish packaging keeps the watches nice and safe

Bresson watches come in an appropriately minimalist cardboard box and sleeve that store the timepieces flat to keep them safe. This is great as it keeps the leather strap in mint condition. Other BREDA watches are supplied in a square box that wraps the strap around internal packaging, so it's good to see that the attention to detail is carried over from the watch to how it's presented.

Retailing at $90 (or roughly £70), the Bresson watches deliver much more than other BREDA ranges at just a fractionally higher price. With these timepieces you get value for money and quality craftsmanship to boot. The Bresson range could easily suit day to day wear or be saved for special occasions, so be sure to check it out.

Related articles:

• The 6 best VR headsets for 2017
• What if Apple made a Surface Book?
• Review: Adobe Creative Cloud 2017

View the full article

Microsoft said Wednesday it would extend its Edge bug bounty program indefinitely.

View the full article

Pairing font is a constant challenge for designers and typographers. Putting the wrong fonts together can create a discordant look that ruins a design, while letters that share similar themes or measures can bring a project together. To help creatives match their fonts successfully, Fontjoy has turned to deep learning to make the whole process quicker than ever.

Created by designer and engineer Jack Qiao, Fontjoy builds on a similar font mapping tool released earlier this year. By extracting the feature vectors from images of nearly 2,000 fonts, Qiao was able to create a formula that can systematically sift through styles and find fonts that share key characteristics.

Users click on a letter to choose a font

On Fontjoy you can play around with font pairings by selecting styles from the options in the sidebar. Simply choose how similar or contrasting you want the fonts to be by adjusting a scale at the top of the site, then click generate to instantly find a match.

The controls take a bit of getting used to, but once you get the hang of Fontjoy you'll be able to lock you favourite fonts and experiment with pairings in no time.

Fontjoy saves an age-old problem for designers and typographers

For experienced designers Fontjoy might prove to be little more than a starting point for your own experimentation, but for beginners the site is a useful tool in understanding how font styles can work together or against each other. And with Qiao explaining how he created the mapping algorithm on Github, there's even some insights for those who want to start getting into machine learning.

Related articles:

• Great uses of typography in portfolios
• 10 different fonts to give your projects a unique edge
• Genius map tool sorts fonts by how they look

View the full article