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?

  1. By Stephanie posted on August 1, 2011 at 8:28 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Triangles, not something that I would typically use in one my designs but looking at these examples they can really work on a website. I think that I might look at something like this in the future in one of my designs. Just because we have grid systems in place when designing a website, does not mean that we have to stick to squares!

  2. TrackbackFriday Focus 08/12/11: Slashed Text | Devlounge