Design Focus

Friday Focus 07/29/11: Triangles

We’ve looked at designs with irregular shapes and circles before (twice, even), and this week we’re adding triangles to that list. Time for this week’s Friday Focus!

Designs of the Week

Metamarkets website


It’s probably a minor thing but the logo colors don’t seem to match the shades of blue and orange used in the background, although they do have translucency and overlapping shapes in common. The look is colorful, light, and very readable. I think the triangles are there to break the text-dominated pages a bit. I find it interesting that in the Platform page, the sidebar is used as the location for the diagram, instead of above or mixed in content, whereas the Blog is a one-column layout and has no sidebars.

dotwired.de website


Remember those centered seals? This reminds me of that, but with a triangle. Looks like a well-tailored site mixing light textures and transparency, but minus points for not putting in any content in the Portfolio and Project pages.

The Fashion Sketchpad website

The Fashion Sketchpad

There’s one really nifty effect here: if your internet connection is fast enough, a “dressed up” sketch fades over an “undressed” one like a virtual paper doll. It’s not complicated or flashy (imagine how you can take things further), but it drives the fashion concept all the way home! There’s also a fabric swatch feel between the triangular shapes, bright colors, and subtle patterns.

Maxi Moda 2011 website

Maxi Moda 2011

Again with the pattern mixing plus translucent images, some of which should be better off as inline text replacements. The lightbox could have been customized further.

Cappen website


First of all, I’m stunned by how bright the green is, which is good, except for the area where it’s used as background for white text—not recommended! The circular slideshow is definitely catchy, especially with transparent images being used. There’s another projects list at the bottom right in addition to that. Lastly, I love the use of a triangle content area for the footer.

Henrotte Julien's website

Henrotte Julien

You know how people are using circles everywhere these days, including framing content, because of border-radius? This site is like that, but with triangles. It’s not even remotely half-assed though. In the Work section, images and captions are cropped in skewed boxes. Clicking on the G at the top right displays the underlying grid. The code is a little messy in some places but overall, an outstanding job.

Social Media Weekly

Mobile Web DesignIntroduction to W3C Mobile Web and Application Best Practices
Learn how to work on the mobile web with an 8-week short course created by the W3C.

Business, HTML, CSSDear Clients, The Web Has Changed. It’s Time To Use CSS3 and HTML5 Now.
Help educate your clients with the latest concept in web design and development.

DesignThe Auteur vs. the Committee
AKA design according to Apple vs. Google.

User Experience, DesignVisual Designers Are Just As Important As UX Designers
With UX being the second hottest buzzword in the industry today (HTML5 is the first), how do they fit in alongside visual designers?


Design Focus

Friday Focus 07/22/11: Over and Under

The featured designs on this week’s Friday Focus take out the bore of having to scroll through several thousands of pixels as you’re rewarded with cool animations, layer effects, and the information you need presented in an appealing and compelling way.

Designs of the Week

Cantilever Fish & Chips website

Cantilever Fish & Chips

What really caught my eye here is the chalkboard-style menu, complete with the yellow piece of chalk at the left side and the black textured background. The drop caps in each section are also quite lovely!

Corkcicle website


I have some screen flickering issues at the top half of the page, but as you get to the bottom of the page you’ll find something really neat: a wine-pouring effect to the right (completely with the translucent effect), and and a grape vine stem to the left—both of which are in the foreground.

Sullivan NYC website

Sullivan NYC

I like that the portfolio “slideshow” is vertical, takes up the whole screen, and yes, supports keyboard navigation. Diagonal stripes in both directions are used everywhere and of course there’s tons of yellow in this design.

Two Fish Illustration & Design website

Two Fish Illustration & Design

I like the really subtle use of a backslash as a marker on the menu for which section you’re currently at. Of course my favorite has to be the peekaboo picture of the artist when he was still a kid, surrounded by thin concentric cirlces.

Selective Perspective Detective Objective website

Selective Perspective Detective Objective

This looks comes on a little too strong for my taste, but I appreciate the optical illusions at work here. You can simulate movement by simply moving over a striped background.

Touchtech website


I like the photo masking effect you see on the green cloud, which also appears in the What We Do section. It’s a nice twist when you need to add icons to your design.

iutopi website


I’ve lost count of how many sites look like this, but it’s still interesting to see the illustration styles and addressing the usual issues. I really like how the clouds look. I like the sea level indicator and the gauge at the right. In those screens, however, the body text looks really small and could fill up the screen better. I also think the left-side navigation arrows could use variation and retain the hover per screenful.

Online Portfolio von Jan Ploch website

Online Portfolio von Jan Ploch

This site is basically a fun ride down a beer bottle! Bonus points for the quick links as bubbles atop the straw and a translucent texture for the lightbox background. I just wish the contact link weren’t a mere mailto: because I would have liked to see how the designer would integrate a contact form into the beer motif.

Fingerbilliards website


Here’s another clever concept: by scrolling the page the red ball in the middle reaches and sinks into the hole and plays a sound. A live demo of the app they’re selling, no video needed! As you scroll even further, you get a description of the game and instructions in the same vintage feel the game has. No unncessary content here.

MOSO Unfinished Business School website

MOSO Unfinished Business School

I think the background illustrations are teetering on the brink of being distracting, but I do like every single one, especially the overview section explaining their process with infographics.

Social Media Weekly

CSSResponsive images right now
Gist: hide the small image from desktop users and hide the big background image from mobile users.

HTMLThe New and Improved Way to Create Forms with HTML5
HTML5 is chock full of new form elements and attributes; use them wisely!

CSSCSS3 Radial Gradients
Mastering linear gradients is one thing, but radial gradients are whole other beast.


Design Focus

Friday Focus 07/15/11: About Me Infographics

This week on Friday Focus, we’re looking at lovely visualizations embedded in designers’ portfolios. Infographics as standalone articles are the darling of the crowd these days, but using them to describe onself is another great use for them.

Designs of the Week

MacMillan Lynch About page

MacMillan Lynch's About page

I like the warm monochromatic orange palette and the mix of translucency and patterns, although the location of the descriptions seems a little cramped. One interesting choice here was to use of circles with varying sizes for the education history graphic, where one would normally expect some kind of timeline. One last nitpick: using <div> as content separators instead of <hr>? Not cool (read: semantic)!

Deidre "Deda" Bain About Me section

Deidre "Deda" Bain's About Me section

There’s a bit of a blueprint feel going on in the background. It’s a little disappointing to see that like the previous site, the graphs are just images, not clever reinterpretations of actual meaningful markup. But the infographic/magazine “vibe” echoes throughout the one-page site with mechanical diagrams (check out the Process section for another visualization), multi-column text blocks, and stylized headings (that are unfortunately also just images, not even image-replaced HTML heading tags).

Henry Brown About section

Henry Brown's About section

I quite like the contrast between the colorful wheel of competencies and the toned-down timeline below it, and yet if you hover over each tick mark and read his notes in the tooltips, it actually becomes more laid-back than the circular chart. This section left me wanting more! Or maybe I’m just used to seeing infographics that are thousands and thousands of pixels tall.

Social Media Weekly

Design, Content StrategyContent Choreography
It’s not enough that apply media queries for various sizes, but contemplate what the rearrangement of content in various screen sizes will do for the users’ browsing and consumption experience.

DesignUsing the Black Box Model to Design Better Websites
Get a dose of psychology and consumer theory before you design your next site. “No matter what you’re designing, you’re almost always selling something.”

User Interface DesignHow to Arrange Interface Elements
Learn how to group, prioritize, and layout the important features a user will need on a page.


Design Focus

Friday Focus 07/08/11: This or That?

You might remember a feature on split designs over a year ago. The look is alive and kicking in 2011, and this week we’re taking another look. Happy Friday Focus!

Designs of the Week

Design 977 website

Design 977

This is actually a completely fluid site, and that’s one feature you can take advantage of when dividing your layout 50-50. Using a custom scrollbar is quite useful in this case as well although I wish it weren’t the only one that got such a treatment—the form elements could be tweaked a little bit more. The Facebook/Twitter/validator links are tucked away on the small arrow at the leftmost side of the site, which randomly turns into a plug icon.

Green Xtreme website

Green Xtreme

Bold look, big logo, but at the cost of what could have been a better experience. The split layout forces the products to be listed only on one half and after a screenful of scrolling because of the narrow space for the intro text. Not to mention, the photoshopping of the kid and puppy to the lower left isn’t so realistic.

riddle.pl website

Piotr Petrus

Who said split designs had to keep their division in one place? On this site, clicking on one of the portfolio images pushes and squeezes the other half of the layout to make way for a large tooltip description of the project, written in a playful tone. I also like the idea of putting keywords relevant to his work.

Adham Dannaway website

Adham Dannaway

Love both the artistic and comedic headshots. The color palette used in the painted side also echoes in the circular links found in the footer as well as the skills/tasks required in each item of his portfolio and the bar chart in the about page. Other than that, this is a very black and white design, and you could say the look is split in that regard as well.

Doodle Pad website

Doodle Pad

I like all the fun illustrations in this design, but the only thing that throws me off here is whitespace at the top right due to the tall logo; makes me with the menu were vertically aligned instead.

David Fooks website

David Fooks

Like the previous site, only the homepage is split in two, but the execution here is striking: elegant and fun (I could even say cute) at the same time. The fixed, icon-based top navigation is also a nice touch.

Nudge Design website

Nudge Design

Great retro look on the logo and the rest of the design. The best part has to be the negative space ampersand right in the middle!

ZonkOut website


I find it interesting that the bullet points and the left-hand text are right-aligned. Another thing I like is the use of red as accent on exactly three areas: the logo, the price, and the hands on the app. Not too sure about the reflections and shadows on the iPhone illustration though, is it standing up or lying down?

Quero Meu Cloud website

Quero Meu Cloud

This one looks less obvious but it still is a split design, with a third column halving the design. Almost predictably, there are animated clouds in the background.

Social Media Weekly

TypographyFree HTML / CSS for type & palette proposals

Mobile, iOSThe iOS Design Cheat Sheet

UsabilityTop 7 split testing blunders you must avoid

HTML5, AccessibilityHTML5 Accessibility Chops: form control labeling

CSSPseudo Spriting


Design Focus

Friday Focus 07/01/11: Exploded Views

This week’s Friday Focus features designs that utilize the exploded view diagram technique. You could say this a more controlled approach to chaotic designs.

Designs of the Week

Tam Cai website

Tam Cai

The first thing that strikes me here is that pinstripe look combined with the stylish header background: like a long swatch of fabric held together by a black button and red thread. This look repeats as you scroll below, and the background now looks like it’s the bottom of a tailored vest or jacket. While the white illustrations of the designer’s clothes and things aren’t as detailed and use only thin outlines, it actually provides a nice contrast to the more realistic and relatively heavier interface. Even the contrast between the “suit” and the “ninja” personas adds another layer of interest to the concept.

Another feature you have to check out on this one-page portfolio is the profile section, which uses concentric open rings to represent the designer’s skill levels. This just fits, if not enhances, the Japanese graphic details on the site. Using ninja stars as bullet points is another.

One last note about the Facebook like button: this designer’s technique was to lower the opacity so it wouldn’t stick out so much. I’d say it looks a little better this way, but I’m still hoping for a more flexible solution from the social network site itself.

LightCMS website


The “sign up for free” button has quite a different design for sure, although I don’t know if it adds any meaning with the split colors and the arrow pointing to the right, because on some level it looks more similar to the slider buttons popular on mobile interfaces nowadays, implying a choice between the two. The rest of the site displays impeccable typography and care with the product feature illustrations.

Nizo for iPhone website

Nizo for iPhone

I guess sites that haven’t launched their products carry more pressure in keeping people interested with few details to give away, and this design solves the problem brilliantly with an out-of-the-box approach. What I assume to be user interface components of this mobile app fly into the screen and sit next to one another as you scroll downward. The reverse happens as you scroll back up. Then as a final touch, the email notification form pops up from below once the scroll completes. Next to it are completely unassuming Facebook and Twitter sharing buttons, which turn from squares into circles upon hover. It’s flashy without being flashy.

Social Media Weekly

“Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.”

“Preview mobile websites, design mockups, and local HTML on Mac or PC.”

HTMLSimple Semantics With Microformats, Part 1
“What microformats are, their benefits and how to implement both rel-tag and XFN.”

BusinessA website can’t be measured in pages
“Selling page-based website packages isn’t just an inaccurate way to gauge project scope, it is a questionable way to turn a profit.”

ToolsOne Page Apps I Actually Use
“Of the probably-hundreds of these one-page apps that I’ve seen over the years, there are only a handful that find myself using on a regular basis. I thought I’d share those”