Devlounge - Homepage Feed

Design Focus: Type Sites

Sophia Lucero — Fri, 18 May 2012 13:04:48 +0000

It’s that time again for a roundup of smartly-designed sites you should look to for inspiration. And this week it’s all about sites dedicated to typefaces you can buy and download. See how they peddle these digital goodies to customers.

Designs of the Week

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

Dolce Caffè Font

It’s easy to make the connection between the name of the font and the design concept at work here: aside from the compartmentalized/bento arrangement, it’s also the colorful scheme and the chalkboard signs that remind you of those cozy cafes with handwritten menus. Practically every box has a simple animation looping back and forth, but nothing too distracting and adds to the kitsch.

Typo Popote

Another cafe/restaurant-themed design that’s all warm and welcoming. I like the subtle icons on both sidebars and the embossed treatment on it and the text. The plaid background pattern also reinforces the look, not to mention the choice of fonts and colors.

Cirulis Typeface

There’s a nice little exploding effect as you scroll down, which is a great idea for font sites if you ask me. Even smarter is how texts appear once you arrive at that section of the page, making sure you’re on the right track about what you should be looking at. Simple, solid, effective.

Social Media Weekly

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

Programming – You Have To Get Good Before You Get Better
“There are three things to bear in mind when you look at the process of acquiring skill: how you think your rate of progress will look at the beginning, how your rate of progress actually is day-to-day and how you think your rate of progress is day-to-day. Let’s look at some charts to get a better picture of what I’m talking about.”

CSS – SASS vs. LESS
“Slightly longer answer: SASS is better on a whole bunch of different fronts, but if you are already happy in LESS, that’s cool, at least you are doing yourself a favor by preprocessing.”

Mobile Web Design – Your local mobile device lab
“This is great! Just by opening up the testing suite to everyone, it has now expanded beyond what I had been able to gather together by myself.”

Web Standards – Cutting the mustard
“One of the immediate challenges we discovered when we first started the responsive news prototype was the large range of devices that we would have to support. It terrified us. This article is about a solution we use to alleviate this problem.”

Friday Focus 05/11/12: Rainbow Flavored

Sophia Lucero — Fri, 11 May 2012 13:04:22 +0000

Today we’re looking at designs that don’t shy away from a broad color palette and completely embrace the rainbow. Happy Friday Focus!

Designs of the Week

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

Jilion

The top section is a little confusing, it doesn’t quite say that the video player graphic is just a product of the company by the way it appears, and it takes a little longer for you to make that conclusion (even if it’s milliseconds in your brain). The form elements and icons are lovely, and especially so for the logo, which even casts a rainbow glow behind it. The site’s got a nice dark, but not intimidating feel.

PixelStorm

This site is far from perfect but I like a few of the concepts that went into it, like the circular elements and the reuse of patterns.

Intuitive Designs

I enjoy the background graphic, the color scheme, and the little detail of texture that appears when you hover over the menu links. I also like the layers of translucent boxes that don’t line up. It was also a good idea to space out the letters given the dark background for better readability.

Alexander Zhestkov

Each strip represents the dominant hue in the project, with the logo on it. Clicking on it expands to display the sample work on it with matching background color, so it’s like you’re completely transported to that “world” every time. A very simple accordion style one page portfolio that’s all about the content.

Maminkám.cz

It’s always a challenge to use bright colors as text backgrounds, so I’m concerned it may be difficult to read for certain people. But I like the non-dominating amount of it used in the design. Everything else is warm and cozy, from the illustrated background pattern to the perforated borders in between content blocks and around images.

Designzoom

Very mod, color-blocked, and designy! Everything seems to be in the right place. Very bold move to use yellow for the form fields.

Social Media Weekly

HTML – How to Safeguard Your Site with HTML5 Sandbox
“Today’s web applications are mash ups of new experiences into one experience. Think Twitter widgets showing the latest tweets about a product. Or Facebook comments discussing an article. Or even just integrated web pages through an iframe element. These experiences can increase security breaches to your site. Don’t stress … there’s a new kid on the block to help you out: the HTML5 sandbox. But before I get to that, let’s quickly review iframe element issues.”

Mobile Web Design, Debugging – Ringmark
“Ringmark is a web-based test suite that measures how well a mobile browser supports the capabilities that modern mobile web apps require.”

Design – Modularity and Style Guides
“It’s one of many techniques I use in front-end website development. Below I’ll introduce a few more and how I link them together for the ultimate Power Up ★”

User Experience – Principles of User Interface Design

Create unique, extraordinary websites with Squarespace. No experience necessary!

Friday Focus 05/04/12: Comic Book Style

Sophia Lucero — Fri, 04 May 2012 13:37:20 +0000

This week’s Friday Focus shines the spotlight on designs with comic book-inspired aesthetic, each with its distinct take on the kick-butt art form. Check ‘em out after the jump!

Designs of the Week

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

Drift Boys

Stylized elements everywhere, from the splatters and tears to the comic book fonts, plus a bold red-black-white color palette for maximum impact. On art portfolio sites it’s always a good idea to showcase your work as much as possible, so using a variety of them in the header of each page, as well as a different character for the contact link that slides in when you reach the bottom, all works out nicely.

Jean Delbrel

I really like the choices done on this site; it’s clean and simple looking but still carries a lot of personality thanks to the illustrations. Using comic book covers with superhero insignias in the top navigation menu is genius. The striped shadows everywhere are also a neat subtle touch and highlights the attention to detail that went into the design. The yellow, of course, is to cap off the energetic vibe that comes with comic book titles.

Glamour.biz

You get a minimal homepage but on the inside, it’s jam-packed with illustrations from corner to corner, also highlighting the foreground-background interplay with blurring and shadow treatments, even overlapping the pull-out menu. The text, meanwhile, is split right in the middle for a two-column layout.

Bobadilium

A bit much of the all-caps text (and Courier) for my liking, but a nice storytelling approach going on here, with small animations sprinkled all over the place. It’s also cool how the top menu changes color to match each section. It’s like a masked text with the background peeking through, although upon inspection it’s faked using sprites.

Kitschen Sink

Here’s another popular color palette especially for vintage comics. Comic book panels applied to websites also lend themselves to compartmentalized, bento layouts.

Diaz - Don't clean up this blood

Some people may be tired or no longer impressed with the parallax effect but it’s still interesting to see what others come up with (e.g. here there’s a broken glass graphic element that turns up in the Cast section). The site also feels like one long movie poster.

Social Media Weekly

Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.

CSS – Cross-Browser Debugging CSS
“CSS has an underlying design and when you work with it, with the natural flow of how CSS is meant to be used, you will find you have a lot less bugs.”

Mobile Web Design – A non-responsive approach to building cross-device webapps
“The general approach involves classifying your visitor’s device into the right device class, and serving the appropriate version to that device, while maximizing code reuse between versions.”

Web Design – You’re not at the cutting edge and that’s fine
“Feeling like you’re falling behind with the pace of technological change? Don’t worry too much, the cutting edge of any industry moves faster than you can and web is no different.”

Friday Focus 04/27/12: Bento Navigation

Sophia Lucero — Fri, 27 Apr 2012 13:20:47 +0000

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

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

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

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 Design – Fanfare 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).”

CSS – Linear 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.”

JavaScript – Of 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.”

Friday Focus 04/20/12: Unfolded

Sophia Lucero — Fri, 20 Apr 2012 13:07:28 +0000

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

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

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

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

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

Programming – Light 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.”

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

CSS, Tables – A #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!

Friday Focus 04/13/12: Video Backgrounds

Sophia Lucero — Fri, 13 Apr 2012 13:06:41 +0000

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

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

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

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 Design – Nielsen is wrong on mobile | Designers respond to Nielsen on mobile | Nielsen responds to mobile criticism

Responsive Web Design – Responsive 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.”

Forms – The 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

Guest Blogger — Tue, 10 Apr 2012 05:08:00 +0000

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.

1. Doll Photography

This is the largest doll specific Flickr group, with more than 5,000 members, and 143,000+ photos and counting. With so many photos and members, you do run the risk of possibly losing out on seeing some good shots. After all, you can’t easily slideshow so many photos. But there is such a high concentration of interesting photographs that it is a shock they all come from one group this size.

The rules are really simple here. They don’t allow “doll porn” or anything sexually explicit. Nudity is fine if it is artistic and tasteful. There are to be no pictures of children unless they are with a doll, and it is relevant. You can post eight photos per day.

2. Dolls Art Shoot

Rebelling against the practice of “shot dumping’, this group wants only the best and brightest of your doll photography collection. They are looking for quality, subject matter and composition, preferably artistically minded. The photos are also to be of dolls only, though any kind is fine.

Nudity is still fine here, but no pornography. You can submit up to three shots per day to their member pool.

3. Best Doll Pics

This group has a different way of deciding on quality shots. They ask for only submissions which have been favorited ten or more times by people on Flickr. There is a thread there for eight or nine favorited pics, but nothing below that amount.

There are no other submission rules, so I can only assume most shots are accepted as long as they meet the 10 or more favorited requirement.

4. Creepy Doll Pics

There are no listed rules, they just have to be pictures, videos, illustrations or screen caps involving creepy dolls. So dive right in.

5. Toys

The largest toy group on Flickr, this one is not strictly about dolls. But with more than 18,000 members and 250,000 plus shots, I couldn’t not mention it. It is wildly popular, not only for the photo pool but because they keep up to date with the latest toy news from companies around the world, so they are great for collectors. They also have a huge selection of doll shots, as well as other products.

There is no apparent limit on posting, but they are a safe group.

6. Pullip First

This is a more specialized doll group. According to the front page, they take photos of Pullip, Dal, Taeyang, Namu, Little Pullip and Pullip custom dolls. They only take photos rather than any other media, which is uncommon but not unheard of. A lot of the shots are pretty impressive.

They allow eight shots per day to be submitted, and their only rule is that you have to have taken them yourself. They also don’t allow any commercial information on the dolls themselves.

7. Alternative Lives of Dolls

No, it isn’t a typo in the name. This club is for alternative dollie lifestyles, showing any type that is doing something different than they were strictly created to do, or just trying something new for the first time. What is cool about this group is that all of the shots are staged, telling a story or setting a scene.

There is a 10 post per week limit, with a PG-13 guideline.

8. Doll Observers

Like fashion dolls? Whatever the type, this group is dedicated to fashion doll photos in poses similar to magazine spreads. Some of those that have been posted already are extremely detailed, with full backgrounds. They are very interesting.

You can post six per day, and they are a safe group.

9. The Unofficial Haute Doll Magazine Group

Haute Doll is an actual magazine publication and website that have gained a huge following the in collectors community throughout the years. This is a fan appreciation group, and if you happen to be one of those Haute lovers you can put all associated material here.

10. Doll Headshots

Another specific group, this one is for headshots of Blythe, Pullip, BJD, Pinky St. And Momoko. That means nothing full body will be expected, nor any other kind of doll. But their rules are pretty open, even though they ask that you don’t post pornography… which, to be fair, would be hard to do with a headshot.

What are some of your favorite doll photography groups? Post them in the comments below!

Tom Chu is the SEO manager at PsPrint, an online printing company specializing in brochure and poster printing among other popular services.

Friday Focus 04/06/12: By Four

Sophia Lucero — Fri, 06 Apr 2012 13:40:17 +0000

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

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

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

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 Design – Responsive 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, Typography – Fontomas – 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.”

Business –