Casey and I spent some time over the weekend with our friend Adrienne putting together a brand for their little music collective, which is named Violin and Stuff. Casey plays cello and Adrienne plays violin and together they play wedding music and are also available for studio work. They are both classically trained but what makes them special is their indie-feel and ability to play creatively by ear. They offer a base of normal wedding pieces and will also learn your requests to make each performance unique.

We created a nice logo that has some of the feel of what they represent. Casey really wanted a highly typographic logo with a serifed, traditional font and we thought it might be neat to incorporate the F-hole from a violin or cello. We started with some more traditional fonts like Caslon, Garamond, and Times but none looked quite right. We eventually drifted towards Jos Buivenga's fantastic free font, Fontin. To get an F-hole we needed a nice italic F. Fontin's F wasn't quite what we wanted so we ended up blending together the stem from Garamond with the serifs from Fontin. Here is our final result:

Next we needed to make some nice business cards so that they can market themselves in the real world (a lot of their business will be word of mouth). We pictured something handcrafted and because Casey had some of the equipment hanging around, ended up silkscreening them. We bought neon pink paint and some nice paper from Opus. We had some friends over and had a little business card making party — and with a lot of help from our friend Caitlin they turned out great:

Finally, since all that the business cards have is a URL we needed to get the site up as soon as possible. I created a design mockup a few weeks back and it was just a matter of translating it to real HTML and CSS. It is built in Drupal and should be easy to extend and for Casey and Adrienne to change when they like. Now that the basics are done, I would eventually like to get a Muxtape-like player up in order to easily sample their music.

I'm very happy with how this turned out. We created a strong brand for them to market themselves and we have so many good ideas on how to build on this in the future — we're even thinking of a photo shoot sometime soon!

Wanted to change up the colours on the site, so now everything is blue. Added a nice jQuery effect for my face on the homepage... try it out! Much happier with how it looks now: the green wasn't all that pleasing and it all felt kind of washed out to me.

Just reading what I think is an important article about the maturity (read adolescence) of the web as a medium for art and ideas. Jonathan Harris presented this at a conference on Flash but I think what he is saying makes sense in many contexts. I think this quote is particularly noteworthy:

“There is a long-standing unspoken pact between tools and their owners, which says that tools should disappear the moment you stop needing them. This is the way that pencils, hammers, and leaf-blowers behave. But many of our technological devices – iPods, cellphones, laptops, Blackberries – have violated this pact and overstepped their boundary, asserting themselves onto the lives of their owners, becoming constant distractions.”

I have always been able to do almost everything I want within Photoshop, but now that I'm playing around with vector graphics, I'm finding that Photoshop has limitations. So for the first time I'm getting a real taste of Adobe Illustrator.

Some of the main references I have touched are:

• A huge post from Noupe.com with tutorials, tips, and best practices — while the article is pretty fluffy, it points to some nice work and lots of tutorials.
• A large dose of inspiration from this post on Vectortuts.com
• An icon design tutorial from this post by QBrushes.com

With this information I have created some UI mockups annnd... the following icon. I am pretty happy with how the icon turned out and, for now, this kind of stuff will probably fuel my interest in Illustrator!

Anyone have some cool Illustrator resources? Send them my way!

Note: This is an old article and my site has changed a lot. At the time, the codebase was using Drupal 5.x and this is still a good reference for that.

I've heard before that one of the easiest ways to contribute to the Drupal community is to write up a big ol' list of the modules you use in Drupal. So I'm going to do some more meta-blogging and list the modules currently used to power this site and why.

Two common modules that are missing from my install are TinyMCE and CCK. TinyMCE just outputs awful HTML and for me it's not worth the wrangling. I wish there was a better way but I currently edit all of my content as raw HTML. On my list of things to do is to integrate CodePress, which is a nice little syntax highlighter for textareas. I'd love to pair up a syntax highlighter with some simple autocompletion... that to me would be perfect for advanced content editing. There's a stub here, so maybe that can built on. Also missing is CCK. This module is a part of most Drupal installations but so far I haven't needed it. Any custom content types I have were defined in their own module.

Without further ado, here is my module list:

Core

• Blog — provides simple blog functionality
• Comment — provides commenting
• Menu — provides menu items, primarily used for admin navigation but also holds custom menus for 'People' and 'Sources' in the footer of each page.
• Statistics — provides the number of reads found in the info for each post, I used Google Analytics for real site statistics
• Taxonomy — provides tagging for each post. I only have one vocabulary for freetagging of every piece of content.

Bookmarklet

This is a series of custom modules that allow me to publish using a 'bookmarklet' (a link from you bookmarks toolbar). I am hoping to one day wrap this into a tumblr-like install profile and integrate with CCK.

• Bookmarklet — bookmarklet functionality
• Bookmarklet Link — defines a custom content type for links
• Bookmarklet Quote — defines a custom content type for quotes

Image

• Image — for handling images within Drupal, mostly default settings
• Image Import — comes bundled with image module for importing batches from FTP, only used this once but it worked well
• Image assist — inserting images into content is still tricky in Drupal and for me this is the easiest solution. Another drop-in solution to the same problem would be IMCE.

Other

• Akismet — wouldn't leave home without this one monitoring spam
• Comment Notify — allows for follow up emails to users who leave comments
• Comment Mail — sends me an email when a comment is posted to the site, probably could handle this with actions but this works fine for now
• Google Analytics — simple Google Analytics integration for the site.
• Open ID — trying to embrace the future with Open ID. Still working on integrating this module since I would like the login form to show up inline with comments. This site is mostly for blogging and not community so that would probably make most sense. Excited to see this module eventually work as an Open ID server.
• Theme Settings API — to take advantage of some of the Zen theme's advanced doings
• Trackback — this is to ping blogs that I have linked to in an attempt to build some SEO
• Tylor Helper — just a custom helper module to do form alters. It currently adds some extra CSS classes to the comment form.

SimpleFeed

I've used this for a while to import my flickr, delicious, and twitter feeds. This module works great but I will eventually move to the much more powerful FeedAPI module.

• SimpleFeed — defines the SimpleFeed engine
• SimpleFeed Item — defines the feed item content type

Views

I use views to create my custom front page and tumblog page by restricting what types of content can appear on what page.

• Views — main Views module
• Views RSS — creates RSS feeds for my custom views
• Views UI — default UI bundled with the module

And that's it! I'd like to see what other modules people are using, so leave me a comment if I missed anything good or if you compiled your own list. Also, if anyone has time to work on a CodePress module, I'd like to collaborate. I think having an extra set of hands would help bring some focus.

I have a text file started on my desktop called "Blog" where I just jot down ideas for posts; this week's idea is simple:

- Blog post how I created my design
	- taxo links inspired by we-make-money-not-art
	- post format inspired by coolhunting.com

But before I get to that, I wanted to celebrate a little. At Northern Voice I decided that I'm going to try and do one blog post a week. I figured it would be a small enough goal to get going and I wanted to see what this blogging thing was about. This is post 5, the end of my first month, and I'm right on track!

Anyway, I thought I'd go over where some of the inspiration for this theme comes from as well as give some direction as to where it is going.

The taxonomy links were heavily inspired from we-make-money-not-art.com. Let's compare:

vs.

I really like how the text goes off the background, similar to a rough highlighting job. For we-make-money-not-art, the position of this information helps solve two problems: makes it really obvious that this is tagging/titling (especially by breaking tags into discrete blocks) and saves space. I decided not to do this over top of images as I wasn't sure how many posts would include them. I also didn't want images as a required piece of content.

Enter my inspiration from coolhunting.com:

Here they've seemingly solved all of my problems! Now I don't have to put information over images and this gives a good place for taxonomy/tags, service links, read more link, and comment info. It doesn't interfere with the content and is positioned so that it is really obvious which info belongs to which piece of content.

You might also notice that both of these sites are fixed width and have a lot of content to throw at you.

Now for the future. The most important piece that is missing right now is my blogroll. I think it's important to give what little link love I can and hopefully I can think up an elegant way to integrate this into the footer. This seems like the best place and it might leave some room for links to my web places (eg. flickr, twitter, facebook...).

My next thought for visual improvement is rounded corners on the top and bottom green blocks. I've also looked into stretching the green banner across the top.

I hope this gives some insight and I would be interested to hear where other people get their design ideas! Design suggestions are definitely welcome.

Oh, and I've added OpenID support which you can currently find here. Need to find a way to make this inline with comments where it's far more relevant.

I've finally created a custom theme for this site and I'll try and give you some insight into how I did it. It took me 1 hour 51 minutes and although I was actually aiming to finish within an hour I'm happy with the time. I know theming probably shouldn't be a race, but why not test yourself! Also, my main goal was to get something original up as quickly as I could so I can make tweaks in the coming months.

I've based my theme on the new Zen template, which is becoming one of the most powerful ways to build a themes in Drupal. This is the first time I've used Zen as a base and it's a great way to go. In the spirit of CSS Zen Garden, Zen is designed to be exclusively programmed using stylesheets. The only tweaks I had to make elsewhere were in node.tpl.php where I changed the default ‘Submitted by...’ text and removed the ‘in..’ text before the taxonomy.

Here's a video of the first 30 minutes of work (my screen capture program lost the rest...):

There are some limitations to my new theme though. It looks great Firefox 2, Firefox 3, Safari 2, Safari 3 and Opera 9, however it currently fails in IE7 and IE8. Didn't get a chance to look in IE6 yet but I imagine it's not good. When I get some time I'll fix this up, with the biggest problem created by absolutely positioning the mission statement into the head.

One other limitation that will need fixing is that I used Myriad Pro in the header. This is a nonstandard font and I should use an image replacement to be sure I get the look I want. The only other font used is Trebuchet MS, which should be fine across most platforms. In both cases I've set Arial as my second font.

Because this is based on Zen, it passes validation for XHTML 1.0 Strict. I only get CSS validation warnings for having one CSS3 property used (word-wrap: break-word;) and having background color the same as color, which is visually fine.

Overall I'm happy with my new theme and it will only take a little bit longer to make it cross browser compliant and good to go.