Become a Master Designer: Rule Four: Spacing Is Your Friend

Learn about proper spacing

Part Four of Seven Easy Principles to Becoming a Master Designer.

Sorry for the long delay in releasing this latest installment of Seven Easy Principles to Becoming a Master Designer. We have been slammed here at Go Media and I literally haven’t been able to touch anything except paying projects for the past two months. Enough complaining. On with the show!

This lesson is all about layout and spacing. One mistake I see young designers make frequently is that they cram everything too close together. They try to put too much content in too small of a space. Space is your friend! Space does many things for you. It makes your copy easier to read. Space makes your over-all composition easier on the eyes of the audience. And space also makes your design look elegant. You’re telling the audience: “we’re so rich we can afford to use this entire poster to communicate this one little message.”

So, there is a basic strategy for the layout (spacing) of your design. And that strategy is: HAVE ONE. What I mean is – have a plan. Have a system. This is the first thing. Unless your GOAL is to make the entire layout look random, you’re going to need a plan. This is usually accomplished with a grid. The grid can be any style you want. But you need to have an underlying system to what you’re about to do. Here are a few examples of different grids, just so you can get a sense of how different or unique your grid can be.

Sample design grids

Now, here is some of the same content laid out three different

Create a Killer Band Site in Drupal – Part 2 – Slicing in Illustrator

This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection Cube. He is an expert in Drupal, which I am totally not familiar with. He intrigued me when he told me that the majority of the bands on Sony’s record label are powered by Drupal. Drupal is basically an open source CMS, and I was interested in learning more about it. So that’s why he’s writing this tutorial for us. You can learn along with me!

Read the introduction – What’s Drupal and why?
Read Part 1 – Design it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming in Drupal
Read Part 5 -Drupal Admin

22

Introduction

We started this Series in Adobe Illustrator. Its a great tool for web design. Certainly Photoshop is more common, but Illustrator has some flexible advantages. Everything is kept vector and therefore if a client makes some changes its quick to fix. So, I’m going to cover slicing in Illustrator in this tutorial. If you built the last design in Photoshop or if you would like to open up this document in Photoshop then the process for slicing there is virtually the same. There are only subtle differences.

Set Up Our Prep File

In our last tutorial we created our layout as a mockup that is fit for client presentation. Open up that file and save it as goband_layout_prep.ai. In this tutorial we will remove any parts of the layout that don’t need to be sliced for the coding of the website. See the image below for what our file will look like for slicing.

Most of the text is removed. And I repositioned elements for optimal setup for slicing. The search icon is moved over to the right. The photos and single icon in the sidebar are moved down to make room for

Go Media in Computer Arts Feb 08 Issue

ca108-ornate1.jpg

Go Media is fortunate enough to be included twice in the new Feb 08 issue of Computer Arts Magazine. Haley wraps up the 4 part tutorial series for cross-media design by explaining how to output a logo to a mobile device. And I wrote a tutorial doing some ornate typography from sketch to vector. Check it out:

ca108-ornate2.jpg

From the article…

“Ornate lettering isn’t anything new. It’s been around for centuries and there are many ways to create it. You can get out your pens, pencils, brushes, rulers, French curves, and a compass; but I can almost guarantee that most young designers today would rather just use the computer than create it by hand.

Although we’re going to be using the computer, we will still start with a sketch. We will scan it into the computer and use Illustrator to create a vector version and add some additional detail. Then we’ll use 3ds Max to give it some depth. We’ll take it back into Illustrator and Live Trace your 3d render and then finally take the lettering into Photoshop to put on the finishing touches.

The purpose of this tutorial is to give you an insight into my workflow and inspire you to create your own lettering. Have fun!”

ca108-mobile1.jpg

Here’s an excerpt from the Cross Media design Part 4:

“In our November 2007 issue we began a series of tutorials showing you how to create brand artwork and adapt it for different media. We started off by creating a logo and a print ad, then animated the logo for the web, and last month brought it to life for broadcast with a range of special effects. We finish the series this issue with exporting an animation for mobile devices.

This tutorial will give you a breakdown of the different formats and procedures that you need to choose between. We’ll take a look at Adobe’s Device Central, a great resources for finding specs on the latest devices, and explore how it can be used to preview mobile content. We’ll also cover how to export to M4V, 3G, and FLV formats using QuickTime Pro and After Effects.”

ca108-mobile2.jpg

So you can either pick up the issue if you’re interested in reading the tutorial or visit their website. www.computerarts.co.uk

ca108-cover.jpg

Go Media HQ – Initial Floorplans

Concept-2

Making Some Headway

Our good friend and client Pete Maric (www.petemaric.com) is helping us design the floorplans for our new building. After a few modifications and revisions, we’ve reached a really solid floroplan that we will be building out. This is only for the 3rd floor remember. This is where our office will be. The other two floors have not been designed yet, but we are taking it one step at a time.

Floorplans

Concept-1

We’re also still deconstructing everything from the previous owner’s business. We’re basically cleaning house, gutting the entire thing, and building our own office. All the debris you see in these photos will be removed and each floor should look empty before we start doing anything else.

GoHQ_construction_1_15_08-016

See more photos after the jump or view our flickr set.

Free Vector Pack 9 Sampler

Create a Killer band site in Drupal – Part 1 – Design

This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection Cube. He is an expert in Drupal, which I am totally not familar with. He intrigued me when he told me that the majority of the bands on Sony’s record label are powered by Drupal. Drupal is basically an open source CMS, and I was interested in learning more about it. So that’s why he’s writing this tutorial for us. You can learn along with me!

Read the introduction – What’s Drupal and why?
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming in Drupal
Read Part 5 -Drupal Admin

22

Design

You can design the site however you want, but for the sake of this tutorial, we’re going to use Adobe Illustrator and download a few resources from the Go Media Arsenal freebie page.

Let’s get started by downloading the Go Media Vector Pack Sample and the Go Media Texture Pack Sample. We also used a couple photos from Istockphoto.com. Feel free to insert your own favorite band pics though.

Set Up Our Document

Open up a new Illustrator document at 1160px width by 950px height. For Units choose Pixels. Under the Advanced dropdown choose Color Mode: RGB, Raster Effects: Sceen (72pi), and Preview Mode: Pixel. Now lets get our

Create a Killer Band Site with Drupal: A 6-part Tutorial Series

This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection Cube. He is an expert in Drupal, which I am totally not familar with. He intrigued me when he told me that the majority of the bands on Sony’s record label are powered by Drupal. Drupal is basically an open source CMS, and I was interested in learning more about it. So that’s why he’s writing this tutorial for us. You can learn along with me!

The Complete Lesson Index:

Read Part 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming in Drupal
Read Part 5 -Drupal Admin
Read Part 6 -Wrap Up and Additional Resources

Introduction

sitelayout.jpg

In this six-part Drupal tutorial series we’ll be reviewing how to create a Drupal website from scratch for the fictitious GoBand . Also, we’ll review an alternative development path for website design by using Adobe Illustrator. You will learn exactly how to build a fully functional dynamic band website from start to finish in this lesson. This first part will go over what Drupal is and why you should use it.

drupal1.jpg

If you are not familiar with Drupal, I’ll briefly outline some reasons to choose it as your platform of choice for website design:

Intricate Patterns in Illustrator

This tutorial will show you how to create intricate patterns in Illustrator super quickly. Stuff that would take you hours to draw manually with the Pen Tool takes just seconds when you use this technique. This tutorial is special because it was written by a guest author. His name is Barton Damer. I think he did a great job this time around and you can probably expect more tutorials from Barton in the future. So if you like it it, show your support and leave a comment! With that said, on with the tutorial!

You can watch the video or read the step by step tutorial below.

Intro:

We’ll use some elements from Go Media’s Arsenal to give us a great starting point. In this particular tutorial I used Decorative 2 from Set 8 and also the Currency Ornaments from Set 4. If you do not have these elements, no problem, you can either create your own or use some stuff from our free sample pack. The principal behind this tutorial is using the Pattern Brush tool in Adobe Illustrator.

Final Image Using the Pattern Brush Tool in Adobe Illustrator

Step 1:

I chose this single Go Media swirl design from Decorative 8. Outlined it in black with a white fill. Then drew a

Home Sweet Home

Exterior of Building

It’s a new year and an exciting new development at Go Media is finally starting to take shape. Go Media is starting to build out a new headquarters! We hope that this new work environment will be the envy of all designers. Ok, It may not be THAT nice – but it will be a huge step up from our current facility.

deconstruction

One thing I have always preached in business is being frugal. Earn the money before you spend it. And in keeping with that philosophy – we have had to keep our overhead down (since we’ve been poor.) In order to keep our overhead down, we’ve run Go Media out of my apartment, then out of a duplex and currently out of my townhouse. But this past year we finally had the good fortune (and need) to move beyond our 600 square foot livingroom/dining room space that 7 (soon 9) total staff members currently occupy.

Side of Building

So, on December 27, 2007 after a year-long search Go Media closed on a 15,000 square foot three story warehouse that we are going to turn into our headquarters. We are obviously VERY excited about this new opportunity we’ve been lucky enough to achieve. We’re making sure we have all of our bases covered as well, we looked at all the top coverage plans for homeowners before deciding on the one we were going to go with. We wanted to make sure we were properly covered and insured so that if a tragedy were to happen we would be able to jump back to our feet instead of having to give up for good.

desconstruction

I am going to post some blogs like this to document the design and build-out of our space. I wanted to make a quick shout-out to the hard working staff of Go Media that made this possible, John Wagner my realtor that pushed this deal through and our bank that is lending us some of the money to help pay for everything. Much thanks! See more photos after the jump or just check out our Flickr album that will constantly be updated with new photos as we renovate the building.