birds

Design Focus: Of A Feather

November 13, 2012 By Sophia Lucero

In the spotlight this week are designs incorporating illustrations of birds in them. Let’s see how these sites featured our feathered friends.

Designs of the Week

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

I love the stylized clouds and the literal electricity lines that pass through them. There’s also a wonderful parallax effect idea at play here: as you scroll down the sun in the background “sets” and moves down with you. When you get to the bottom, there’s a moon on the right side that rises.

Experiência Lecom website — Experiência Lecom

Another set of beautiful illustrations here, with the birds being accompanied by other flora and fauna. When you go to another page the background shifts sideways, making for an interesting transition effect even if the layout is your usual vertically scrolling site.

Stitched backgrounds, clothes line, horizontal transitions… these three sites seem to be inspired beyond avian themes. Even the fly-out menu carries a similar look as the main content area.

Social Media Weekly

Ready to go out and design your next website? Try building with the Catalyst Framework.

Responsive Web Design – The Responsive Designer
“I’ve been thinking that if the websites we are all building now respond/adapt to their surroundings and whatever device or screen size is thrown at them, then shouldn’t we as designers be more like this also? Shouldn’t we be more comfortable in adapting to every new project or challenge that comes at us?”

JavaScript – Writing Fast, Memory-Efficient JavaScript
“While it’s possible to develop large-scale applications without a thorough understanding of JavaScript engines, any car owner will tell you they’ve looked under the hood at least once.”

CSS3 – CSS3 Image Filters
“CSS3 comes with image filters like contrast, brightness, blur, saturate, Blur, hue-rotate, Sepia, Brightness, Contrast, Invert, Saturation, Greyscale and a few more.”

Web Design – Blame the Implementation, Not the Technique
“There is a fundamental problem with this line of thinking: it places the blame on the technique instead of the way the technique was implemented. Generalizing in this way discredits the validity of an approach based on poor execution, and that’s a very harmful way of thinking.”

HTML5 – HTML5 mythbusting
“The ongoing discussion about the “readiness” of HTML5 is based on a lot of false assumptions. These lead to myths about HTML5 that get uttered once and then continuously repeated – a lot of times without checking their validity at all.”

Web Design – Portfolios on the Web
“This isn’t how I want my work to be shown. This isn’t how I’d want to be shown anyone’s work. Browser screenshots? Please. Videos? Not everyone will browse my projects the same way. It was then I came to a scary realisation.”

Friday Focus 06/17/11: Owly

June 17, 2011 By Sophia Lucero

This week’s Friday Focus features not just any kind of bird, but owls. They’ve been used everywhere from personal portfolios to mainstream portals and we’re going to check them out.

Designs of the Week

I remember this site having a different owl a year or so ago, but this guy’s whole brand revolves around them. I like the detail of the RSS ribbon at the top right—it actually looks like felt to me. I also like how the fine borders cross and run from top to bottom.

Lovely illustrations, and it’s nice that they’re on a textured paper background. Not too fond of the Times New Roman font choice but it seems a bit popular on author sites. Just one little quibble: it appears that body text and link colors are used interchangeably throughout the site, and that makes for a very confusing experience!

I like the uneven gradient of the navigation, looks randomly generated. Nice copy and tooltips as well. I wish there were more orange in the rest of the site though.

In sites like these, there will hardly be integration with a a graphic and the layout and design concept, so colors are the bare minimum way of coordinating. Clean solid lines all around.

Probably the poster child of this week’s bunch and one we’ve actually featured before, but’s been redesigned since. Not drastically though. There’s a new owl illustration, but the color palette, soft shadows, scallops, and clouds remain.

Social Media Weekly

CSS – A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
“For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup.”

Accessibility – Accessibility and HTML5 Block Links
“HTML5 has many new elements and features. One of these is block links—we have the ability to wrap a link around block level elements. Here we take a look at the impact that this can have on accessibility.”

Javascript, Optimization – One script, seven ways
“Refactoring is also an effective way to share knowledge, particularly if you pair with someone more experienced while you do it. The goals are already defined and understood – you can see how it works, so you’ll know when the new version does the right thing.”

Friday Focus 07/24/09: For the Birds

July 24, 2009 By Sophia Lucero

This week’s Friday Focus features designs with pretty little birds in them. (No, this isn’t another collection of Twitter-related sites—only two of them are.)

Designs of the Week

Illustrations are inspired by origami and papercraft, animations are done purely in JavaScript. Pleasant and brilliant.

I love the mobile motif here—everything is hanging onto something until the very end of the page. Great concept for an online shop.

I like the illustration style here because it’s more cartoony instead of delicate and craft-y. And it seems dotted and dashed lines are all the rage these days.

I like it when sites go all out on a metaphorical design. This one has the content floating on ice!

Two things about this site mask how simple it looks. First, the hawk looks stunning—big, bright pink, and detailed. Second, the illustrations (aka Twitter backgrounds) listed on the site speak for themselves—if you’re designing a portfolio, do the same thing.

Some of you might have to squint to see the birds, but I appreciate the subtlety while still paying attention to detail—you can play hangman (or is it hangbird?) on the site! They’re all over the place, though, so you will enjoy their company.