Collective #355

Original Source:


Inspirational Website of the Week: Peter Van Alphen

An interesting navigation with lots of attention to detail. Our pick this week.

Get inspired


Our Sponsor
Project management is better when it’s visual

Dapulse is the next generation of visual tools, built specifically for designers and developers.

Check it out


CSS Grid Challenge: Winners and Templates

The winners of Smashing Magazine’s CSS Grid challenge and the great resulting templates are out.

Check it out


Vue.js Style Guide (beta)

The official style guide for Vue-specific code.

Check it out


React Static

A progressive static-site framework for React.

Check it out


Super Mario Bros in JavaScript

A great video series on how to implement Super Mario Bros in JavaScript. By Meth Meth Method.

Watch it



Use Vue components in your React app or use React components in your Vue app with this library.

Check it out



GSDevTools offers a visual UI for interacting with and debugging GSAP animations.

Check it out


UI Avatars

With UI Avatars’ simple-to-use API you can generate avatars with initials from names.

Check it out


The Intl.PluralRules API

Mathias Bynens shows how to use the new Intl.PluralRules API for pluralization.

Read it


URL to PDF Microservice

A self-hosted service for rendering receipts, invoices, or any content in PDF.

Check it out


Reduce App

A Mac app for reducing the file size of Sketch files. Made by the team behind Flawless App.

Check it out


Creating Vue.js Transitions & Animation: Live Examples

Nicolas Udy shows how to create some practical animations and transitions in Vue.js.

Read it


Web Components: The Long Game

Great read by Alex Russell on Web Components.

Read it



Pageclip lets you collect info from users without a server.

Check it out


Dropbox Design

What an evolution! The new Dropbox design is picking up on some new trends with expressive typography and vibrant colors.

Check it out


The future of accessibility for custom elements

Rob Dodson writes about how to ensure that custom elements are semantic and accessible.

Read it


Designing A Realistic Chronograph Watch In Sketch

A true master class in Sketch by Nikola Lazarević.

Read it


React, Inline Functions, and Performance

Ryan Florence’s in-depth explanation of inline functions in React.

Read it


Interactive Vim tutorial

Learn Vim interactively with this fun tutorial.

Check it out


The repo of the source code and documentation powering

Check it out


Await and Async Explained with Diagrams and Examples

Nikolay Grozev’s great visual guide to Await and Async.

Read it

Collective #355 was written by Pedro Botelho and published on Codrops.

Usability as a Design Consideration

Original Source:

Inspired Magazine
Inspired Magazine – creativity & inspiration daily

Designers understand the importance of utility Sometimes it can be difficult to explain to non-designers, such as marketing managers, why utility is more important than aesthetics.

That’s one of the biggest challenges every designer faces when designing user interfaces for software and websites, where the work is subject to approval from higher level marketing executives.

Of course it is important to try and get the best looking result that you can, but not if it means getting in the way of what the user wants to achieve when visiting your website or using software designed by you.

Usability is a dynamic field, the rules are not static

There are some old usability rules that people are clinging to that may no longer be relevant, because the majority of people are now either using wide screen monitors or mobile devices. Some users also have multiple monitors attached to a single device.

We need to think about how to create acceptable outcomes for all these different display types. If anyone feels like they’ve been left out, overlooked, or ignored, you can be certain it will generate complaints. This looks bad for you as a designer, even if neglecting to support a certain display type wasn’t your decision.

Accessibility is extremely important as well

The one thing that’s even worse than somebody feeling excluded is somebody feeling that they’ve been discriminated against.

Because accessibility is so easy to include these days, there’s really no excuse not to do it. Some managers may despair at the additional time spent catering to a “fringe group” that they don’t see any value in supporting.

When you are faced with that attitude, it’s worth pointing out that approximately 10 percent of the population has a disability. Even if the manager can’t see the value of accessibility from simply a fairness point of view, they should at least understand the economic impact of alienating up to 10 percent of the potential market.

Taking the time to do things properly will be noticed and appreciated by those who benefit from you doing so. They may even talk about it on social media, which can yield valuable PR points for the company.

Naturally the opposite is also a possibility. If you blatantly neglect accessibility and it makes the wrong person angry, their social media diatribe may well have solid repercussions for you. If a competitor is providing better accessibility than you are, they may gain some of the market share that may otherwise have gone to you.

Aim for simplicity

When it comes to GUI design, it seems many people are tempted to show off how complex they can make the design, believing people will be impressed by this. Produce something special, and initially they may really be impressed.

It becomes a problem when that initial good impression is squandered due to poor usability. The user becomes frustrated and is actually likely to be more angry than if you hadn’t created a strong first impression.

This is because your fancy visual extravaganza raised their expectations, and then you failed to deliver on the promise. A bit like the F35 Joint Strike Fighter.

Expending the maximum amount of the project time and budget on developing good usability is always the safest policy. At the heart of good usability design is simplicity.

Make everything easy for the user, and they won’t become frustrated. If they don’t become frustrated, they won’t give up on your site and look for solutions elsewhere.

Conventions exist for a reason

Everyone wants to express some creative originality, but be careful when your desire for originality begins to cross over well-established conventions. If you suddenly flip the rules, it can lead to confusion, and confusion is not a desirable outcome.

In no way does that mean you should follow the herd. Trends and fads can be risky to follow. Also it’s not sensible to follow a trend that you didn’t set. Being perceived as a follower is not a good perception.

What you do need to do is be aware of what long standing conventions exist and try to not digress too far from those. These conventions have created an expectation for users, and it’s crucial to understand that when reality does not meet expectation, the usual result is disappointment or bewilderment.

Never make your users do any kind of thinking

This is actually the logical conclusion of using conventions and keeping things simple. You do all the thinking so the user doesn’t have to.

Why is it bad if the user is forced to think? Because it slows things down and breaks immersion in whatever it is they are doing. You want the user to be fully immersed in their task, not thinking about what they’re doing. That counts double if it’s a commercial site and your aim is for the user to buy something from you.

If you’ve done a good job of creating a practical design, everything should be intuitive, with no need for any thinking to be done. Part of your job as a designer is to anticipate what the user is going to try to accomplish and do whatever you can to facilitate that accomplishment.

Common things to watch for include:

Things that look clickable but aren’t
Things that don’t look clickable but are
Confusing or poorly worded instructions
Objects overlapping on screen
Excessive delay between click and response
Improper tab order
Blocking normal operation of input devices
Expecting desktop interaction from mobile devices

Your designs are your reputation

Every design you create needs to work well, and this is more important than how the design looks. When a design works properly, it will stand out from the vast majority of designs that actually don’t work at all well.

So remember this when you are designing your next interface, because your reputation stands or falls on the quality of the usability you have incorporated into it.

This post Usability as a Design Consideration was written by Catalin Zorzini and first appearedon Inspired Magazine.

These lost type symbols need to make a comeback

Original Source:

Where would we be without punctuation marks? In a land of grammatical misunderstandings, that's where! (See, we're only three sentences into this article and punctuation is already helping to make sense of everything.) 

However there are some typographic symbols that have fallen out of fashion, and it's the mission of the Progressive Punctuation movement to bring them back.

Chances are you've sometimes wished that the forgotten symbols dusted off by Progressive Punctuation – such as the sarcasm mark – were more widely used. After all, written communication is a complex thing, and it can be easy to misinterpret what a person means simply by reading their words alone.

As Progressive Punctuation explains on its site, "nuances like sarcasm, certitude, and irony can be difficult to convey because of the gap between our expression in verbal language versus written language."

50 top typography tutorials

So what are these mysterious symbols, and how can they help us? The full list of 14 symbols on the Progressive Punctuation site covers emotions and ideas such as sarcasm, doubt, and irony.

You could argue that if a person wants to convey these feelings then they should rely on their words instead of their punctuation, but we've all probably had a straightforward text message or email completely misinterpreted at some point because they read differently to how the writer intended. Plus, they look more professional than emoji.

The sarcmark could come in handy when making jokes on the internet

On the Progressive Punctuation site you can explore the meanings behind all of these forgotten typographic symbols, as well as finding out who invented them and examples of when they should be used.

By raising awareness of these symbols, Progressive Punctuation wants to bring them back into the mainstream and get typographers to include them in their work.

The site is also interested in hearing about any symbols it has missed. So if you know about one that isn't yet on the homepage, or perhaps you've even invented your own, be sure to send Progressive Punctuation an email to let it know all about it.

Related articles:

10 typographic mistakes everyone makes (including us)100 amazing Adobe Illustrator tutorialsThe 28 best typography apps

Sliced Dual Image Layout

Original Source:

Today we’d like to share some layouts with a sliced image look with you. The idea is to show some text elements in a grid layout and change the content and images in a slideshow fashion. For the background image slices, we created a little plugin that has a couple of additonal options. For making an interesting transition, we use a glitch effect. This effect we also apply to some of the text.


This demo is kindly sponsored by: FullStory: See Every Click, Swipe, and Scroll.

Attention: We use a couple of new CSS properties, like CSS grid and clip-path which will only work in modern browsers.

Have a look at the demo screenshots:




We hope you enjoy these layouts and find them useful!

References and Credits

anime.js by Julian Garnier
Images by
imagesLoaded by Dave DeSandro
Charming.js by Yuan Qing

Sliced Dual Image Layout was written by Mary Lou and published on Codrops.

Designing A Realistic Chronograph Watch In Sketch

Original Source:



If you’re into wristwatches, like me, and are also a fan of the Sketch app (or just want to get better at it), then this is the tutorial for you. In it, you will learn how to create a very realistic and detailed vector illustration of a watch using basic shapes, layer styles and cool Sketch functions such as “Rotate Copies” and “Make Grid.”

Designing A Realistic Chronograph Watch In Sketch

You’ll learn how to apply multiple shadows and how to use gradients, and you will see how objects can be rotated and duplicated in special ways. No bitmap images will be used, which means you will be able to easily adapt the final image to different sizes and resolutions.

The post Designing A Realistic Chronograph Watch In Sketch appeared first on Smashing Magazine.

Collective #354

Original Source:


Our Sponsor
Project management tools are obsolete

Dapulse is the next generation of visual tools, built for designers and developers. See what everyone on your team is working on in a single glance.

Check it out


Teachable machine

A Google A.I. Experiment where you can teach a machine using your camera. View the GitHub repo here.

Check it out


Moving Letters

A fantastic collection of animated letters and typography effects by Tobias Ahlin.

Check it out



Micromodal.js is a lightweight, configurable and a11y-enabled modal JavaScript library.

Check it out


Using Webfonts

An excerpt from Chapter 2 of Bram Stein’s new book, “Webfont Handbook”.

Read it


Full-Width Panel Expansion, CSS only

A CSS only expanding panel gallery demo by Shaw.

Check it out



A tiny script for creating bubbly backgrounds.

Check it out


Fast Neural Style Transfer with Deeplearn.JS

A demo of a browser based “Fast Neural Style Transfer” algorithm using the deeplearn.js library.

Check it out


Logo Crunch

Logo Crunch is a multi-resolution logo maker that uses computer vision to make your high-res logo legible at lower resolutions.

Check it out


Fundamentals of Responsive Images

Marc Drummond’s guide on responsive images.

Read it


How to Code: Collision Detection Part II

Second part of a video series on making realistic looking collisions in JavaScript.

Watch it


The 100% correct way to structure a React app (or why there’s no such thing)

David Gilbertson shares his insights and shows how he structures his React apps.

Read it



A Web Audio and WebGL experiment by Tim Pulver using cables and tone.js.

Check it out


Savage Animals Vector Bundle (AI, PSD)

Tortugastudio designed these versatile animal vectors.

Get it


Sticky Sidebar

A JavaScript plugin for making sticky sidebars. Made by Ahmed Bouhuolia.

Check it out



A search engine for online courses from edX, Coursera, Udacity and more. Made by Matt Evenson.

Check it out


Intriguing CSS Level 4 Selectors

Dennis Gaebel shows how powerful the new CSS selectors are.

Read it



An intuitive VR interface for mathematical visualizations.

Check it out



A great collection of well designed landing pages for your inspiration.

Check it out



A synth drum machine by Ohad Ron.

Check it out


Learning Python: From Zero to Hero

Learn Python from scratch in this essential guide by Leandro T.k.

Read it


Comic book style layout with CSS Grid

A great demo that shows how to make a comic book like layout with CSS grid. By Ren Aysha.

Check it out


Stripe Elements

Stripe Elements are rich, pre-built UI components that help you create checkout flows across desktop and mobile.

Check it out


From Our Blog
Sliced Dual Image Layout

Some layouts with sliced background images, slideshow functionality and glitch effect.

Check it out

Collective #354 was written by Pedro Botelho and published on Codrops.

8 Must Have WordPress Plugins for Site Optimization

Original Source:

WordPress is easily the platform which offers tons of customization options and packs the ease which allows anyone to create a website. Alongside it brings a variety of plugins that can get your website to the next level. Following are the must have WordPress plugins in 2017: 1.      OptinMonster Image OptinMonster is the frequently […]

The post 8 Must Have WordPress Plugins for Site Optimization appeared first on

Minimalistic Design With Large Impact: Functional Minimalism For Web Design

Original Source:



As web design focuses more and more on good user experience, designers need to create the most usable and attractive websites possible. Carefully applied minimalist principles can help designers make attractive and effective websites with fewer elements, simplifying and improving users’ interactions.

Minimal Design With Large Impact: Functional Minimalism For Web Design

In this article, I will discuss some examples of minimalism in web design, things to consider when designing minimalist interfaces, and explain why sometimes “less is more”. If you’d like to get more creative with your own designs, you can download and test Adobe XD, and get started right away.

The post Minimalistic Design With Large Impact: Functional Minimalism For Web Design appeared first on Smashing Magazine.

Non-Disclosure Agreements For Developers: What To Know Before You Sign

Original Source:



Most days, your goal as a developer is to design, develop and program awesome software. However, part of the job is also finding new clients, and you don’t want to be caught off guard by unexpected legal documents that come up while you’re establishing new clients.

Non-Disclosure Agreements For Developers: What To Know Before You Sign

The most common legal document you will be asked to sign when working on a website or app is a non-disclosure agreement (NDA). If you’re not sure whether to sign an NDA as a developer, this article will guide you to make an educated decision.

The post Non-Disclosure Agreements For Developers: What To Know Before You Sign appeared first on Smashing Magazine.

Beautiful Examples of Motion Design in Web Design

Original Source:

Motion design has seen a substantial rise to prominence within the web design industry over the last few years. Most landing pages and award-winning website designs incorporate some aspect of motion, whether that be through illustrations, video, animated GIFs, or even subtle custom emotes.

Some websites even use motion design with their products, for example Apple who use vertical scrolling as a trigger for applying motion to their product mockups.

There are some remarkable examples which show just what can be achieved when applying elements of motion design to a website. In this article we are going to round up a selection of the very best.


Pipefy Motion Design in Web Design

Pipefy uses motion design in the hero section of its website. It displays a user interface demo of their product with a hypothetical user interacting with and showcasing the platform.


Figma Motion Design in Web Design

Figma’s main selling point is design collaboration. As such, it demos this using effective screen capture video footage in the hero section.


ZenDesk Motion Design in Web Design

ZenDesk’s Answer Bot is demoed on their website using a minimal and simple example of motion design.

Museum of Science + Industry

Museum of Science + Industry Motion Design in Web Design

The Museum of Science + Industry uses motion graphics and video in the hero section of their website to illustrate each active exhibition. It adds a great deal of visual interest and effect.


Adidas Motion Design in Web Design

Adidas Climazone’s landing page uses motion design via user scrolling as the trigger. As the the user makes their way down the page the graphics and images morph and change.

Stripe Sigma

Stripe Sigma Motion Design in Web Design

In possibly the most impressive example of all, Stripe uses motion design in multiple instances. The hero section uses a video to illustrate the product in action, while below a scrolling ticker of FAQ cards makes its way from right to left, changing color over time.


Snappd Motion Design in Web Design

Snappd’s homepage scrolls through a selection of video stories. When one lines up with the iPhone mockup, it triggers the video to play.


ZKIPSTER Motion Design in Web Design

ZKIPSTER uses one of the more traditional implementations of motion design: a full size background video. It does so with great effect, applying a filter on top for greater contrast and subtlety.


Shopify Motion Design in Web Design

Shopify uses motion through its product imagery. In this instance, the user’s scroll location is used as a trigger to expand the product mockup and reveal its complexity within the simple design.

An Interesting Day

An Interesting Day Motion Design in Web Design

The ‘An interesting Day’ website applies motion by implementing a parallax effect which tracks the point of the user’s cursor to produce a depth effect. It’s subtle but highly effective and satisfying to experience.