17 brilliant tools for web design and development

July 19, 2014
1 Star2 Stars3 Stars4 Stars5 Stars

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.

 Nice

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

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

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

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

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

 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

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

 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

 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

BugHerd

Contrary to popular belief, the launch of a new site is not the end of a dev team’s work. If anything it’s the point at which the sweat really starts to build. As clients begin to receive feedback, these garbled and conflicting requests begin to filter back as emails, which then get batted around before finally becoming a bone of contention.

BugHerd
 

 Fontello

 

Why is it so hard to find a set of icons that covers all the bases with a consistent look and feel? One of life’s great mysteries perhaps. Well, wonder no more because Fontello not only has all the icons you need but you can pick and choose the glyphs you need and compile these into your own minimalist set.

fontello

Proto.io

A good prototyping tool should allow you to get up and running fast but also provide enough depth that you can refine your ideas to the point where they don’t need you leaning over a user’s shoulder saying things like “Just ignore that bit for now”.Proto.io does just this.

proto

 Foundation 3

Responsive design seems to have gone from zero to about a thousand miles an hour in no time flat. And things are still changing fast enough that small development shops are hard-pushed to stay up to date, let alone conduct their own R&D. That’s where Foundation 3 comes in.

Foundation3

Dreamweaver CS6

Fluid layouts, CSS3 transitions and enhanced PhoneGap support lead the charge in the latest update to Adobe’s web design all-rounder. There’s no denying that Dreamweaver CS6hits the ground running.

dreamweaver_2

 

Leave a Reply

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