Exclusive Freebie: Creative Process Icon Set

Original Source: https://inspiredm.com/exclusive-freebie-creative-process-icon-set/

Inspired Magazine
Inspired Magazine – creativity & inspiration daily

Perhaps you’re a future Einstein in the making or you have just started an exciting new hobby. Either way, The Creative Process Pack provided exclusively by Flaticon and Freepik is the perfect fit for your next project. Each icon revolves around the theme of imagination while celebrating the processes needed for creating. So if you need a splash of motivation and colour, look no further!

Free for personal and commercial use!

Download this awesome pack as SVG from here.

For the PNG files check here: part 1,  part 2 and part 3.

This post Exclusive Freebie: Creative Process Icon Set was written by Catalin Zorzini and first appearedon Inspired Magazine.

20 Best New Portfolio Sites, February 2018

Original Source: https://www.webdesignerdepot.com/2018/02/20-best-new-portfolio-sites-february-2018/

Hey everyone! It’s February, and you know what that means: Hallmark executives get bonuses! Also, people make a special effort to show love and affection to those they care about, which is cool too.

The theme this month is minimalism and motion designer portfolios, pretty much. Enjoy.

Note: I’m judging these sites by how good they look to me. If they’re creative and original, or classic but really well-done, it’s all good to me. Sometimes, UX and accessibility suffer. For example, many of these sites depend on JavaScript to display their content at all; this is a Bad Idea (TM), kids. If you find an idea you like and want to adapt to your own site, remember to implement it responsibly.

Christopher Kirk-Nielsen

Christopher Kirk-Nielsen is a WDD reader who sent in his own site for review, and oh my God I think he’s been listening! You see, he is a front-end dev / motion designer. Typically, sites built by motion designers tend to suffer in the usability and accessibility department.

In this case, however, the site looks good. It looks original. It appeals to the love of the ’80s aesthetic. And so far, I can’t get the thing to break without going back to much older browsers. Even without JavaScript, everything has a fallback.


Next up, Less+More is perhaps the very embodiment of the “white space and thick heading type” school of design. It has big type. It has big images. It has… a lightly-animated Venn diagram? Okay, I like that.

No prizes for originality, but it looks good.

Marina Rachello

Every time I see a site so brazenly colorful as Marina Rachello’s portfolio, I always wonder if my tendency toward monochromatic palettes is wrong somehow. While some of the bolder tones don’t contrast too well with the black text, it must feel freeing to just go nuts with the colors and shapes.

The only change I’d make (besides fixing the potential contrast issue) would be to make the background an SVG rather than a PNG.


Antoni brings us another videographer’s portfolio that goes all in on the motion design. It’s got a visually pleasing combination of background video, and simple, solid minimalism that would just scream “professional” if it weren’t so darned professional.

Nikos Pandazaras

Nikos Pandazaras’ portfolio is as artsy as his photography, which is par for photographers’ websites these days. You have the minimalism, the somewhat unconventional layout, and even rather artsy animation. The whole thing really fits the theme.

Dow Smith

Dow Smith adheres to the trend of ever-more-minimalist sites, with the big, thin text, and the love of literal white space. Tons of it.

There’s also a fair bit of distracting animation, but I actually rather like the way it’s been used. Each portfolio piece is presented as a short video (embedded with HTML5) that shows how a user is expected to interact with the site. It shows how they work, not just how they look.


Prollective’s website is minimalist and professional, but isn’t afraid to preen a bit. Gradients and bright colors haven’t looked this good since people kept mistaking Web 2.0 for an aesthetic trend. Despite relying far more on type than it does on imagery, this site still feels vibrant.

Blue Productions

Blue Productions properly commits to their theme by, well, using a whole lot of blue. Video is what they’re all about, so expect a fair bit of background video, and stills from their work. I particularly appreciate the cinematic presentation for all of their work.


galgo.studio’s style of minimalism is bound to remind you at least a little bit of Google. They’ve worked with Google on at least one project, so that sounds about right. It’s clean, it’s smooth, it has that thin text you see on pretty much every Google site now. Some small usability issues on the home page aside, it’s a pleasure to browse.

Julie Bonnemoy

Julie Bonnemoy’s portfolio hits you with some rather chaotic lava lamp effects before revealing a classy layout that revels in its asymmetry and imagery in equal measure. I feel like this is one of those sites that is perhaps a bit over-animated. Even so, when it calms down a bit, it’s just plain beautiful to look at.

Dinner for Five

Mitsugu Takahashi’s portfolio is elegant. I don’t mean that it uses fancy type (well, it does), or that it uses imagery to project a high-class brand (it does that, too). Those are just surface level indications of a deeper understanding of the way something elegant is supposed to feel.

Page loader aside, the site feels graceful, pleasant, and stylish as you could wish for. It’s almost a miracle that only one of the featured projects has anything to do with fancy weddings. It just hits all of the right notes.

Jermaine Craig

Jermaine Craig makes a bold and risky move by hitting users right in the eye-sockets with a wall of text. The site as a whole seems to be a bit of a work in progress, but it’s already eye-catching enough for this list.

Paper Tiger

Paper Tiger is your classic minimalism that’s had few paint-filled balloons thrown at it. The people at Paper Tiger are apparently good at throwing things, though, as the use of color doesn’t overwhelm the rest of the design at all. It just takes an already-solid design and makes it stand out a bit more.

James Merrell Architects

I’m not sure why architects love the PowerPoint-style site so much, but James Merrell Architects is a fine example of the form. Even their blog is part presentation, and part print publication. The cool thing is that CSS (and JS) has come far enough to make sites like this reasonably usable, and even pretty.

Even though building sites this way goes against my personal preferences — and even though there’s no point in hiding the navigation behind a hamburger menu on the desktop — I have to admit that it just looks good.


It’s one heck of a power move for a company that makes mobile apps (and occasionally websites) to state that they don’t even like the Internet. And yet, Kickpush has done just that. Of course, they also call London “sunny” which is exactly how you know they’re kidding. That brashness permeates the site’s entire aesthetic and experience.


MoreSleep is not just a good idea, it’s also a design studio. This one has gone for that holy grail of alternative aesthetics: the horizontal layout. Well, on their home page anyway.

Nathan Young

Nathan Young has brought us a multiple-slideshow portfolio for our enjoyment. This sort of portfolio is actually growing on me a bit, though I’d personally try for pure CSS slideshows.

Jack Davidson

Jack Davidson’s portfolio makes absolutely sure that you will read the title of every project by replacing your cursor with said title. Don’t worry, it goes back to the regular pointer as soon as you mouse over the navigation, so it remains useful.

The site is interesting, but I want to dock it a few points for using a “screen saver”. I’m getting a bit annoyed with those. At least this one is a slideshow of his work, so it’s still kind of useful.


Okay, a thousand websites have done the “it’s all text until you hover on a project name” thing. I’d just like to point at amateur.rocks to say, “They did it right.”

See how the images are kept from overlapping the title of the project you’re previewing? See how they don’t have to worry about text contrast like that? That’s the right way to do it.

Giovanna Silva

Giovanna Silva has taken the unconventional route of allowing people to make their own collages (sort of) with her portfolio. Click on a country/location, then start clicking away to see every picture in the project.

After you’ve exhausted the stack of photos, you can see them all again in a more conventional layout. The rest of the site is a bit more conventional, too, but looks good.

Art Text App for Mac Turns Text into a Masterpiece – only $17!


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Collective #388

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


Our Sponsor
Get every single detail right

There’s plenty of “good enough” web design work. And designers who almost never pay attention to details. But you’re different. You always give 110%, right?

Get X


Making SVG icon libraries for React apps

An article by Nicolas Gallagher that describes how to make a package of React components from a library of SVG icons.

Read it


Modern CSS Explained For Dinosaurs

Peter Jang explains modern CSS in a nutshell and shows why it is considered both one of the easiest and one of the hardest languages to learn as a web developer.

Read it


CSS “Coding” animation

A loading animation that looks like schematic “coding”. By Chris Dermody.

Check it out


CSS Grid layout – crossed sections

An introduction to CSS Grid and its potential with a practical example. By Rafaela Ferro.

Read it


Writing an easing function; a slightly interesting story

David Gilbertson shares his experience on creating a tiny library for smoothly moving elements.

Read it


Free Font: Highlander

A beautiful marker script font by Kavoon.

Get it


SVG Backgrounds

Some nice customizable SVG patterns and background designs for your websites

Check it out



A new weekly YouTube show about design and development. By Rob Hope.

Watch it



A real-time, cross-platform drawing app for collaborating with others.

Check it out


Maybe don’t globally-install that Node.js package

Jake Wilson encourages everybody to consider the downsides of globally installing random Node.js packages and takes a look at some alternatives.

Read it


Keep webpack Fast: A Field Guide for Better Build Performance

In case you missed it: Rowan Oulton’s guide for keeping webpack fast.

Read it


Converting Shaders from Shadertoy to ThreeJS

Dirk Krause shows how to transfer Shaders from Shadertoy to ThreeJS.

Read it


ESNext Proposal: The Pipeline Operator

A proposal for adding the simple-but-useful pipeline operator to JavaScript

Check it out


Free Font: Silent Scream

Andreas Leonidou designed this great display font.

Get it


Only CSS: Infinite Steps

Yusuke Nakaya created this mesmerizing demo of an infinite staircase.

Check it out


Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

A great technique for creating doughnut shaped charts. By Ana Tudor.

Read it


Web Programming with Python and JavaScript

Learn about the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Flask, Django, and Bootstrap.

Check it out



Basin takes the hassle out of creating form backends.

Check it out


Build a Download Button Full of Micro Interactions

A tutorial by Luis Manuel where you will learn how to pull off some interesting micro interactions on a button.

Read it


This alter world

Gerard Ferrandez created this magical demo.

Check it out


Awesome Code Review

An “Awesome” list of code review resources including articles, papers, tools, and so on.

Check it out


Here’s how Google Chrome’s new ad blocker works

Learn about how Google Chrome will block every ad on websites that are not compliant with the Better Ads Standards by default. By Daniel Aleksandersen.

Read it


An Intuitive Explanation of using Poisson Blending for Seamless Copy-and-Paste of Images

Learn about the image processing technique called “Poisson Blending” in this article. By Eric Arnebäck.

Read it


Family fun with deepfakes. Or how I got my wife onto the Tonight Show

Sven Charleer explains how the deepfakes app algorithm works in a nutshell.

Read it


From Our Blog
Outdoors Template

An implementation of Gil Huybrecht’s “Outdoors” design project powered by layered CSS grids.

Check it out

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

50 Handpicked Beautiful Tumblr Themes

Original Source: https://www.hongkiat.com/blog/tumblr-themes/

Tumblr is one of the most interesting social media platforms and home to creative individuals who like to share their thoughts and ideas with people of same interest. However, to attract more…

Visit hongkiat.com for full content.

Monthly Web Development Update 2/2018: The Grown-Up Web, Branding Details, And Browser Fast Forward

Original Source: https://www.smashingmagazine.com/2018/02/monthly-web-development-update-2-2018/

Every profession is a wide field where many people find their very own, custom niches. So are design and web development today. I started building my first website with framesets and HTML4.0, images and a super limited set of CSS, and — oh so fancy — GIFs and inline JavaScript (remember the onclick=”” attribute?) about one and a half decades ago. It took me four days to learn the initial, necessary skills for that.

Get perfect sound with StockUnlimited

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/jKfQA1fzD1w/get-perfect-sound-with-stockunlimiteds-audio-library

The right song can set the mood for a video. Unfortunately, good music doesn't always come easy. You can make sure you always have the perfect tune ready for use for your project with the StockUnlimited Audio Library. You can get three-year access on sale for just $49.99 (approx. £36)!

Music assets aren't cheap and they often aren't easy to find, either. StockUnlimited's massive Audio Library can fix that problem for you. This massive library provides you with tons of premium audio tracks and sound effects that you can use for any project. For three years, you'll have unlimited downloads to all of the royalty-free music you could want. These tracks are perfect for setting the mood with tons of genres, instruments and sound effects to choose from.

You can get a three-year subscription to StockUnlimited Audio Library on sale for just $49.99 (approx. £36). That's a savings of 91% off the retail price for a can't-miss deal for any creator, so grab this offer today!

About Creative Bloq deals

This great deal comes courtesy of the Creative Bloq Deals store – a creative marketplace that's dedicated to ensuring you save money on the items that improve your design life.

We all like a special offer or two, particularly with creative tools and design assets often being eye-wateringly expensive. That's why the Creative Bloq Deals store is committed to bringing you useful deals, freebies and giveaways on design assets (logos, templates, icons, fonts, vectors and more), tutorials, e-learning, inspirational items, hardware and more.

Every day of the working week we feature a new offer, freebie or contest – if you miss one, you can easily find past deals posts on the Deals Staff author page or Offer tag page. Plus, you can get in touch with any feedback at:deals@creativebloq.com.

Related articles:

The best video editing software 2018Apple Music's new branding hits all the right notesBuild a simple music player with React

Super Detailed 3D Character Design – Iron Man Armor Mark XLIV

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/Rj0ubsLnFkM/super-detailed-3d-character-design-iron-man-armor-mark-xliv

Super Detailed 3D Character Design – Iron Man Armor Mark XLIV

Super Detailed 3D Character Design - Iron Man Armor Mark XLIV

Feb 15, 2018

It never ceases to amaze me the level of quality that 3D artworks have gotten. Dan N shared this incredible character design project that took him a few months to complete. It is titled “Hulkbuster” and it’s the Iron Man Armor: Mark XLIV. It’s hard to imagine that we all have access to tools to achieve this level of work and even more mind-blowing to think that you can simply just purchase the model to render it on your machine. If nowadays we can do this, imagine what 10 years from now will look like.

Better know as the “Hulkbuster” was a project I started a few months ago. My goals of this project was to see how far I could push shading inside of Redshift, without using any 3rd party applications such as Substance, Mari. ect. Also seeing how much detail I could include without doing any UVs and rely solely on Redshift’s Triplanar, Curvature, AO, Color Layer, Blend material, ect. to build detailed enough shaders all inside of Cinema 4D.

3D Character Design

Graph for one of the materials, includes procedural grime, dust, and dirt layered in the crevices based off curvature and AO maps.  

A little breakdown of the procedural setup for the change in reflection color. Also got some requests to share the setup so I made a simplified version of it to download.


character design

Learning Framer By Creating A Mobile App Prototype

Original Source: https://www.smashingmagazine.com/2018/02/introduction-to-framer/

The time of static user interfaces is long gone. Designing interactive prototypes is the best approach to expressing your ideas and explaining them to clients and stakeholders. Or, as Jerry Cao of UXPin puts it: “Nothing brings you closer to the functionality of the final product than prototyping. It is the prototype that brings to life the experience behind user experience.”
Prototyping is an important part of the modern UX design process.

Getting Traction for Your Newly Launched Website

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

Website Launch Day. How it Goes, Every.. Single.. Time..

Day 1. Your site is now live. It is the best thing ever. Install Google Analytics. Remember to write a privacy page and disclaimer page about Analytics and cookies. Sit glued to your Analytics account for the rest of the day tweaking every aspect in the Analytics console. Oh yeah, while we’re at it, don’t forget to add the site to Google search console too. Great. Done. Sit back and relax. Have a beer. You have done well young Padawan.

Day 2. Enthusiastically dive into your Analytics account. “Hmm, not many views today. Ok I will give it some time.”

Day 3. Open Analytics. “Oh I have a couple of clicks. No, wait – those were me. Doh.” Hound a bit on social media about how great your site is… Check back on Analytics.



Day 5. Distress, sadness, and an overwhelming feeling of failure. “Maybe I’m not cut out for this web design lark?”


You are in this for the long haul and I am afraid to say there are no easy routes to success here. I am here to tell you it’s going to be tough. Perhaps tougher than you think. Have you got what it takes to succeed? Good! I admire your determination. Now, read on and find out about tried and tested ways to get traction for your website.

I hate to say this, but without visitors your website is dead

No matter how innovative the product or service is, or how asthetically pleasing the design, if people are not visiting your website the simple fact is – it is a dead website. The thing is though, you think your site is brilliant, and do you know what? It probably is! But who cares?! Who knows about it? Why should a perfect stranger be interested in it?

You could use social media or send out press releases, but with so many brands clamouring for attention, those messages can often have little effect.

Without Good Content Your Website is Dead

Again, it could be visually the best thing ever, but if there is no content, nothing of real substance, it is a dead website. Content is everything. Think carefully about headlines for page articles. Keyword research will help you a little here but use it as a guide only.

If your site is not primarily a blog, think about adding a blog section. It can be tough and hard work, but a blog is very important . Write at least 1 or 2 articles about your field every week. Let the world know you are an expert in your field. If you are not an expert, give them another reason to visit. Matthew Inman gets visitors by making people laugh. It might not work for everybody, but it sure worked for him. (5 million monthly views).

Give people what they want. Make your ‘about page’ about the visitor, not about you, i.e. written with them in mind. Enlist the help of a skilled copywriter if you feel out of your comfort zone. Most web designers probably are in this regard. They can make a site work well and look nice, analysing the code in depth. As for writing about themselves and their business in a compelling and engaging way, that’s another matter entirely.

First Things to do After Your Site is Launched

Get your site indexed. Submit your url to Google. You should also consider submitting it to Bing and Yahoo as well. You don’t necessarily have to do this as the search engines will pick up your website in time. However, this step will often speed up the process. (We give Google particular attention as they are the biggest player with over 70% of the world’s market share of search.)

Submit a sitemap in the Google search console and check that there are no issues with the site and that your site has a robots.txt file.

Keep calm. Frantically changing things around too soon won’t do you any favours in the search results, especially if it is a newly registered domain. Give it some time. Keep drip feeding new, quality articles periodically over the next couple of weeks.

Pitfalls to Avoid

1) Write for your users, not for robots. It’s ok to listen to SEO advice but if you are not careful your articles will lose their appeal and become spammy and your readers will not appreciate it. This has been said before, and many so called SEO experts that have fixated on certain things are having to constantly re-evaluate their approach.

If you want your site to do well in the long term, filling your page and site with spam is not going to work. Google is constantly looking at this. Do it right and you will be rewarded. Write content for your user first, and for search engines second.

2) Avoid any tool that says it is easy, quick, or cheap. Anyone making you promises in that regard will only do you harm in the long run.

Tried and Tested Tips that Work

Here are some top tips from people at the top of their game who have either tried this or witnessed first hand what happens when people do. These are not just my words, they are things that have been proven to work.

1) Invest in a short, aesthetically pleasing video.

“If there’s one thing every startup should invest in, it should be a short, aesthetically pleasing video that explains exactly how its product works. As a journalist covering startups, I guarantee no amount of selling a concept over the phone is as effective as a well-produced video that clearly communicates the benefit of the app or software. If there’s a good video, I almost always embed it in my article. Bonus points if it’s funny.” Omar Akhtar is the senior editor for The Hub, based in San Francisco

2) Write an article for a popular online resource in a similar field. Often you will get a credit and link to your website.

3) Offer something for FREE: Like an ebook, website template or plugin (maybe you have some code for a project that never saw the light of day) and then aggressively promote it. It will definitely attract a lot of new visitors. For web designers, try to get a free theme featured on WordPress.org and make sure to link to your website, or create a free theme in a niche that people are looking for and feature it prominently directly on your site. It will help immensely.

4) Submit your page to StumbleUpon. Be prepared to expect a high bounce rate, but it can create interest (sometimes a lot of interest at once). That said, it can be very hit and miss, so there are no guarantees here. People have also reported success with their paid results, but here we are particularly looking at organic methods.

Other Tips

Performance. Look at page speed (or site speed). Yes Google has made page speed part of its search algoritm, so it’s going to affect your search engine results (to what degree I am not sure, but it’s a fact). However, more importantly, people aren’t likely to stick around or come back for more if your page takes an eternity to load. This applies even more so to mobile. Start with your theme, keep it clean and functional. Don’t do with an image that could be done with css. Optimise images (especially for small screen widths). Look carefully at your typography and ensure it reads well on all devices.
HTTPS? Regarding search engine results, the jury is still out on this one for many people. Clearly if you are selling online or passing sensitive information an SSL is a must. Since you are just starting out you won’t have the worry of losing your position in Google so it’s probably a good idea to start with HTTPS from the off rather than have to switch down the line. The web is certainly moving that way, and it will show that you value your visitors security, which is always a good thing, and can go a long way to building trust.
Link building. Just to be clear here, we are talking about building meaningful relationships with other website owners and working to build a meaningful brand online. This takes time. We are not talking about artificial manipulation of the search engines with spammy link building campaigns.
Get social. Love it or loathe it, you cannot really afford to ignore social media. Promote your website on Twitter and Facebook. Whilst you may want to utilise some automated tools for sharing your articles (time is precious after all) remember to keep the human element, engaging with your followers whenever possible.
Learn from your mistakes. Of course, success comes from doing things “right”, but when you are just starting out you will likely make many mistakes. Don’t let fear of failure stop you. Successful people have often made a lot of mistakes, but the key thing is that they don’t quit. They keep moving until they arrive at their goal.
Above all else – Be patient, be persistent and keep positive.

Let’s face it, there are not many overnight sensations when it comes to a website. There may be the odd exception of course, but if you are like the vast majority of us, it is going to take time. Try to avoid the temptation to take shortcuts – to the dark side you will stray!

Ok, there is nothing new here. It has all been said before many times, but it is worth repeating. Be determined, and your hard work will pay off. 3-6 months of following the above advice and your site is bound to be getting relevant traffic and traction.

Collective #390

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


Cheapass Parallax

Dave Rupert pulls off a nice parallax effect in only six lines of code.

Read it


Our Sponsor
Top WordPress plugins to use on your site

Your WordPress site is doing well. But it could do better in terms of functionality and design. At least one of these WordPress plugins is missing from your toolbox.

Check them out



Read about Paddy, an automatic padding solution for Sketch layers.

Read it


CSS Space Shooter

An incredible CSS only shooter game made by Michael Bromley.

Check it out


Free Font: Fifita Ligatures Regular

A unique ligature font designed by Kolcsar Zsolt.

Get it


Web Performance Optimization with webpack

A comprehensive guide to webpack for effectively optimizing site resources. By Addy Osmani.

Check it out


Psychedelic waves

Karim Maaloul’s fantastic waves demo.

Check it out


DIY RSS Feed Reader

TJ Fogarty shares how he built his own RSS feed reader.

Check it out


Private Variables in JavaScript

Marcus Noble looks at the various ways in which private properties can be implemented in JavaScript.

Read it



The first type foundry dedicated to creating high-quality Opentype-SVG color fonts.

Check it out


Bont Co Tutorials

Adrián Somoza teaches UI design in his weekly tutorials.

Watch it


8bits isopleths

A fantastic 8-bit “pixel art” demo by Louis Hoebregts.

Check it out


Space Icons

A set of fantastic hand-drawn space icons in different styles.

Get it


Pretty Awesome Lists

Pretty Awesome Lists crawls all the “Awesome” lists, collects interesting information about each link and takes a screenshot so that you can easily explore them.

Check it out



Create dashboards using only YAML/JSON files.

Check it out


An Overview of JavaScript Testing in 2018

A guide by Vitali Zaidman that summarizes the most important reasoning, terms, tools, and approaches to JavaScript testing in 2018.

Check it out


Blocky Digital Clock

A digital clock in the style of the large blocky typography in the GameCube BIOS. Made by Jon Kantner.

Check it out



A toolkit for building scalable web applications with React, Redux and React-router.

Check it out



A library that builds streamlines for arbitrary vector fields.

Check it out


Free Font: Peich Linocut

Robert Young created this great typeface in honor of Paul Peter Peich.

Get it


The “Goo Filter” illustrated

A great demo by Chris Gannon where he illustrates how the “Goo” filter works.

Check it out


From Our Blog
Slice Revealer

A reveal effect where animated slices cover and uncover an image. Inspired by Zhenya Rynzhuk’s transitions experiments.

Check it out

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