Feature
Post

Category
Design Focus

Friday Focus 12/31/10: Go Big or Go Home

The last Friday Focus of the year is going to be all about big, bold designs. Time to go out with a bang!

Designs of the Week

Pierre Starkloff

I appreciate all the irregular shapes especially in the Social section. I also noticed that yellow and black is a popular color combination these days.

Oliver Kavanagh

Very ambitious and is a little on the chaotic side. I also find it a little confusing when the links go to a differently-designed site. This may be a business card-type site but it may be better if the identity is consistent, at least with a logo appearing in both places.

Utopic Farm's Experience Labs

Nice and airy. The animation at the bottom looks great.

Bethemiddleman.com

The illustrations, animations, and type look great in the top half, but the lower half and inner pages feels cramped in comparison, there’s a little disconnect going on.

Fusion Ads Holiday Bundle

A bit overwhelming because of the colors and type, but I love the infographic section below.

This After That

Another site with some infographics in it! I think because of the very light color palette it makes sense to lower the opacity a bit until you hover over the images. It’s a little confusing, though, to put the subsection tab navigation for Work at the bottom. What I do like is the tab on the side that lets you move between sections on this one page site. Makes me wish every site had it.

Steadfast Creative

It’s a little weird when the biggest things on a page are social media buttons, but I guess it has merit in this case.

The Design Koop

Good idea to keep the navigation fixed, but with the huge logo too? Not sure about that. The folded ribbons in the carousel navigation is a nice touch.

MO Blues

Love the grungy feel everywhere, mixed with ribbons and huge datestamps. Impeccable.

Social Media Weekly

Design2011: Time To Push Yourself
“Make sure 2011 (and every year after) is the year you expand your design and development toolbox. Make sure it is the year you take the time and effort to play with these new technologies so you can be prepared for the time they are available on all browsers.”

User Experience7 myths about paper prototyping
“Paper prototyping is probably the best tool we have to design great user experiences.”

Interaction DesignThe IxD Library
“The IxD Library is a collection of books, articles, and presentations of interest to interaction designers. It attempts to not be the definitive collection of every piece of content about interaction design, only the best and most influential.”

CSSAngled content mask with CSS
“In this article I will show you how to do create angled CSS content “mask”. The idea is pretty simple and it uses CSS transform property (rotation to be more precise).”

CSSRemote controlled hyperlinks (or multiple links in one hyperlink)
“What I wanted was a cool way of giving the impression of two separate links to the same page but also making clear that the two links both did the same thing.”

CSSCheckerboard, striped & other background patterns with CSS3 gradients
“What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more.”

CSSWebKit Image Wipes
“It’s not “spec,” but WebKit browsers support image masks. If you are familiar with Photoshop, they work like that.”

DesignThe JESS3™ Design Process.
“you should wireframe more than you design, you should design more than you code. design twice, code once.”

Feature
Post

Category
Design Focus

Friday Focus 12/24/10: Scroll & Peekaboo

Merry Christmas Devlounge readers! This week’s Friday Focus features designs that tell awesome stories with scrolling and now-you-see-it-now-you-don’t effects.

Designs of the Week

Ben the Bodyguard

I really don’t have much to say about this except that it’s so addictive! The animations and illustrations are fantastic. This is just a “coming soon” website, but I don’t want them to change it when the product officially launches.

Rob Edwards

Predominantly black and white/gray so the colors from the portfolio stand out. Love the carnival theme and its rich ornate typography.

Design Made in Germany 5

A lot of nice things at play here: lovely layering, social media hidden until hovered over, infinite scrolling, translucency, custom type everywhere, and a completely fluid layout. It’s an edgy approach to web-based magazines.

Javascript für Designer Workshop

Simpler than the others but equally impeccable, with abundant amounts of whitespace. The embossed effect of the logos in the footer is a very nice touch.

Just a Few Cards

Besides the excellent mailbox animation, I really like the card previews. It’s interesting how the add to cart buttons have both plus and cart icons in them.

The Open Internet

This site reads like a vertical storybook, with captions changing for each screenful. The “why is this important?” section is also a nice implementation of the ordered list.

Social Media Weekly

TypographyHappy Holidays from TypeKit
Read how they made this website here.

JavaScriptMerry Christmas in 1KB of JS
View more Christmas 2010 demos here.

ContentThe Twelve Days of Contentmas
“This is a simple little plan to make sure that your personal site, blog or portfolio is not just looking good at the end of these twelve days, but is also a really useful repository of really useful content.”

Feature
Post

Category
Publishing

10 CMS That Are Not WordPress

WordPress is the most popular CMS currently, WordPress focused entries garner more attention then other topics. Even though we like WordPress a lot or not, it’s always good to know what other options there are out there.

I chose some of the most known one next to WordPress to the most obscure ones. Varying form flat files to full mySQL database. Ones that require almost no knowledge to get up and running, although most CMS now a days are becoming more and more easily to install(not Movable Type).

Should it happen you are in a spot where you are not able to use WordPress, check out these 10 CMS that differ greatly from each other.

Zimplit

Zimplit is the easiest CMS (Content Management System) ever made.
Zimplit is extremely lightweight, simple and customizable. It’s easy to install, and easy to use via a simple web interface. Zimplit consists of only one core engine file

* Price: Free
* Server Language: PHP v-4.x
* Database: No
* Self-Hosted: Yes
* Plug-ins: No. But themes are available.

SkyBlueCanvas

SkyBlueCanvas Lightweight CMS is an open source, free content management system written in php and built specifically for small web sites.

Lightweight and simple does not mean simplistic, however. SkyBlueCanvas includes a lot of the same basic abilities as more robust systems but in a simpler form. The software is not meant to be all things to all users but it does offer features you expect like a familiar Plugin API, Extensibility and skinnability.

* Price: Free
* Server Language: PHP v4-5.x – Only Linux Servers
* Database: No
* Self-Hosted: No
* Plug-ins: Yes

razorCMS

razorCMS, the flat file content management system, that can be as small or large as you wish. It’s structure allows you to have just the amount of functionality you need in a flat file CMS solution, helping to keep speed and simplicity at a maximum. razorCMS is ideally suited to small to medium website projects, it can be run without need for a SQL database, due to it’s flat file structure it has no need for a database meaning it can also be a cost effected method in content management, allowing it to be used on the cheapest of web hosts, or even free hosting.

* Price: Free
* Server Language: PHP v-5.x
* Database: No
* Self-Hosted: No
* Plug-ins: Yes

LotusCMS

LotusCMS brings to the forefront design and design integration into one of the most neglected CMS niches – Databaseless Web-Design and Development.

* Price: Free
* Server Language: PHP v-5.x
* Database: No
* Self-Hosted: No
* Plug-ins: No.

TypePad

TypePad blogs make it simple for you to share your interests and get noticed.
Easily design and customize your own blog, and use our SEO (Search Engine Optimization) and SMO (Social Media Optimization) tools to promote your blog and attract an audience and following.

* Price: Paid + Free Trial
* Database: Yes
* Self-Hosted: Yes
* Plug-ins: Widgets and Themes

Movable Type

It’s easier than ever to publish and share information with Movable Type. Movable Type makes it simple to manage entire websites, start new blogs, and build an engaged community of readers and customers.

* Price: Free + Paid
* Server Language: Perl
* Database: Yes
* Self-Hosted: No
* Plug-ins: Yes and Themes

Nucleus CMS

Nucleus CMS is a flexible and easy to install content management system, aka blog software. It helps you to publish a website and lets writers do what they are best at: writing items or articles, without having to worry about formatting and markup.

* Price: Free
* Server Language: PHP 4.0.6 or higher
* Database: Yes
* Self-Hosted: No
* Plug-ins: Yes and Themes

b2ecolution

b2evolution is a powerful blog tool. It includes all the features of traditional blog tools, and extends them with evolved features such as file & photo management, versatile skins, multiple blogs, detailed user permissions… not to mention plug-ins, of course.

* Price: Free
* Server Language: PHP version 4.3.2 or higher.
* Database: Yes
* Self-Hosted: No
* Plug-ins: Yes and Themes

Drupal

Use Drupal to build everything from personal blogs to enterprise applications. Thousands of add-on modules and designs let you build any site you can imagine.

* Price: Free
* Server Language: Recommended: PHP 5.2 for Drupal 5 and 6, PHP 5.3 for Drupal 7 Required: PHP version 4.4.0 or higher.
* Database: Yes
* Self-Hosted: No
* Plug-ins: Yes and Themes

Textpattern

Textpattern is an open source content management system unlike any other; it allows you to easily create, edit and publish content and make it beautiful in a professional, standards-compliant manner.

* Price: Free
* Server Language: PHP 4.4.1+ or 5.0.2+, in mod_php or fastcgi mode.
* Database: Yes
* Self-Hosted: No
* Plug-ins: Yes and Themes

Feature
Post

Category
Design Focus

Friday Focus 12/17/10: Curious Creatures

This week on Friday Focus: interesting monsters that are featured as mascots of these designs.

Designs of the Week

El Designo

Love the big header that changes for every page; the illustrations are not cliche and the wrestling concept is well thought out.

Sara Tušar Suhadolc

Looks like cute little monsters are her specialty, but I have to wonder why there’s no big brand beside the pink blob. Feels like that’s the only thing missing on this page.

Denise Chandler

The implementation of the scribbly look all over is just excellent. There’s also a bit of subtle line direction in the background. The strength of the design also lies in its conciseness.

Castings Online

Pretty polished website, but I feel like the creatures were just left in one place and then forgotten.

Tijuana Flats

Mind-blowing on imagery alone, but look closer and see how every interface is custom. From the tongue menu to the slot machine donation counter to the handwritten body font. Truly immersive.

Easy Peasee

Nice and clean, but I feel like the links on the side could be placed right after the welcome blurb, which has an awful lot of whitespace below it.

Samuel Brunet

Very interesting arrangement and controls for the portfolio section. There are arrows in almost each section to encourage you to keep scrolling down. Again, the creatures seem completely forgotten after the first screenful.

Social Media Weekly

ConferencesOn Speaking
“The people that get up to speak in front of an audience are no different than the people sitting in the audience. The only difference is that they’ve said yes.”

DesignThe Anatomy of a Perfect Landing Page
“Ten key landing page features that draw in users”

DesignWhere to Find Fonts that Allow @font-face Embedding
” Just because the font vendor gave you the font for free doesn’t mean you can redistribute it. Same thing with the fonts that came with your computer. Again, you have to check the license to be sure.”

HTMLHTML Lint
“HTML Lint is a tool that makes sure your code looks good. While XHTML was very strict with syntax HTML 5 is more lenient like previous versions of HTML, which means keeping consistent code styles will become more difficult. Validating is not good enough anymore.”

CSSCSS Without HTML
“I’d call this a bonafide CSS trick!”

JavaScriptFront-end developer essentials – 5 tips for efficient jQuery
“Over the last few months I’d like to think my skills in jQuery have got a lot better, I’ve been using it everyday and for more than just showing and hiding areas of a page. Along the way I’ve read about a few ways in which you can make your code a bit more efficient.”

Feature
Post

Category
Design

10 Christmas Icons and Photoshop Brushes

Following last week Photoshop Christmas Tutorials, are icons and brushes. With nine days till Christmas you still have some time to design cards, wallpapers, table seating cards, gift cards, etc. The great thing about Christmas icons and brushes is that the design doesn’t go out of fashion fast.

You can use icons and brushes designed this year or five years ago, depending on which style you are going for, classic or modern. To complete your resources you’ll need fonts, dafont has a special Christmas category that will help you find a nice and free font right away.

Hopefully last week tutorials and these resources will help you along to create great Christmas designs!

Christmas XP

Christmas Icons and Brushes

Icons for your desktop, dock or just plain PNG files to use in a design.

Christmas Holiday Icons

Christmas Icons and Brushes

Vector(EPS) format, PSD, GIF, PNG and ICO if you want to use them as favicon for your website.

Christmas Icons

Christmas Icons and Brushes

BMP, PNG, GIF and ICO ranging from 16×16 pixels all the way to a huge 256×256 pixels.

Christmas Icons 2

Christmas Icons and Brushes

PNG format, size 512×512. One icon is whole card on itself!

Silent Night Christmas icons

Christmas Icons and Brushes

Snowflakes Brushes

Christmas Icons and Brushes

Snowflakes Brushes 2

Christmas Icons and Brushes

Christmas Brushes Vol.1

Christmas Icons and Brushes

Christmas Brushes

Christmas Icons and Brushes

Celestia

Christmas Icons and Brushes

Feature
Post

Category
Design Focus

Friday Focus 12/10/10: Darkly Textured

This week’s Friday Focus is all about light on dark designs that use subtle, even elegant textures.

Designs of the Week

Texture Lovers

Love the stitching effect with the mixed textures. The placement of the color switcher is a little awkward but the rest of the details are great, see the “exclusive” ribbon and the thumbnail frames.

Corking Design

I like the subtlety of the left-aligned layout, it’s not apparent until you browse the inner pages but the result looks good. Of course, textures are a great way to break the strict look of a strong grid design.

Humzaijaz

I like how the logo blends in with the background to also give it texture. Love the frame and hover details.

Lemon Oak

Nice hover effects and the mix of the icons with the sketchy, chalk-like touches.

Cicero

The slideshow illustrations have a distinct look but all match. I think it would be even better if you could see those characters on the rest of the site.

Intense Engineering

I find it interesting how the slogan is on the left, almost like a secondary logo. Love the design of the lightboxed slideshows everywhere. The design does not miss any opportunity to add techie details.

Every Pixel Counts

This design makes quite the impact, but I have to wonder if they should’ve put up the agency description higher. I like the hover effects on the images and the infographics in the Skills page.

Creative Soapbox

The quality of the slideshow illustrations combined with the vertical switching effect just feels really fresh. (It certainly makes more sense than horizontal sliders that have that weird part where they disappear into nowhere.) The fine borders and shadows you’ll enjoy most in the Blog section.

Social Media Weekly

User ExperienceThe Coming Zombie Apocalypse: Small, cheap devices will disrupt our old-school UX assumptions
“This problem is simple, but pernicious: designers think of new technologies in terms of yesterday’s tasks, failing to clearly see the real potential of the new technologies.”

DesignFree Web Design Toolkit
25 beautiful and interesting photographs; 27 background images, textures and patterns; One icon set for your site nav

Feature
Post

Category
Design

11 Festive Christmas Photoshop Tutorials

Sixteen days until Christmas, time to get those digital Christmas cards designed and e-mailed. It’s equally personal to design your own card from yourself or your company to mail to others as it is sending a regular card signed by you. Personally I tend to do both, digital and regular card.

The holiday season is a perfect excuse to spend hours(more then you already do) in Photoshop designing and trying out new things. You’ll do extra your best knowing you’ll be sending the results to friends, family and clients.

With some seasonal colors, a nice Christmas saying besides the usual, “Merry Christmas” and with a great Photoshop tutorial you can create a wonderful card. Instead of e-mailing the card, you can post it on Twitter, Facebook and your website.

I selected some easy and great tutorials to help you along in creating your own personal Christmas card.

Merry Christmas Tree Design

Christmas Photoshop Tutorial

Creative Christmas Card

Christmas Photoshop Tutorial

We wish you a Merry Christmas

Christmas Photoshop Tutorial

How to Create an Enchanted Holiday Ornament Design

Christmas Photoshop Tutorial

Design an Awesome Christmas Tree

Christmas Photoshop Tutorial

Create a Beautiful Christmas Card

Christmas Photoshop Tutorial

3D Snow Globe

Christmas Photoshop Tutorial

How to Create Candy Cane Typography with Photoshop and Illustrator

Christmas Photoshop Tutorial


How to Create That Last-Minute Holiday e-Card in Photoshop

Christmas Photoshop Tutorial

How to Create a Simple Snowman GIF Animation

Christmas Photoshop Tutorial

Snow on Text

Christmas Photoshop Tutorial

Taking some tips and tricks from a couple of tutorials to create this simple greeting card. Snow on text is a classic and favorite of mine.

Feature
Post

Category
Design Focus

Friday Focus 12/03/10: Color Swatches

It’s another round of colorful websites on this week’s Friday Focus, but this time they’re done in discrete blocks at the edges of the designs.

Designs of the Week

Design Blogs

This is what could be considered a vertical design, which more people should be doing since sites are actually tall, not just contained in a single screenful. It also feels narrow but in a good compact way.

Medis Kök & Bar

I love the color block effect in the inner pages. Not too thrilled that even paragraph text is in the condensed uppercase font that people are so fond of these days but other than that the arrangement of information on this site is excellent.

Emily Whitesmith

This homepage makes quite an impact showing off one’s wares in an artful way. The uncovering effect is also nice.

Houtos

This looks extremely fun and inviting for a service provider, but not a very good idea to repeat the pattern on the logo, which now looks drowned out.

Hugs for Monsters

The illustrations look great but I feel they could be better integrated into the design. The Work section, for example, display thumbnails of the portfolio on top of the header illustration and it’s overpowering them.

Sérgio Oliveira

Another thing I noticed, a lot of people into gray all over the design. But it’s nicely offset by these bright colors here. Bonus points for integrating the Konami code.

Social Media Weekly

DesignA Little Bit About Enthusiasm and Hype
“I did a workshop last week at the wonderful Build conference on Enthusiasm, and more specifically, how to get people enthusiastic about the work one does. And I forgot to say the most important thing.”

DesignYou can’t grow, unless you bow low.
“Here are some pointers on taking and giving constructive design criticism.”

HTMLOn the hgroup element
“The more I try to explain it to people at workshops and in a marvellous book, the more uncomfortable I become with <hgroup>.”

HTMLThe shortcomings of HTML5
“As professional Web designers and developers, we can use and support HTML5, but at the same time we need to be able to discuss the shortcomings and limitations of the technology.”

CSSKeep Margins Out of Link Lists
“The simple truth: bigger link targets are easier for people to click and lead to better user experience.”

Feature
Post

Category
Code

10 Old and New Useful WordPress Comment Plug-ins

It’s always good to revise what plug-ins are out there that might been forgotten or new ones that are not very popular. The popularity of Twitter has had some impact on comments on weblogs. A lot of people rather make their comment on Twitter then on the actual weblog or website.

The challenge is to bring back discussion to your weblog without denying the new. I listed a few plug-ins that aim to have users comment made on Twitter posted on your weblog or to Tweet the comments made. Also a few oldies that are still working well but are being used less, especially the comment preview. If a weblog has a preview option I always use it.

Akismet is not listed as it comes default with WordPress. Using Akismet is a must, thanks to Akismet the spam that get through is minimal. If you have a low comment traffic I would advice that you use comment moderation. It’s what I do, a couple minutes of work a day keeps spammers away.

CommentLuv

WordPress Comment Plug-in

This plug-in will visit the site of the comment author while they type their comment and retrieve a selection of their last blog posts, tweets or Digg submissions which they can choose one from to include at the bottom of their comment when they click submit.

Comment Rating

WordPress Comment Plug-in

Allows visitors to rate comments in Like vs. Dislike fashion with click-able images. Poorly-rated & highly-rated comments are displayed differently

Facebook Comments for WordPress

WordPress Comment Plug-in

Allows your visitors to comment on posts using their Facebook profile. Makes use of Facebook’s new Social Graph plugins.

Greg’s Threaded Comment Numbering

WordPress Comment Plug-in

Numbers comments sequentially and hierarchically; handles comments which are threaded, paged and/or reversed. Coders can call the function directly.

Quote Comments

WordPress Comment Plug-in

Creates a little quote icon in comment boxes which, when clicked, copies that comment to the comment box wrapped in block-quotes.

Simple Twitter Connect

WordPress Comment Plug-in

Simple Twitter Connect is a series of plug-ins that let you add any sort of Twitter functionality you like to a WordPress blog. This lets you have an integrated site without a lot of coding, and still letting you customize it exactly the way you’d like.

Twitter Mentions as Comments

WordPress Comment Plug-in

Twitter Mentions as Comments does exactly what it promises to do – scours Twitter for people talking about your blog posts and silently inserts their Tweets alongside your existing comments. The plug in leverages the power of WordPress’s built-in commenting system – notification, comment moderation, author white/black listing – making Twitter an extension of your blog.

AJAX Comment Preview

WordPress Comment Plug-in

Visitors to your site can preview their comments with a click of a button.

Live Comment Preview

WordPress Comment Plug-in

Live Comment Preview is the simplest way to get live comment previews on your site.

Commentwitter

WordPress Comment Plug-in

Gives commenter the option of Tweeting their comment with a link to your post.