50 Free Resources for Web Designers from 2014

free_resources2

In this post, I have collated my top 50 FREE resources for web designers from this fantastic year, 2014.

There are libraries for quickly creating CSS charts and animating SVG icons, tools for converting image files to data URIs, web-based apps for creating icon fonts from SVGs, jQuery plugins for touch-enabled and lightweight sliders, JavaScript libraries for creating animated GIFs from any type of media, generators for creating Flexbox layouts… and much, much more.

To help you find exactly what you’re looking for, I’ve broken the resources down into JavaScript Plugins & Tools, CSS Libraries, Tools & Frameworks, and Web-Based Tools & Services.


Free JavaScript Plugins & Tools


lightSlider is a lightweight and responsive content slider jQuery plugin with carousel thumbnails navigation.

lightSlider


BttrLazyLoading is a jQuery plugin that allows your web app or page to only load images within the viewport.

BttrLazyLoading


Gridscrolling.js is a jQuery plugin that lays outs an HTML5 article for you by positioning sections and asides in a grid, and offers an easy cursor navigation and overview map.

Gridscrolling.js


Adaptive Backgrounds is a jQuery plugin for extracting the dominant colors from images and applying it to its parent, allowing your layout to have a blended color scheme.

Adaptive Backgrounds


jNottery is a jQuery plugin that lets you add notes and markers to webpages. All the data is encoded as part of an URL which makes it easy to share or bookmark.

jNottery


HideSeek is a simple, yet customizable live search jQuery plugin.

HideSeek


fontFlex is a lightweight jQuery plugin for dynamically changing font sizes based on the container or browser width.

fontFlex


Gif Shot is a JavaScript library that can create animated GIFs from media streams, videos, or images.

Gif Shot


Ideal Image Slider is a slider plugin that has just the right amount of features, with no bloat.

Ideal Image Slider


SVG Morpheus is a JavaScript library that enables SVG icons to transition from one to the other in a Material Design style.

SVG Morpheus


The Shuffle Images jQuery plugin lets you display and shuffle multiple images by simply moving the cursor.

Shuffle Images


Timesheet.js is a simple JavaScript library for creating beautiful HTML time sheets.

Timesheet.js


Face Detection is an amazing jQuery (and Zepto) plugin for detecting faces on images and videos.

Face Detection


Sweep.js is a lightweight JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HUSL spaces.

Untitled-1


Data Img is a simple jQuery plugin for dealing with responsive image delivery. It works by simply swapping the 'image src' / 'background-image url'depending on screen width.

Data Img


Vivus.js is a lightweight JavaScript class that allows you to animate SVGs, giving them the appearence of being drawn.

Vivus.js


pagePiling.js is a jQuery plugin for creating a pile of sections that you can access by either scrolling or directly by URL.

pagePiling.js


Flow is a static type checker for JavaScript. It can be used to catch common bugs in JavaScript programs without any changes to the code.

Flow


Gif Player is a customizable jQuery plugin that allows you to add play and stop controls to animated gifs.

Gif Player


Naver is a simple jQuery plugin that will automatically turn a basic navigation system into a mobile friendly system.

Naver


Free CSS Libraries, Tools & Frameworks


Materialize is a lightweight CSS Framework that has been based on Google’s Material Design. The framework comes in two different forms, the standard with unminified CSS & JS, and the Sass version, which gives you more control over which components to include.

Materialize


Foundation for Apps (Sass) is an Angular-powered front-end framework for making fully immersive and flexible apps.

Foundation for Apps


Schema is a modular front-end framework (Less) to help you kick-start your process for creating complex interfaces right out the box.

Schema


Flexbox Grid, as the name suggests, is a grid system based on the flex display property.

Flexbox Grid


Blueplate is a lightweight plugin for the Webplate front-end framework. The plugin adds a responsive CSS layout engine and SASS mixin library to an already solid framework.

Blueplate


Magic Animations is a CSS3 animation library with some fantastic special effects.

Magic Animations


Material UI is a combines React components with a CSS (Less) Framework that implements Google’s Material Design. You can grab the Sass version here.

Material UI


Inspired by tools like Compass and Bourbon, Kouto Swiss is a complete CSS framework for Stylus. The framework comes packaged with a huge selection of mixins, functions and utilities , and also includes the power of the caniusewebsite to help your CSS fit your compatibility needs.

Kouto Swiss


Tumblr-Cog-Loaders is an amazing library of animated Tumblr-style cog loading icons. Built with only CSS and SVG.

Tumblr-Style-Cog-Loaders


CSS Plot is a small library of CSS-only charts and graphs.

CSS Plot


Animate.css is a collection of cross-browser animations for you to use in your projects.

Animate.css


Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use Google’s new Material Design language in the worlds most popular front-end framework.

Material Design for Bootstrap


Imacss is a library that converts image files to data URIs and embeds them into a single CSS file as background images.

Imacss


NightTabs is a clean and responsive solution for creating a beautiful tabbed content navigation without any JavaScript.

NightTabs


CSSDevices is a pure-CSS library of flat Apple devices. It allows you to easily add a pure-CSS iOS device to your website to show off the screenshots of your cool new app.

CSSDevices


CSS-On-Diet (COD) is a new preprocessor built specifically for designers. Other preprocessors do have steep learning curves, while COD, with it’s simpler syntax, focuses on allowing you to write CSS faster.

CSS-On-Diet


Marka is an innovative and ‘transform-able’ collection of icons, beautifully and carefully designed to work on the web.

Marka


Web-Based Tools & Services


Font Flipper is a simple web-based tool for browsing and experimenting with the fonts that are installed on your computer.

Font Flipper


Font Family Reunion is a reference tool for looking-up the default font lists on different operating systems.

Font Family Reunion


Type-Finder is a tool for helping you navigate a curated library of typefaces by asking a set of questions that will help to select the perfect font family.

Type-Finder


BADA55.io is tool for finding the most ‘badass’ leet words for your CSS hex colors. You know #b000b5, #bada55, that kind of thing.

BADA55.io


Glyphter is a handy tool for creating icon fonts from SVGs.

Glyphter


SVG Circus is a web-based tool for creating cool animated SVG spinners, loaders and other looped animations quickly.

SVG Circus


Fibonacci is a generator that will allow non-developers to design web page layouts using Flexbox, all without having to learn HTML or CSS.

Fibonacci


Flexy Boxes is a flexbox code generator and learning playground.

Flexy Boxes


EnjoyCSS is an advanced CSS3 generator with an easy-to-use UI that allows you to adjust rich graphical styles quickly and without coding.

EnjoyCSS


Built for font design hobbyists, Glyphr Studio is a free, feature-rich web-based tool for designing fonts.

Glyphr Studio


PatternBolt is a library and generator of SVG pattern backgrounds that you can download as a single CSS or SCSS file.

PatternBolt


LoremFlickr is a simple and free image placeholder service. The images are pulled from Flickr and have a Creative Commons license.

LoremFlickr


StyleStats is a Node.js library and web-based tool for collecting and displaying useful CSS statistics.

StyleStats


SC5 Styleguide is a useful tool that helps you generate style guides from stylesheets. It can be used as a command line utility, gulp task or grunt task

SC5 Styleguide


Compressor.io is a tool for compressing the size of your images. It supports JPEG, PNG, GIF & SVG, and offers both ‘lossless’ or ‘lossy’ levels of compression.

Compressor


TinyJPG is a web-based tool for reducing/compressing the file size of your JPEG images.

TinyJPG

via marketblog.envato.com

Advertisement

Currently what are the functions of a web designer on a project?

I sat down and was going back from drawing a website to actually coding in a browser.

It seemed hard and maybe even impossible. I was scared. Could I do this? But how hard could it be? I’ve done this before …

Code

I got so used to designing (drawing) websites in Adobe Photoshop that I didn’t know where to start. Then I realized that I had already done it in the past with far worse tools then the ones we use now. Web design is not graphic design. It may consist of some of the elements of graphic design but it’s not the same. So why did we start drawing websites in Photoshop in the first place?

What Happened to Web Design?

To find an answer we have to go back to the definition and the core of web design.

According to Wikipedia, the term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up.

When I started taking interest in web design all we had was Notepad to work with. We learned the basics of HTML and designed websites with just that. Later CSS came along, so we learned and started using it. What else do you need?

It’s not that simple. Websites started to evolve. More and more, we started using graphics to enhance websites and make them prettier. Higher bandwidth speeds made that possible. Soon, PHP, ASP, SQL, CMS, SEO, JavaScript and Flash animations all became a part of the web design we know today. It became too much for a web designer to have all the knowledge needed to build a website from scratch. So we divided the role like this:

Web designer

We killed the web designer. We replaced him with a graphic designer that had to draw the website design in Photoshop and send it to a web developer to start transforming the PSD to HTML and CSS. Consequently, the web designer forgot how to code and started drawing most of the time. He drew all the pages of the website and all the interactions and website elements in Photoshop. He drew lines, backgrounds, images text and other typographic elements. He drew everything. It’s easy to draw a pretty website in Photoshop once you master the tool. It was up to the web developers to actually build the website, based on those drawings. We ended up with an overcomplicated process that either didn’t bring the best results or took a very long time to do.

Responsive Web Design Comes Along

When the internet became mobile, we finally realized that drawing websites in Photoshop isn’t ideal. Mainly because there’s a lot of devices with different screen sizes, and drawing a website for each is really a waste of time. We wanted a solution that would speed up the web design process and produce an adaptive product that works regardless of device.

Bring back the web designer.

Web designer

We should never have replaced the web designer. We should have added other types of designers, developers and copywriters to the web design team, but keep the web designer. That’s what we’re doing with designing in browser concept. We’re bringing back the role a web designer used to have. And now, you’re not a web designer if you don’t know how to code. You may be a designer that knows how to use Photoshop to draw pretty interfaces and websites. But you’re not a web designer. To become one, learn HTML, CSS and at least basic JavaScript. Then, build a website with your text editing tool.

It doesn’t have to be perfect. The first website I ever built was utter crap — text, links and images (mostly animated gifs) on a dark background. But I learned how websites work.

You can’t design something if you don’t truly understand how it works.

Merely drawing a website in Photoshop is not designing. You don’t build anything with that. What you do is draw the instructions for developers to follow. You draw, you don’t build and most certainly you don’t design. It’s like if an architect drew plans for buildings, without knowing what materials would be used.

Wire-framing

Wireframing

When I was happy with the sketches I decided to make some high-fidelity wireframes. And I used Photoshop to do that —  I found out that it’s quicker than any other tool. But the goal is to simply quickly redraw sketches. In Photoshop it’s very easy to start focusing on details that don’t matter yet. That’s why this step should be done quickly (especially if you use Photoshop, Illustrator or any other graphic editing tool).

Prototype

The next step, which is important from the UX point of view, is to create a prototype. By now, I already had an idea of how the website will look. Now I had to find out how it would feel using it. And since I decided to go mobile first, I made a prototype for the iPhone. I used high-fidelity wireframes I made in Photoshop and uploaded them to Marvel. (Marvel is a great tool allowing you to quickly make prototypes from images or .psd files.)

Visual

After I tried out the prototype, I decided to make quite a few changes. The website didn’t as easy to navigate as I anticipated. (That’s why you build a prototype early in the process.) I could also make the prototype directly in the browser, but I think that Marvel app made it a lot quicker in this particular case.

Visual Design

Visual Design in Photoshop

In my plan for the website redesign, I initially had a task called “Visual Design.” It was planned to be executed after the creation of the prototype. The idea was to draw each page in Photoshop and take care of the details. But I changed my mind. I cancelled this task and went straight to coding. 

Coding

I started with a blank HTML document. I decided to focus on typography with some real content first. So I took an old article I wrote and put it in the HTML. I tried out various combinations of typefaces and sizes. There was no logo, no graphics and no navigation elements. I wanted to focus on how the content on the website will look on different screens, very much in the way Tim Brown explains it here.

When I was happy with the typography, I started adding other elements. Photo background in the top area, logo and navigation were the first additional elements. That’s when I realized that the basic layout of a page and an article should always be the same — unlike what I had done in the wireframes and prototype.

And that’s why going straight to coding really is productive. You can make the changes as soon as you realize that there’s a problem. And it’s more likely that you’ll find these problems sooner, because you’re working on the actual, working product.

Final Touches and CMS Integration

In the end, the decision to skip the drawing saved me a lot of time. Drawing each of the pages would be very time consuming (not to mention that my perfectionism doesn’t allow me to make something halfway). So instead on focusing on details in Photoshop, I was focusing on details straight in the browser. After I made the mobile first website as I wanted it, all I had to do is adjust it for bigger screens and integrate it with a CMS. I decided to try a flat-file CMS Kirby instead of WordPress. (I’ll share that experience with you later.)

Final Touches

I Skipped Photoshop & Saved Time

I planned to launch my website in the second half of March. But because I skipped the drawing of the website in Photoshop and went straight into the browser and coding, I launched it on March 2. The decision to skip drawing each page in Photoshop saved me at least two weeks.

I Improved My Coding Skills

But saving time is not the only good thing about going straight to coding in browser. The other cool thing about it is, that I improved my coding skills drastically. Moving an element or changing a color takes more time and effort. But I learned all the principles of web design technologies and the abilities they offer.

Before, I only knew the basics of JavaScript and jQuery. I used to take snippets of code, change them and use them over and over again. Now I can write my own scripts. It’s something I always wanted to learn, and I did — by actually using it.

What Tools Can We Use?

Making changes in the code and refreshing the website in the browser can become slow and annoying. There are some tools that can help optimize the process. I usedBrackets because it automatically refreshes the website every time a change is made to the code.

I’ve also seen developers coding in tools such as CodePen and JSFiddle, simply because these tools make it a lot easier for them to see the results to the changes in code. Brian Kall also wrote a post about designing in browser and mentions some tools that are available.

Should We Really Forget About Photoshop?

I don’t think so. The web design process includes user interface design, user experience design and graphic design. Complex user interfaces are easier to draw in Photoshop. Graphic elements can also be drawn in Photoshop. To be honest, I still draw most of the interfaces we need at Wondermags, simply because it’s way quicker.

Photoshop is a great tool. For drawing. So, should we think about websites and how they work from the Photoshop’s point of view? This is what we have been doing so far and what it got us is a very complicated and unnecessarily long process.

I think it’s time to go back to the core of web design and skip the Photoshop part where not really needed, by simply start coding our websites in the text editors again. We, web designers, should never have completely abandoned that.

via designmodo

15 free ebooks for web designers

There’s plenty of free advice and tuition out there for web designers. Get your teeth into these great free ebooks.

Looking for a little expertise in HTML5, coding or going it alone? Well, to need to get bogged down in hefty hardbacks – there’s a huge range of digestible ebooks for you to get your teeth into. And most importantly, many of them are free. Here we list of 10 of the best.

01. Getting Real

 Getting Real
Getting Real

Getting Real explains how to go about building a web application and covering everything from the basics to the more advanced. Written by leading agency 37Signals – who are well known for both their blunt, no-nonsense blogging and their gung-ho, “you can do it” attitude, this is very far from a dry, technical text. And best of all, you can download a PDF version for free!

02. The elements of typographic style applied to the web

 The Elements of Typographic Style Applied to the Web
The Elements of Typographic Style Applied to the Web

This very readable manual and reference on modern typography, explores the art and history of the field as well as technical details. The free online version includes a new chapter on digital typography, plus expanded information on typefaces and designers.

03. Just Ask: Integrating Accessibility Throughout Design

 Integrating Accessibility Throughout Design
Just Ask: Integrating Accessibility Throughout Design

Written by Shaun Henry, Just Ask cover the basics of including accessibility in design projects, with shortcuts for involving people with disabilities in your project. There are tips for comfortable interaction with people with disabilities and details on accessibility in each phase of the user-centered design process.

04. Graphic Design for Non-profit Organisations

 Graphic Design for Non-profit Organisations
Graphic Design for Non-profit Organisations

The book focuses on design and best prac­tices for non-profit orga­ni­za­tions, but the con­tent is a great resource in gen­eral and the teach­ings can be applied pretty much any­where.

05. Scalable and Modular Architecture for CSS

 Scalable and Modular Architecture for CSS
Scalable and Modular Architecture for CSS

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. And this great free book by top designer Jonathan Snook explains it all in easy-to-follow language.

06. Learning Web Design

 Learning Web Design
Learning Web Design

A beginner’s guide to web design, this free ebook from Jennifer Niederst Robbins starts with the very basics of how web pages work, and goes on to take you through to CSS layouts and optimised graphic files.

07. HTML5 Quick Learning Guide

 HTML5 Quick Learning Guide
HTML5 Quick Learning Guide

Rather than trail through heavy texts on HTML5, this Quick Learning Guide provides a round up of everything you need to know in no time. The guide covers the main elements of HTML5 and focuses on the basics to help get you started, quickly.

08. How To Be Creative

 How To Be Creative
How To Be Creative

Advertising executive and creative Hugh MacLeod provides 26 ‘tried-and-true tips’ to help guide your creative self through the business world. Famous for drawing cartoons on the back of business cards, each of his tips is brilliantly presented by a cartoon drawing with advice ranging from ‘ignore everybody’, ‘put the hours in’ and ‘keep your day job’.

09. Web Designer’s Success Guide

 Web Designer’s Success Guide
Web Designer’s Success Guide

A designer’s ebook staple, Keven Airgid’s ‘Web Designer’s Success Guide’ is a comprehensive narrative on how to set up as a freelancer, and profit. Covering topics such as making the transition to self-employment, marketing your design skills and knowing what to charge, this ebook has all the answers you’re looking for when choosing to go it alone.

10. Pixel Perfect Precision handbook

 Pixel Perfect Precision handbook
Pixel Perfect Precision handbook

The guys at London design studio ustwo love pixels. So much so that they induct all new designers into the school of pixels with their very own Pixel Perfect Precision™ (PPP™) handbook. The aim? To give pixels the care and attention they deserve, to make sure they get the simple things right before moving onto the detail.

The 165 page guide is available in iBook format for both desktop and iPad, and also a straightforward PDF. And best of all it’s still free!

11. Design Your Imagination

 Design Your Imagination
Design Your Imagination

Another for the rookie, ‘Design Your Imagination’ is a complete beginner’s guide to web design, although it includes great tips for old-timers, too. The book uses examples to guide the reader through its 28 chapters, ranging from the history of web design, to design principles, planning and so much more.

12. The Nature of Coding

 The Nature of Coding
The Nature of Coding

A professor of the Interactive Telecommunications Program at New York University, Daniel Shiffman’s ebook focuses on the programming strategies and techniques behind computer simulations of natural systems. However, bear in mind that ‘The Nature of Code’ is not one for beginners, and you’re likely to need a background in coding to understand it completely.

13. Web Design and Mobile Trends for 2013

 Web Design and Mobile Trends 2013
Web Design and Mobile Trends 2013

A compilation of interviews with notable industry figures such as Jeffrey Zeldman (A List Apart), Karen McGrane, and Aarron Walter, and agencies like B-Reel, Unit9 and Ultranoir, this ebook outlines predictions for the future of web technologies and design for different devices. Also available to download and read on your iPad, Kindle and a wide range of devices and ereaders.

14. 50 Ways to Please Your Customers

 50 Ways to Please Your Customers
50 Ways to Please Your Customers

Following mobile’s phenomenal growth in 2012, this ebook provides tips on how to build amazing websites for mobile devices. It spans problems to consider when designing the user experience, 50 strategic approaches to create multi-screen designs and 50+ best practices to streamline your mobile design skills.

15. The Woork Handbook

 The Woork Handbook
The Woork Handbook

The Woork Handbook is a collection of Antonio Lupetti’s blog posts,  after receiving requests by some of his four million website visitors in 2008 for a printable version. Topics cover CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other aspects about web design.

via creative bloq