Design Focus

Friday Focus 11/25/11: Diamonds

Hope everyone had a lovely Thanksgiving! This week’s (black) Friday Focus shines the spotlight on sites that use diamonds (or rhombuses) as a major graphic element in their designs.

Designs of the Week

Tofutask website


There are only a few elements on this page because it’s still in “coming soon” status, but it looks pretty compelling nonetheless. There are floating diamond particles moving upwards in the background, then the two blue blocks link out to Facebook and Twitter respectively. Clicking on the bottom diamond expands it and hides the other three. I still wish there were a preview of the product somehow though.

Gleb Leksikov's website

Gleb Leksikov

What I really like about the diamond trend is that it appears to turn websites on a 45-degree angle and lets you play with some cool views. Here though the use of a slideshow is still necessary for displaying the portfolio images. There’s an interesting interaction going on where each slide scrolls to a particular section of each image instead of just statically letting it appear. I’m just a little iffy about the semantics though, cause nav items and portfolio items are all wrapped in paragraph tags, so there’s a lack of hierarchy there.

Jessica Caldwell's website

Jessica Caldwell

The initial state of this site is actually much more sparse, just the outlines are visible. Hovering over them displays different items from her portfolio in a sliding door animation. Clicking then loads a larger view of the work, but still masked inside the boundaries of the diamond “fence”. Simple but stunning effect, a far cry from the carousels and lightboxes of yore!

Mark Lawrence's website

Mark Lawrence

Another enjoyable parallax ride at play here, but there are a couple of things that take away from it: first is the Like and +1 buttons that are just randomly sitting at the bottom right corner, and the Blog link that goes to a blank page (some styling even for an non-existent site would be nice).

ResumePower website


Like Designer Gleb there’s a diamond pattern on this page. I like how the word “shine” lights up when you hover over, and that it’s connected by wire to the top left logo. The double border continues in several other elements for this formal, plated effect, although the “most popular” label in one of the boxes looks a little oddly placed.

Manca Gracar's website

Manca Gracar

Not too sure about the use of gray when there are a few cute, vintage elements on the page but I love how the QR code was turned into a Pac-Man maze.

Kikki Festival 2011 website

Kikki Festival 2011

It’s not a completely crazy looking layout but one little step out of the box does a world of difference. The slideshow is not a rectangular affair but this geometric mountain that changes color while the list of speakers is a vertical strip to the right. The purpose becomes more apparent (and amazing) when you go to the Programme page: hovering on an item in the schedule highlights which speakers figure in the talk, appearing in the same row as the location in the table.

Social Media Weekly

CSSSimple Styles for Horizontal Rules
“You could get a lot fancier with an element like a <div> that can hold content, but I like the semantics of a horizontal rule. It’s an emphatic break between two sections of content.”

CSSImage Tint With CSS
“In this post, I’ll offer a few solutions for mimicking a CSS image tint or semi-transparent color overlay.”

CSS, TypographyIcon Fonts are Awesome
“I’ve created this page to attempt to convince you. It shows examples and lists six reasons why it’s a good idea and three common arguments against them (some of which I refute).”

HTMLPattern primer
“That’s the way I’ve been starting most of my projects lately: beginning with the atomic units of content and styling them first before even thinking about layout.”

Web DesignThe ALA 2011 Web Design Survey
“Set aside ten or fifteen minutes and take the survey!”


Design Focus

Friday Focus 11/18/11: Moustaches for Movember

Last week we celebrated 11/11/11; this Friday Focus we’re looking at inspiring moustache-themed designs in celebration of Movember or men’s health awareness month.

Designs of the Week

Movember website


Lovely use of varying textures as backgrounds to the equally grungy icons. Even the boxy graphic items employ rough edges to break up the straight lines.

Gallery of Mo website

Gallery of Mo

Hilarious seeing moustaches in the background wallpaper of this gallery style site. It doesn’t stop there, either: hovering on the donate button shows a moustache as an arrow/marker replacement, while the left and right arrows for sideways scrolling use curly braces instead of the usual sharper brackets or triangles. I also like that the gallery frames vary from portrait to portrait.

Octavo Designs Movember website

Octavo Designs Movember

Very few elements on this page, but it’s notable how the layout is responsive and adjusts to smaller screens. Also, animated GIFs seem to be making a comeback.

Lambert Street Handlebar Club website

Lambert Street Handlebar Club

Brown seems to be the predominant color in all these designs, not to mention an adaptation of vintage elements and typography. This site’s spiced up a bit with collages and a brighter than usual color for its wooden background.

Movember Austin website

Movember Austin

This tumblelog actually uses a slightly modified theme but I thought it would be nice to feature its look here, especially the bento-style menu I’m growing to love more and more. Too bad the drop-down menu doesn’t look as rugged!

No Shave History website

No Shave History

Love the idea of the logo matching the background for a masked look. The hover effects on the photos are also a snazzy little idea (read on below for similar ones).

Social Media Weekly

CSSOriginal Hover Effects with CSS3
“We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.”

HTMLInteractive Typography Effects with HTML5
“I will go over the development of dynamic, and generative banners to give your website that little extra wow!”

Interaction DesignThe 10 principles of interaction design
“Chad Vavra, interaction design director at The Barbarian Group, rounds up 10 key rules that make good interaction designs and designers and that you need to understand before you can break them”

JavaScriptExploring JavaScript’s Logical OR Operator
“With the || (OR) operator, since values don’t need to be explicitly true or false (they can be truthy or falsy), the operator can return non-boolean results when evaluated.”

User ExperienceA Brief Rant on the Future of Interaction Design
“Our hands feel things, and our hands manipulate things. Why aim for anything less than a dynamic medium that we can see, feel, and manipulate?”


Design Focus

Friday Focus 11/11/11: Happening Today

We’re curating a short list of sites celebrating this lovely date. Happy 11-11-11 Friday Focus!

Designs of the Week

Power of One website

Power of One

It’s interesting how the most important information on this page form this triangle: the hashtag, the ticket price, and the date/venue. What’s really great in this design is how the illustrated portraits have transparent areas so the pixelated background shows through as you scroll. The logo, of course, is also brilliant.

Abita Beer Presents Boudin & Beer website

Abita Beer Presents Boudin & Beer

Beautiful typography and layout per section on this one-page site, although it sometimes gets to the point where the centered logo (which rotates when you hover on it) seems a little too large for the page. The fixed background effect is no parallax, but it’s quite attractive just the same.

One Day on Earth website

One Day on Earth

I wish we could see more of the textures in the graphic elements elsewhere on the page. Using that particular shade of green as hyperlinks should only be done in moderation, and not everywhere.

Build 2011 website

Build 2011

Very clean and seemingly website that just puts everywhere in the right place. What will grab your attention are the “video avatars” of the conference speakers, which play on repeat. I’m a little surprised these weren’t displayed in the Workshops page.

Social Media Weekly

CSSCentering in the Unknown
“When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don’t know anything? It’s still kinda doable.”

AccessibilityA common accessibility platform
“There needs to be more of a balance in favor of resources directed towards accessibility, and it is up to us in the community of web professionals to champion web accessibility to browser vendors.”



Get featured on Blog Search Engine and win a Platinum Package worth $99.99

Promote your blog on Blog Search Engine

Every week on Devlounge we feature inspiring designs and ideas, give you tips on what works and what doesn’t, and share useful resources to improve your site. Don’t you wish the efforts you’ve done towards building your site would be recognized? If you want a critique of your own blog while gaining a valuable promotional link back to your site, you might be interested in submitting your URL to one of the top blog directories, Blog Search Engine, which just got relaunched this week.

How to Get Featured

All you need to do is sign up to become a member. Choose from one of the four subscription packages, for as low as $14.99, via PayPal. Right now one of our sister blogs BloggingPro is running a promotion where you can win a Platinum Package Subscription worth $99.99, so you might want to take advantage of that.

In addition to getting a review on BSE, you also get the following promotional perks:

Win a Platinum Package Worth $99.99!

Send out a tweet with the URL http://bit.ly/rqPTDL then share the link of your tweet in the comments section on BloggingPro on or before November 11. Winners will be announced there on November 14.



5 Important Functions All Websites Should Include In Their Design

web buildingA webmaster can build the most beautiful website on the planet, brand the site to perfection and offer great content, however if their site is missing key components for success the site is likely to fail or in the least not reach its full potential.

By taking the time to incorporate five “must have” functions into your website you can help ensure a better chance at success for your project

1. Social Integration From Off-Site Sources

If you’re running a website for which you constantly interact with your users using Facebook, Twitter, LinkedIn and other social networks you should show those conversations to be carried over to your website. An increasing number of websites in recent months have begun showing Twitter feeds from their accounts while providing Facebook activity streams and other offsite content conversations. By bringing off-site conversation to your website you allow users to create a circle of interaction that extends from on-site conversations to off-site conversations and then back to on-site conversations, a nice little circle of interaction that keeps users returning to your main product (your website). More →



5 Most Bizarre but Useful Calendars

I love calendars. While they have become largely unnecessary thinks to technology in just about every electronic in the average person’s possession, there is just something special about them.

Maybe it is the traditional touch that reminds me of earlier days, when cell phones were enormous and computers were a novelty in homes. Perhaps it is the decorative nature and the anticipation of moving on to the next month. It could even be that the electronic calendars just lose something in translation and don’t do it for me.

Whatever the reason, I am not alone. In fact, some people even come up with creative – and strange – calendars that are just as handy as they are awesome. If you are interested in traditional methods of keeping track of the days, check out these unique versions. More →


Design Focus

Friday Focus 11/04/11: Side Scrolling

Like the parallax effect, horizontal scrolling is a popular technique to grab people’s attentions and making a website stand out. It also challenges the usual top to bottom browsing we are accustomed to, so it should always be used with caution. Let’s see if this week’s featured designs are on point. Happy Friday Focus!

Designs of the Week

Moods of Norway website

Moods of Norway

It’s great how before you begin scrolling, when you hover on the “Scroll” button (ribbon actually), the screen goes dark to give you a hint about your scrolling options: it covers all bases from arrow keys, scrollbars, scroll wheel, and even touch. Several vehicles (a pink tractor and boat, a yellow limousine) lead you through different sceneries as different cards in the stack move to the top, each containing descriptions for the current section. Selecting it moves the viewport “up”. The shadow of the floating page is a little too strong, almost looks like a solid border, and the body text could be a little more styled to match all the other elements. One last thing I find weird: the hover color in the navigation is a very strong pink that clashes with the blue ribbon background. Overall though, very pleasant site!

Ivan Akimov's website

Ivan Akimov

At first I wondered why there was a lot of space at the top then I noticed some very subtle text in the background. Navigation is different from the usual horizontally scrolling sites out there: instead of dragging the scrollbar, you do the dragging action anywhere in the green area. Which isn’t bad at all if you don’t mind inadvertently highlighting elements on the page. I like how the latest tweets are arranged although the social icons seem to have larger emphasis than the rest of the content.

mooweex website


I just wish the background pattern wasn’t so bright so I can enjoy the old school look going on here, between the pixelized fonts and icons. What’s weird, though, is there seems to be no visual hierarchy. The title is mixed with the navigation in between each video, while the About and Blog are displayed alongside the ad-like boxes at the top.

Falanxia website


This one captures the platformer video game format with the keyboard navigation, which even accelerates the character (from walking to running) if you press long enough. I also enjoy enjoy the watercolor, storybook-like illustrations on the site.

The Future of Car Sharing website

The Future of Car Sharing

Not only is this a wonderfully animated side-scrolling site, it’s also one long horizontal infographic. It uses both motion and the landscape to take advantage of objects and depict statistics and comparisons through them: flags, trees, houses, you name it.

Social Media Weekly

Responsive Web Design, Mobile Web DesignMulti-Device Web Design: An Evolution
“From responsive Web design to future friendly thinking, here’s how I’ve seen things evolve over the past year and a half.”

DesignLots of Ipsum
“There is just too many awesome Lorem Ipsum (placeholder) text generators going around lately not to round them up.”

“140byt.es is a tweet-sized, fork-to-play, community-curated collection of JavaScript”

User ExperienceDon’t Give Your Users Shit Work
“We need to get out of this idea that the act of spending time on a project means that you spent your time wisely. Sometimes you’re just wasting your time.”