metaphor

Friday Focus 02/04/11: Realism

February 4, 2011 By Sophia Lucero

This week’s picks feature engrossing environments with stunning details and interactions. Design imitating real life is one of the oldest tricks in the book, but never goes out of style.

Designs of the Week

I like the use of custom textures and fonts everywhere, but the parallax effect that activates every time you move your mouse is a little dizzying.

Fashioned after real-life type drawers, the diversity of the woodgrain and nameplates combined with the subtle animations makes for a fascinating microsite.

Since this is a tumblelog, it’s a good idea to have markers for the different post types. In this case they differ enough but remain subtle. The datestamps throw in splashes of color to the dominant grays.

This site has all sorts of interesting design decisions everywhere you look. For instance, the portfolio is built like an iPad with matching user interface to boot. The photos section starts out as a stack of photos that sorts itself out once you click on it. The blog is literally a journal notebook. And so on.

Social Media Weekly

Typography – Eight Ways to Combine Typefaces
“While a lot of what goes into good typography is subjective, there are some guidelines that can point you in the right direction. From there, it’s up to you to experiment and try out different things.”

CSS – Current Color in CSS
“Borders always render with the current color when a border color is not specified, but, till recently, there was no equivalent term for that use – now we do: currentcolor.”

Friday Focus 11/05/10: The Great Outdoors

November 5, 2010 By Sophia Lucero

Imagery that will kindle your spirit of adventure is this week’s Friday Focus. After this, go outside and play!

Designs of the Week

The text section feels a little underdesigned against all the images, but the impression they make is great.

Nifty metaphor to use the water bottle as a completion status indicator.

It’s a really simple idea to integrate your logo into the design this way, but it makes quite the impact.

I like the vertical approach to this design and all the slanted edges.

Whimsical and light at the top, then futuristic and dark in the bottom? There’s a disconnect that isn’t too appealing.

I love how the illustration flies out of the content area, but I wish the navigation items had more contrast to them.

Not really the “fun” type of outdoors but look at all the nice little icons and patterns used here. The menu looks great!

Love the vertical parallax, and using paddles as borders is neat.

Just one of three exhibitions in typographic prowess; be sure to inspect every element.

Social Media Weekly

Design – Improving the Web for Digital Publishing by Adobe
“Check out a few of the prototypes we’ve been working on to improve webkit for Digital Publishing.”

Typography – Type-a-file
“I couldn’t find a simple css stylesheet that adhered to best typographic practices that anyone could just grab and run with. Type-a-file was inspired by—and is to be used in addition to—the famous meyerweb reset css file.”

CSS – !important CSS Declarations: How and When to Use Them
“Let’s take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them.”

CSS – Breadcrumb Navigation with CSS Triangles
“Did you know you can make triangles with pure CSS? It’s pretty easy. They are fun for all kinds of things, like little arrow sticking out from speech bubbles, navigation pointers, and more. One neat use that came to mind in this vein: breadcrumb navigation.”

CSS – Things Worth Noting About CSS Attribute Selectors
“This article will go a little further and focus on some interesting facts and bugs surrounding attribute selectors that you may not have known.”

CSS – CSS3 :target based interfaces
“The new properties in CSS3 give us more scope for creating more powerful design features with very little effort, many of which were previously only available through JavaScript or Flash. This example uses the :target selector, a healthy dose of CSS3 transitions and the general sibling combinator to create a modern user interface.”

JavaScript – Close Pixelate
“Inspired by American portrait painter Chuck Close, this script converts an image into a pixelated version using an HTML5 canvas element. It’s basically a simple demo for canvas’ imageData functionality.”

Friday Focus 06/25/10: Kid-Friendly

June 25, 2010 By Sophia Lucero

No, these websites aren’t just for the little ones, but their designs certainly have a child-focused appeal to them. Check out the elements that make up a Kid-Friendly look on this week’s Friday Focus.

Designs of the Week

One page sites usually employ a storybook approach to the design and content, and this is a perfect example: playful hand-drawn illustrations, bright colors, large text, and animations.

Kids prefer books with lots of pictures in them. Never skimp on illustrations, even with icons; it’s so much easier to skim a site than a book and those will hold your visitors’ attention.

This may or may not be intentional, but the ruler in the background and the giraffe instantly remind me of those height measurement charts. Clever and refreshingly unique metaphor.

My favorite part? The candy cane style arrows!

A little too wide for my screen, but all the details are stunning, especially the buttons.

An otherwise straight-laced gets a touch of whimsy with some Disney pixie dust. Still looks professional, but with a more interesting color palette.

I like how practically everything in this design is custom, and it’s just the body text that needs a little tweaking. The moving background gives depth.

An abstracted version of building blocks that behave like sheets of paper when hovered over.

There are different kinds of interactivity, but this is probably the most fun: letting you scroll through content using the milk delivery truck. Excellent typography and other detail.

This reminds me of those video game maps where you move from one location to another each level. Using sailboats as navigation markers is utterly brilliant!

Social Media Weekly

Design – Graphic Design Theory: 50 Resources and Articles

HTML – HTML5Rocks

CSS – CSS3 Animations, the Power Back to CSS Part 1: Transitions

CSS – What Does “width: 100%” Do in CSS?

Browsers – IE’s Compatibility Features for Site Developers

Friday Focus 05/27/10: In Your Face Illustrations

May 28, 2010 By Sophia Lucero

This week on Friday Focus: illustrations that appear front and center in these websites, because we want them big, bright, and beautiful.

Designs of the Week

Highly detailed and scrumptious “pie chart”! The colorful illustration style and metaphors all the way into the footer not only adds interest but are artfully done.

I just love a design that breaks out of the box. Once again this is a lovely work of art, with touches of calligraphy and fascinating shapes growing out of the swirls. The inside page design is more organized but keeps this look in the header.

It’s great that you can find lots of clickable elements in the illustration itself, and the metaphor really works. The hand-drawn, watercolor style carries over to the other page elements like the icons. I wish the form fields and buttons joined in the fun too.

The center-focused layout works well, as does the bold black text and buttons, greens, and oranges.

Showcasing your work in the biggest, widest way possible is a surefire way to set the look and feel of your site. In this case it’s spilling with bright pinks and trendy type.

Some quieter shades of pink in here but still striking. Notice the recycling of the hearts, stars, roses, and leaves in the rest of this one page site.

Super-wide layout with a sprinkle of parallax, -webkit-transform, and subtle jQuery hover effects. The most exciting portion is the contact form at the footer.

I love this sketchy look accompanied by a pattern of ocean waves. (You can actually download it as a wallpaper if you want.)

This isn’t a groundbreaking layout or look but it somehow feels different. A case of letting the picture speak a thousand works, perhaps?

Topnotch icon work and typography. Just look at it. The vignettes in the corners are a bonus.

Fantastic illustrations, but other design details fall a little short of its elegance and whimsy.

This one, on the other hand, overflows with whimsy! Nothing says it like a unicorn and a mustache sign in icon.

I like that the rabbit and its hole is a mini power line leading in to the next section’s boxes. The slanting boxes and buttons are great too.

Social Media Weekly

CSS – Efficiently Rendering CSS
“I admittedly don’t think about this idea very often… how efficient is the CSS that we write, in terms of how quickly the browser can render it?”

CSS – Using CSS3 Transitions, Transforms and Animation
“These demos are showing of CSS transitions, transforms (2D and 3D) and animations”

JavaScript – Javascript shorthand for cleaner code
“A few ways to save on some bytes in your Javascript code, as well as making it more readable and quicker to write”

Optimization – 46 CRO/Conversion Rate Optimization Resources for Web Design, SEO & Social Media Experts

Friday Focus 08/14/09: Sewing & Crafts

August 14, 2009 By Sophia Lucero

It’s Friday once again and this week on ‘Focus we’re looking at very “domestic” looking sites, like they were put together with fabrics, thread, and craft supplies!

Designs of the Week

This site is a prime example of a successful collaboration from concept to branding to execution. “Stitching” together a feed is a great metaphor, and consequently a great brand name, and now a great site design. This site is cheerful, has the right amount of texture, and will leave a good impression on those who visit.

Beautiful typography, color combinations, and graphic details. The etched text effect here doesn’t look forced as it fits the look perfectly. Perhaps the only thing I’m not 100% keen about (just 99%) are the icons used. They’re a bit impersonal and out of place considering how homey and crafty looking this site is.

Now this is what you call coming up with an idea and running away with it! The use of real fabrics, embroidery, and other sewing materials are just a joy to look at.

Great use of whitespace in the header. The image carousel is great too—gives a nice, 3-dimensional feel to it, even if they’re just images. And the zigzag edge effect (like they were cut by pinking shears) found at the top and bottom keeps the look consistent.

I very rarely feature Flash sites here, but this one’s nice enough: it has permalinks, which makes inner pages more accessible and navigable. Aside from the background and broken line borders, the animated transitions for each section of the site look like you’re flipping through a collection of fabric swatches, completing the metaphor.

The subtlety of the site’s design—subtle hues, subtle gradients, subtle edges—is what makes the look so delightful. And it pays to have a mascot, especially ones that interacts with you. Hoot!

Social Media Weekly

Design – The evolution of web design
The kind of history lesson us web designers need.

CSS – Away With Widths / Use and Abuse
An in-depth discussion about the right way to declare widths in CSS.

CSS – CSS Deconstruction: Atebits
Take notes on all the little details used to built Atebits.com.

SEO – Optimize your crawling & indexing
Google gives advice on optimizing website URLs

Friday Focus 02/04/11: Realism

Designs of the Week

Social Media Weekly

Friday Focus 06/25/10: Kid-Friendly

Designs of the Week

Social Media Weekly

Friday Focus 05/27/10: In Your Face Illustrations

Designs of the Week

Social Media Weekly

Friday Focus 08/14/09: Sewing & Crafts

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Search