Browse By

16 Brilliant tools for web designs

There was a time when most of the contracts that were for web designers were to create portfolio websites. Things have changed a little and although people are still asking for portfolios, they are also asking designers to create big and serious projects with complex functionality, multi-browser and multi-platform support and a lot of complicated functions incorporated.

1. Niice

Niice essentially operates as a design search engine, pulling in results from Behance, Dribbble and Designspiration. If you’re in need of inspiration, head here and you wont be disappointed. Example: Try this search for black and white script lettering.

Screen-Shot-2013-04-12-at-2.10.21-PM-730x399

2. Alfred Workflows

If you’re an Alfred user, check out this CSS color conversion workflow.

Screen_Shot_2013-03-10_at_6.42_PM

3. Designer News

If you’re a Hacker News reader, you already know how Designer News works. It’s like the developer and startup scene-focused service, but instead emphasizes discussions on design and emerging tools that make the design process easier.

Screen-Shot-2013-04-12-at-2.02.11-PM-730x307

4. Firefox’s Font Inspector

Firefox has added a new typography-centric tool called the “Font Inspector” to its DevTools, available now in the browser’s Nightly Build. Learn more about it here.

Screen-Shot-2013-03-13-at-11.23.27-AM-730x358

5. Cloud Comp

Cloud Comp is a lightweight tool powered by Cloud App which lets designers share app and website mockups with clients. Read more about it here.

cloudcompfeat-730x298

6. Sidebar.io

Sidebar is a site which simply provides five of “the best design links, every day.”

Screen-Shot-2013-04-12-at-2.18.28-PM-730x348

7. BLOKK

BLOKK is a font made up of dashes (almost like what you’d find in a cartoon newspaper) for quick mock-ups and wireframing, and it’s awesome. Read more about it here.

blokk_units-520x208

8. What’s My Browser Size?

This Web app is a simplistic as it sounds. It shows you the current size of your browser window, adjusting accordingly as you resize it. If, for example, you’re playing with media queries, this tool could come in handy.

Screen-Shot-2013-04-12-at-4.40.46-PM-730x432

9. Intuitive Color Picker

One of our favorite color-picker tools. On load, the entire window fills with a single color. Move your mouse left and right to adjust the hue, move it up and down to adjust the lightness and scroll to change the saturation. You should also try 0 to 255 and Colllor.

colorpicker-730x291

10. Timehub

Timehub is a service which lets programmers generate invoices from their GitHub repositories. Yes, developers can now track the time they spend on projects without ever leaving GitHub. Read more about it here.

Screen-Shot-2013-04-12-at-4.44.59-PM-730x260

11. Helvetica vs Arial

While typography plays an extremely important role in Web design, many designers aren’t trained to understand the difference between similar typefaces like Helvetica and Arial. This resource will help you test your skills and get better at telling the two famous faces apart.

cd0I0vP

12. HEX to RGB Converter

Just like the “What’s My Browser Size?” tool mentioned above, this is an extremely minimal site which simply helps you convert from HEX to RGB color codes. Of course you can do this with any number of applications and services, but this is such a beautifully simple option. You should also try Colorrrs.

Screen-Shot-2013-04-12-at-4.55.12-PM-730x310

13. PlaceIt

PlaceIt is a simple, drag-and-drop tool which lets you generate realistic product screenshots in seconds.

bg-ob-730x486

14. Heyoffline.js

This JavaScript plugin warns your users when their network goes down to make sure they don’t lose anything. You should also check out Garic.js, a plugin which stores form values locally.

Screen-Shot-2013-01-02-at-1.27.24-PM-730x387-730x386

Leave a Reply

Your email address will not be published. Required fields are marked *