Even though this website was launched only very recently, I’ve gotten a lot of positive feedback on its look. I’m relatively happy with it as well, but that was no easy task. If any of you have ever worked on a personal project, you’ve probably already learned that you are your own worst client. When you have no deadlines, no rules, and a huge imagination, it can be pretty tough to settle on your final look. You might start on one design in the morning only to immediately throw it away and start from scratch that afternoon. This post is dedicated to all of my wasted ideas and productivity, and hopefully some tips on how you can avoid a similar situation in the future.

Start With a Brief, Don’t Be an Idiot

One way to avoid an insane amount of redesigns is to treat yourself like your own client.  What are your goals, what is your target market, your intended ‘look & feel’ ? If you start with a vague idea like ‘Website about art something’, you may find yourself spending days and weeks on projects that will never see the light of day. I believe I started on the right track by thinking about my goals. Here are some key ideas/features I knew I wanted:

• Full WordPress integration. I wanted to handle all of my content, including my portfolio, quickly and easily from any location.
• A slick & memorable design that was still easy to read.
• Black and yellow. Like Batman. Seriously.
• Community features. This means a quick and easy way to comment on posts, because it’s fun to talk to my readers. It also helps me avoid sitting alone in my apartment and talking to my food.
• Integrate my design portfolio.
• Any name that’s better than ‘Loukotka’, yet felt design related.  You’d be surprised how many Google searches spell my name wrong, so this site is meant to be easy to remember and spell.

The problem was that my goals changed over time, and I should have stuck to these principles instead of designing away like a mad man. There’s plenty more ideas I could list, but let’s get to what’s important—images of all of the designs I didn’t use or show anybody, because I went insane and couldn’t settle on the right look.

A few months ago this was my first attempt at a design thought. I started blocking out areas of yellow or black, but immediately discarded everything because an all yellow website would be pretty tough to read.

This was an experiment with a minimalist look for my portfolio, but I quickly realized that dark and empty weren’t at all how I wanted my new site to feel.

Now we’re getting somewhere. This design borrows the background and name of my other website, Loukotka.com.t the time, my portfolio website was green and white, so I found this color change refreshing. Ultimately this felt too much like a showcase and less like a blog or valuable news source. This version was scrapped for the blog, but I used its ideas in the current version of Loukotka.com.

Another radical shift in thought. I was definitely digging the white with the yellow, but still felt the horizontal slide areas would only work for a portfolio, and not for an interactive blog. I even decided on the name “Neverlens”. I bought the domain, only to trash this name much later due to its similarities to “Neverland” and “Netherlands”. Oops.

I stuck with the name for a while and eventually continued down the “yellow brick road”. This version was grungy, and incredibly yellow. This certainly was memorable and open, so I explored it further. This is also the first design that actually contains some element of the current site (a small sliver of the textured header bar).

This design probably had more time put into it than any of my other trashed designs, and for good reason.  It’s strong, memorable, and edgy. My ‘home’ icon had a picture of the White House, and I had a really slick typewriter for my ‘need work done?’ link. For a while I was in love with this, but sometimes designs have to be scrapped because they don’t complete your goals.  This was visually interesting, but I felt like the strong colors and silly icons made the site feel like it was advertising itself.  This structure works great for a company, but if I added blog posts to the design, they’d have to compete with my own header for attention. I realized I had to give my written content a lot more focus.

I toned down the colors to a cool-gray. This certainly would help give focus to the written content, but I still didn’t want the structure of my site to be dictated by its textures. The background looks great, but it was quite large and would still compete with everything I was going to write.  I want to go to a blog to read articles, not to stare at a stone wall.  At least, that was my logic at the time.

I knew I was getting close here. This design gave a lot of weight to the logo, but still allowed the reader to easily jump over to reading the post.  You could navigate easily, read easily, and it still had some ‘batman’ feel with the logo.  That said, I was still mourning the loss of my previous designs, and knew I needed a little texture to bring it to life.

The name Fringe Focus is born. It’s easy to say, spell, and remember. But the site was feeling a bit too black and white—where’s my yellow?

Yeah, that’s it.

Have Hope, You’ll Finish it Some Decade.

Obviously seeing this many redesigns might not be the most inspiring moment, but I assure you there is an end in sight. If you’ve redesigned something a million times, take a moment to step back and look at those designs collectively (assuming you’re saving all of them, as you should be).  Identify the traits you like in all of them, and eliminate whatever seems to be bringing them all down.  In my case, it was that I hadn’t made my content the focus of the design.  In your case, it could be anything.  Your designs could be too bold, too timid, too warm, too cold, too crowded, too open, red fish, blue fish. Yes, that’s a Dr. Suess reference.

Even better, have your friends or other designers take a look at your past attempts.  Perhaps they will see the value in something you previously wanted to throw away.

In the End, It’s About Goals

If you spend all of your time randomly designing, hoping you’ll magically hit the right look, it may never happen.  Break out the paper, or the text editor, and write down what it is that you’re really after. Make your next design meet all of these goals (it is possible), and make yourself a drink with an umbrella in it.  You’re done.

If you’ve designed a website in the past decade (I know, there aren’t many decades to choose from), then you’ve probably run across a situation where you needed an image with transparency. Perhaps you need to see the background through the image, or the image has gaps that need to be transparent. Even more often, you’ll have a relatively solid image, but with complex edges that simply won’t work in a big rectangular JPEG. Logos and other design elements that might move when the browser window is resized, often need transparent edges to look right no matter where they are on the page. Fortunately all of these problems, as you may know, have already been solved with the development of the .PNG image format.

So we’re done! No tips, no tutorial, PNGs have saved the day! Not exactly.

The Pros of the PNG

• Full range of opacity (0%-100%)
• Full range of color (16.7 Million, anyway)

The Dirty Secrets (Cons) of the PNG

• Relatively large file size
• Doesn’t support blending modes
• Doesn’t work in IE6 (If you care about that ugly monster)

These points only apply to 24-bit PNGs, as 24-bit PNGs are the only common format to allow full alpha transparency. Its younger brother, the 8-bit PNG, doesn’t share the same problems (but only supports binary transparency).

Whoa, alpha binary what? Bit? Slow down Star Trek!

Alpha transparency, in short, is the kind of transparency you’re used to in Photoshop. There are varying degrees of opacity, that are all mapped in an alpha channel, those black and white images in your channels palette. PNGs include an alpha channel, so any given pixel in the image can be any given opacity (0%, 32%, 99%, etc.). This is great for shadows, glows, or anything translucent.

Binary transparency, is when robots are invisible. Actually, it’s what it sounds like. Binary means you have two options: 1 or 0, on or off. The same goes for the opacity in a binary transparent image. A pixel is either 100% visible, or totally off. 8-bit PNGs, and GIFs support this simple level of transparency.

Lastly, we won’t get into too much math here, but 24-bit ultimately means the image contains the full range of color data for all 3 color channels. 8 bits of red, 8 bits of blue, 8 bits of green. Add that up, and you can see why it’s 24-bit. 8-bit image formats only support 256 colors, while 24-bit image formats can support 16.7 million.

Problems with your 24-bit PNGs

Obviously full alpha-transparency has its benefits in web design. But with great awesomeness, comes great file sizes. Alpha transparent PNGs are often three or four times larger than their binary counterparts. If your logo, borders, backgrounds, and sprites are all huge 24-bit PNGs, loading times can get slow… fast. While internet speeds are increasing, and this may not seem like a problem, the speeds on mobile phones, netbooks, and 3G wireless networks aren’t quite there yet.

Additionally, it is rarely the case that alpha transparency on its own will solve our design problems. With all of the beautiful uses for the overlay, screen, or multiply blending modes (to name a few)… simply having an image at 50% opacity might seem a little boring.

Old School 8-bit to the rescue!

While alpha transparency is definitely helpful in some cases, let me show you my process for making 8-bit PNGs or GIFs look just as good, at smaller sizes.

Let’s say you wanted a logo to appear on top of a grungy background like the above image. We have a logo with blurred edges, that needs to show strong detail behind it. A 24-bit PNG would certainly do the trick, but we can show all of that detail in an 8-bit PNG or GIF with a few simple steps.

1. Turning off your background layer, your first assumption would be that this image couldn’t possibly work with binary, jagged edges.  Let’s try…

2. Go to File > Save For Web & Devices.  Under presets, choose 8-bit PNG.  Make sure ‘Transparency” is checked.  Then choose a matte color, in this case, black.

3. This is close, but pretty janky.  Even if that black was a little lighter, you’d still not be able to see all the texture in between the letters.  So let’s try something better.

4. Select the logo layer’s alpha by Ctrl+Click-ing on that layer (that’s Cmd+Click on a Mac obviously).  Then copy the merged layers by hitting Shift+Ctrl+C (Shift+Cmd+C for Macs). Open a new file, and paste the merged logo there.

5. Now that the merged file is pasted here, you can see that some of that background data was pulled.  But simply saving the image with no matte would still cause problems, so we first have to bring all of the opacity up to 100%.  Do this by Alt+Click-ing on your logo layer and dragging up or down.  This creates a duplicate of your layer.   Now that you have two copies, select both of the layers by Shift+Click-ing on each of them, and then merge them by hitting Ctrl+E (or Cmd+E).  You now have one slightly more opaque version of what you had before.  Repeat this process four or five times.  Duplicating, merging, duplicating, merging, duplicating, merging until you see that the image is 100% opaque.

6. Your image should now have a janky, but detail rich fringe matte (no pun intended). Go ahead and save it out as a transparent 8-bit PNG, or even a GIF if that floats your boat.  Keep in mind 8-bit PNGs generally have smaller file sizes than GIFs.

7. Voila! You now have a relatively tiny, 8-bit PNG looking just as sexy as its 24-bit counterpart.  Of course, this technique only works if your background stays stationary, but if your background was a horizontal or vertical gradient, then these steps would still work.

Go ahead and try this with your navigation menus, sprites, or borders.  It can save countless kilobytes!

If you have any additional tips, ideas, or thoughts about image transparency, drop me a line in the comments.