How to use this Page

Times and medicine have changed since the 1800's. Small vials of medicine have been replaced with plastic tamper proof containers that come in all sizes-including jumbo size. Thankfully, our medicines and perscriptions now come with ingredients, directions on how much to take, and when to take it, and warnings of possible side effects, etc. I am SO thankful for modern medicine and the new age in which we live in!

Dear Freelancing Artist,

Did you know there are hidden rewards in a freelance art career? Rewards that take you farther than the ability to buy tonight’s keg, that is. If you’re new to freelancing as an artist, you need to hear this. I wish they taught this stuff in art schools. It’s about sustaining your career in the long term. It’s about building something more than a permanent “side” business. It’s about truly going out on your own and feeling awesome about it. Read on!

The Perspective

As a freelancer, I do my share of one-off projects. There’s that package design illustration for a kid’s snack container. There were the custom avatars, a few icons, a web site header. They’re nice, these one-offs. I enjoy them (because why else would I fire up my computer every day), but the projects I do my best work on are the ones that require lots of chatting, e-mails, and idea-tossing. Those are the ones that blossom into an ongoing, mutually beneficial relationship.

Womb to Bloom is one of those relationships. 

The Womb to Bloom web site is an online community and resource for new moms and moms-to-be, “Maternity and Beyond.” Awesome concept, amazing potential for growth.

The Client

The Womb to Bloom founders (Greg and Heather Zellers) and I reached each other through a gig-type site about some animation work they needed done. It’s no secret that I love to talk with people about their projects. First, it’s just fun (I geek out on web and TV development). Second, it helps me frame my portion of their project with a reference that controls the budget. It’s also easier to offer new ideas without going off on crazy tangents.

So when they called, we talked a lot about what the animation could be. It also happened that they needed some simple illustrations and icons that would tie everything together. This is where I started drooling on my phone because I loved the site concept, they had a great logo already, and the web development was already flowing.

The Concepts

The initial concept was to have a central “mom” character to base everything on. Once we nailed down that character design, the icons and other illustrations would flow. I was already loving this project because it made sense before I even got out my pencils. It was also very easy for me to create a project plan that worked with their budget. 

Although we had some great early chats about concepts, I have to admit that the initial brainstorm sketches I created were a little… off. The style of my first sketch was just somewhere between Family Guy and Rugrats. But this is the part that makes my job awesome, because we were able to use those sketches as a jumping-off point and keep the conversation going.

So we chatted in greater detail about Greg and Heather’s ideas. What they wanted was an attractive, hip, and fairly trendy woman who could transition easily from pre-pregnancy to new mom. The next sketches were right on target and ready for vector illustration and color. Below is a final concept image:

Incidentally, I created all the final art for this project in Adobe Illustrator CS3. In the very near future I’ll be providing step-by-step instruction on how to create this kind of work, so graphic designers, web designers, and traditional artists can reap the benefits of my experience. Yay!

A few things made it easier to create the final art for this project. They already had a logo, so I had specific colors to choose from. Greg and Heather really knew what they wanted to see. They couldn’t always sketch out an example or articulate a style, but once I gave them a sketch to go on we had a basis for conversation. They knew their demographic, which translated very well to visual goals. 

The Work

I know, I know. You want to see sketches. I hear ya. Here’s a great, simple example of how an illustration concept developed. One of the sections on the web site is for contributors. We started out with the idea of a smart-looking woman (new character) in a cafe with a laptop. I sketched it out and hit the mark, woo-hoo! However, we did decide to go with the main character after all, and you can peek at the results:

As an even better demonstration of how a project can progress and a great relationship can generate even more fun ideas, take a look at what we finally used for that section of the site. I think it worked out nicely.

Another favorite illustration of mine from the project is the community section. The whole idea was to get moms together from all over the country and have them chat online, as if they were in someone’s living room. Pretty cool, right? I knew I had to thinkify something unique and fun, but also instantly communicate that idea. My first sketch:

The question became, how do I divide this cozy little scene into sections that show that cozy closeness and distance at the same time? It turned out not to be so difficult with a little sleep and some coffee. After seeing the final art, they added a new wrinkle; let’s see an image of the U.S. behind them to really hit home the idea. Not one to shy away from a challenge, I came up with a funtastic solution. You can see the progression. I still like both. Good thing I didn’t have to decide.

State of the Iconomy

The web site also needed some icons. About a hundred of them, in fact. I loved that I was able to work on this part of the project because I could take everything we had developed in the illustrations and use it to create the icon concepts. It worked out beautifully because we already had a flow going and could reference previous conversations. It turned out to be a lot of work, but also a ton of fun. You can see the icons all over the site, but here’s a sample page of a few I really like:

Wrap it Up

This is the best part. We haven’t wrapped it up. The working together part, that is. After getting to know the Zellers through working with them, we’ve shared information, links, and even referred business to each other. It’s the ideal b2b relationship, where we mutually benefit beyond the exchange of service and money.

The truth is, I did find this client through a bid-type freelance gig site. I don’t love these sites because typically you’re bidding on projects in a vacuum. My whole method of working revolves around many conversations and lots of information exchange, which the bid sites make very difficult.

The thing that I took away from this is that bid sites can yield some good projects, but you have to be prepared to build a relationship beyond the one-off. If I see a project posted and I don’t feel that’s possible, then I move on. It’s just not my cup of chai.

If you’re new to freelancing, I can’t stress enough that long term relationship-centered business is one of the major keys to your success. You can work on a hundred one-off projects through a crowdsourcing site and make a little cash. That’s great. You can throw your artwork up on a stock site and make a few dollars for every download. Awesome.

Those activities will not sustain you for very long because you only come away with cash. I say “Big deal, Dude.” Anyone can make some quick cash these days. Create a free blog and stick a PayPal Donate button on it.

Remember that rewards thing, kids. If you want to keep the art thing going and get Mom and Dad off your back, listen to your Uncle Sparky.

Let me start by explaining how big of a geek I am.

I was one of the first of my friends to jump on that internet thing (will certainly fail), rely on e-mail as main source of communication (never last), and build myself a little thing called a web page (won’t be around for long). I’m what you call an “early adopter.” In twenty years I’ll be like Todd Rundgren or David Byrne, exploiting new technologies before my fans know they’re available.

Oh, and I’ll have fans.

I digress.

I learned HTML and a tiny bit of Java early on because I’m an impatient guy. I want a web page up NOW, not next Tuesday. So I searched Yahoo (pre-Google days) and taught myself how to code. It was fun, because I’m a geek and I do other insane things like make films one frame at a time. I even laughed at WYSIWIG editors because they were “the easy way out.”

Then I grew up.

Nowadays I love tech like Wordpress, Freshbooks, and AWeber. I’ve learned that “automated” and “template” are not curse words. I’ve now embraced the world of WYSIWIG (What You See Is What You Get, for the uninitiated). There was a tipping point when I decided that enough was enough, I wanted to spend more time being visually creative with my site and less time learning how to code things correctly. About the same time, my mother saw a copy of Freeway at the Apple store (I know, I know, my mother… shut up). She was itching to buy me something so I let her. I already had Dreamweaver with the Adobe Creative Suite, but I hadn’t even cracked it open. So I gave Freeway a whirl and created a new version of my web site.

Like any new app, I was at first befuddled by the menus, toolbars, key commands, windows, etc. Once I got into it and started seeing results, I was blown away. I’ve upgraded twice since then and I’m still loving it. However, I decided to combine my thoughts on Freeway itself and my review of Softpress’s latest version, Freeway 5 Pro (I’m using v 5.3.1 for this review).

Crack it Open

Installing Freeway on the Mac is pretty simple, as I would expect. By the way, I’m impressed by nice graphics on a software install because it usually means they don’t believe in afterthoughts on a product release. It reeks of careful planning and strategic branding, which I appreciate as a visually-oriented person. There’s also a very nicely formatted PDF help guide and I recommend doing the tutorials. I did it backwards (skipping them) but I probably would have learned more quickly that way.

Build Something

It’s pretty easy to get started building a site, even if you’ve never done it before. You can select templates for different themed sites if you prefer. I can see how it makes it easier to start, but the templates don’t appeal to me personally. If I wanted to get my 10-year old daughter building her web site, I would probably guide her towards a template. Savvy site builders will probably enjoy tinkering with a blank page to start.

I am the Master

If you’re familiar with master pages in PowerPoint or Keynote, then you already understand Freeway’s master page feature. The best use of Freeway is by choosing the CSS layout and using master pages. For example, I have a client who uses Freeway. I create his graphics (headers, icons, and such) and set up his pages for him based on a master. Then I just shoot him the necessary folders and Freeway source file so he can add his text, photos, or tweak things at will. If he gets stuck, I can guide him as long as he hasn’t messed with the master page.

Previewing and Uploading

Freeway has a nice preview feature. You can either preview your pages directly in the Freeway window (see also Improvements), or you can choose a browser and see it “live.” You can also upload the necessary files directly from within Freeway using the built-in FTP feature. Personally, I publish the site and upload my files using an FTP app, but I usually have other things I need to mess with on my site (client proofs, downloads, Wordpress stuff). I figure as long as I’ve got the hood open, I may as well clean the spark plugs.

Drag n Drop and Site Tweaks

Here we go. This is the number one, top-of-the-charts-with-a-bullet reason I love Freeway. Like I said, I’ve become more of a visual designer in recent years. One thing I like to do is create my site layouts in Adobe Illustrator. I can try things out visually and then figure out how to engineer them later.

When I found out that I could take the header I created in Illustrator and just drag the file right into Freeway, I was blown away. Seriously, astounded. This means that later, when my ever-changing creative mind goes wacky and I want to put a robot image in there instead of a pixie, all I have to do is tweak my Illustrator file and it automatically updates in Freeway. Then I just republish my site and it’s done.

As an artist with a gallery, I often go back in and update images on my site. This tool is just awesome for me.

I was also able to drag both the Quicktime movie of my demo reel and some Flash movies onto my animation page. A few control and quality settings and Bob’s yer uncle.

As an example of how quickly I can change something on my site, I recently decided to add a members club. In about four hours, I created a plan, set up the new pages, found some Actions (more on this later), inserted images, and had everything uploaded to my site.

In my world, I need to act quickly on these kinds of ideas and get back to illustrating and animating stuff. If I had to hand-code these updates, I would never do it. However, I should mention that because I have some hand-coding skills, I can look at the source file and at least understand where a trouble spot might be.

Meta and SEO

The buzz these days is SEO. It used to be that you would throw some keywords, a description, and a summary using META tags and you’d call it done. That’s still something you want to do and Freeway gives you an easy way to do it. However, that’s not the end. For a site to be truly searchable, you have to get key words and phrases integrated as part of your content.

As a visual designer, this is my main frustration. Without standards between browsers, my HTML text is going to look different on a Windows machine using IE than it will on a Mac using Safari, or an Ubuntu machine using Firefox. Using graphical text (users can’t select it in their browser), you have a lot more control over how your text will look across platforms. The rub is that search engines won’t find you with all graphical text, and HTML text is a crap shoot, unless you have several different machines to test on. There’s a section in the Freeway User Guide that states it succinctly: “…that’s the way life is with web design.”

Freeway gives you great options for choosing graphical or HTML text. I try to strike a balance between the two. One thing Freeway lets you do is go back and switch between graphical and HTML text in a block without changing any code. I can choose which text I think is important for search engines to pick up and which text I just want to control more closely.

Forms and Scripts

The time finally came when my site grew beyond the static brochure-type and I needed to make it more interactive (hence my new membership thingy).

The forms and actions included in Freeway 5 Pro are pretty handy. For example, I placed a Google map directly on my page with just a few settings to show where in the world Sparky HQ is. I figured it out in about five minutes after scrolling through the Actions panel for cool things I might want.

I also created PayPal Add to Cart buttons for the image licenses I sell on the site. Once I got the code from PayPal it was fairly easy to create the buttons. No graphic design necessary.

There’s a site called Actions Forge that’s specifically for creating and distributing Freeway Action scripts. At the time of this writing, there are 126 actions available, from rollover functions to password protection.

There are also options to insert markup language in your page. If you find a bit of code somewhere that you want to use, there are options for placing it (see also Tech Support). If you have no idea what I mean by markup language, then you probably won’t even use that feature. However, as your skills grow, you’ll discover it and love it.

Improvements

I’m sure that Softpress has an improved feature list on their web site and marketing materials. However, I specifically avoided looking for it because I thought it would be more fun to showcase the improvements that I noticed in my own work. Wasn’t that nice?

iPhone Support: The iPhone and Blackberry aren’t going anywhere. Handheld devices are just going to get better. Freeway has a new iPhone panel that helps you optimize your site for the mobile web.

Shape Menu: It’s small details like this that make my visual designer eyes perk up. My site has lots of rounded-corner boxes. When I want to make a shape in Freeway, I want it to be easy to manipulate. The updated shape menu makes this easier.

View Menu: I got used to the old way of previewing my pages in Freeway 4, but I wasn’t thrilled with it. Now the preview menu is right up top and easy to click. I preview my pages often, so this is a nice change for me. I can also access my master pages and link maps in the same bar, as if I were in a browser. For my efficiency, this small change is huge. Besides, it looks nicer.

Google Actions Suite: I mentioned Actions before, but this is new. I use Google Analytics and this integration is just awesome.

Blogger and MobileMe capability: I don’t use either of these services anymore, but I noticed they are available. Gives me hope for WordPress.

Stability: I used to get at least one crash per session in Freeway 4, but I put Freeway 5 through it’s paces and it seemed to hold up. 

User Guide: This just gets better with every version, as it should. If you’re new to creating web pages, the User Guide even has a section called, “The World Wide Web and Freeway.”

Tech Support

The Softpress web site has pretty good support options. The usual Knowledge Base, Manuals, contact stuff… simple. If I had to research something, it’s all there. The real test of support for me is the people.

If you recall my new member area project, I had chosen a password protect URL action from Actions Forge. It was easy enough to install and set up and when I tested it on my local machine, it looked like I was in business. However, when I uploaded the new pages to my domain server, I got… bupkis. Zero functionality. Oxford, we have a problem.

After doing some research and attempting to alter the code (geek), I decided to put in a support case. Joe from Softpress Support contacted me the next day and gave me some suggestions. Later I heard from Keith in Support who gave me more suggestions. He also gave me an option of sending him the Freeway file itself so they could take a look at it, which I did. As of this writing, they haven’t found the issue yet. Of course I need my issue resolved, but during the process it’s all about the people and their communication; Softpress Support does an excellent job.

Since I’ve seen the Action working on other web sites, I’m certain it’s an issue with my server or something I’m doing (or not doing) on my end. In the meantime, I found a similar javascript that I was able to implement quickly. I had members signing up and the password they were getting was useless, so I had to take care of those people before playing with the Freeway Action.

Did I mention I’m a geek?

Freeway is simply an excellent web-building tool. At different times I’ve thought about trying out Dreamweaver just to see how the other half lives, but then I move onto other projects that are more important. The thing is, Freeway lets me do everything I need to for my web site. As I’ve grown the site I’ve found new features that I hadn’t touched before. I tend to use things as I need them rather than explore every feature just because it’s there. So I’m confident that I know where to look for an action or feature when I want to do something totally new.

I’ll be using Freeway to maintain my site and build others, as well as recommend it to my clients for the foreseeable future.

Below are some screen caps from my recent site update:

I created the button illustrations in Adobe Illustrator and later just dragged the files into Freeway.

Freeway 5 Pro's updated shape menu rocks. Also note the t-shirt button illustration.

The updated navigation menu is much more efficient.