Devlounge

Design, Develop, and Grow

Friday Focus 07/29/11: Triangles

By

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
Metamarkets

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
dotwired.de

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
Cappen

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 Design – Introduction 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, CSS – Dear 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.

Design – The Auteur vs. the Committee
AKA design according to Apple vs. Google.

User Experience, Design – Visual 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?

Friday Focus 04/24/09: Earth Friendly

By

In honor of Earth Day 2009, which took place this week, let’s look at organic, sustainable, eco-friendly websites not only in appearance but also in substance.

Designs of the Week

Sustainable Party

Although not shown here, there’s quirky illustration for this site’s footer and it’s probably the only design element I’m unsure about here. It makes me question the use of the lightest Helvetica for the logo, and makes me wish the upper portion of the design had more fun touches too, which says more “elegant” and “professional” than “party”. But I do love this elegant and professional look.

Ecoki

Two things that make this site design great: (1) well-made details everywhere you look; and (2) excellent management of a large amount of content. If you have those two things in your site, you’re good to go.

Bamboo Juice

I love the canvas texture as the background for the whole layout. The magazine clipping style text and the stenciled text add to the casual feel of the site. It’s interesting how people use transparency and rounded corners in collage-style sites.

STUDIO7DESIGNS

I love the huge and colorful header, including the big Earth in the background. Lots of Apple-style effects here, but what struck me most was the use of nature scenes rather than the usual icons to represent the different sections of the site. It fits in well with their eco-friendly philosophy and makes for memorable branding.

Social Media Weekly

Design – Web Design Trends: Designing Out Of The Box

Programming – 15 Favorite E-Books for Web Design and Development

Eco – 101 Great Eco Companies

Friday Focus 04/10/09: Dark Rainbows

By

Rainbows are typically loud and attention-grabbing, but these sites have toned down the explosion of color to bring about a more modern look altogether.

Designs of the Week

Neutron Creations

The background is like a blueprint with an interesting twist. I love the icons in the Services section—I want to see more of them! The color wheel-like logo is lovely too.

WebKitBits

This site screams Apple UI, from the typeface to the pill-shaped interface elements, all with a very subtle gradient and etched text effect. I guess the only thing that bothers me are the color choices: why black for the ordinary text, and why bright blue and magenta for the headers and links.

Stefan Velthuys

The rainbow background here is so subtle, one wouldn’t mind having two strips of brighter rainbow gradients on the top and bottom parts. I like the transparent fixed footer, which is just text. But I’m also oddly drawn to the datestamp on the top right corner—it’s just well-designed.

Main Event

Hip and clubby sites tend to use rainbows and glitter and funky lines, but here I’m glad it’s more of an accent than a trademark look. I love the use of brown. Even the rounded corners, which doesn’t feel like a fad, but a nice touch that somehow adds some funk.

Social Media Weekly

Design – White Space: How to Get it ‘Right’
Examples and practice make perfect.

Design – Top 7 Icon Search Engines
Because image search, let alone icon search, is tricky enough.

Programming – The four stages of programming competence
Which stage are you?

Friday Focus 03/27/09: Twitter Mania

By

Twitter has just turned three but it it’s still the most talked about webapp in ages. That’s because people are constantly coming up with ways to extract, arrange, and present its data. Let’s take a look at some nicely designed 3rd-party websites that harness its power.

Designs of the Week

Qapture

Elegant, clean, and easy to use, despite a relatively large amount of information you’ll find on this site. It’s great that there’s a summary of the most popular items on the page right at the top. Scrolling downwards you can switch between grid and list views—again, to control information overload. Third, I like that the actual titles of the webpages being linked to are displayed instead of the tweets themselves, which show up only when you hover over the links.

TWEEEEET Design

The site’s modern touches match its theme (“design”) but I have several concerns. One, I’m not fond of the marquee scrolling: it’s very choppy and whether it’s a JavaScript effect or an HTML <marquee> tag, it has fallen out of favor a long time ago. Two, the tiny pixel fonts: it would’ve been better if it were used in more elements other than the header and footer. Three, the left-aligned layout: I really don’t see a reason why it can’t be centered.

WeFollow

Despite very muted hues, the logo, avatars, and call to action button on the right are colorful and break the monotony. And even though the design elements are clearly Mac-inspired, they’re very subtle and not overpowering. This is a Twitter-related site after all, and not an Apple one.

Which leads me wonder: why are there no bird graphics, gratuitous use of light blue, and cutesy rounded typefaces in the above websites? Have people gotten tired of carrying over Twitter’s branding to their projects?

Social Media Weekly

Design – Designing from the inside out: Part 1 – Content Before Design

Programming – Discover the “Cool” of CSS: 25 Advanced CSS Techniques

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge