wood

Design Focus: Not Your Ordinary Wood Grain

October 5, 2012 By Sophia Lucero

If last week was all about the forest, this week we’re zooming in on the different textures they inspire.

Designs of the Week

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Love the mix of patterns and design elements here, along with the cartoonish exaggerations of the doors and frames.

The woodgrain is relatively large here but it’s also subtle. On the Work page it goes dark with a nice glow behind each slider item. Every page, including the modal contact form, has a semi-circle cut-out from its top to express its proximity to the centered circular logo.

Another site with a dark circular logo. I have to say that I love everything going on in the About page: a “live” group photo for the header which runs on loop, and the chalk drawing backgrounds for their portraits, complete with a different pose on hover. The same looping video header concept appears on the rest of the sections.

Nice circular illustrations to represent competencies, and I like the texture interplay between the aerial maps and the wood pattern. Also, clever choice to put contact details at the top and bottom of the page, which covers and uncovers it.

Social Media Weekly

Get solid WordPress themes, plugins, and even design training from iThemes.

Programming – Interpreted Languages: PHP, Perl, Python, Ruby (a side-by-side reference sheet)

Debugging – Wait, DevTools could do THAT?

CSS – Unquoted font family names in CSS

Friday Focus 09/23/11: The Dip

September 23, 2011 By Sophia Lucero

Happy Friday Focus! Today we’re looking at designs with a bit of a “dip” in them—one content area leading into another with a nice little curve. Can you spot them? Read on!

Designs of the Week

I like the combination of wood, light grunge, stripes, and glossy (web 2.0) green—all used in moderation. This design is the poster child for “the dip” technique I’m talking about: a nice column containing navigation links at the right instead of the usual header area, ending in a curly brace shape pointing downward to the rest of the sidebar.

This shade of blue is quite popular for girly sites, especially wedding-themed ones, combined with slab serifs and calligraphic fonts. This one looks a little flat, literally, with no textures or gradients, and the girl looks like a cut-out doll with the stark white shadow!

Looking for the content? It’s tucked away in the top drawer. The focus of this design is a parallaxed animation featuring an pixelated rendering of the site owner during different times of the day. Right now the screenshot shows him typing away at his laptop (if you watch long enough, his dog shows up but gets shooed away and floats off into space), but click on the different color swatches at the bottom left and you’ll see him doing other things like dreaming in binary, grabbing coffee from out of nowhere, and playing arcade games. Aside from the fact that the colors per scene are blended really, I think this is a smart, funny way for strangers to get to know this person better, even by a little bit.

First, while the callouts aren’t interactive, I like how the first slide is styled especially the halo around the “view portfolio” circle. Hovering over the top navigation gives you circular backgrounds, too, but the active ones get pointers and turn into speech bubbles. There are cool slopes marking each section, and inner pages crop off the the very large headings to focus on the content below.

The welcome blurb plays with depth by blurring and resizing objects to make them look like they’re in the background. The illustrations are straightforward, but the use of a patch of grass to separate each section is clever. You must also check out the hover effect on each portfolio item, like a store sign or label. I must say, though, the way the contact form is center-aligned in the footer is a little weird!

Social Media Weekly

Business – How Doing Less Work for More Money Saved Client Work (or) How I Finally Became a Professional Designer
Don’t sell yourself short. Find out how “boundaries will set you free”—as in design itself.

Typography – FontDropper 1000
A bookmarklet that lets you test web fonts on any page.

HTML5 – HTML 5 Canvas Deep Dive
Start learning how to work the canvas, now!

UX, Wireframing, HTML, CSS – Building prototypes in HTML and CSS
A step by step guide to creating frames and flows, live, in the browser.

HTML, Accessibility, SEO – Pagination with rel=“next” and rel=“prev”
Google shows you how to add meaning to your navigation (and help their search engine) with semantic markup.

Friday Focus 02/04/11: Realism

February 4, 2011 By Sophia Lucero

This week’s picks feature engrossing environments with stunning details and interactions. Design imitating real life is one of the oldest tricks in the book, but never goes out of style.

Designs of the Week

I like the use of custom textures and fonts everywhere, but the parallax effect that activates every time you move your mouse is a little dizzying.

Fashioned after real-life type drawers, the diversity of the woodgrain and nameplates combined with the subtle animations makes for a fascinating microsite.

Since this is a tumblelog, it’s a good idea to have markers for the different post types. In this case they differ enough but remain subtle. The datestamps throw in splashes of color to the dominant grays.

This site has all sorts of interesting design decisions everywhere you look. For instance, the portfolio is built like an iPad with matching user interface to boot. The photos section starts out as a stack of photos that sorts itself out once you click on it. The blog is literally a journal notebook. And so on.

Social Media Weekly

Typography – Eight Ways to Combine Typefaces
“While a lot of what goes into good typography is subjective, there are some guidelines that can point you in the right direction. From there, it’s up to you to experiment and try out different things.”

CSS – Current Color in CSS
“Borders always render with the current color when a border color is not specified, but, till recently, there was no equivalent term for that use – now we do: currentcolor.”

Friday Focus 07/30/10: Centered Seals

July 30, 2010 By Sophia Lucero

Sites usually place logos at the top left corner of the page, but nudge them to the center and it makes quite an impact, as a red wax seal does on a white letter envelope. Let’s check out sites with centered logos on this week’s Friday Focus.

Designs of the Week

Love all the patterns and pastels.

Nice torn effect on the navigation and echoed throughout the rest of the site. I also like the subtle adjectives in the background.

There’s some weird layering going on when you scroll up and down, but I like the impact of this look.

The text length in the inner pages is too wide, and the script feels a bit much. Still, I like the textures and the old style illustrations.

I like the curved header navigation coupled with an ornate background pattern. The boxes of text are nicely framed, and the buttons are equally elegant.

Interesting idea to put all the beer labels as a collage for the header. There’s also a bit of a split design going on, and the use of curly braces as arrows.

Not-too-distracting animations above the logo in the footer, and not-too-overwhelming use of wood including menu items and buttons.

I find the “featuring” slideshow highly effective. The use of red, on the other hand, may need more tints and shades. What I really like is the glowing hover effect especially in the three boxes below the slideshow—simple idea but it works.

Two things that grab me: seamlessly elegant carousel of featured pianos, and the use of piano strings in the background as a stylized sunburst effect.

I wish for a little more polish on the RSS and collapse/expand buttons, but I like the openness of this layout.

It’s great that the wood texture isn’t your typical bright brown but one that actually fits the theme of the site. The form elements in the booking box is excellent.

I really love the stylized buttons in the header navigation, and I wish it were applied to every other button on the site. Old style illustrations also used here, but what’s great with this site is that it explains (in a collapsible area) what the they symbolize.

I think the wood could be a little lighter to distinguish the red on the logo, but overall this site has an excellent design from typography to illustrations to form elements.

Using a wave pattern as divider is both whimsical and smart. I love the splashy sea photograph background in the footer navigation.

Subtly textured, clean, yet feels perky.

Nice gradient on the main blurb, which breaks the blockiness of the text and gives an ethereal effect. The floating folded paper background on the video, which is an echo from the logo, is a nice touch too.

Social Media Weekly

Accessibility – Ten Common Accessibility Problems
“This document outlines ten common accessibility issues I have encountered which could result in a site’s failure to fully comply with WCAG 2.0. The document includes links to some of the WCAG 2 advisory Sufficient Techniques provided by the W3C for addressing each issue.”

Design – Create Stunning 3D Text Free With SketchUp
“Today I’ll teach you how to create some awesome 3D text using only Photoshop and a free app from Google.”

Design – Tips for Designing for Colorblind Users
“We’ll take a look at what colorblindness really means and how you can tweak your designs based on a few simple principles.”

CSS – Start Experimenting With CSS3 Keyframe Animations
“For this reason they’re used sparingly, in a lot of cases for experimental purposes or as ‘hidden gems’, but that doesn’t mean you should shy away from getting stuck in.”

Programming –

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.”