Tag: Webdesigner Depot

Comics of the Week #395

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

No pants required

Designer. Not psychic.


Photoshop withdrawal

Can you relate to these situations? Please share your funny stories and comments below…

100+ Art Deco Fonts, Badges, Borders and Backgrounds – 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;}

from Webdesigner Depot https://www.webdesignerdepot.com/2017/06/comics-of-the-week-395/

Is UX Really That Important?

One of the most oft-repeated criticisms of any design is that it’s “poor user experience”. UX is set up as the ultimate achievement for any design project. But is this an over-simplification of the designer’s role? Should everything be about user experience?

To paraphrase Leonard Hofstadter: “UX is a ‘smart decision’; it is like a bran muffin—a thing that you’re choosing because it is good for you…But sometimes, you want things in your design to be a Cinnabon, you know? A strawberry Pop Tart. Something you’re excited about even though it could give you diabetes”.

Today I’ve put together a list of sites that are rarely credited with good user experience, but that are still praise-worthy despite—or perhaps because of—that fact. We can admire their originality, their interactions, and their creative direction.

1. Scrolling: parallax, long and infinite

While scrolling, in all its hypostases, underlies a bunch of today’s websites—especially those that bring to life a storytelling experience—UX gurus find this technique “mauvais ton”. They consider it bad for many reasons:

  • users may not know what to do when first they stumble upon such a site;
  • users can feel confused and frustrated;
  • users often become bored after several minutes of constant moving;
  • there is no way out, whatsoever;
  • the navigation is not transparent and habitual;
  • relatively bad site performance;
  • in some cases, it does not work in mobile devices;
  • etc.

However, we still eagerly click on a website that promises to take us on a long exciting adventure. Does the “comfort zone” matter? When all you need to do is to toy with a mouse scroll wheel and amuse yourself with some inventive tricks.

What does the Bank of England do?

Ivan Toro

2. Experiments with Typography and Taglines

As all we know, your message to the targeted audience should be as clean and clear as a little angel’s tear. Good contrast, optimal readability, and some other factors ensure the successful transmission of the company’s message. For example, Six Potatoes or Biron: their titles are pretty straightforward and plain. Without a doubt, this technique works: it is really hard to miss the tagline.

Six Potatoes


However, what about the homepage of Bolden? Their “welcome” message is a true mess. Letters overlap each other looking much like the Venn diagram. The first thing that comes to mind “What a…?” Undoubtedly, such a peculiar solution evokes mixed feelings. Nevertheless, these feelings ignite our interest. Curiosity is our natural instinct that is truly powerful.

What’s really hidden inside this tiny chaos? The team is managed to seize and hold our attention, and not only convey the message and reflect a creative thinking but also use our short memory span to their advantage.


3. WebGL Experiments

Can anyone call WebGL along with Chrome experiments an example of good UX? Absolutely, not. Some of them even do not work on the majority of browsers, so a lion share of online audience are simply unable to open them on their desktops, to say nothing about the tablets and mobile devices. But still, the upsurge of using high-end features and experimental libraries in building web applications is evident. Interland by Google, DEVX Experiments86 and half years—all these and many more concepts slowly but surely are earning their place in the sun. They are impressive, ingenious and intriguing; and if they open in your browser you will definitely forget about the comfort at least for 10-15 minutes.

Welcome to Fillory


4. Original Navigation

“Should I stay or should I go?”

Navigation plays a decisive role in whether your users stay or leave. No one wants to fish in the dark. Navigation’s power to destroy user experience (or vice versa) take it to the next level. Good practice encourages us to make the main menu simple, handy, intuitive, but at the same time all-embracing. Everything should be on the surface, or at within easy clicks. The user should get answers to their questions quickly and without much pain.

Plain top bars with nav links, hamburger menu buttons and of course, sticky nav bars that accompany us on our journey through the website are really popular these days. Staying conservative and pragmatic in choosing the navigation lets you provide your visitors with a Navigation GPS Unit rather than a map with descriptions written in Moon-letters. Nonetheless, to a certain degree these trivial solutions will take away all the fun and playfulness of your interface.

Unexpected menus are creative, thought-provoking and captivating. Yes, they can be misleading, but when done right they are almost flawless masterpieces that pique our curiosity.

Daniel Spatzek

In The Box


Without a doubt, user experience is a vital aspect of a good web application whether it is just a plain blog, complex corporate portal, or huge e-commerce website. Along with such important things like mobile-friendliness or cross-browser compatibility it forms a safe and sound foundation that ensures success. However, sometimes, like in the real world, there are things that we find truly uncomfortable, like taking long trips in a sports car or wearing high heels, but still we admire them, want to possess them, they make us turn our heads.

So, should everything be about UX? Should we all abandon the desire of going off the beaten track and follow the same old roads over and over? Is it possible to strike the balance between creativeness and pragmatism?

100 Professional, Print-Ready Event Flyers – only $9!


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;}

from Webdesigner Depot https://www.webdesignerdepot.com/2017/06/is-ux-really-that-important/

6 Essential Open Source Tools for Web Designers

The web runs on open source software. Most of it is in the back end, with most of the world’s servers running on some form of Unix or Linux. Those servers run hundreds, if not thousands, of open source utilities, script interpreters, and so on. Once in a while, though, the open source stuff gets all the way to the browser, where the user can see it.

Okay, that happens a lot. Case in point: WordPress; you’re seeing it now. But the conversation, when it comes to the tools of web design, is often dominated by software you have to pay for: Photoshop, Adobe XD, Sketch, the Affinity suite, Sublime Text, and about two-thousand web-based prototyping apps. When we do talk about open source web design software, we talk about WordPress, and occasionally the GIMP…or something.

In this article, I wanted to highlight some other open source projects that are active, lesser-known, and rather promising. I expect great things from each of these projects, if only we can get people looking at them:

1. Gravit

Okay, we’ve featured Gravit a couple of times on WDD for different reasons. With its combination of professional grade vector tools and collaboration features, you can think of it as Sketch in the Cloud, or Google Draw on steroids. You can make graphics, prototypes, and even mockups with this thing, all for free. Then you can share your creations, and even invite others to add input, or help you work on them.

Being open source, that means you can grab this software and make changes to it, or even integrate it into a project of your own. Want an internal vector graphics and sharing tool for… any reason you can think of? You can do that.

2. Visual Studio Code

Once upon a time, it was weird to think of Microsoft having anything to do with open source software. Now, they have Ubuntu running in CLI mode on Windows, and they’re giving away a free text editor. Ever since Visual Studio Code launched, it has developed quite the fan base. And why not? It’s fast, it’s extensible, it works.

Now, if you’re already entrenched with Sublime Text, Atom, or one of the other famous text editors, there’s not much reason to switch. This is especially true if you’re on a Mac, or running Linux. The big draw is VS Code’s integration with other Microsoft development tools. If you run Windows and code in ASP.Net, for example, you might see what this text editor has to offer you.

3. UIkit

If you like looking at front end frameworks for fun, or the “Big Two” aren’t cutting it for you, try out UIkit. It’s byte-conscious, and it’s modular, so you only have to use the bits you want. Their Github repo shows a fair bit of action. Most importantly, it looks pretty good by default, which is what most people want out of these frameworks.

4. Pencil Project

You may remember Pencil from the days when it was just a Firefox extension. Well, Pencil has since become a mature, stable wireframing/prototyping app in its own right. It lacks some of the extensive collaboration features of online apps in its category, but it’s great for anyone who needs or likes to work offline.

With a large library of elements and stencils available, you should be able to pick it up and start prototyping fast. It’s still under development, with version 3.0 launching in February, and the latest bugfix release on May 11th.

5. kodeWeave

kodeWeave is a newer project that looks a lot like CodePen, because it basically serves the same purpose: experiment with bits of front-end code. The big difference is that in addition to using it as a web app, you can download it as a standalone app for Windows, Mac, Linux, ChromeOS, and Android.

This is great for offline development, of course, but it’s also great for those projects where your client might prefer not to have project data and code experiments in the cloud. It also comes with comes with CSS preprocessors, and just about every framework you can name off the top of your head.

Bonus: it can integrate with an app called WebDGap to export your code as a native desktop or mobile app, so it’s pretty great for prototyping.

6. GrapesJS

GrapesJS is a site builder. Well, it’s more of a site builder framework. You can open it up and edit your site designs online. It supports responsive design (of course), editing the code yourself (if you really want to), several preview modes, undo/redo and more. It also has a set of pre-defined page elements that you can drag and drop in.

But really, GrapesJS meant to be dropped into other people’s projects. You can include it in a bigger app, such as a site builder service, an installable CMS, a newsletter managing app, or really anything that might need HTML/CSS templates that can be customized by the end user. And it is pretty easy to use. There’s a learning curve for anyone not familiar with web design, as there always will be, but it’s a quite capable page editor.

Honorable mentions

Honorable mentions go to Synfig Studio and Krita. Synfig Studio is a 2D animation app. Krita is a powerful graphics editor with a heavy focus on digital painting. They don’t have a lot to do with web design, so they don’t make it onto the list proper. However, they can both be used to make content for the web, and they have both come a long way in the last year. They deserve a shout out.

Many other great OSS projects have come and gone. Some are even still being regularly developed in relative obscurity, used by only a handful of loyal, loving fans. And maybe Richard Stallman. Go have a look around Github, SourceForge, and other havens of OSS software. Something out there might find its way into your web design process, and maybe even into your he…

…okay, I can’t finish that with a straight face.

LAST DAY: 800,000+ Stock Vectors, Photos, Icons and more – only $39!


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;}

from Webdesigner Depot https://www.webdesignerdepot.com/2017/06/5-essential-open-source-tools-for-web-designers/

The 10 Best WooCommerce Plugins For Boosting Your Revenue

Online sales climb higher year after year and now is the best time to get into the ecommerce game. If you’re looking for a platform to start with then WooCommerce is easy to setup, very secure, and it runs on WordPress which means it’s 100% free.

But just launching WooCommerce is only the first step. You then have to setup a usable shop with features that actually encourage users to buy.

That’s why we’ve curated this list of 10 great plugins you can use to boost your WooCommerce shop’s revenues and keep customers coming back for more.

1. Product Enquiry

You should do anything you can to ease customers towards a purchase. This might include adding tons of product photos, user reviews, or even adding a question box with the Product Enquiry plugin.

This is a free plugin for WooCommerce that lets customers ask questions directly about a product they’re considering buying. It’s a great way to clear up any confusion on materials, sizing, shipping, or anything related to your products (physical or digital).

Naturally you could just add a contact page on your site and tell users to message you there. But with Product Enquiry you can grab their attention right on the product page. It also lets you forward emails to different people and you can offer specific enquiry options based on the item.

It’s definitely a subtle feature but for a newer shop this can go a long way towards building trust with hesitant customers.

2. WPB Related Products Slider

The popularity of “related posts” can be seen on every major blog and news site on the net. And with the Related Products Slider plugin you can add this feature to your ecommerce shop too.

Related items work well to keep visitors on your site and possibly increase the size of their order. But adding related items manually is exceptionally tough, so it’s best to let an algorithm automate the process.

This free plugin handles all the product selection based on tags, categories, and keywords.

Each slider is fully interactive and responsive for all devices. It comes with two default themes but it’s also very dev-friendly so feel free to carve up a theme that matches the design of your site.

3. Product FAQs

If you’ve ever shopped on Amazon or eBay you’ve likely seen the “buyer question” areas. Customers often have specific questions about products before buying and this product FAQ plugin adds the same functionality to your WooCommerce store.

Whenever a new question gets submitted you can be notified by email right away. This lets you answer questions promptly and even delete some that are duplicates or just don’t make sense.

But if the customer has an account they can even get notified when you answer the question too.

You can set certain FAQs to publish live on the site for everyone to see while others can be answered privately. This is best used as a public plugin since it benefits all of your customers.

4. WPB Accordion Menu

Larger ecommerce shops often have multi-level categories that don’t fit into traditional horizontal menus. But dropdown accordion menus solve this problem since they can be lengthy and they’re toggleable within any category.

The WPB Accordion Menu plugin is totally free and perfect for all WooCommerce users.

Once installed you can drag the accordion widget into your sidebar and setup the details. This lets you assign a menu along with ordering the items and certain display properties. It even comes with built-in icon support if you want to add custom icons onto each category in your list.

This is a freemium plugin with some options to go pro. But for most users I think the free option is more than enough.

To see this in action take a peek at the plugin’s demo video.

5. Order Delivery Date

If you’re selling physical products then delivery dates are always a concern. With some ecommerce shops guaranteeing 1-day or 2-day delivery it’s good to support your customers as much as possible.

That’s why the Order Delivery Date plugin is an excellent addition to any checkout process. This adds a custom date picker into the form so your customers can select when they’d prefer to have the item delivered.

You have full control over the calendar’s settings including which dates are excluded(for example weekends). This plugin even counts the total number of deliveries per day so you can limit the amount to a reasonable number.

I think this works best for companies that offer services or direct consultations along with products. This way you’re physically in charge of the delivery and not reliant on a mail carrier to match your deadlines.

6. WooCommerce Image Zoom

Almost every ecommerce site you visit will have the hover-to-zoom feature for product photos. Whenever the customer needs a closer look at any product they can just hover to get a close-up shot.

This requires high-resolution pictures and a plugin like WooCommerce Image Zoom. With a one-click install this plugin is ready to go right after you click “activate”. The default settings work perfectly and it’s extremely lightweight.

The entire zooming feature runs on a jQuery plugin called Elevate Zoom. This means it does require jQuery, but WordPress typically includes this by default in most themes.

If you’re looking for more customizable features this does have a pro version too. But for any simple WooCommerce website I would recommend sticking to the free version, especially when first testing it out.

7. My Account Widget

To build your email list and increase sales you should encourage user signups. Once a user has an account on your site they’ll have an easier time buying something and feel more comfortable with the process.

By adding the WooCommerce My Account Widget into your layout you can add a personal touch to the user account setup. Once the user logs into their account they should have access to their cart, their current orders, and any unpaid orders currently pending shipment.

It’s a wonderfully well-designed plugin and it should blend into just about any website. By default it has a pretty bland style but it’s also incredibly simple to redesign. And the user account links are genuinely helpful which can ultimately increase time on site and overall sales volume.

8. Product Slider

The first step of a sale is getting the user’s attention and showcasing some products. And by adding a custom slideshow you can immediately grab attention while showing off a bunch of products at once!

WPB’s free Product Slider plugin can fit anywhere on your site with tons of customizable settings. You can add pretty much any products you like regardless of style or photo size.

This also comes with a simple flat design that’s fully responsive and easy to re-style as needed.

On the settings page you can change the rotation speed, pagination style, total products on display and many other minor features. This is by far the best free product slideshow plugin for WooCommerce and it’s a cinch to setup.

9. Wishlist Plugin

When customers see your site as a brand they’ll be more likely to use their profile frequently. That’s why the Wishlist Plugin is such a valuable asset for more established ecommerce shops.

If someone has an account on your site they’ll see a button next to each product to add that item into their wishlist. Potential customers can bookmark products they like and keep them all saved in one handy location.

On this page the user can add certain items into their shopping cart, view total inventory, and even check when certain items go on sale.

This comes with a very simple design but you also have access to edit the CSS and customize the layout yourself. It’s definitely a top-notch plugin to keep people coming back for more.

10. WooCommerce Cart Tab

The WooCommerce Cart Tab plugin offers one incredibly valuable feature: a shopping cart flyout menu.

When customers add items into their cart they usually need to click onto a new page just to view everything. Most of the time this is fine. But why not give them easier access when possible?

Once you install this plugin you can choose how it displays and what features should be included. It is definitely one of the cooler plugins in this list and it’s a feature most online shoppers appreciate when available.

But think of combining this plugin with a few others from this guide to really improve usability and ultimately increase sales.

Bundle: 625+ Beautiful High-Quality Design Elements and Fonts – only $21!


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;}

from Webdesigner Depot https://www.webdesignerdepot.com/2017/06/the-10-best-woocommerce-plugins-for-boosting-your-revenue/

4 Ways Vibrant Colors Boost UI Design

Color is one of the most powerful tools in the designer’s toolkit. It can draw attention, set a mood, influence users’ emotions, perceptions and actions. With the lingering presence of Flat and Material Design, color holds even more prominence in UI design today. Bright colors are equally well suited for both playfully cartoonish designs focussed on entertainment and for the elegantly minimalist styles focussed on business solutions. This versatility makes vibrant colors one of the biggest UI design trends of 2017.

The appeal of the vibrant color trend is that it can be applied in many different ways and styles to design. In this article we are going to look further into four color scheme trends and discuss some inspiring examples which implement them highly effectively.

1. Monotone

One of the most popular ways to use vibrant colors in your design is a technique called monotone. Monotone palettes include a single color with a mixture of shades and tints. Monotone is fairly easy to create: Think about the color that best works with your message and consider the amount of variance you want between tones.

Improve Readability

Monotone helps establish a solid foundation for foreground content, taking care of readability. Paired with dramatic typography, monotone color schemes are able to create truly memorable experience.

Sydneystockhom uses bold color to create a memorable look in a very simple way

2. Duotone

As the name suggests, duotone is an image made up of two colors. This can be two shades of the same color, or two contrasting colors. The technique that was once a print staple has found new life online. Thanks to Spotify, duotone is growing in popularity almost every day.

Create an Atmosphere

Duotones allows you to inject any image with the emotional attributes of any color. Remember, that different colors evoke different emotions. Soft and modest combination of colors is able to create a serious atmosphere. For example, in Holm Marcher & Co example every detail tries to contribute to the businesslike atmosphere, and background images are no exception.

While a combination of bright colors is able to create a sense of happiness.The main visual for New Deal Design is striking thanks to a bold color choice. They create friendly atmosphere and set a positive mood.

Increase Readability

Duotone is able to give the text plenty of contrast. It adjusts color variations in an image so that text can be placed using a single color almost anywhere on the image.

3. Gradients

Gradients have made their way back into GUIs, this time using high-contrast complementary colors. Modern gradients might include multiple colors, radiate from the center, come from a corner or fall horizontally.

Create a Modern Look

Gradients made a comeback and breathe new life into the bright color trend. Paired with flat color palette they can evoke feelings of modernism. With only one color, Zample uses a gradient effect on its background without falling into dull tones.

By using one of the bright, saturated colors associated with Material Design, you can evoke feelings of modernism.

Make Layout Easy on the Eyes

Gradients can improve visual communication. The transition from orange to pink in Symodd’s example below gives depth and contrast to the interface, and creates some eye-catching visual effects. The shift from light to dark follows natural human eye scanning patterns that move from the top left of the page to the bottom right.

Symodd’s homepage features a full gradient background from orange to pink. It’s a subtle gradient as the two hues aren’t too different from each other making this easy on the eyes.

Use it as an Accent

While gradient is often used as backgrounds for pages, they can work in smaller places as well. Consider using gradients as an accent in the navigation, for secondary images or for specific types of content. What’s nice about smaller areas of gradient is that you have more freedom to play with this technique. And when used in smaller spaces, it can be visually interesting to play with multiple color pairs, just like Bloomberg did in example below.

Bloomberg uses gradient for the ticker Latest News.

4. Overlays

Overlaying is filtering an image through a colored “lens”. Images with color overlays have been a popular design choice for a long time because it’s fairly easy to create this effect: you simply cover an image or video with a semi-transparent colored box.


Focus User Attention

Overlaying effects can help focus users on certain design elements. However, when using a single color as an overlay, think about the degree of saturation and transparency of the color. Heavy color combinations (less transparency and more saturation) put more focus on the color itself:


Color overlay used by Outlines puts more focus on the image


It’s hard to find a design technique that’s more fun to play with than color. Color effects can be dramatic, impressive and even serene. Don’t be afraid to go outside your comfort zone when it comes to working with colors. Whether you are a fan of bright, bold hues or prefer a more minimalist black and white, the one thing you need to remember: there are no wrong colors, what matters most is how you use them.

14 PowerPoint + 14 Keynote Templates (with 2,200+ Slides) – only $24!


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;}

from Webdesigner Depot https://www.webdesignerdepot.com/2017/06/4-ways-vibrant-colors-boost-ui-design/

What’s New for Designers, June 2017

There’s a mix of function and fun in new design and development tools this month. From adding emojis to links, to fonts that wow, to CSS tricks, there’s a little something for everyone in this collection. Plus, almost everything on the list this month is free, except for a couple typefaces and tools. They’re sure to be useful to designers and developers, from beginners to experts.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!


Vectr is a free graphics tool that lets users create vector elements online (or using the desktop tool). Use it for logos, website mockups, presentations or print design needs for anything that requires a scalable image. The tool syncs between online and desktop versions to help you pick up projects from anywhere. Plus, Vectr includes collaboration tools so you can design and edit with others in real-time.

Data Gif Maker

Google’s new project allows you to create an easy gif comparing two elements by filling out a simple form. Pick the content, add data points and choose a quick color scheme and you have a highly visual data element to embed in web projects.


Add an emoji option to web links with this nifty link shortener. It makes tough URLs easy to manage and is a fun element to add to social media link share posts.


Add multi-factor and authentication that doesn’t require passwords to your website with this tool. Authentiq Connect lets users decide when to step up their security, and whether to use a second factor, or go passwordless. It is compatible with OAuth 2.0 and OpenID Connect.

Better Font Finder

Did you ever wish that you could find the perfect set of Google Fonts by grouping them visually? This tool does just that. Using filters and character types, the project allows you to see groups of options with similar characteristics so that you don’t get stuck browsing for hours on end.

Minimalist Phone Mockups

The free phone mockup includes Sketch and Photoshop versions to help showcase design projects. It comes with an oversized (6,962 by 4,350 pixel) canvas with changeable colors for the background or devices.

Gradient Buttons

For designers that are sick of flat-style buttons, Colorion’s Gradient Buttons are the solution. The gallery of buttons comes with a variety of graduated options—single and multi-color—with one-click CSS for use in website projects. You can ever search by color to find something that will match your palette in a jiffy.


The reveal-on library contains elements with easy animations and options that have a variety of applications. The library uses ES6 rather than jQuery.


Insert icons directly into your HTML with code. It’s super simple: Just insert the tag and the Icons8 tool will find a matching icon and generate it in the right style, size and color.


Buttercup is a free and open source password manager for Windows, Mac and Linux. (You can also add it to Firefox.)

Word Counter

Word Counter calculates the number of characters, words, sentences, paragraphs or pages in real time. Just type in the box or paste type from somewhere else to get stats immediately. It can also be used to track text length against common web standards such as Twitter’s character count, Google’s meta description and Facebook’s average display length.

Trendy CSS Text Shadows

More design projects are getting away from flat styles with funky touches, such as the bold shadows featured in the Trendy CSS Text Shadows project. The collection of long text shadows includes font, color swatches and the CSS to use the concepts in your projects. Just scroll for bold headline inspiration.


This tool is a documentation site generator made with no statically built HTML files. It is simple and lightweight and includes a smart full-text search plugin. It works with multiple themes.

Harmony UI Kit

The Harmony UI Kit is a Sketch tool that includes geolocation-based tools for mobile application design. The kit is for projects that use mapping with clean elements in a modern, material design inspired style with 10 iOS ready core screens in vector format.

CSS Doodle

The tool for Chrome and Safari generates a grid of divs painted by its own content. All you have to do is copy the copy for your website and the components are just like any other HTML elements and can be styled or controlled using CSS.

CSS Neon Text

Add an animated neon effect to your type with this pen.

Framer Design

Framer Design is a tool built to help create interaction projects. It’s billed as a “smart graphics” tool and code editor in one. The cloud-based tool allows users to do everything in a shareable workspace that’s made for working in teams.


Tired of the same old playlists when working? Makers Music curates tunes just for designers and developers with new playlists each week.


Cymbria is a rough-style or rounded sans serif typeface. The free version includes six weights and has a fun, vintage feel.

Idler Pro

Idler Pro is an upgraded, refined, and greatly expanded version of the layered type family, Idler (2011). The Idler system is meant for big, bold headlines and allows the user to layer the various “weights” to create colorful, three-dimensional looks. It has a number of weights and a great collection of accented characters.


Metrosant is a geometric typeface – a quite trendy option – that’s bold and easy to read. It includes a full character set and plenty of additional glyphs.

Miller Salt/Summer Paradise

This pair of handwritten fonts have a brush style look that can work great for headline or display purposes. Miller Salt has a bold almost cursive style and Summer Paradise is more of a modern handwriting option. The font pair is a freebie with a Pixelbuddha subscription.


Moare is a decorative, fingerprint style typeface. It includes an upper- and lowercase character set and has a light feel.


Montecantini has a distinct old-school travel style look and feel. It could be a great display option for elegant applications.

Quiet Streets

Quite Streets is reminiscent of old movie posters with a sleek feel. It includes upper- and lowercase characters and numerals. The slab style includes alternating thick and thin strokes and is a nice display option.

Wavehaus 1.005

Wavehaus is a geometric sans serif typeface with multiple weights and upper-and lowercase character sets. It also includes numerals and common punctuation. It is easy to read and has a modern feel.

Bundle: 750 Fully Customizable Infographic Templates – only $19


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;}

from Webdesigner Depot https://www.webdesignerdepot.com/2017/06/whats-new-for-designers-june-2017/

Popular Design News of the Week: June 12, 2017 – June 18, 2017

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

RIP Web Forms – You will not Be Missed!


10 Common Mistakes When You Create Website Buttons


How 17 Lines of Code Improved Shopify.com Loading by 50%


New & Improved Google Design


The Web Designer’s Guide to Flexbox


The App that Does Nothing is What your Smartphone Needs


Nutella Uses an Algorithm to Design Millions of Unique Jars


AmplitudeJS: The HTML5 Audio Player for the Modern Era


iOS 11 Preview


A Better Web Launch Checklist


Houzz: A UX Case Study


2017 Logo Trends


10 Basic Principles of Visual Design


Programming is not a Craft


Crello: A Graphic Design Tool for Everyone


Why Green Branding Needs to Die


How to Create the Perfect Design Resumé


Topol.io: Beautiful HTML E-mails Easily


Why Scalable UX is the Next Revolution


This Tool Reveals What WordPress Plugins & Tools Other Sites Use


Binky – A Fake Social Media App that’s Better than the Real Thing


The Perfect Paragraph – A Web Typography Learning Game


25 Sites to Download Free Stock Images in 2017


Results of the Ultimate CSS Survey 2017


An Interesting Day 2017


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

LAST DAY: Ultimate Universe Bundle: 100+ Breathtaking Design Elements – only $18!


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;}

from Webdesigner Depot https://www.webdesignerdepot.com/2017/06/popular-design-news-of-the-week-june-12-2017-june-18-2017/