Pins all about design

Curated design bookmark made for designers and creators.

  • Design Systems by Figma

    A publication curated by Figma Team regarding building a design systems. Include tutorials, templates, case studies and more.

    Article
  • Figma Tips and Tricks

    Consolidated by Tom Johnson , this piece of writing offers very helpful tips and tricks for maximizing Figma's possibility.

    Article
  • Releasing Design System

    Series of writing uncovering the process of of shipping an effective, collaborative design system, with examples from Atlassian, Financial Times, Shopify and more. Written by Nathan Curtis from Eightshapes

    Article
  • Cultivating Originality In Photography

    Los Angeles based photographer Josh S. Rose shares his way of searching originality in this visually homogenous world, by establishing your difference and values.

    Article
  • WWDC 2019

    Recap of Apple's WorldWide Developer Conference in 2019, with the announcement of iOS 13, SF Symbols, SwiftUI and more.

    Video
  • Figma Best Practices

    Best Practices of FIgma, illustrated by the staff from Figma. How should you approach design system and components, here is a comprehensive guide from Figma team.

  • Get Waves

    Waves have become a popular choice for website page background. Generate svg waves easily with customisable shape, steps and color with getwaves.io

    Tool
  • Design Question Library

    Created by Stanford Design School. A set of questions helping you to go beyond the basics and dive deeper into the nuances of design.

    Curatorial
  • Eva Design System

    A deep learning semantic color generator for user interface states.

    Resources
  • Font Famous

    Free vector media logos that you can embed on your site directly.

    Resources
  • Piqsels

    Royalty-free photos under CC0 license, pre-defined size proportion for device specific download.

  • Google I/O

    Google Developer Conference is the best place to learn about latest trend and technology developing for Android, Chrome etc.

    Video
  • Struct

    Struct is a USD$28 illustrations template helping you to kickstart your landing page design.

    Resources
  • Dropbox Design

    Revamped Dropbox Design website include blog articles and tool kits focusing on building a creative culture at work.

    Resources
  • TED Talks on Design

    Curated design playlist with all TED talks regarding design

    Video
  • Airbnb Design

    Airbnb Design offer insights and behind the scenes work on building travel communities around the world

    Resources
  • Brandcolors

    Helpful reference collecting 600+ brand color codes all over the world.

  • In/Visible Talks

    Video archive of In/Visible Talks, conference about creative practice.

    Video
  • An Event Apart

    Keynote videos from An Event Apart, a web design conference specialize for UX and front-end development

    Video
  • US Blaak

    US Blaak is a sharp-serif font created by Unidaas, suitable for headline and title use. Bold font is free to download.

    Typeface
  • My Creative Type

    Creative personality test created by Adobe Create team

    Game
  • ManyPixels

    New flat style illustrations uploaded every week created by Manypixels. Support changing colors for SVG download

    Freebie
  • Public Sans

    Public Sans is the new typeface created by US Government, edited from Libre Franklin.

    Typeface
  • Design Systems by Figma

    A publication curated by Figma Team regarding building a design systems. Include tutorials, templates, case studies and more.

    Article
  • Magdeleine

    Free Stock Photo library with color filter to match your design.

  • Awesome Design Tools

    Curated by the team of Flawless , Awesome Design Tools holds a large collection of Design Tools, categorized in their functionality.

  • Cloudflare Color

    Built by Cloudflare Design Team. Colorbox allows easy palettes preview on UI elements, importing color palettes from existing websites and also preview accessibility index on color contrast.

    Tool
  • Bungee

    Bungee first caught my attention with unique horizontal scrolling design and vertical typography. But it is more than a font optimized for vertical signs, the stylistic alternates open up so much more styles. Have I not mention the font is free on Google Fonts as well?

    Typeface
  • Icon SVG

    You can now display SVG icon without installing icon font, IconSVG offers customisable and clean-up SVG icons. Icon size and weight and even curve or straight ends are available as an option. However, the icon library is a bit short for start (around 150 icons).

    Freebie
  • Frontend Checklist

    Frontend Checklist help checking all the normal practices for development before launch.

  • Colorbox

    Color Scheme generation tool built by Lyft Design Team. Able to create smooth transition between palettes by adding color steps. Read more on their approach to color design.

    Tool
  • Loupe - Design Conference by Framer

    Focusing on digital design for teams, Loupe is a design conference hosted by Framer in Amsterdam.

  • Can't Unsee

    Can’t Unsee presents two very similar mockups. One is pixel perfect and one is not. While some design principles are very standard (like spacing, line height and visual cues) , some may not agree with all the "correct" design decisions. Built by Alex Kotliarsky.

    Game
  • Figma Tips and Tricks

    Consolidated by Tom Johnson , this piece of writing offers very helpful tips and tricks for maximizing Figma's possibility.

    Article
  • Font Awesome 5 Icon Template

    Figma ready-to-be component project files for Font Awesome 5. Created by Jonatas Amaral

  • Adobe Max Online

    Recap of every year's Adobe Creative Conference Max online.

    Video
  • Blobmaker

    Blobmaker help you to create random blobs in SVG to catch with design trend.

    Tool
  • Swiss in CSS

    Swiss in CSS pay tribute to "Swiss" design style which originated in 1940s Switzerland. Posters were recreated and animated by Jon Yablonski.

  • Design Matters

    Design Matters is a design conference all about crafting digital products. Conference held annually in Copenhagen, Denmark. Keynote videos are available to watch for free.

    Video
  • Pttrns

    Pttrns is a great place to kickstart your UI research. Similar user interface patterns and functions are posted across different apps.

  • Colormind

    Colormind works best with website design, applying color palette to demo landing page and various bootstrap components.

  • Clippy

    Clipping generates CSS clip-path property in a very intuitive way. It comes with a lot of template shapes but at the same time each anchor point are customisable.

  • Refactoring UI

    Refactoring UI started as design tidbits to work smoothly with developer. It stresses on visual hierarchy and systematic approach to UI design from a developer point of view. Brand new ebook and resources are available for $149.

  • Digital Bookshelf

    Digitalbookshelf is a must-read book list for product managers and designer.

    Book
  • Relay For Figma

    Relay for Figma is currently still in beta, aiming to streamline the asset delivery from design to production. $5 per month for each Figma file

    App
  • Logobook

    Logobook collects a variety of logos for design inspiration. Categorizing in letters, numbers, shapes and even business nature. Logobook is a great reference to kickstart the brainstorming process.

  • Humaaans

    Humaaans is a Sketch and Invision Studio template to mix and match character illustrations. Free

    Freebie
  • Releasing Design System

    Series of writing uncovering the process of of shipping an effective, collaborative design system, with examples from Atlassian, Financial Times, Shopify and more. Written by Nathan Curtis from Eightshapes

    Article
  • Zero Height

    With Sketch Plugin, Invision and Story integration, Zero Height allow you to create design system manual and resources in a WYSIWYG environment. Recently added support for Figma Library. Free for 1 user, $12 for Team

  • Visual System

    Visual System is a perfect starter template to kickstart your brand's design system. With support of Sketch and Figma components, everything is customisable from color, font, spacing and elements. $48

  • Must-Watch CSS

    An Aggregated list of must-watch CSS talks on the topics of CSS framework, animation, scalability and more.

  • Design Dots

    Design digest maintained by Tony Gines from USA. Daily website update and weekly newsletters include design products, articles, freebies and even influencers in design community.

  • User Friendly - A Medium Collection

    Handpicked user experience articles by official Medium editors.

  • Angle 2

    Among mockup tools I have used over the years, Angle 2 is the most versatile one as Sketch template. Devices colour, material and orientation are all customisable. New update also includes up-to-date devices like iPhone XS, XR and iPad Pro.

  • Squoosh

    Built by Google Chrome Labs, Squoosh optimises image with instant compression preview. Popular settings like MozJPEG, OptiPNG, WebP are included.

  • Web Typography 101

    Andréa Crofts wrote a starter guide for Web Typography. All beginners should check it out.

  • Figma

    Combining UI design, prototyping, and feedback in one web-based tool, Figma is more than a design app. Users can iterate prototypes in collaboration, and provide feedbacks simultaneously. It is catching up with Sketch for the need in large-scale design projects. Figma is free to try with limited projects with paid upgrade per user.

  • Munsell Hue Test

    Train your eyesight to be laser-like. Munsell Hue Test is a fun yet challenging game to arrange color block by hue order. Lower the score is better.

  • Really Good Emails

    Really Good Emails without any explanation collects the best email copywriting for your customer outreach and retention. Users can also filter emails by categories to look for writing inspiration. (E.g. Behavioral, promotional, transactional etc.)

  • Nik Collection

    Nik Collections 2018 is a photo retouch toolkit with 7 plugin that works with Adobe Photoshop and Lightroom.

  • Feedback Tools

    A curated directory of tools for collecting feedbacks

  • Digital Color Meter

    The most convenient app to grab color code is the one built-in to your Mac. Digital Color Meter is a default Mac utilities app hidden in your Application folder. Simply press Shift + Command + C will copy the value into the clipboard. You can also adjust color profile (native, sRGB, Adobe RGB or P3 etc.) as well as the values to display

  • Fontpair

    Font Pair does an excellent job in previewing font pairing options that are available on Google Fonts.

  • Mnmllist

    A minimal listing curated by Ronalds Vilcins. Only 3 things are curated in each field.

  • Halide Camera

    With minimal design and high-end features, Halide Camera is the best third-party camera available on iOS. It supports focus peaking, manual control, RAW file capture, portrait mode and more.

  • Apple Human Interface Guidelines — Color

    Color section of Apple’s Human Interface Guidelines is a great introductory piece for color design when you are designing websites and apps.

  • Butterick's Practical Typography

    A free typography handbook wrote by Los Angeles based lawyer Matthew Butterick. It offers practical takeaways and popular paid font alternative recommendation for beginners.

  • Designers:Watch

    Designers:Watch showcases the must-see documentaries for designers and creators.

  • Colorbook

    Colorbook converts color easily to any printing and coding format. It also visualises color pairing as web design color scheme.

  • Social Colors

    Material UI collects brand color for the major social media platform. Now you are one-click away from adopting the tone to your own customised banners and buttons.

  • Unsplasher

    Free sketch plug-in that auto import free licensed photo from Unsplash to your sketch project.

  • Grid System Library

    Free iOS, Android and Bootstrap grid system, works on Sketch, Figma and Adobe XD and Illustrator.

  • The Observers

    Curated photo books recommendations by visionaries and creatives by notable photographers and filmmakers

  • Coolors.co

    One-tap super quick color schemes generator. User-generated palettes are also available for export. Paid upgrade for iOS App, Chrome Extension, and Adobe Addon.

    Tool
  • Magic Mirror

    Perspective mockups could be created without leaving Sketch app. Magic Mirror adds the functionality of perspective transformation to Sketch artboards. So users can create high-fidelity mockups in perspective. Paid monthly subscription support up to 4x image quality and symbols.

  • Iconmonstr

    4277+ coherent and simple free icons for personal and commercial use, created by Germany designer Alexander Kahlkopf.

    Freebie
  • Unsplash

    Unsplash offers 550,000+ license-free high-resolution photos available to download without sign in. Credits are much appreciated thought.

  • Sip

    USD$10 with 1 year of updates. Consider Sip as the professional version of Digital Color Meter, it is the best color tool built for pro-user in mind, providing seamless integration to professional workflows and applications. I love how It docks color palettes on top of the screen in a minimalist way, allowing cross-app usage. v2 is available now with more useful features and new pricing model.

    App
  • Hurry Slowly

    A weekly podcast about pacing yourself to improve productivity and creativity. In each episode, guests from creative and business industries share their experience of working.

    Podcast
  • Google Material Design Icons

    Free beautifully crafted material design icon sets created by Google. Icon styles include filled, outlined, rounded, two-tone and sharp.

    Freebie
  • Dribbble Colors

    Dribbble Colors is a hidden treasure for UI designers who are looking for case studies of color adoption. It allows users to search Dribbble shots by color using hex code. Users also can adjust percentage of the containing color within a shot. This tool comes handy to see how a color plays out in other design.

  • Typekit Practice

    Collection of resources to practice typography, created by the Adobe Typekit team.

  • Google Fonts

    Google Fonts is a no-brainer in modern digital design. 800+ font families are available to use for free. You can also use these fonts on your website. There are also so much more language fonts available via early access program. https://fonts.google.com/earlyaccess

  • The Futur

    The Futur is an educating and inspiring video channel made for creative professionals, facilitating creative mindsets and practical business tips. Paid video courses are also available at Futur Academy.

    Video
  • Kerntype

    Kerntype is a fun game to learn how to distribute the space between letters, which is called "Kerning".

    Game
  • unDraw

    unDraw is a MIT licensed illustration library that is ready for your website and match with your palette.

    Freebie
  • WebGradients

    Subtle color gradients collection made for website background. CSS code, PNG, Sketch and PSD previews are all set.

  • Overflow

    User-flow diagramming tool tailored for designers. Works with Sketch, Figma, Adobe XD and Photoshop.

    App
  • Typewolf

    Typewolf is an indie typography resources blog curated by Jeremiah Shoaf. It recommends fonts and explores trending typography site on daily basis.

  • Adobe's Make It Now

    Adobe's quick video tutorial series within 60 seconds to master Creative Cloud apps.

    Video
  • The Noun Project

    Royalty free icons that can be used anywhere in your workflow, including Mac, Office, Adobe Createive Suite and Google Doc.

    Freebie
  • Paste

    Creative presentation tools for collaboration available on Web and iPad. Crafted by the acclaimed app developer who built Paper, FiftyThree.

  • Adobe Capture CC

    Capture photos and auto convert real-life hues into color palettes with Adobe Capture CC. It also directly integrates to to your Adobe CC's swatches if you are a subscriber.

  • Paletton

    Paletton takes on the scientific approach to find the right palette by adjacent and triad colors. It has plenty of previews and simulations to accommodate different scenarios for palette usage.

  • Smart Mockups

    Smartmockups generate ready-to-use product mockups from website link or screenshot. Must-use for creating portfolio or marketing asset.

  • Lapa Books

    Develop your creative and design skills by reading. Lapa Books is a free ebook collection curated for web designers.

    Book
  • Shortcuts.design

    A shortcut database collects all the shortcuts in design & development apps.

  • Cultivating Originality In Photography

    Los Angeles based photographer Josh S. Rose shares his way of searching originality in this visually homogenous world, by establishing your difference and values.

    Article
  • Notion

    Notion is a collaboration workspace that can take notes, build a knowledge base, assign tasks and projects.

  • Edit Any Website

    Two-line script dragging to your bookmark bar, allows you to edit any text on a website. A Great use case for designers and copywriters to preview site style application.

  • Figma Dictionary

    Figma team introduces a new learning resource for all design-related jargon in one page.

  • Hemingway Editor

    Hemingway is a copywriting app that helps you to write readable and short articles. The app offers a minimalistic writing style to edit your piece, suggesting simple phrases, short sentences and use of passive voice. Desktop app versions are available for sale at USD19.99

  • Dafont

    One of the legacy websites offers a large database of free fonts for personal and commercial purpose. Offline usage only as the site does not host the font file for websites.

  • Screely

    Screely turns screenshot into browser mockup with color detection. Free beta right now.

    Freebie
  • Framer X

    A brand new design tool that combines layout design, prototyping and collaboration, created by Framer team. App in private beta right now

    App
  • Design + Code

    Interactive e-book to teach how to design and code a React app for iOS 11. Written by Ming To.

  • Snazzy Maps

    Customized Google Map style apply on your website.

  • test

    test