Front-End Tools to Improve Your Workflow (Part 1)

— Tagged: web-development tools workflow

Want to improve your workflow and speed at which you can create new web pages? I have a few recommendations of software and online tools to help you do just that!

Table of Contents

Planning and Design Phase

  • Tactile Design Kit - A physical, interactive web design kit created to facilitate client conversation and brainstorming during the discovery and design phase.
  • Stylify Me - Helps designers quickly gain an overview of the style guide of a site, including colors, fonts, sizing and spacing. This tool allows the designer to research sites efficiently without the need to inspect each element, in order to be aware of current design trends and inform their own design decisions.
  • Meet the Ipsums - Where all ipsums come together. A collection of various websites offering different versions of “ipsum” (or lorem ipsum), aka, “dummy” text to use in your design or code when you don’t have actual content yet.
  • Blokk - BLOKK is a font for quick mock-ups and wireframing for clients who do not understand Latin. A great alternative to lorem ipsum.
  • Red Pen - Red Pen lets you upload your design, share a short URL, and get live, annotated feedback super-fast. It remembers you— no project management, no complexity, no bullshit.
  • Responsive Sketchsheets from Zurb - Start working out your responsive layouts through sketches using their super awesome responsive sketchsheets.
  • ZURB Grid Paper - Connect the dots to give your sketches a little more structure while exploring refined concepts on paper.
  • Visual Design Explorations - Mood boards, style tiles, and element collages
  • Style Tiles - A visual web design process for clients and the responsive Web. Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.
  • Element Collages - An element collage allows you to document a thought at any state of realization and move on to the next.
  • Gridpak - A Responsive Web Design tool for creating grids.

Color Tools

Working with colors can be a time consuming task for a web designer or developer. Hopefully, these online tools will help speed up the process.

  • COLORRRS - Convert HEX colors to RGB format
  • Color Hex - Color-hex.com gives information about colors including color models (RGB, HSL, HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page.
  • 0 to 255 - 0 to 255 is a simple tool that helps web designers find variations of any color.
  • ColorHexa - ColorHexa.com is a free color tool providing information about any color. Just type any color values in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent value in Hexadecimal, Binary, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE-LCH, XYZ and xyY. ColorHexa will also generate matching color schemes such as complementary, split complementary, analogous, triadic, tetradic and monochromatic colors. It is also possible to blend colors together or create a gradient between them.
  • Pictaculous - Generate a color palette from any image.

Typography

  • Golden Ratio Typography Calculator - Discover the perfect typography for your website by entering your current font size and content width, optimize your typography based on font size, line-height, width, and characters per line (CPL), explore finely-tuned and downright sexy typographical recommendations.
  • WhatFont - Easily get font information about the text you are hovering on.
  • Fontello - icon fonts generator - This tool lets you combine icon webfonts for your own project. With fontello you can: shrink glyph collections, minimizing font size, merge symbols from several fonts into a single file, and access large sets of professional-grade open source icons. Now it’s trivial to make a custom icon webfont, exactly for your needs. First, select the icons you like. Then update glyph codes (optional), and download your webfont bundle. Fontello generates everything you need, ready for publishing on your website.
  • Typekit (Free and Paid) - Add a line of code to your pages and choose from hundreds of web fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.
  • Google Fonts (Free) - Google Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers. The API service makes it easy to add Google Fonts to a website in seconds. The service runs on Google’s servers which are fast, reliable and tested.
  • Webfont Generator - Create Your Own @font-face Kits by uploading the fonts you want to use.
  • FontFriend - Font­Friend is a book­marklet for typo­graph­i­cally obsessed web design­ers. It enables rapid check­ing of fonts and font styles directly in the browser with­out edit­ing code and refresh­ing pages, mak­ing it the ideal com­pan­ion for cre­at­ing CSS font stacks.
  • FFFFALLBACK - A simple tool for bulletproof web typography. FFFFALLBACK makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.

Photoshop

  • Subtle Patterns Photoshop Plugin (Paid) - Imagine the immense library from Subtle Patterns, fed directly into your Photoshop panel – always in sync! It’s finally possible with this plugin for Adobe Photoshop.
  • Blend Me In (Free) - Search thousands of assets, including popular icon packs, without leaving Photoshop. Drag assets into your current composition and use them in the original format (layers, vector objects, adjustment layers and so on).
  • Retinize It (Free) - The best Photoshop actions for preparing designs for iOS or optimized for Retina-display websites.
  • GuideGuide (Free) - Dealing with grids in Photoshop is a pain. With GuideGuide, it doesn’t have to be. Pixel accurate columns, rows, midpoints, and baselines can be created based on your document or selection with the click of a button. Frequently used guide sets can be saved for repeat use. Grids can use multiple types of measurements.
  • Browser UI (Free and Paid, Photoshop Action) - The Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. Simply install the action, choose a browser and play it.
  • Ps Etiquette - A Guide to Discernible Web Design in Photoshop.

Code Editor

For web developers, the choice of a code editor shouldn’t come lightly. A source code editor is where we spend most of our development time and where productivity is noticeably gained or lost.

Sublime Text (Free and Paid)

Sublime Text is a sophisticated text editor for code, markup and prose. You’ll love the slick user interface, extraordinary features and amazing performance. Sublime Text is available for OS X, Windows, and Linux.

Tuts+ offers a free video course called Perfect Workflow in Sublime Text 2. This is a “must watch,” in my opinion. You’ll be amazed by how quickly you can code with a few plug-ins and some keyboard shortcuts memorized.

I like to use the Soda Dark theme with the Flatland Dark color scheme. Here is what those look like on my Mac:

My Sublime Text 2 Setup - Theme and Color Scheme
Sublime Text 2 - Flatland Dark color scheme

Online Playgrounds

Code editors right in your browser with instant previews of the code you write.

Writing in Markdown

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

  • Markdown
  • Markdown Tutorial - Unlike cumbersome word processing applications, text written in Markdown can be easily shared between computers, mobile phones, and people. It’s quickly becoming the writing standard for academics, scientists, writers, and many more. Websites like GitHub and reddit use Markdown to style their comments. If you have ten minutes, you can learn Markdown!

Stay tuned for part 2!

Want to have your say? Send me a tweet »
Share