Elegant, exquisite, and extreme details on these sites that are sure to please. Welcome to this week’s Friday Focus!

Designs of the Week

This creation is just a delight to look at. Everywhere you look there are design elements that carry the underwater theme brilliantly. More importantly, those elements break the mold of straight borders and rectangular image frames and buttons.

This business website is simply well-done. I love that the company logo is inlaid into the rotating photos below the header, when typically it’s found at the top of the site. It adds interest to how the photos are framed and presented.

Music. Color. Type. Those are the three elements that make up this recently redesigned website. Every page gives a completely different visual and musical experience.

Social Media Weekly

Design - How to (and not to) work with a designer
Will Harris shares his experience on working with a designer. A good read for both designers and clients.

Design - 50 Absolutely Killer Flash Templates
FlashDen shares the top 50 Flash templates that are ready for you to use, perhaps even modify. If you don’t want to buy these products, then at least take a look at them for inspiration!

Programming - Cheat Sheets for Front-end Web Developers
Twenty-three cheat sheets for HTML, CSS, JavaScript (mooTools and jQuery), all printer ready.

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

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.

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.

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.

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.

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.

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.

Welcome to the first Friday Focus for the month of July. This week: strong bursts of color and collapsible content. Curious combination? Read on!

Designs of the Week

This is probably the “most different” from the rest of the designs here. But it’s a good thing. It’s 100% fluid, makes good use of to show the striking background, and is very colorful.

A blog implementation of the collapsible content technique. Simple and effective design that pops.

I personally am not a fan of what he did to the background, it’s a little too busy and competes with the portfolio images, but it’s a nice design nonetheless.

It’s not colorful, but dark, monochromatic color schemes can be as rich as the rainbow too. The collapsing headers distinctly remind me of the legendary portfolio of Marius Roosendaal, but this design is unique in its own right.

Social Media Weekly

Design - 99 Free Canvas, Paper, Paint, and Metal Textures
People say grunge is the new “Web 2.0 look”. Whether or not you agree, it takes a lot more work to put together a nice textured design, but this page can help you out.

Design - Style Switchers Contest Results
Smashing Magazine held a contest that had designers coming up with creative presentations of website style switchers. Tons of inspiration here.

Programming - Improved Flash indexing
Google starts indexing Flash content. It’s what web designers have been waiting for…or is it?

Programming - Top 10 Fatal URL Design Mistakes
If there is one part of a website that you should make sure works properly, it’s the URL. Some SEO advice for ideal URL design.

This week’s picks are cute, cheerful, and all scroll horizontally. Let’s see how they pulled off this layout technique.

Designs of the Week

It seems that creating a horizontal-scrolling website need not require too much graphics, just a background that can stay fixed all throughout.

I like that the vines growing around each item in the portfolio are subtle rather than overpowering. It’s pretty common these days for illustrations, especially nature-related ones, to be simply staggering in appearance, but not here.

A full-on Flash site for a corporate brand that went for horizontal scrolling as its navigation. There’s a lot of stuff going on, and all the elements come together in a quirky way. Notice how the color pallette is similar to that of Dean Oakley’s site. Muted, “retro” colors are a good way to instantly change the look and feel of your site.

Social Media Weekly

Design - The Web Time Forgot
A global network of computers envisioned long before the Internet was invented.

Design - Wow! 10 Awesome Interactive Websites
What makes an interactive website stand out from the rest? This article may have the answers.

Programming - The Greatest Invention in Computer Science
What’s the most important invention in the field of Computer Science, apart from computers? You might be surprised.

Programming - Episode 4: Scaling Large Web Sites with Joe Stump, Lead Architect at DIGG
A podcast that discusses how the top 100 websites were built to scale.

It’s all retro this week on Friday Focus—robots and rainbows on the design horizon. You’re sure to have a blast with the designs below. Enjoy!

Designs of the Week

Excellent color combination, although the smaller text could have used a darker shade of blue. This site is enjoyable simply because there’s a giant purple robot on it. Without it, this would be just another nicely-designed website without any personality to it. And what could be quirkier than robots?

I like that the lines are skewing in all directions, but not in a chaotic way. Cheerful colors and illustrations plus some snappy JavaScript effects. Everything says “bake a cake, bake a cake, bake me a cake as fast as you can!”

This site is so interesting not only because of the design, but because of the premise: it’s an online shop for all things robots. I would have loved a bit more kitschy-ness to the ecommerce design elements, not just the surrounding layout, but this is a fun look nonetheless.

You’ll have a good time navigating this site. The grunge effects are subtle (they look like real dirt!), and everything’s just arranged nicely.

Social Media Weekly

Design - 2008 Design Trends
Web Designer Wall has come out with its annual list of design trends. Click to find out.

Programming - Using CSS to Fix Anything: 20+ Common Bugs and Fixes
Writing CSS is never painless. This list is a must-read.

Oh, and speaking of robots, download Firefox 3 already and type about:robots into the address bar.

It’s Friday the 13th, so let’s celebrate this eerie date with some dark designs.

Designs of the Week

Web design guru Dave Shea is behind this redesign (it’s his company, after all) that’s turning heads. Excellent effects using jQuery, and that accent image in the welcome blurb is reminiscent of 31three.

From brown to green, another textured design. This one’s a hybrid portfolio site since it incorporates blog posts and social media widgets, namely, ma.gnolia and Flickr. Brownie points for a 100% fluid layout!

Love the use of depth here, as well as the trusty jQuery for switching between featured portfolio works. It’s gray but it’s not boring. That’s hard to pull off.

This one’s a little out of place since it’s not dark enough and uses a drastically different color scheme, but this is a popular design this week. The footer, although not shown here, also gives the illusion of depth.

Social Media Weekly

Design - 10 Hollywood Designers To Watch Out For
Whether or not you think Hollywood films are crap, the worlds they have created just blow the mind and should be more than enough inspiration for you.

Programming - 10 SEO Rules for Designers
Even if you’re a designer, it’s important to know even just a little about related skills. Knowing SEO adds value to your work as it helps your clients become more findable online.

Programming - jQuery UI - ThemeRoller
Generate a consistent look for your webapp interface by choosing style and color options, then downloading the theme.

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

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.

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.

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!

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.

What’s the lesson for this week? Describe the purpose of your website in one fell swoop and you’ll go a long way. Of course, it helps to have a great design as well.

Designs of the Week

Definition: the use of a word in the opposite sense of its proper meaning.

Two things I really like here. First, the colors. Seafoam green to light yellow is the last color combination one would come up with, but it works well. Second, the black and white illustration as top header background. See, top header backgrounds (let’s trademark that, shall we?) are a trend these days, but, again, would you have thought of using such starkness on a soothing gradient? I enjoyed this discovery not because it’s worlds away from the designs we see today, but because the choices used were so unexpected.

hello,
i’m a new york-based web designer with
a penchant for music and strong opinions.
have a look around, and give me a shout.

The use of SIFR can go a long way. Throw in proper contrast, some texture, and the right amount of whitespace and you’re all set. The inside pages show that the link colors are so startling a deviation from the dominant, monochromatic brown hues that I can’t decide whether I like it or not. But being different is a good thing. Startling the viewer is also a good thing.

The ad network
of creative, web and
design culture

So minimal and yet so bold at the same time. It’s clear who designed this website—Coudal Partners. It’s amazing what you can do when you’re armed only with thin, gray lines. As this is an ad network, participating advertisers are featured first and foremost, an immediate demonstration of how The Deck works. This is how ads should be.

Social Media Weekly

Design - Create a Spectacular Grass Text Effect in Photoshop
Spectacular, indeed, is the right word. The grassy typographic effect is not too easy but not too hard, and you’ll walk away feeling very pleased with yourself after completing this tutorial.

Design - Yahoo! Design Stencil Kit
For all your interface design and wireframing needs. File support for OmniGraffle, Adobe Illustrator (PDF, SVG), Adobe Photoshop (PNG), Visio (XML).

Design - 25 resources for ornaments, fleurons, and “frilly bits”
Cameron Moll provides a very handy list of links where you can download pretty ornaments, which he is quite fond of in his designs. Resources are both free and for a fee.

Programming - CSS Cacheer
Shaun Inman releases CSS Cacheer, an improvement to CSS-SSSP. With it, CSS has evolved to a whole new level, with support for variables, constants, nested selectors, bases, and plugins. Requires PHP.

Programming - CSS Decorative Gallery
Web Designer Wall shows how you can add pretty decorations and frames to a group of images using a <span> overlay and CSS wizardry. Great for all your photo galleries and portfolios.

Programming - Featured video: quick and easy forms
Video demo showing how you can easily create forms using Google Spreadsheets. It’s definitely a great idea if you want an easy way to gather data, as in surveys and contact forms. Although not completely customizable, the best part is the information submitted is saved in an organized manner inside Google Docs.

Can’t say there’s a completely obvious unifying factor to each of the design picks this week, but they all have beautiful, detailed illustrations in them. They’re all cheerful too.

Designs of the Week

The effects on these icons are pretty cliche in some people’s books, what with the saturated hues and glassy reflections, but they’re still nice to look at.

Header image aside, this site is really minimal but does a nice job with the text. The location map at the footer is also a nifty little touch.

A splash of color and life at the top, only slightly trickling down as you scroll further. Then it becomes monochromatic grayish brown for the main content. I like all the lines and gradients and other details.

This is a purely Flash site, and you will adore the organic transitions as you click on every item in the menu. I especially enjoyed how the map (under “Location/Hours”) is formed.

Social Media Weekly

Design - The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques
If you’ve been looking for a definitive guide to Photoshop, this is it. Download the entire ebook completely free, but it’s only available until June 13 so hurry!

Design - Font Burner
Font Burner lets you pick from a thousand fonts and use them on your own website. How? Just follow the steps listed there. Yes, it’s also free.

Programming - Starry Night: Incredible 3D Background Effect with Parallax
Every since the teaser page for Silverback was launched, and the web design geeks discovered it was using the Parallax Effect, they stopped being in awe for a bit to recreate their own optical illusions using CSS. This one’s one of them. And if you don’t like stars, how about riding horses?

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

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.

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.

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.