Collective #83
Inspirational Website of the Week
The Wrist website by Matt Johnston is all about exploring typography, colors, clock mechanics, and everything else that goes into watch design. The animated watch illustrations are stunning and the flat design combined with harmonic colors makes this our pick this week.
Get inspiredBackgroundCheck
An absolutely brilliant script that automatically switches to a darker or a lighter version of an element depending on the brightness of images behind it. Made by Kenneth Cachia.
Check it outRulersGuides.js
RulersGuides.js by Mark Rolich is a Javascript library which enables Photoshop-like rulers and guides interface on a web page.
Check it outJSModeler
JSModeler by Viktor Kovacs is an interesting JavaScript framework for creating and visualizing 3D models.
Check it outCSSconf.eu 2013 - Intro.css
Jed Schmidt will make you laugh with CSS. Check out this great and funny introduction of the CSSconf 2013.
Watch itOptimizing UI icons for faster recognition
Alla Kholmatova explains what is important for icon design and which factors play a role when creating recognizable icons for user interfaces.
Read itBlendMe.in
BlendMe.in is an incredibly useful Photoshop extensions that allows to access tons of free icons for direct usage in your design.
Check it outTools for image optimization
A great collection of image optimization tools by Addy Osmani.
Read itGood Content Is Too Valuable To Die
Vitaly Friedman reminds us how important good web content is and how sad the removal of excellent articles like the ones of .net magazine is.
Read itDesigning In The Open
A great article about working publicly on a website design, the pros and cons, including examples and tips by Brad Frost.
Read itCreating a Realistic Rain Effect with Canvas and JavaScript
Marek Brodziak shows how to use his fantastic project rainyday.js to create an incredibly realistic looking rain effect. Make sure to check out the demos here.
Check it outOne Page Scroll
A great plugin by Pete R. for creating an Apple-like one-page scrolling website like the iPhone 5s website.
Check it outThis is Now Clone
A clone project by Greg Thompson of the very popular This is Now live instagram feed sites. The goal was to create a simple to follow, light-weight version of what the Now project accomplished.
Check it outSolved By Flexbox — Cleaner, hack-free CSS
A fantastic showcase by Philip Walton of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.
Check it outDrawingboard.js
Drawingboard.js by Emmanuel Pelletier is a canvas-based drawing app that you can integrate easily on your website.
Check it outFlat Rounded Square UI Kit (PSD)
A pixel-perfect UI kit designed by Freepik for WebAppers.
Get it<dialog> element: Modals made easy
Chrome Canary has landed support for the <dialog> element behind a flag. Eiji Kitamura explains how this can be used to display popups in a web page. Also, check out this demo.
Check it outHow To Create Flat Style Breadcrumb Links with CSS
Learn how to create a clean looking, flat style breadcrumb navigation with CSS from this tutorial by Chris Spooner from Line25.
Check it outFree Font: PEYO Regular
PEYO by Shannon Lim is a playful, uppercase, geometric sans serif typeface designed for display type uses such as headlines, posters and titles.
Get itFree Font: Paihuen Mapuche
Benjamín Rivera created this exquisite looking font with a unique touch.
Get itA Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App
An excellent in-depth article by Kyle Peatt on how to improve the perceived performance of a mobile site.
Read itFree iPhone Mockups (PSD)
Some really professional looking and nice iPad mockups by Regy Perlera.
Get it