Web Design: Popular Tools for the Modern Web Designer

Web Design: Popular Tools for the Modern Web Designer

The web design industry has been on a climb over the past decade. Designers are needed on new startups every day, and considering the influx of social media and blog designs it’s a popular trade to consider.

Web Design: Popular Tools for the Modern Web Designer

Luckily the Information Era has given us access to tools like never before. Designers can find resources all over the web ranging through color palette matches and free resources for icons and graphics. Check out a few of the tools below and if you aren’t using them already see how they could help with productivity throughout the day.

Popular Design Magazines & RSS Feeds

The first logical tool would be RSS feeds and magazine subscriptions. Web design and development blogs are some of the most popular communities on the web. They offer useful tutorials, tips, tricks, and articles relating to the latest and greatest web design trends.

It’s simple to keep up-to-date with this technology. A Google Reader account is the first that comes to mind, allowing you to sort and rank your subscriptions based on labels (design, tutorials, programming). Blogs in the community provide excellent resources for new information in such a changing industry.

You may also consider visiting popular video streaming websites like YouTube or Vimeo. They contain countless tutorials ranging from beginner to expert in difficulty. No designer is perfect and nobody actually does “know it all” when it comes to digital design work. Keeping up with the curve is a creative way to follow new trends and be exposed to the latest and greatest technology – even if it’s only for an hour a day.

You’ll also ingrain yourself as part of the web design community over time. Leaving comments and re-tweeting design articles helps connect you with other designers from around the globe, all through simple tools which didn’t even exist 10 years ago.

RSS Feeds
Image credit: codepo8

Color Matching for Designs

Whether you’re an icon designer or branding artist, color theory is an essential skill. If you haven’t got formal knowledge of colors or design theory don’t fret, there are plenty of tools online to help.

ColorSchemer is my personal favorite when it comes to selecting a palette to work with. There are many pre-designed color schemes from previous designers which have been shared throughout the community, but you can also mess around with your own concepts to create a beautiful mockup. Color Blender is another useful tool which helps to match similar colors.

This is something you may consider using when you’ve got a certain shade of blue or green you want to work with but don’t know how to take the next step. It doesn’t require much work on your part, the color matching software will determine a select few sets to implement and mess around with.
There are many other popular tools out there for color matching and palettes and most come with the best price tag – completely free! Finding new tools online to help expedite the design process is always a welcome aspect to any day. This is especially the case when they’re free of charge and simple to utilize.

Free Icon Resources

Icons have become a signature part of the new web. Designs today consist of social media icons, comment and user profile icons, and many other interface buttons and widgets. The most notable set is the infamous famfamfam collection which has been done to death by now.

FamFamFam Icons

There are many free icon search engines which have started to pop up all over the web and they’re the perfect tool for finding just the right icon set to complement your design. FindIcons is one of the newer engines containing just over 300,000 unique icons for download. You can find most of them in different sizes and can download the files directly from the site in both .png and .ico format.

These search engines have revolutionized the way we create mockups. No longer do you need to be a master at Adobe Photoshop or Fireworks to create a custom icon set for your website. Modern icon search engines have become mainstream media tools for designers. You may also consider Icon Finder as another tool in your belt.

The best part of these engines is how easily accessible the communities are. Icon designers are able to upload their own icons and share them with the world – hopefully gaining a bit of notoriety out of the process as well. These sites are just one step closer to an open and secure web and seem to be growing in popularity every day.

CSS3 Made Simple

With the recent support for CSS3 properties coming to most major browsers we’ve seen an influx in interesting design concepts. Web designers have become much more crafty in utilizing these new selectors.

However the knowledge necessary to create such effects is daunting. It could potentially require a few weeks of studying to master everything CSS3 has to offer. Because of this CSS3 Generator has to be one of my favorite tools as a modern designer.

CSS3 Generator

You select a type of effect you’re trying to create from a drop-down list, modify some settings and get a block of CSS code to copy. Effects include rounded corners, text and box shadows, gradients, transitions and so much more.

You’re also given a small display of icons letting you know which browsers the code is compatible with. Hovering over each one displays a tooltip of which versions the code will work on, thus saving even more precious time during project work.

Although I haven’t seen anything similar for CSS2 or XHTML markup you never know when a new app will spring up on the web. For now CSS3 Generator has been an enormous help in my day to day work. I can’t imagine finishing a design project without it!

Collaboration Tools for Designers

Collaboration and teamwork are just as important in the business world as they are anywhere else. Web designers especially must communicate with many different groups – clients, developers, and even other artists to name just a few.

Some of the simplest tools can often be used to your advantage. GTalk, or Google Talk, is Google’s prime IM client which connects directly into your Google account. Many professionals in the Internet industry use this as a means for communicating online and via video chat to collaborate on ideas for projects.

It’s completely free and will even run right from your Gmail account page! This means you can send a chat invite to any contacts you’ve added into your GMail account and they’ll show up in your GTalk list. Communication at its finest in our booming Internet-fuled era.

ConceptShare makes Design Collaboration a Breeze

Many have not heard of ConceptShare and even fewer are using it, but the web app has been rising in popularity over the past few years and garners a strong foothold in the business design industry.

Conceptshare Tour

The idea is simple – create a workspace where you can share important design updates and documents with clients from all around the web. This removes the clutter of e-mailing new screenshots or updates between multiple people and trying to keep everything up to speed.

ConceptShare allows you to send invites to individual people to join only specific work spaces. This means you can run multiple projects for different clients in 1 single account (talk about productivity!). You can share documents and spreadsheets, basic image formats, video and even complex docs such as PSD and AI files.

The services does run a free trial allowing for 1GB of total space and 15 simultaneous projects. However if you’re really interested in utilizing the power of this application you can pay for any of their advanced plans. This allows for sharing upwards of 5GB+ and inviting clients into over 50 project workspaces.

If you’d like to learn more check out their project tour for outlines and details about more of their services. They also have a small tutorials section for newbie looking to learn more about the process.

Web Design & CSS Inspiration Galleries

One of the worst situations to be in as a designer is stuck in a creative rut. Staring at a blank page in Photoshop, frozen and unable to choose a first move. Web inspiration galleries started popping up for just this scenario and have been extremely influential in my own design works.

There’s nothing wrong with hitting a brick wall when it comes to design. To be fair it happens to even the most skilled digital designers. Checking out galleries for inspiration and creativity can be a great way to boost morale and take a load off your brain. Website mockups generally borrow similar elements and concepts between each other. It’s truly about the graphical details and placement which separates each unique design from the rest.

Web Design Inspiration
Image credit: dareppi

This is where borrowing creative potential from others can get interesting. There is certainly a difference between finding motivation and creativity in a few blog designs vs blatantly stealing and ripping off another site’s concept. Utilize inspiration galleries as tools to get the creative juices flowing and take it to your own level from there.

You may also consider using these galleries as a showcase for your own design work. Many directories such as CSS Drive and Best Web Gallery allow for user submissions of web designs. If you have a new concept art you’d like to share and read feedback it’s not a bad idea to share your creativity with the design community. Your site may even inspire another designer’s works and start an inspiring chain of causality.

Wireframe Layout Creations

Creating and testing out a website’s wireframe design is an important part of the initial design process. Many graphics and branding artists will skip over this and dive right into glossy buttons and shiny logos, but creating a structure for your design can be a huge time saver.

One set of tools useful for wireframing are stencil kits. These contain graphics for web boxes, scrollbars, generic browser submit buttons and a ton more. These help take up the space you need based on placement in relation to other elements on the site. You can find many completely free from all over the web.

Grids are also applicable when it comes to designing a structure for your site design. Many web designers in the modern era work through a 960 grid system. You can find tons of examples for Photoshop grid templates everywhere.

These can help expedite your initial workload tenfold by starting with a set grid of pixels to work on. Many designers will create these and pass them around free for download, so they’re truly not difficult to find & work with. These templates are a great help when it comes to browser testing for web standards.

Testing your Design with Browsershots

An annoying little pain during the design and development stages of creating a website is consistency amongst all browsers. This has always been a problem in web development and although there are some useful pieces of code and style to help out, it’s an uphill battle.

Working with Browsershots should save you a lot of time and frustration in your design process. The site takes screenshots of how your design looks on multiple browsers and operating systems to display side-by-side. It doesn’t provide immediate results and takes some computing time to fill a URL request, but the return is fantastic and provides unspoken ease for web designers.

Browser Shots

There are more options for browsers than anybody has ever heard of and a set of 4 major operating systems – Linux, Windows, Mac, and BSD. All of these settings may be a bit overkill for the average designer. Luckily the app allows you to pick and choose which browser shots you want. It goes without saying the less selections you choose for snaps the quicker your shots will come in through the queue, so tread carefully.


These are just a few of the countless tools out there on the web. As the new web grows and expands into new mobile and tablet markets we’re going to see enormous changes in the web design industry. Digital designers will be the leaders into uncharted territory as the future of the Internet presses onward.

Utilize these tools for what they are – simple applications to help create lavish designs. There are plenty more out there and new ones are being created every day. Be on your toes, it’s the one trait which keeps web designers ahead of the game.

What tools do you utilize in your daily design work? Do you have any that weren’t mentioned in the article? Share your top tools as a designer and why they’re so important to your productivity.

Jake is a writer & designer covering the latest tech on the web. He frequently writes about user experience and resources for building usable websites. Check out more work on his portfolio site and find his latest updates on Twitter @jakerocheleau.


  1. / Reply

    Hi there, very usefull list and nice article.

    For wireframing I use pencil by evolus (http://pencil.evolus.vn/en-US/Home.aspx). The nice thing about it is that you can use on mac, pc and linux, since it can be downloaded as a firefox extension (though you can also download it as a full software). There’s a list of stencils that you can download. It’s free and very simple to use, and you can also easily create you own collection and save them for future work.

    And for browser testing I use the adobebrowser lab(https://browserlab.adobe.com/en-us/index.html). It’s free (for the moment?) you just need adobe account.

  2. / Reply

    Greate article, I never knew about CSS3 made simple, a very useful site! For color matching I am huge fan of colourlovers.com. If we’re talking about tools for the designer, inkscape and gimp are open source alternatives to adobe illustrator and photoshop. Photoshop brushes are supported in Gimp which is great to have for a designers toolkit. Speaking of toolkits the site designerstoolbox.com has a collection of templates, web safe areas, and browser elements for mockups.

    Thanks again for writing the article.

  3. / Reply

    Just a heads up – Findicons.com has many icons with incorrect license information. Professional web designers should be careful to use it. It also redistributes Iconfactory’s icons against their license.

      • That Guy,
      • January 21, 2011
      / Reply

      How did you come to this conclusion?

      1. / Reply

        @that guy

        Well, by spending 5 minutes on the site I found several of Iconfactory’s great icons, which are illegal to redistribute. Also many icons don’t have any license information e.g.


          • That Guy,
          • January 22, 2011
          / Reply

          That’s hilarious. Thanks for the heads up

    • Rana Mukherjee,
    • January 17, 2011
    / Reply

    Good article.

  4. / Reply

    Browser Shots is one of the coolest tools I’ve found. Glad to see it getting some exposure.

  5. / Reply

    Wow, what an awesome list of tools! A few that I personally use a lot are: http://www.border-radius.com (generates the codes for [duh] a border-radius :) ); http://www.december.com/html/spec/color0.html (my favorite place to find new colors); and http://www.colorcombos.com (a great resource when you are looking for a color scheme or need to know which colors go with which).

    • Anu,
    • February 1, 2011
    / Reply

    Nice Website also check this website http://goo.gl/fzi3R

Leave a Reply

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


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.