Devlounge

Design, Develop, and Grow

Friday Focus 05/29/09: Huge Type

By

Typography on the Web is growing bigger and bigger—literally! That is this week’s theme on Friday Focus.

Designs of the Week

StackOverflow DevDays

I like the boxy look. Particularly, that there are all these boxes of content in strong contrasting colors all on top of each other on a fixed background. Which happens to be a CSS parallax effect, by the way.

For a Beautiful Web

Huge type can be elegant too. It’s interesting how the inner pages of this site are white on dark gray, while the frontpage is brown on light brown (with a bit of maroon in the footer). And CSS text shadows all over!

Ryan Keiser

I love how bright and bold this site is, apart from the type treatments. It’s very much a study in the colors C, M, Y, K. And this designers loves colors so much he’s got a daily color inspiration (including a downloadable color palette file) section as footer. Good idea!

Social Media Weekly

Design – When the Design Doesn’t Match the Messaging

Programming – JavaScript Debugging Techniques in IE 6

Friday Focus 12/26/08: Attention-Grabbing Headers

By

Hope you all had a wonderful Christmas celebration! This Friday we’re going to look at whimsical, chaotic, everything-but-the-kitchen-sink headers that will certainly grab your attention.

Designs of the Week

Webdesigner Depot

One of the big questions you have to answer when dealing with more “chaotic” designs is, how do you control the viewer’s eye movement? The site title on the header is pretty easy to find, actually, but I wish the header were a little more useful and contained a navigation menu, for starters.

Patagonia Creative

Huge header alert! Again, I wish it had something a little more useful with the amount of space it is taking up. A tagline maybe. The list of services at the upper right could have been a little bigger as well.

Candy Candy Jewellery

What a cute header—I love the spinning wheel of hearts, it looks like an otherworldly ferris wheel! And it matches the quirky jewelry designs this site is selling. Might have a little too much pink for some people, though. A dash of contrasting colors could make it better.

Vakendod

And now for something surreal, bordering on the creepy! I like how unusual this site looks. Unfortunately there’s this empty part in the middle that gets filled only when you select something from the menu. I’m all for whitespace, but the about text is already at the footer.

Social Media Weekly

Design – 5 Inspiring Web Design Conference Speeches you Shouldn’t Have Missed in 2008
You may not have attended these conferences, so here’s your chance to learn from the masters of web design.

Programming – Top 10 Web Platforms of 2008
Which web platform should you be developing for?

Friday Focus 07/11/08: Blue-Gray

By

Happy free 7-11 Slurpy day! Happy iPhone 3G day! Let’s celebrate with some sleek websites this week. They’re mostly blue, gray, blue-gray—that seemingly drab section of the spectrum actually manages to turn up excellent designs, so don’t shun it just yet! Oh, and we have a ton of examples this time, so brace yourself!

Designs of the Week

Loewy Design

I love the subtle navigation and portfolio item effects here. A few years ago this page would probably be constructed in pure Flash, but it’s amazing what you can do with simple JavaScript these days.

DivVoted

This fixed-footer layout technique is reminiscent of StrawPoll, which is also a voting site that uses Twitter. But there’s a twist: you can hide the island if it’s getting in your browsing way.

Emmis Interactive

I guess you’d say that this website has typical “Web 2.0” elements in it: gradients, reflections, rounded corners…everything except for the candy colors of all those crazy webapps. This is a reminder that despite their overuse and misuse, a good-looking website can still emerge using those tried and tested techniques. The tip here is to avoid the bright hues in the structural elements, but keep them in the “accessories” like the icons.

Pennsylvnia Federation of College Republicans

Another muted design here—not just the blues, but the reds. Though I think the gray background is a little too dark and close to the color of the text, which could be a contrast issue with some people. I particularly like the navigation tabs, including how they described each section so you have an idea of where you’re going.

Headplay FPV

Now this is a very strong design, even though its colors are practically monochromatic. It’s all in the details and the right amount of contrast, while maintaining this boyish feel.

bexEsler

I love the use of (faux) transparency here. Normally I wouldn’t be too thrilled about the black to light gray gradient because it’s so abrupt, but in here, it’s a great lighting technique. Again, another almost-monochromatic design that still looks interesting.

Friday Focus 06/06/08: They Just Work

By

Here’s a larger-than-usual Friday Focus for this week, featuring simple yet beautiful designs that just work. Four site types (blog, portfolio, static, e-commerce) that do a standout job of making an impression.

Designs of the Week

1eighty

90% of this site is made of varying shades of gray, but the black and hot pink header is what makes it infinitely more interesting. I’d say the body text color needs to be a bit darker for optimal contrast, but other than that I like it. See what you can do just by simple lines, shapes, and colors.

SOFA

Utterly simple site, but the implementation is fantastic. The four sections below are actually clickable tabs that contain the whole site. Check out the blog tab—I particularly enjoy its layout even if there’s only one post right now. I wish I could say it’s fluid, but when I resize my browser to 1024 or 800 pixels wide, the ugly horizontal scrollbars appear.

White Water

Delightful use of the rafting motif, from the splashes of water to the boat ropes to the icons to the blue buttons. The site makes rafting seem like such great fun—even if I don’t understand a word that’s written on it!

Red is White

This site is pretty busy compared to the rest of the designs featured here, but it doesn’t get too crazy. I absolutely love the navigation. And the hues aren’t bad at all. I feel the “Red is White” logo doesn’t feel like it fits into the design because the funkiness of the font doesn’t seem to repeat elsewhere, but the big, chunky, headers make up for it!

Social Media Weekly

Design – How To: Make the Viget Inspire Background
The Viget Inspire blog design is a thing of beauty and is one of the few painterly/watercolor-y designs I actually like. If you’re wondering how they did it, the step-by-step process has arrived!

Design – Icon Design Tutorial: Drawing A Pencil Icon
Vu Tran and Min Tran of Frexzy also write a detailed walkthrough on icon design.

Design – ColorFlip.com by Rafaël Rozendaal, collection of Sébastien de Ganay
A virtual flipbook of random colors, with animation and sound effects to boot. There’s technically not much to this page, but those looking for some color inspiration—or perhaps some interaction design inspiration even—might consider this a godsend.

Programming – Did Rails Sink Twitter?
An interesting look at Twitter and the framework it is built on—Ruby on Rails. Making applications scale is an important goal for backend programmers, and with Twitter and Rails as an example, this should be a good read.

Programming – Presentation Layer Best Practices
A look at the best way to write HTML, CSS, and JavaScript. It’s one thing to know how to code, but it’s another to know how to write beautiful code.

Friday Focus 05/16/08: Calm and Clear

By

I don’t know if I am a fan of minimalism because I picked out these websites. But I like to appreciate designs that stand out not because they’re loud and proud, but because they’re calm and clear. Silent waters run deep, they say. I like to think restraint is more powerful than the lack of it, especially in design.

Designs of the Week

Better Interactive

The contrast used on the unlinked text may be less than ideal for the accessibility conscious, but ample emphasis is given to the keywords for visitors who are just skimming through. No images, just a monochromatic color scheme and a minimalist manipulation of type.

Hell Yeah Dude

Some bright colors used here, but this design still leans towards the muted look. But the challenge here was to arrange all the site elements to make it look different from your typical blog layout without drawing too close to the formalities of an online newspaper or magazine.

Design Intellection

There’s something about the lightness and spaciousness of this design that feels delightful. Though I would want a bit more content on the sidebar, I’m glad the designer went with a 2-column layout since blog designers these days are so intent on cramming so much stuff every which way (either to make money for themselves or please their clients and then make money for themselves).

Social Media Weekly

Design – One Day Poem Pavilion
A dome-shaped structure whose perforations let sunlight through to form poems which vary every hour or so. The combination of science, art, and design in this installation is one of the best things I’ve seen.

Design – “Designing is not a profession but an attitude”
37signals points us to an interesting passage from László Moholy-Nagy’s “Vision in Motion” which describes the responsibility of a designer.

Design – Deadly Sins of Web Design
Warning: this is a slightly sucky page that demonstrates all the annoying things you can do to a website. This is more for ignorant clients and friends who keep on insisting you should “spice things up” with music or some animated GIFs.

Programming – Processing.js
Processing, a visualization programming language, has been ported to JavaScript by John Resig. An amazing feat. In spite of all the criticisms thrown at JavaScript all these years, it continues to attract all these neat projects and features.

Programming – Timelapse CSS
Matthew Buchanan created a script that stripped a webpage of its CSS one property after the other until it was completely bare. He posted a video showing the process reversed, and the JavaScript is available for download.

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