Archive for month: October, 2017

Original Source: http://feedproxy.google.com/~r/tympanus/~3/wUMnPEtZSZM/

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

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

Bubbly-bg

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

Microscope

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

Moocha

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

Calcflow

An intuitive VR interface for mathematical visualizations.

Check it out

Hyperpixel

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

Check it out

TR-101

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.

Original Source: https://www.smashingmagazine.com/2017/10/functional-minimal-web-design/

 

 

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.

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.

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/JFQlbSi2gho/

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

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

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

ZenDesk

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

Museum of Science + Industry

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

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

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

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

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

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

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.