I’m a big fan of minimal desktop backgrounds, flat color, nice type, relaxing and not complex. These fit the bill. I figured maybe someone else out there might want a minimal background and might also like the phrase.

Brown, Black/Gray or Orange 1680 x 1050

Right-click=“save link as”. Sharing is caring.

PHP experts, please ignore my n00bness, this post is not for you. This is for folks who aren’t strong in hand-coding PHP, but somewhat grasp “the loop”.
I’m a front-end developer & designer who tries to dabble as much as possible in PHP and JS. I’ll probably never fully grasp PHP, simply because I’m not sure my brain works that way. Time will tell.

The Problem

By default, the “Sticky” post seems to pull-in the regular “index” loop assets via loop.php. I wanted to control the way the sticky post was called-in and could not find documentation or any relevant articles on the googles. I wanted the sticky post to act more as a “welcome message” than as a full post. This would involve re-structuring the loop.

By default, the Sticky Post loop pulls-in:

• the title (linked to full article)
• the meta data
• the excerpt or the content.

I only wanted to pull-in:

• the title (unlinked)
• the content
• edit post link

My Solution

For this example I’m referencing the default loop.php included with WordPress’ Twenty Ten theme — which calls-in three different loops based on specific parameters.

In the “loop.php” file, simply add in the following at the start of the loop (directly after the large commented area “Start the loop”) :

<?php while ( have_posts() ) : the_post(); ?>
<?php /* Sticky post loop structure. */ ?>
	<?php if ( is_sticky() ) : ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                       /* sample loop */
			<h1><?php the_title(); ?></h1>
				<?php the_content(); ?>
			<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>

		</div><!-- #post-## -->

Hopefully someone else will find this post helpful. I’m aware it’s a simple statement, but it was fun to play around with and figure out. I plan on modifying and utilizing my own sticky posts someday soon. I’m happy WordPress added the function to the core.

A step toward fluid layout

I made the decision to take-on the challenge of going super-minimal and designing a fluid theme based on WordPress’ Twenty Ten core theme. I feel my minimal effort is far enough away from the core theme to be acknowledged. I do not feel it is as far as I want to go, nor how far I will invariably go. It is a small step.

It should now be more legible on mobile devices and cross-browser/resolution display. The large background image is managed through WordPress’ back-end and is set to a fixed position. I have a semi-transparent .png image repeated through the <wrapper> of my site structure. I know that I could have approached my site design from this viewpoint anytime I wanted. What gave me a kick in the pants was the added function on the back-end interface. It put my mind into that kind of simplistic mode. I love the idea of changing the feel of my website utilizing a large background image — and not having to SFTP into my site to do it. Sure, it’s been done to death, but I’ve never done it. This is my time to do it and it’s damn practical.

Fluid Layout at 1680 pixels wide

Fluid layout at much smaller resolutions

Whoa, what’s with the logo?

I’m trying out a new logo. I hate, hate designing logos for myself. I wanted to stay away from initials, as they are just not alright with me at this time. I have chosen to take on a semi-nerdy (glasses) plus awesome (beard) kind of joe-like grangler logo. Let me know what you think.

Overall

I’m striving for minimal layout and styling — mixed with some WordPress 3.0 features (background images through the admin interface) and sensible typography. Most elements are structured using percentages for width, margin and padding. This way at any resolution elements will expand and contract accordingly. Where this fails, currently, is where the “featured image” items are displayed/styled in the “index” loop. At large resolutions (larger than 1680 wide) the featured image and the post content will noticeably separate.

I have nothing else to say at this time. Thank you for being grangley.

Update: 7/21/10

I totally changed some minor things around, mostly styling. I’m no longer using WordPress’ background-image function or image-header function. They became too cumbersome and I didn’t like the code output structure (not the most semantic or load-friendly). I am going to continue refining the styling throughout the site. My goal is geared more toward content right now, over design elements. I need to go minimal, and I’m never, ever happy with my own website. With these steps toward a fluid-flowing, expandable layout, I plan on working with the pixel vs percent relationship, in an effort to allow the sidebar to fall below content on mobile devices.

More later…

Some key ideas

The body background is a transparent PNG with a halftone dot pattern repeated from MRI’s logo. The actual header div utilizes another dot pattern. When the two are combined it creates a completely different effect than either would solely, on their own. This is a very minor design touch but I plan on making this idea a fundamental design element throughout MRI’s branding. It embodies everything about light painting in overlapping colors.

Bright, bold colors

The theme is very minimal but it relies on bold color to re-enforce your eye’s focus.

CSS 3 and Internet Explorer

I do not expect anyone using IE to see the website as intended. This is similar to a director’s cut of a film. I will no longer go out of my way to dumb-down websites I design, just for IE — at least when I can avoid it, anyway. I chose to utilize border-radius (rounded corners) and text-shadow via CSS 3 and only folks using current web standards-compliant browsers will see the website as intended. IE users will not see rounded corners, drop-shadows or text shadows. Internet Explorer 9 is supposed to support CSS 3, finally, we’ll see. Microsoft, please stop making your own browser — use it in your operating system all you want but stop allowing people to use your shitty browser. Please, focus your energy and resources on making a semi-decent operating system.

Future ideas for expansion and refinement

• Play with sidebar widgets — how to display them in a not-so-default manner
• The heavily desired “where’s the beef” footer — more interesting footer business
• Creative ways to present post-sharing/social media badges
• Implement some @font references for headers/typography
• Strive to remember that simplicity is usually the best route to take

Click image to visit the new website.

I want to thank Michelle and Ryan for being awesome and letting me use their website as a design playground. I love you guys. This post is like, 4 months past due, but whatever. Better late than never.

Thanks for reading and let me know what you think.

Grieves featuring P.O.S. — War For The Crippled (single)

I’ve been obsessed with this song and P.O.S’ verse in particular since the Confessions of Mr. Modest EP was released — coinciding with the re-release of 88 Keys and Counting and Grieves’ own induction into the Rhymesayers family. I’ve done a few design-related things to get it out of my system — mainly revolving around P.O.S’ slightly whispered lyrics “How come your eyes hurt me so bad”. So I played with it. Nothing super involved but I dig it and think it fits in with the EP’s album cover, in my own way at least. Imagery utilized from Shorpy.

Aesop Rock — Music For Earthworms

So I said I’d do this someday and now is that some day. It is very similar in style to the Appleseed cover. Again, relying heavily on the main image. I definitely dig it more than the old school original cover. Imagery utilized from Shorpy.

Waterbear — Untitled But Moustached Lady

This is seriously just for fun and is absolutely ridiculous. Nicholas and Tom need to put out an album and maybe this in some small way will help them along their way — motivation. If you’re reading this stop and go make some music. Put down the fish and beans. Stop shitting your pants, wearing wild life sweaters and make some music. Imagery utilized from Shorpy.

Saul Williams — NGH WHT

This is a digital-only download available here. It features Saul’s voice reading passages from his books, including the Dead Emcee Scrolls, accompanied by the fantastic Arditti String Quartet. I was sad there was no artwork included with the download so I made some. The album includes three FLAC versions of the record — one with both Saul and the quartet (the album), one with just Saul (a capella) and one with simply the quartet (this is the remix, son). The idea is to inspire remixes and submit them on Saul’s main website — saulwilliams.com. The release is well worth the $6 price tag. Go cop that dunny.

Omnii — Omniishell

This is for (an old friend of mine) Colin Swenson’s musical persona Omnii (one of many projects) and his album that may or may not be released, but he was kind enough to share it with a few friends. I, for one, think it’s pretty awesome and wanted to make a quick cover for it. I also realized that though this and NGH WHT were made many months apart, I chose to utilize the same typeface. Which also led to the inspiration for MRI’s logo design typeface, a modded version of a font called Mod.

Aesop Rock — Appleseed EP

Ah the elusive and rare Aesop Rock EP (1999) that will never again be officially re-released. Man I still kick myself for not purchasing a copy when I had a chance. I recently re-downloaded this, FLAC-style and needed high resolution artwork to print out for my shelves, along with it’s digital companion. The photo used is from this amazing photo archive website called Shorpy. I felt it was a perfect fit and I adore the photograph. So really, this is minimal on the design, heavy on imagery — I did do a tray card too. Some day I’ll do one for “Music For Earthworms” as well. If you haven’t checked out Shorpy and like nostalgia for the sake of living vicariously through dead people, go there — or if you simply like neat photographs.

MRI Lightpainting is Ryan Warnberg and Michelle McSwain. Ryan is a talented story teller, writer and works for a living as a music industry marketing nerd at Sony. Michelle is a ridiculously talented photographer, together they form the uniquely creative duo MRI Lightpainting. They are quickly making a name for themselves throughout New York and the world. After designing business cards for both Michelle and Ryan, they came to me to design a logo for their new adventure. After several months of back-and-forth emails and phone calls (they live in NY), we solidified a concept.

The Process

The initial goal of the logo was to express the act of light painting, which is no easy task. After brainstorming, sketching on and off for a month or so, I started to realize that the logo did not have to express what they do. The logo needed to be stylish, simple, memorable and flexible for wide-application. Some of my initial attempts at creating a “lightpainting effect” were successful, however were not versatile enough to work in one color and still carry it’s message. Their work expresses what they do far greater than any logo ever could. The final colors had been determined early-on, as the print colors CMYK (cyan, magenta, yellow and black). They wanted bold colors to match the light effects utilized in their work.

Now, my personal favorite for a long time was the simplicity of the top right — semi-circle. However, it does remind me of a few other logos out there. The kerning is a bit off in the version above, oh well. I do still really like it — and I adore the Avant Garde Gothic typeface.

End Result

Here are some final interpretations of the logo. It is versatile enough to work in one color or in a layered fashion, which I am a big fan of. The letter forms are half half-tone, half solid, largely filled-in with slight bottom insets, to hint at their full form. When over-laid in three color, they resemble a screen printed element. They also effectively illustrate light painting, in colors overlapping one another. This can also be manipulated/layered further, offering an endless combination of the original logo, to appear in various mediums.

Matt Wells is a talented illustrator who is extremely active in the local art community. I always enjoy the chance to work with him and occasionally partake in some fine beer drinking. From providing illustration and design for annual events like the Red Hot Art Festival, to his own successful art shows, like 2009’s Rush Hour, he always produces high-quality noteworthy artwork. Some may also have noticed his work for 2008’s Doomtree release Hand Over Fist, which made my top 15 of that year.

I had designed and coded a very simple website for Matt years ago. It was completely static and tedious to update. Over the past few months he came to me for some new thoughts and advice in resolving some server problems. I suggested we migrate his current site into WordPress. The biggest reason, his previous hosting provider was not secure. His website became listed as having malicious content (in Google’s eyes) and as a result, his domain was developing a bad reputation. I suggested he ditch that hosting provider because they obviously couldn’t resolve the security issues. After he received a humorous email from some Motorcyle-enthusiast wanting a link exchange it became increasingly necessary. He clicked the link in the email and was directed to a page on his site that was essentially a link farm. This was baffling to me and I have never seen this happen before. Long story short, he is now hosted elsewhere, securely and has WordPress as a content management system.

Design Notes

The layout is extremely minimal, clean, holding some subtle touches. Above everything, it serves to provide the public with an overview of his stunning work. That was the most important goal of the website, as it should be with any artist portfolio site. I am a huge fan of big bold headings, in this case I used Helvetica. I feel the site is now professional, clean, easy to navigate and simple. His work can really shine and updating the various galleries of work could not be easier.

Visit: The New Lizardman Art Website

Let me know what you think!

Emily came to me for a slight redesign of her current site, which I designed some years ago. The previous site was completely static (no administration installed on the server) and required her to learn HTML and proved to be more work to update. Since that time, her business has grown and I have grown to love WordPress, specifically using WordPress as a content management system. We decided that this was this best solution to show-off and maintain her gallery of incredible jewelry! Also, she can now easily update her monthly events and news.

Design Notes

The layout is very clean, minimal and stays true to her business card design, while furthering her brand.

On a personal note, I was thrilled to work on this because it challenged me to learn more about how WordPress functions, from the hierarchical templating to more robust and specific features.

Visit: The New EC Design Studio Website

Let me know what you think!

That One

Man, where to begin with this song. I guess I’ll start out by making a bold statement, P.O.S. is one of the most important musicians of the last 10 years. He puts forth some of the most honest, freshly distinctive, unconventional and innovative music today. It’s always challenging, holding layers, that are worth the time to unravel and dissect. In my opinion, his debut release, 2004’s Ipecac Neat was unprecedented, raw and full of heart. He poured himself into each track, with a fearless determination to be heard. Stef is a grand mix of talent and passion. He has a unique voice and lucky for us, he chooses to use it. I’ve never liked the mainstream bullshit, the watered-down music that finds it’s way into the ears of millions of sheep, eating the shit up like it’s the cure for cancer. It’s not, music like this is. The unrestricted, honestly bare-bones approach, leaving everything on the table. There is no “dressing it up”, no “making it pretty, marketable and easily digestible”. There is an honest connection that one recognizes and believes in. I have always been drawn to music that carries passion, integrity and conviction. There is no conviction and/or, to an extent, passion in mainstream music, it’s a business. I don’t believe it, so I don’t find it to be worth my time. I guess it’s a difference in what you demand from music, the value you find in music.

My love for hip-hop has everything to do with a deep love of language.
People dismiss hip-hop as ignorant and an abomination to music. Like anything, you have to sift through the shit to find what matters. I want to hear lyrics that mean something.

The funny thing is that hip-hop holds, by far, the most intelligent and creative expression of language in music today. I can not think of one single other genre of music that comes close. Don’t get me wrong, there are excellent, brilliantly-crafted lyrics to be found in any genre of music. If we measured them all up though, I think we’d find that hip-hop buries it’s competition. The sad thing, is that the commercial and marketable shit is all the sheep hear and in turn, dismiss the entire genre. Fortunately, I’ve never been close-minded when it comes to anything in life. Life is too short for restrictions, especially when it comes to something as humanly expressive as art.

Anyway, I’m getting a bit sidetracked…so..on to the song.
This song came to me when I needed it most. It offers a sincere, honest look at ones internal reaction to failed love. This song is the epitome of excellent storytelling and structure. Starting out with an intense barrage of lyrics, layers of aggression, passion and well-structured lyrical passages. Like thoughts, just festering in the brain, cycling through over and over, the could of and should of, the accusations of blame, the back-and-forth struggles of relationships. The confusion, the stress, the out-of-your mind pure fucking sadness. The desire to relieve yourself of the situation, find something, hold on for a bit longer. The olive branch. The memories, the little things, the times you shared and everything you miss. The realization that someone actually found it within themselves to love you, with all their heart and it was mutual. The pain that it may never happen again.

I structured this type experiment out in the same fashion the song builds.
The barrage of thoughts, all mixed-up and primal, followed by the climax, the main point, the final output of frustration and that glimpse of closure.

“My best, you can have it if you want it“
This almost offers comfort in the whole mess. The justification through being rational approach.

“Drowning, I’m not waving, I’m drowning“
The unease of it all, being human, being vulnerable, having your world collapse around you. The desire to give-in and fester in your sadness, to be alone.

This is one of my favorite songs ever and probably always will be.
Stef has refined his approach over the years and still continues to impress me, or rather, floor me with his expression, his craft. Nothing he puts out will ever touch the vulnerable beauty that is Ipecac Neat. Rather, nothing he puts out will affect me in the same way — pretty much like everything in life.

I also created a “waving” hand graphic that has a portion missing from the “ring” finger. Emphasizing a shattered relationship. I’m trying to break myself of the desire to make everything clean in these type explorations. I always gravitate toward clean, structured type and it’s tough to break the habit. I may start only using hand-drawn type for a while, free from the structure of typefaces and the computer.

I really enjoying doing these because it allows me to explore my favorite songs in a whole new light.