Not too long ago the fine folks over at Design Festival put on a contest to highlight an interesting web technique with multiple repeating backgrounds and prime numbers with something known as the cicada principle (see the original article here – The Cicada Principle and Why It Matters to Web Designers by Alex Walker). It’s actually a fantastic concept that can result in some amazing, seemingly random, results that works perfectly when applied to web page backgrounds.

The contest itself ended on May 25th and the concept was simple: submit your own design (consisting of up to eight image layers) using the cicada principle discussed in article previously mentioned and let people vote on your entry by sending out a tweet via each entry page. When I found out that the prize was an iPad2 I thought the stars had aligned just for me, especially after almost but not quite winning an iPad2 at ValioCon just days earlier – see previous post, ValioCon2011: Reflections of Awesomeness, for more details about that.

Drawing Silly Faces = Win

I won this!

I had a blast making my designs for my entry in the contest and basically spent a day or so cracking up while drawing silly accessories and additions to my already drawn Twitter profile picture. Since the votes were based on tweets I turned to all my friends with an internet connection and you guys didn’t disappoint. My entry, “Blind Date Prep” , had by far the most votes once all the numbers had come in and a few weeks after officially winning, I ended up with a free 16gb iPad2 delivered to my door and I love it. Seriously you guys, your help winning the contest (*of those that voted) means so much to me and I really truly appreciate the help as well as the congrats since winning. And an extra special thanks is due to Design Festival for the contest prize. You guys rock.

Once the contest was over, another post appeared on Design Festival highlighting a handful of noteworthy entries as well as who was the winner (me) and I recommend checking it out – The Cicada Project: And the winner is…. I thought their little write-up about me was hilarious:

Alan is a Santa Barbara designer, illustrator and blogger whose super-​​power appears to be a talent for simple but oddball cartoon characters.

A Token of My Appreciation

I don’t really have a way to show just how much I appreciate everyone helping me win the contest so the best I could come up with is to offer a desktop background for download based on my entry design. Just click the below image to download the .ZIP file. It’s a 1920 x 1080 image so it should be big enough for a majority of monitor sizes. If you’d like to use the image but need it scaled to a smaller size for some reason then just let me know and I’d be happy to adjust as needed. Enjoy and thanks again!

Click the image to download .ZIP file. 1920 x 1080 image.

It’s been over a week since I attended the first ever ValioCon and I still have a grin on my face thinking about my time there. To be honest, it was the first ever web design/development conference I’ve ever been to and I think it was a fantastic way to start my conference attending track record. I don’t want to necessarily recount every detail of the conference but I think it’s well worth pointing out a few of the highlights.

First off, let me say that I absolutely loved my time at ValioCon. I heard about the conference via Twitter (probably via Rogie King @rogie) and it didn’t disappoint. There were a ton of great people there and everyone just felt genuine and open (including all the speakers who were all more than willing to hang out and talk during down times).

Conferences are too expensive (usually)

I think the most common deterrent to most people attending something like ValioCon is price and that’s where ValioCon first caught my attention as I was considering going. It was a steal to attend, in my opinion. Luckily, I heard about the conference early enough that I, and my buddy Mike Becchio, got to sign up for the “early bird special” which essentially reduced the price of the conference in half (split hotel room and the two of us got to attend for the price of one person). The conference pass included two days of great presentations and workshops by “unsung heroes” in the industry, four meals (breakfast and lunch for two days), two nights at an hotel resort (within a very short walk to the beach), and a drink night. Even if I didn’t get to partake in the “early bird special”, I’d say the pricing was extremely competitive when compared to other conferences. Honestly, I’m not entirely sure how Drew Wilson and his Valio crew were able to make any money off of the conference based on how good a deal it was and how much it included.

You can see the Pacific Ocean

A short walk away

Unless you’re spoiled like me (I live in Santa Barbara which is also on the west coast) then you’ll particularly appreciate the location of the conference. Those in attendance stayed at the Carlsbad Inn which is nestled right in the middle of Carlsbad Village (the little downtown area) so there was direct access to the beach as well as several restaurants within walking distance (Is this starting to sound like a travel ad? I’ll move on.) There was a bit of overcast weather during parts of the conference, but seriously, if you’re from somewhere in which snow until April is the norm then you will love the weather and location of Carlsbad, CA, overcast or not, and the fact that the conference is there.

The Community is the Reason

As a freelance designer, I spend most of my days working physically alone but constantly connected to dozens of others online. Sometimes it’s easy to forget that there is a vibrant community of web designers/developers out there in real life. And this vibrant community was evident at ValioCon. Everyone I met had interesting stories to tell, was more than open to share details about themselves, and just felt honestly excited to met everyone else. The speakers all mingled with the attendees the entire conference and there was plenty of time to get to know one another. The presentations themselves were top notch – everything from how to design an icon, to how to love your clients, to making your first native iOS app (and much more). There was a lot for both designers and developers and I felt the line-up did an excellent job of making the material feel relevant and approachable to even those just starting out. The best part of the line-up was the fact that the speakers were almost entirely those that spend the majority of their time doing rather than getting paid to talk about it. At least one of the speakers had never even spoken at a conference like that before (Hi Rogie!) and they all did great.

Kyle Steed (left) and Rogie King (right) having a conversation in the morning

The thing I want to stress is just how open and honest everyone seemed (including the speakers) and the fact that even if I wasn’t blown away by each and every presentation, that it was so easy to immediately get connected to this vibrant community of people doing exciting things in the industry. I think the best quote I found that summed up my feelings after ValioCon was by Joel Beukelman (the official photographer for the weekend) via Twitter:

In reflection on the weekend, I feel like I gained 10 years of homies and contacts in only 3 days.

A Funny Story and a Shameless Plug

The funny story is that I almost but not quite won the iPad2 that was given away at ValioCon. It was the “big” prize for the conference and I, like everyone in attendance I assume, was hoping to win it. The stipulations to win were simple. Just take a picture of yourself with the main conference banner, add a few hashtags, and post the image to Twitter. I did exactly that BUT the picture didn’t post when I tweeted out to the ether. I still stick to my story that it was technical error rather than user error (though I am lame often so I’m open to other possibilities). Either way, I noticed the lack of picture and immediately posted a followup tweet with the picture but when the last day came and my tweet was selected from the pool and it didn’t have the picture attached I was disqualified (insert super sad face here). On the plus side, the guy that did end up winning, Eric Eggert aka @yatil, came all the way from Germany to attend the conference so good for that guy – he earned it. I just drove a few hours down the California coast (from Santa Barbara to Carlsbad) so it was no contest.

Upon returning to Santa Barbara and telling a few friends about what happened and how close I was to winning, I was told about a contest where the prize was an iPad2 and that I probably had a decent shot at winning. The contest involves designing a multilayered web page background using the technique described in the article here – The Cicada Principle and Why It Matters to Web Designers by Alex Walker – and the votes are based on tweets from one’s entry page. So I need your help, internet. I put up my entry last week and I’m already in second place but I’m still several votes behind. All you need to do is go to my entry page “Blind Date Prep” and then click on that top Tweet button to place a vote for me. Help me vindicate myself from my previous iPad prize loss! A ton of you guys have already helped to vote already and that means a lot. I seriously do appreciate each and every vote. And even if you don’t plan on voting, at least check out the entry. It involves a lot of silly illustrated faces and who can be mad looking at that? The contest ends Wednesday, May 25th at Midnight PST so get in there and vote! Thanks in advance guys. Ok, end of shameless plug.

UPDATE: I won the contest! You guys rock my socks! You can read about my win over at Design Festival – The Cicada Project: And the winner is… – and as soon as I get the prize (an iPad2), and a spare moment, I will put up another blog post with details (with a special desktop background for download). Thanks again to everyone that voted and help me win!

C'mon... help a brother out! UPDATE: I won! Way to help a brother out.

Smattering of ValioCon from Around the Web

I’ve tried to collect as many things about/from ValioCon that other people have put online in the list below. If you’ve got something you think should be on the list, then I’d be happy to add it. Happy travels!

Thoughts on ValioCon 2011 by Anthony Garand (@garand)
http://garand.tumblr.com/post/5540607290/valiocon
- A Very Thorough Recounting of ValioCon 2011

ValioCon “PhotoBooth” Pictures
bit.ly/vconphotobooth
- Flickr set of pictures from the make-shft outdoor photo studio during the Saturday drink night

ValioCon: After Party – Video on Vimeo
http://vimeo.com/24050576
- Several people trying to fit into a telephone booth outside of the hotel

Love your Clients by Rogie King
http://www.komodomedia.com/blog/2011/05/love-your-clients
- Blog post by Rogie with the video of his ValioCon presentation. Rogie talks about love and the benefits of a good relationship with your clients.

ValioCon conference Sketchnotes by Patrick Haney
haner.in/o/vconsketches
- Super awesome Flickr set of “sketchnotes”. It’s like you were there all along!

CSS Workflow with Sass by Jina Bolton
http://www.slideshare.net/jinabolton/css-workflow-with-sass-7999793
- Jina shares her slides from her ValioCon presentation. Super interesting and definitely worth a look.

Icon made by Dimitri Tsozik @tsozik during ValioCon workship
http://dribbble.com/shots/177588-ValioCon-workshop-icon
UStream: http://www.ustream.tv/recorded/14707035
- Image of the icon Dimitri worked on during his workshop (with PNG and PSD attached to Dribbble Shot) and the Ustream video of him working on it. I’m still hoping to get my hands on the PSD!

Mike Rundle – From Web to iOS
http://www.ustream.tv/recorded/14729504
- Ustream recording from Mike’s presentation

Kyle Steed Illustrated a Pair of Vans as a giveaway for the conference
http://kylesteed.carbonmade.com/projects/3071524
- You have to check out the sweet pair of illustrated shoes!

ValioCon 2011 by Joel Beukelman
http://www.joelbeukelman.com/2011/05/valiocon-2011/
- Joel posts a ton of sweet pics from the conference.

UPDATE:
Valio Inc’s Videos on UStream
http://www.ustream.tv/user/valioinc/videos
- Not sure why I didn’t link to this one before! All the videos from ValioCon on UStream. Check it.

Welp, there you have it. Hope to see you at ValioCon next year!

About a month ago I was asked if I might be able to put together a simple landing page for the Easter service for the church I’m a part of (Realitycarpinteria.com). It was a volunteer job and I only had a day to get it done (because of my schedule) so I used every trick I could think of to speed up the development process. Luckily for the sake of time, the content was already established (date, time, place) and there was already a look to work off of, as well as a nice video already made.

I started by putting together a basic look based on the church flyer design I was provided. I simplified and cleaned up the typography a bit and decided since the video already started with a still image similar to the flyer that it would perfect at the top of the landing page.

To speed up development, I used Paul Irish’s HTML5 Boilerplate as a base. It really helped to get the site code up and running super quickly. Because the page is so basic, though, I didn’t really get to tap into anything new that HTML5/CSS3 offers as far as interesting effects or techniques.

For the custom font in the headings, I used @font-face and I generated the font-face kit with the help of Font Squirrel’s @Font-Face Generator. I highly recommend it.

The one effect I wanted that required a bit of CSS3 trickery was the drop shadow around and below the video. I wanted to have a small drop shadow around the entire box holding the video as well as drop shadow below to give the look of slight page curls. I’d created this look before in sites but never with pure CSS (and no images). This article, “CSS drop-shadows without images” by Nicolas Gallagher,  does an excellent job explaining how to get whatever look you want via CSS drop-shadows without using images. There was a hitch, however. It seems that this particular combination of items, container with two forms of drop-shadow applied via CSS that also contains a video, has a bug in Chrome that causes the video to play back with a horrible frame rate. Since the video is key to the page in question, I had to pick my battle and ended up ditching the slight drop-shadow that surrounds the container with the video. It’s still applied in Firefox via -moz-box-shadow but I disabled -webkit-box-shadow and box-shadow. Perhaps someone smarter than I could come up with a more optimum solution to this issue, but as far as I can tell, this was my best option given this particular set of circumstances.

CSS Image-less Drop-Shadows Plus Video = Chrome's Achilles Heel

For the sharing functionality at the top of the page, I turned to AddThis which is a nice little sharing plugin. I customized the default settings a bit to only focus on the most relevant items (Facebook, Twitter, Email, and Print).

Anyway, tomorrow (Sunday, April 24th) is Easter and my church will be meeting in the La Playa Stadium at the Santa Barbara City College at 10am. If you happen to be in the area and don’t already have plans then I’d love to see you there! Plus, there will be a free taco lunch. How can you go wrong with free tacos? Seriously, c’mon.

Website – Easter with Reality

The newly formed non-profit SBIWA (Santa Barbara Institute on World Affairs) needed a new site to showcase their upcoming events and I was lucky enough to get to design and implement one for them.

The goal of the site was to be easy to navigate, have a straight forward and unobtrusive color scheme, and look professional, and, of course, make it easy to see what upcoming events SBIWA was organizing. The way future events display took a bit of trickery to work without any additional plugins (the site is running on Thesis Theme Framework in WordPress) and I may end up blogging about the set-up in more detail in the future.

The site was launched a few months ago, just prior to the SBIWA’s first event, and was received quite well.

Below are a couple more screen shots.

Hover states for the win.

A sneak peek inside the site

Be sure to check out the site over at http://sbiwa.org.

Tara Jones of Flare Productions needed a blog to compliment her brand new photography website and she turned to Immersus Media. She wanted something a little different but that had a nice clean look. We bounced around a few ideas, I suggested a few things, she puts some ideas down, and we eventually came up with a pretty cool design!

The blog is running on the Thesis WordPress Theme Framework (you can check it out here). Thesis was an easy pick for the blog theme since it made building the new blog quick and relatively painless. I did have to do a few customized pieces and Thesis let me do it super easily. I’ve used Thesis on several other sites including this one (Immersus Media).

Tara is a great photographer and a blast to work with. I’ve included some screen shots of her new blog below. Enjoy!

Look at those fancy tooltips!

Unique date display for the posts and a clean site navigation

Don't forget about the streamlined footer area for the remaining elements

And of course great photos (that I had nothing to do with). Tara does great work!

Be sure to check out Tara’s work directly at her blog at http://fpshootspeople.com/ and at her main site http://www.flareproductions.com/.

Here it is, the long-awaited Part Deux of my “please-save-yourself-from-being-a-design-victim” post. I’m going to cover a number of questions you can arm yourself with the next time you interview a prospective designer.

Questions you should ask a prospective designer:

1. “Why should I work with you?” (This is always a fun question – if you’re on the asking side. Be gracious, some people just don’t think on their feet. But, it will give you a good reading of what is most important in their minds.)

2. “How have you differentiated yourself from other firms?” (I.e. what makes you special?)

3. “What are your qualifications?” (Now, I should add that you don’t necessarily need to look for someone with a formal degree in marketing or design – some of the best designers I know have no formal training, they’re geysers of natural talent. Your goal here is to choose a designer who is a craftsman in their field and has the passion to back up their skills.)

4. “May I have two or more references?” (I know I already covered this briefly in the last email. Have the company or designer provide a list of two or more contacts for previous clients

5. “When was your last project?” (Determining the date of their last project or campaign will help you decide if your designer is a hobbiest, amateur, or an experienced professional. For reference, we have three or four projects running continually. “…oh, last project was June of last year? Hmmm…”)

6. “What other services do you offer or recommend?” (Don’t feel like this will open yourself up with a big “sales” target on your chest. A good firm will have a full range of services. You want to have the option of working with a full-service firm/designer. This means when your business grows (and it grow should, right? Why else are you investing in marketing?) you will have a committed team to help creatively target your efforts and create a smooth design that translates flawlessly to each facet of your brand.)

7. “Are your rates hourly or by project?”  (Closely followed with…)

8. “What happens if the estimated hours for a project are reached?” (Are overages included or will the project default to hourly? Will they inform you when the project hours are coming close? A worker is worth their wages. So, expect design to take some time (no, you can’t have it tomorrow), but make sure there is an open line of communication as those hours are used.

*Edited by Alan Dowling

Being that a large number of our clients have come to us broken, previously mislead, and just plain irked from prior experiences, I felt it my due duty to compose a short “how-to” on choosing and interviewing a graphic designer. In this two-part post I’ll highlight some brief points from an insider point of view.

1. Find a communicative company.
The easiest company to contact might be one in your own town. Picking a local company means someone who can meet you for coffee to brainstorm, someone who is a verified human being (someone who you can hunt down if they’ve left you high and dry). Aside from it being a good way to test the character of a designer, a local business will understand your community in ways that quirky designer in Nova Scotia cannot. On the other hand, you don’t have to limit yourself to those just in your city limits. The internet allows you to draw from a huge pool of talent. The key is finding a web designer that is willing to get to know what makes your company tick – that’s why communication is number one.

2. Choose a firm that has a contract.
I know, this seems like a no-brainer, but really – don’t hire someone if you haven’t signed (and read) their contract. Working under a contract will protect both the company’s and your assets. The contract should clearly lay out all the nitty-gritty details on the table, and clearly define both the client and designer’s responsibilities.

3. Ask for a timeline.
This handy dandy schedule outlines project launch date, payment schedule, and important milestones. It doesn’t have to be pretty but it should be clear and concise. Trust me, waiting in the dark twiddling your fingers is not a happy place to be and you’ll want to work with someone willing to identify clear dates and goals for your project.

4. View their portfolio.
Your designer should have a solid portfolio with a good range of work. Do they have the ability to mesh with your vision, or are they pretty set in their personal style and design zone? We’re looking for quality here, not quantity.

5. Ask around.
Don’t be afraid to ask your potential designer for a few contacts from their previous projects. It’s always good to get a review from an unbiased and experienced client.

6. Pay a fair wage.
In the field of design, cheaper is definitely NOT better. Just because you can get a design for what is essentially $2/hour doesn’t mean that you should.

*Edited by Alan Dowling

The sea is everything. It covers seven tenths of the terrestrial globe. Its breath is pure and healthy. It is an immense desert, where man is never lonely, for he feels life stirring on all sides.¹

We declared this site “soft launched” about a month and a half ago, which essentially means we were working out any kinks, adding additional portfolio items, and have been too busy to add to the new site blog. While we’ve been been happy to tell people about the new site (we think it turned out really well), we haven’t really promoted it to any great degree. So far it’s gotten an excellent response and people seem to appreciate the new design, particularly the page banner illustrations.

Home page Immersus illustration

If you haven’t noticed already, the page banner illustrations at the top of each of the main pages are all custom, fit within the same “universe”, and are interconnected. For example, the About page illustration is of the surface of the water (scope of submarine, island in background) while the Meet the Team page shows a glimpse below the water (you can see the entire submarine which is being attacked by a giant octopus) and so on. If you haven’t already, then I recommend revisiting all the pages to see what I’m talking about after you’ve finished with this blog post. (Update: I decided to show all the page banners in one place – see below – since it’s easier to see the connections between all the images, though I’d love it if you still decided to visit all the pages individually in order to see the larger versions of each banner.)

All part of one cohesive universe with varying degrees of overlap

I designed these illustrations well before designing any of the rest of the site, way back at the end of January in fact. All I knew was that I wanted custom illustrations at the top of most or all of the pages of the new Immersus Media site design. I also wanted to convey a sense of adventure and to show different parts of one cohesive world but also have those images fit with whatever page they were on, which isn’t the easiest thing to do it turns out.

My inspiration for the Immersus Media page banner illustrations was all over the place. I wanted the designs to be different then anything I’d done before but at the same time familiar and for them to convey a piece of me. I have a lot of interests and love to draw from a wide variety of areas including literature, film, animation, pop culture, and music.

I won’t go into detail (for this blog post at least) of how exactly I made any of the illustrations or what exactly my process was other than to say that all the items I’m about to list as inspiration are items that have been in my life and mind for a very long time. All the images in this post were found specifically for this article. I intentionally avoided seeking out the imagery while making the illustrations because I wanted the source material to influence but not overwhelm what I ended up producing. Basically, I wanted the inspiration to be based more on what I remembered or felt about the source material than to duplicate it.

Of course, the absolute greatest influence to the overall design of the Immersus page illustrations came from Jules Verne (I included a rendition I found based his novel 20,000 Leagues Under the Sea at the start of this article). I’ve always loved the worlds he put to paper and have always wished I could really go on one of the adventures he penned. The feeling of going on an adventure in some uncharted place seems so appealing and frightening at the same time. The submarine I created goes on adventures like Verne’s Nautilus but was drawn in cartoony fashion. In fact, while I wanted to emulate some of the ideas behind what Verne described, I wanted to simplify the art to be more reminiscent of a children’s storybook.

The more cartoony look and themes of space exploration and mad scientists was strongly influenced by two animated cartoon series, Futurama and Venture Brothers.

I purposely made the rocket ship look vaguely like the one found in Futurama, even making it almost but not quite the same color.

Good news, everyone!

As for Venture Brothers, I didn’t really pull visually from that series but I did have the world of that show on my mind.

Fanart based on Venture Brothers found on Deviantart.com²

From the music realm, I found myself listening to quite a bit of The Aquabats while making the designs (listen to one of their non-sensical but catchy and fun songs below).

I’m a huge fan of Pixar and specifically their film, The Incredibles, and that definitely found it’s way into my mind as I put together the illustrations.

I could not find a decent image of the island so you guys get this instead

The imagery of the lighthouse on the home page was my way of connecting the two intersecting exploration realms, the sea and the heavens. I can’t say exactly what inspired that piece specifically, but I think I like it that way. Although I can clearly identify my inspiration for most of the site, both visually and purely thematically, I still like to let the idea of leaving some to the unknown.

If you’re anything like me, then you love a good adventure – to explore new realms, to go to the outer reaches of creativity, and to, eventually, find your way home. Hopefully, the illustrations on this site give that feeling, if even in some small way. I’m not necessarily in the league of those creative giants that inspire me and I’m definitely no Jules Verne when it comes to writing a story, but I would love to help with your story – visually and otherwise.

We’ll call this the “soft launch.” This post is the first on the entirely new Immersus Media website that just got put up. As of this time and date, the new site doesn’t have all the final portfolio pieces nor does it have all the proper elements that should be in place. Of course, since you don’t know what those elements are, we are in pretty good shape.

Truth be told, my ten-year high school reunion is quite literally just days away and I thought I should probably get my act together and get this darn site launched – done or not.  So to commemorate the awkwardness that is sure to abound in just a matter of days I give you (well not me – I’m just recommending the site) Awkward Family Photos! Seriously, do yourself a favor – and visit this site. But be forewarned, eager soul, the bottomless pit of awkward photos will suck you in.

More site updates and posts are to follow in the coming days (realistically next week since we leave for the reunion later today and won’t be back until Sunday). [Update: I'm a horrible, horrible liar.]

Still less awkward than what I imagine my reunion will be