uppercase

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 06/18/10: Layered Screens

June 18, 2010 By Sophia Lucero

Showing screenshots of websites on websites isn’t terribly exciting in theory, but let’s see how these designs dealt with it.

Designs of the Week

Amusing logo. I find it interesting that the designer went for an abstract rendering of a program window instead of the usual Safari. The body text in the inside pages could be bigger.

Love the addition of the foliage as well as the wooden textures, but repeating grass and soil in the lower part isn’t so seamless, so that needs work.

The corner ribbon (more like a cover) on the screen is a good idea, and so is the subtle ruler pattern in the background.

The screens need more distinction from one another, like shadows or thicker borders, but I like the difference in heights.

Not sure if this is “cheating” because the screens are bunched up as one image and you can’t interact with them, but the rotated, peeking through effect looks great.

Again on the “cheating”, the two polaroids in the background don’t change when you click on the arrows, but blurring it out of focus is another technique to consider.

Bigger is definitely better when it comes to screenshots.

Aside from program windows, mobile devices such as the iPhone are popular containers too. I think the stripes and the bright green make for a perky look.

Love the subtle watercolor texture on the edges of the page, as well as the hot pink combined with elegant typography.

As with the previous design, you can mix and match mobile devices with desktop browsers too.

Another interesting technique: opting not to include any real screenshots, just the hardware that will display them.

Not sure if there’s any benefit to this type of layering as, again, there’s not enough distinction between the two especially since they look almost exactly the same. I think the smaller screenshot could have zoomed in on one area of the website.

This may look a little cheesy for some, but since the company built its brand on the word phantasmagoria, I’ll take it. Now the question is, are the sparkly stuff mixed into the screenshots a welcome decoration, or too much of a distraction? I think the ribbon balances it out.

Social Media Weekly

Design – The Tangible Web: Thoughts on Designing Websites for Touchscreens
“Below, I’ve jotted down a few thoughts on design practices that we’ll likely be seeing a lot more of as site owners begin reorganizing and redesigning to welcome our touchy-feely visitors.”

CSS – Be a CSS Team Player: CSS Best Practices for Team-Based Development
“How many times have you picked up a project that someone else started, only to discover that the creator’s original code is a mess? Or you work with several team members, each of whom has their own way writing code? Or you revisit a project you created years ago, and you don’t remember what you were thinking?”

Usability – 9 Usability And UX Pitfalls: Learn How To Avoid Them
“If we want to be ahead of the design curve: get more satisfied clients, and happier users, we need to make sure that both we and our clients understand what these points are, and how to solve them.”

Friday Focus 06/11/10: Follow the Arrows

June 11, 2010 By Sophia Lucero

We have some interesting uses for arrows in this week’s batch of designs. Let’s see where they take us.

Designs of the Week

I like screen-high, hairline-thick arrow that appears on hover. The navigation and the subtle animation on the link hovers is great too. And don’t forget the stunning type on the front page!

Simple design concept but looks beautiful. Here the arrows are section markers and lead you back to the top. I wonder why I’m only seeing this design element now.

The hand-drawn arrows and text links add transitions from one section of content to another. It’s a good alternative to the fixed navigation on top.

Where are the arrows on the page? I can count six! Great way to lead the eye and match the elegant look of the site, is it not?

Arrows for every step of the way. The list needs better alignment but other than that, the infographics are well done.

Hiding the arrows when there’s nothing left to browse is a good idea.

Interesting slideshow effect here: instead of the usual horizontal scrolling, this one goes diagonally. I wouldn’t say it’s more effective, but it certainly different.

Social Media Weekly

CSS – CSS Sprites w/out Using Background Images

JavaScript – Inline Expansion – Why And Where To Use It

Design – 6 Apps for Collecting Digital Inspiration

Friday Focus 05/21/10: Neutralized

May 21, 2010 By Sophia Lucero

I’m seeing a lot of sites whose color palette consists almost exclusively of light grayish, brownish hues. Sounds boring? No such thing for a smart designer.

Designs of the Week

Social Media Weekly

CSS – 13 Pure CSS Techniques for Creating JavaScript-like Interactions
“Here are 13 tutorials that teach you how to push the limits of CSS and make it do things that we’re not accustomed to it doing.”

HTML – The Origins of the <blink> Tag

Typography – 10 Great Tips For Improving Your Web Typography
“Once a specialist occupation, the digital age has opened typography to computer users and web designers. When creating pages and laying out text with other content there are several guiding principles that designers should bear in mind.”

Bloggers – The History of Web Design Blogs
“Although the article may seem rather subjective to you, we hope that it will give you at least some basic understanding of how it all started and evolved into its current state.”

Friday Focus 05/14/10: Icon Parade

May 14, 2010 By Sophia Lucero

This week’s Friday Focus will tackle websites for a designer’s best friend: icons. Icon sites have been around for the longest time but we’re seeing a lot of sites pushing the envelope in interface innovation, both with their offerings and the website designs they’re found in. The latest trend so far? Websites created for a single icon set—now that’s a great way to promote work.

Designs of the Week

Excellent one page site with the letterpressed look. I wish the bottom gray area had its text a little more readable.

I really like how wide and open this design is. And custom typefaces are more rampant than ever.

A subtle noise effect in Photoshop is popular for a textured effect. So is uppercase text—note the letter spacing for readability.

Even more subtle noise texture here, combined with a touch of woodgrain for extra elegance. I feel the text on the left sidebar is a little cramped compared to the amount of whitespace in the header. And the icon preview, which occupies a large amount of real estate, could be clickable.

Love the folded paper effect combined with a bit of blueprint. I don’t need to tell you how strong the grid is on this layout and the excellent Swiss design sensibilities at play here.

I’m enjoying the hand-drawn, torn effects from top to bottom. Even the arrows in the Services area aren’t overlooked. And scribbled down Android robots—what could be more fun than that?

Sometimes a narrow layout just works better. Excellent integration of all the navigation tools from the search to the pagination. If the icons won’t make you lick your screen, the wooden panel probably will.

Lots of content on the front page compared to the other sites listed here, but it’s not busy at all. Of course the drag-and-drop feature on this site is one of the best interface goodies out there.

I like how as you scroll down, it’s one major area, then two, then three.

Really simple but it’s the details (typography, color, boxes) that stay out of the way that make the design work.

There’s something compelling about the choice of fonts on this site but I have to say that the bottom half isn’t so refined. The blog post titles could use bullet icons and the sitemap seems to need a bit of serifs.

We always enjoy Dan Cederholm and his impeccable work as we’ve featured at least one other iteration of this site’s design before. The current one? It just feels so harmonious even with various splashes of color from the different icon sets. I also appreciate a site that lets you scroll, scroll, scroll.

I feel saddened by the ad placement here. Ads can look beautiful if you can help it, but here they just stick awkwardly out of place.

I just have to include this site on the list, because no matter how long this design has been around, it still feels current.

Social Media Weekly

Design – Create Seamless Web Background Textures in Minutes
“Ever wondered how some web designers come up with such great background textures? It’s actually way easier than you might think.”

CSS – Sexy Interactions with CSS Transitions
“With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.”

Optimization – Optimizing Your Website For Speed
“In the world of the Internet, you have mere seconds to capture a visitor’s interest before they leave and find your competitors. Can you afford to have them leave just because of your websites speed?”

Friday Focus 09/17/10: Scallops and Shears

Designs of the Week

Social Media Weekly

Friday Focus 06/18/10: Layered Screens

Designs of the Week

Social Media Weekly

Friday Focus 06/11/10: Follow the Arrows

Designs of the Week

Social Media Weekly

Friday Focus 05/21/10: Neutralized

Designs of the Week

Social Media Weekly

Friday Focus 05/14/10: Icon Parade

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

How to Ace your Next Web Developer Interview

Search