Saturday, October 05, 2013

Powerful workflow tips, tools and tricks for Web Designers

Powerful workflow tips, tools and tricks for Web Designers
Designing and developing can be time-consuming, especially when the project involves a new challenge, putting the team or freelancer into unknown territory. Moreover, time is a key factor in productivity. Working efficiently enables us to deliver better value at a competitive price.

However, some steps can be repeated for every project. These are steps we know and should make as quick as possible in order to have more freedom to experiment with new solutions.

This article presents a collection of tools, tips and tricks that will make your standard workflow as fast and practical as possible, so that you have more time for the exciting parts of the project.

Ready? Here we go!

Tips And Tricks

Design Workflow

"My Secret for Color Schemes"

Erica Schoonmaker shares her trick for matching up colors and creating a nice color scheme.

Powerful workflow tips, tools and tricks for Web Designers - Color schemes

Useful Aligning and Spacing

Kris Jolls creates squares for the various spaces he has between elements. This cuts down time and makes sure everything is aligned and spaced properly.

Powerful workflow tips, tools and tricks for Web Designers - Space squares

"The Ultimate Photoshop Web Design Workspace"

Jacob Cass shares his set-up for the ultimate Web design workspace in Photoshop.

Powerful workflow tips, tools and tricks for Web Designers - Ultimate photoshop workspace

Coding Workflow

"Perfect Workflow in Sublime Text 2"

This is a must for all Sublime users. Ilya Grigorik has put together a two-hour tour de force to make you a Sublime ninja!

Powerful workflow tips, tools and tricks for Web Designers - Sublime2

"Development Workflow for 2013"

Learn what a modern development workflow looks like, from editors and plugins to authoring abstractions, testing and DVCS integration.

Powerful workflow tips, tools and tricks for Web Designers - Paul Irish - workflow

"Vertical Editing" (with TextMate)

Learn how to vertically edit in general and with TextMate in particular. It pairs best practices with vendor-specific redundant properties.

Powerful workflow tips, tools and tricks for Web Designers - Vertical editing

"Prevent background-color Bleed on Touch Screens"

Add outline: 1px solid #fff to your code to stop background-color bleeding on touchscreens.

Powerful workflow tips, tools and tricks for Web Designers - Background-color bleeding

"Quick Tip: Rounded Corners Done Right"

Improperly nested corners are a detail that can ruin a brilliant design. Learn how to do it the right way.

Powerful workflow tips, tools and tricks for Web Designers - Rounded corner css

"The //* /*/ //*/ Comment Toggle Trick"

This is a little trick to make development faster. Not suitable for production code.

Powerful workflow tips, tools and tricks for Web Designers - Comment out trick

"Outdenting Properties for Debugging CSS"

Martin Sutherland usually ends up adding a ton of properties to figure out how things fit together. Here is a little trick to remove the properties before a project goes live.

Powerful workflow tips, tools and tricks for Web Designers - Outdent

"Favicons Next to External Links"

A little trick to display an external favicon and next to the corresponding link, using simple lightweight jQuery.

Powerful workflow tips, tools and tricks for Web Designers - Favicon link

"DevTools Tips and Tricks"

These slides include tips and tricks for performance. You will be surprised what Chrome DevTools can do. (Use the arrow keys to navigate the slides.)

Powerful workflow tips, tools and tricks for Web Designers - DevTools

"Sublime Text Workflow That Beats Coda and Espresso"

Andrey Tarantsov talks about jumping into Sublime Text 2 and and setting up a workflow that beats traditional tools such as Coda and Espresso.

Powerful workflow tips, tools and tricks for Web Designers - Sublime Text Workflow That Beats Coda and Espresso

"Speed Up CSS Prototyping"

This is a simple trick to overlay a grid or a mock-up over a page that you’re styling. It also allows you to edit content directly in the browser to see how the layout responds to various lines of text.

Powerful workflow tips, tools and tricks for Web Designers - Speed Up CSS Prototyping

"Git: Twelve Curated Tips and Workflows From the Trenches"

12 simple tips for using Git, including: make "git diff" wrap long lines, set a global proxy and clone a specific branch.

Powerful workflow tips, tools and tricks for Web Designers - Twelve Curated Tips

"The JavaScript "Ah ha!" Moment"

This article collects comments of people having their "Ah ha!" moment with JavaScript — that is, the moment they learned something that made JavaScript click for them.

Powerful workflow tips, tools and tricks for Web Designers - js ah ha moment

Here are more articles and thoughts to help you improve your coding workflow:


OS Productivity

Alfred workflow tips and tricks

David Ferguson shares tips and tricks for working with Alfred.

Powerful workflow tips, tools and tricks for Web Designers - Alfred workflow

"SSH: More Than Secure Shell"

This article covers less common SSH use cases, such as using password-less, key-based login, setting up local per-host configurations, exporting a local service through a firewall, accessing a remote service through a firewall and more.

Powerful workflow tips, tools and tricks for Web Designers - SSH - More Than Secure Shell

  • Share Your Hidden OS X Features or Tips and Tricks
    This is a thread with a whole range of OS X tips and tricks. So far, there are 126 comments, and you can add your own.
  • "Alfred Workflows"
    You find various workflows, provided by Isometry, including UNIX man page search and filtering text through arbitrary shell one-liners.
  • Tricks
    This is a collection of tricks for various areas, collected by Carles Fenollosa. Areas include bash, pseudo-aliases for commonly used long commands, VIM, tools and networking.

Lifehacks


Tools

Collaboration

TimeZoneSlider

Time-syncing around the globe can be tricky. This tool lets you add the names and locations of people involved to find the best meeting time. Send the synced time to others and don’t risk hard feelings about time-conversion mistakes.

Powerful workflow tips, tools and tricks for Web Designers - Timezone slider

World Time Buddy

World Time Buddy is a cross between a time-zone converter, a world clock converter and an online meeting scheduler. It an online productivity tools for those who often finding themselves traveling, in flight, in online meetings or just calling friends and family abroad.

Powerful workflow tips, tools and tricks for Web Designers - World time buddy

Doodle

Doodle can’t be recommended enough. It is a easy and uncomplicated tool for finding and scheduling a date that suits everyone — with only one email.

Powerful workflow tips, tools and tricks for Web Designers - Doodle

"How to Solve the ‘Sharing Huge Design Files Amongst Teams’ Problem"

This article is about how BitTorrent can be used to sync large files between team members. Key problems to overcome were how to share files between designers and between designers and developers and how to resolve points of failure.

Powerful workflow tips, tools and tricks for Web Designers - Share huge files

Screenhero

Screenhero is another tool for collaborative screen-sharing. The great things is that each user gets their own mouse, and both users are always in control.

Powerful workflow tips, tools and tricks for Web Designers - ScreenHero tool

Productivity

SoFresh: Automatically Refreshing Your Browser

SoFresh is a CSS refresh bookmarklet. It allows you to select which files to refresh. The files are refreshed every time you save them, so that you don't need to refresh your browser.

Powerful workflow tips, tools and tricks for Web Designers - So fresh

Divvy

Divvy is a new way to manage your workspace. It enables you to quickly and efficiently “divvy up” your screen into precise portions.

Powerful workflow tips, tools and tricks for Web Designers - Divvy

Shortcat: Keyboard Productivity App for Mac OS X

It takes an average of three seconds to move your hand from the keyboard to mouse, click once, and then return to the keyboard. Shortcat is a keyboard tool for Mac OS X that allows you to keep your hands on the keyboard, saving time and energy.

Powerful workflow tips, tools and tricks for Web Designers - Shortcat

The Thinkerbot

Logic is the enemy of creativity. By grabbing a steady stream of pure Internet randomness, this app injects non-linear inspiration into any brainstorming session.

Powerful workflow tips, tools and tricks for Web Designers - Thinkerbot - app

SizeUp

SizeUp allows you to quickly resize and position windows with keyboard shortcuts or a handy menu-bar icon.

Powerful workflow tips, tools and tricks for Web Designers - Size-up

DragonDrop

DragonDrop lets you set down what you’re dragging, leaving you free to find the destination without having to worry about holding down the mouse button.

Powerful workflow tips, tools and tricks for Web Designers - DragonDrop

  • Slate
    Slate is a window-management application similar to Divvy and SizeUp (covered below), but free and less limited. It attempts to overcome their limitations by simply being extremely configurable.

Making use of the Cloud

SortMyBox

SortMyBox works like email filters, but for your Dropbox files. It magically moves files to folders based on your rules.

Powerful workflow tips, tools and tricks for Web Designers - SortMyBox

Servus: For Mac and Dropbox

Give your files some meaning and a nice layout when your share them with others. Servus for Mac easily turns any file on your computer into a branded download page, hosted on Dropbox.

Powerful workflow tips, tools and tricks for Web Designers - Servus - mac

Send to Dropbox

Ever wish you could email files to your Dropbox? With this tool, you can. All you have to do is log into Dropbox, get your unique email address, and start sending files.

Powerful workflow tips, tools and tricks for Web Designers - Send to dropbox

"Versioning Your Graphics Files With Dropbox"

This quick tutorial explains how you can version graphic files via Dropbox.

Powerful workflow tips, tools and tricks for Web Designers - Versioning Your Graphics Files With Dropbox

DropTunes

Create your own music-streaming service with this little app. DropTunes lets you stream music from Dropbox. Add tracks to your playlist, and browse while song is playing.

Powerful workflow tips, tools and tricks for Web Designers - DropTunes

sideCLOUDload

This tool lets you send files from a URL directly to the cloud (currently, Dropbox and email) without the need to download them. This is perfect to save on bandwidth when you discover great stuff with your phone on the go.

Powerful workflow tips, tools and tricks for Web Designers - sideCLOUDload

  • Post Via Dropbox
    This WordPress plugin allows you to post and edit on your blog with text files uploaded via Dropbox.
  • Site44
    Site44 turns Dropbox folders into websites. You can edit the HTML locally; this way, your website will always be up to date.

Design, Color and Image Tools

Hex Color Tool

Hex is a color tool that automatically displays any hex color in darker and lighter shades.

Powerful workflow tips, tools and tricks for Web Designers - Hex color tool

GuideGuide

GuideGuide make dealing with grids in Photoshop easy. Pixel-accurate columns, rows, midpoints and baselines can be created based on a document or selection with the click of a button. Guide sets can be saved for repeated use.

Powerful workflow tips, tools and tricks for Web Designers - GuideGuide

ColorBlendy

Ever fire up Photoshop just to multiply a couple of colors? ColorBlendy can do this easily in your browser.

Powerful workflow tips, tools and tricks for Web Designers - ColorBlendy

CMYK to Pantone

Input a CMYK color code, and this tool will work out which Pantone colors are close.

Powerful workflow tips, tools and tricks for Web Designers - CMYK to Pantone

ImageMagick

ImageMagick is a command-line program that can do many operations on images quickly and with high quality. It’s especially useful for resizing and sharpening images, generating thumbnails, etc.

Powerful workflow tips, tools and tricks for Web Designers - ImageMagick

Development and Testing

"Reconciling SVG and Icon Fonts"

This is the first in a series of three articles on SVG. Romain over at Hull explains how to set up a powerful design workflow, going from Sketch all the way to icon fonts, all automated. Part two shows how to dissect the fonts and go crazy with their components. Part three shows how to do the same with sprites and Photoshop.

Powerful workflow tips, tools and tricks for Web Designers - svg iconfont

Emmet Documentation

Emmet (previously known as Zen Coding) is a Web developer’s toolkit that could greatly improve your HTML and CSS workflow.

Powerful workflow tips, tools and tricks for Web Designers - Emmet

Alias

Alias enables you to manage all of your aliases online and to browse a list of cool aliases submitted by others. From there, you can run a single command to copy your aliases back into your profile should you require them.

Powerful workflow tips, tools and tricks for Web Designers - Alias

Anvil

Anvil is a menu-bar application for managing local websites. It takes your website and serves it up locally with a .dev URL, without requiring you to change system-level configuration files or hack around in the Terminal.

Powerful workflow tips, tools and tricks for Web Designers - Anvil

DOM Monster

DOM Monster is a cross-platform, cross-browser bookmarklet that will analyze the DOM and other features of the page you’re on, and give you its bill of health.

Powerful workflow tips, tools and tricks for Web Designers - DOM Monster

prettyPrint.js

prettyPrint.js is an in-browser JavaScript variable dumper, similar in functionality to ColdFusion’s cfdump tag.

Powerful workflow tips, tools and tricks for Web Designers - PrettyPrint

Resemble.js

Resemble.js analyzes and compares images with HTML5 canvas and JavaScript. It can be used for any image analysis and comparison need you might have in the browser.

Powerful workflow tips, tools and tricks for Web Designers - JS canvas image difference

Review

Updating large and possibly responsively designed websites can be a hassle. You never know whether a change will break anything. This tool gets screenshots of all of your running websites in different resolutions, so that you can spot any issues.

Powerful workflow tips, tools and tricks for Web Designers - Review

BrowserStack

BrowserStack gives you instant access to all desktop and mobile browsers, which is great for testing your designs, especially if you cannot afford to buy many devices.

Powerful workflow tips, tools and tricks for Web Designers - BrowserStack

Zippopotamus

Zippopotamus makes working with postal codes and ZIP codes easy. It delivers a free API in JSON response format, supports over 60 countries, is perfect for autocompletion and open for crowdsourcing and contribution.

Powerful workflow tips, tools and tricks for Web Designers - Zippotamus

Here are more development and testing tools you can check out:

  • "SSH Can Do That? Productivity Tips for Working With Remote Servers"
    SSH has many features that are helpful when working regularly with files on remote servers. If you regularly use SSH, it’s worth spending a little time learning about these and configuring your environment to make life easier.
  • "How to Kill an Unresponsive SSH Session"
    Learn a handy trick for when an active SSH session stops responding, often due to a lost connection and when the normal Ctrl + C doesn’t work.
  • Snoopy
    Snoopy is a bookmarklet for poking around on Web pages. It’s intended for use on mobile browsers that don’t have a "view source" option. However, you might find it useful on your desktop browser, too.
  • Catapulty
    This little tool will make your life as a cross-browser coder easier. Once it is set up, sharing the same URL across all of your browsers becomes simple.
  • Gridwax
    A really simple tool to overlay a vertical grid on any website. Simply drag it into your bookmark bar and adjust the vertical spacing and offset using only the Shift and arrow keys.
  • Mobile Perf
    Web development on mobile is especially challenging. Mobile Perf displays a menu with links that load other bookmarklets, including Firebug Lite, Page Resources, DOM Monster, SpriteMe and CSSess.
  • Version.js
    Version.js is a tool for testing different script versions with the switch of a query string.
  • "Easily Checking in JavaScript if a CSS Media Query Has Been Executed"
    With this trick of responsive development, easily check in JavaScript if a CSS media query has executed.
  • "How to Test a Website for Retina on Windows Without an Actual Retina Display?"
    In Firefox, go to about:config, find layout.css.devPixelsPerPx and then change it to your desired ratio (1 for normal, 2 for Retina, etc.). Just refresh the page and you’re done!

Little Helpers

Style Manual

Is English not really your thing, or not your first language? This reference document by Andy Taylor will help you find the right answer to style-related issues

Powerful workflow tips, tools and tricks for Web Designers - Style manual

13 Bills

This is a great tool for complicated bill-splitting. It’s especially handy when you have to split a bill according to the amount of time people have been around.

Powerful workflow tips, tools and tricks for Web Designers - Bill splitter

The Universal Packing List

Feed in the details of your next trip (timeframe, climate, gender, accommodation, kids, type of trip, activities, transportation and bag size), and this dynamic tool will work out what you should pack.

Powerful workflow tips, tools and tricks for Web Designers - Packing list

Long Press

This tool simulates the alternate character choice that you have on Android and iOS keyboards.

Powerful workflow tips, tools and tricks for Web Designers - Alternate character

Sejda

Sejda is a great online tool for manipulating PDF files when your preferred software is not at hand. It has many advanced features, including merging, splitting and combining.

Powerful workflow tips, tools and tricks for Web Designers - Sejda

CreateMyInvoice

If you need a quick and simple invoice, this tool turns your raw data into a presentable invoice. The tool offers five free invoices per month, which is great if you only need to use it every now and then.

Powerful workflow tips, tools and tricks for Web Designers - Invoice

StatusPage.io

StatusPage.io is tool that becomes active when your service experiences downtime of any kind. Activity incidents are prominently displayed at the top of your page for visitors to see right when they arrive.

Powerful workflow tips, tools and tricks for Web Designers - Status page

Beathound

Something for music lovers. Feed your iTunes library XML file and get a weekly update of new releases from your favorite artists.

Powerful workflow tips, tools and tricks for Web Designers - Beathound

Syncios

This tools converts your favorite music or ringtones to MP3, M4A, M4R or CAF format, and converts video to MP4, M4V or MOV format for enjoyment on your iPhone, iPod or iPad. It works both ways. It also includes other handy features that are worth checking out.

Powerful workflow tips, tools and tricks for Web Designers - Syncios

Skrivr

This is for minimalists who don’t want to deal with cluttered admin interface that makes publishing complicated. Skrivr lets you write, save and publish your writing.

Powerful workflow tips, tools and tricks for Web Designers - Skrivr

"List of All Countries in All Languages and All Data Formats"

This is a great resource that lists all countries in all languages and in all data formats.

Powerful workflow tips, tools and tricks for Web Designers - Country list

  • TokenPhrase
    TokenPhrase is a simple gem that generates unique phrases to use in your app as tokens.
  • Linkrr
    Linkrr is a small tool that transforms multiple unclickable links into clickable ones. Once you’ve gathered all of your links, Linkrr can open them with only one click. In some cases, you’ll have to disable your popup blocker.
  • LinkChecker
    This highly rated and popular Firefox add-on tests the validity of links on any Web page.

Useful Chrome Extensions

  • Tab Wrangler
    Tab Wrangler automatically closes inactive tabs but makes it easy to get them back, too. It works similar to AutoClose Tabs for Firefox.
  • Responsive Inspector
    Responsive Inspector is a simple Chrome extension that allows you to view the media queries of websites you visit. It is very useful when developing responsive layouts because it visually shows what resolutions are defined in style sheets.
  • Shortcut Manager
    With this extension, change the browser’s default shortcut keys, and assign any bookmarklets or JavaScript actions to your hotkeys. It works like Keyconfig on Firefox.
  • Auto Login
    Your browser already fills in your user name and password, so why not have it click "Submit", too? This tool automatically logs you into websites that Chrome has saved a password for.
  • Tincr
    Tincr lets you edit and save files from Chrome Developer tools. It supports live reloading and saves changes to the right file automatically. Works for Mac, Windows and Linux.
  • OneTab
    OneTab is perfect for anyone who tends to open too many tabs in Chrome. It saves up to 95% of memory and minimizes clutter by reducing all tabs into one.

Last Clicks...

Browser Pong

Here is an attempt to expand how you think of the browser. Browser Pong lives between multiple open windows. During play, the space between windows is transformed into a playing field — the abstracted tennis court of Pong. Browser Pong really is thinking outside the box.

Powerful workflow tips, tools and tricks for Web Designers - Pong

"Talks to Help You Become a Better Front-End Engineer in 2013"

Addy Osmani has curated talks that he has found helpful this year. The advice shared in them will equip you with the knowledge to become a better front-end engineer.

Powerful workflow tips, tools and tricks for Web Designers - Better front-end

The Setup

This collection of interviews asks people from all walks of life what they use to get the job done.

Powerful workflow tips, tools and tricks for Web Designers - Setup

"Learn Something Every Day"

UK-based design studio Young has published a book of 265 facts to help you learn something new every day. Additionally, you can purchase some great fact shirts. There is also a free iPhone app.

Powerful workflow tips, tools and tricks for Web Designers - Learn everyday

  • eBooks Compiled From Stack Overflow
    These books contain the top questions from a selection of the top tags on Stack Overflow. The top questions include those with a score of 10 or greater.
  • Jourrrnal
    Jourrrnal is a blog that publishes interviews about the workflows of some of the most active and talented Dribbble members.
  • How I Work
    This page collects little tips on how other people work. Rather than reading blog posts on why one way is better than another, read why one person loves a certain way of working, and judge for yourself whether it’s worth adopting.
  • "My Radical Productivity Experiment"
    Michael Schechter has experimented with different approaches to find what works for his own productivity. If you haven’t found a decent workflow for yourself, figure one out.

Further Reading


There you have it! A collection of great tools, tips and tricks that members of our community have found very useful. Hopefully, some of them will speed up your workflow or solve one of your confounding issues. Maybe they will even inspire you to share some of your hidden secrets of productivity.