hand-drawn – Page 2

Friday Focus 07/16/10: The Many Faces of Paper

July 16, 2010 By Sophia Lucero

The many different textures, colors, and treatments for paper allow infinite possibilities for their use in websites. Not one of these designs look remotely alike, and that keeps things very interesting. Happy Friday Focus!

Designs of the Week

Great idea to do a slideshow that spans the whole background. Looks much less artificial that way.

Everything looks impressively blended in: the logo, Facebook icon, drop-down navigation menu, and tabbed navigation.

Needs refining, but looks pleasant.

Love the navigation background as a torn section of the paper, and you can see the brown wallpaper pattern peeking through.

Excellent hover effects and that overall “big” and “scrapbook” feel.

Love the glowing flame on the logo and the large navigation. I just have some issues with the text padding in the inner pages.

Delightful, delightful details. Love the custom borders most of all.

I like the way the borders and section headers blend into the paper, like faded newsprint.

There are tons of paper textures, but few bother to design with corrugated paper. Especially this way, with the cutouts, layers, and shadows.

A visual and literary feast!

I think it’s great that the video thumbnails have frames that echo the overall look, and the video player interface almost disappears from view.

The page title isn’t so prominent, and there are no visual cues for the navigation in the header, but all the collages look fascinating, if a little overpowering.

Some alignment problems here and there, plus the map background image is a little distracting (could be lighter or darker), but good call on the drop down menus.

I really like the styled translation/localization flags! And pretty much every detail on this site—everything falls into place nicely.

The detail on this design is great, although the font choices for the headers are a bit tired. Not pictured but the animated thing going on in the footer isn’t as refined as the graphics above, looks awkward.

The shadow is a little too heavy, but the tabbed slideshow looks amazing, perfectly blended! Using the red wax seal effect for the social media icons is a good idea too.

Social Media Weekly

Design – Code an Email Newsletter from PSD to HTML

CSS – Vendor prefixes—what happens next?

Design – Zappos.com redesign case study

CSS – CSS Media Queries & Using Available Space

CSS, Typography – Font metrics and vertical space in CSS

Typography – FontShop Education

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 06/11/10: Follow the Arrows

June 11, 2010 By Sophia Lucero

We have some interesting uses for arrows in this week’s batch of designs. Let’s see where they take us.

Designs of the Week

I like screen-high, hairline-thick arrow that appears on hover. The navigation and the subtle animation on the link hovers is great too. And don’t forget the stunning type on the front page!

Simple design concept but looks beautiful. Here the arrows are section markers and lead you back to the top. I wonder why I’m only seeing this design element now.

The hand-drawn arrows and text links add transitions from one section of content to another. It’s a good alternative to the fixed navigation on top.

Where are the arrows on the page? I can count six! Great way to lead the eye and match the elegant look of the site, is it not?

Arrows for every step of the way. The list needs better alignment but other than that, the infographics are well done.

Hiding the arrows when there’s nothing left to browse is a good idea.

Interesting slideshow effect here: instead of the usual horizontal scrolling, this one goes diagonally. I wouldn’t say it’s more effective, but it certainly different.

Social Media Weekly

CSS – CSS Sprites w/out Using Background Images

JavaScript – Inline Expansion – Why And Where To Use It

Design – 6 Apps for Collecting Digital Inspiration

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 05/21/10: Neutralized

May 21, 2010 By Sophia Lucero

I’m seeing a lot of sites whose color palette consists almost exclusively of light grayish, brownish hues. Sounds boring? No such thing for a smart designer.

Designs of the Week

Social Media Weekly

CSS – 13 Pure CSS Techniques for Creating JavaScript-like Interactions
“Here are 13 tutorials that teach you how to push the limits of CSS and make it do things that we’re not accustomed to it doing.”

HTML – The Origins of the <blink> Tag

Typography – 10 Great Tips For Improving Your Web Typography
“Once a specialist occupation, the digital age has opened typography to computer users and web designers. When creating pages and laying out text with other content there are several guiding principles that designers should bear in mind.”

Bloggers – The History of Web Design Blogs
“Although the article may seem rather subjective to you, we hope that it will give you at least some basic understanding of how it all started and evolved into its current state.”

« Previous Page

Friday Focus 06/25/10: Kid-Friendly

Designs of the Week

Social Media Weekly

Friday Focus 06/11/10: Follow the Arrows

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 05/21/10: Neutralized

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Larissa Meek

Search