This little wallpaper was made with a combination of Adobe Photoshop and Illustrator and a lot of time on the Wacom tablet. The majority of the work took place while trying to make the shadow look natural. Shadows have always been really difficult for me to get right. All in all I think it was a worthy afternoon of exploration and creativity. Enjoy.

Need this wallpaper in a specific size? You got it!

1024×768

1280×800

1280×1024

1440×900

1680×1050

Grab this wallpaper and you can picture yourself lazily riding through town while you’re actually inside because you’re at work or it is raining :)

Fresh Bike Ride, eROI Wallpaper

Need this wallpaper in a specific size? You got it!

1024×768

1280×800

1280×1024

1440×900

Throughout the years, I’ve accumulated a list of my favorite artists, albums, and songs. The songs noted below, for different reasons, resonate with me and help me get my work done. The tunes help me focus, give me energy, and inspire me as I move through my day.

Without further adieu, here’s my list of B-roll tunes.

Tyler Stenson – Bittersweet Parade, Welcome To The Change

Paramore – Brand New Eyes, Misguided Ghosts

Adele – 19, Hometown Glory

Keane – Under the Iron Sea, A Bad Dream

Death Cab – Narrow Stairs, Cath

Kanye West – 808’s and Heartbreaks, Street Lights

Thom Yorke – The Eraser, Black Swan

Maroon 5 – Songs About Jane, Not Coming Home

And, just to add on a little extra embarrassment, here are a few of my pop music weaknesses for proposal writing:

Please Don’t Stop The Music – Rhianna

Unusual Use – Britney

Alive – Black Eyed Peas

This wallpaper was created by Stephen, one of our amazing web designers. He wanted to do a textural design incorporating beautiful photography and vibrant colors. Don’t you think this design communicates the fresh, crisp feeling of an early morning or dusk?

Fresh Sunrise, eROI Wallpaper

Need this wallpaper in a specific size? Get it here:

1024×768

1280×800

1280×1024

1440×900

In that vein, we want to share some of our fun, Fresh wallpapers with you. Check out this one from Tom, our music-obsessed, fine point Sharpie-hoarding, designer extraordinaire. My guess is that he came up to this while jammin’ to his favorite tunes. Design improvisation at its finest!

Whenever I see him, he’s carrying around his sketchpad and making fun, happy-accident-type doodles. Don’t you wish your doodling could be this fun and festive?

Fresh Doodle, eROI Wallpaper

Need this wallpaper in a specific size? Download it in one of the following sizes:

1024×768

1280×800

1280×1024

1440×900

I can hear the birds chirping! I can feel the sun in my eyes and the cool breeze flowing through my hair. The smell of tulips wafts… Oh wait… I’m here in the office. Well, this wallpaper is just that good.

I’ve used some faded tree and cloud elements combined with a water-color-y wash of lemon yellows and sea green for this wallpaper. Hope you enjoy!

eROI Fresh Wallpaper, Spring Breeze

Need this wallpaper in a specific size? Download it here:

1024×768

1280×800

1280×1024

1440×900

Certain songs or genres of music aid me in different working scenarios.  Sometimes I find myself knowing exactly what song or album to play for my current mood or for the task in front of me. If I am on a deadline, if I am wireframing a new site, if I am working late, or if I am just plain old stoked on a design direction, zoned out, head down, gettin’ it done, I know what to listen to to make that task more enjoyable. There are songs for reading your RSS on Monday morning, drinking coffee, ramping up for your week, and there are songs for your Friday afternoon, winding down your open projects, and thinking about your upcoming weekend.

Here are 10 tracks, old and new, and the web-design/interactive dork scenarios in which they feel most appropriate, as those scenarios fit into a 5-day work week.  Try them out and tell me if they work for you too. Hell, you might learn about some new music, get way better at those deadline pushes, or at least grumble a little less to yourself when burning the midnight oil.

NOTE: These choices are based on a combination of the general pacing and mood of the songs, and their subject matter and lyrics. Sometimes more one than the other, sometimes a perfect balance of both. One thing remains consistent: It is all subjective jibba-jabba according to one interactive designer and illustrator’s listening habits. Take it or leave it.

1) It’s Monday morning.

You haven’t quite had enough coffee yet. You have an overflowing inbox, and an upcoming production meeting that will inevitably reveal a mountain of work ahead of you. Most creatives likely use this time to sip/chug caffeinated beverages, check RSS feeds, Facebook, blogs, and news headlines.

I like to keep my Monday morning selections mellow. My brain takes a bit of time to ramp up into full swing, as do my music sensibilities. I need tranquility, and ease in pacing. AA Bondy’s soft voice, and languid cadence seem to do it for me in these scenarios.  And, his albums are conveniently at the top of my iTunes alphabetic library.

AA Bondy - There’s a Reason

2) It’s Monday afternoon.

You’ve made it through the day, unscathed for the most part by the prospect of the week’s deadlines, the countless meetings and project kick-offs.  Somehow, you remain ambivalent to the idea that the aforementioned meetings made it so you really only got 2 hours of real work in before it was almost time to go home.

During those last few work hours, I find it best to realize that once you have made it that far, the rest of the week is a breeze. For one reason or another, Monday mornings seem to be the hardest to make it through, and next thing you know, it’s Tuesday. You will have your feet up at home with an adult beverage of your choosing, watching the boob tube in no time.  Let Oxnard’s Oh No and Long Beach’s Aloe Black serenade you as you glide into Tuesday.

Oh No feat. Aloe Black – Getaway

3) Tuesday morning.

So you made it through Monday, and have arrived at work with the attitude that no project, big or small could phase you.  You are a machine. A machine created to efficiently design or code anything the internets can throw at you, with impeccable attention to user experience, visual hierarchy, and typographic sensibility. “Go time, bitch.” you mumble to your computer as it boots up and you go fill your coffee mug. Perfect for wire framing, sketching, slicing, and file preparation.

Personally, I enjoy upbeat, largely electronic or synthed-out tunes at this stage in my week.  Minimal vocals are preferred, if not spacey/dreamy vocals that I barely can decipher anyways. This is my concentration music. My amiable, productive music. Nite Jewel and Caribou tie here as equally awesome productive morning music.

Nite Jewel -What Did He Say

Caribou - Sandy

4) Wednesday, late morning.

You have a call with a client at 3pm. You need at least an hour, to be safe, to prep for your presentation, so that means the designs/code need to be buttoned up by around 2pm. You look up at the time and it’s already 11. Shit. Gotta cancel those lunch plans. Time for a good old deadline crunch.

This is a scenario when I turn to punk and good ol’ rock and roll. The first albums that pop in to mind when I think of “go fast music” are by Portland’s own, The Thermals. 2003 and 2004’s More parts Per Million and Fuckin’ A have just the lo-fi, energetic grittiness that somehow makes deadlines and time crunches seem laughable.

The Thermals -Brace and Break

5) Wednesday, late afternoon.

So, as often happens, your deadline crunch made it so you had to push all other responsibilities off for the first half of your day. You now are looking at a bit of a late night, and as everyone around you packs up and heads out, turning off the lights as they file out, You need a little something to help brush off the reluctancy to work late, and to buckle down. Take a deep breath — you have that new DVR thingy recording that one show for you. You aren’t going to muss anything but the rush hour crowds.

What I have found pairs best with working late is anything garage-rock-driven. I need the almost happy twanginess combined with the slightly hessian badass undertones to kick my work’s ass, but not be mad about it. Old recordings by The Seeds or Anything by Black Lips or King Kahn usually works. Recently, it has been The Strange Boys that blare in the later evening work sessions.

The Strange Boys - Friday in Paris

6) Thursday morning.

You feel pretty good about staying late last night as you stroll into work, fully ready to finish off your responsibilities for the week. You need to focus, but you might not have to have the same kind of head-down-marathon you did yesterday. It is a mellow morning, but you are kinda psyched to sip free Pabst whilst milling around 1st-Thursday gallery openings after work.

This is often a hard balance to strike when trolling through your iTunes library. You don’t want to blow the roof off, but folk music is just not going to cut it either. The driving guitars and smoothed-out vocals of Olympia, Washington’s  Desolation Wilderness fits this time/work/energy niche nicely.

Desolation Wilderness – Boardwalk Theme

7) Thursday afternoon.

So close! You have put yourself in a good place for that Friday site launch, only have a few things to polish up before jetting out the door to meet a friend for a Thursday-evening beer down the street from the office. You are in a good mood, because, well, you killed it this week. Gettin’ shit done doing what you love feels damn good. It’s almost the weekend.

Turn your speakers up to 11, and finish your day off with David Bowie’s cover of 60’s Australian rockers The Easy Beats’ end-of-week classic.

David Bowie -Friday on My Mind (Easybeats cover)

8) Friday morning.

Somehow, another week flew by in the blink of an eye. You stroll a little slower than usual on the last few blocks to the office, soaking in the idea that 24 hours from now, you might still be still asleep, resting up for a long 2 days of whatever-you-goddamn-please. You have some work to do, so the job is not done yet. Time to get stoked for the last push.

Stroll a little slower still, maybe – listen to somethin’ a little badass, but not overbearingly so.  Something that reminds you of driving with the windows down in the summertime. Perhaps something by Brattleboro, Vermont’s King Tuff.

King Tuff -Sun Medallion

9) Friday afternoon.

I am not sure what it is about Friday afternoons, but all I can think to listen to is soul music. Loud, seated-dance-inducing, ear-to-ear grinning soul music. It’s just how I do.

I have not personally seen it done on the dance floor, but Eddie Bo’s Hook and Sling (presumably a dance move) always gets me.

Eddie Bo -Hook and Sling

10) Friday – the commute home.

You did it. Granted, you will have to do it again next week, but for right now, all you really have to do is enjoy your ride home. Slink down in your bus seat, slow your roll on your bicycle, or roll your window down and take a slow, deep breath. Decompression is key, and everyone has their own tricks and personal victory dances.

One of mine a little 2-part Friday night/party anthem by People under the stairs from their 2002 release, OST.

People under the Stairs -The Suite for Beaver Part 1

People Under the Stairs -The Suite for Beaver Part 2

Music is integral to my process. I know my work habits, and music tastes, and make a concerted effort to allow them to inform each other. It immensely helps my mood and workflow, and encourage you to pay attention to this balance in your own work/life. If it’s not these 10 tracks that make your week way more awesome, then it is another 10, but I believe everyone has tunes that speak to every mood and scenario. My recommendation is to seek them out and see what happens.

You can download all of the tracks included in this post as a handy .zip file by clicking here.

Disclaimer: These tracks are for promotional and preview purposes only. If you like the music, buy the album. All links will be removed upon request.

While much of the country is still reeling from the effects of massive winter-ness, PDX has had an untimely run-in with Spring for the last week or so. Our cabin fever has been relieved for the moment, and so our thoughts turn towards happy hour on the patio and unplanned use of vacation days.

Now, some of us have a not-so-healthy idea of fun (spring cleaning, anyone?). Of course, often it’s necessary to purge clutter and bad habits, and spring is as good a time to do that as any. In this spirit we wanted to take a moment to talk about some of the best practices we’ve found when working with your design files. Good habits can make the difference between a seamless development process and a complete nightmare, one that will try everyone’s patience and waste valuable time. We’ve even included a little treat at the end to help get you started. Ready to clean house?

1) Start with the end in mind
Back to the basics. When you build anything (even those one-off small projects), always use a grid. Choosing and sticking to a strong grid not only saves you lots of time when building the structure for your content, it ensures you will have a solid end result, not to mention the fact that it lays the foundation for a foolproof starting point when implementing the CSS.

2) Break it down
This may seem obvious, but organization is insanely important when building a design file. Name everything in ways that make sense to anyone else that might open it (i.e. a folder for navigation, then break it down for each piece within). Getting in the habit of doing this routinely will put any developer that works with your file at ease, and eliminates any questions over “where did you put that button?”

3) Smart & exact
Be a professional and avoid the temptation to be lazy in Photoshop. Always build to exact pixels, and zoom in to be sure – that’s what they make that magnifying glass for. Be weary of vector shape tools in PS, as they often miss the mark on pixels, and you get messy, ragged edges. When in doubt, select your pixels with the marquee tool and fill them. This same thinking goes for type – never resize type with the transform tool, always use the actual pixel height. Also, use text boxes to snap to your grid, and set padding, leading, etc. within the box. These elements also translate directly to CSS (another time-saver).

4) Refine your palette
The swatches palette is your friend. Stop color sampling things with the eyedropper tool and hoping you have a consistent file. Take the time to create your swatches as you go, and you’ll have the beginnings of a style guide ready for anyone who needs to use your files.

5) See it clearly
Transparency can be great for building effects, but unless you’re going to flatten all those layers into a JPEG in the end, you are creating unnecessary work and file size to make transparent PNGs. If you use transparency to find the perfect tone, resample the color with the eyedropper and make the object 100% with the new color choice. Also, be aware that layer effects and blend modes don’t always transfer when saving files to web. When in doubt experiment before committing to it or find another way to get the effect.

6) Be a master
I’ve found that when building large sites with huge amounts of adaptations, having a master file with the base elements is the simplest way to go. For example, one PSD will house the master navigation, footer, logos and any other repeated items, along with a file for all button states and icons, assets and such. This is a great way to make sure you have consistency among all the various pieces.

7) Stay lean and mean
In addition to that last tip, you can also save yourself valuable file size by flattening reused pieces from a master file to drop into subsequent files. This also reduces the margin for error, as you can only make changes to the file with all the layers.

8) Take action
Also another useful tip for building very interactive, feedback rich website files: break out complicated actions into their own file where you can concentrate on every aspect. For instance, I recently had the need to show every state for an interaction in an ecommerce site where a user would check the balance for and apply a gift card to an order. All the interaction was going to happen in place, and it’s really difficult to illustrate that in one page comp. It was much better to break it out and show all the states in line to cover all the details.

9) Be thorough
Don’t just take the word of your monitor if subtlety is a key to your design. Take a look at it on various monitors, especially those with an sRGB profile (standard on PCs). Check for contrast and try to get an acceptable amount of consistency between appearances. You can’t make this part of the design perfect, but make sure important details don’t fall out, and your hierarchy still holds up.

10) Have some style
The extra work of building a style guide will be worth every minute when you hand off your files to someone else to build. Including all the needed info about styles used, standard elements and measurements are essential to making the design come together. While this may seem hardly necessary for smaller sites, it will save your sanity when tackling something large.

To help all of this permeate your process, we’ve included a downloadable treat to keep for reference on best practices with your design files. Hopefully these tips will help keep your designs tight and ultimately more successful when produced. Enjoy!

Download the zen design super awesome treat ›

(images: Daily Drop Cap by Jessica Hische. Found Via Apartment Therapy)

I know I already wrote a post listing ‘plugins every WordPress site should have‘ but there were quite a few I didn’t mention – just because I personally like the plugin and use it every time doesn’t mean it works for everybody in every situation.  But I love these SO much and I’m just worried that some poor WordPress developer doesn’t know about them, so what else can I do but write about more plugins?

Here are the plugins I mentioned in my previous post:

• All-In-One-SEO Pack
• Google XML Sitemap
• WP-SpamFree
• yoast.com Google Analytics
• Feedburner FeedSmith

In addition to those, there are a few more plugins I have a special warm place in my heart for.  (And despite the title of this post, they are pretty basic and not really all that “XTREME” – but is anything labeled “XTREME” really all that “extreme” anyway?)

Improved Include Page

I don’t know how many times this plugin has simplified my life.  If you are using WordPress as a CMS, and you want the client/blogger to be able to edit any text on your site, this plugin is super-awesome.  You can take any block of text, say, a newsletter call out in the sidebar, a special offers box on the homepage, or any other piece of segmented tex – and create a new page for it.  Let’s say you make a page called ‘Newsletter Signup Text’, and it’s ID number is 3.  Then in your sidebar include file, just call the function: iinclude_page(3); and the content of that page will be displayed.

Here’s another example.  On the homepage for FutureVet, there are multiple, separate blocks of static content.  I could have created one page called “Home”, included all my code structure and multiple ‹div› tags in the page content, and just crossed my fingers that whoever edited that page didn’t accidentally delete any of my code.  Instead, I split up the editable content into different pages, and used Improved Include Page to include them in the homepage template.

To do this, I created a template called homepage.php.  In the WordPress admin area, I created one page called “Home” that contains the introduction text, and assigned it to the homepage.php template.  I created three subpages of Home, and named them “Kids Callout”, “Students Callout” and “Vet Professionals Callout”.  Those three pages contain the text in the three blue boxes.  In the homepage.php template, I added the three iinclude_page() calls to each of those pages, in the appropriate place in the code.  Now all the text on the homepage is editable, with no risk of accidentally deleting important structure code!  I love it.

Improved Include now also has a “teaser” option – useful if you have a regular full-blown page of content but want to show a little preview of the content on your homepage or sidebar.  It works just like the excerpt option for posts, just use the ‹!–more–› tag to determine the cut off point for the teaser.  (Thanks to Christine for bringing that to my attention! :)  )

More Fields

One thing that WordPress doesn’t really do as well as other CMS’s like Expression Engine, is how it handles custom fields. Custom fields provide little bits of information (or ‘metadata’) that are attached the post but not in the actual post content.  The trouble with custom fields in WordPress is that they only provide text input, and they can be confusing to use.  By default, you create a custom field by picking the custom field variable name from a dropdown, then adding the value for the field, then clicking “Add Field”.  If you ever need to change a field, you have to go through two steps – updating the custom field, and then saving the page.  I’d wager that many people make the mistake of not saving the custom field before they save a page.  Plus, if you have several types of pages, that need different custom fields, it can be hard to remember which fields you need for which page.  Custom fields can be a big headache in WordPress.

That’s where More Fields comes in handy.  With More Fields you can create groups of custom fields, each with their own space on the edit screen, with a helpful descriptive label (much easier to understand than variable names).  Plus you can choose whether you want a text field, a checkbox or a select box for each custom field.  The next major release of the plugin will also include WYSIWYG text areas as well! (Awesome!)

Here’s an example of how More Fields improves your custom field experience.  Let’s say you have a recipe blog, and you like posting nutrition information along with every dish, and you want to display them in a decorative box to the side of your post.  Here’s how that would look with standard custom fields:

Ugly and confusing!

Here’s what they look like with More Fields:

Ah, much better!

Custom Fields have many, many uses – any time you need to attach metadata or variables to a post – and More Fields makes them so much easier and more practical to use.

Also, let me not forget to mention how easy it is to call these custom fields in your templates.  Just use meta(‘customfield_name’) (to print the data) or get_meta(‘customfield_name’) (to assign or manipulate the data).    If you aren’t aware of the standard way of getting custom fields in WordPress, let’s just say it requires many more lines of code, and leave it at that.

More Fields.  Why settle for anything less?

To be continued…

I have a few more plugins to cover but I think I’ve gushed enough for today.  Tune in next time for even more WordPress Plugins…  XTREME! (guitar squeal!)