Responsive Web Design – Fanfare for the common breakpoint
“I don’t think it’s desirable to have a “standard” handful of screen widths, any more than it’s desirable to have a single rendering engine in every browser (yes, I know some developers actually wish for that: they know not what they do).”

CSS – Linear Gradient Keywords
“Linear gradients in CSS can lead to all kinds of wacky, wacky results—some of them, it sometimes seems, in the syntax itself. Let me note right up front that some of what I’m talking about here isn’t widely deployed yet, nor for that matter even truly set in stone. Close, maybe, but there could still be changes. Even if nothing actually does change, this isn’t a “news you can use RIGHT NOW” article. Like so much of what I produce, it’s more of a stroll through a small corner of CSS, just to see what we might see.”

JavaScript – Of parser-fetishists and semi-colons
“TL;DR: if you advocate omitting sensible syntax as parsers will fix that for us, you are not a visionary developer. You waste your and our time. And you come across as a semi-colon.”

Friday Focus 08/26/11: Guilloché

August 26, 2011 By Sophia Lucero

The featured designs in this week’s Friday Focus have something subtle in common: thin, repeating patterns you often see in important documents such as bills, checks, and passports, known as guilloché, and similar to the patterns generated by spirographs.

Designs of the Week

The featured pattern above repeats like a curtain in other areas, and there’s also a thinner border with matching qualities. I like that there are tiny flag icons beside the section headings, which come from the logo itself. I also like how the dark blue background from the top area stays fixed as the linen background scrolls underneath.

LessMoney Workshop website — LessMoney Workshop

There’s a bit of vintage typography again although it seems isolated to the logo and would’ve been nice if we saw it elsewhere on the page. I do like that the text blocks are literally bounded by borders and fit in like LEGO pieces. I also like that the background is translucent, hinting more at the background and what their event feels like.

There’s that layered screens slash Time Machine effect at work, but with more skewing for additional perspective. The top menu uses glowing lights for its hover effects. There’s a bit of a “wall of text” going on in the FAQs and Testimonials section; I wish there were more contrast to the area. Browse the inner pages to discover different textures, patterns, and design elements that spice up but still unify the look that says spells finance.

Social Media Weekly

User Experience – 6 Epic Forces Battling Your Mega Menus
“On the surface, mega menus seem like they are the perfect solution. Yet something’s not quite right with these interaction design jewels.”

Programming – Programming Achievements: How to Level Up as a Developer
“How do I go from being a good developer to a being really good developer?”

Mobile Web Design – A Mobile Web Divided
“The tools we use should not create a web divided between mobile and desktop.”

Typography – HTML Tricks: Cross Hatched Shadows
“I’ve nicknamed it “Afterburning”, and the idea is simple: Copy the text behind the element, offset it slightly, and apply a background image over for masking.”

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 04/23/10: Breaking Boundaries

April 23, 2010 By Sophia Lucero

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

Designs of the Week

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.

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.

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!

Beautiful, and everything fits in nicely.

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.

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.”

Friday Focus 01/08/10: Red

January 8, 2010 By Sophia Lucero

Who’s in the mood for some red designs this week? Let’s start the show!

Designs of the Week

A bit of parallax going on in this horizontally scrolling site. Love the illustrations, which are interconnected through color.

I love that practically everything looks hand-drawn! But everything still looks tidy, and therefore readable.

I think my only nitpick here is the use of Flash for the top menu, and the lack of rounded corners in the pizza graphic. Other than that, this site is making me hungry for Brazilian pizza.

I like the not-quite-centered layout and the little nicks and cuts to the content boxes. Edgy, that’s what I think they call it.

I’m a sucker for these 3-dimensional, folded elements (is there a name for this yet? I really want to know). And the shades of red in this site are quite appealing. I just have a tiny issue with the top and bottom padding in the Featured Projects box—should’ve had more.

Now this is one of those sites that put me on the fence when it comes to looks, but I like how striking it is. Plus the quirky icons below? It captures how left-of-field tattooing is.

I like the whole industrial feel with a bit of a plastic-y twist in the menu and buttons. It makes browsing the site that much more exciting.

Beau.ti.ful. You can go a long, long way when you get the typography down pat. And whitespace is your best bud.

I really like the animated neon sign and oil rigs, dresses down the whole grand look of the site with its ornate borders and background.

This site’s bordering on very low contrast, but it’s still readable.

There isn’t as much red in here as the other sites but it makes since a very bright shade of red was used. I have to point out that something brilliant is going on in the contact page: the map of their company office is a live Google Maps spread which spans the whole background. Neat!

Social Media Weekly

Branding – Breadline Design’s Company Naming Machine
Just for kicks.

Design – A UI Design and Prototyping Treasure Chest
“Having these close by will save time and speed up your design and prototyping work flow. Here is a collection of these types of elements that should be a big help to you.”

Programming – 16 Different Clones You Can Build with Drupal
“So, if you’re thinking about building your next big site, here are a few ways that you can take existing modules and turn a project quickly, without needing to make any custom modules.”

Friday Focus 04/27/12: Bento Navigation

Designs of the Week

Social Media Weekly

Friday Focus 08/26/11: Guilloché

Designs of the Week

Social Media Weekly

Friday Focus 04/23/10: Breaking Boundaries

Designs of the Week

Social Media Weekly

Friday Focus 01/08/10: Red

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Vectr: a free graphics editor on your desktop and in the browser

Search