This is one of those seemingly simple things that I wanted to do for one of our client sites that turned into a slight obsession because it seems like an obvious and increasingly necessary feature.
I’d like to see night-mode as an option for online mapping. I know that customized embedded maps are possible by overlaying tiles as described in the APIs of Google/Mapquest/Yahoo and the recent ALA Article. I actually like the fact that this is a little complicated to implement because the average user shouldn’t have the power to tweak standard base map colors - think MySpace profiles <shudder />. However, if you own a vehicle GPS, it probably has a day and a night mode. In night-mode, the color of the map tiles are inverted to decrease the brightness of the screen for nighttime driving. Why is this a necessary feature for online maps?
Seems obvious and increasingly necessary to me. To demo what this might look like, I’ve set up a simple HTML mockup - with a dark background of course. What do you think?
Update 4/5/08: Apparently while I was cheering on my wife, sister-in-law and friends at the BridgeRun, my site went naked a bit early. Thanks to the person who let me know about my preemptive nudity.
Update 4/2/08: Ok folks, show’s over, move along. WHAT? You really want the 90s April Fools version back? Just go back to the homepage and select “1998” from the dropdown on your right.
I couldn’t exactly encourage you all to get experimental last week without doing something a little off the wall myself. If you saw me speak at SXSW or at the Webmaster Jam Session, you’ve probably seen this version of my personal site straight from Geocities in 1998:
Inspired by Cameron Moll’s classic suggestion to steal from my own work, I’ve extracted the late nineties flare from the above design and injected it into my current site. Rather than starting with a clean slate on this site, I thought I’d update (or revert in this case) the CSS alone. Yes that’s right folks, the glorious design you see before you was possible simply by swapping the stylesheet. I was tempted to bring in the good ole’ blink and marquee tags, but that would have violated my self-imposed rule of not touching the existing HTML. I hope you’ll find that the site is still quite functional. You can even swap the stylesheet back to the original default by returning to the homepage and selecting “Contemporary Home” from the dropdown in the sidebar.
For those of you who are suddenly inspired to redesign your own sites - Really now, who isn’t? - I’d like to encourage you to check out my book: “The Principles of Beautiful Web Design”. I’m sure my tips about layout, color, texture, type and imagery will be just the help you need to tweak your own website design into something of this level.
I believe my work here is done. I’m gonna go rummage through the attic now to see if I can find my Garbage Pail Kids stickers, Soap shoes, Hypercolor shirt, pogs, and slap-bracelets. Peace!

I couldn’t help but grab the arms of my office chair to keep from falling over this afternoon as I checked out Bryan Veloso’s latest redesign of avalonstar. The layered textures, unorthodox structure and analogous color scheme really set it apart from anything else out there.

In the words of Levar Burton, “Don’t take my word for it!”
For the last few years, it seems the web-design community has been in a bit of a rut. I’ve seen a lot of unique design flicker through the CSS galleries, but we (myself included) have been relying too much on cozy conventions. We know the principles of beautiful design, but we’re too stuck on standard site structures, browser limitations, and popular opinions to really put those principles to test. It seems the times they are a changing though as Bryan isn’t the only high-profile blogger pushing the envelope:
That’s by no means a cumulative list; I’m just saying that exciting, industry-changing experimentation is coming back into style. I’ve personally had the redesign bug crawling around on my back for over a year now, but the desire to do something “different” has been keeping my mind churning and my hand from moving. Recent redesigns like Bryan’s are definitely fuel for the fire, and I’d love to see this glimmer of change flame up into a revitalization of the personal website. I think it’s time for us all to take a a step back and realize that, “We are the music makers, and we are the dreamers of the dreams!”
The following is my entry into the Firefox 3 T-Shirt Contest. I was inspired by Daft Punk, Flat Hicks, and White Chocolate Mochas. I’d like to thank my wife for encouraging me to design something besides websites for a change…even with a gimp hand.
Click the images to see full-size versions in Flickr.I don’t know if I’ve said this lately, but I love designing for the web. It’s fun for me. Some people like playing video games or tending to their bonsai trees in their spare time, but I’m a design nerd. If I’m not spending time with Ames or working on projects or chores around the house, I can usually be found in our office twiddling with some inane, personal design project.
With that said, I’m not some design prodigy. I just learn as much as I can and apply it to what I already know. I like to think I’m becoming a better designer every day, but even though I wrote a book on the subject, I still don’t consider myself a guru.
Somehow though, I tend to get a lot of emails like this one:
Hey Jason,
I was wondering if you could help me in my quest to make my website look better. I’m designing a website for my scout troop, I’ve got the design done, I’ve just got to make it look good. This is where I get stuck. I’m not very creatively minded, so if you could give me some pointers I would be very grateful. If possible id like to get my groups colours into the design, which are yellow red and blue, but that’s going to be hard. Somewhere in it id like to have the scout logo, but I’m at a loss of how to implement these design ideas. Any tips would be very much appreciated!
John Doe (Name changed of course…)
(website url removed)
P.S. Don’t look at the css unless you would like a heart attack - its still coming from the design phase - its all there and working, I just want to make it look good before I start to clean it up.
P.P.S The Scout logo can be found at: (url removed)
P.P.P.S This email is just a last ditch effort to make my website look good, I don’t really mind if you delete it!
Although he said I could just delete his email, I never do. I always take the time to reply, but I tend to write something similar every time. Here’s what I wrote this time:
Hey John,
Being a scout leader, I’m sure you’ve heard the old proverb “Give a man a fish and he’ll eat for a day. Teach a man to fish and he’ll eat for a lifetime.” For that reason, I try not to give advice on “how to fix your particular design problem”. Instead, I try to get people to understand the design process so they can do it themselves. My general advice is to ignore the working website, start on paper, and work up a layout concept. Don’t worry about the colors, just try to find a good location for the scout logo, the nav, the content, any subcontent, etc… Once you’ve done that, try to think about where you can work in some of those colors and some decorative textural elements. Open up whatever graphics program you have available (be it Photoshop, Fireworks, MS Paint, whatever…) and create an image of what you want to make the website look like. If you can’t create it visually, you’ll never be able to make it work in HTML and CSS.
If you haven’t already checked it out, the book I wrote for Sitepoint is basically a detailed explanation of the process I described above and I think it may be just what you need:
The Principles of Beautiful Web Design
http://www.principlesofbeautifulwebdesign.com
Best of luck with this and future projects,
Jason Beaird
I’m posting this here for two reasons:
I know there are tons of good resources out here on the web, but novice and wannabe designers have to sift through a lot of crap to find good, solid advice; especially within the personal blogs of designers like myself. I treat this website more like a personal journal than a design resource. I guess that’s because putting my thoughts in a textbox is a whole lot easier than planning out design tutorials. There are a lot of designers out there (like Veerle) who are constantly writing fresh, new tutorials but posts like that are few and far between here. I hope to change that here in the future, but in the mean time, I’ll probably keep pointing people to my book.
…and the number one reason why you should pay for stock photography: So you can get rid of that pesky watermark. Here’s a screenshot of a flash ad I spotted on allrecipes.com for the magic diet pill vendor curbyourcravings.com.
If you look really closely, you’ll see something other than a Hoodia patch plastered over this tummy:
Yep, it’s a watermark. And now that I know which stock phography site they stole the image from, it’s not hard to find the source image.
While Shutterstock operates on a membership fee rather than a pay-per-image model like iStockphoto, their prices are far from expensive when you compare them to traditional stock photography. I guess the moral to this story is pay for your stock images. Getting rid of the watermark isn’t the REAL number one reason to paying for good photos, but it will certainly keep you from looking like a cheapskate. If you don’t do enough design work to justify $199/mo for a membership to Shutterstock, then go to iStockphoto. If you can’t afford to pay $1/photo, check out stock.xchng, but don’t steal images.
Our shiny new Adobe Creative Suite 3 boxes arrived here at work yesterday and we while Micah was upgrading, something about the installer menu art immediately caught our attention. I’ll leave it up to you, dear reader, to let me know what you see in this image.
As far as I know, nobody has posted anything about this yet. So, just to be sure I wasn’t making a fool of myself, I asked a few random people what they saw in the image before posting this. Five of the eight people who I’ve asked so far immediately saw it. One person said “a crayon?”, but once I beat around the bush a bit, the universal response was basically “now I can’t NOT see it”. I guess what I’d really like to know is whether the designer knew what he/she was doing and how this got slipped in as the background image on the CS3 installer.
Still don’t get it? Click the image to see the original size.
Last weekend, Ames and I took a road trip down to Ikea in Atlanta to look at bedroom furniture and do some shopping. While we didn’t come back with any furniture, we did get a few Christmas presents and decor items for the house. While Ikea’s prices are great, their pictogram-based assembly instructions and product information can sometimes be hard to decipher. Below is the product information from a candle we bought while we were there. I think Ames and I figured out what all the symbols mean, but I thought I’d post it here to get some explanation as to why “Candle X” attracts dogs and boys, and exactly what time of day our new candle will gravitate toward our wireless router.

My boss asked me this morning if I had seen iconfactory.com lately. Both of us go there often to customize our icon sets and check out their awesome…stuff. Well, as of today, the site is down. In it’s place is a flipflopflyin style animated story. In it, the W3C, represented by a guy in a suit, pulls up to the factory in a black van. He gets out and yells for the staff to come out. He then walks with them around the factory pointing out <font> tags, <br>s, <table>s, and other issues. After mooning the guy behind his back…
…they begin to cry and head back into the factory to make some much needed changes. At least that’s how I interpret this silent movie. There are some 1-6 buttons at the bottom of the page which I assume will be future additions to this ongoing saga. If they are redesigning, I’m really looking forward to seeing what they come up with. It’s sure to be dripping with awesomeness.
Dustin Diaz’s latest post got me thinking about gallery websites and why they are so popular. I love to see the latest and greatest css designs at all the screenshot galleries, but many of those sites feature the same designs, and they’re marketed to the same people. I’m sure that the philosophy behind the maintenance of these projects is (at least partially) altruistic. They want to provide a resource to other designers and inspire creativity with a database of good design. The idea however, is not a new one.
Back in college, one of my first graphic design teachers was a guy named Jagdish Chavda. He was a snappy, and sometimes rude little Indian man…but he had a wealth of knowledge about graphic design. He was the kind of professor you either love or hate, and it looks like things haven’t really changed. One of the most useful “tings” he taught us was to create a morgue file whenever we worked on a large project. The concept is pretty simple. If you’re doing an illustration or marketing project that involves trains, you clip out and print up anything you can find that might give you inspiration and keep it all in a folder. Should you ever need to do another project involving trains, you’ve got lots of inspiration to pull from.
The morgue file idea kinda slipped my mind until a few years ago when I was working on a website layout. I found myself looking for a similar layouts to the one I wanted to create to see how other people handled the background textures. That was when I decided to start my digital morgue file. I started collecting images from the design interact site of the week, cssvault, and a few template sites. Easy enough, just save images to a folder on your computer. If you’re trying to save a lot of images though, it gets a little tedious. There are a bunch of tools out there to help you programmatically pull images from a website, but for OSX users, there’s already a powerful tool for that in your applications folder.
The program is called Automator and it has an intuitive and easy-to-use interface to automate just about anything. To get you started with your morgue file, and to help you figure out Automator.app, I’ll post some .workflow files below as I get a chance to create them.
PS - If you want to contribute an Automator script, or have any other good uses for Automator, please zip up and post a link to your .workflow files below.
I was assigned to design a couple 2-page print ads in Adobe InDesign on Friday. Even though I haven’t done any print work in a while, and haven’t used InDesign to develop anything that has actually gone to print, it wasn’t all that hard. Having a Quark background, and a ton of experience with Adobe’s other Creative Suite apps made working my design out a breeze, but when I was told it had to be compatible with InDesign CS I was a little confused. Illustrator CS2 lets you chose which versions you would like your document to be compatible with. Photoshop has that annoying “Maximize Compatibility” popup that lets you know the CS users will be able to work with you file. InDesign though, offers no hint on save whether or not an InDesign CS user will be able to open your work.
A little Googling revealed that InDesign CS2 is compatible with CS through the interchange format. Rather than just saving your file, you have to export it as an InDesign Interchange (inx) file. As long as the CS user has the plugin from Adobe, everything should be gravy. I emphasize should because this IS print design. Some designers are more leery of web design with all its little inconsistencies…not I. I’d much rather push around pixels than worry about how they will look in ink.
In other news, I have an official press release over at Erickson Marketing to go along with my official title of “Senior Designer”. It’s a little humbling to see “Mr. Beaird” spoken of so highly, but I really do look forward to growing into the 10-gallon boots they’ve given me to fill.
In scrolling through my bloglines this morning, I came across Jon's Hicksdesign family album - a screenshot history of his personal site. At the end of the post was a call out for all designers to bring their skeletons out of the closet, so to speak. "Ok," I thought, "I can do this." So I remoted into "The Box" at home and started browsing through my archives. Like Jon, I managed to find all but 1 of the previous incarnations of my personal site...and it wasn't pretty. In particular, the homepage that I created during my senior year of high school is REALLY BAD. So bad in fact, that it might make you wonder how I ever became a normal adult, much less a website designer. In the interest of inspiring the young, and preserving historical accuracy, here is the homepage that was once hosted on Geocities and the Pegasus servers at UCF from sometime in 1998 through about the middle of 2000:
This homepage came only a few short years after I discovered the internet in the form of dial up BBS servers and telnet. Back then, I dove head first into the web, starting my own BBS in Jr. High school and spending hours "on-line" playing ASCII and ANSI games like Trade Wars, Legend of the Red Dragon, and Kyrandia. These were the days when the whole world existed on Geocities, and Angelfire. Way back when my only real connection to the internet was through Net Zero (which I hacked to hide the ads), and when I was searching for the latest and greatest filters for Photoshop 4. Man, was I a nerd. A high school wrestling, grocery store bagging, Airwalk wearing nerd.

I loved doodling and creating digital artwork. I just didn't know a thing about art. When I started college at UCF, something changed in me. I got a proper education in art history, painting, drawing, ceramics, graphic design, and somehow the light bulb came on. I went from creating website designs like the one above and MSPaint doodles like that nice Spam image to producing gallery worthy artwork and website designs like the one below which I registered the name jasongraphix.com with in 2001:
I said before that I found all but one of the previous designs for my homepage. The missing link was a design that I came up with after the one above while I was trying to learn css. Inspired by meyerweb, stopdesign, and zeldman, I worked hard to merge my knowledge of design and color theory with this "zen art" of css design. After a short time, I gave up on that design, toyed around with blogger for a while, and eventually merged the structure of the layout reservoir's 3 column layout with my newfound skills with php and mysql to create my first blog in December of 2003:
I stuck with that design through graduation, and blogged with it for about a year. In October of 2004, I decided that I was starting to grow out of that shell. I had a much better knowledge of css, design, and programming, and my home brew blogging software was so under featured that it wasn't worth developing. I actually got to a point where I was too embarrassed to even post my domain on other designers blogs. That was when I started working on Jasongraphix v4, the 1900's theme you see below. Even though it was recently featured on CSSVault, I've had the design up since November of 2004. I really love the look, but as a designer, I'm cursed to always seeing where it can be improved. I would introduce it as the design you see here today, but I'm sure change is coming. Definitely not today, and probably not for a few months, but I'm itching for a redesign already. For that reason, here's a screenshot:
So, what kind of skeletons are hiding in your closet?

Remember that reading program from when you were a kid where they bribed you into reading books using Pizza Hut pizza? I do. I was a pizzaholic, and would do anything to get that fifth frickin’ star sticker on my pin so I could have pizza for dinner. My brother and I would stagger our reading so we could sometimes go out for pizza twice a week. Well it still exists! I can’t wait to have my own kids so I can con into reading too!
On a completely different note, an Amazon box showed up on my porch yesterday. In it were three books. One of them I’ve been told I need to have since college, the next one looked like it would be useful as well, but the third one is the reason I made my order in the first place. Sound familiar? This is about how every book order I make goes. I don’t order books all that often, so you won’t ever see a “Currently Enjoying” list in my sidebar but I thought I’d give you a rundown of each book and why I bought them.
Our small graphic design firm had been relying on the legal forms and contracts from this book for about one year. Finally, we decided that perhaps we ought to visit with a lawyer to make sure we were doing it right…$560.00 later for an initial consultation, we realized that this $29.95 book was the best business investment we’d ever made! The lawyer confirmed that the contracts that we had been using were airtight and were great (he had a few other pointers…but, none worth $560.00).
I’ve been averaging about 2 hits per minute since about 9pm last night when my site was featured at css vault. I know when I’m checking out sites at CSSVault, I want to know from the front page who the person is, what inspired them, and what I can learn. It’s kinda weird being on the other side of that, but as a result, I felt like you all deserve a quick welcome and explanation of my design.
The design you see here has been up now for about 4 months and was inspired mainly by a visit to a creepy old abandoned house in my hometown of Vero Beach, FL back in February of 2003. While I was there I found a postcard book filled with actual letters and postcards from the turn of the century. As a designer, I was amazed by illustrations, the worn edges, and the typography of these incredibly well-preserved artifacts and decided then to use them someday…somehow.

The picture above is an actual scan of one of these postcards. Seriously, no effects were added when I was saving this image- the wicked worn look is authentic. So that’s the look I was going for with the site. I wanted it to feel like a turn-of-the-century postcard, or a page ripped out of a Sears, Roebuck and Co. catalog.
In my professional work, I try to involve web-standards and eye catching design wherever possible and strive never to do the same thing twice. For those looking to my site for inspiration, my advice is to keep your eyes open. Good design can come from the least expected places, even a creepy old house.
There are few people who can inspire as much passionate commenting as Greg Storey. His latest post, Bronze is no exception. Today’s subject is the death of personal web design, or more accurately the lack of originality in personal web design. If you haven’t clicked the link and read the article yet, here’s a teaser:
In many ways I feel like designers, myself included, have dropped the proverbial sketch book and traded it in for Microsoft Word and CSS. We have stopped considering the form and function of a website in leu of focusing solely on content and comments. it used to be that a personal site, or non-commercial, was more free form in expression.
Although I have some issues with a few of Greg’s points, I sincerely agree with the article as a whole. I can see how it could be seen as flame bait for standards nazis, but perhaps the standards crowd has had too much influence on the indie web design scene. Perhaps this is also why Cameron Moll’s Wicked Worn Series has received so much love this year. I take the article for what it is, and as what Jason Santa Maria calls it, a call to arms.
As designers, we need to start looking for new inspiration:
I’ll be the first to admit that my main source of design inspiration for website design is other websites, but if that is the only place I am looking, things tend to get bland. I think that is the point Greg is making. Lets get back to the basics of color & graphic design theory, think outside of the box model, and look to alternative sources of design inspiration for 2005.
Note: I slipped a link in there to my article that was posted today at sitepoint: Color for Coders - Color and Design for the Non-Designer. Please take a look and post some feedback. I tried to make it simple enough for “the programmer guys” to understand, but I also tried to pack some real color and design theory in there.
Back in August, Cameron Moll hosted the first Screen Grab Confab. I happened to be working on expresssunglasses.com at the time and posted a screenshot. Well he's done it again, and this time I'm working on a design for another e-commerce site. This one doesn't have a domain yet, but it will be selling skincare products.
I have been planning since early April to switch hosting providers, redesign my website in valid xhtml goodness, and migrate over to using movable type. Well over the last few days, those plans have started to come to fruition.
I've got a new host with all the features I need with room to grow. I've got a fresh new site design that I can't wait to show off, and which I hope will be swappable in the future. And now, I have the domain transferred and name servers in place so I will soon be able to get movable type configured.
My old hosting account doesn't expire till November, so worst case scenario, I will drag out the rollover till then as I get my design tweaked and mySQL database squeaky clean. On the bright side though, I think it will only take a few weeks. Stay tuned for updates.

Update: I saw a lot of people getting 404s when being referred by Authentic Boredom so I set up this page so you all could find it instead of a search for: archive-ind.php?id=95
Couldn't help working on this. Cameron Moll asked if there was an easy way to create a star that tapers in instead of out in Illustrator like the one on the right. Here's an easy to follow 7 step tutorial. -Enjoy
Cameron Moll over at Authentic Boredom came up with a great idea yesterday when in his post, he invited his readers to post a 320x320 screen grab of whatever they were working on. With over 130 posted screenshots, I'd say everyone else thought it was a great idea too. I guess it's a little bit like group therapy for those confined to a monitor all day.
My post was a screenshot of an ecommerce website we're developing at Acceleration which will be selling sunglesses online.
Although I have the Adobe Fontfolio and other professional font libraries at my disposal, I still sometimes go looking through 1001freefonts or the other free fonts sites for a particular typeface with that good ole "free-font feel".
This usually results in my downloading dozens of strange fonts that I will probably never use. Today however, I found the perfect "Hello my name is:" font! It's called AlphaMack (Download: PC/Mac)and unlike the hundreds of other free fonts I've downloaded, I expect this one to go into my regular rotation.
At UCF graphic design we were taught that you either choose a job in web-design, in print design, or you go freelance to do your own thing. Being more interested in a steady salary than the "happy in charge" feeling, I went with web. Just when I thought I'd forever pledged my life to web-design however, I found that there are opportunities here and there to use the printcentric side of my education - you just have to take charge of them.
I just got back from approving a proof of a monthly newsletter that we're going to be producing to send out with the billing. Along with that, we're planning on putting together a tri-fold brochure for the company as well. Very Fun!
As a web designer, I often get requests to have certain text on a website in some specific obscure font. Although I consider myself a minimalist, I have a massive collection of fonts on my system. For some odd reason though, I never seem to have that requested font.
Instead of asking and waiting for the client to send me the font file, or buying them, I've discovered a new method of finding fonts online. Most fonts are of course copyrighted, so in order to find a font posted somewhere, you either have to think like a hacker, or think like a stupid user.
I like thinking like a stupid user myself, because there are so many more of them out there, and they make it much easier. All you have to do is Google the words "in order to view this site", or "if you see can't see this", or "this site uses", and the font name you're looking for and Viola! Todays example is Vivaldi. This font sells for $32 at font.com, or for free using the Jason method of Stupid User font providers: http://home.deds.nl/~pyter/home-index.htm