background

Design Focus: In Depth

February 17, 2015 By Sophia Lucero

The sites featured this week also play with perspective & depth, prominently distinguishing between foreground & background, particularly when one moves the mouse.

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.

Each project is a screen of content with a matching color palette, with the description area acting as translucent glass overlay. There’s something quietly elegant about the details here.

Here it’s the layers of circles that move corresponding to the cursor, and you can see it as a repeating graphic element in other places. Unlike the previous design this is quite bold and may even come across as “young”.

All the other objects here blur out of view when you hover on something, then present extra details. It’s probably the most realistic presentation of a 3D space with its freeform images and layout.

Social Media Weekly

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

Typography – Modular Scale

Responsive Web Design – Responsive Navigation for 73+ Languages

CSS – Easy Textures with CSS Masks

Friday Focus 05/13/11: Isometric Buildings

May 13, 2011 By Sophia Lucero

This week’s designs feature illustrations with the isometric perspective in them, giving the sites an interesting birds-eye view.

Designs of the Week

I like the idea of centering a conference website around a week, instead of the regular schedule-speakers-venue-register variety. Of course it’s a trade-off, but in this instance the brand was centered around the “week” so it follows.

Using moving clouds in the background is pretty predictable, but combined with the perspective of the buildings, and mountain illustrations on several pages, it makes sense to feel that you’re high enough in the air to actually be going through them.

Even more clouds in this design, but what’s great is that they’re used everywhere, as backgrounds for event icons and other content boxes. This is topped off with a nice fly-in animation when you load each page.

Social Media Weekly

HTML The hgroup hokey cokey
“To offer a quick recap, hgroup was removed from the W3C specification only (not the WHATWG spec) by Hixie at the request of Steve Faulkner. The co-chairs requested the issue be reverted following multiple requests from the likes of Tab and Tantek. The current status at the time of writing is that hgroup is in the spec.”

Accessibility, HTML, CSS, JavaScript – Front End Development Guidelines

CSS – Holmes: The CSS Markup Detective
“Holmes is a stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.”

Friday Focus 04/15/11: Moving Backgrounds

April 15, 2011 By Sophia Lucero

This week on Friday Focus, we’re looking at some sites that employ subtle, unobtrusive animation in their backgrounds.

Designs of the Week

I like the mix of textures going on here, from the scan lines to the paper backgrounds to the pixel waves. Too bad the moving clouds don’t happen on every page.

Excellent illustrations and cheerful vibe. Interesting choice to put the navigation items at the top right rather than the usual top left. I kinda wish the “launch video” could keep playing as the launched site loaded!

The map/nautical theme is getting more and more popular. The best part of this site has to be the contact form, particularly the way you submit by affixing a stamp to the postcard.

Social Media Weekly

CSS – Simplify Your CSS With the any() Selector
“This structural nesting makes it considerably more complex to target groups of tags in CSS.”

Typography – WhatFont Bookmarklet
“You can easily get font information about the text you are hovering on.”

Programming – What skills do self-taught programmers commonly lack?
“Or, to put it another way: What should a self-taught programmer study to get up to speed with his/her formally-educated peers?”

Design – The Cicada Principle and Why It Matters to Web Designers
“When you notice a distinctive feature — for instance, a knot in some woodgrain — repeating at regular intervals, it really breaks the illusion of organic randomness. Maybe we borrow some ideas from cicadas to break that pattern?”

Friday Focus 01/22/10: Folded Out and 3D

January 22, 2010 By Sophia Lucero

This week on Friday Focus: these folded, boxy 3D-looking designs pose an interesting challenge to the designer in creating perspective and breaking out of boundaries. See how these websites did it!

Designs of the Week

Big, colorful, chunky, and grungy. It almost feels wrong to see “normal” sans serif text fonts here and there!

I like the use of the elegant type and wallpaper background against the less elegant ropes, folds, and tears that (which all are done in moderation).

The shadow is not so believable, but I like the look. It’s quite different from the other folded/blocky/3D ones that focus on adding folded ribbons and boxy-fying things up.

Love the icons and the color palette.

The W3C has its own subtle application of the design pattern. Clean, clear, and lovely.

Cute little chimney effect (that isn’t Flash) going on in the header. The design looks a little busy, but I like it.

Now for something unbelievably simple, but still striking and attractive. One of those designs where the design practically goes unnoticed because it’s so subtle.

This isn’t a particularly attractive site, but there are enough attention to detail and typography that gets the job—of making the stories readable—done.

It’s been a while since I’ve seen a super shiny, “Web 2.0”-style design. Bring on the pastels!

I think it makes sense for the design to be so gray and dark because the backgrounds in the gallery are so colorful.

When you’ve got products presented in boxes, a boxy-looking design feels like a natural progression, doesn’t it? What I really like is the footer treatment, which looks like a few sheets of paper with two angling out of place. Not necessary but a very nice touch.

Social Media Weekly

Design – Crafting Subtle & Realistic User Interfaces

Design – Unity In Design: Creating Harmony Between Design Elements

Design – Realism in UI Design

Optimization – How to reduce the number of HTTP requests

CSS – How To Create Depth And Nice 3D Ribbons Only Using CSS3

CSS – Keeping Safari (and Chrome) Hacks Out of Your Stylesheets

Friday Focus 12/04/09: Swashes, stripes, swirls

December 4, 2009 By Sophia Lucero

This week on Friday Focus: websites adorned with colorful, abstract flourishes that give movement and energy to the designs.

Designs of the Week

No boxes, barely any straight lines. Just areas of content and the graphics to distinguish the header and footer areas.

The striking graphics here aren’t really part of the overall design but of a specific featured article, and you can expect things to change when the site author publishes a new one. This “art direction” trend/idea is really popular now and a great source of new, ever-changing site designs.

The design needs just a little bit of refining but overall, fun to look at! Check out the icons in the inner pages.

A great photo, a color you can’t go wrong with, and some wavy silhouettes to soften things up, and voila. Stunning.

What I really love here is the way the right-side menu was designed. Which is why I’m disappointed the left-side menu doesn’t match. Or why there are two menus on either side like that. Also, there are several fonts used on the site; it can stand to be a little more consistent.

The spacing is a little too tight, and the custom font in the pullquote is not very readable, but other than that I like it.

I love how there’s exactly one decorative graphic in the foreground, like a sculpture of sorts. The background pattern is strong too, but not to the point that it’s distracting.

Social Media Weekly

Design – Oldest Design Galleries

Optimization – The real world costs of an heavy website

Business – Contracts 101 – Part 1: Outline

Design Focus: In Depth

Designs of the Week

Social Media Weekly

Friday Focus 05/13/11: Isometric Buildings

Designs of the Week

Social Media Weekly

Friday Focus 04/15/11: Moving Backgrounds

Designs of the Week

Social Media Weekly

Friday Focus 01/22/10: Folded Out and 3D

Designs of the Week

Social Media Weekly

Friday Focus 12/04/09: Swashes, stripes, swirls

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

4 Tips to Personalize E-Commerce Websites

Search