Design Focus

Friday Focus 04/27/12: Bento Navigation

We’ve featured bento-style layouts before, and this week’s Friday Focus zones in on navigation that carries that same property. Check ’em out!

Designs of the Week

Need help in promoting your site? INeedHits has been in the search engine marketing since 1996!

Calepino Pocket Notebooks website

Calepino Pocket Notebooks

Two boxy menus here, at the top and bottom, which merges contact information and a subscription form into the layout. Both look like stubs with various store details, although the input field isn’t so distinguishable due to the whole blending factor.

CaptainDash website


The sliding animations from page to page and inside the menus tie the whole “showcase” feel together. The illustrations, submenu arrows, backgrounds, and choice of colors all look retro-superhero-outerspace cool.

Talking Donkey Shop website

Talking Donkey Shop

More of the ticket stub motif done here, reinforced with icons and diagonal stripes. Even the styling of the cart area isn’t run of the mill. More of the vintage feel comes from the buttons, borders, and fonts.

Social Media Weekly

Ready to go out and design your next website? Try building with the Catalyst Framework.

Responsive Web DesignFanfare for the common breakpoint
“I don’t think it’s desirable to have a “standard” handful of screen widths, any more than it’s desirable to have a single rendering engine in every browser (yes, I know some developers actually wish for that: they know not what they do).”

CSSLinear Gradient Keywords
“Linear gradients in CSS can lead to all kinds of wacky, wacky results—some of them, it sometimes seems, in the syntax itself. Let me note right up front that some of what I’m talking about here isn’t widely deployed yet, nor for that matter even truly set in stone. Close, maybe, but there could still be changes. Even if nothing actually does change, this isn’t a “news you can use RIGHT NOW” article. Like so much of what I produce, it’s more of a stroll through a small corner of CSS, just to see what we might see.”

JavaScriptOf parser-fetishists and semi-colons
“TL;DR: if you advocate omitting sensible syntax as parsers will fix that for us, you are not a visionary developer. You waste your and our time. And you come across as a semi-colon.”


Design Focus

Friday Focus 04/20/12: Unfolded

Our featured designs on this week’s Friday Focus put the paper motif to good use once more, focusing on its creases and folds. Not just in the corners and as borders, but as a way to demarcate sections of content at a time.

Designs of the Week

Wing Cheng's website

Wing Cheng

The entire site, except for the fixed navigation on the bottom right, is presented in an accordion-type notebook with all the text and graphics done in the designer’s own handwriting, contact form included. It’s only when you click on the images that you get the actual version of the logos. There are tradeoffs of course: legibility, seeing the real logos without having to click anything, accessibility, and so on.

3D Polystyren website

3D Polystyren

I always enjoy a good “power line” and this one, although yellow and chunky looking against the huge 3D header, is not distracting but a welcome trail all the way down. The text blocks are a bit long and heavy though.

Granville Island website

Granville Island

Love the worn quality to the background paper, like an opened and laid out map. Color block is also hot right now! Also, in the top left menu there’s a small “you are here” sign, again reinforcing the travel theme.

Spreads for iPad website

Spreads for iPad

Another accordion sheet of paper, except this time the folds aren’t equal heights. Love the pop of read against the blue, which gradients into pitch black when you reach the bottom of the page. Also interesting is the decision to put a screenshot of the app nowhere above the fold, with introductory paragraphs coming first.

Build on DIYThemes’ Thesis Framework for rock solid SEO and great layout customization options.

Social Media Weekly

ProgrammingLight Table – a new IDE concept
“We need to be able to move things around, keep clutter down, and bring information to the foreground in the places we need it most.”

DesignStartups, this is how design works.
“This handy guide will help you understand design and provide resources to help you find awesome design talent.”

CSS, TablesA #CSS grid system for tables, for you
“A neat way of aligning the columns in tables up with each other — a table grid system of sorts.”

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!


Design Focus

Friday Focus 04/13/12: Video Backgrounds

We’ve featured moving backgrounds using native HTML/CSS/JS animation before, but using video in backgrounds is quite the challenge given how it eats up more resources. Let’s see how effective these websites use this feature in this week’s Friday Focus.

Designs of the Week

Get solid WordPress themes, plugins, and web design training from iThemes.

Kolonien website


Like the two other sites, the video background appears only in the homepage. The overall look here is warm, earthy, handcrafted—mixing two “scratchy” typefaces and a vintage color palette. Everything looks customized, even the music page uses play/pause control buttons that blend in.

Weathery for iPhone website

Weathery for iPhone

The video background runs a shorter loop than the other too, so that’s something to consider when using such a thing, although I’m afraid the quality suffers a bit. This one page site doesn’t need much else to its design, either, because it’s the design of its product, an iPhone app, that will grab your attention.

Voice website


There’s a purplish/pinkish hue to the video on the homepage that regrettably disappears in the other pages, where brown dominates. I do like the page transitions and other animations though, all carried out in a slanted fashion. There’s also a neat slideshow technique in the Virksomhet page.

Social Media Weekly

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

Mobile Web DesignNielsen is wrong on mobile | Designers respond to Nielsen on mobile | Nielsen responds to mobile criticism

Responsive Web DesignResponsive web design: a project-management perspective
“This is where many people stop. After all, many of the challenges with responsive design are fairly similar, regardless of project size and budget. There are, however, additional challenges to consider on large projects, which are too rarely addressed: this article will aim to address those.”

FormsThe Current State of HTML5 Forms
“HTML5 has many new features intended to make creating websites easier and people’s experience in using those websites better. Among those features are many enhancements to web forms.”



10 Flickr Groups To See the Best In Doll Photography

Most childhood obsessions are more or less grown out of once puberty hits. Toys and hopscotch make way for boys and parties, hanging out with friends and the latest pop band to take the charts. Then real life slowly begins and we start to fall for the boring grown up entertainment venues we never understood, such as talk radio and antiquing.

So maybe I am sticking with stereotypes a bit, but for the most part the days of childhood are left behind and we never go back. When it comes to collection, however, it might not be so simple. One item that seems to remain on some people’s lists of loves their entire lives is dolls. On Flickr, this can definitely be seen by the huge number of doll photography groups with members in the hundreds or thousands.

These are the 10 where you are most likely to find amazing photos, as well as a home for your own shots. More →


Design Focus

Friday Focus 04/06/12: By Four

We’re already into the fourth month of the year, and this week we’re featuring designs whose main navigation strictly use that number.

Designs of the Week

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Brand Almanac website

Brand Almanac

There’s a chalkboard look on the homepage, plus circular links that contrast against the four boxes and alternate with slideshow photographs. On the inside it’s a lighter look while still retaining that classic, old school, neutral feel.

Raffaele Leone's website

Raffaele Leone

I like the keyboard navigation all the way into the deeper sections like the portfolio, but using the bright colors as backgrounds on top of the chunky font in white and black, it’s a bit much.

Planet Propaganda website

Planet Propaganda

The navigation’s actually on top of the full-screen slideshow, but arranged in a triangular, X-mark fashion, carrying both the studio’s logo and slogan—smart and effective move. The shape is repeated in their about page as well.

Social Media Weekly

Get solid WordPress themes, plugins, and even design training from iThemes.

Web DesignResponsive Web Design: Missing the Point
“Responsive design is the real deal. It is not a fad. It’s a legitimate attempt to address the massive challenge of delivering great experiences to this explosion of devices and browsers. But don’t feel like it’s the end-all be-all of website construction. This aint religion. This is web design.”

Design, TypographyFontomas – iconic fonts scissors
“Now it’s trivial to customise fonts for your needs with 3 simple step. At first, you select needed symbols on source fonts. Then rearrange those on destination font. After that, you can download SVG font and make webpack via fontsquirrel generator or other services.”

BusinessSell Yourself: A Creative CV Guide
“This guide lends a helping hand to anyone creating a CV aimed at the creative industries. There are hints, tips and insights into how to inject some creativity into your CV and also how”