Design Focus

Friday Focus 07/30/10: Centered Seals

Sites usually place logos at the top left corner of the page, but nudge them to the center and it makes quite an impact, as a red wax seal does on a white letter envelope. Let’s check out sites with centered logos on this week’s Friday Focus.

Designs of the Week

Min Tran's Journal

Love all the patterns and pastels.

Catered By Kate

Nice torn effect on the navigation and echoed throughout the rest of the site. I also like the subtle adjectives in the background.

G2 Geogeske

There’s some weird layering going on when you scroll up and down, but I like the impact of this look.

Word Refuge

The text length in the inner pages is too wide, and the script feels a bit much. Still, I like the textures and the old style illustrations.

Le 28Thiers

I like the curved header navigation coupled with an ornate background pattern. The boxes of text are nicely framed, and the buttons are equally elegant.

Barley's Greenville

Interesting idea to put all the beer labels as a collage for the header. There’s also a bit of a split design going on, and the use of curly braces as arrows.

Ośrodek Wypoczynkowy Zielona

Not-too-distracting animations above the logo in the footer, and not-too-overwhelming use of wood including menu items and buttons.

New Hampshire Distributors

I find the “featuring” slideshow highly effective. The use of red, on the other hand, may need more tints and shades. What I really like is the glowing hover effect especially in the three boxes below the slideshow—simple idea but it works.

Steinway & Sons

Two things that grab me: seamlessly elegant carousel of featured pianos, and the use of piano strings in the background as a stylized sunburst effect.

Usable Efficiency

I wish for a little more polish on the RSS and collapse/expand buttons, but I like the openness of this layout.

Clover Cottage

It’s great that the wood texture isn’t your typical bright brown but one that actually fits the theme of the site. The form elements in the booking box is excellent.


I really love the stylized buttons in the header navigation, and I wish it were applied to every other button on the site. Old style illustrations also used here, but what’s great with this site is that it explains (in a collapsible area) what the they symbolize.

Sky's Guide Service

I think the wood could be a little lighter to distinguish the red on the logo, but overall this site has an excellent design from typography to illustrations to form elements.

The Eagle Rock Yacht Club

Using a wave pattern as divider is both whimsical and smart. I love the splashy sea photograph background in the footer navigation.

Paul Bennett

Subtly textured, clean, yet feels perky.


Nice gradient on the main blurb, which breaks the blockiness of the text and gives an ethereal effect. The floating folded paper background on the video, which is an echo from the logo, is a nice touch too.

Social Media Weekly

AccessibilityTen Common Accessibility Problems
“This document outlines ten common accessibility issues I have encountered which could result in a site’s failure to fully comply with WCAG 2.0. The document includes links to some of the WCAG 2 advisory Sufficient Techniques provided by the W3C for addressing each issue.”

DesignCreate Stunning 3D Text Free With SketchUp
“Today I’ll teach you how to create some awesome 3D text using only Photoshop and a free app from Google.”

DesignTips for Designing for Colorblind Users
“We’ll take a look at what colorblindness really means and how you can tweak your designs based on a few simple principles.”

CSSStart Experimenting With CSS3 Keyframe Animations
“For this reason they’re used sparingly, in a lot of cases for experimental purposes or as ‘hidden gems’, but that doesn’t mean you should shy away from getting stuck in.”



Code, Design

10 Wonderful CSS3 Creations

We have already shown what CSS3 with HTML5 can do for your website. But beside websites CSS3 with jQuery can do a whole lot more. You can make animations with it that could only be done with Flash before and create designs only possible with Photoshop.

Once FireFox and Internet Explorer have finally catch up with WebKit developers and designers will finally have more options to serve data and graphics. Here there are 10 exceptional animations and graphics done with CSS3 mainly and some with jQuery added. All of them are best viewed in Chrome and Safari, only the Star Wars animation is Safari 5 only.

More →


Design Focus

Friday Focus 07/23/10: Bento Boxes

This week on Friday Focus: websites whose content are arranged into boxes like those cute bento meals. This time, you must think inside the box!

Designs of the Week


Let’s start with the poster child of this week’s collection. A little too busy for me, perhaps the other columns that aren’t at the center of the page can be faded out? I do like the vertical approach here though, as the header becomes the leftmost sidebar.

Kokoro & Moi

For a design like this, you always need to pay attention to what you’re publishing. Here everything blends in nicely and looks like a happy quilt!


Love the horizontal and vertical scrolling, which makes total sense for a grid-based design like this. The experience feels great and makes you want to browse more stuff.

Fran Rosa motion and graphics

Disappointingly unusable site—it uses one big image map—but I like the concept.


Looking at this site quickly, it looks okay, but eventually you’ll have to wonder why the boxes aren’t lined up properly. I know that it’s a trend to let the floating behavior determine where they’ll land, but in some ways it feels lazy as well.

Zaum & Brown

Better example. The stark black and white plus the bold titles make for a striking look, no doubt.

Unit Verse

I like this fairly colorful look as well as the controls for filtering the content, although I’m not happy with the “myster meat” collection of boxes beside it. Of course the footer provides a more useful version of that.


Interface imitation is a growing trend, and here it’s still pretty subtle but memorable (click on the “slant” box, you get a marching ants effect, then of course the blinking cursor). Love the navigation effect.

Joshua Distler

One of the most peculiar implementations I’ve seen; the images appear only on hover, using pretty dated JavaScript techniques.

Clapclap Design

I like the use of primary (and secondary) colors for a “designy” feel. But this one doesn’t know how to use semantic HTML either.

We Heart

I like the boxes and circles used all over, although I wish the sidebars were a little less distracting from the main content area.

Rubber Design

I had a pleasant time browsing this site; it looks warmly welcoming and elegant.

Kleber Design Ltd.

Very nifty concept!


Boxy designs don’t just mean you have to put content in boxes, follow the grid rhythm, be done with it. See how this site played with its logo and the placement of its text and photos.


Love the use of the browser’s full width and height.

Jam Restaurant

Really elegant looking, and I admire the fact that even the menus are typed out in HTML even when they could have just used a full image.

Social Media Weekly

JavaScriptJavaScript Minification Part II
“This article emphasizes what you should do to take advantage of YUI Compressor’s best feature for minification: local variable name replacement.”

JavaScriptSay No to noscript
“Despite early accessibility advice advocating use of the noscript element, best practice is to use unobtrusive JavaScript for progressive enhancement, rather than relying on fallback content.”

CSSBulletproof CSS3 media queries
“I tried to resolve this problem by providing pure CSS solution for 95% of market share PC browsers and JavaScript solution for the rest of the browsers.”



20 Great Photoshop Website Tutorials

If you want your website to stand out a good first step would be to design your own instead of using a template which is used by hundreds others. While it’s true that content is very important to any other websites design also matters, it matters a lot.

We can’t all be creatives or a graphic and Photoshop expert. I believe we all have creativity inside us, well known designers have practiced a lot to reach the level they are now. Practice and practice and of course lots of tutorials and inspiration. But talent is also a must and not all of us have talent for design, skills yes, talent, sadly no.

More →


Design Focus

Friday Focus 07/16/10: The Many Faces of Paper

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


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.


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.


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.


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

DesignCode an Email Newsletter from PSD to HTML

CSSVendor prefixes—what happens next?

DesignZappos.com redesign case study

CSSCSS Media Queries & Using Available Space

CSS, TypographyFont metrics and vertical space in CSS

TypographyFontShop Education



The Best WordPress Social Media Plug-ins

If you write on a weblog for commercial purposes it’s of importance to make your content shareable through social networks like Facebook, Twitter and Delicious to name a few. Social media functionality is as unmissable as having a title for your weblog.

While having social media functionality is a must it must not be overdone. A lot of websites offer share options to all existing social networks, some I have never even heard off. I find that one of the most annoying things on weblog articles are the bazillion icons lining the post at the end or on the side.

It is best to think which social networks are more favorable for your kind of weblog and add those functionalities accordingly. Make sure the buttons won’t overflow in your design and that they are not a sore to the eye. For getting started you can’t go wrong with adding a Twitter, Facebook, StumbleUpon and Delicious button.

To get you started I’m giving you a list of 10 great social media plug-ins for your WordPress site. Plug-ins that contain most social networks and individual plug-ins for Twittter, Facebook and Google Buzz. All plug-ins let you define which social network buttons you want, use them wisely.







TweetMeme Button


Share on Facebook




Add to Any


Light Social


Google Buzz Button


Facebook Like Button




Save Your Website Using A Data Center Service

Have you ever worried about your precious web site data, images, and database files not surviving a hacker attack, a power failure, a computer virus, or even a hardware failure? I certainly have been there. I recently lost some important files and digital images when a power outage occurred, and basically ‘fried’ an external hard drive I was uploading images to at the time. This was a rather disturbing ‘moment of truth’ for me, so I embarked upon a mission to find an alternative to my own backup systems, and in the process, found some interesting sites that offer different backup service plans to suit your data storage and recovery needs. I have looked into three different backup services, and discuss my findings in this article.



At iBackup.com, I found their site easy to navigate and browse through, and their list of products was fairly extensive and impressive. Geared slightly more toward the business computer user than the individual, they have versions of their backup program for PCs and MACs, and also allow you to map your online account with them as a local drive. Nice. You can also backup your running MS SQL Server Databases by taking advantage of the embedded capabilities in Microsoft SQL Server’s backup and restore functions to provide fast and reliable backup and restore. Sweet. This same company also gives you the capability for accessing your PC from other locations, similar to the “Go To My PC” software that has been available for some time. There appears to be good support for their product right on the site in the way of toll-free numbers, live chat, and report forms. The interface for each of their products looks very familiar and simple for PC/Internet Explorer users, and they have software compatible with several versions of MAC OS. As far as cost is concerned, iBackup offers 10 Gig of space for $9.95 per month, and charges an extra $4.95 per month for the remote PC access feature. I could not find a free trial or demo version of this program, so I cannot comment as to its pros and cons. However, the description that I read about this company and their services online was quite complete and informative.



At evault.com, I found a form you can fill in, which gives you access to a Flash presentation which shows you an online demonstration of their product. This particular product seems mostly geared to small businesses and larger corporate businesses and industry. The product demo really went into excruciating detail about how businesses can lose up to 18 billion dollars per year in lost data. Their website notes that their backup system is automatic, easy to use, fast, and secure. They claim that their disk-to-disk backup solution performs fast backups, and is available on broad range of platforms. Evault also has managed service where they handle all the backup operations for you. This backup service seemed to have it all, and even more. However, a drawback to this company that is owned by Seagate, is that nowhere does it mention how much all their services cost! I hunted around and did a heck of a lot of clicking until I figured out that they actually want you to call them and ask! Sorry folks, but if they can’t even publish their pricing, that sends up some red flags! As impressive as their backup system seems to be, if they are reluctant to make their costs apparent, I think I have to give this one a thumbs down!



Carbonite.com is perhaps one of the better-known online backup systems, partially because they have radio ads galore, and they are endorsed by notable radio talk show hosts Rush Limbaugh, Kim Komando, and Dr. Laura. This product is geared toward the individual rather than businesses, although I think many businesses could benefit from this service. This company also offers a 15 day “risk free trial” which is an attractive thought for most of us that would like to try out the service before purchasing it. Carbonite is the least expensive of the two services that actually talked about pricing, costing about 50 bucks per year for unlimited storage. This makes it a pretty attractive deal. This service is easy to obtain, and just simply backs up your entire computer’s Documents and Settings folder automatically in the background as you are using your computer. You can add extra files such as program files, system files, temporary files, videos, or individual files greater than 4GB manually. They tout double encryption security for your files as well. Unfortunately, at the moment, Carbonite only is compatible with PCs using Windows XP or Vista. However, they do plan to soon release their MAC version of the program. Carbonite sounds like the most cost-effective and easy-to-use system so far. I am planning to take advantage of their 15 day free trial, and will report my findings in a future review of this and other online data backup services.

Wrapping Up

There are quite a number of electronic data backup services popping up on the Net these days, and with the constant threat of computer viruses, hackers, power surges or outages, and other possible causes of computer data loss, it makes total sense to look into some of these services in order to protect your data, or your company’s data.

Of the bigger, global data service centers, NTT is the safest bet. There just is absolutely nothing worse than losing your hard work, and with the availability of these types of services, you can buy some peace of mind that your data is safe and easily retrievable regardless of what ‘disaster’ might strike your computer!


Design Focus

Friday Focus 07/09/10: Background Repeat

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.


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.


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

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

DesignIcon Reference Chart
“A comprehensive chart of icon information for various platforms and devices”

“Download a free psd every day for a year”



20 Great Twitter Backgrounds For Inspiration

If you have a website the chances are great that you also have a Twitter account related to your website. Twitter has become our visit card online more then our websites for the simple fact that we update our Twitter status regularly. Now even though there are countless of Twitter clients out there a lot of people still use Twitter via their web browser. So having a nice and good looking Twitter background is important.

More →


Design Focus

Friday Focus 07/02/10: Rocketships

This week on Friday Focus: a bunch of sites that use rocketships in their designs. Unfortunately not all of them take the metaphor as far as one would like, but carry interesting designs nonetheless. Ready of take off?

Designs of the Week


No doubt about it, this design is slick, and customizing form elements is no walk in the park. I just wish the narrow font wasn’t so narrow, and the submit button were blue.

MB Dragan

I want the green buttons to have bigger padding (Fitts’s Law), and the portfolio info text in the carousel isn’t so readable, but I quite like this site. Putting the designer’s face into an astronaut suit is clever, and what I meant by taking the metaphor to the next level.

Noel Design

I enjoy the mixed textures and playfulness here, but I think it could stand to be more playful. The footer looks completely different from the rest of the site.

Kupferwerk Blog

Love the scribbled-on-paper touches but I feel they blend into the background too much and one wouldn’t think to look or click there.

base6 Design

Applying a grunge texture to originally glossy illustrations? Not a very good idea.


I like the overall look and feel of this site, but if you look more closely it needs polishing. It’s an 8.5, but not a 10.

HyperX Local

Lovely details, go check out the icons and other illustrations on the inside pages. My favorite part is the glass frame around the main content area.

Social Media Weekly

SEO5 Ways to Be an Ethical SEO Expert
“Today we’ll briefly look at how to engage in SEO in an ethical manner by pointing out five key techniques to avoid.”

ProgrammingUsing Firefox’s Geolocation API
“One interesting aspect of web development is Geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user’s location.”

UXUX Myths
“Debunking user experience misconceptions”

Information ArchitectureCard sorting: a definitive guide
“Card sorting is a great, reliable, inexpensive method for finding patterns in how users would expect to find content or functionality.”



16 Excellent One Column WordPress Themes

Tumblr and Posterous aren’t popular only because they are easy to get a weblog up and running. They are popular with lots of users because the of the no nonsense layout. No distractions, no overload of content or other items you are tempted to add. A lot of people claim that a simple weblog platform and layout helps them focus on publishing better content.

For us who still like having control on our websites and weblogs and use WordPress I scoured the web for a one column WordPress theme, which does one thing: focus on the content. And not to mention that most one column themes are minimal too, the themes to my heart.

More →