3D Particle Explorations

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

This set of demos explores 3D particle animations using three.js and easing. All of the particles and shapes in these demos are made from basic geometry/material/mesh sets in three.js, such as spheres, lines, and boxes.

The Concept

Making animations with a lot of small moving parts is a lot of fun. Applying different timing offsets and easings to each part or group can make for some interesting visualizations. And even though these can look great in 2D, adding subtle 3D perspective to your animations can make them even more visually appealing. Having the concept of a camera and 3D grid can also aid in the debugging and development of your animations. You can zoom in, zoom out, and view your animation from different perspectives to tune it perfectly.

Repeating animations like this is great for loader animations, backgrounds, and transitions. In these demos they are treated as site loader animations. I hope this inspires you to make your own 3D particle animations!

Benefits of three.js and a 3D Environment

Most of these animations could be made roughly comparable with something like SVG or 2D Canvas. However, adding subtle animations and positioning in a 3D perspective brings them to life. There are also performance benefits from working with three.js/WebGL. These animations only scratch the surface of what three.js is capable of. Custom geometries, materials, lighting, shadows, and shaders can take these to the next level. There is a lot of room to grow and expand from this fundamental starting point.

My goal with this set is to show what a baseline set of particle movements can achieve, with minimal flexing of three.js.

Debug Mode: Grid, Camera, and Timescale

To enter debug mode, click the debug icon in the top right. This will add a 3D grid to the scene, which gives a better sense of how everything is moving in 3D space. It adds camera controls, which allow you to zoom, rotate, and pan. And finally, a timescale slider is added to speed up, slow down, and pause the animation. This is useful for working on the timing and positioning of your animations.

#1: Rotating and Scaling Rings

This demo shows a series of rings that are scaling and rotating with slight offsets. The particles are also moving back and forth on the z-axis.


#2: Simplex Noise Lines

This demo shows a series of particles that form lines of two different colors. The particle position is being set by simplex noise, with tapered off magnitude near both edges. Over time, the lines rotate and move back and forth on the on z-axis.


#3: Circle Separations

This demo applies some simple physics to each particle. They all spawn in the center, and then push away from each other so that they all have their own space.


#4: Twisting Double Helix

This demo shows a double helix, almost like a simplified visualization of DNA. It is twisting and untwisting while rotating.


#5: Raindrops and Ripples

This demo shows a raindrop effect with rippling when they hit the surface of particles. The rain drops are made out of boxes that get stretched as they fall. When they hit, a ripple object is made that has a ring, and an invisible sphere that grows out that affects the particle positions and opacity.


#6: Spinning Fan

This demo shows three lines of particles that form a shallow cone shape. Each particle has an arc line with a randomized length trailing behind it.


#7: Square Lattice Blending

This demo shows boxes being stretched based on their position. The movement of each box is slightly offset. Four different color boxes are placed closely to each other and blended with additive blending to create the white color. As the boxes move, the colors lose their full overlap and reveal the underlying colors (red, green, blue, and magenta).


#8: Simplex Noise Particle System

This final demo uses a slightly different method for rendering the particles than the other demos. It uses THREE.BufferGeometry() and THREE.Points(), which allows us to render more particles at once and keep good performance. The particle movement is determined by simplex noise. Finally, additive blending is used to create a brighter effect when the particles overlap.


References and Credits

Robert Penner’s Easing Functions

3D Particle Explorations was written by Jack Rugile and published on Codrops.

10 Beautiful Colorful Logo Designs

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/dAPK-PZBsDo/

Colors play such a huge part in branding and logo design. They have the power to evoke emotion, attract attention, and present a recognizable brand to the world.

Almost every prominent logo design incorporates some element of color that is synonymous with their company. Think McDonald’s, Coca-Cola, Microsoft, YouTube – the list goes on. The way in which color is applied ranges anywhere from a small splash of color, to a gradient-heavy, multicolored design.

Wherever they lie in between these two extremes, there are a wide range of inspiring and differing examples that have been carefully executed to provide a unique identity.

In this article, we’re going to look at a selection of ten of the most impressive and well-executed examples of these colorful logo designs.

1. 14 Islands

colorful logo design 14 Islands

By applying opacity techniques and bright, positive colors, 14 Islands’ logo has encompassed an upbeat and playful style for the brand.

2. January Moon

colorful logo design January Moon

Utilizing primary colors against mundane grey, January Moon has produced a beautiful logo design which is eye-catching with juxtaposition throughout.

3. Petals

colorful logo design Petals

Using unusual color combinations, heavy gradients and three-dimensional techniques, this logo design is incredibly eye-catching and visually impressive.

4. Vi Novell

colorful logo design Vi Novell

Vi Novell’s logotype is fairly simple. However, the way in which it’s combined with colorful visuals and packaging makes it impressive.

5. Queuing App

colorful logo design Queuing App

This logo for Queuing app uses a beautiful, subtle red to pink gradient. It blends seamlessly with the curved logo mark and works perfectly on the app icon and in inverted form.

6. ShopAround

colorful logo design ShopAround

Using a striking color combination of bright yellow and pink, ShopAround has created a logo which is impactful and follows a unique direction in terms of layout and composition.

7. Primary

colorful logo design Primary

Primary’s logo mark is almost reminiscent of a marble or piece of artwork. It blends a number of colors and gradients to create a dynamic logo which pairs beautifully with the simple typography.

8. Z Logo

colorful logo design Z Logo

The simple vector strokes of this Z logo are perfectly accentuated by the pink-to-purple gradient against the black background.

9. Neighbourhood

colorful logo design Neighbourhood

Almost erring on the side of the brutalism trend, Neighbourhood’s logo uses bright graphics and colors, all overlapping and contained within the serif typographic mark.

10. Popfn

colorful logo design Popfn

Popfn’s logo uses bold colors and subtle gradients to produce a stunning neon-style mark with both depth and visual interaction in the form of an impossible triangle.

Awesome Web Design for Marvel Black Panther

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/WhVyM83A6iA/awesome-web-design-marvel-black-panther

Awesome Web Design for Marvel Black Panther

Awesome Web Design for Marvel Black Panther

Dec 14, 2017

Andriy Bata shared an awesome web design project for the upcoming Marvel movie Black Panther. There are so many cool things about this project but I couldn’t say if it was a concept or a real project. Nevertheless there are great examples of the future of web design with very editorial look. There is always the responsive aspect of it, with good translation from desktop to mobile. The only issue for me is always the fact that the desktop mocks are always a very fixed set of dimensions. That is never the case for the web. People have different screen resolutions, sizes and to also they use the browser window in different ways (full-screen, floating window…). That is always tricky and cause a bunch of edge cases for intricate designs like the one that Andriy just shared. 

For more information about Andriy Bata make sure to check out his Behance profile at https://www.behance.net/andrijbatadb5d

Web design

web design

Collective #374

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


Our Sponsor
ProjectHuddle: Live Feedback On Your Web Project

A revolutionary WordPress plugin to gather client feedback directly on top of your web project. Open source, white-label & cross-platform.

Check it out


Act now to save the internet as we know it

The internet as we know it will vanish if net neutrality gets compromised. Tim Berners-Lee urges us to act now to save it.

Read it


Understanding CSS Layout And The Block Formatting Context

Rachel Andrew explains existing and new ways to create a Block Formatting Context.

Read it



Microlink is a service that let’s you collect relevant information from any website.

Check it out


Design Principles

An open source resource that collects examples of design principles. By Ben Brignell.

Check it out


30 seconds of code

A curated collection of useful JavaScript snippets that you can understand in 30 seconds or less. By Angelos Chalaris.

Check it out


What Have You Made Today?

Chrome extension written with Vue to replace the default home page. Made by Tim Holman.

Check it out


Free Font: Odachi

A unique uppercase brush font by Mehmet Reha Tugcu.

Get it


Design Systems and CSS Grid

Stuart Robson shows how to add CSS Grid to an existing design system.

Read it


Keeping Parent Visible While Child in :focus

Chris Coyier shows how to solve a tricky :focus problem.

Read it


Real Particle Blob

Number three of Eli Fitch’s December WebGL experiments.

Check it out



A beautiful nebula demo by Samsy. Made with Three.js.

Check it out


The Joy Compiler

A tool for translating idiomatic Go into concise JavaScript that works in every browser.

Check it out


Epic Spinners

Some creative CSS only loader animations.

Check it out


Canvas – Beat

An audio and canvas experiment inspired by the Propellerheads Figure iOS App. Made by Kevin Boudot.

Check it out


Calendar with CSS Grid

Jonathan Snook shows how to lay out calendar events with CSS Grid.

Read it


Specificity Visualizer

A visual way to analyze the specificity of selectors in CSS. Made by Francesco Schwarz.

Check it out



A WebGL voxel sculpting application made by Josh Shadik.

Check it out


11 Things I Learned Reading the CSS Grid Specification

Ohans Emmanuel shares some very interesting details he learned while reading the CSS Grid spec.

Check it out


Free Font: ADC Somros

A beautiful Thai font project by Anupap Jaichumnan.

Get it



A dreamy Christmas experiment created by Misaki Nakano.

Check it out


xg – shuffle

A fantastic letter experiment in WebGL by AlteredQualia.

Check it out

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

Our 10 Favorite WordPress Themes of 2017

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

As we prepare to say goodbye to 2017, it’s only natural that we look back at the year that was in a variety of design genres. Today, we’ll focus on the top WordPress themes released during the year.

While there are many ways to judge themes (looks, features, popularity, etc.), we’re going to be bold and simply say that we really like the ones on this list. They represent the spectrum of what’s available, from free to commercial, from barebones to feature-rich.

Here they are, in no particular order. Let’s celebrate our 10 favorite WordPress themes of 2017!

Minimal 20/17

Minimal 20/17 is a free child theme of the default WordPress Twenty Seventeen theme. It takes away some of the “excessive” padding of its parent, introduces a wider layout and adds in a couple of extra templates. This will save anyone wanting to build on top of the original a few steps.

Minimal 20/17


WoodMart is a commercial theme that focuses on WooCommerce shops. What really sets it apart are the advanced navigation features. Large, customizable mega menus make it a great fit for sites with a lot of product categories. Ajax product filtering enables customers to find exactly what they’re looking for. There’s something for just about every need here.


WP Generic

WP Generic may be free, but it’s got the look and feature set of a commercial theme (of course, there is the obligatory pro version as well). The theme works with the WordPress Customizer, allowing you to tweak colors and other settings to fit your needs. Overall it’s a very attractive and easy-to-read theme.

WP Generic

Course Builder

Course Builder aims to take advantage of the rise in sites using WordPress as a LMS (Learning Management System). It works in conjunction with the LearnPress plugin to help you build and sell online or offline courses. This commercial theme comes with several LearnPress premium add-ons, including plugins that work with various payment gateways, WooCommerce, Paid Memberships Pro and more.

Course Builder


CustomPress is a free theme that prides itself on being easy to customize. It’s also built for speed (based on the Milligram CSS framework) and compatibility with mobile devices. The look is clean and uncluttered.



Flexblog is further proof that blogging is still an important part of what WordPress does. And this commercial theme treats bloggers right, with lots of different layout options to suit their needs. You’ll also find different navigation/pagination styles, built in social sharing and compatibility with the WordPress Customizer.



Ariel brings an attractive, photo-centric style to blogging. The style isn’t overbearing – a welcome characteristic in this category. Included with the free theme are two slider styles, lots of sidebar options and social media icons. A pro version adds more customization options, post formats and other assorted goodies.


Get Skeleton

Get Skeleton is a free starter theme based on the popular _s (Underscores) and features the GetSkeleton CSS boilerplate. It’s meant for designers who want to create their own stunning theme, but want a solid foundation to build upon. So, no, it’s not going to win any beauty prizes out-of-the-box. It is, however, meant for serious development.

Get Skeleton


Skin shows us the fun side of WordPress themes. The design is unique and quite bold – although you can customize it to match your personality. It seems to be the perfect fit for the modern blog that’s looking to go viral. There’s lots of movement and animation, but the layout is still easy enough to follow. This one is definitely a different sort of commercial theme.



Cortex also lends itself to a more whimsically creative type of website. There are 17 home page layouts to choose from with this commercial theme – all are quite colorful. You’ll find several navigation options, including mega menus and a slide-out “hamburger” option.  Animation is also big here, with lots of floating objects to add a bit of flair to your content.


Looking Back…And Ahead

What did we learn from 2017? Well, blogging is still “in”. And developers are getting increasingly more playful with designs and features. That makes sense given the times we live in and the crowded market for themes.

But 2018 looks like it will be a whole other level of eventful when it comes to themes (and WordPress in general).  With the Gutenberg editor due to arrive, look for theme developers to race to ensure compatibility and add their own custom features based on it. It will be fascinating to see how the market adapts to this new way of creating and editing content.

Understanding CSS Layout And The Block Formatting Context

Original Source: https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/

There are a few concepts in CSS layout that can really enhance your CSS game once you understand them. This article is about the Block Formatting Context (BFC). You may never have heard of this term, but if you have ever made a layout with CSS, you probably know what it is. Understanding what a BFC is, why it works, and how to create one is useful and can help you to understand how layout works in CSS.

How To Use Underlined Text To Improve User Experience

Original Source: https://www.smashingmagazine.com/2017/12/underlined-text-improve-ux/

(This article is supported by Adobe.) An underline is a horizontal line immediately below a portion of text. In our everyday experience, we underline to emphasize key sections of text, sometimes drawing an underline by hand below printed text. But underlines have their own place in the world of digital design. In fact, underlined text has become one of the most common, most recognizable features of our online experience. When we see an underlined word or sentence on a web page, we immediately assume it’s a link.

lg2 Blends Tradition With Modernity at Taverne Louise

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/I8fEEQUhFoc/lg2-blends-tradition-modernity-taverne-louise

lg2 Blends Tradition With Modernity at Taverne Louise

lg2 Blends Tradition With Modernity at Taverne Louise

Dec 12, 2017

We’re just smitten with the work by lg2 for Taverne Louise in Quebec City. lg2 is Canada’s largest independent creative agency specializing in innovation, strategy, packaging, branding and design just to name a few areas of their expertise. The brief for Taverne Louise – develop a logo and an aesthetic identity for a new restaurant whose name and menu are at the crossroads of tradition and modernity. Taverne Louise is situated in Québec City’s Old Port, right in front of its namesake, Bassin Louise. Named in the honor of Queen Victoria’s daughter, a significant figure in Canada’s history, the logo reflects the restaurant’s menu, putting a modern spin on tradition. We most adore how the team at lg2 has taken Louise’s royal coat of arms and distilled it to its geometrical essence. The “O” wears an understated crown and omnipresent royal colours of gold and black give it an attractively regal air. Enjoy this delicious look at branding done right. 

art direction
graphic design

Mind-boggling Vector Illustration Work by James Gilleard

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/9Turt5n0kdg/mind-boggling-vector-illustration-work-james-gilleard

Mind-boggling Vector Illustration Work by James Gilleard

Mind-boggling, Vector Illustration Work by James Gilleard

Dec 12, 2017

James Gilleard shared a set of beautiful illustrations that he created in 2017. They are all vector illustration  and it definitely sets the bar at another level. The amount of details is nothing but staggering, I was trying to understand some of them like the one of Paris, or the ones with buildings and I couldn’t.  There’s just too much going on which makes me wonder how long it took it for James to create those illustrations. Below you can see some of my favorites.

We also recommend that you check out James website at www.jamesgilleard.com/ – James is a designer, art director and illustrator based in London, UK. He has an incredible portfolio with more amazing vector illustration projects.

Vector Illustration

Fast Magazine – Japanese Cedar House
DB Mobile – Frankfurt redevelopment
Washington Post – Future Restaurants
Videogame Concept Art and Visual Development
Animation Backgrounds


The New Smashing Mystery Riddle, An Emoji Edition

Original Source: https://www.smashingmagazine.com/2017/12/the-new-mystery-riddle-emoji-edition/

Oh yes, the infamous mystery riddles are back! To celebrate the relaunch of this little website, we’ve prepared something special yet again — a Smashing Emoji Mystery Riddle. And this time, instead of scouting an answer in a physical place or on Twitter, it’s well hidden somewhere on this website.
So, What Can You Win? Among the first readers who tweet @smashingmag all the hidden emoji, we’ll raffle a quite extraordinary, smashing prize (and a couple of other Smashing extras):