patterns – Page 2

Friday Focus 09/24/10: The One Page Experience

September 24, 2010 By Sophia Lucero

Some of the most interesting interactions I’ve seen done on websites utilize the one page format. Is it because there are fewer pages, fewer elements that should be easier to manipulate? Enjoy these one page wonders on this week’s Friday Focus.

Designs of the Week

I love how the navigation is a floating chunk of land consisting of various buildings (and the robot mascot) but uppercase everywhere is a bit much.

The lines that play off of the logo work great. Looks freeform but still follows a grid. Uncovering each image in the stack scrolls the page down little by little—I don’t know if that’s intentional but it’s a nice subtle effect.

Sliders would be a lot nicer if they could be controlled via the mouse wheel. But it does make sense in this design.

The zoom on hover effect on the images is a good touch that hasn’t been overdone (yet). The continuous line running throughout the design, though, is a familiar technique for horizontal scrolling.

I like how all the sections are connected this way, and the connecting lines align with the top navigation. That’s actually really smart.

The use of rainbow stripes gives just the right amount of color to the design without looking too overwhelming. I have to wonder though: should this site have a footer, or is this enough?

Another thing I wonder about: does it make sense to still have an indicator of which section the page is currently at, considering they’re clearly demarcated and everything? Anyway, I like the big text and bold colors, as well as the photo tooltips. And the walking fat man of course!

Now this approach feels so close to a brochure. It’s very simple but still feels quite novel.

This one feels a bit similar to previous in “experience”. Love all the subtle lines and shapes in the background. Additional props to their blog being designed the same way, because lots of one page sites have completely different looks for their blogs.

Beautiful illustrations despite the overdone sky-to-underground style, although the typeface almost steals the show for me. Somehow Trebuchet looks really good on this page!

Social Media Weekly

Design – Defining User Experience as Brand Experience
“Whether or not you realize it, user interface (and by extension user experience) is as much about the branding of the business as it is about the logo, product, or day-to day business.”

CSS – CSS3 Support in Internet Explorer 9

CSS – Are CSS Frameworks Evil?
“From what I can tell, designers and agencies that work with frameworks on a regular basis tend to use either Blueprint CSS or 960 Grid System (often abbreviated to 960gs). Yahoo!’s YUI Grids is also a popular one. These were the three frameworks I experimented with.”

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 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 08/20/10: Skylines

August 20, 2010 By Sophia Lucero

This week on Friday Focus: designs that feature artistic renderings of skyscrapers and other features of a long landscape. See how they’re incorporated below.

Designs of the Week

Great grungy attitude all over, even the shiny buttons have a bit of smudge on them. Nice little detail: I like how the carousel’s right arrow changes into a square block to indicate there are no images left to view.

Love the easy feel from the pastels, gradients, rounded corners, and happy illustrations. The “add your company building” feature is also a great concept for the purpose of this website.

Bold and high contrast. Even the borders and background patterns are rugged and chunky.

The animated stack of books is really clever, and clicking loads a page where the books is opened.

Love the non-rectangular frame for the carousel—I’m seeing more of these lately. Body text is a little to small though.

The open, airy header area looks great. This is also a rare gem of a liquid layout.

Interesting fisheye (a.k.a. OS X dock) hover effect on the navigation, though I can see not-so-seamless texture tiling!

I like how all the clickables are so big yet still look minimal and refined. It’s all in the type and colors, right?

Great treatment on the contact form and the image frames. Textures all over!

I seem to have a lot of grungy designs this week, and I’m not complaining! Love the way the sections are divided, with blocky headers and thick borders of stars.

Spacing needs a little work in the featured images area, but the header navigation animations are adorable. This site is so warm and friendly.

Good idea to use the neightborhood skyline as a divider for the different sections in this one-page site. Although I think the black background is a big disconnect from the light blue one at the top.

Not a fan of the lens flare, and the featured image could have been a slideshow/carousel instead.

Lovely animations, and I like the way the skyline is in a corner instead occupying the whole width of the screen.

I wish the quirkiness of the header illustration and logo carried over to the rest of the design.

Beautiful, beautiful illustrations of the Moscow skyline. The scrollbar navigation for the image works well too. I wish they were a little more interactive though, with tooltips or links. And hooray for another liquid layout.

The header canopy is a nifty touch to the header design. Love the mix of patterns too.

Social Media Weekly

Design – Perception and the design of forms – Part 4: Figure/ground
“In this article we are going to explain the principle of figure/ground, which is surprisingly central to how forms work. More often than not this principle is—unintentionally—applied well. But we’ll also show you a few examples of when it isn’t.”

Programming – Semantics and sensibility
“For a while now, sensible naming conventions and semantics have been confused.”

Mobile – HOW TO: Make Your Mobile Websites Act More Like Native Apps
“Fortunately, a number of different frameworks are making it easier and easier for developers to create mobile web applications that look and feel more like native apps. Here are six examples.”

Friday Focus 08/13/10: Let Your Garden Grow

August 13, 2010 By Sophia Lucero

This week on Friday Focus: vines, blooms, and other foliage that do a great job of framing your website.

Designs of the Week

When doing vines on a sky background, it doesn’t make much sense to have drop shadows, does it?

The gradient on the tabs are a little severe but the translucent ones look great. I kind of want more blue in the background though, feels too white.

The use of fixed-width type is curious, but I like the mixed textures. The actual photo of a basket for a shopping cart icon is priceless.

The Quick Search box looks a little cramped; the Map Search could be more accessible.

Some nice watercolor textures here although again the shadows get to me. A little bit of a split layout going on below.

The subtly moving leaves (and the squirrel’s tail) look great—they barely call attention to themselves so when you do notice them, they’re a nice treat. Attention to detail everywhere.

I like how the leaves are behind the large sign up button.

Something more ornate and abstract. I feel a disconnect between the gray-black top and the brown bottom, though.

Another disconnect here. The header is awesome—there’s a bear! carrying a sign!—but the bottom is just too light and doesn’t even carry any hint of nature in it.

Beautiful design. Not sure what a music player is doing on a dentist site, but perhaps they thought it would be a fun little touch.

The flowers look so pretty I they weren’t just in the background. The turquoise is a nice contrast to the floral hues of pink and peach.

I like how the leaves are used as frames for the circular icons here.

Love the purple and fuchsia, it even matches the club photo on the front page. Centered logo alert!

Make sure your eyes are well-rested before you view this site; every color of the rainbow seems to be on here. The content area could have used at least a translucent background to make the text more readable, which is already so small.

Social Media Weekly

UX – Designing with Paper Prototyping
“The basic premise of this method is that a paper prototype of a feature’s UI is crafted and then given to a user who will attempt to complete a task or a scenario. Evaluators record and analyze the results from these sessions, which are then used to create another prototype.”

Accessibility – Misguided accessibility: access keys
“These days, accessibility experts recommend strongly against the use of access keys, instead putting focus on accessibility enhancers such as “skip-to” links and clear navigation and layout, fully tested with assistive technologies like screen-readers.”

Accessibility – What should be the minimum / maximum length of alternate text?
“Putting undue length restrictions on alternate text can undermine the quality of alternate text, limit the amount of information conveyed to readers, and can affect the style of writing in a way that inhibits comprehension.”

Usability – Shlock and Awe: Little Things on Your Website that Drive People Nuts
“No website will ever be perfect (unfortunately), but we’ve compiled a list of little tweaks and changes you can check on your website to make sure you’re not irritating your visitors.”

JavaScript – Commonly Confused Bits Of jQuery
“jQuery brings to the party its own API, featuring a host of functions, methods and syntactical peculiarities. Some are confused or appear similar to each other but actually differ in some way. This article clears up some of these confusions.”

« Previous Page

Friday Focus 09/24/10: The One Page Experience

Designs of the Week

Social Media Weekly

Friday Focus 09/17/10: Scallops and Shears

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 08/20/10: Skylines

Designs of the Week

Social Media Weekly

Friday Focus 08/13/10: Let Your Garden Grow

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

4 Tips to Personalize E-Commerce Websites

Search