omniOutliner + iCal = my wicked work flow.

I’m a recent “GTD”:http://audible.com/adbl/store/product.jsp?BV_SessionID=@@@@1513996876.1111432591@@@@&BV_EngineID=ccciaddeegihfemcefecegedfhfdhfl.0&uniqueKey=1111432644312&pageType=preliminaryResults&productID=BK_SANS_000347 convert – all in the name of getting more done, and possibly even seeing my kids. I’ve tried a bunch of systems and methods; pretty well everything short of tatooing to-dos on my forehead (hmmm….). I’ve found that “OmniOutliner3”:http://www.omnigroup.com/applications/omnioutliner/ best suits my ‘brain dump’ approach to managing both workflow and idea generation. I use OO3 in conjunction with “iCal”:http://www.apple.com/ical/ to keep track of a) what I’m supposed to be doing, and b) when tasks are due.

I’ve got a couple of OO3 docs open in the background at any one moment:

!/images/56.gif (omniOutliner screen shot)!

*Projects* is a list of all the various things going on. This has columns for status (in progress, pending, finished, invoiced… OO3 allows you to assign predefined phrases to a column that can be chosen from a drop down menu), priority (most important to least important – this column is kept sorted so the hot items appear at the top), and owner (me, a team member, etc).

!/images/55.gif (omniOutliner screen shot)!

[project name] Brain Dump is for the particular project I’m working on at the moment. This contains all my thoughts about the project, from estimate to due dates to brainstorming notes, meeting notes, etc. The expandable/collapsable folders in OO make this doc very easy to manage. OO3 also allows you to link files directly into your document, making the brain dump doc a launcher of sorts as well.

You can see in the screen shot above that I’ve added a column for *hours*. This is how I go about estimating a project and setting milestones and due dates. The key here is knowing how long it will take you to perform a certain task. I’ve learned that I always estimate low, so I’ve gotten into the habit of adding a couple of hours at the bottom as a slush-fund.

My next step is to fire up iCal. I’ve used a bunch of calendar programs to varying degrees of success. I was using the Palm desktop, since I’ve got a palm device, but the program is just so damned ugly, that I didn’t like to even look at it. iCal to the rescue.

The beauty of iCal is its multiple calendar function. With a single click, you can create a new calendar. I use one calendar for each active project. Each calendar uses a specific colour, and can be turned on or off in the main view window by clicking its check box.

!/images/57.jpg (iCal screen shot)!

This allows me to get both a global view of my work week, which is crucial in the next phase. At this point, I’ve got iCal open on half my screen, and OO3 on the other. Going back and forth between the two, I go through my time estimate and set up events on the calendar, setting aside blocks of time for each task. I’m working at max capacity at the moment, so this allows me to make realistic deadlines.

This is an incredibly simple and powerful system. iCal has a handy to-do list feature, and you can assign to-dos to a particluar calendar. OmniOutliner is ridiculously configurable. It feels more like an extension of my brain than a piece of software (not sure if that speaks well for OO, or poorly for me).

You can get a free 30 day demo of OO3, but it’s limited to the number of items you can add to your list. If you bought an apple in the past year, OO2 may have come pre-installed. It’s very handy, but lacks some of the features that make OO3 the killer app that it is.

Gradient Mess (um, I mean Mesh)

Inspired by a posting at “Veerle’s”:http://veerle.duoh.com/comments.php?id=265_0_2_0_ blog, I bring you my short hand method for working with gradient meshes, those nasty bastards of the Illustrator world.

_You may want to begin by clicking on the image above to open a larger view in a new window._

It may also help to read “Veerle’s”:http://veerle.duoh.com/comments.php?id=265_0_2_0_ excellent tutorial first, as I’m not going to go into much detail here (too much work to do today).

So, without further ado, I present Peter’s Amazing Time Saving Approach to Gradient Messes (aka PATSAGramM):

First I drew the outlines of the clothing (each on a separate layer), then duplicated each layer.

On the duplicates, I converted each object to a gradient mesh using *Object/Create Gradient Mesh*, and set the number of rows to something quite high (I think around 15 by 15, can’t quite remember).

Next, I selected the *warp tool*, and used it to push the mesh to mimic the movement and creases of the fabric (double click on the tool icon on the toolbar to change tool settings).

After that, I shaded the objects using the eyedropper and direct selection arrow using only shades of grey (this allowed me to concentrate on values, rather than colour). The quickest way to do this is to select the direct select arrow (*shortcut key A*), the nselect the eyedropper (*shortcut key I*). Now, when you hold down the command key (aka apple key) or control key for you pc users, the tool switches back to the direct select arrow. Cool, huh?

I then returned to my original layers, and coloured the object with the appropriate solid fills.

The magic step was putting each gradient object on top of its solid coloured match, then changing the transperancy to multiply.

I had always intended to go back and finish this image, but now it looks like I’ve lost the original file… Back to the drawing board I guess.

Redesign of my work site part 3 (aka cool…)

I’ve decided to go with this design:

The photo will rotate through a number of nature-inspired shots, using a php rotator. This script gets uploaded to the server as image.php. In my code, instead of writing

I write

The script will randomly select an image from within the directory it resides in. You can find a sample of the script “here”:http://www.cb2web.com/tests/rotate.htm.

I’m also going to use the

background: fixed

rule in the css to keep the gradient fixed in place. That way, I can get by with a short bg file, and not have to worry about it repeating if the page grew really long (which it shouldn’t in this case).

Step 5 is _look into scripts/software_. I’ve found a remarkable photo blogging type of script “pixelpost”:http://www.pixelpunk.se/software/. I had offered to put together a photo blog for a cousin who’s just had a baby, and stumbled across this site. The script has just been launched, so I imagine many people haven’t heard of it. It rocks. In additions to helping my cousin share his baby pics with the world, I’ll be using pixelpost to manage the portfolio section on the new site. It is incredibly easy to setup, and extremely flexible. Can I gush any more?

I’ve also decided to use “textpattern”:http://www.textpattern.com to manage the rest of the site. The front page will be static to start. I’ll switch the sidebar over to a textpattern list once I have some news to post. The articles section will be dynamic right from the get-go.

I’m very excited to get pixelpost up and running. It should be fairly easy, yet will allow me update and manage the portfolio with great ease.

I’ll let you know how it goes.

Redesign of my work site part 2 (aka phew…)

I’m taking my own advice for once. And guess what? I might actually know what I’m talking about!

Let’s review. In part 1 of this article, I made up the following to do list:

# Write all the content first.
# Create a mood board based on the content. A mood board is simply a collection of inspiring images, words, colour chips, etc related to the project at hand.
# Sketch sketch sketch
# Create a comp or two. I’ll post them here for feedback.
# Evaluate software/scripts (for the dynamic part)
# Build.
# Test.
# Tear out hair trying to figure out why it doesn’t work with IE.
# Decide to become a bus driver.
# Find the answer on positioniseverything
# Party like its 1999.

I’m up to step 4, and in a moment we’ll get to the actual comps. First though, I want to take a moment to sing the praises of two of my favorite pieces of software: “OmniOutliner”:http://www.omnigroup.com/applications/omnioutliner/ and “TextEdit”:http://www.apple.com/education/accessibility/technology/textedit.html. Both of these are mac only, but I’m sure there are pc equivalents.

I use OmniOutliner for just about every project I do. It’s perfect brainstorm tool. I just write my notes, stream of consciousness style (much like this blog). I can then go back and re-arrange the ideas into any order I like. I can also add new columns of information (ie categories, priorities, etc). The list can also be output as a text file or html file. Very flexible, and very useful.

TextEdit is the mac’s built-in word processor. It is incredibly light and small. No surfeit of formatting. No floating toolbars. Just a simple little box for me to type my words into. Mis-spelled words are highlighted, with the now-standard spelling suggestions just a right click away. Pure word processing love.

Ok, back to the good stuff. Here, as promised, are the comps (click for a full size view):


Let’s call this *the narrow one*.


This is *nav right*


And this is *nav left*

Before I move on to step 5 (_evaluate software/scripts_), I’d love to hear your feedback. It need not be as detailed as “Paul Scrivens”:http://9rules.com/whitespace/our_thoughts/independent_thought.php requires. Just a “hate it because…” or “love it because…” would be swell.

I have about a hundred other things to talk about, so I’m gonna cut this short here. Be on the lookout for part 3, coming soon to a screen near you!

Redesign of my work site (aka ARGGGGHHHHH)

Given the option of designing something for myself, or designing something for a client, I’ll chose the client work everytime. It’s not just that I like to be paid for my work, it’s that I am a horrible client. I can’t make up my mind, I won’t follow proper procedures, I won’t commit… If I could, I think I’d fire myself.

In an attempt to force myself to listen to my own advice (sounding kind of schizophrenic here), I’ve decided to write up this redesign as a tutorial. In keeping with my earlier tutorial, it’s not going to be a do this, then do that kind of thing. Rather I’ll collect my thoughts and processes, in the hopes that my mis-starts and minor victories might be of some use to someone else out there in design-land.

Like many designers, when it comes working for myself I tend to focus too much on the prize, as a result ending up with a steaming pile of you know what.

*Ahhh, I feel better already.*

I’m going to start by quickly reviewing what’s in place, then briefly describe why I feel a redesign is necessary and finally move on to the steps I’ll be taking over the next couple of days.
So without further ado, allow me to present the current version of “Flashlight Design”:http://www.flashlightdesign.com:

!/images/26.gif (screen shot of flashlight design)!

If you squint really really well, you might just make out that the page states this is ver 0.003. *That is a bold face lie.* In fact, that page is ver 7. Seven! _Since April of this year!_ Ok, admittedly it’s been a testing ground for various styles and techniques. It’s been table-based, flash-based, flash-enabled, and now an amalgam of tables and css. That’s gonna change.

*Reason for redesign #1*: Kill all tables and build scalable site.

Far more importantly though, my target audience has changed. When I built this site, I was aiming squarely at potential employers, ie design studios, ad agencies, etc. I’ve been receiving a fair bit of freelance work over the past couple of months though, and have decided that despite my intentions not to, I’ll be pursuing more freelance projects. Given my background in marketing and business, it kind of makes sense. So, the site has to talk to a different audience and deliver a different message.

*Reason for redesign #2*: Talk to different audience.

!/images/28.jpg (flashlight Design redesign portfolio screen shot)!

Take a look at the “portfolio”:http://www.flashlightdesign.com/portfolio.htm section, and you’ll find a couple of things I’m not happy with. There is too much work showing for a general audience. The work isn’t arranged into categories, ie logos, magazines, web, etc. There isn’t any web work listed. Each image gets its own static html page, making it stupidly difficult for me to update the work. This site was thrown together quickly, and this is where it shows.

*Reason for redesign #3*: Develop flexible, dynamic portfolio.

The rest of the content on the site, _my resume_ and _skills_ don’t really belong on a client oriented site. I’d like to get rid of these sections all together and streamline the message. In fact, the message as a whole needs to be re-defined. I’m inventing a new company, and need to both develop and communicate the principles of that company; the “why you should hire us” stuff.

*Reason for redesign #4*: Write and deliver a new message.

Looking at the reasons above, I’ve come up with the following next steps:

# Write all the content first.
# Create a mood board *based on the content*. A mood board is simply a collection of inspiring images, words, colour chips, etc related to the project at hand.
# Sketch sketch sketch
# Create a comp or two. I’ll post them here for feedback.
# Evaluate software/scripts (for the dynamic part)
# Build.
# Test.
# Tear out hair trying to figure out why it doesn’t work with IE.
# Decide to become a bus driver.
# Find the answer on “positioniseverything”:http://www.positioniseverything.net
# Party like its 1999.

This list looks startlingly familiar. Gasp! It’s the same process I use for every job I do! Imagine that.

Well, wish me luck dear reader. I’ve already broken down and designed a couple of comps. Because I don’t know what I’m doing with them though, I just keep pushing pixels from one side to the other, squinting, and trying to decide which looks better. For posterity’s sake, you can view the two recently deceased comps “here”:http://www.graphicdesignforum.com/?f=15&m=80642&g=80738

I’ll report back faithfully.

How I Became Almost Cool

!/images/23.gif (How I became Almost Cool)!

Greetings gentle readers. What follows will be not a tutorial in the traditional sense, but rather a collection of my experiences in researching, building and testing my first valid xhtml and css site.

*Phase 1 – the basics*

First, what the heck is valid xhtml and css, and why should I care about it? You should care about it for the simple reason that it will make your life easier (eventually). The idea with using xhtml and css is that it allows you to separate content (the words) from presentation (how the words look). There are numerous advantages to this: by keeping all your styling information in one document, you can make a single change in one place and update the look of your entire site. You can also present your content across different media without having to re-write it. Css/xhtml pages are almost universally smaller in file size, hence faster loading.

Perhaps the most important reason to care is that valid xhtml and css documents are semantically clean markup. Browsers that support the current W3C standards will display valid markup in a consistent way.

This is a real shift from table-based web design, where one document holds all the information. There is a plethora of info out there on the www outlining the advantages of using valid markup. One of the most convincing arguments can be found “here”:http://www.csszengarden.com

*Phase 2 – the back end*

Ok, so you’re still with me. Wicked.

Let’s take a look at the components that make up my site. There are 3 main components at work:
• the content
• the design
• the content management system

The first two are obvious, the third may be less so. Just about every blog out there uses some kind of content management system (cms). A cms is basically a database, a collection of php scripts, and a back-end.

_HUH? WTF?_

Ok, you’re gonna build your blog, and you’re gonna update it everyday. You don’t want to have to go messing about with the code every time you make a change, right? You just want to be able to type up your little masterpiece, hit enter, and sit back and watch the hits roll in. That’s what a cms allows you do to.

Basically, your cms holds your articles, your design (the css) and your page code (the xhtml). When a user visits your site, the cms builds the web page for that specific user. You set up the rules telling the cms what to display (ie all articles, the latest 3 articles, all articles relating to cats, etc). Better yet, if you allow it the user can select how she want to view the info. Because your articles are stored in a database, they can also be searched and selected via keywords, categories, etc.

There are a host of cms packages available. Some are no-braniers (“blogger”:http://www.blogger.com, “typepad”:http://www.typepad.com/, “etc”:http://www.google.com/search?q=blog+software&ie=UTF-8&oe=UTF-8). The advantage to these systems is that you simply pick a template, then start writing. Everything is set up for you. Most systems allow some degree of design flexibility, but to many _”real”_ designers, having a blogger site is akin to having an @aol.com email address.

There are still quite a few options to choose from if you go the “roll your own” route. All of them require some ability to muck around at the server level. You’ll need to set up a database (probably a free MySQL db), and make sure php scripting is turned on. I’d never done anything of the kind before, but my “webhost’s”:http://www.godaddy.com support line made it very easy. I’m an advanced computer user, but know very, very little about servers. If I could figure it out, so can you.

I’m using “textpattern”:http://www.textpattern.com. It was pretty easy to setup, and most importantly, *free*. I highly recommend you check out your options and do a bit of reading. Again, there is a ton of info out there, and its worth putting a couple of hours in now to start thinking about how you are going to be using your site.

Let me just say that it is not necessary at this point to make a decision as to which cms you are going to use. That will come later. But reading about them, and seeing how they work will help the design of your blog start to take shape.

*Phase 3 – the learning*

I did a lot of reading before making the commitment to start up my blog. My aim with this page is to link you to a couple of the articles that cemented my decision, gave me the inspiration, and showed me the way. I read all of these (and many more) before I decided to try my own hand. I suggest you try to do the same.

First, I must start with “this”:http://www.designbyfire.com/000158.html. I’ve been reading “Andrei’s”:http:www.designbyfire.com blog for a couple of months, and am fan of his insight, humor, and self-depreciating style. This is the guy who’s responsible for the look and feel of Photoshop, Illustrator, etc, so he knows of which he speaks. The article in question basically says “if you’re interested in interface design, build a blog. It’s the perfect exercise”

I had also been reading Veerle’s “fabulous tutorial”:http://veerle.duoh.com/comments.php?id=208_0_2_10_C on writing and building a valid blog. This is an important link, as it give a step by step how-to design and code. It’s impossible to get everything into one tutorial, and Veerle does miss a few points, but I haven’t found a better starting place.

Actually, that’s not quite true. “Western Civ’s”:http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html tutorial is probably THE best starting place if you’re looking to learn about css. It’s not a blog-specific tutorial, and is geared towards their own (excellent) piece of software (which you can download for free and use for 30 days while you complete the tutorial). If you’re looking for a good intro to css, it can’t be beat.

“This”:http://www.sitepoint.com/article/copy-great-designers-steal article by “Cameron Moll”:http://www.cameronmoll.com really startled me. It’s titled “Good Designers Copy, Great Designers Steal”. If you do nothing else, read this. I can’t tell you how many times I have started and stopped a personal project because I just couldn’t get the design right. After reading Cameron’s article, my approach to this blog changed from “gotta do something spectacular” to “gotta do SOMETHING. Get it running, then make it earthshattering.” It’s a very liberating mindset.

Simplebits “centering 101”:http://www.simplebits.com/notebook/2004/09/08/centering.html. Gotta know it…

Inspiration came from 3 main sources, “csszengargen”:http://www.csszengarden.com, “cssbeauty”:http://www.cssbeauty.com, and “cssvault”:http://www.cssvault.com. What a way to spend a couple of hours. It’s easy to get lost, so be careful! While you cruise these sites, remember Cameron’s words. Make a folder in your favorites just for the sites you love. Look at them and study them. Why do you like them? Is there a certain style? What are the colours? How many columns are used? Where is the navigation? Get a color meter (lots available for free, OS X comes with one), and make notes of the actual colors used. Try not to approach this project with a design already in mind. Look at what you love, and let that inform your design.

*Phase 4 – the design*

As you may have gathered by now, designing with css has its limitations and challenges. It’s important that the design stage not come before you have a good grasp on what you can and cannot easily accomplish. Read and study a bit first, and you’ll be much less frustrated when it comes time to turn your design into reality.

At this point, I recommend working on paper. Keep your design as simple as possible. Remember that you can add stuff to jazz it up later. Working on paper allows you to spend a couple of minutes concentrating on the layout as a whole, without getting bogged down and trapped by the details.

_note: I’ll post a picture of my sketchbook once my scanner gets unpacked_

After working out the rough layout, move to the computer and build a mock up in Photoshop or illustrator or whatever you use. Don’t skip this step. The temptation is to rush right to building the code, but you will regret it. Guaranteed.

The beauty of css is that it allows pixel perfect placement. The trick is that you have to know where you want those pixels to go, hence the mockup. Use the rulers in your app of choice to note the width of your columns, the height of any specific elements, placement of your navigation, etc. You’ll be referring to your mockup frequently, so keep the file open while you work.

CSS and xhtlm are inherently simple languages, but they can become quite confusing if you try to get too complicated too quickly. Keep it simple at first, then add complexity once the main components are working.

A few notes about the design of Almost Cool:

I’m using two column layout with a header and a footer. There is one main container holding all the content. The layout looks something like:














All the graphics were built in Photoshop. If I had to marry an application, it would be Photoshop. I hope she’s a girl…

*Phase 5 – the code*

Now then, you’ve got a sense of how xhtml and css work together, and you have a design. How are you gonna code the thing? Don’t worry, it’s actually very easy. If you downloaded Western Civ’s software, you’re already ahead of the game. Everyone says that “all you really need is notepad”, but that’s crap. True, you can write the whole site blindly by hand (like I did!), but it’s much easier to use a program that has all the various codes and commands built in. There are a bunch:

bbedit
dreamweaver

This is not my area of expertise, but again, if I did it, so can you. It’s not that hard.

*Phase 6 – testing*

This is the hard part. The fact of the matter is that internet explorer doesn’t like to play fair. It interprets xhtml and css in its own special ways. If 90 odd percent of the known world wasn’t using IE, it wouldn’t matter. But until those 90 percent wise up and download firefox, we’re gonna have to make our site work for them.

There are a bunch of esoteric ways of getting ie to like your site. Luckily, my design only had two problems: the nav buttons and about column weren’t lining up properly. I posted my problem on the “cssforum”:http://www.csscreator.com/css-forum/, and had the fix within the hour. Highly recommended.

An important note here is that the simpler your design, the fewer problems you will have at this stage. K.I.S.S.

*Phase 7 – start tweakin’*

The nature of a blog is that it’s never finished. It’s an ongoing dialogue and an ongoing design. The beauty of css is that it is SO easy to make site-wide changes. Once you start tweaking, it’s hard to stop.

I hope this little bulletin may have been of some help. I haven’t touched on any specifics, but I have pointed you towards where to find some very good info. I’d love to help if you decide to venture down the blogging path, so please drop me an “email”:mailto:peter@flashlightdesign.com if you run into a problem, or if you have a suggestion for this article. I can’t guarantee that I can solve your problem (especially if it has to do with code), but I can try, and maybe suggest a resource.