Design your way

Monday, December 16, 2013

Web design is a service that exists in the fastest changing environment that exists: the Web. The incredible progression of websites also brings progress in the tools developed to help website designers or developers. If some tools like pen and paper never lose their usefulness, it helps to use new apps and resources that are available for designer if you work in that field.

Building a great functional and appealing website is a lot harder to do than it seems. Designers and developers put in a lot of efforts and time into achieving their work. They need to create the design, encode their ideas and resolve any problem that might occur. At the same time, they need to keep improving, learning and staying in touch with the new practices. Using tools can be a great help to reduce the burden of website designing.

People that are starting in this domain will most likely want to use some of them to avoid basic mistakes, but tools are useful even for the most skilled designer. They can help reduce the time required to transform ideas into code while avoiding some possible bugs, which is useful to everyone.

With a lot of web developers working on various things today, great tools get created regularly. You can find a list of tools on this website: use these new apps and resources to make your profession a bit easier.

Type Rendering Mix

Canvas

Canvas is a project to simplify iOS development for both designers and developers. It had been difficult for designers to get hands on building the product with the lack of objective-c and Xcode experience, and a hard time for developer to use reasonable amount of time and lines of code just to achieve really simple effects.

With Canvas, creating stunning animations requires zero lines of code, trendy effects like the Parallax headers, Sticky sections, Blurred Backgrounds, will be as simple as few lines of code changes.

ionic

Ionic is a beautiful front-end framework for developing hybrid mobile apps in HTML5.

Echo.js, simple JavaScript image lazy loading

Reportr

Dynatable

Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON. And it’s not just for tables.

DynoSRC

Minimize HTTP Requests – DynoSRC loads JavaScript files inline in your HTML response, then stores them in localStorage. You can even inline the DynoSRC client lib, eliminating all HTTP requests for JavaScript on your site.

Plates

Plates is a native PHP template system that’s fast, easy to use and easy to extend. It’s inspired by the excellent Twig template engine and tries to bring modern template language functionality to native PHP templates. Plates is designed for developers who prefer to use native PHP templates over compiled templates, such as Twig or Smarty.

Auto Fix Anything

This little plugin will let you automatically fix position of any container on your website with one JS

Interactive 3D

voix.js

Label Better

Label your form input like a boss with beautiful animation and without taking up space

Performant CSS transitions & animations

Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?

Designing and developing UIs for the mobile web is tricky, but it’s extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.

SVGeneration

Bigfoot

Bigfoot is a jQuery plugin that creates exceptional footnotes. Simply include the code on your pages and footnotes will be detected automatically and improved

Headroom.js

Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user’s scroll.

Type Scale

Ideal Forms 3

Feathers

Feathers makes it easy to get REST and real-time APIs running by using Services. A Service is a JavaScript object which provides a certain set of methods and can be used just like an Express middleware. The rapid start example creates a simple Todo REST and SocketIO service that maintains a list of todos and lets you creates new ones.

Brimir

Node App

Maplace.js

Maplace.js helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map. It requires jQuery and Google Maps API v3 so you need to have both in your page.

RethinkDB

RethinkDB is built to store JSON documents, and scale to multiple machines with very little effort. It has a pleasant query language that supports really useful queries like table joins and group by, and is easy to setup and learn.