Pins all about design

Curated design bookmark made for designers and creators.

Recent posts

Frontend
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.
User Interface, Design System
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.
Curatorial
Digital Bookshelf
Digitalbookshelf is a must-read book list for product managers and designer.
Design System
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
Design, Iconography
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.
For Free, Creativity
Humaaans
Humaaans is a Sketch and Invision Studio template to mix and match character illustrations. Free
Design System
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
Design System
Zero Height
With Sketch Plugin, Invision and Story integration, Zero Height allow you to create design system manual and resources in a WYSIWYG environment. $12 for Team
Design System
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
Frontend, Curatorial
Must-Watch CSS
An Aggregated list of must-watch CSS talks on the topics of CSS framework, animation, scalability and more.
Curatorial
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.
Curatorial, User Experience
User Friendly - A Medium Collection
Handpicked user experience articles by official Medium editors.
Mockups
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.
Photography
Squoosh
Built by Google Chrome Labs, Squoosh optimises image with instant compression preview. Popular settings like MozJPEG, OptiPNG, WebP are included.
Creativity
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.
Iconography
Google Material Design Icons
Free beautifully crafted material design icon sets created by Google. Icon styles include filled, outlined, rounded, two-tone and sharp.
Typography
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.
Curatorial
Mnmllist
A minimal listing curated by Ronalds Vilcins. Only 3 things are curated in each field.
Photography
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.
Color, Frontend
Colorbook
Colorbook converts color easily to any printing and coding format. It also visualises color pairing as web design color scheme.
Photography, For Free
Unsplash
Unsplash offers 550,000+ license-free high-resolution photos available to download without sign in. Credits are much appreciated thought.
Color, User Interface
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.
Copywriting
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.)
Iconography
Iconmonstr
4277+ coherent and simple free icons for personal and commercial use, created by Germany designer Alexander Kahlkopf.
User Interface, Prototyping, Mockups
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.
Color
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.
Color
Coolors.co
Coolors.co is a super quick multi-color schemes generator. User-generated palettes are also available for export. Paid upgrade for iOS App, Chrome Extension, and Adobe Addon.
Color
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.
Frontend
Grid System Library
Free iOS, Android and Bootstrap grid system, works on Sketch, Figma and Adobe XD and Illustrator.
Prototyping, For Free
Overflow
User-flow diagramming tool tailored for designers. Works with Sketch, Figma, Adobe XD and Photoshop.
Color
WebGradients
Subtle color gradients collection made for website background. CSS code, PNG, Sketch and PSD previews are all set.
Typography
Web Typography 101
Andréa Crofts wrote a starter guide for Web Typography. All beginners should check it out.
Typography, For Free
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
Prototyping, Team Collaboration, For Free, User Interface
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.
For Free, Design
unDraw
unDraw is a MIT licensed illustration library that is ready for your website and match with your palette.
Color
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.
Typography
Kerntype
Kerntype is a fun game to learn how to distribute the space between letters, which is called "Kerning".
Typography
Fontpair
Font Pair does an excellent job in previewing font pairing options that are available on Google Fonts.
Curatorial
Designers:Watch
Designers:Watch showcases the must-see documentaries for designers and creators.
Color
Sip
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, which allows cross-app usage.
Prototyping, Curatorial, Team Collaboration
Feedback Tools
A curated directory of tools for collecting feedbacks
Photography
Nik Collection
Nik Collections 2018 is a photo retouch toolkit with 7 plugin that works with Adobe Photoshop and Lightroom.
Creativity, Team Collaboration
Paste
Creative presentation tools for collaboration available on Web and iPad. Crafted by the acclaimed app developer who built Paper, FiftyThree.
Color, For Free
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
Productivity
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.
Photography, Creativity
Adobe's Make It Now
Adobe's quick video tutorial series within 60 seconds to master Creative Cloud apps.
Typography
Typekit Practice
Collection of resources to practice typography, created by the Adobe Typekit team.
Curatorial, Typography
Typewolf
Typewolf is an indie typography resources blog curated by Jeremiah Shoaf. It recommends fonts and explores trending typography site on daily basis.
Color, Creativity
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.
Color
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.
Iconography
The Noun Project
Royalty free icons that can be used anywhere in your workflow, including Mac, Office, Adobe Createive Suite and Google Doc.
User Interface, Prototyping
Unsplasher
Free sketch plug-in that auto import free licensed photo from Unsplash to your sketch project.
Curatorial, Photography
The Observers
Curated photo books recommendations by visionaries and creatives by notable photographers and filmmakers
Productivity
Shortcuts.design
A shortcut database collects all the shortcuts in design & development apps.
Curatorial
Lapa Books
Develop your creative and design skills by reading. Lapa Books is a free ebook collection curated for web designers.
Music
Icons 8 Music
High quality royalty free music library offered by Icons8, credits and link back to the site are required for distribution.
Mockups
Smart Mockups
Smartmockups generate ready-to-use product mockups from website link or screenshot. Must-use for creating portfolio or marketing asset.
Photography, Creativity
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.
Copywriting
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.
Notion
Notion is a collaboration workspace that can take notes, build a knowledge base, assign tasks and projects.
Design
Figma Dictionary
Figma team introduces a new learning resource for all design-related jargon in one page.
Copywriting
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
Design
Screely
Screely turns screenshot into browser mockup with color detection. Free beta right now.
Typography
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.
Prototyping
Framer X
A brand new design tool that combines layout design, prototyping and collaboration, created by Framer team. App in private beta right now
User Interface, Design
Design + Code
Interactive e-book to teach how to design and code a React app for iOS 11. Written by Ming To.
Map, Design, User Interface
Snazzy Maps
Customized Google Map style apply on your website.
Map
test
test