Design Focus

Friday Focus 05/27/11: Icon-centric

This week on Friday Focus, we’re looking at sites that revolve around iconized representations of their content.

Designs of the Week


This has quite the preschool room feel (down to the background wallpaper), probably because of the primary colors. If icon illustration is your strength, best to flaunt it this way.

2010 Annual Report - St. Luke's Duluth

Clean, straightforward brochure site with subtle design touches here and there. One advantage of having larger icons for main navigation is a bigger area to click on.

Création de logo et de site web

Love the colors. One has to ask, though, if the choice of laboratory glassware for each content section makes sense (how does a set of beakers relate to site creation, actually?).

Bärnt & Ärnst

The challenge in using icons at the forefront is keeping the look cohesive. Here, one of the projects in the portfolio sticks out a little bit and could have been a tad more muted, although overall it still looks great. But I’m not a fan of the <br> overuse.

Social Media Weekly

CSSdom3d: rendering 3d with CSS3
“There are a few benefits to this approach: you get to manipulate the elements with normal CSS, and you can overlay 3d objects onto pages and still let the user interact with the page.”

CSSStyling ordered list numbers
“The key is using CSS generated content to create and insert the counter numbers after removing the default numbering from the list.”

Web BrowsersIn IE, iFrames on Pages in Quirks Mode Also in Quirks Mode
“If you are creating a page using HTML5 and you think there is some reasonable chance that someone may embed this page on another via iframe, you should use the HTML5 shim on it for all version of IE.”

DesignCrash Course: Design for Startups
“I’ve learned why my work nowadays is better than from years past. I am aiming to somehow share some of these thoughts brewing in my head with this post today.”


Design Focus

Friday Focus 05/20/11: Slants and Slashes

This week’s designs on Friday Focus are skewed to the side, making for an edgier experience. Check it out!

Designs of the Week

Solid Pink Studios

Extremely simple, but look what a world of difference the CSS3 2D transforms module and a bright shade of pink make.

Ramon Oliver

This would be a lot better if the markup were more semantic. Wrapping titles in span and div tags instead of heading tags for a web design portfolio should be taboo!


One drawback of using slanting graphic elements is the jagged edges. Here it’s not so bad but still a little obvious. I like that irregular shapes are used everywhere though and everything feels light.


Great idea to have a changing triangular graphic for each section located at the bottom left, with the logo matching it. I also like the big V as a loading graphic for the homepage—wish it appeared everywhere as a transition between pages.


Stunning layout and interactions for each section. Parallax, masks, bold color and typography—all a real treat.

HTML5 Chop

I like the cleanliness of this look but unfortunately the graphic isn’t tall enough for larger screens. That’s another disadvantage to diagonal designs—they aren’t as flexible as horizonal or vertical ones that make repeating patterns easier.


There’s only one slanting element on here, but it’s worth mentioning. I like the effect of a subtle, slanting background shadow on the navigation, which actually extends all the way to the third row of content. So it’s an interesting moving background technique.

Integrity Elevator

Another minor use at work here, but I quite like the effect of the colorful streaks on an otherwise conventional slideshow of photos. I have to wonder though why texts aren’t clickable when there are even arrows next to them (don’t lead someone on like that!).

Master Francilien de Santé Publique

Beautiful shapes, colors, and type. Has that almost magazine layout feel to it.

Andreas Johansson

I like the textured black background mixed with the grid lines, making the skeletal structure of the design show through. Mixed with the handwritten underline in the menu, it gives the site this blueprint-meets-chalkboard feel.

Foxbone October Filmfest

Not fond of the monospace font but I am fond of combining triangles, squares and grunge in this way.


This site makes me think diagonal designs can actually be space-conscious too. I just wonder if there are a tad too many moving things at once.

Social Media Weekly

User ExperienceGood Idea: “What is this charge on my credit card?” Page
“Now you might think, yeah sure, for big fancy companies with thousands of users being charged every month, this is good, but I’m just a small guy, it’s not worth the effort. Not true.”

DesignThe 50 Things Every Graphic Design Student Should Know
“A condensed primer for students and graduates-to-be.”

HTML5, User Interface DesignMaqetta
“Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.”

Web BrowsersThe Browser Performance Pickle
“We give earlier versions of IE tons of junk that they handle quite poorly, and we give nice clean and optimized code to the toughest and most stable browsers.”

DesignClean Up Your Mess – A Guide to Visual Design for Everyone
“If you’re like most people, you feel like a baby when it comes to visual design. You sometimes have a vague sense of what you want, but can’t articulate it or make it come about. All you can do is point and cry. This guide will help you communicate with conscious skill. It will show you how to create designs that are easy to understand and attractive.”



Tools for Bloggers

Blogging has become a time consuming professional job. Long gone are the days that blogs where kept part time or as a hobby. If you write a lot for one or different weblogs, it is essential to have to the right tools to keep organized and work fast.

Having a standard work-flow is essential and for that you need the right tools for you. Personally I prefer web apps which are accessible from any device. Must I find myself away from home without a laptop, I can still do some writing.

Even small things matter to spare time e.g., when I need to use several photos in a post, I edit them in order I will be putting them in the post. When I upload them in WordPress they’ll be automatically sorted by last modified date. This way I don’t have to look through the whole list for a photo. I just start from top to bottom.

I write in Google Docs, I use no HTML tags, and once in WorPress I just copy paste the links into tags. The Find and Replace option comes in handy when adding HTML tags in bulk. This works for me, while others have their own system.

Tools for Bloggers

I compiled a list of different web app, applications, plug-ins and extensions that might come in handy. Too muchmany tools isn’t good either. Get a couple of tools that does what you need without giving too many distractions.

WordPress Plug-in

Editorial Calendar

Keep track of your posting schedule withing WordPress dashboard.

Web app

Keep On Posting

Be it for personal or professional use, Keep on Posting will email you when you are slipping out from your posting frequency.



Scrivener puts everything you need for structuring, writing and editing long documents at your fingertips.

Available for Apple only, cost $45. Public beta for Windows.


Windows Live Writer 2011

Windows Live Writer makes it easy for anyone to tell stories like a professional blogger. You can create beautiful blog posts, and see what they’ll look like online before you publish them to your blog. Plus, you can publish your posts to any of your favorite blog service providers.

Web app


Diigo is two services in one — it is a research and collaborative research tool on the one hand, and a knowledge-sharing community and social content site on the other.


MarsEdit 3

Whether you love HTML or can’t bear the sight of it, MarsEdit’s editor will thrill you. If you prefer the best of both worlds, you can switch easily between the two.
Works with WordPress, Blogger, Tumblr, Squarespace, TypePad, Movable Type and dozens more through standard MetaWeblog and AtomPub interfaces.

Cost $39.95

Web app


If you like making to-do lists, you will love TeuxDeux. Use the free browser-based TeuxDeux at work/home and then take your to-dos on the road with the iPhone app($2.99).

Application (Mac)


With LittleSnapper it’s easy to start capturing webpages and your desktop. From entire webpages – including the bits that are out of view in a standard browser window and important metadata such as the web address – to specific windows on your Mac.

Cost $29.99

Browser Extension


FireShot is an extension for Firefox, Internet Explorer, Chrome, Seamonkey and Thunderbird that captures, edits, annotates, organizes, exports, uploads and prints screenshots of your web pages.

Google Docs

Free, simple and powerful. Personally I only use Google Docs to write, keep track of links and keep notes. The sharing capabilities are the best, live editing and collaboration works smoothly. The integrated chat comes in handy when collaborating at the same time with more people.


Design Focus

Friday Focus 05/13/11: Isometric Buildings

This week’s designs feature illustrations with the isometric perspective in them, giving the sites an interesting birds-eye view.

Designs of the Week

Atlanta Web Week

I like the idea of centering a conference website around a week, instead of the regular schedule-speakers-venue-register variety. Of course it’s a trade-off, but in this instance the brand was centered around the “week” so it follows.

Cloud Networks

Using moving clouds in the background is pretty predictable, but combined with the perspective of the buildings, and mountain illustrations on several pages, it makes sense to feel that you’re high enough in the air to actually be going through them.

WBS 70 - Die Sommerfestwoche

Even more clouds in this design, but what’s great is that they’re used everywhere, as backgrounds for event icons and other content boxes. This is topped off with a nice fly-in animation when you load each page.

Social Media Weekly

HTML The hgroup hokey cokey
“To offer a quick recap, hgroup was removed from the W3C specification only (not the WHATWG spec) by Hixie at the request of Steve Faulkner. The co-chairs requested the issue be reverted following multiple requests from the likes of Tab and Tantek. The current status at the time of writing is that hgroup is in the spec.”

Accessibility, HTML, CSS, JavaScriptFront End Development Guidelines

CSSHolmes: The CSS Markup Detective
“Holmes is a stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.”


Design Focus

Friday Focus 05/06/11: Group Shots

In a previous Friday Focus we featured portfolios with self-portraits of designers that own them. This week we’re looking at agency websites that also feature the people behind them.

Designs of the Week


What’s great about this design is that it doesn’t just slap on a photo of the company; it actually tells you who does what. That may not seem ideal when you want to promote your brand as a single entity, but to me it gives a more interactive, personal touch. Another interesting decision: making the fixed menu navigation appear only after the first two sections.


Not sure what the point is of making the illustration/banner move sideways when you hover over it, since it’s very jittery, but I love the casual shot. The logo is also a little too light for the background.


My favorite part has to be the About page and the form input design. I also like that when you hover on a character on the homepage, it loads that person’s latest tweet.

The Squad

Love the execution of this design, every page is catchy layout on its own. Note how the logo is in the top right and how there aren’t any portfolio work, just representative illustrations for each category.

Social Media Weekly

CSS, JavaScript, AccessibilityNow You See Me
“When building custom JavaScript-based widgets, it’s quite easy to fully control the hiding mechanism, but when you begin working with animation libraries like jQuery or Scriptaculous, the hiding mechanism is typically dictated by the library, leaving you little control over the accessibility of your content. And that’s a problem.”

CSSFont sizing with rem
“CSS3 introduces a few new units, including the rem unit, which stands for “root em”. If this hasn’t put you to sleep yet, then let’s look at how rem works.”

HTMLDo we need three ways to describe images?
“We need three types of image descriptions: a textual replacement, a textual description, and a textual glance.”

MobileMobile Design and Development
“Even though mobile is one of the fastest growing industries on the planet with things changing every day, I spent a considerable amount of thought and time to try to fill the book with timeless advice that isn’t specific to a particular platform or en vogue device.”

TypographyWeb font services – An Overview
“This is just a personal driven overview of web font services and should not be understood as an authoritative attempt to classify the services – as it was mentioned to me.”



Media Queries and the Thoughts Behind It

Smartphones and tablets have over taken the market. With high speed internet available, fast processors and sharp screens, everyone is using their portable device to browse the web. While about seven years ago we’d be discussing for which monitor resolution to design, now we have to design for everything, no ifs or buts.

From personal experience I know I want and use my iPhone for all my web browsing needs when away from my desktop. I expect that websites are coded for mobile devices. To achieve that you have to use media queries to serve your website in each resolution flavor, e.g. iPhone, iPad, Galaxy Tab, landscape and portrait.

More →