Archive for September, 2016

Free download: Weem handwriting font

September 30th, 2016 No comments

Serious in intent, legible, playful in style. When designing a font, it can be tough to nail an aesthetic that embodies all three of those things. Well, Gatis Vilaks and Evita Vilaka did it when they created Weem, a free handwriting font for all of your headline and block-of-text needs.

It has that sketchy style you look for in any handwriting font, but is clearly meant to be used in projects with a serious tone. The designers say as much. They also state that it’s intended to be used for titles, headings, and blocks of text.

Despite being free, it’s no “light” version. It comes with all of the characters and punctuation you might expect, in upper and lower case. It also has all of the accent marks, umlauts, and extra lines or squiggles you might need when writing in languages that aren’t English.

Download it here for free, and keep an eye on its creators for whatever they might make next.

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

16 Print-Ready Creative Resume Templates – only $24!


Categories: Designing, Others Tags:


September 30th, 2016 No comments

A clever idea for text-based spinners in CSS. You set the “keyframes” in the content, and cycle through them by moving the line of text to the left in the actual keyframes.

<button>Loading <span class="loading"></span></button>
.loading.bar2::after {
  content: "▁A▂A▃A▄A▅A▆A▇A█";
  animation: spin8 2s steps(8) infinite alternate;
@keyframes spin8  { to { transform: translateY(-12.0em); } }

This is a whole repo of them by Max Beier. I’ve isolated one of them here:

See the Pen text-spinners by Chris Coyier (@chriscoyier) on CodePen.

Direct Link to ArticlePermalink

text-spinners is a post from CSS-Tricks

Categories: Designing, Others Tags:


September 30th, 2016 No comments

A new animation library by Christine Cha:

A simple library to take care of complex CSS animations.

You define the animations through its JavaScript API and execute them via DOM events, then the animation is done through applying inline CSS.

Seems to me it’s not so much for helping build complex CSS animations, but for doing animations through CSS that you can’t otherwise do, because you can’t get things like mouse or scroll position in CSS.

Direct Link to ArticlePermalink

Choreographer-js is a post from CSS-Tricks

Categories: Designing, Others Tags:

10 creative event websites  

September 30th, 2016 No comments

I love designing event websites. They’re ephemeral and almost always simple (no complex user interfaces here). This combination affords us a unique opportunity to test new boundaries of web design, to try a creative navigation pattern, test an unfamiliar layout, play with a interesting animation library or, dare I say, hark back to the days of Flash and ActionScript 3.

Here, I’ve assembled a list of 10 event websites that are creative, inspirational and just downright beautiful. Check them out below.


This website for a 4-day, invite only designer/developer meetup in Moab, Utah (where do I get an invite?) is downright stunning. The graphics are beautiful; the layout is exciting. And special props for making the registration form look good, too–why do we so often create awesome websites but boring forms?

Sonny’s Smokin’ Showdown

This BBQ competition might be low tech event, but their website is pretty high tech. Scroll down to explore the event venue three-dimensionally. There’s overlayed text, but you hardly need it. The complex visuals tell you all about the event without reading a word. Great work Sonny’s Smokin’ Showdown.

Global Wave Conference

Restraint is often the sign any great creative professional, a philosophy that was embraced warmly by the Global Wave Conference website. Check out the subtly (but cleverly) animated logo (a GIF) and hamburger menu (an SVG), which give the site a high-end feel without distracting from the serene photography and typography.

I also liked the clear, concise event description, a must for any newer event.


Two words: sticky header. This may not be the most cutting-edge site on the list, but the navigation is terrific. And particularly with event websites, a sticky header (with a clear, contrasting call to action button to “register now”) can be a great way to increase your conversion rate and ticket sales. Whatever you do, don’t make this button hard to find.

Note this event occurs twice annually — once in the summer and once in the winter. Navigate to summer (top left) and you’ll see that the designers have done a great job creating different sites for each event. The sites they have very similar interfaces, but are nicely distinguished and appropriately seasonal.


Large type Futura can be tricky to pull off without reminding us of a Volkswagen ad, but the website for Loop pulled it off. Loop is a three-day conference focused on music and technology. The site is inconspicuously simple but downright beautiful.

I loved the body copy gradient too, which is a mask of the homepage background gradients. (For those interested, text gradients can be achieved with CSS using the background webkit clip property.)


Thanks to some very creative designers (and the JQuery UI draggable library), this Norwegian event website is a digital representation of the event’s more analogue concept: shapes juxtaposed in space. My only suggestion: give me something to do after browsing the website. Ask me to register, capture my email, send me directions, and don’t leave me wanting more.

Valio Con 2016

When you’re assembling photos for an event, the speakers will inevitably send you 34 different portrait styles: you’ll get a closeup, one in black and white, and one with the speaker holding their favorite cat. This makes consistency difficult. Fortunately, the designers for ValioCon — an annual conference for designers and makers in San Diego — have answered this challenge with creative photo filters that homogenize the portraits, and make the overall design feel more far consistent (and awesome).

Bloomberg BusinessWeek Design 2016

When I first saw this site, I couldn’t help but thank god for not being color blind. I mean, how the hell are we supposed to know where to click if every link is the same color? This creative site for the Bloomberg BusinessWeek design conference–which features bold typography and a strong, engaging layout–seems to vehemently ignore every user interface guideline in the book, yet it remains easy to use. Kinda.

Elevate Summit

The Elevate Summit, formerly UserConf, is a conference for customer support and community managers and will be held in October this year. Their event website stands out for being exceptionally clean and beautiful. I liked the “5 reasons to attend” listing (which was pretty convincing) and the embedded registration form. I loved the chat button; I don’t see that often on event websites, but I think it’s a great way to engage attendees.

Hashtags Unplugged

This website for a gallery event in New York has a clean design and great typography. But my favorite thing about this site was the navigation. Select “the artists” under a given hashtag and the entire page animates to an artist listing. The transition is subtle and modern, and it doesn’t make you feel like you’ve lost your place in the stack (which is all too important when we introduce new navigation patterns to your users).

16 Print-Ready Creative Resume Templates – only $24!


Categories: Designing, Others Tags:

Desktop Wallpaper Calendars: October 2016

September 30th, 2016 No comments

A new month means new wallpapers! This journey has been going on for eight years now, and each time anew artists and designers from across the globe challenge their artistic skills to cater for some fresh inspiration on your desktop. And, well, it wasn’t any different this time around.

This post features their designs for October 2016. The collection is a mix of ideas and styles, of wallpapers that are a little more distinctive than the usual crowd. All wallpapers come in versions with and without a calendar and can be downloaded for free — just choose your favorite. A big thank-you to everyone who shared their ideas with us! Happy October!

The post Desktop Wallpaper Calendars: October 2016 appeared first on Smashing Magazine.

Categories: Others Tags:

Quill 1.0 – Better Rich Text Editor for Web Apps

September 30th, 2016 No comments

You know rich text editors. They turn simple text fields into some type of text processing environment. Each WordPress blogger uses one, the TinyMCE, which is still standard in the world’s most popular CMS. Quill is a more advanced member of the same species.

Quill’s Project Website. (Screenshot: Dr. Web)

Quill 1.0: Open Source and Independent

After about two years, the open source project Quill has finally made it to the stable version 1.0. After this long development time, one of the positive results is the excellent documentation. Smaller and younger projects can barely keep up with that. Good documentation is crucial, especially in the open source area, as it is a common thing that previously very active contributors suddenly lose interest in the project and abandon it.

Quill is a JavaScript solution without any other dependencies, but with its own API. All you need to be able to efficiently work with Quill is located in the JavaScript file, which you integrate into your documents as usual.

How to Add Quill to Your Web App

To equip an element with Quill’s abilities, add the following into your HTML:

<div id="editor-container"></div>

After that, you call the script on the element. This is how it looks:

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'

This is an example of what may happen when someone uses the element:


The Small Bit of Code on the Left Allows for the Result on the Right (and a Lot More). (Screenshot: Dr. Web)

As you can already see in the JavaScript source code, it is possible to modularly adjust Quill to the contained element the way you consider to be right. The individual function modules are integrated into the UI with speaking names. This way, your users get the option to format text in bold only if you added bold to the scope of functions.

Quill: Flexible Due to Its Own API

An API lets you create further function modules depending on your needs, and seamlessly integrate them into the UI of Quill. Maybe your web app has to be able to gather CAD drawings, or whatever. Generally, Quill does not need configuration. It works out-of-the-box just fine for most application cases.

Aside from expansion modules for features that Quill doesn’t provide, you are also able to replace some of Quill’s functions with your own, if the given ones are not sufficient. You should set up all modules as separate JavaScript files, but it is also possible to directly add them to Quill, although this isn’t advisable when keeping simple updates in mind.

The option to expand or alter the feature scope of the editor is possible due to one of Quill’s biggest unique characteristics; the DOM abstraction level Parchment. In the Quill blog, you’ll find a detailed presentation of the abilities of Parchment. Learn how you could recreate the UI of the popular publication platform Medium.

You’ll get a good feeling for the modern tool’s flexibility when looking around on the project page’s interactive playground, or by using Codepen.

The developers value the assessment that Quill is very consistent over all platforms, and always works the same way, even being fully functional on tablets and smartphones, as well as solely creating standard HTML. The entire input and output work via JSON.

Quill: Availability and License

Quill is available for the integration into your website via download, but it is also possible to embed it via a CDN ran on Amazon Cloudfront. The source code is available on Github. As it is an open source project, there are no limitations regarding using it. Thus, you can even utilize Quill for commercial projects under the BSD license.

Categories: Others Tags:

Template Literals

September 29th, 2016 No comments
Cover of Let's Learn ES6

The Template Literal, introduced in ES6, is a new way to create a string. With it comes new features that allow us more control over dynamic strings in our programs. Gone will be the days of long string concatenation!

To create a template literal, instead of single quotes (') or double quotes (") quotes we use the backtick (`) character. This will produce a new string, and we can use it in any way we want.

Basic usage:

let newString = `A string`;


The great thing about Template Literals is that we can now create multi-line strings! In the past, if we wanted a string to be on multiple lines, we had to use the n or new line character.

// The old way
var myMultiString = 'Some text that I wantnOn two lines!';

With a Template Literal string, we can just go ahead and add the new line into the string as we write it.

var myMultiString= `This will be
on two lines!`;

This will produce a string with a new line in it. The ability to do this with expressions makes Template Literals a really nice templating language for building of bits of HTML that we will cover later. But what about concatenation? Let’s look at how we can dynamically add values into our new Template Literals.


In the new Template Literal syntax we have what are called expressions, and they look like this: ${expression}. Consider the code below.

let name = `Ryan`;

console.log(`Hi my name is ${name}`);

The ${} syntax allows us to put an expression in it and it will produce the value, which in our case above is just a variable that holds a string! There is something to note here: if you wanted to add in values, like above, you do not need to use a Template Literal for the name variable. It could just be a regular string.

console.log(`Hi my name is ${'Ryan'}`);

This will produce the same output. These expressions do more than just let us put in variables that contain strings in them. We can evaluate any sort of expressions that we would like.

let price = 19.99;
let tax = 1.13;

let total = `The total prices is ${price * tax}`;

We can also use this with a more complex object.

let person = {
    firstName: `Ryan`,
    lastName: `Christiani`,
    sayName() {
        return `Hi my name is ${this.firstName} ${this.lastName}`;

Here we have a person object with a sayName() method on it. We can access the properties from an object inside of the ${} syntax.

HTML Templates

With the ability to have multi-line strings and use Template Expressions to add content into our string, this makes it really nice to use for HTML templates in our code.

Let’s imagine that we get some data from an API that looks something like this:

    "id": 1,
    "name": "Bulbasaur",
    "base_experience": 64,
    "height": 7,
    "is_default": true,
    "order": 1,
    "weight": 69,

This “imaginary” API is of course the pokeapi! With this data structure in mind, let’s create the markup that would show this Pokemon.

function createMarkup(data) {
    return `
        <article class="pokemon">
            <p>The Pokemon ${} has a base experience of ${data.base_experience}, they also weigh ${data.weight}</p>

Without having to use a library like Handlebars or Mustache we can create nice and easy-to-use templates in our JavaScript!

Tagged Templates

Another features of Template Literals is the ability to create Tagged Template Literals. You create a function and this function will look like any other function, however it looks different when you call it:

function myTaggedLiteral(strings) {

// ["test"]

Notice there are no parens () when we call the function! We apply a Template Literal where the parentheses would be. As a parameter to our function we get an array of the strings in our literal. Let’s expand on the string we send to the function and we will have it include an expression, and we will include a new parameter in our function as well.

function myTaggedLiteral(strings, value) {

let someText = 'Neat';
myTaggedLiteral`test ${someText}`; 
// ["test", ""]
// "Neat"

When we use an expression we can access that from the next parameters and this keeps going. Say we added another expression.

function myTaggedLiteral(strings, value, value2) {

let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`; 
// ["test", ""]
// "Neat"
// 5

This is pretty powerful: it allows you to take the data used in a string and manipulate it to your liking.

Reusable Templates

Let’s look at a simple use case for Template Literals. If you remember from above, we saw how Template Literals work really great for, well, making templates! Let’s take that a step further and create a function that would allow us to create reusable templates. The idea here is that we can create the initial template and then pass in data for it to use later.

const student = {
    name: "Ryan Christiani",
    blogUrl: ""

const studentTemplate = templater`<article>
    <h3>${'name'} is a student at HackerYou</h3>
    <p>You can find their work at ${'blogUrl'}.</p>


const myTemplate = studentTemplate(student);
// Output will look like this!
// <article>
//    <h3>Ryan Christiani is a student at HackerYou</h3>
//    <p>You can find their work at</p>
// </article>

Let’s look at implementing our templater function.

const templater = function(strings, ...keys) {


The first thing you will notice is this ...keys parameter. The ... syntax is what’s called Rest Parameters; it will gather any parameters the function has and create an array for us.

The next thing we want to do is return a function that is going to access our object. The returning of the function is what allows us to call and pass in our student data, like this: studentTemplate(student).

const templater = function(strings, ...keys) {
    return function(data) {


With this data now available to us we need to perform some manipulation. The process is as follows. First, we need to create a copy of the strings array. We make a copy in case we want to reference the original later. Then we need to loop through the array of keys, and for each one of those, grab the data from the object that matches the key (notice how in this example we pass in a string in the ${}) and place it in our array where needed. Finally, we need to join it all back together as a string and return it from the function!

function templater(strings, ...keys) {
    return function(data) {
        let temp = strings.slice();
        keys.forEach((key, i) => {
            temp[i] = temp[i] + data[key];
        return temp.join('');

You will notice that this is not an exhaustive example. We have no way to accommodate nested data or array values; it is simply just strings. But I hope this example helps to illustrate what you can start doing with Tagged Template Literals.

Ryan Christiani is the Head Instructor & Development Lead at HackerYou in Toronto and also the author of Let’s Learn ES6, a book with everything you need to know about the latest syntax in JavaScript.

Template Literals is a post from CSS-Tricks

Categories: Designing, Others Tags:

Loading Polyfills Only When Needed

September 29th, 2016 No comments

We had this question on ShopTalk just the other day. We’re so (rightfully) worried about web performance, it feels like we shouldn’t be loading polyfills all the time, only when we detect they are needed. Philip Walton:

… too many people building websites today take a “lowest-common-denominator” approach. By that I mean they ship the same bundle of JavaScript to all users (regardless of browser capabilities), and the bundle they ship contains all code required to make the site work in the oldest browser they want to support.

While I understand that this approach is simple, it’s not respectful of your users, and it prioritizes your convenience over their experience.

In a slightly-surprising twist, his tactic is to:

  1. Cut the mustard for browsers that support everything needed
  2. If passes: kick off everything else
  3. If anything fails: load all polyfills then kick things off

The idea is to keep things simple, and not get yourself into a complicated state where you’re trying to accommodate for the situation where “the browser can now be in 32 different states”.

Direct Link to ArticlePermalink

Loading Polyfills Only When Needed is a post from CSS-Tricks

Categories: Designing, Others Tags:

How to annoy your freelancer

September 29th, 2016 No comments

Being a freelancer means that you’ve chosen a different type of lifestyle. If you work at home, then you’re not rushing to fight traffic every morning. You’re probably not wearing formal attire. Most likely, you don’t consider yourself quite so mainstream. And yes, that does make you very cool (not to mention good-looking)!

The trouble is that clients, family and friends also see you as different. They may actually have a pretty hard time wrapping their heads around your unconventional career. That can lead to some odd requests or just plain crazy situations.

So, how do you annoy a freelancer? Here are some slightly-dramatized versions of situations that I’ve found myself in that were annoying and/or just plain baffling.

Play a game of hurry up and wait

Client: “I need this site to be up in a week!”

Freelancer (reluctantly): “That’s going to be tough, but I’ll give it everything I’ve got to launch on time. Just keep in mind I’ll need all the content within 48 hours.”

Fast-forward to three days later…

Freelancer (proudly): “Great news – I’ve finished the site’s theme! Just send me that content and I can get everything ready for launch.”

Client: *crickets chirping*

Now, six weeks later…

Freelancer (miffed): “Um, do you have that content yet? I thought this was a rush job and now it’s well past your specified launch date. I’ve sent several requests for content and left voice mails.”

Client: “Oh, something came up. We’re putting the site on hold for now. I will get back to you after our committee meets next month.”

Four months after that…

Client: “Hey, attached is all of our content! You may notice that we’ve added some new stuff and changed the functionality around. Can we have this ready by the end of the week?”

Freelancer (opening a bottle of wine): *unintelligible moaning sound*

Does this mean that the client is a horrible, unfeeling monster? Not necessarily.

Isn’t it amazing how everything is rush-rush until the ball is in the client’s court? While delays are understandable, there aren’t many good excuses for disappearing from view and then coming back several months after-the-fact demanding immediate action on your part.

What this really shows is just a lack of respect (even if it’s not intentional or personal in nature) for a freelancer’s time. When a client delays, you have no choice but to move on to other projects that need taken care of. It’s not as if you can then just drop those other projects the minute the M.I.A. client suddenly reappears.

Does this mean that the client is a horrible, unfeeling monster? Not necessarily. Is it annoying? Heck yes.

Assume they have no life because, hey, they work at home

It’s a lovely Saturday evening and you’re at a family gathering…

Client: “Could you please replace the text on the About Us page with the attached copy? Thanks!”

A few hours later, you come home and check your email…

Client: “This is completely unprofessional! I expect you to respond quickly when we need something done. Please get this done ASAP.”

Freelancer (majorly ticked): “I do apologize, but I was away at a family event this evening. I had no idea changes would be coming in. Typically I am not in the office on weekend nights waiting for unexpected work to arrive.”

There’s a fine line between expecting outstanding service (which, as a client, you should expect) and requiring non-stop attention.

One of the biggest misconceptions of freelancers is that somehow we’re just sitting around waiting for a client to send work to be done immediately. Now, to a degree I guess that’s true. We’re here to serve the needs of our clients, right? But sometimes this can be taken to a whole new level of strange.

There’s a fine line between expecting outstanding service (which, as a client, you should expect) and requiring non-stop attention. That being said, it is up to freelancers to make their policy regarding after-hours availability known.

Treating invoices not-so-seriously

Freelancer (hopeful): “Hi! Attached is the invoice for the design. If you have any questions or concerns, please don’t hesitate to contact me.”

Two months after the due date…

Freelancer (quizzically): “Hi! How are things going with the new site? I wanted to reach out and make sure that you received the invoice I sent a couple months ago — did it come through?”

Three months after the due date…

Freelancer (starving): “Here’s another copy of the design invoice. Please confirm receipt ASAP. I have also sent a copy to your mailing address.”

To me, a good comparison to this situation would be receiving your electric bill. How seriously would you treat that bill? Odds are you would probably want to pay it quickly so that the lights don’t get shut off.

Unfortunately, not everyone treats an invoice from a freelancer with quite the same seriousness. You might be seen as someone who is a hobbyist or without the resources to fight for your payment.

The good news here is that you can solve a lot of issues by having a contract that stipulates when and how you’re to be paid for your work. That will at least give you some leverage against someone who is either refusing to pay or is just exceptionally slow to do so. It also sends a message that you are a professional and deserve to be treated as such.

Schedule a pointless meeting

Client: “Can you come by the office tomorrow at 10am?”

Freelancer (frazzled): “Well, tomorrow might be difficult as I have a lot of work to get done. What did you want to discuss?”

Client: “I just wanted to run a couple of ideas by you. See you then!”

While it’s pretty safe to assume that most people don’t enjoy pointless meetings, freelancers may have reason to dread them even more. Why? Well, consider that a solo freelancer is usually working on multiple projects at once. Meetings, while sometimes a necessity of doing business, can take already limited time away from getting things done.

There are situations when meetings make perfect sense. But there are many times when a simple phone call or Skype session will suffice. I’ve taken to suggesting the latter as a time-saving means of communication that will help get things done more quickly. After all, completing a project is in everyone’s best interest.

You have the power to set expectations

As you may have surmised, I am a person who can be easily annoyed! Part of the problem may be that client expectations of freelancers are a little different than that of larger agencies. The other half of that equation is that I haven’t always set the expectations as well as I should have.

While it won’t lead to eternal bliss, I speak from experience when I say that it really can cut down on those annoyances.

That’s just part of the learning experience and it can take time to understand. Once you realize that, you can set policies which clarify what a client can and should expect from your relationship. While it won’t lead to eternal bliss, I speak from experience when I say that it really can cut down on those annoyances.

Speaking of which, what annoys you as a freelancer? Leave a comment and share what pushes your buttons and your solution for dealing with it.

LAST DAY: 65 Gorgeous Marble Paper Textures with Extended License – only $9!


Categories: Designing, Others Tags:

September 29th, 2016 No comments

What’s new for designers, September 2016

In this month’s edition of what’s new for designers, we’ve included productivity apps, email apps, free icon sets, UI galleries, color tools, CSS frameworks, stock image tools, and more. And as always, we’ve also included some awesome new free fonts!

Almost everything on the list this month is free, with a few high-value paid apps and tools also included. They’re sure to be useful to designers, 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 @cameron_chapman to be considered! is a task manager for Gmail. It interfaces with tasks, email, documents, calendar, projects, and contacts.

Diverse UI

Diverse UI is a collection of free stock photos of people from a variety of racial and ethnic backgrounds to bring some diversity to your designs.

diverse ui

Designer Emojis

Designer Emojis is a collection of 45 vector emojis you can download for free. They highlight the tricky yet rewarding job of being a designer.

designer emojis

Founder Catalog

Founder Catalog is a collection of what founders of some leading startups are writing about right now.

founder catalog


Stocky is a source of free stock photos, videos, graphics, and music that you can use for both personal and commercial projects.


Startup Pitch Decks

Startup Pitch Decks is a collection of real world fundraising decks from startups like Airbnb, Buffer, YouTube, Mattermark, Buzzfeed, Crew, and more.

startup pitch decks


Adioma is an easy to use infographic generator that lets you create things like timelines, organizational charts, and more.



UIDB is a search engine that lets you find live examples of any UI. You can browse all the examples or check out the most popular tags.



Grid.Guide is a tool to help you create pixel perfect grids in your designs. Just enter your requirements and it will show you all the whole pixel combinations you can use.


Sunsama is a calendar built just for teams. It helps you run focused meetings, prioritize tasks, and more.



Kin is a better calendar experience. It connects with Google, Office365, Trello, Facebook, GitHub, Meetup, Eventbrite, and Wunderlist.



Timely is an automatic time tracking app for freelancers and teams. It works in the background, letting you focus on your work.



Duet is a self-hosted alternative to Trello. It’s completely brandable, so you can make it match your business, and it has a one-time fee rather than a recurring monthly charge.


Checkout Pages

Checkout Pages is a curated directory of the best checkout pages, with additional links to directories of pricing pages, product pages, and store pages.

checkout pages


Hud is a tool for managing and cataloging your UI patterns so you can share them with your team.


Four Hour Book Club

If you’re an avid listener of the Tim Ferriss Show, then you’ll want to check out the Four Hour Book Club, which catalogs all of the books mentioned on the show.

four hour book club


Napkin is a startup idea app for iOS. It lets you capture all of your business ideas in a simple, clean design.


Apply Pixels

Apply Pixels is a set of industry standard design tools and UI templates for supercharging your design workflow.

apply pixels

UI Temple

UI Temple is a curated collection of website designs to inspire you. Sort by industry, page type, color, and more.

ui temple


Kelir is a free color picker app for Mac. It’s also got tools for creating palettes and gradients.



Wing is a minimal CSS framework. It’s perfect for smaller projects that don’t need all the features of a framework like Bootstrap or Foundation.


Word Geeks

Ever need on-demand content written for your design projects? Check out Word Geeks, an exclusive network of on-demand writers.

word geeks


Stockmagic is a tiny app that lives in your menu bar that lets you find the best images on 25 of the biggest free stock photo services.



Rush is a communications app that lets you easily switch between mail and chat. It also includes a group calendar and other tools for teams.



Polymail is a powerful email productivity app that’s now available for iOS. It includes tons of advanced tools for contact management, too.


Open Icons

Open Icons are a set of 119 open source line drawing icons that include everything from sharing and downloading to bananas and ghosts.

open icons


Land is a free ornate display font inspired by whimsical hand-lettering.



Banaue is a free brush font with 104 characters, including all the basic glyphs you could want.



NS-James is a free geometric sans serif typeface that’s versatile and highly legible. The “light” version is free.



Luciano is a fancy handwritten font with upper and lowercase glyphs.



Sadistic is a decorative display font perfect for horror projects. It comes with a complete set of Latin and Greek characters.


Free Brush

Free Brush is a brush style font created for the website and downloadable for free.

free brush


Hydrant is an inline shadow grunge font. It has a vintage style that’s perfect for branding and headers.


Rocket Shadow

Rocket Shadow is a free vintage-style font that’s great for retro headers and branding.



North is a simple, geometric sans-serif typeface that’s great for things like logos and posters.



Noelan is a modern calligraphy typeface that includes swashes for automatically connected initials and terminals.


LAST DAY: 65 Gorgeous Marble Paper Textures with Extended License – only $9!


Categories: Designing, Others Tags: