Love Your Constraints For Better Design Skills

Introduction

There are two factors that go to making a good design; constraints and creativity. These two factors pull in opposing directions, with constraints limiting your available options and creativity increasing your options. Counter-intuitively, contraints are in many ways your friends and creativity is often the enemy. After all, there are infinitely many ways to creatively fill a blank page and only our constraints allow us to limit that infinity to the single product we deliver.

So what kinds of things constrain us? We usually have certain visual elements that need to be included, whether that be shape, text, composition, images or colour. We are aware of the perception or ‘feel’ that the client wants us to create in the product. By far the most powerful constraint available to us though is our own sense of taste and we’re all familiar with using this to limit what we produce.

These kinds of things are our high level constraints and they certainly help to limit the design space to more manageable proportions. We need to impose far more detailed constraints as we focus in on a few designs to present to the client though. Let’s look at the constraints I used to design my own logo. I’ll start with a brief summary of the top level constraints I set up for myself but I want to focus on the more fine-grained detail as that’s where people often struggle.

I’m a web designer. I don’t sell cars or houses and I’m not a dentist; all of which have obvious objects associated with them. Web design is more ephemeral. I’m not really an artist, I’m not really an engineer, I’m not really a programmer; all of whom have obvious tools associated with them. Web designers are a bit of all three which makes for a messy logo. I’ve never been a fan of things like the double-barreled, random-arbitrary, adjective-noun naming convention that blossomed in the dot-com boom of the back-end of last century; purple-tomato or quizzical-kangaroo make for obvious logos but they’re content-free. What I really wanted to showcase is the personal nature of my business and my clean, uncluttered and engineered design style. Mike Higginbottom is a good solid no-nonsense Northern name which is nothing if not memorable. So I went with that and that leads to the meat of this article: what can we do with the letters M and H?

Analysis of Form

Here’s a pairing of a nice simple uppercase M and H in all their glorious, huge point size Arial ubiquity. Just let them batter your eyes with their brutal forms for a moment, standing there like some typographic superheroes, all hands on hips.

Here’s a quick comparison. There’s nothing that’s not obvious here but it’s the recognition of these factors that provides our contraints.

  • Both are constructed of straight stems and bars. No soft curving bowls or shoulders here.
  • Both have rectangular, and potentially square, overall shapes.
  • Both have four very strongly defined corners.
  • Both have two strong vertical stems enclosing the counters of the letter forms.
  • Both are what we might call spiky, the M slightly more so than the H.
  • Both have a crossbar connecting the uprights and forming the main difference between the two letters.
  • The M has a two part diagonal crossbar, here filling the whole of the internal space.
  • The H has a horizontal crossbar, here set slightly above centre.
  • The H is substantially slimmer than the M.

OK, let’s look at them in lower case.

There are some obvious differences between the upper and lower case glyphs and similarities in the lower case:

  • We still have our very strong vertical main strokes.
  • There’s a strong emphasis in the verticals being on the left of the letter forms.
  • The crossbars are now much softer, curving shoulders.
  • The shoulders of both letters are much more similar in the lower case forms.
  • We have retained the spikiness at the baseline.
  • The letter h is almost exactly the same as the left half of the m, but with an ear rather than a full ascender.
  • The letter m has a repeated shoulder.

Letter Layout

So, let’s see what we can do with this information. Obviously we can play with the detailed form of the letters, but let’s start by considering their relationship to each other in space. We’re looking for MH rather than HM so we need to consider the preceived ordering of the letters; the M needs to appear either above or to the left of the H, or possible both. For the upper case letters we can generate things like the following:

None of these are particularly strong as they stand with the third perhaps looking the most promising for future development. The diagonal design does have the advantage of providing two white space corners at top right and bottom left which might be useful in some contexts so it shouldn’t be discounted entirely. But that’s what I’m going to do anyway.

Vertical Arrangement

The vertical design is pretty unappealing, essentially because of its tall and spindly nature, but it does have potential for further work. Here are a few basic structural variations on that theme, all of which involve finding ways to shrink the height and introduce some measure of compressed solidity. All of these really serve only as the basis for a more refined logo. The key here is that we’ve used the constraints listed above to focus our design effort onto a few structural forms worthy of exploration.

The first example works by thickening the strokes and bringing the crossbar’s lower apex of the M much higher up into the centre of the letter. The remaining three work in a similar way but they encapsulate the H within the body of the M, using the descending apex of the M to key into the top of the H. Notice how all these examples are very unpolished. Force yourself to focus on the structure by leaving the details unfinished.

Horizontal Arrangement

So, what do we get if we use a horizontal arrangement:

The first design uses the two outer stems to envelope the letters. The design in the top right introduces the idea of angling the stems but is, in itself, not very appealing. However, in combination with the idea of interleaving the two letters, it leads on to the bottom two structures which show more promise and are worth investigating further.

Lower Case Combinations

If we take the lower case letters we can exploit the obvious similarities in the structure of the loops to get the following two images. The second of the two merges the letters even more and has the advantage of providing symmetry which could be exploited to further refine the design. For example, removing the ear on the M and reversing the thinning on the left hand loop would provide a reflection about the central ascender stem.

Where to Go From Here

This article has presented some basic techniques for examining the structure of a small selection of letter forms. This is pretty mechanistic though and the art of design comes from adding a more intangible creativity to these basic technical techniques. For my own site, which uses a hexagonal motif throughout, I extended the basic uppercase horizontal arrangement by placing the letters on adjacent faces of an isometric representation of a cube. In 2D space this takes the form of a regular hexagon. Extruding the two letters backwards and allowing them to intersect gave the following logo:

If you want to have a play then feel free to take the above ideas as a baseline and polish them into useable designs. Alternatively grab another pair of letters and study them in a similar way.

Glow Effects – The When And The How

Back in the old days the canonical example of an over-used effect was the HTML <blink> tag. One of the top candidates today has to be the ‘glow effect’. Having said that, if used judisciously, it can be a very effective effect. So, when should you use it and how can you implement it?

When to Use a Glow

The short answer to this is rarely. There are some very specific instances when an obvious, in your face glow is appropriate. Scenes that naturally include a source of illumination are the obvious use case. Examples include space scenes, aurorae, fires and flames, bio-luminescence, glass objects, neon signs, sunlight through windows, water and ice.

More common, and often over-done, are glow effects in logos and lettering.

Perhaps the most common ‘correct’ usage would be in user interface elements such as glowing buttons etc.

Finally, glows are often employed to produce more abstract images.

How to Create a Glow in Photoshop

There are a thousand variations on a theme here but this should be enough of a recipe to get you started on the path to discovery.

  • Create a new layer and select it.
  • Use the Paint Bucket to fill it with black (#000000)
  • Select white as foreground color.
  • Select the Brush tool. Right-click anywhere on the image and set Master Diameter to 3px and Hardness to 100%.
  • Create a smooth curved path using the pen tool.
  • Right click the image, tick Simulate Pressure and select Stroke Path
  • Open the Paths window and click below the work path to deselect it.
  • Right click the layer and select Blending Options.
  • Tick Outer Glow and select it. Set an appropriate colour.

Mike Rigby

After our successful collaboration on his company web site, Mike Rigby contacted me to help support his political campaign to become a local councillor in Somerset. He was looking for a vehicle to raise awareness of a number of issues in his local community and to focus action on solving them. He was already running successful Twitter and Facebook accounts to this end and wanted to support this with more formal, feature length articles.

Using existing campaign artwork as a basis for the bold web site theme, I set up a simple WordPress blog and supporting static content. Crucially, it had to be simple and efficient for Mike to update the site content himself and WordPress was the ideal mechanism to achieve this.

Original Carbon

I was recently approached by Mike Rigby to make some changes to the web site of his carbon offsetting company, The Original Carbon Company. He already had a site in place using a custom written CMS system but after a couple of months of gradual improvements it became clear that we were really bumping up against the limits of what his CMS could achieve. I suggested we move to a WordPress solution and we worked together to produce a custom theme and a new site architecture. He was extremely pleased with the results and I think you’ll agree it’s a fantastic showcase for his company.

Branwood Advert And Style Guide

Branwood Preparatory School were in the common situation of not having a consistent set of brand assets. They did have a logo and a broadly defined colour scheme which were in use throughout the school and in its marketing literature, but a number of significant variations had crept in over the years. They asked me to produce a single, consistent set of documents that would serve as a central point of reference for everything they produced.

The result was a simple style guide that struck a balance between consistency and flexibility, defining the master logo design together with a set of font and colour specifications. All this information was presented in a variety of formats (Illustrator, PDF and JPEG) laid out in such a way as to give an indication of the look and feel that should be employed in future products.

As a follow up to this work they also asked me to produce a print ad for publication in a local directory. It’s easy to see how the look and feel of the style guide has been carried through to a specific publication.

Branwood Prep School Web Site

Branwood Preparatory School wanted a new look for their web site. The traditional school colours of burgundy and gold set a strongly contrasting colour scheme but the brief was for a contemporary and airy feel for the web site.

A strong and prominent logo combined with a striking and subtly shadowed display font maintained the gravitas and seriousness of the school’s brand and their approach to education. Luxury and modernity were achieved through generous use of white space, simple and delicate layout hinting, and an easy on the eye sans-serif body font.

The back-end was hosted in a WordPress environment with a number of plug-ins for media, calendaring, dynamic mapping etc. Content management and display was handled through careful design of the categories hierarchy together with some custom PHP coding.

Automatic cPanel Backups

Many hosting services allow their customers to administer their web sites using a product called cPanel. One of the features of cPanel is the ability to backup your hosting data, including your databases, email setup and code. Of course, most hosting providers also perform backups for you so you might wonder why you should bother about doing your own as well. But what if the hosting company folds or what if you want to move your site to another hosting provider?

The cPanel backup facility lets you do this manually but it’s also possible to spoof the web form it uses and drive the cPanel engine using a PHP script. That allows you to automate the backup of multiple web sites to an FTP server somewhere and have it run automatically as part of a cron job on a regular basis. Windows devs can get the benefits of cron using Windows Task Scheduler or the excellent pycron by Gerhard Kalab.

The Code

Here’s the script I use to do this. It’s based on work initially done by Justin Cook back in 2006 but cPanel has changed a bit since then and I’ve had to tweak it a little to accommodate these changes. I’ve also dropped in a simple loop through an array to backup multiple sites.

<?php
 
// Automatic cPanel FTP backup
// This script contains passwords. Do not put it in a public folder.
 
// ********* THE FOLLOWING ITEMS NEED TO BE CONFIGURED *********

// First site details
$sites['0']['domaintobackup'] = 'mycompany.com';
$sites['0']['cpaneluser']     = 'user1';
$sites['0']['cpanelpass']     = 'pass1';
// This is found as part of your cPanel URL
// e.g. https://mycompany.com:2083/frontend/x3Bronze/index.html
$sites['0']['cpanelskin']     = 'x3Bronze';

//Second site details
$sites['1']['domaintobackup'] = 'example.com';
$sites['1']['cpaneluser']     = 'user2';
$sites['1']['cpanelpass']     = 'pass2';
$sites['1']['cpanelskin']     = 'x3Bronze';
 
// FTP host details
$ftpmode = 'ftp';               // 'ftp' for active,
                                // 'passiveftp' for passive,
                                // 'scp' for scp - most secure
$ftpuser = 'ftpuser';
$ftppass = 'ftppassword';
$ftphost = 'my.ftp.server.com'; // Full hostname or IP address for FTP host
$ftpport = '21';
$ftpfold = '/sitebackups';      // Destination folder for backup files
 
$notifyemail = 'backupwarnings@mycompany.com';
$secure = 0; // Set to 1 for SSL (requires SSL support)
$debug = 0;  // Set to 1 to have web page result appear in your cron log
 
// *********** NO CONFIGURATION ITEMS BELOW THIS LINE *********
 
foreach ($sites as $site)
{
	if ($secure)
	{
		$url = 'ssl://'.$site['domaintobackup'];
		$port = 2083;
	}
	else
	{
		$url = $site['domaintobackup'];
		$port = 2082;
	}

	$socket = fsockopen($url,$port);
	if (!$socket)
	{
		echo 'Failed to open socket connection… Bailing out!\n';
		exit;
	}

	$authstr = $site['cpaneluser'] . ':' . $site['cpanelpass'];
	$pass = base64_encode($authstr);

	$params = 'dest=$ftpmode&amp;amp;email_radio=1&amp;amp;email=$notifyemail'.
	          '&amp;amp;server=$ftphost&amp;amp;user=$ftpuser&amp;amp;pass=$ftppass&amp;amp;port=$ftpport'.
	          '&amp;amp;rdir=$ftpfold&amp;amp;submit=Generate Backup';

	fputs($socket,'POST /frontend/'.$site['cpanelskin'].
	              '/backup/dofullbackup.html?'.$params.' HTTP/1.0\r\n');
	fputs($socket,'Host: ' . $site['domaintobackup'] . '\r\n');
	fputs($socket,'Authorization: Basic $pass\r\n');
	fputs($socket,'Connection: Close\r\n');
	fputs($socket,'\r\n');

	while (!feof($socket))
	{
		$response = fgets($socket,4096);
		if ($debug)
		{
			echo $response . '\n';
		}
	}

	echo $site['domaintobackup'] . 'complete.\n';

	fclose($socket);
}
 
?>

Personally I call this using the PHP CLI in my mobile USB stick XAMPP installation from my crontab and it backs up to the FTP server on my USB stick. Having said that, there are plenty of ways you can use this script and picking the best one really does depend on how you work and what your general development setup is.

Pitfalls and Their Solutions

A few things are worth noting if you’re trying to set this up yourself. There are two top tips for diagnosing problems with this setup:

  • Set $debug=1 in the script so you can see what errors you’re getting if any.
  • Check the incoming connections log on your FTP server to make sure the FTP data is getting through.

More specifically, if you look at the FTP server log and don’t see the connections coming in from the script then make sure your firewall/router is letting the traffic through on the right ports. The ports for FTP are 20 and 21 for the FTP protocol traffic itself and various other ports used for the payload data. Those ports depend on how you have your FTP server setup (see the discussion of passive mode FTP below).

The other potential pitfall with completely missing FTP connections is that you might be running a NAT router and yet not have setup port forwarding for the inbound FTP traffic in order to route it to the IP address of the FTP server itself.

If you’re using passive mode FTP (you probably should be) and you’re seeing connections in the FTP server log but they’re failing after the protocol negotiation with errors like 425 Can't open data connection. then make sure you’ve allowed the incoming data ports through your firewall as well as just the FTP protocol ports of 20 and 21. Setting up the passive mode FTP server settings lets you do this as well as set up the correct external IP address. There’s a great article on how all this works in general at FileZilla.