• Happy Independence Day to all our friends in America! 🗽We hope you have an amazing 4th of July, filled with family,… twitter.com/i/web/status/1…

COMPANY BLOG & NEWSROOM

22Jan

Useful Tools for Web Designers

Every professional needs a tool that can be used towards improving the quality of the work that they do. Regardless of whether you are an experienced specialist or just barely starting your career, it is understandable to want to finish the project with a favorable outcome at minimal expenses. Here are some useful online tools that can become handy when creating your masterpieces.

CSS3, Please!

CSS3, Please! Is the Cross-Browser CSS3 Rule Generator. You can edit the underlined values in this css file, but don’t worry about making sure that the corresponding values match, that’s all done automagically for you.
CSS3, please!

SlickMap CSS

SlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.
SlickMap CSS

CSS Validation by W3C

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.
CSS Validation by W3C

Online CSS Reset Tool

CSS Reset helps you neutralize many disparate browser defaults and establish a clean foundation for applying CSS consistently across browsers.

Online CSS Reset Tool

CSS3 Button Maker

The CSS3 Button Maker gives you a number of sliders and color pickers to style your own CSS3 button. Then you can grab the code to use in your own project.

CSS3 Button Maker

CSS3 Transforms

CSS3 Transforms gives you a set of sliders to experiment with various transforms such as position, rotation, skew and more. It also generates the corresponding code on the fly.

CSS3 Transforms

Font-Face Kit Generator

Nice CSS3 @font-face generator from Font Squirrel.

Font-Face Kit Generator

HTML5 Security Cheatsheet

If you are looking for a way to learn HTML5, the cheatsheet contains all the details you want to know and learn about HTML5.

HTML5 Security Cheatsheet

HTML5 Gallery

HTML5 Gallery showcase sites that use of HTML5 markup, so that we can see how people have interpreted the specification and how they’ve implemented it. Also, educates about HTML 5

HTML5 Gallery

HTML5 CheatSheet

Everything you need to know about HTML5 features and other information is present in this sheet including all currently supported tags, their descriptions, their attributes and their support in HTML 4.

HTML5 CheatSheet

Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr

CSS Template Layout Module

This module contains everything you need to know about CSS and what it is capable of. According to the abstract, “CSS is a simple, declarative language for creating style sheets that specify the rendering of HTML and other structured documents.”

CSS Template Layout Module

TypeTester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier.

Typetester

WhatTheFont (MyFonts)

Seen a font in use and want to know what it is? Submit an image to WhatTheFont to find the closest matches in their database.

WhatTheFont (MyFonts)

Typechart

Typechart lets you quickly evaluate an assortment of web typography. Once you’ve discovered the font you like, you can use the Get CSS button to obtain the style rules for it.

Typechart

Google Font Preview

The new Google font previewer lets you test drive all the fonts in the directory so you can decide which web font in the Google Font API works best for your requirements.

Goole Font Preview

Less Framework 3

Less Framework is a cross-device CSS grid system based on using inline media queries.

Less Framework 3


If there are any other web design tools you would like to share, you are more than welcome to do so!

3 comments

  1. Alex Mar 02, 2011

    Nice post. Being as an designer, I understand how useful these tools are and how helpful stuff these resources provide.

    I would also recommend you to include an invoicing app in this post as an invoicing app is mandatory app to run a business and a designer is required to use one to manage his invoices and payments. I personally use http://www.invoicera.com to invoice my clients and to keep track of my projects and expenses. This really made my work so easy.

  2. mike Apr 22, 2011

    check that http://www.online-toolz.com

  3. admin Apr 25, 2011

    Thanks!

leave a comment

All posts Back to top