6 Essential Website Design Tips and Tools


As designers and developers, we need to make the most of our time to ensure great results for client projects. Luckily, there are many essential time-saving and quality control tools at our finger-tips. Below is a survey of some of the programs, techniques, and resources we use every day at Brunello Creative.

cloudapp

CLOUD APP

  • Find it: http://getcloudapp.com
  • Who loves it: Anyone who wants to share files.
  • What it does: Allows you to quickly share images, links, music, videos and files. Materials are copied to the CloudApp clipboard, and a short link is provided for sharing your upload.
  • How to use it: Create an account, install the CloudApp and begin dragging files to the icon on your computer's menubar. Use the drop-down menu to retrieve upload links.
  • Power Tip: CloudApp offers a range of plugins called Raindrops for iPhone, iTunes, Photoshop and more. From the icon drop-down menu you can choose to auto upload screenshots.

color meter

DIGITAL COLOR METER

  • Find it: On a Mac, in Applications > Utilities > DigitalColorMeter.app
  • Who loves it: Web designers, web developers, and anyone interested in design consistency.
  • What it does: Takes an eyedropper sample of any image on your screen, providing the color value as HEX and RGB.
  • How to use it: Put it in your dock immediately, this tool is essential! Open the app preferences and select 'float window above other apps'. From here you can also adjust the magnification factor — useful for controlling the sample area. Now that your Digital Color Meter is floating in front of other windows, you can easily sample a color value from any open window, and move between programs.
  • Power Tip: The key command 'Command + L' locks the eyedropper current sample so you can move to another program (your PSD, for example) without losing the color value you sampled.

delicious

DELICIOUS BOOKMARKS

  • Find it: http://www.delicious.com
  • Who loves it: Anyone who does online research. If you're a neat freak you're going to love this service, and if you're not — your online work-flow is about to get a whole lot smoother.
  • What it does: Makes your life simpler with easy non-hierarchical bookmarking, notes, and organization by tags.
  • How to use it: For Firefox users: install the plugin and tag bookmarks as you browse in one step. Customize your Delicious account by grouping your tags into bundles. Quickly search across bookmarks by keyword, and view your tags as a cloud or a list.
  • Power Tip: You can share all, bundled, or individual bookmarks with the public or specific people — great for collaboration.

spoon

SPOON BROWSER SANDBOX

  • Find it: http://www.spoon.net/browsers
  • Who loves it: Web developers assuring quality and relative consistency (http://dowebsitesneedtolookexactlythesameineverybrowser.com) across browsers.
  • What it does: Lets you run all popular web browsers directly from the web on your current platform. Great for Mac or Linux based web devs to test on all versions of IE.
  • How to use it: Select the browsers you want to run. They will launch in new windows, and you're on your way to cross-browser compatibility heaven — (or hell, depending on how good you are.)  :)
  • Power Tip: Bookmark this essential web development tool now (using your Delicious Bookmarks account, of course!)

xscope

xSCOPE

  • Find it: http://iconfactory.com/software/xscope
  • Who loves it: Web designers, web developers, and anyone interested in design consistency. For Mac users only.
  • What it does: It's a toolbox for measuring, aligning and inspecting on-screen graphics and layouts.
  • How to use it: Tools hover on top of application windows and can be turned on and off quickly from your computer's menu bar.
  • Power Tip: A license is available for a reasonable price, but the free version of this app also does the trick.

notable

NOTABLE APP

  • Find it: http://www.notableapp.com
  • Who loves it: Web design and development teams, UX designers, and clients. Anyone whose work-flow includes collecting collaborator notes on screenshots.
  • What it does: Takes a full screenshot by upload or url, and allows for group commenting.
  • How to use it: Organize your screenshots into sets, and share with specific team members.

ADDITIONAL TOOLS