• Home
  • About
  • Contact
  • Advertise

Devlounge

Design, Develop, and Grow

  • Home
  • Code
  • Design
  • Design Focus
  • Interviews
  • Publishing
  • Strategy
  • Webapps
  • Extras

Friday Focus 03/11/11: In the Lab

March 11, 2011 By Sophia Lucero

This week on Friday Focus, we’re taking a look at designs with that laboratory/factory feel to them.

Designs of the Week

Two Giraffes

Everything here is just warm and sweet. Custom textures, illustrations, and type everywhere, even the slideshow controls, form inputs, and location map blend in. The blog section is surprisingly understated though.

Tweetmix

Interesting how only the salient parts of the site are in full color while the rest are in sketchy gray. I like the color palette and even the AdSense integration looks acceptable.

Mutant Labs

The animations look great, and I particularly like the glow and lighting effects everywhere.

Xperia™ Social Xperiments

Another immersive design; the only distracting part would be the navigation bar for the main site, which could have been downplayed more.

HTML5 Lab

Simple and straightforward. I somehow prefer, though, that the inner sections show up on their own pages rather than in lightboxes.

Social Media Weekly

CSS – Styling Texty Inputs Only

Browsers – IE6 Countdown

Design – Our Tools
“Rather than picking a camp, I think it’s wise to step back and examine the effects of each approach because I believe there is a bigger issue hiding under the guise of simple tool selection.”

Web – Same As It Ever Was
“If I had to nominate one thing about the Web for the title of “Most Under-appreciated”, I think this would be it.”

Design – Stop the press! Design costs money?
“Implying that web designers are systematically over charing their clients is just wrong. Sure there are bad agencies out there with bad practices, but the majority of people I’ve met in this industry are nothing but honourable.”

CSS3 – Browser Support for CSS3: What’s the Current Status?
“This outline will be divided up into sections beginning with the safest CSS3 features to use, and going down the list towards the not-so-safe.”

Friday Focus 09/24/10: The One Page Experience

September 24, 2010 By Sophia Lucero

Some of the most interesting interactions I’ve seen done on websites utilize the one page format. Is it because there are fewer pages, fewer elements that should be easier to manipulate? Enjoy these one page wonders on this week’s Friday Focus.

Designs of the Week

Maxtron Media

I love how the navigation is a floating chunk of land consisting of various buildings (and the robot mascot) but uppercase everywhere is a bit much.

Pline Studios of Architecture

The lines that play off of the logo work great. Looks freeform but still follows a grid. Uncovering each image in the stack scrolls the page down little by little—I don’t know if that’s intentional but it’s a nice subtle effect.

Eric Johansson

Sliders would be a lot nicer if they could be controlled via the mouse wheel. But it does make sense in this design.

Psynai Design

The zoom on hover effect on the images is a good touch that hasn’t been overdone (yet). The continuous line running throughout the design, though, is a familiar technique for horizontal scrolling.

Mark Dijkstra

I like how all the sections are connected this way, and the connecting lines align with the top navigation. That’s actually really smart.

Genocom Media Group

The use of rainbow stripes gives just the right amount of color to the design without looking too overwhelming. I have to wonder though: should this site have a footer, or is this enough?

Fat-Man Collective

Another thing I wonder about: does it make sense to still have an indicator of which section the page is currently at, considering they’re clearly demarcated and everything? Anyway, I like the big text and bold colors, as well as the photo tooltips. And the walking fat man of course!

Netontwerp

Now this approach feels so close to a brochure. It’s very simple but still feels quite novel.

Dovetail Together

This one feels a bit similar to previous in “experience”. Love all the subtle lines and shapes in the background. Additional props to their blog being designed the same way, because lots of one page sites have completely different looks for their blogs.

Morphix Design Studio

Beautiful illustrations despite the overdone sky-to-underground style, although the typeface almost steals the show for me. Somehow Trebuchet looks really good on this page!

Social Media Weekly

Design – Defining User Experience as Brand Experience
“Whether or not you realize it, user interface (and by extension user experience) is as much about the branding of the business as it is about the logo, product, or day-to day business.”

CSS – CSS3 Support in Internet Explorer 9

CSS – Are CSS Frameworks Evil?
“From what I can tell, designers and agencies that work with frameworks on a regular basis tend to use either Blueprint CSS or 960 Grid System (often abbreviated to 960gs). Yahoo!’s YUI Grids is also a popular one. These were the three frameworks I experimented with.”

Friday Focus 09/10/10: Light Streaks

September 10, 2010 By Sophia Lucero

They’re a bit more abstract than sunbursts and are often used to break the horizontal and vertical lines that run throughout the design. Enjoy some subtle light streaks this week on Friday Focus.

Designs of the Week

Mix and Mash

Light streaks go well with the bokeh effect, of course, which in here is subtly animated with CSS3 animation properties. I love the folded paper effect as always, and the way it’s done here is even more exciting.

Joseph Alessio

This approach of blocking out image areas where large text appears is something you don’t see often and while it obviates the blockiness, I say it makes the eyes wander a bit further.

Baney Design

I like a slideshow effect that isn’t boxed in. Black and white and minimal design here.

TEDx San Diego

It’s great how the streaks in the header actually show up in the carousel—which slides vertically, and then horizontally for the Speakers block. Also interesting: the two-row header menu.

Photobooth for Android

For such a flashy video and lighting effect, I expected an equally flashy transition animation for the tabbed navigation. And the way the layout isn’t center aligned perfectly just throws me off. On another note, I find it interesting that Vimeo actually has portrait-style video dimensions, which is what was used to demo the app inside that Nexus One graphic.

Pivo KELT

I love how all the rectangles on this design were slashed away with diagonal lines, from the buttons in the header navigation to the fancy layered slideshow (look at those wood slabs), to the hanging portraits, to the footer.

Reklama dźwiękowa w Katowicach

The pink and blue does feel vintage but still cheerfully modern. I really like the way the data is arranged in the bottom part, but I wonder if it should have been written in tables, tabular data and all that.

Streamline Safe

I think the headings don’t match so well, but I like how clean this is.

Mealeo

Big, bright buttons everywhere and the colors look lovely (and appetizing, of course).

Social Media Weekly

Design – 8 Minutes with Type Designers
“Each interviewee discusses their proudest achievements, favorite typefaces, sources of inspiration, web fonts and the future of typography.”

Programming – 20 Snippets You should be using from HTML5 Boilerplate
“It is absolutely packed full of fantastic snippets of code that are still very much worth using even if you don’t want to start using html5 boilerplate as your base template.”

CSS – Ordering CSS3 Properties
“We are at a crucial juncture in browser history where some browsers are supporting both the vendor prefixed version and the actual CSS3 property.”

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

enviRenew

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

Helmy Bern

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

Thomas Lickes

Needs refining, but looks pleasant.

WellMedicated

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

Andreas Hinkel - Celtic Football Club

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

Ditley

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

Marie Catrib's

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

Toby Powell

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

TestLab²

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

Literary Bohemian

A visual and literary feast!

The Last Letter

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.

Kalendarium tytoniu ze szczególnym uwzględnieniem tabaki

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.

Signature Attractions

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.

Levi Lodge

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

Lendl Allen V. Trazo

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.

Occasions by Elizabeth

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 07/09/10: Background Repeat

July 9, 2010 By Sophia Lucero

This week on Friday Focus: it’s backgrounds with repeating patterns, a well-loved technique that doesn’t go out of style.

Designs of the Week

Bullet PR

The logo doesn’t quite match the vintage look but it draws enough attention like the other elements: large headers, power lines, icons.

LaMalla.cl

Love the snappy slide out animations on the images and the gray/pink color scheme. The details are pretty much perfect and it’s just the social media buttons that look out of place.

Shierly Tjipto & Richard Pham

Great treatment on the text, and the purple/black/white theme is quite elegant.

Chalet Graal

I absolutely adore the idea of using not just a flat graphic pattern as a repeating background, but multiple patterns and photos in boxes. The only question is if it’s too distracting for the content, which I think isn’t, because if anything it keeps me glued to this page!

Brice Lechatellier

Extremely subtle pattern, but it’s there. Social media buttons look better blended; the letterpressed look helps.

CannyBill

Using your logo as your background pattern? Brilliant.

Evan Eckard

Again, logo as background pattern, but what really catches my attention here is the transparent and angled images in the carousel.

Wawa Coffeetopia

Love how there’s barely a straight edge in this design, just mostly ribbons and fancy frames.

Ray Anthony

Striking, but is that Comic Sans I see in the footer?

Victory Church

I actually like that the background is a much larger pattern than what we usually see, which makes it look different from the wallpapered look. It’s also great that the images blend in the same pattern to reinforce rhythm and consistency.

Hailey Jayne Designs

I’ve run into this look so many times now, but I don’t really tire of it, and it’s done really well here. However, for such a sweet and elegant design, I’m wondering if the gray in the navigation is a bit too dark.

Danilo Nobre

Doesn’t this make you nostalgic for the high-gloss designs that have now been replaced by the more subtle ones these days? And actual sparkles! What a fun design.

Social Media Weekly

Community – HOW TO: Get the Most Out of Q&A Sites
“There are ways to ask the best questions, provide great answers and ultimately build your reputation; here are eight guidelines that can help.”

Design – Icon Reference Chart
“A comprehensive chart of icon information for various platforms and devices”

Design – 365psd
“Download a free psd every day for a year”

Next Page »

Code & Tutorials

Which Front-End Development Languages Will Grow in 2017?

Your Guide to Leveraging APIs as a Developer

Bitcoin Processing Website Integration For Web Developers

Website Security For 2016 That All Developers Need To Know

5 Reasons You Need to Be Using jQuery

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge

5 Ways to Use Social Media to Make Money

Search