Resources for designers and front-end developers

Below is a selection of tools for designers and front-end developers. We highly recommend you view them all. We hope that you will find something useful for yourself.

/ photo Nancy <I'm gonna snap! CC

Search

• StackOverflow : Programming Questions;
• UX Stack Exchange : User Experience Issues;
• Graphic Design Stack Exchange : Graphic Design Questions;
• MDN : Mozilla Developer Network (useful documentation);
• Creative Commons : Search for images not protected by copyright.

Online communities

• Hacker News : Startup culture, news and trends;
• Designer News : Design culture, news and trends;
• Product Hunt : Start-up culture, news and trends;
• Sidebar : Design culture, news and trends;
• Dribbble : Design culture and trends;
• Behance : Design culture and trends;
• / r / web_design : Subreddit about web design.

Interview

• Dorm Room Tycoon : Interviews with designers;
• Designation Blog : Designation curriculum blog;
• Humble Pied : Short video interview;
• InvisionApp Blog : InvisionApp Blog.

Adaptability

• Responsive Patterns : A set of templates and modules for responsive design;
• Responsive PX : Viewport setting;
• Lettering.js : Adaptive typography;
• Adaptive images ;
• Adaptive tables ;
• Convert PX to EM ;
• Template library Media Queries ;
• The most comprehensive guide to responsive web design ;
• This Is Responsive : Template Library;
• Ink : Creating adaptive interfaces;
• Responsinator : View the viewport on different devices.

Front-end development

• Grid : Simple words about front-end development;
• Code Guide : Standards for HTML / CSS;
• How to keep up with the development of front-end technologies ;

Front-end frameworks:
')

• HTML5 Boilerplate ;
• Blueprint ;
• ZURB Foundation ;
• 99Lime ;
• Skeleton ;
• Centurion ;
• Comparison of front-end frameworks .

Javascript frameworks:

• AngularJS ;
• EmberJS ;
• BatmanJS ;
• Backbone ;
• SproutCore ;
• Yui .
• Semantic ui .

Teamwork

• Scratchpad ;
• Firepad ;
• Snaggy ;
• Bounce ;
• DropCanvas ;
• WeTransfer ;
• SquadEdit ;
• CodePen ;
• JSFiddle ;
• Editr ;
• Snipt ;
• Chop ;
• Screencast-o-matic ;
• Beam It ;
• Copybar ;
• JS Bin ;
• Dablet ;
• Floobits ;
• Stypi ;
• Paste ;
• LiveWeave ;
• VolaFile ;
• Talky ;
• ShareFest ;
• Appear ;
• CoderPad ;
• Criticue ;
• RedPen .

Analytics

• Google Analytics ;
• Piwik ;
• MixPanel ;
• GoSquared ;
• Flurry ;
• Chartbeat ;
• Parsely .

Hosting Platform

• CloudCannon : Free static websites hosting;
• Pancake : Free Static Websites;
• Backlift : Free static websites;
• Site44 : Free static websites;
• DivShot : Free static websites;
• Meteor : Framework for JavaScript applications;
• Firebase : Framework for JavaScript applications;
• Forge : Hosting static websites.

Front-end development tools

• A huge list of resources for front-end development ;
• Introduction to CSS3 transitions ;
• Bounce.js : A tool for creating CSS3 animations;
• WOW : CSS3 animation library;
• CSS palette ;
• CSS3 generator ;
• CSS3 ;
• CSS gradient generator ;
• CSS button generator ;
• LoremPixel : Placeholder Images;
• Lipsum : Placeholder texts;
• WordMark ;
• LayerStyle ;
• border-image-generator ;
• iCheck : Setting checkboxes and radio buttons for jQuery;
• SVGeneration ;
• Grumpicon : Create backup PNGs for SVG files;
• Memo on CSS3 animations ;
• animate.css ;
• Pure : Small responsive CSS modules;
• Tridiv : 3D CSS;
• ToDoMVC : JavaScript resources;
• SuperheroJS : JS Library;
• Unheap : jQuery Plugins;
• Random user generator ;
• Avatars for the user interface;
• User interface names ;
• WhatTheme : Search for similar sites;
• IE browser testing ;
• An article on front-end and interface guides .

Templates and Template Libraries

• Subtle Patterns : Visual patterns;
• First Time UX : Overview of new user experience;
• Library of design solutions for user interaction;
• Subjective-C : Innovative iOS-interfaces;
• UI Cloud : The largest user interface database;
• Android Patterns : Patterns for Android;
• Android UI Patterns : User Interface Patterns for Android;
• Android niceties : Screenshots of the most beautiful applications on Android;
• Android App Patterns : Android application templates;
• UX Archive : Archive for iOS;
• Pttrns : A set of templates;
• Mobile-Patterns : A set of patterns;
• Inspired-UI : A set of templates for iOS;
• Capptivate : A set of templates.

Native mobile design

• Design Guide for Android ;
• Design Guide for Apple devices ;
• Android emulator for the browser ;
• Color generator for Android elements ;
• Template icons for Google Play ;
• Android Asset Studio : Various generators;
• Patterns for sketches ;
• Android icons ;
• Design Tips for Android .
• Teehan + Lax : Photoshop interface template for iOS;
• What you need and what not to do when working with iOS ;
• PlaceIt is a service that allows you to pick up the real image of the device you are interested in and insert the image of your own application / service in the place of the device screen.

Prototyping

Web development (HTML, CSS, JS). JS frameworks:

• FramerJS ;
• jQuery Mobile ;
• Codiqa ;
• Ratchet ;
• Hammer JS ;
• Origami for Xcode;
• Avocado from IDEO for Origami;
• Adobe After Effects ;

Drag-and-drop tools:

• Proto.io ;
• Flinto ;
• Marvel ;
• InvisionApp ;
• Pop ;
• Fluid UI .

Typography

• Font selection : a practical guide;
• Practical typography : Matthew Butterick's guide;
• Instacalc : Translation from em to px;
• TypeScale ;
• Thinking with Type : Typography Resource;
• WhatTheFont : Font search;
• MyFonts ;
• Typewolf : font guidelines;
• Type Finder : A tool for finding suitable fonts;
• Typekit ;
• Cloud Typography ;
• Adobe Edge Web Fonts ;
• Google fonts .

Colour

• Color palette ;
• Paletton ;
• Kuler : Color wheel;
• Color Lovers : Color trends;
• ColorHexa : Encyclopedia of color;
• BrandColors .

Registration

• Style Tiles : Tiled patterns;
• Webstiles : Tiled patterns;
• PNG Gauntlet : Image Compression;
• Pic Resize : Formatting images;
• Logo Lounge ;
• Logopond ;
• Global brands ;
• I <3 wireframes ;
• Wireframe Showcase .

Links and reminders

• All API memos ;
• Memo on jQuery ;
• An article about 100 amazing developer tools;
• Learn Layout : Learning to design layouts using HTML / CSS (simple and visual).

Code evaluation and refactoring

• HTML markup (W3) ;
• HTML Tidy : Assessing and cleaning HTML files;
• CSS Assessment (W3) ;
• CSS cleanup ;
• CSS shrinking ;
• Procssor : CSS Reorganization;
• JavaScript Compressor : Compress JavaScript.

Other HTML / CSS Components

• Mailchimp email design links;
• Beautiful Email Newsletters : Examples of well-designed letters;
• Campaign Monitor : Full CSS Guide;
• SitePoint article on markup HTML5-forms.

Training (online courses)

• Treehouse ;
• Codeschool ;
• Learnable ;
• Udacity ;
• Freecodecamp ;
• Lynda ;
• Codecademy ;
• Skillfeed ;
• SitePoint ;
• Gibbon ;
• Free books on programming .

Manuals

• CSS Tricks ;
• CodePlayer ;
• Design Tutsplus ;
• Code Tutsplus ;
• Pineapple.io ;
• Photoshop Secrets ;
• Scotch ;
• Little Big Details ;
• Design Principles FTW ;
• Medium : Design and UX;
• Code Visually ;
• DesignInstruct ;
• Bento ;
• Cody ;
• ZURB Quips : Diverse Q & A.

" Sandboxes"

• ZURB Playground : Repository for technical experiments;
• CoDrops ;
• CSS Deck ;
• UIBox : Updatable HTML / CSS / JS component library.
• Six UX ;
• UI Parade ;
• media queries ;
• lovely ui : a collection of mobile design elements;
• Awwwards : Design projects competition;
• FWA : Competitive design projects;
• Give n go ;
• The Expressive Web .

Icons

• Favicon Generator : Website icon generator;
• Favicon Cheat Sheet : Memo on website icons.

Drag-and-drop-solutions and constructors

• WebFlow ;
• Bricks ;
• Easel ;
• HTML5 Up .

Icons

• IconFinder ;
• IconArchive ;
• IconMonstr ;
• The Noun Project ;
• IcoMoon ;
• Fontello ;
• CopyPasteCharacter ;
• FontAwesome ;
• Glyphicons ;
• Icons Guide ;
• Testico ;
• FlatIcons ;
• Flat Icon ;
• Pictos ;
• Symbolset .

Database of photos

• Unsplash ;
• Compfight ;
• Morgue File ;
• IM Creator ;
• Public Domain ;
• PicJumbo ;
• Getty Images ;
• Think Stock ;
• Death to the Stock Photo .

Other sources

• Designmodo ;
• Despreneur ;
• Sketch App Resources ;
• Konigi Tools ;
• SmashingMagazine ;
• Freebbble : Design solutions with Dribbble;
• 365psd : Free PSD files;
• Design Freebies ;
• Photoshoplr : Photoshop plugins, scripts and extensions;
• FreePik ;
• Flaticon ;
• 52 Weeks of UX ;
• Hack Design .

PS Another fresh selection in our blog: More than 350 free tools for developers .