This week on Friday Focus: designs that are dressed in fine typography and details.

Designs of the Week

Social Media Weekly

Usability – The 10-Second Usability Test
“Is your site usable? Testing the usability of a site is one of the first things to be done during the search engine optimisation process. Keeping tabs on usability is one of the ways to assess how much work your site is going to need to pull it up in the rankings.”

Design – Taking Type to the Next Level with Alternate Characters
“Are you sick of your type looking plain and boring? Many OpenType fonts have alternate characters built into them that can transform your type into a beautiful piece of art. By using these alternate characters you can add things like flourishes and flair to your type with ease.”

Ideas – 10 Principles That May Make Your Work Better Or May Make It Worse
“I was asked to map my own ocean and to document a few of my guiding principles. They may be of assistance to you. They may not. But then again, it’d be a shame if we were all working off the same map, looking for the same treasure.”

Mobile – 10 Great Tools to Create a Mobile Version of Your Site

I love site breadcrumbs, and find myself seeking them out a lot- especially when I’m on content-heavy sites. It’s too easy to get lost within pages and pages of complex navigation, and breadcrumbs basically tell you “You Are Here”, allowing for easier browsing. And easier browsing, as I mentioned very recently, is great for everyone.

WordPress, which I use to power about 95% of the sites I design, doesn’t have breadcrumbs built-in, so I usually do one of two things:

Use a plug-in

The quicker method, of course. There are a few out there, but my choice is the Navxt plug-in, which really takes me just a minute or so to activate and start using. You can learn more about Navxt including how to install and start using the plugin here.

Don’t use a plug-in

This page by Dimox from Russia describes how to set up automatic breadcrumbs yourself without using a plug-in. It looks like a lot of code, but the truth is it’s really simple to do, especially if you just copy and paste Dimox’s code. Be sure to read through the comments on his post for some ideas on customizing it to your site’s needs.

You will, of course, want to style your breadcrumbs nicely. For that, I recommend this tutorial for creating Apple.com-like breadcrumbs, or the lovely Veerle’s post on simple, scalable CSS-based breadcrumbs.

Do you use breadcrumb navigation on your sites?

My mom recently discovered the joys of Facebook games. Specifically, Farmville. It’s what she uses her Macbook (which has better specs than mine) for. Once in a rare while, however, she’ll decide she wants to do some web browsing. And that’s when she calls me.

Mom: I’m at this website… and I don’t know what to do next!
Me: What links can you click on?
Mom: Links? How do I search?
Me: Is there a search box? A search button?
Mom: Um, no… oh, wait… not here… or there…
Me: Try scrolling down? Look in the upper right area?
Mom: Okay. Oh! There it is! I found it! Thank you. Why are you so good with computers?

This scenario is more common than you think. Sometimes I feel like my mother is almost oblivious to most site navigation designs- like she just doesn’t see them.

If my mom falls at all into your target audience (and she loves online shopping), here are some tips for site navigation design that might make everyone’s lives easier (especially mine):

Make Buttons Look Like Buttons

They don’t have to be all 90′s-style over-beveled buttons, but they should look like buttons. Thin borders are good, “tab” styles are good, and if they change- even slightly in color- on mouseover, even better.

Be Clear

Mom loves buttons that say “Click Here!” Of course, they aren’t recommended. What you should do is be as clear as possible that if you click here, you will be brought here. The w3 explains this well, and basically you want to:

• Provide information when read out of context.
• Explain what the link offers.
• Don’t talk about mechanics.
• Don’t use verb phrases (e.g. “Tell me more”)

Make Search Prominent

When faced with a confusing-looking site, the first thing Mom does is look for the search box- so make it obvious. On the same subject, make your search results easy to understand as well. I wrote more about search about a year ago.

Don’t Hide Things

I love Google, but the way they hide their top navigation bar unless you mouseover it is not cool with Mom- she doesn’t browse like I do, with one hand on the mouse, moving the cursor around constantly. She sits back and says, “What now?” So, if Mom is your target audience, go easy on the hiding.

How do you simplify your site navigation style?

This week on Friday Focus: excellent websites that happen to have fixed elements in them.

Designs of the Week

Not only do we have a light on dark design here, but a glowing light on dark design. It’s colorful too, because of the thick demarcations color-coded by content type. My only wish is for the search bar to be part of the fixed area; I think that’s just as important a navigation element as pagination.

Interesting choice of content in the fixed area: name and contact info (very important), quick links to portfolio items grouped by year, and quick links to additional info about the designer. Overall, neat and nicely organized.

Another split, one page site. Cool hover effect on the brain graphic, and interesting combination of background patterns (one ornate, one techie).

Brilliant effect on the blue markers, telling you exactly where you are on the page and keeping things dynamic.

A custom font makes a big difference. Big, bold, boxy, but not overwhelming.

Not so exciting fixed area (they’re more for utility anyway) but does well in presenting the portfolio.

More than half of the page is fixed—narrow content areas isn’t quite dead yet!

I like how you start with a practically blank screen when you load the site. Then you get a simple yet dramatic transition animation to load each section’s content.

Another thing that isn’t dead: left-aligned layouts. No skimping on the amount of whitespace either.

The thing about changing backgrounds is the foreground has to match, and amazingly enough, this site pulls it off. Other than that, graceful details everywhere.

I like the three different shades of blue in three different columns. Not too thrilled about the use of the drop shadows and inner shadows here though.

I love endless scrolling. I’m on the fence about the stark black icons, although they give a quirky feel to a text-filled site.

What really sets this design apart is the carefully chosen and crafted custom photos for each post, everything blends well. Not to mention custom type everywhere.

Social Media Weekly

Usability – Why Not a User

CSS – CSS gradients for all web browsers, without using images

CMS – 10 Simple and Light Weight CMS Solutions

As someone who manages and hosts several websites for others, there’s nothing worse for me than finding out a client’s site is down from the client himself. Thankfully, that very rarely happens these days- and I have these monitoring services to thank.

Montastic

I’ve been using Montastic for several years now. I like how it’s simple to use, and does exactly what it says: monitors your sites for downtime. Its free version checks your website every 30 minutes, which is fine for most of my needs. Checking is made from many (US) locations, and the IP numbers of their checkers change “on a regular basis”. A good and solid choice.

Mon.itor.us

I only recently discovered Mon.itor.us, but have already embraced its powerful (and free!) service wholeheartedly. Its interface isn’t too pretty, but when I said “powerful” I meant it- Mon.itor.us will track your site’s uptime (including averages), response times, and visitors. You can build widgets to place on your website, as well.

LinkPatch

There are lots of similar services out there, but LinkPatch is hands down my link checking service of choice. It constantly monitors your site(s) for 404 page views, including links from external sites and out-of-date links you forgot to redirect. It also takes into consideration things like common user misspellings, then automatically emails you details on who got the error, where they came from, and what they were looking for in the first place. Plans start at $10/month, but there’s a free plan if you only need the service for one site.

How do you monitor your sites?

Now that everyone knows how important adding social media links to a website or blog is, I’m always on the lookout for great looking social media buttons. Sure, I’ve designed my own- sometimes it’s necessary to create unique ones to suit a unique design- but more often than not, I turn to my collection of pre-made social media buttons, the best of which I share with you here today. They’re awesome- and they’re free.

Twitter Buttons

I’ll admit my bias here: I designed many of these buttons, with a wide selection of styles from boxy to glossy to girly. These aren’t meant for downloading- simply input your Twitter ID, hit “Go”, and copy the code directly beneath the button(s) of your choice. Visit Twitter Buttons »

Social Icons Hand-Drawned

There are quite a few “hand-drawn” style buttons out there. These, released on by TheG-Force on Deviant Art, are my favorite. They’re hand-drawn, but still stay true to the social media logo colors, making them easy for your visitors to find on your page. Get Social Icons Hand-Drawned »

Social Bookmark Iconset

I find myself using this one over and over, especially when a particular project could use (or, let’s be frank, a client insists on) a small injection of that Web 2.0-gloss-and-reflection-style. They’re well made, and include most of the popular services today. No Twitter, though- but for that, see Twitter Buttons above. Get Social Bookmark Iconset »

Aquaticus Social

Next to the Iconset above, I use this the most. With 30 buttons to choose from, there’s one for nearly every social media service you can think of- from Twitter to Facebook to Vimeo. Because they’re hip-to-be-square, they require less space than round icons, and when you’re pixel-counting, that’s a very good thing. Get Aquaticus Social »

Cheers

Finally, I couldn’t list my Favorite Five without including Smashing Magazine’s contribution to the free social media icon world. From a RSS beer mug, to a shot of StumbleUpon, to a champagne flute of Twitter- these may not be suitable for every project, but they certainly belong in any designer’s button collection. Get Cheers »

In the spirit of Valentine’s Day, let’s try our hand at wedding planning with these nicely designed websites. Whether your status is “single”, “in a relationship”, or “it’s complicated”, there’s no hurt in dreaming up the perfect wedding just like the kids used to do in their notebooks, and what better season than now? Have a lovely Friday Focus, everyone!

Designs of the Week

Wedding sites tend to be filled with flowers and scripty type. This look is a sort of middle ground that doesn’t overwhelm: a more delicate slab serif and purple hues instead of pink.

Here’s a similar look, this time with a shade of Tiffany blue, often associated with weddings. The scalloped edges also seem to be a popular touch for that cozy and romantic feel. And when in doubt, serifs also seem to up the romance factor a bit!

The design gets out of the way, but doesn’t forget to make the browsing experience better with the drop-down menu and the share buttons.

Despite a positioning problem for one line of text in the header, this site looks pretty good. And it needs a bit more contrast with the smaller text below.

Interesting how the header area isn’t very big but attracts attention nonetheless with the floral vines, which is pretty much the only decoration on the site. And by the looks of the screenshot for registered users, the UI looks well done.

Here’s another typical scenario: if it’s a wedding photography site, it’s probably dark. That usually makes the photos pop. You’ll want the design minimal as well.

Or you can go light, remembering to stay neutral. The flowers used here are really pretty; they look almost as transparent as the main box. Love the whitespace.

I think the paragraph text should be darker and bigger. Other than that, I like that lots of elements on the site carry the scrapbook theme well, even the forum icons and calendar dates.

Has the feel of wedding invitation, but doesn’t go overboard. I love the second-level menu.

This one’s definitely a girly look. My problem with this site is it looks somewhat juvenile instead of elegant. Perhaps too sugary?

It looks almost underdesigned. But the fantastic part of this site is this: clicking on the arrows scrolls two panes (one for the images and one for the description) and changes the background to match what’s in the panes. Subtle but brilliant! (Tiny issue though: when you change pages, the default background flashes before it is replaced by the contextual one.)

Love the 3D effect going on below the blurbs, although it looks a little too light.

The odd one out of the group, with a completely different look that doesn’t really scream “wedding”. Looks quite savvy though, which does seem to match the feel of luxurious jewelry. I like how the buttons have a subtle background pattern to them. Then the logo reappears as a large watermark background in the bottom navigation, another nice touch.

Social Media Weekly

Design – Overcoming Creative Block

Accessibility – Social Inclusion for the Web

Programming – Explaining what YQL is to non-technical people

Whatever you personally think of Apple’s iPad, the thing will probably sell like hotcakes. And with wi-fi web browsing as its main feature, you want the sites you design to look great on the iPad’s browser. If they look okay on iPhone screens, just “okay” won’t cut it anymore- not with the large screen on the iPad. Here, some things to keep in mind for iPad-friendly web design:

Fluidity & Flexibility is important.

The iPad has a screen resolution of 1024 by 768- so if you, like most of us, have been designing with 960 pixels (or the 960 grid system), you should be fine. However, it’s important to note that the iPad can and will show your website in both portrait and landscape modes automatically- so having some fluidity or flexibility is a good idea. The multi-touch screen means that visitors will probably put your design to work, pinching and zooming and so forth.

Good Contrast and White Space is important.

Remember: it’s a touch screen. That means people will be interacting with their fingers. Some of these fingers are large- which is why it’s so important to make your clickable links as clear as possible. And use white space wisely- don’t group a bunch of tiny links together. They might be easy to click on with a mouse pointer, not so much with the tip of your finger.

Flash is less important.

The iPad doesn’t support Flash, and probably won’t anytime soon. Create less elements that are wholly dependent on Flash (and hey! We have tips for you!)

Testing is important.

Test, test, test. Until you get yourself an iPad, testing on an iPhone browser or on Safari in OSX is always a good idea. Test that your XHTML and CSS is valid, test whether javascript is supported, and so on.

How important do you think web design for iPads is?

It’s a few days to Valentine’s, and if you’re a designer, you’re probably creating your own Valentine cards or gift tags. To help you along, I’m featuring five of my favorite Valentine-themed design elements. They’re all available for download, and free! Let’s get to it:

Vector Hearts from DragonArtz

You could just download this and be done with it. There are 63 designs here in 2 eps files, wallpapers, and a bunch of pngs. The hearts themselves don’t really differ in shape- but it’s still some lovely work. Download Vector Hearts from DragonArtz »

Happy Valentine’s Day Icons (Mac OSX)

I’m partial to the “bleeding heart” icons, complete with dripping blood- but maybe that’s just me. In any case, these hearts are beautifully drawn, very useful (e.g. a card screaming “You broke my heart!” + bandaged heart icon) and also available as pngs. Download Happy Valentine’s Day Icons »

Free Hearts

Prefer your hearts a little glossier? This set, free from Spheres Graphics, is something I’ve found many uses for. The hearts are cleanly rendered, and come in 128×128 transparent png format. Download Free Hearts »

Heart Stamp Photoshop Brushes

I love the crafty scrapbooky feel these heart “stamps” lend to a project. This free download includes 4 brushes, with the entire 20-brush collection available for purchase. Also included for free is a pack of png images. Download Heart Stamp Photoshop Brushes »

Vector Heart Box

There are bad vectors and good vectors, and this one’s definitely the latter. Gorgeously rendered, the zipped file includes the Illustrator .ai file, and a 512 x 512 px transparent png. Download Vector Heart Box »

For those Valentine gifts to sell & buy, you must of course use Market Theme!

Do you design for Valentine’s Day?

Subtlety is the name of the game this week on Friday Focus. We’re featuring designs with light hues and textures for a relaxing, elegant feel overall.

Designs of the Week

Love the texture on the blurb itself, not just in the background. And the use of rotated spades as bullets? Lovely.

I really like the asymmetrical elements in this design. And it feels organic and warm as opposed to loud and bold—a different take on what design firm websites typically look like.

Airy, open design. What I could call a “pretty much perfect”!

I’m not sure what the reasoning behind a left-aligned design is, but it’s interesting to see that isn’t completely extinct. Also interesting: the ad placement on the left side.

Everything’s so nice and wide, including the neat dropdown menus.

I really like the way the edges of the “paper” layout have thumbprints on them, aside from the shadows and watercolor paint below.

The repeated use of the curly brace as a design element is a great touch.

Animated elements in headers are getting more popular too. I just think I want the navigation to have bit detail to it.

The only thing that bothers me is the way the button is designed. It’s very striking, yes, but I think it could be done better.

Love the stack of images that each comes to the front upon hovering.

Note how there’s not a whole lot of links in the header, and that they’re all big clickable things, which makes the visitor’s browsing choices dead simple.

A straightforward enough layout (it’s a tumblelog) but the background at the top makes all the difference.

Another watercolor-y approach, but you won’t tire of the details all over.

I think my favorite part here is the sidebar!

Social Media Weekly

Accessibility – Is Web accessibility a human right?

CSS – 47 Amazing CSS3 Animation Demos

Design – 5 Well Designed Icon Tutorials

Helvetica, that simple and beautiful and simply beautiful font, has gathered quite a cult following for itself. There’s the documentary film and several online quizzes (e.g. So you think you can tell Arial from Helvetica?), some of which I have to admit to have taken myself (hint: learn how to tell them apart here).

There’s this wallet:

which you can get for just $15 at Etsy in two colors: Helvetica Evil, (black with white text, shown above), and Helvetica Good (white with black text).

Then there’s the Helvetica tattoo:

“Helvetica modernized type as we know it today. It sends a message to people in a very noncontroversial way. You can’t judge Helvetica. Helvetica can say it all. It can say ‘I love you, I hate you, Will you marry me?’ in a way that communicates effectively and always looks good. Helvetica makes life simple.” – Antonea Nabors, explaining her tattoo

If you’re not quite ready for a tattoo, how about a poster?

Just one of the 45 “absolutely astonishing” Helvetica posters featured here.

And finally: Helvetica cookies!

The very awesome Beverly Hsu crafted these cookie cutters from aluminum and acrylic. I love.

How often do you use Helvetica?

Using less Flash was on my list of New Year’s Resolutions for Web Designers, and it’s something I’ve personally been trying to do for a long time. I say “trying” because many clients do request Flash, and there are some cases when nothing else will do.

Then, just yesterday, Steve Jobs said “No one will be using Flash. The world is moving to HTML5.”

Now, despite being a self-proclaimed Apple fangirl, I do think that Flash has it’s place online. The truth is, though, that depending on your needs, there are alternative ways of doing things. Let’s take a look at some of them:

Interactive Map (jQuery)

This jQuery plug-in allows you to build zoomable, interactive, absolutely awesome maps without Flash. Look at this demo to see just how awesome.

SmoothGallery (MooTools)

JonDesign’s image gallery and slideshow “system” is built with MooTools, with some gorgeous effects and an elegant interface that’s still fully standard-compliant. See the demo.

CSS Image Gallery

This one’s been around a long time, and is just one of many cool things you can do using pure CSS.

HTML5′s <video> element

Here at Devlounge, we’ve been excited about HTML5 for a long time now- and while we’re not completely there yet, it’s important to realize that we’re getting there. It all depends on what browser supports what. But for some examples, see Dailymotion’s HTML5 Video Demos, or join YouTube’s HTML5 Beta. Also highly recommended: go read Dive Into HTML5′s post on the <video> element.