ribbons

Friday Focus 09/09/11: Denim

September 9, 2011 By Sophia Lucero

This week on Friday Focus we’re featuring a specific type of texture being used in websites: denim. Is it the new wood pattern? Let’s find out.

Designs of the Week

I like that the texture used isn’t the typical blue fabric, which also means you aren’t limited by the color palette for the design. You see color swatches at the top, a fixed red ribbon background, and a huge call to action button once you get to the bottom of the page. Also, in the quest for integrating social icons into a design, we come across another technique: there’s a dark silhouette of the Twitter bird, which “lights up” into full color when you hover.

The jean texture looks interesting but seems to be fighting with the navigation text. I think it’s good that the figure text is actual text, and not merged with the rest of the pants diagram. The “Made In Europe” text looks a little out of place, and could have been styled more like a badge than a button. What I really like is the textured circular backgrounds in the four bottom links—not mind-blowingly stunning but a nice touch.

Alexander Hahn's website — Alexander Hahn

I love the stitched look especially on the logo. It’s a simple design, based on an existing theme in fact (as noted in the footer credits), but the idea of using two “layers” in the background, bounded by a vertical border on either side, is something I don’t see everyday.

Drupalcamp Atlanta website — Drupalcamp Atlanta

This site ties many different elements together to create a lovely design: vintage typography, tickets that look like tickets, folded tabs, and even orange-dyed denim shaped as ribbons! However, the orange on dark gray, combined with the Harlow font, is a little taxing on the eyes.

Social Media Weekly

Typography – The 10 best fonts from the Google Webfonts Directory
With Google’s Webfonts list growing, it’s nice to know which are the highly recommended fonts on there.

CSS, Design – Use Google+ to improve your UI
See how they did it! There’s also an Apple OS X version of the guide.

CSS – Why Browsers Read Selectors Right to Left
Understanding how things work always helps people get better.

Business – The Dark Art of Pricing
Jessica Hische lists her experiences in the dirty job of pricing your work.

Friday Focus 09/17/10: Scallops and Shears

September 17, 2010 By Sophia Lucero

This week on Friday Focus: designs adorned with the timeless patterns of scalloping and sheared edges.

Designs of the Week

The hover effect with the ribbons in the top navigation is a little weird, but overall this is an appetizing design.

I wish the links could light up on hover since the design is a light on dark one. Check out the Ethos page for a nice list of web design tips.

Compared to the detail of red and white striped border, other portions of the design feels lack. Being a gallery-type site shouldn’t take away from that.

I like how the portfolio boxes are taller and leaner than usual. The design is held together by the red and the ever-popular narrow-uppercase-sans serif type.

A solid, put-together design, save for two concerns of mine: the type is too small (again with Garamond) and white on shocking pink isn’t the most enjoyable thing to read.

Excellently designed online store, from the drag-and-drop interface to the fully integrated share buttons. The animations are snappy and fit with the attitude of the brand.

The columns of lists could be more attractive like the rest of the site.

I think the gradients are a little to bright for what I usually see, and this is built on an existing WordPress theme, but the concept is sound.

Bold and chunky not only in shapes but in type and colors The portfolio section is works well.

Social Media Weekly

Design – Design pixels aren’t frontend pixels
“Something I’ve observed is frontenders and designers often sound like they’re talking about the same thing, while actually talking about different things.”

Design – Good Designers Learn From History
“I foolishly thought of history as dusty facts and faded images. And only the foolish child thinks history doesn’t matter, that it’s irrelevant and inessential to growth.”

Microformats – Simple Semantics With Microformats, Part 1
“At the highest level, microformats are a way to add meaning (semantics) to common web content. At their foundation, microformats are simply sets of HTML attributes (most often rel and class) and values applied to markup in order to describe the content.”

User Interface Design – The Man Who Destroyed the Boring
Interface and Lived
“From the earliest graphical user interfaces, to the latest pixel perfect work seen in apps, the most basic elements of the interface have remained pretty much the same.”

Friday Focus 09/03/10: Ribbons

September 3, 2010 By Sophia Lucero

Using ribbons is really big these days, bringing both sophistication and a hint of nostalgia to this week’s designs.

Designs of the Week

The Work section slider is great. What I really like is the lightbox contact form—go all out when customizing it.

I find the gray shapes in the background an interesting touch, but needs better spacing, better association by proximity.

The details on this design are really fun but the colors—mostly the gray—seem to dampen the overall mood.

Doesn’t make much sense for the entire space beside the top left logo to be a hyperlink. I think the submit button could echo the glossiness of the ribbon.

Love the use of textures on both the ribbons and the headings. I also like the diamonds, which do match with the angles of the ribbons.

This site needs a description of what it’s about. What exactly is the place? Where exactly can you find it? Always reach out to your visitors.

Put your logo on a ribbon like that, hanging like a flag, and you get elegance for cheap! Some texts are too small due to the delicate nature of Garamond, but don’t you just love the bird silhouette and that watercolor smudge behind it? Social media intergration at its finest.

Header navigation is excellent but the “Connexion / Inscription” link should have been styled in a similar way. Other than that, really cohesive design.

Straight to the point! And does away with default browser fonts.

I like every single detail on this front page. So imagine my disappointment with the membership request page.

The dropdown menu shape is neat, and it’s just the Times New Roman text that throws me off, but more or less fits the design anyway.

Social Media Weekly

CSS – BonBon Buttons – Sweet CSS3 Buttons
“There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.”

HTML – WebKit HTML5 Search Inputs
“It just behaves like a text input. This isn’t a problem. The spec doesn’t require it to do anything special. WebKit browsers do treat it a bit differently though, primarily with styling.”

User Experience – How Choice Impairs Your Visitors
“Many sites provide an array of methods to interact with their offerings, but excesses in decision-making pressure can render less empowered visitors into a cyclone of stress from the barrage of questions being asked. As an industry, we place a great deal of emphasis on getting visitors to make decisions, but are we turning a straightforward path into a labyrinth with our need to know?”

Friday Focus 08/27/10: (Mostly) Black and White

August 27, 2010 By Sophia Lucero

I’ve noticed a lot of designs with a mostly black and white color palette lately, and not just for site types you’d expect. Is the colorful, rainbow trend being phased out with something more classic? Are people tired of safe, middle-ground gray? Welcome to this week’s Friday Focus.

Designs of the Week

It’s interesting how even the background is a strong black and white graphic.

Lots of other trends here: folded ribbons, subtle noise texture, and centered logo. Note how the social buttons and feed subscriber count come before the navigation; guess that’s what’s more important on this site!

Just as simple and minimal as the color palette.

Love the hanger icon on the current navigation item, and the feather in the drop-down menu.

Yellow as accent for black and white designs start here. And are you for or against sidebars?

Screenshots and product shots are getting bigger and bigger. I vaguely remember them occupying one-third of the page but now it’s half.

I like how light and playful this looks, including the irregular pattern in the background, and the recurring circles.

Great breathing space between everything.

It’s so clever how when you hover over the a navigation item at the top, it also affects the navigation at the bottom (not pictured). Also note how the browser frame in the portfolio carousel is abstracted and black.

The amount of gradients here is a little strong but I think it works. Perhaps it’s just the text in the lower half that could be improved.

A little bit of alignment issue but as usual I love the whitespace.

Still not a big fan of the noise texture trend but it’s slowly warming up to me. Here it looks warm and fuzzy!

The post navigation here is a wonderful idea, but the arrows could be a little more obvious and closer to the center post.

What a nice idea to put the slideshow on the top right across vertical navigation, and place your name big front and center. Memorable branding.

I love how the nut on the logo repeats on the ticket icon.

The video area doesn’t really work for me but everything else looks nice.

More and more I’m seeing a layout divided in halves instead of in thirds.

The design is compelling although as a website design, not so much. I would have loved to see more.

The mix of patterns and the interactions feels nice, but I don’t understand why you have to hover twice to navigation: first to make the designer name appear, then to make the menu appear.

Big, bold, but still clean and easy to read.

Social Media Weekly

Accessibility How do we save longdesc?
“The longdesc attribute, although potentially useful, was removed from the HTML5 specification, despite recommendations to retain it from the HTML Accessibility Task Force.”

Usability – DarkPatterns.org
“This pattern library is dedicated to Dark Patterns: user interfaces that have been designed to trick users into doing things they wouldn’t otherwise have done.”

Usability You’re a failure: Deal with it
“Every website has points of failure. It is inevitable. The question is do you know what they are and are you doing something about them?”

CSS – CSS3 Playground by Mike Plate
WYSIWYG CSS3 code generator.

JavaScript – PaintbrushJS
“A lightweight browser-based image processing library”

Friday Focus 07/09/10: Background Repeat

July 9, 2010 By Sophia Lucero

This week on Friday Focus: it’s backgrounds with repeating patterns, a well-loved technique that doesn’t go out of style.

Designs of the Week

The logo doesn’t quite match the vintage look but it draws enough attention like the other elements: large headers, power lines, icons.

Love the snappy slide out animations on the images and the gray/pink color scheme. The details are pretty much perfect and it’s just the social media buttons that look out of place.

Great treatment on the text, and the purple/black/white theme is quite elegant.

I absolutely adore the idea of using not just a flat graphic pattern as a repeating background, but multiple patterns and photos in boxes. The only question is if it’s too distracting for the content, which I think isn’t, because if anything it keeps me glued to this page!

Extremely subtle pattern, but it’s there. Social media buttons look better blended; the letterpressed look helps.

Using your logo as your background pattern? Brilliant.

Again, logo as background pattern, but what really catches my attention here is the transparent and angled images in the carousel.

Love how there’s barely a straight edge in this design, just mostly ribbons and fancy frames.

Striking, but is that Comic Sans I see in the footer?

I actually like that the background is a much larger pattern than what we usually see, which makes it look different from the wallpapered look. It’s also great that the images blend in the same pattern to reinforce rhythm and consistency.

I’ve run into this look so many times now, but I don’t really tire of it, and it’s done really well here. However, for such a sweet and elegant design, I’m wondering if the gray in the navigation is a bit too dark.

Doesn’t this make you nostalgic for the high-gloss designs that have now been replaced by the more subtle ones these days? And actual sparkles! What a fun design.

Social Media Weekly

Community – HOW TO: Get the Most Out of Q&A Sites
“There are ways to ask the best questions, provide great answers and ultimately build your reputation; here are eight guidelines that can help.”

Design – Icon Reference Chart
“A comprehensive chart of icon information for various platforms and devices”

Design – 365psd
“Download a free psd every day for a year”

Friday Focus 09/09/11: Denim

Designs of the Week

Social Media Weekly

Friday Focus 09/17/10: Scallops and Shears

Designs of the Week

Social Media Weekly

Friday Focus 09/03/10: Ribbons

Designs of the Week

Social Media Weekly

Friday Focus 08/27/10: (Mostly) Black and White

Designs of the Week

Social Media Weekly

Friday Focus 07/09/10: Background Repeat

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Sass x Class = Lea Alcantara

Search