Devlounge

Design, Develop, and Grow

Friday Focus 04/23/10: Breaking Boundaries

By

This week’s crop features designs that literally break out of the box. Time for this week’s Friday Focus!

Designs of the Week

Third and Grand

When you’ve got an ampersand as lovely as this one, why not flaunt it, right? I like the touches of handwritten type and what looks like a topographic map pattern in the background.

PlanMySite

The (crazy?) 3D arrows are a good way to call attention to important parts of the page, and thankfully were used sparingly. I dig the ragged-edge flyout menus for the navigation—what a nice change from the usual same-width ones. Though I think the icons under the services section is drowned out by the stuff around it.

Mr. Joe Payton

It’s a little cramped in some areas but has lots of whitespace in others. The illustrations are fantastic, especially the one in the footer!

El Juego del Mundial

Beautiful, and everything fits in nicely.

hm-andrei.ro

I’m enjoying the collage look here—it looks different and not so “craft project”-looking, maybe because of the photographs. The effect in the navigation menu is great too.

Fundo los Paltos

I seem to be on a roll with excellent navigation menu designs; go check this one out too. The detail on the photo frames are fantastic, with avocados and grapes on the corners.

Social Media Weekly

Programming – A pixel is not a pixel is not a pixel
“These pixels have nothing to do with the actual pixel density of the device, or even with the rumoured upcoming intermediate layer. They’re essentially an abstract construct created specifically for us web developers.”

Programming – Everything you Know about Clearfix is Wrong
“It really depends on the layout and the styling of elements. You might go from “uh oh!” to “WTF sacrebleu!”?.”

Design – Smaller PNGs
“I’m not in the practice of using Fireworks, so those of you who do can start gloating now. But as I thought about the problem a bit, I remembered that Fireworks has a few more options. Specifically, I remembered that you can save out 8-bit PNGs with alpha transparency, which seemed like the right mix.”

Do you use PNGs?

By

For the longest time, I stayed away from using PNGs (Portable Network Graphics) because of the lack of support for it on Internet Explorer 6. Supposedly superior to GIFs- offering smaller file sizes and support for more than 256 colors- it was frustrating to not be able to use PNGs and many others agreed with me.

As we near the end of 2009 now, I wonder: is it safe to use PNGs?

Because IE6 doesn’t support it, the first question has to be: how many people are still using IE6? Here’s a recent screenshot from w3schools,

browserstats-2009

that shows 10.6% of IE6 users last month. The number is certainly dwindling, down from 18.5% at the beginning of the year- but is it small enough to “forget” these people?

Not that you have to forget them: we can:

Either of these methods might very well work for you, but they’re still added steps and added code, just to be able to use PNGs.

Designers, is it time to go all-out with the PNGs? Do you use them exclusively or in conjunction with GIFs and JPEGs in your designs?

Friday Focus 02/27/09: Peeking Through

By

Transparency, translucency, opacity: we have designs that are peeking through this week on Friday Focus.

Designs of the Week

Seven Sparrows

The combination of robin’s egg blue and bird silhouettes is becoming more popular these days—dare I say because of Twitter, but this design is beautiful in its own right. I love the treatment on the hyperlinks, a graphical element also found in the logo, the “contact me” sign, and the handwritten blurb.

Centrul Crestin Caleb

If you’re playing with transparency, why not use a striking background image that’ll show through? I like that the logo is centered at the top, while the background is a one-point perspective shot. Great warm hues, too.

166 Perry Street

Interesting use of the coverflow effect: instead of scrolling vertically, you’re browsing through a virtual stack of pages. (Not exactly sure why, but it makes for an interesting experience.) The changing background colors are an interesting touch.

Peter Pearson's Design Portfolio

So where’s the use of transparency here? It’s not very obvious, but when you use the javascript scrolling effect by clicking on the arrows, you’ll notice that striped wavy lines seem to fade in and out. Now that’s an interesting use of an overlaying translucent PNG which also doubles as a transition animation as you move from one screen to another. Bravo!

Social Media Weekly

Design – 7 Interface Design Techniques to Simplify and De-clutter Your Interfaces
Because simplicity is always trickier than complexity.

Programming – 7 Fresh and Simple Ways to Test Cross-Browser Compatibility
From screenshots to actual apps, ensure your sites are working to the T with these tools.

Friday Focus 08/01/08: Flash-Based Sites

By

It’s August already and we’re kicking off our first Friday Focus of the month with some Flash-based sites.

Designs of the Week

The 3D art here is superb, but what I enjoy most about this site is the floating effect achieved through continuously moving elements, like the hot air balloons, the rays of light, the flock of birds, and the sliding effect that loads the text.

Tonik Gym

I like that this layout is tilted—Flash gives you the liberty of doing that. I also like the feeling of “stiffness” from the graphical effects as it goes well with the theme of the website.

Trinity Lutheran Church

What a sleek site. Narrow type and neutral hues give it a modern yet dignified look. But it’s the beautiful photography that adds flavor to each section. Sometimes all you need are nice pictures.

Social Media Weekly

Design – 400+ High Quality Patterns
A huge collection of patterns all ripe for the picking.

Programming – Unit PNG Fix
Here’s another solution to the PNG transparency problem in IE6. A very compact and easy to install script.

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge