What’s New for Designers, November 2017

Fall into something new this time of year, with a collection of challenges, tutorials and new tools to speed up your workflows. This month’s collection of new design and development tools is sure to inspire you to try something a little different or add a new skill or tool to your repertoire. 

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!


November is #Codevember with a coding challenge for all designers this month. There’s a new challenge each day—you can play catch up—that will help you stretch your creative muscles. Each day includes a code prompt. Create a sketch each day during the month, share (using #codevember) and browse other designs. You can also find it on Twitter. https://twitter.com/codevember_ This is year 2 of the project, with new creative challenges.


Bottender is an open-source JavaScript framework for building cross-platform bots. What’s neat about it is that it works to create a consistent bot-based experience across platforms, such as Messenger, Slack and Telegram.

Responsive Screenshots

What if getting screenshots of a website for desktops, tablets and mobile devices was as easy as entering a URL? The Responsive Screenshots tool—which is in beta—does that. Enter the URL, wait for the “magic” to happen (it takes 5-10 seconds) and then grab your images.

Frappe Charts

Frappe Charts is a GitHub-inspired chart tool for the web with zero dependencies. You can create bar charts, line charts, scatter charts, pie charts and percentage charts just by uploading data. And every chart is attractive and user friendly with easy editing ability.


Gather inspiration with an online collaboration tool designed to make beautiful and useful mood boards. Moodily allows everyone on a team to contribute to a mood board so everyone can see where design inspiration for a project is coming from. Plus, users can comment and help shape the direction of the design.

Teachable Machine

Teachable Machine is a Google experiment using artificial intelligence concepts where you can teach something to your computer using the camera. Without coding, you’ll see just how machine learning works live in the browser.


WhatRuns is a browser extension that helps designers and developers see all the tools powering a specific website. It works with Chrome and Firefox.


Do you ever struggle with collecting fonts for desktop use? With the new FontBase tool, you can activate any typeface from the Google Font library with just one click on to your local computer for use. It works on Mac, Windows and Linux. You can even organize and preview fonts without having to search through the Google database, so only the fonts you like—and use—will be on your computer.

Crello Animated Designs

Grab a few animated templates and add your messaging for social media, blog posts or email designs. The elements include great designs and all you have to do is add text or objects to make it your own in a flash.

App Cost Calculator

How much does it actually cost to build an app? This simple tool helps you figure out the answer with a series of questions based on your business needs. At the end, you’ll get a custom PDF report with the answers to help plan an app budget.

Polygon Generator

Everyone needs a good SVG polygon shape every now and then. This pen allows you to create custom polygons and generate a code snippet for a lightweight option. (And it is a lot of fun to play with.)


Paintcube is three-dimensional painting software that you can use online. Paint 3D models, use a layering system for texture and export all your elements when complete. (You can even open them later in Photoshop.) This web-based tool works on any device.

Logo Crunch

Logo Crunch is a multi-resolution logo maker that makes high-resolution logos legible at lower resolutions. It can be used to create favicons or app icons with ease. Just drag and drop your logo into the browser tool to try it out.

Froala Design Blocks

This kit includes 170 responsive design blocks for web or mobile apps. Each block is based on the Bootstrap Library, making them a perfect kit for building beautiful websites. Components include contents, footers, forms, headers, testimonials and more.


Have you ever wanted to tweak another website design and share those ideas with a team? SiteMod allows you to do just that. The tool lets you add edits to a website and share them in real-time (great for design agencies or freelancers).


Without having to code, you can create voice apps for popular platforms, such as Amazon’s Alexa, without coding. This visual tool can help you design for the voice-activated web.

Vera Block

Vera Block is a giant kit of Photoshop and Sketch components in a mockup-style so you can create killer screen images. Every screen design is made for you to customize with 140 screen options in four categories, so you can mock up practically anything.

Yummy Meals Vector Set

This set of 29 hand-drawn illustrations is digitized for use in any food-based design. They could help jumpstart a menu or restaurant website design. Each image comes in AI, EPS, PSD, SVG and PNG formats.


Check readability and make sure your copy is ready for the web. Textalyzer can help improve your writing by showing potential issues and perform a search engine optimization analysis to help you rank better with common search engines.

Tutorial: How to Write a JavaScript To-Do App Using HTML and CSS

Jump in and learn something new with this tutorial on how to write a to-do app without JavaScript. The minimal design uses HTML and CSS for animations and interactions. Test the app, play with the source code or try the walkthrough and build it for yourself.

Tutorial: How Open Source Licenses Work

In a world where we play with and share code snippets all the time, it is important to understand how all these free and open source licenses work. This guide explains all the different licensing options, what they mean and how to apply them to projects that you create.

Autumn Moon

Autumn Moon is a uniform stroke-width simple script that’s easy to read. It comes with a wide range of characters and is free for personal use only.


Bahagia is a charming signature-style typeface with sleek curves and simple shapes. It could be used for display and includes upper- and lowercase letters, alternates and numbers.

Crash One

Crash One is a handwriting-style typeface with plenty of lettering styles for display use. The character set includes capitals, two sets of lowercase letters (thick and thin), numbers and ligatures. It has a fun, whimsical style that could work for simple branding or social media messaging.

Heading Pro

Headline Pro is a beautifully-designed premium typeface with a geometric style and high legibility. The design will optimize space on screens and includes a robust family with eight weights and italics for everything from display to boy text.


Rosella is an elegant serif typeface family with a wide stance, making it great for display text. It has a copperplate style and comes with six weights, including inline, deco and flourish styles.

Vtks Madalena

Vtks Madalena is a grunge-style uppercase typeface for display use. The character set includes only 26 letters and can make a fun display option.


Popular Design News of the Week: November 6, 2017 – November 12, 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.

Using Flow to Design Experiences


The iPhone X is a User Experience Nightmare


Never Use Futura


Building a Personal Brand


Design Tools for 2018


Google Slides UI Kit


SEO is Dead, Long Live SEO


Questions UX Designers Should Be Asking


The Modern Web Design Process


UX & Cognitive Psychology – Hand Picked Collection of the Best Resources


What Happened to Threadless?


The Current State of Element Queries


City Lights — a Suite of Beautiful Dark Themed Goodies


Orcaso.io – Gamify your Team Work and Get Things Done Super Faster


How to Avoid Decision Fatigue


UI Confusion Almost Sunk a US Destroyer


Site Design: Blackout


The End of the Cloud is Coming


Sketch Syntax Highlighter Plugin


Feelings & UX – How do They Influence in Our Designs?


We Don’t Need the iPhone X


Facebook.design: Apple iPhone X and 8, Google Pixel 2 and 2 XL, and Samsung Galaxy S8


IBM Plex – New Open Source Typeface from IBM


The Gif & the Art of Storytelling


Facebook and Google are Actually Net States. And They Rule the World


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


Comics of the Week #414

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…

The hermit traveler

No recognition


Creative solution

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


Infographic: 46 Conversion Rate Optimization Hacks

Infographic: 46 Conversion Rate Optimization Hacks

If we’re not mincing words, web design is the business of getting people to buy stuff, or buy into stuff. Except, you know, it’s on the web. And unlike with printed ads, or TV ads, we have to make sure it works in every browser.

Original source




Infographic: 46 Conversion Rate Optimization Hacks Gallery Infographic: 46 Conversion Rate Optimization Hacks Design Infographic: 46 Conversion Rate Optimization HacksIf we’re not mincing words, web design is the business of getting people to buy stuff, or buy into stuff. Except, you know, it’s on t…

Original source

Infographic: 46 Conversion Rate Optimization Hacks

If we’re not mincing words, web design is the business of getting people to buy stuff, or buy into stuff. Except, you know, it’s on the web. And unlike with printed ads, or TV ads, we have to make sure it works in every browser. Nowhere is this more literally true than in ecommerce. Hence, we find ourselves always chasing traffic, clicks, and our holy grail: the almighty conversion.

That sounds kind of cynical, and more than a little religious; but I prefer to think of it as making sure we all get to eat. Eating is good.

In order to keep us all full of steak tacos with soft white cheese and green salsa, our friends at Website Builder compiled a list of 46 ideas to help you make your ecommerce site convert more users. For example:

  • Use the word “Pricing” – This resulted in a 160% increase in conversions when compared to “Request a quote”.
  • Remove social media share buttons – A nearly 12% increase.
  • Customer reviews – Including them yielded a nearly 60% increase in sales.
  • Personalized pictures – The lovely people at 37Signals put a picture of an actual person up, and got a 102% increase in conversions.

These ideas are presented in a handy infographic, which we’ve provided below. Give it a look if you need some new ideas. Do be sure to check out the sources at the bottom for more information on each of these starting points.

Props to Website builder for compiling all of this information, and for letting us share it here.


Why Designers Should Start Fights

Why Designers Should Start Fights

Why Designers Should Start Fights

It’s one of the worst parts about being a designer: Being forced to create work you feel is subpar. Work that’s absolutely doomed to fail. Designers go through this every day.This isn’t exclusive to designers, but it’s especially destructive because our work is often devalued

Original source

Design Bucket List: 10 Projects Everyone Should Try at Least Once

Design Bucket List: 10 Projects Everyone Should Try at Least Once

It’s easy to get caught up in the everyday routine if you are a website designer. Whether you are managing sites for clients or taking care of a company website, it is important to step back from the daily grind to keep your design chops

Original source

How to Setup Facebook Instant Articles on WordPress

It’s no longer enough to rely on Google to provide your website visitors. Social media has become an incredibly powerful force for driving website traffic in recent years and has been overtaking search referrals for several years already. It’s important to make your content highly shareable if you want to take advantage of social media. The most important step to…. Continue Reading

The post How to Setup Facebook Instant Articles on WordPress is written by Rachel Adnyana and appeared first on WPKube.

Design Bucket List: 10 Projects Everyone Should Try at Least Once

It’s easy to get caught up in the everyday routine if you are a website designer. Whether you are managing sites for clients or taking care of a company website, it is important to step back from the daily grind to keep your design chops fresh.

Working on projects outside of that primary role is a great way to stay inspired, fresh and even bring new skills and ideas back to your primary work. But where do you start? We’ve got a list of 10 “side” projects that every web designer should try at least once. You’ll be surprised at how much you might learn and bring back to the websites you are working on.

1. Design a Postcard

You’ll find very quickly that designing something for a printed product will teach you a lesson in control. Web designers are able to expand the canvas as needed to get all the information in a design; that’s something you can’t do with a printed product.

Whether it is a postcard, business card or brochure, there’s something nice about designing within the constraints of space. (There’s also the great feeling that comes with actually touching a product you made on paper.)

What this type of design will help with most of all is gaining an understanding of different canvases and the relationship between print and digital publishing. From converting color mixes for print to thinking about how big something will be in real life, working on a printed design requires a new set of processes.

2. Build Something with Code

If you are one of those designers that starts projects in Photoshop or Sketch with a visual outline, consider working the other way and code a design outline. Start with a simple one-page design and work on refining your HTML and CSS skills in the process.

If you are a web designer/developer that starts with code, consider tackling the project with a more visual framework first.

Approaching projects in a new manner will give you a better understanding of all the elements that go into the design, and a better appreciation for other team members that contribute to projects in different ways.

3. Design an App

Have you stretched your design skills to an app design yet? Creating a mobile responsive app is a lot different than a responsive website in that you have to plan differently.

While some of the techniques are similar, designing something that will only be accessed on a mobile device presents new challenges and opportunities. Focus on the user experience when designing an app; you’re likely to find that the thought process is quite different from a standard website because users will interact with the design in a different way.

And it’s not just touch versus click; everything from forms to gamification techniques to location information is different with app design. (And then if you want to launch, you’ll have to navigate Apple and Google Play store rules and specifications.)

4. Work with JavaScript

JavaScript can be a strange programming language for the uninitiated.

But if you are designing in today’s web landscape, there’s a strong possibility JavaScript will be involved. Start with a primer from CodeAcademy.

Mozilla also has a great primer on the programming language if your familiarity with JS only goes as far as “I know a plugin uses it.” (If that’s the case, you’ve got some reading to do.)

5. Write a Blog Post or Tutorial

There’s nothing like explaining something else clearly to other people to make you think about how you do something. Teaching–especially by writing a blog post or tutorial–can be a great way to help you pick apart and understand why something you do all the time works.

Plenty of blogs [including this one] are looking for designers to highlight how to do cool things with tools such as Sketch, show off shots on Dribbble, or even share code snippets on GitHub.

Explaining how to do something will help you think about why you do it in that way. Do you have a good workflow or practice that others can learn from? Share a little of that knowledge with the design community.

6. Design a Big Data Visualization

While most designers have put together some type of infographic, but have you designed a data-focused project? (We’re not talking a handful of facts and icons.)

Think big data, with complicated tables and lots of values that must be simplified into a user-friendly design. The design challenge for you is figuring out what kind of format will work best to help users understand the information. How do you break it down visually?

Every type of data is different and this kind of project can be a giant challenge. If you need a place to start, the Data Viz Project is a smattering of chart types and how to make the best use of them based on the date provided. (It will definitely help jumpstart your project.)

7. Create a Style Guide

Just like creating a blog post of tutorial will help you understand how to do something, creating a style guide will help you understand why you do things a certain way.

Here’s the other bonus to creating a style guide: It can help you spot and clean up inconsistencies in existing website projects. Go back and work up a style guide for a website that’s finished where the guide was neglected. Go through the design as you create the style guide to ensure that it follows the rules. (As you know, many of the rules shift after launch based on user needs.)

8. Make a Logo

There are a lot of designers that despise creating logos. It can be a cumbersome venture and making a brand make isn’t as easy as people tend to think.

But you should do it anyway.

Start by trying to create a logo with your name to use on your portfolio site. Start with a simple logotype if you aren’t ready to create a more visual concept quite yet. Think about mood and brand. And don’t forget to design something in vector format that can be used in full- or single-color applications.

9. Build a Newsletter Template

A good email newsletter template can make or break the effectiveness converting users from the inbox. While creating a newsletter template might not sound like the most fun job, it can be quite the design challenge.

It takes a little HTML and the canvas size is set in terms of width. You also have to think carefully about design techniques and whether they will or will not work in an email. (Elements such as colored backgrounds or animation don’t work in all email clients.)

A custom newsletter template can set your company or clients apart from others as well because the branding will match across the web, making it easier for users to identify the brand.

10. Draw Something by Hand

You need to create something with pencil (or pen) and paper regularly.

This is the one project that might not ever see the light of day, based on your individual sketching skills.

But the creative power that comes from sketching is hard to beat. Drawing something – from stick figures to doodling your name to mapping out a wireframe – will unlock creative power in parts of your mind that you might not be using regularly if you don’t step away from computer screens.

Think, draw, daydream. It’s all part of the same creative process. And all your projects will be better if you try it every now and then.


Not sure how to add these projects to your repertoire? They are all great starters for personal projects, such as a portfolio. You can also ask to pitch in new ways at your creative shop.

Talk to a fellow designer and see if you can tag team on a different type of design project to get those creative juices going. And make sure to reciprocate and offer to help them learn more about website design.