My name is Adam Chambers, I’m a senior engineer at Digital Surgeons and a lead developer on our open source project Gumby Framework.

In this tutorial I’m going to take you through the process of installation and configuration of a Gumby project and then put together a simple web page.

First off I’d like to apologise for my hilarious colleague and fellow Gumby lead dev, Craig Keller. His passion and admiration for my nationality and all things English never fails to amaze me, hence this (slightly patronising) design we’re going to build.

Anyway, disclaimers aside, lets dive in.

Here’s what we’re going to build in it’s finished state:

View the Demo

Gumby is a responsive front end framework built on Sass and Compass. Along with the release of Gumby 2.5 we launched Claymate, an NPM module that interfaces with Bower and Uglify to assist in the installation and optimisation of Gumby. Because of this there are a number prerequisites for getting started. It would be out of the scope of this tutorial to explain the installation of each of these dependencies, however there is a load of information out there so I’m going to assume you have the latest versions and a basic understanding of the following: Ruby, Sass, Compass, Node.js, Bower & Git.

Installation

Claymate currently has two functions, installation and optimisation. We’ll cover optimisation later but for now lets setup our Gumby project. With one simple command Claymate will install Gumby and set up a basic project scaffold.

# install Claymate globally via npm
 $ npm install -g claymate
 
 # bootstrap Gumby project
 $ claymate install
 

You can read more on Claymate installation in our documentation but for the purpose of this tutorial we’ll use an example git repository so we can jump back and forth between the stages that make up a Gumby build.

# create and cd into project directory
 $ mkdir gumby-tutorial
 $ cd gumby-tutorial
 
 # clone the tutorial git repo and checkout step 1
 $ git clone git@github.com:GumbyFramework/Tutorial.git
 $ git checkout step-1
 

Now take a look at the directory structure here.

├── bower_components/
 │   └── gumby/
 ├── css/
 │   └── gumby.css
 ├── fonts/
 │   └── icons/
 │       ├── entypo.eot
 │       ├── entypo.ttf
 │       └── entypo.woff
 ├── img/
 ├── sass/
 │   ├── var/
 │   │   └── _settings.scss
 │   ├── _custom.scss
 │   ├── _fonts.scss
 │   └── gumby.scss
 ├── config.rb
 ├── gumby.json
 ├── index.html
 └── ui.html
 

This is what you would see after running $ claymate install. A number of things have happened here in order to bootstrap your Gumby project so lets go through it in detail.

Firstly, Gumby has been installed using the awesome tool that is Bower. You’ll find a full build of the framework in the bower_components directory, as if you had directly cloned Gumby’s GitHub repo. Bower allows you to install, update and manage your front end dependencies; With a simple command you can update your dependencies to the latest releases. This means the bower_components directory should remain untouched so nothing is overwritten. This, however, presents a problem.

We encourage Gumby users to edit the variables in settings.scss in order to customize the framework to as close to ones requirements as possible before overwriting and extending Gumby. However, our changes would get overwritten if we updated to the latest Gumby. Luckily, Claymate provides a solution by copying the files that require editing out of the bower_components directory and into the root of your project.

You’ll notice sass, css, js, img and fonts directories along side config.rb, ui.html and index.html files. The fonts directory is a direct copy from Gumby and contains your icon font while the js/img directories are empty and there for your convenience.

Now here’s where the real magic has happened. Open up the sass directory and you’ll find various partials copied from Bower’s copy of Gumby. If you open gumby.scss in a text editor you’ll notice the original paths have been updated to point to the bower_components directory, except for _settings.scss and _fonts.scss which are pointing to the new copied files.

The only core files you should need to edit are _settings.scss and _fonts.scss, copying these files out of the bower_components directory allows you to work on top of Gumby rather than within. The only manual change you’d need to make when updating would be to copy any new variables into your _settings.scss copy.

This set up allows Bower to really flex it’s muscles when the time comes to update.

Take a look around this fresh installation and get a feel for how the file structure is set up and when you’re ready, checkout step 2 of the tutorial.

$ git checkout step-2
 

Configuration

As I said, _settings.scss is the only core Gumby file you need to edit, and herein lies Gumby’s real power. If you open the file, you’ll notice that since step 1 I have modified a load of the default variables.

Before I was ready to start building out any markup I had changed the grid width, number of columns, font face, header colours, navbar colours and primary/secondary colours. Building the basic theme of the site out like this allows developers and designers to really collaborate on the core styling before any markup or specific styles are written. We have found that this method of development drastically improves maintainability.

In fact, this is how we recommend you begin any development with Gumby. You can tweak settings variables to get the core theme of your project together, or at least as close as you can, before you begin to overwrite anything.

If you call the compass watch command from the root of your project, you can play with the settings variables and check out the results in ui.html. Mess around with the variables and and get a feel for how they are used throughout the framework. Once you’re ready, checkout step 3 of the tutorial (you’ll need to undo or commit any changes you made to move on).

$ git checkout step-3
 

Extensions

Ok, so now we have installed Gumby and configured the settings to get our build as close as possible to the site theme. Before we begin building out the site, we’re going to need to install a few more packages. Gumby Extensions, of which there are currently 4, are modules hosted in separate GitHub repositories and installed individually via Bower. We are going to utilise all four of these extensions in this design.

If you look in the project root you’ll see a new bower.json file and inside the bower_components directory there are now gumby-parallax, gumby-images, gumby-shuffle and gumby-fittext directories. These packages have all been installed using the $ bower install command.

# install all a package
 $ bower install --save gumby-parallax
 
 # update all packages
 $ bower update
 
 # update gumby parallax only
 $ bower update gumby-parallax  
 

Once installed, these extensions needed to be imported into our Gumby project. Open up gumby.scss and you’ll see a new line I’ve added right before _custom.scss importing the parallax sass from bower_components. Once compass compile has been called, our css will contain the parallax styles.

@import "../bower_components/gumby-parallax/parallax";
 

Check out the bottom of index.html to see the new script tags. The parallax, images, shuffle and fittext JavaScript have been added with the other UI modules before gumby.init.js, this is the order in which Gumby JavaScript must be executed.

gumby.js -> modules -> gumby.init.js

 <!-- Gumby and Gumby modules -->
 <script gumby-touch="js/libs" src="bower_components/gumby/js/libs/gumby.js"></script>
 <script src="bower_components/gumby/js/libs/ui/gumby.retina.js"></script>
 <script src="bower_components/gumby/js/libs/ui/gumby.fixed.js"></script>
 <script src="bower_components/gumby/js/libs/ui/gumby.skiplink.js"></script>
 <script src="bower_components/gumby/js/libs/ui/gumby.toggleswitch.js"></script>
 <script src="bower_components/gumby/js/libs/ui/gumby.checkbox.js"></script>
 <script src="bower_components/gumby/js/libs/ui/gumby.radiobtn.js"></script>
 <script src="bower_components/gumby/js/libs/ui/gumby.tabs.js"></script>
 <script src="bower_components/gumby/js/libs/ui/gumby.navbar.js"></script>
 <script src="bower_components/gumby/js/libs/ui/jquery.validation.js"></script>
 
 <!-- Gumby extensions -->
 <script src="bower_components/gumby-parallax/gumby.parallax.js"></script>
 <script src="bower_components/gumby-images/gumby.images.js"></script>
 <script src="bower_components/gumby-shuffle/gumby.shuffle.js"></script>
 <script src="bower_components/gumby-fittext/gumby.fittext.js"></script>
 
 <!-- Gumby Init -->
 <script src="bower_components/gumby/js/libs/gumby.init.js"></script>
 

Debug Mode

The last change I made in this step was to ]turn on Gumby’s debug mode. This is done by adding the gumby-debug attribute to the gumby.js script tag. When in debug mode, Gumby will log information to the console including module installations and event triggers. This can be a really useful tool during development. Open index.html in your browser (it will be blank). Then open up the console (alt + command + i in Chrome) and refresh to see Gumby’s debug info. You can use Gumby’s debugging methods throughout your own JavaScript if you wish.

<script gumby-debug gumby-touch="js/libs" src="bower_components/gumby/js/libs/gumby.js"></script>
 
 Gumby.debug('Print debug message to the console');
 Gumby.info('Print information to the console');
 Gumby.warn('Print warning to the console');
 Gumby.error('Print error to the console');
 

Build

Ok, now it’s time to start building out the example site. Checkout step-4 to see the complete build and follow through the commit log on GitHub or, if you know your way around Git, checkout each commit to look around the code at that particular stage.

$ git checkout step-4
 

Markup

Firstly I built out the basic markup.

The grid is put together as columns inside rows – there’s no need for container elements unless you want them. Grid systems have been around for long enough so I’ll avoid going into too much detail here but we have .row, .columns, .centered, .push_x, and .pull_right and pull_left classes for you to play with. Most of which are used throughout this example project.

<div class="row">
     <div class="seven columns"></div>
     <div class="four columns push_three"></div>
 </div>
 

Gumby’s settings file contains a number of color variables, several of which we edited for the example site. Each of these variables has a corresponding class that can be applied to a button, label, badge or alert. You’ll notice several buttons with pre-pended icons used throughout the design. These can be created with a few simple classes.

<p class="btn primary medium"><a href="#">Primary Medium Button</a></p>
 <p class="btn primary medium icon-left icon-location"><a href="#">Primary Medium Button</a></p>
 

Gumby’s responsive navigation is included at the top of the page complete with a dropdown menu. Check out how it responds – nice, huh? We’ll cover the logic behind the mobile navbar toggle later. If you inspect the logo <img> you’ll notice it has a gumby-retina attribute. In the same images directory we have a retina ready version of the image with @2x appended to the file name. Adding the gumby-retina attribute initialises Gumby’s retina module which will load the retina version on supporting devices.

Sass

Next I wrote some custom sass to style my markup and override a few Gumby defaults.

The details of the Sass could easily be a separate tutorial so I’ll be brief. However, there are a few Gumby mixins I’d like to pick up on.

Fancy Tiles

Fancy Tiles are used to style the footer links and are perhaps best described as a combination of Tiles and the Grid. If you find #foot-links in _custom.scss you’ll see the mixin in use.

/* scss */
 @include fancytiles(8,8,4);
 
 /* compiles to */
 @media only screen and (min-width: 320px) { #foot-links ul { width: 25%; } }
 @media only screen and (min-width: 768px) { #foot-links ul { width: 12.5%; } }
 @media only screen and (min-width: 1100px) { #foot-links ul { width: 12.5%; } }
 

The numeric arguments I’m passing to the mixin specify the number of columns per row I want at three predefined breakpoints, desktop, tablet and mobile. Resize the browser window and see how they respond accordingly. Fancy Tiles are awesome for fat footers like this, product grids and any dynamic website where the required number of rows and columns is unkown. No longer worry about opening and closing rows and save yourself a lot of time and stress!

Respond

Next up is a very important mixin in Gumby development. The respond mixin allows you to define responsive styles at a number of pre-defined breakpoints. Check out the full list of breakpoints in the mixin definition. Simply include the mixin, pass it the required breakpoint and insert your styles. Sass will convert these into ugly media queries when compiled.

/* scss */
 @include respond(portrait-tablets) {
     background: red;
 }
 
 /* compiles to */
 @media only screen and (max-width: 768px) {
     background: red;
 }
 

Font Size

Finally the font size mixin. The em is a great format but can be dificult to work with, we all like px right? Well the font-size() mixin makes the conversion for us. Simply pass in a px size or one of our pre-defined modular scale variables variables.

/* scss */
 @include font-size(18px);
 
 /* compiles to */
 font-size: 16px;
 font-size: 1.125em;
 

FitText

Here is where I first used one of Gumby’s extensions, in this case FitText. The FitText extension was modified from the awesome FitText.js jQuery plugin and serves to make font sizes flexible. Add the .fittext class to any element with optional gumby-rate and gumby-sizes attributes. The gumby-rate attribute works like FitTex.js’s Compressor and controls the rate at which the font size increases/decreases. The gumby-sizes attribute lets you specify a minimum and maxiumum font size separate by a pipe. Resize your browser and watch fittext do it’s thing.

<h2 class="fittext" gumby-rate="2" gumby-sizes="30|60">Traverse the time vortex with precision.</h2>
 

Fixed Positions

Next I applied the fixed position module to the navbar to make it ‘fix’ when it reaches the top of the viewport and ‘pin’ when it reaches the bottom of the masthead. Fixing and pinning like this is a common UI requirement and the fixed position module works as a kind of polyfil for the CSS3 property position: sticky; with some advanced functionality. This module is great for navigation, sidebars as seen in our documentation and many other UI features.

<!-- fix when top of viewport is reached
      pin when window scrolled 500px -->
 <div gumby-fixed="top" gumby-pin="500">My fixed content</div>
 

Skip Links

Skip links slide the window to a specific vertical point. They are quick and easy to set up and are utilised in various locations in this design. The navbar dropdown menu contains a set of skip links and the three featured images at the top of the content area also skip to sections of content. To initialise a skip link add a class of .skip to any element, although usually an anchor. All you need to do then is add a gumby-goto attribute containing either a px value, the string ‘top’ or a css selector and your skip link will take you there. You also have gumby-duration and gumby-easing (requires jQuery easing plugin) to play around with, so have some fun!

<!-- on click slide to #main -->
 <a href="#" class="skip" gumby-goto="#main">Skip to main</a>
 

Toggles & Switches

Toggles & Switches really require a dedicated tutorial. They are one of the coolest features of Gumby and really allow you to get creative and build UI elements without having to write a single line of JS. The basic idea is to add/remove css classes using HTML attributes, so that CSS transitions can be used to power UI aesthectics. We can avoid having to use :psuedo states or wasting JavaScript’s time toggling classes. Gumby comes with Modals and Drawers, both of which are examples of toggles & switches and are not dedicated UI modules with associated JS files.

Markup

In this design we use Gumby’s modal example of Toggles & Switches. First I added the modal markup. The modal is hidden by default with a negative z-index and opacity: 0;, these values are then overwritten when the .active class is applied.

<div class="modal" id="modal">
     <div class="content">
         <h1 class="row">Modal Markup</h1>
     </div>
 </div>
 

Switches

Next I added several switches to open the modal. The gumby-trigger attribute contains a selector targeting the modal element. Inside the modal I have two hidden divs of content. Different buttons and links should open the modal with the appropriate content displayed. To do this, the switch’s gumby-trigger attribute contains a selector that targets the modal itself and the content we want to display, with the content we want to hide specified after a pipe. Toggles & Switches will add a class of .active to the selector specified before the pipe and remove it from the selector specified after.

<a href="#" class="switch" gumby-trigger="#modal,#modal .get-quote|#modal .find-dealer">Get a quote</a>
 

You can get really advanced with Toggles and Switches once thir full potential is understood. I recommend reading our documentation and experimenting with the possiblities.

Parallax

The next extension I used was Parallax. I applied the parallax module to the masthead to quickly create a cool scrolling effect. The Parallax module modifies the background-position of the the element the .parallax class is applied to. It will scroll the background image relative to the window scroll at the rate specified in gumby-parallax.

<!-- scroll background image position at half the rate the window scrolls -->
 <div class="parallax" gumby-parallax="0.5"></div>
 

Shuffle

The Shuffle module provides an easy way manage source ordering. In this example I applied the shuffle module to the #highlights images, so that at tablet size the order reverses. This can be useful for ensuring your content appears above your sidebar when columns stack or moving calls to action and mobile specific features to the top of the page on smaller screens. The shuffle module requires a media query and a sequence specified in a gumby-shuffle attribtue, separated with a pipe. The sequence should be zero indexed, separated with a dash and represent the order the children elements should be shuffled to.

<!-- reverse order at 768px -->
 <div class="row" gumby-shuffle="only screen and (max-width: 768px) | 2-1-0">
     <div class="four columns">...</div>
     <div class="four columns">...</div>
     <div class="four columns">...</div>
 </div>
 

JavaScript

Now it’s time for some JavaScript. Gumby has a load of events and advanced JavaScript features which we won’t go into in this tutorial, but for those who know JS, here’s a couple of simple-ish examples. I won’t be offended if you web designers skip past this section!

Initialisation

So first things first, I created a JavaScript file in the js directory and named it main.js. I then updated the path to main.js in index.html from Gumby’s example in bower_components to js/main.js. I then wrote the first lines of JS used in this project.

The shuffle module works by removing elements from the DOM, reordering and inserting again. Becuase of this, the skiplinks need initialising as if they were dynamically added to the web page. Gumby UI modules trigger and bind to many events that you can use in your custom JS. In this case we bind to the Shuffle module’s gumby.onShuffle event and call the Gumby.initialize() method to initialise new modules of a certain type. There are many events and variations on initialisation and I encourage you JavaScript nerds to check them out.

// Gumby is ready to go
 Gumby.ready(function() {
     // initialise new skiplinks when #highlights are shuffled
     $('#highlights').on('gumby.onShuffle', function() {
         Gumby.initialize('skiplink');
     });
 });
 

Validation

Next up I used Gumby’s Validation JQuery plugin to apply validation logic to the quote form in the modal. Call the jQuery plugin on any form element and pass it a ‘required’ property containing an array of required objects. Each required object should contain a ‘name’ matching an input’s name attribute within the form and an optional corresponding validate function. The validate function is passed the element itself as an argument and must return a boolean to indicate success or failure. If the validate function is ommitted the field will just be tested for a present value. Optional submit and fail callback functions can be specified, if ommitted the form will submit as usual when validation is passed.

$('.get-quote form').validation({
     required: [
         {
             name: 'name'
         },
         {
             name: 'phone'
         },
         {
             name: 'email',
             // email must contain @
             validate: function($el) {
                 return $el.val().indexOf('@') > -1;
             }
         },
         {
             name: 'version',
             // must pick version with valid value
             validate: function($el) {
                 return $el.val() !== '#';
             }
         }
     ],
     // validation passed
     submit: function(formData) {
         Gumby.debug(formData);
         alert("Succes! Posting form...");
     },
     // validation failed
 
     fail: function() {
         alert("Form validation failed...");
     }
 });
 

Optimisation

We’re all about performance at Gumby and have a number of performance based extensions coming to the framework in the near future. Claymate also has a build function to help in creating a single, optimised, production-ready JavaScript file. Check out step-5 to see the final optimisation stage of this example project.

$ git checkout step-5
 

Responsive Images

Media Queries

The responsive images module helps to serve up the most optimial image by file size or format.

In this example site I applied the responsive images module to the masthead to serve up a smaller background image to tablets. The gumby-media attribute can be set on any element with the syntax MEDIA QUERY | IMAGE PATH, it will refer to background images unless specified on an <img>. You can see here that we want bg_masthead-768.jpg to render should the associated media query evaluate to true, with a default image supplied in gumby-default.

<!-- serve up bg_masthead-768.jpg at < 768px viewport -->
 <div id="masthead" 
      gumby-media="only screen and (min-width: 768px)|img/bg_masthead.jpg,only screen and (max-width: 768px)|img/bg_masthead-768.jpg">   
 

Feature Detection

I also applied the responsive images module to two large images. In this instance I’m serving up images based on feature detection. The gumby-supports attribute can also be used on an any element and should use the syntax FEATURE | IMAGE PATH. The feature detection is passed directly to Modernizr so make sure your Modernizr build contains the tests you require. Webp is an awesome image format from Google I recommend you check out, however gumby-supports can be used with any feature detection supported by Modernizr e.g svg. You could even add your own tests.

<!-- if supported use webp image otherwise fallback to jpg -->
 <img gumby-default="img/img_tardis.jpg" gumby-supports="webp|img/img_tardis.webp" />
 

Build JS

Each JS module is a separate file. As explained earlier we recommend that you include the required modules separately in development. Just be sure gumby.js is included first and gumby.init.js is included last. In production, we recommend you minifiy and concatenate all your JavaScript down to a single optimised file.

Don’t worry, Claymate is here to help again! Claymate’s build function will create a single gumby.min.js file for you, containing the UI modules you require and any external modules and custom files you specify.

When we installed with claymate, a gumby.json file was generated. Simlar to bower.json, we can update this file to include the information Claymate needs so that we can call $ claymate build without any arguments. Check out gumby.json and you can see the specification for this project. The UI modules we’ve used, the extensions and also our main.js file are all in there. This will create a new gumby.min.js file inside your js directory containing all the code you need for your application to run.

Your project is now ready for launch!

Conclusion

That brings this tutorial to an end. We’ve covered installation using Claymate, configuration using Gumby’s settings files and Sass variables, building an example site with Gumby and production ready optimisation. I hope you found this useful, if you have any questions, our Google+ community is a good place to start. We have a thriving and growing community of Gumby developers ready to help and discuss responsive web design. I’d also encourage anyone who wants to contribute to check out our GitHub repositories and shoot us any pull requests or ideas for improvements or new functionality you may have. Finally follow me and Gumby on Twitter to keep up with the latest!

You may have not given much thought to the font you currently use for coding before. You are probably happy with the default monospaced font that comes with your favorite IDE and over time have become accustomed to it. These fonts may be the best font for you, but are they actually good for general coding? I would never tell you which font is good (currently I am using Ubuntu Mono Regular) or bad, as there is no way to categorically measure it. It does come down to each individual coders preference. But there are certain fonts freely available that have been designed purely with programmers and coders in mind.

With this post I just wanted to highlight some of the best free monospaced fonts that have been optimized for programming and to also offer some basic pointers for selecting a particular font.

So what should you be looking for in a good monospaced programming font? For starters it has to be clear and highly readable, proportionally-spaced, and for obvious reasons, needs to come packaged with an extended characterset with distinguishable glyphs. And perhaps more importantly than legibilty, the ’1′, ‘i’ & ‘l’ and ‘o’, ’0′ & ‘O’ have to be clearly identifiable as different characters. It is using this base criteria that I selected the free fonts below.

Quick note: For the screenshots I had intended to preview the fonts in Sublime Text using example code, but this proved to be far too impractical as the screenshots ended up being far too large when attempting to properly show the code in action. Instead I opted to use Flipping Typical, a handy web-based tool for previewing the fonts you have pre-installed on your computer, using the basic characters you can see below. Hopefully this will still give you a decent visual overview of what each font offers.

Anonymous Pro by Mark Simonson (Regular, Italic, Bold, and Bold Italic)

Anonymous Pro Download Page

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week.

You may also like to browse the Web & Mobile Creativity Archives.

OluKai

Web Effectual

Dataveyes

100 Years of Design

Mark Collie

Mike Kus

The Perfect Kilometre (iOS App)

Joel Parkinson Training (iOS App)

Many of the articles on this site are aimed at the digital space, such as design for the web, mobile and apps. And let’s face it, most design in general is done in the digital space, much of it never makes it on to paper. But what about when you do want to take your designs from the virtual to the physical world – from digital to print?

It can take a lot of tinkering to get your print designs to look right. Though your designs may look great on the screen, that might not be the case once it has been printed. A thorough proofing process is essential for getting a print piece that looks just as you expect.

Misprinted work is costly. If it’s a problem with your file, you will likely have to fork over more money to fix it. If you can’t afford reprints, you may have to keep the incorrect piece or wait until you can afford to reprint. If it’s a client project, the mistake could put a dent in their plans, your bank account, and your business’s reputation.

A thorough proofing process can head off most print design issues. Though nothing is foolproof, keep the following points in mind with your next print project:

Words, Words, Words

Spellcheckers are unreliable. Read every word in the piece several times before sending it off for printing. Check your work, make corrections, recheck it, and then have someone else review it.

When working really closely on a project, your brain can fill in letters and words where they don’t exist. Having another pair of eyes check it over can eliminate these mistakes.

By Accident or by Design

During the process of creation, sometimes something important can end up being left out. Some of the most common mistakes include inconsistency of fonts, colors, shadows and other minute details. If you made a big change in multiple areas, such as font or color, evaluate each element carefully to ensure that the change was made every place it needed to be changed.

Additionally, if you’re creating something for a client, compare the design to the original specs to make sure you’ve included all of the necessary features.

True Colors Shining Through

Matching colors on the screen to colors on the paper can be difficult. From the design program, to the final digital file, to the print provider’s presses, each could affect the final results. Though many graphic designers and photographers like to work in RGB, digital printing is often carried via a CMYK process. Some printers will print from your RGB file. Otherwise, you can convert the design to CMYK yourself, though it may take some knowledge and adjusting to get the colors to look right.

How your monitor is calibrated may also affect how you see the colors on the screen, versus how it will look in print. One way to get an idea is to print a test image and compare it to what’s on your screen. You may find you need to make adjustments to your design’s colors.

Resolution, Baby!

For small print jobs like business cards, brochures or booklets, it’s recommended that images be saved at 300 DPI. There’s more flexibility for image resolution with large format jobs, such as banners and signs. For photographic images on canvas, 100 DPI is considered plenty. A good rule of thumb is to always save your design image files with the highest resolution possible. Though you can scale the image down if you must, it is impossible to add pixels after the fact.

Bleeds, Crops & Cuts – Oh My!

A bleed is part of the design that extends beyond the crop marks and is cut off in the finishing process. Crop marks indicate to the printer where to cut the design to get the size and shape you desire. Cutting tolerance is the small variations that occur when sheets are cut down to size by machine. Setting up your design file to suit your printer’s bleed, crop mark, and cutting tolerance requirements is essential to getting the final printed design you expect.

Bleed and crop mark expectations vary from project to project and printer to printer, but many small format jobs require 1/8″ bleeds, while many larger format pieces may need a 1/4″ or larger bleed. A high quality printer has a cutting tolerance that measures no greater than 1/16″.

Pick the Perfect Paper

How the colors look for the final printed piece will depend on the substrate you choose. Coated paper has a smooth, satin-like finish that is somewhat resistant to dirt and moisture. A coating will restrict how the paper absorbs ink, which helps to maintain clarity and is desirable for printing photographs and other sharp images.

Uncoated paper is generally not as smooth, with a slightly rough feel. It has a tendency to be absorbent, like a sponge, which can cause ink to spread on the paper and result in less crisp lines. Work with your printer to find the right substrate if you’re not sure which to use.

Fit to Print

Use your home or office printer to print it out with standard paper, cut it down, and fold it, if needed. This will give you a glimpse at how your printed project will look, giving you the chance to refine your design if needed. Once you’ve sent your design file to the printer, you will also get a digital proof to approve.

Go ahead and print the digital proof, too. Although this in-house test print won’t necessarily show exactly what you can expect, it will give you a good idea. Evaluate your digital proof very carefully because this is often the last step before your order is printed.

Proof is in the Proof

Digital proofs are ideal due to the ability to create and send them quickly and cheaply, but there are times when it’s best to get a hard proof. If the substrate has distinctive properties, such as metallic paper or synthetic materials, or you’re trying a new printing technique such as white ink printing, request a hard proof to see the design on the medium.

You may also want a hard proof if you have precise brand colors to replicate. There is usually a cost to ordering a hard proof, but it’s a small price to pay to know what to expect when your order is delivered.

Concluding

After stepping through this checklist and ensuring that the interested parties are happy with how the proofs look, the final step is approving the project for printing. You’ve made the effort on your part to make sure it goes off without a hitch; the rest is up to your printer. If you’ve done your homework to find a quality printer, you’ll know that when you receive the final product it will be exactly what you want. But that’s another checklist for another article on another day.

What do you do if you’re partway through an important project for a client and you get, well… stuck? You simply can’t wring any more good ideas from that brain of yours, and none of your ordinary tricks to relieve creative block are working.

To many designers, this is the kiss of death, but I’m here today to tell you that it doesn’t have to be. We’re going to explore some unusual, but very effective ways to get those creative juices flowing again, so that you can get back in the flow of things and continue to wow your clients.

Creativity in Routine?

Here’s a fact about the human brain that you may not know: every single decision you make throughout your day will have a negative effect on your ability to successfully complete a task. That’s right – whether it’s choosing which color to make that drop down menu, or whether you should wear that green shirt or the blue one, every time you’re forced to make a decision, you lose just a bit more mental energy.

This is why you may find yourself burnt out by lunchtime if you begin your day by answering emails or answering silly questions from dense clients. Those small decisions have used up a huge amount of your energy for the day. Sure, you can recover some of it by eating a nutritious lunch or having a quick nap, but you won’t be quite as productive after noon as you were before.

Adopting systems and routines that automate a lot of your daily decisions can help tremendously in recovering some of that creativity you thought was lost forever. Consider taking a full day to plan the little things you know you will have to do for the week, even down to what color shirt you’ll wear. Try to batch your email responses if you can – it’s not a crime to cut and paste responses if they’re relevant and get the point across. The more things you can automate, the more you can turn your focus to the work that truly matters.

Getting A Jolt of Energy

Starting a new project can be very intimidating. And yes, I’m about to use yet another of my famous food analogies, so get ready. Have you ever been to restaurant, and the waiter hands you a menu that’s absolutely terrifying? I don’t mean it has teeth or it growls at you or anything like that. I mean, there are so many items on the menu, and the descriptions are so lengthy, that you almost lose your appetite and want to run back out the front door? Too much choice can do more than confuse us – it can just about ruin our experience and make us want to hide while we try to process everything in front of us.

For me, it seems like the more freedom I have with a design project, the scarier, more confusing, and more impossible it becomes to get started. Of course, freedom in my design work is something I’ve strived very hard to achieve, and I’m very fortunate to have it. But sometimes, with a big, hairy project deadline looming over my head, I almost wish I was a student again, with rigid assignments and a limited scope as to what I could work on.

What’s the solution to this problem? I’ve found that doing something spontaneous to get my blood pumping and my creative energy flowing helps tremendously. Exercise is the most obvious choice here, and I don’t need to tell you how many ills it can help cure besides creative block. However, there are other options, such as spending quality time with friends or loved ones, working on something else, like a personal project, or, my personal favorite, cooking.

Calm Those Jitters

Sometimes, your problem isn’t that you’re frightened into submission by your project. Rather, you’re inundated with too much energy, which can manifest as nervous fidgeting, hair-pulling, or procrastinating by doing meaningless busy work. This can be just as maddening because you’re not sure exactly where to begin, and you know you should be doing something productive, but you just can’t figure out what.

You may not realize it, but your brain is like clay. Whatever approach you decide to take for your work will leave an impression on your brain for next time. So, if you react to a challenging project with stress, nerves, or excessive anxiety, you’re saving a copy of that reaction in your brain’s hard drive, which it will automatically pull up every time you’re faced with a similar dilemma.

In this case, you need a solution that will burn off or diminish some of that excess energy. A calming activity, such as meditation, walking, journaling, or reading, will help soothe your brain and help it focus on the task at hand.

What Do You Think?

How do stress and lack of focus impact your ability to complete projects successfully and on deadline? What methods have you devised for coping with these problems that all designers share? Let us know in the comments.

ThemeForest is running a limited-time discount on all its email templates. You get a flat 30% discount on all email templates till 12pm on 17th February (AEDT). With over 600+ designs to choose from, you will find something that will suit your needs. Most of the email templates on sale are also highly customizable, so you can easily edit them to go along with any campaign you might be running.

Email promotion is a great way to engage with your core audience. People who sign up to your mailing list are actively looking to hear about the great deals and promotions you might be offering. ThemeForest offers various email templates that can help you add a fresh lick of paint to you email marketing efforts. They offer a range of different email templates ranging from newsletter templates to templates for catalog emails.

Some might say that email marketing is an inferior marketing channel when you consider more modern channels like social media and mobile marketing. Well those people probably have no idea what they are talking about. According to a report in mid-2013 from marketing data firm Custora, the rate that customers are acquired through email has quadrupled over the last four years in online retail.

Recent studies by Experian Marketing Services and Movable Ink have seen an increase in consumption of marketing emails on mobile devices. Movable Ink’s data revealed that 65% of marketing emails were opened on a smartphone or tablet in the fourth quarter of last year. It’s also worth mentioning that all signs point to this number increasing in the coming years.

They have also noticed this trend on ThemeForest with an increase in demand for email templates that are responsive. If you are looking for ways to deliver an optimal experience to customers across various devices, have a look into responsive email templates. This technology automatically adjusts emails to the user’s screen size, and delivers the best possible experience to that user.

Have a look through their email templates category and you will find a lot of the email templates are responsive ready and will work with leading email services like MailChimp, Campaign Monitor, Litmus and more.