Feature
Post

Category
Design Focus

Friday Focus 08/27/10: (Mostly) Black and White

I’ve noticed a lot of designs with a mostly black and white color palette lately, and not just for site types you’d expect. Is the colorful, rainbow trend being phased out with something more classic? Are people tired of safe, middle-ground gray? Welcome to this week’s Friday Focus.

Designs of the Week

Quartel Design

It’s interesting how even the background is a strong black and white graphic.

Larissa Meek

Lots of other trends here: folded ribbons, subtle noise texture, and centered logo. Note how the social buttons and feed subscriber count come before the navigation; guess that’s what’s more important on this site!

Simple Square

Just as simple and minimal as the color palette.

Little Black Dress Society

Love the hanger icon on the current navigation item, and the feather in the drop-down menu.

David Perel

Yellow as accent for black and white designs start here. And are you for or against sidebars?

iFontMaker

Screenshots and product shots are getting bigger and bigger. I vaguely remember them occupying one-third of the page but now it’s half.

Made By Water

I like how light and playful this looks, including the irregular pattern in the background, and the recurring circles.

Elementic-Interactions

Great breathing space between everything.

Eric Johansson

It’s so clever how when you hover over the a navigation item at the top, it also affects the navigation at the bottom (not pictured). Also note how the browser frame in the portfolio carousel is abstracted and black.

Quotivate Me

The amount of gradients here is a little strong but I think it works. Perhaps it’s just the text in the lower half that could be improved.

Bombardier Studio

A little bit of alignment issue but as usual I love the whitespace.

Keith Bates

Still not a big fan of the noise texture trend but it’s slowly warming up to me. Here it looks warm and fuzzy!

Monsoon Company

The post navigation here is a wonderful idea, but the arrows could be a little more obvious and closer to the center post.

dodaqueen.com

What a nice idea to put the slideshow on the top right across vertical navigation, and place your name big front and center. Memorable branding.

Build Conference

I love how the nut on the logo repeats on the ticket icon.

KISSinsights

The video area doesn’t really work for me but everything else looks nice.

Paper Wireframes

More and more I’m seeing a layout divided in halves instead of in thirds.

The Jacket Room

The design is compelling although as a website design, not so much. I would have loved to see more.

Jose Luis Merino Parra

The mix of patterns and the interactions feels nice, but I don’t understand why you have to hover twice to navigation: first to make the designer name appear, then to make the menu appear.

Telegramme Studio

Big, bold, but still clean and easy to read.

Social Media Weekly

Accessibility How do we save longdesc?
“The longdesc attribute, although potentially useful, was removed from the HTML5 specification, despite recommendations to retain it from the HTML Accessibility Task Force.”

UsabilityDarkPatterns.org
“This pattern library is dedicated to Dark Patterns: user interfaces that have been designed to trick users into doing things they wouldn’t otherwise have done.”

Usability You’re a failure: Deal with it
“Every website has points of failure. It is inevitable. The question is do you know what they are and are you doing something about them?”

CSSCSS3 Playground by Mike Plate
WYSIWYG CSS3 code generator.

JavaScriptPaintbrushJS
“A lightweight browser-based image processing library”

Feature
Post

Category
Code

10 Useful Lesser Known WordPress Plug-ins

There are countless of posts that highlight great WordPress plug-ins and after sometime you keep coming across the same ones over and over again. The fact is that no matter how good or great these plug-ins are sometimes they are just overkill for your needs. Once a plug-in is popular developers will mostly keep expanding its features to satisfy all its users.

For a change I decided to look around what other plug-ins there are out there that are almost never mentioned and I came across more than two that I will be using on my own WordPress install. Especially wp Time Machine and Simple SEO are plug-ins I can’t believe I didn’t know about.

Check out these 10 plug-ins for different purposes.

More →

Feature
Post

Category
Design Focus

Friday Focus 08/20/10: Skylines

This week on Friday Focus: designs that feature artistic renderings of skyscrapers and other features of a long landscape. See how they’re incorporated below.

Designs of the Week

Ian Hill

Great grungy attitude all over, even the shiny buttons have a bit of smudge on them. Nice little detail: I like how the carousel’s right arrow changes into a square block to indicate there are no images left to view.

LaunchMind

Love the easy feel from the pastels, gradients, rounded corners, and happy illustrations. The “add your company building” feature is also a great concept for the purpose of this website.

Milsoft Users Conference

Bold and high contrast. Even the borders and background patterns are rugged and chunky.

Community Almanac

The animated stack of books is really clever, and clicking loads a page where the books is opened.

Bug Interactive

Love the non-rectangular frame for the carousel—I’m seeing more of these lately. Body text is a little to small though.

Web Agency France

The open, airy header area looks great. This is also a rare gem of a liquid layout.

İstasyon Tasarım

Interesting fisheye (a.k.a. OS X dock) hover effect on the navigation, though I can see not-so-seamless texture tiling!

Lake Hills Church | Greater Things

I like how all the clickables are so big yet still look minimal and refined. It’s all in the type and colors, right?

CAD Website Design .com

Great treatment on the contact form and the image frames. Textures all over!

New York New York Web Design

I seem to have a lot of grungy designs this week, and I’m not complaining! Love the way the sections are divided, with blocky headers and thick borders of stars.

Urban Roots

Spacing needs a little work in the featured images area, but the header navigation animations are adorable. This site is so warm and friendly.

Kamal Mirza

Good idea to use the neightborhood skyline as a divider for the different sections in this one-page site. Although I think the black background is a big disconnect from the light blue one at the top.

Jeff Everson

Not a fan of the lens flare, and the featured image could have been a slideshow/carousel instead.

Jarnheimer Productions

Lovely animations, and I like the way the skyline is in a corner instead occupying the whole width of the screen.

BigDeal.si

I wish the quirkiness of the header illustration and logo carried over to the rest of the design.

Mospromstroy Group of Companies

Beautiful, beautiful illustrations of the Moscow skyline. The scrollbar navigation for the image works well too. I wish they were a little more interactive though, with tooltips or links. And hooray for another liquid layout.

Main Line Restaurant Week

The header canopy is a nifty touch to the header design. Love the mix of patterns too.

Social Media Weekly

DesignPerception and the design of forms – Part 4: Figure/ground
“In this article we are going to explain the principle of figure/ground, which is surprisingly central to how forms work. More often than not this principle is—unintentionally—applied well. But we’ll also show you a few examples of when it isn’t.”

ProgrammingSemantics and sensibility
“For a while now, sensible naming conventions and semantics have been confused.”

MobileHOW TO: Make Your Mobile Websites Act More Like Native Apps
“Fortunately, a number of different frameworks are making it easier and easier for developers to create mobile web applications that look and feel more like native apps. Here are six examples.”

Feature
Post

Category
Design

20 Great Free Photoshop Brushes

Every designer should have a folder full of ‘tools’ to design. Just having Photoshop and knowing how to use it is not enough. You should have folders full of fonts, vectors, and brushes.

When used with the right effects, think lightening, gradient, etc., photoshop brushes are a very
easy way to enhance your design. If you are not a ‘rock star’ designer Photoshop attributes like brushes and vectors can help you come a long way with your design.

More →

Feature
Post

Category
Design Focus

Friday Focus 08/13/10: Let Your Garden Grow

This week on Friday Focus: vines, blooms, and other foliage that do a great job of framing your website.

Designs of the Week

Rancho La Peregrina

When doing vines on a sky background, it doesn’t make much sense to have drop shadows, does it?

Мария Папазова

The gradient on the tabs are a little severe but the translucent ones look great. I kind of want more blue in the background though, feels too white.

Bénestar

The use of fixed-width type is curious, but I like the mixed textures. The actual photo of a basket for a shopping cart icon is priceless.

Carlos German and Team

The Quick Search box looks a little cramped; the Map Search could be more accessible.

Vinarija Malec

Some nice watercolor textures here although again the shadows get to me. A little bit of a split layout going on below.

84Colors

The subtly moving leaves (and the squirrel’s tail) look great—they barely call attention to themselves so when you do notice them, they’re a nice treat. Attention to detail everywhere.

Sprouter

I like how the leaves are behind the large sign up button.

David Gheorgita

Something more ornate and abstract. I feel a disconnect between the gray-black top and the brown bottom, though.

Justin Woods

Another disconnect here. The header is awesome—there’s a bear! carrying a sign!—but the bottom is just too light and doesn’t even carry any hint of nature in it.

Island Dentistry Laguna Beach

Beautiful design. Not sure what a music player is doing on a dentist site, but perhaps they thought it would be a fun little touch.

Layla Grace

The flowers look so pretty I they weren’t just in the background. The turquoise is a nice contrast to the floral hues of pink and peach.

Ivan Signorile

I like how the leaves are used as frames for the circular icons here.

Mystic Club

Love the purple and fuchsia, it even matches the club photo on the front page. Centered logo alert!

Splendour in the Grass

Make sure your eyes are well-rested before you view this site; every color of the rainbow seems to be on here. The content area could have used at least a translucent background to make the text more readable, which is already so small.

Social Media Weekly

UXDesigning with Paper Prototyping
“The basic premise of this method is that a paper prototype of a feature’s UI is crafted and then given to a user who will attempt to complete a task or a scenario. Evaluators record and analyze the results from these sessions, which are then used to create another prototype.”

AccessibilityMisguided accessibility: access keys
“These days, accessibility experts recommend strongly against the use of access keys, instead putting focus on accessibility enhancers such as “skip-to” links and clear navigation and layout, fully tested with assistive technologies like screen-readers.”

AccessibilityWhat should be the minimum / maximum length of alternate text?
“Putting undue length restrictions on alternate text can undermine the quality of alternate text, limit the amount of information conveyed to readers, and can affect the style of writing in a way that inhibits comprehension.”

UsabilityShlock and Awe: Little Things on Your Website that Drive People Nuts
“No website will ever be perfect (unfortunately), but we’ve compiled a list of little tweaks and changes you can check on your website to make sure you’re not irritating your visitors.”

JavaScriptCommonly Confused Bits Of jQuery
“jQuery brings to the party its own API, featuring a host of functions, methods and syntactical peculiarities. Some are confused or appear similar to each other but actually differ in some way. This article clears up some of these confusions.”

Feature
Post

Category
Code

7 Very Handy Shortcodes for WordPress

One of WordPress greatest feature since version 2.5 is shortcodes. All themes comes with a function.php file. You just have to put the shortcodes in your themes function.php and you can start using them.

Shortcodes are handy for features you want to use in your posts but not in all of them. Plug-ins usually are standard applied on all your posts. With shortcodes you get to be selective and it saves some typing.

I listed 7 plus shortcodes that comes in handy in your daily or not so daily posting routine. The last shortcode, StumbleUpon, is provided by me. A very simple shortcode that can be easily modified for use with other social media links.

Display Google Ad Sense anywhere in your posts

function showads() {
  return '<script type="text/javascript"><!--
google_ad_client = "xxxxxxx";
google_ad_slot = "xxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
';
}

add_shortcode('adsense', 'showads');
[adsense]

Replace the Javascript with your own Google Ad Sense Javascript.

Source

Show Members Only Content

Visitors

add_shortcode( 'visitor', 'visitor_check_shortcode' );

function visitor_check_shortcode( $atts, $content = null ) {
     if ( ( !is_user_logged_in() && !is_null( $content ) ) || is_feed() )
        return $content;
    return '';
}

[visitor]

Some content for the people just browsing your site.

[/visitor]

Members


add_shortcode( 'member', 'member_check_shortcode' );

function member_check_shortcode( $atts, $content = null ) {
     if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
        return $content;
    return '';
}


[member]

This is members-only content.

[/member]

Source

Add private notes to your WordPress blog posts


add_shortcode( 'note', 'sc_note' );

function sc_note( $atts, $content = null ) {
     if ( current_user_can( 'publish_posts' ) )
        return '<div class="note">'.$content.'</div>';
    return '';
}


[note]
This is a personal note that only admins can see!
[/note]

Notes will be displayed in

<div class="note"></div>

making it easier to style them in your stylesheet. Off course you can change the HTML in function sc_note to your own liking.

Source

Protect an email address from spam

*Not 100% foolproof


function munge_mail_shortcode( $atts , $content=null ) {

    for ($i = 0; $i < strlen($content); $i++) $encodedmail .= "&#" . ord($content[$i]) . ';';

  return '<a href="mailto:'.$encodedmail.'">'.$encodedmail.'</a>';

}
add_shortcode('mailto', 'munge_mail_shortcode');


[mailto][email protected][/mailto]

Mail is shown as &#101;&#109;&#97;&#105;&#108;&#64;&#101;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;
in the source.

Source

Display a Flickr badge in your posts

*Requieres PHP5


function flickr_badge_shortcode($atts){

//Here's our defaults
$query_atts = shortcode_atts(array('count' => '6', 'display' => 'latest', 'source' => 'user', 'size' => 't', 'user' => '', 'layout' => 'x', 'tag' => '', 'group' => '', 'set' => ''), $atts);

    return sprintf('<div class="flickr_badge"><script src="http://www.flickr.com/badge_code_v2.gne?%s" type="text/javascript"></script></div>
', http_build_query($query_atts));
}

add_shortcode('flickrbadge', 'flickr_badge_shortcode');


[flickrbadge count="4" layout="h" display="latest" size="t" source="all_tag" tag="fish"]

Source

Display your own Flickrbadge


    $flickr = '<div class="flickr_badge"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&amp;display=latest&amp;size=s&amp;layout=h&amp;source=user&amp;user=xxxxxx"></script></div>';

   return $flickr;
   }

add_shortcode('latestflickr', 'flickr_badge_shortcode');

Change the parameters in the Javascript; count=6&display=latest&size=s&layout=h&source=user&user=xxxxxx or use the Flickr Badge generator and choose HTML badge.


[latestflickr]

Dynamic permalinks

The advantage of using a ‘dynamic’ permalink is that you are not using a relative link to other page or posts. This way of you change the title of a post or page later on the links will still work as they are dependent on the id not on the slug.


function permalink_thingy($atts) {
    extract(shortcode_atts(array(
        'id' => 1,
        'text' => ""  // default value if none supplied
  ), $atts));
 
  if ($text) {
      $url = get_permalink($id);
      return "<a href='$url'>$text</a>";
  } else {
       return get_permalink($id);
    }
}
add_shortcode('permalink', 'permalink_thingy');


<a href="[permalink id=49]">Using without providing text</a>

Source

Add Stumble or other social media buttons


function stumble_shortcode( $atts ) {


$stumble = '<div class="stumble"><script src="http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=">// <![CDATA[">// ]]></script></div>';


return $stumble;
    }

add_shortcode('stumble', 'stumble_shortcode');


[stumble]

Using this shortcode example of StumbleUpon you can create your own buttons for different social media such as Reddit, Facebook, Delicious, etc.

This is very handy if you do not want to use a social media plugin that automatically adds buttons to all your posts. If you rather be selective with promoting your content using different social media per post then this shortcode is the solution.

Feature
Post

Category
Design Focus

Friday Focus 08/06/10: Sidebar Focus

Where sidebars are not an afterthought, and even steal the show. Happy Friday Focus!

Designs of the Week

Rapportive

Sometimes your product doesn’t have to be presented in a MacBook, Cinema Display, iPhone, or Safari screen. You can just nudge it to the side of your layout and it will still make quite the impact. The bright shades of blue also help, and bonus points if that’s actually a jab at that “41 shades of blue” incident at Google.

Wez Maynard

I like everything going on this page. I find it interesting that there are at least four different typefaces used in this design, but blends in nicely. Also check out how the contents of the sidebar change by page.

Læms e livet

I enjoy the generous serving of whitespace and the very subtle watermarks slash section dividers.

No More Dedicated

Great treatment on the video thumbnails and makes me wonder why not more people are doing it. Big chunky text, arrows, and buttons for a forceful first impression.

Joyent

I love how simple this looks, something atypical of technology-focused sites. Brilliant icons, strong grid.

The Tweed Band

Pretty generic looking, but I like two things here: first, the actual use of tweed; second, the tooltip action on the photographic background.

dConstruct 2010

The photo wall is neat, and so is the folded motif sprinkled around the site. The green “sidebar” behaves like a deconstructed box—get it?

Wake Up Walk Out

Using cyan and magenta together is like asking for trouble, but I don’t mind it here. This site is trying to be as eyecatching as possible, and it’s using bold fonts, bold hues. I like that you can see swatches of the site’s color scheme spill over to the hand-drawn illustrations in each section.

Social Media Weekly

User ExperiencePagination, a thing of the past?

JavaScriptShowing Off bit.ly Clicks of Your Posts With jQuery

ProgrammingWill the Real Browser Stats Please Stand Up?

Feature
Post

Category
Code

10 Awesome HTML5 Canvas Examples

There has been a debate waging some time already about the use of Flash or HTML5 Canvas, which became pretty intense when it became obvious that Apple would not support Flash on its mobile devices. With big websites slowly implementing canvas, the constant updates from browsers(dear IE excluded) and the gaining popularity of HTML5 the debate is still ongoing.

The use of canvas still needs to take off, right now it is still in a ‘trial’ stage due to browsers limitation and lack of wide resource of code and tutorials. Canvas is in its childhood but growing up fast.

If you like animation, games and a good coding challenge check out these canvas demos and experiments to get some inspiration and learn how to code your own.

Asteroids – HTML 5 Canvas and JavaScript demo

asteroid canvas

A highly addicting game now in your browser without Flash. In my case there was no loading time or lag whatsoever. I had to make myself stop playing to keep working on this list.

Molecule Rotation

molecule canvas

If you are interested in science, medication and molecules this is one cool canvas animation. The work that must have gone into this, not only the coding but the actual data.

3D landscape on HTML5 Canvas

3dlandscape canvas

Remembers me of the matrix, the colors and flow.

HTML5 Canvas and Audio Expression

expression canvas

Try viewing it with your browser on full screen mode.

Blob

blob canvas

Right click changes the blob and colors, a nice experiment.

Colorful Tracking and Circles

tracking canvas

According to the maker this one started as a tracking experiment, this gives you an idea of what all is possible.

HTML5 Kaleidoscope Experiment

kaleidoscope canvas

The title says it all. A full screen version with auto play would be wonderful.

Visualization

visualization canvas

This one totally reminded me of when Winamp was popular, I loved the visualizations that came with it.

Browser Ball

browser ball canvas

The most simple and inventive yet, bounce the ball in between browser windows.

Mesmerizer

mesmerizer canvas

Reacts on mouse gestures and keyboard input.

These examples can be very intimidating but they show the full potential of canvas. Four your own website or web app canvas can be useful for a progress indication, a content loading spinner, etc. Like I said before the resources(books, code, tutorials) are still slim but growing fast.