Automate Your Design Process with These 13 Tools and Tips

These tools and tips will show you how to quicken your workflow when designing or editing a website.

Quicker Text Editing

Use search and replace so you don’t have to manually open up all those files anymore! Let these programs do that for you.

• TurboSR Search And Replace
  This free utility allows you to search through text, .html and xml files and replace text. It works on multiple files too, no need to open each one.
• ReplaceEm
  ReplaceEm is a search and replace utility that supports multiple files. The best part about this one is that it can use regular expressions.
• Search And Replace
  Another lightweight and fast text replacement utility. This one allows you to search through and entire folder and choose only certain extensions (html, dll, etc). Requires the .net framework.
• TexRep 2.0
  TexRep is another text replacement tool, but this one allows you to make copies of the original while replacing text. Handy for when you want to change something but change you mind back.

Put Your Photoshop To Work

Over are the days of opening an image, resizing that image and finally saving. Set Photoshop to run a batch for you and sit back and relax.

• Using The Photoshop Batch Command
  If you are unfamiliar with the batch command in Photoshop, this is a good place to start. It breaks down what each option in the batch dialogue means.
• How To Batch Rename Files In Photoshop
  Using Photoshop’s File Browser (called Bridge in CS3) you can batch rename all your files. Ideal for organizing your images for uploading.
• Advanced Batch Processing - Video Tutorial
  This video tutorial shows you how to resize an image and add a border with only one action. Any image size is dynamically adjusted to not exceed a certain width (while retaining its aspect ration) and a 3px border is added.
• Batch Watermark Images With Different Dimensions/Orientations
  Create a watermark and apply it to the same spot on all your iamges, regardless of dimensions and orientation!
• SampsonVideos - Image Resizing
  This screencast by SampsonVideos shows you how to batch resize a folder of images and export them to another folder, thus preserving your original files.

Appreciate The Little Things In Dreamweaver

Even though I never use the WYSIWYG portion of Dreamweaver, I still find it to be a huge time saver. Find out the ways you too can save time.

• Templates In Dreamweaver
  Dreamweaver allows you to create templates. That is, if you start a new document it will retain your site’s structure so all you have to do is decide what content you would like to add. This is a great time-saver.
• Dreamweaver’s Search & Replace
  This video tutorial will quickly get you up to speed on how to use the powerful search and replace dialogue in Dreamweaver.
• Dreamweaver’s Assets Panel
  Another video tutorial showing you how you can save time in Dreamweaver using the assets panel.
• Setting Up Dreamweaver’s FTP Connection
  Adobe’s instructions for connecting to your site’s FTP through Dreamweaver. This is a huge time-save because you can edit and upload within Dreamweaver. Dreamweaver retains your site’s structure so you don’t have to specify and upload folder, you just click “put” and you’re done.

Source : http://www.designvitality.com/blog/2007/10/automate-your-design-process-with-these-13-tools-and-tips/

Colour contrast checking tools to improve the accessibility of your design

If text does not have sufficient contrast compared to its background, people will have problems. People with color blindness or other visual impairments as well as people browsing the Web under less than ideal circumstances (bad monitor, window reflections, sunlight hitting the screen) may not be able to read the text, at least not without difficulty.

With that background out of the way, on to the actual color contrast checking tools. Some tools are Web based, while others are standalone applications or browser extensions that you run locally on your computer.

The list:

Colour Contrast Check: The tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.

Colour Contrast Analyser: You will need to enter the values for foreground and background colours into a form and submit it, after which the results are displayed.

Colour Contrast Visualizer: Using a slightly different approach, Tom Hooper’s color Contrast Visualizer helps you find acceptable color combinations by visualizing the colors that provide sufficient contrast on a color palette. color Contrast Visualizer is available in Flash and Adobe AIR versions, so you will need support for either of those to use it.

Colour Contrast Analyzer Firefox Extension: Instead of having you enter each colour combination manually, Gez Lemon’s Firefox extension finds all text elements in a document and examines the difference between foreground and background colours for them. It displays the results in a new tab, complete with previews of the colours. This can look a bit overwhelming, but it’s a good way of finding problematic areas of a design. Obviously this tool does not work with images – you’ll need an HTML document for it to work.

CSS Analyser: The CSS Analyser does a colour contrast test of your CSS. It also validates the CSS and checks that relevant text sizes are specified in a relative unit of measurement.

Luminosity Contrast Ratio Analyzer: This tool tests foreground and background colour combinations according to an algorithm developed by the Trace R&D Center.

Vischeck: The online tool simulates colour blindness on an image that you upload or on a web page that you specify, while the Photoshop plugin changes the colours of the document you are working on.

Contrast Analyser, Version 2.0: A standalone application available for Windows and Mac OS X. You can specify the foreground and background colours numerically or by pulling sliders, it will check and preview the selected colours against various types of colour blindness.

Graybit: It lets you submit a URL to a web page which will be converted to grayscale and displayed in your web browser.

Sim Daltonism: Available for Mac OS X only, this standalone application does not calculate colour contrast, but is still very useful. It simulates various kinds of colour blindness in realtime, which makes it easy to check if a design is likely to cause problems.


Source : 10 colour contrast checking tools to improve the accessibility of your design

8 Web Design Tactics to Help You When You're Stuck

Originally written by Matthew Inman (Oatmeal)

Web design can be incredibly frustrating. You'd think that with the infinite possibilities of what-goes-where it'd be pretty easy to land a design that works, yet somehow we've all been stuck before: working hour after hour on a design that refuses to look right. Throwing away pixels like they're going out of style.


These 8 tactics are what I use to get out of that sticky spot

Design from the inside out

A lot of designers start off a design by focusing on the header. Often times what's inside the page is what makes it look good; the header is supplementary. Try leaving the header alone for a while and working on some elements in the body, you'll be surprised at how much easier it is to design a page once you've got a solid body going.

Sketch something

My whiteboard is my salvation. Pencil and paper works too. I read an article years ago by a designer who would draw dozens of little 2x3" mockups in his spiral notebook before even opening up a graphic design program. The best part of creating mockups this way is the speed at which you can burn through possible layout ideas. Sketch something, scribble it out. Sketch something else, scribble it out. Do this ten times and you've probably got a fairly decent idea of how to the page should come together.

Seek inspiration offline

CSS galleries and design showcase websites are excellent sources of inspiration, but sometimes a bit of offline media can be just what you need to spur some fresh ideas. Open up a newspaper or magazine, go to the grocery store and look at the packaging, watch a television ad. Pay attention to things that are applicable to your design such as typography, color, and element placement. Ask yourself questions like "What is it I like about this magazine ad?" and "What is about this packaging that just works ?" There's a lot you can learn from observing traditional media.

Learn to let it go

Ever make a button that looks ridiculously awesome but just doesn't belong in your design ? You put so much effort into your ridiculously awesome button, you'll go to great lengths to make it work.

Learn to let it go. Save the button and file it away. Although you've lost this battle, you'll soon have an arsenal of ridiculously awesome buttons you can use in designs later on.


Step away from the computer

If you're having a difficult time with something, leave it alone for a while and come back later. It'll probably be easier after you've had a bit of a break and your mind has settled. Regarding web design, I've noticed this always plays out in a certain way: If I'm hating a design I'm working on and I shelve it for a few days, a lot of the time my reaction upon returning will be "Holy crap that's fantastic!" On the flip-side, I'll often toil away long into the night working on what looks like the best design I've ever created. The next morning I'll look at it again and cringe at the horrible abomination I've created. The moral here is to give your design some space.

Be absorbent

Learn to effectively pinpoint what it is you love about other designer's work and incorporate it into your own. Don't steal designs, but don't deprive yourself of external stimuli either. Become better at identifying why you love the way something looks.

Don't be a one-hit-wonder

Try to avoid using the same techniques over and over again, even if you've done really well with them in the past. Gradient rectangles are my crutch - I have a terrible habit of using them whenever I feel like a design isn't working. "This design sucks...I'll add a rectangle with a gradient fill!" The result is usually something that I'm unhappy with because it looks the same as all my previous work. Try imposing yourself with silly rules, such as "No drop shadows today" or "2D elements ONLY." Locking yourself out from certain design habits forces you to learn new ones.

Seek input from others

This is a tricky one. There are so many ways to ruin a web design, especially when the wrong kinds of people are involved. Be careful who you ask and find people who can provide constructive criticism. Find someone who can tell you specifically what's wrong and how it could be improved. Grow some thick skin, too. Don't assume every criticism is an attack on your work of art. Roll with the punches.

Source : Web Design Tactics

Gorgeous Website Footers

Originally written by Matthew Inman (Oatmeal)

Footers usually repeat the primary navigation and contain anything that is considered "the fine print," such as copyright information and a privacy policy. With the rising popularity of standards based design, they also have become the home for xhtml and css compliance badges.

Below is a list of 19 sites I gathered from around the web who have footers that caught my eye.

























Source: Put Your Best Foot Forward: 19 Gorgeous Website Footers