Web Design: Popular Tools for the Modern Web Designer

by in Toolkits on 14th Jan 2011 · Comments

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.

Conclusion

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 Rocheleau is a web designer and social media enthusiast. He enjoys keeping up with the latest tech gossip and gadgets, always on the curve of new technology and standards. His favorite digital topics of study include color theory, best design practices, and typography.