whitespace

Friday Focus 04/16/10: Slanted

April 16, 2010 By Sophia Lucero

This week on Friday Focus: designs that tilt to one side and keep the perpendicular lines away.

Designs of the Week

Love the warm hues, transparency, and even the tiny polka dots. Everything blends in nicely.

I like how the logo is used as a prominent design element, not just as a header. One thing you will notice with these slanting designs is how they usually mean they’re left-aligned too. More often than not that leaves a lot of whitespace on the right side, which may be a good or bad thing.

Really simple design, but looks fresh with the bold colors changing in each page and the boxy look.

The nice thing about a vertical user-generated gallery is you only have to browse from top to bottom and not from left to right. I really like how the fixed footer has the logo slashed out!

Forget rounded corners, slanting edges is the next big thing! Love the subtle, translucent shapes in the background and behind the content area.

An extremely fun-looking design with not one traditional design pattern in sight! Love how the plus icons turn into arrows.

Instead of the usual horizontal lines to separate sections of a one-page site, this design slopes them upward.

There’s something about slashes and slanted shapes that just fit with designy sites including fashion. Love the hover effect in the inner pages reinforcing this.

That other trend that’s also getting popular, circles, is in here too, but there’s an animated twist. The rainbow-colored header breaks the gray-filled design.

The hand-drawn effect is always a good way to add to slanting lines.

And finally: the easiest, most modern way to implement the slanting look in your design? Use CSS3 transforms!

Social Media Weekly

Design – Holistic Web Browsing: Trends Of The Future
“The future of the Web is everywhere. The future of the Web is not at your desk. It’s not necessarily in your pocket, either. It’s everywhere.”

Design – Designing with Lenses
“A design lens allows you to view the user experience through the eyes of a single design principle. Lenses were originally created for game design but are just as powerful for user experience design.”

HTML – Introduction to HTML 5
“Are you interested in HTML 5 and what’s coming down the pipeline but haven’t had time to read any articles yet?”

JavaScript – RequireJS
“RequireJS can help you manage the script modules, load them in the right order, and make it easy to combine the scripts later via the RequireJS optimization tool without needing to change your markup.”

Friday Focus 01/08/10: Red

January 8, 2010 By Sophia Lucero

Who’s in the mood for some red designs this week? Let’s start the show!

Designs of the Week

A bit of parallax going on in this horizontally scrolling site. Love the illustrations, which are interconnected through color.

I love that practically everything looks hand-drawn! But everything still looks tidy, and therefore readable.

I think my only nitpick here is the use of Flash for the top menu, and the lack of rounded corners in the pizza graphic. Other than that, this site is making me hungry for Brazilian pizza.

I like the not-quite-centered layout and the little nicks and cuts to the content boxes. Edgy, that’s what I think they call it.

I’m a sucker for these 3-dimensional, folded elements (is there a name for this yet? I really want to know). And the shades of red in this site are quite appealing. I just have a tiny issue with the top and bottom padding in the Featured Projects box—should’ve had more.

Now this is one of those sites that put me on the fence when it comes to looks, but I like how striking it is. Plus the quirky icons below? It captures how left-of-field tattooing is.

I like the whole industrial feel with a bit of a plastic-y twist in the menu and buttons. It makes browsing the site that much more exciting.

Beau.ti.ful. You can go a long, long way when you get the typography down pat. And whitespace is your best bud.

I really like the animated neon sign and oil rigs, dresses down the whole grand look of the site with its ornate borders and background.

This site’s bordering on very low contrast, but it’s still readable.

There isn’t as much red in here as the other sites but it makes since a very bright shade of red was used. I have to point out that something brilliant is going on in the contact page: the map of their company office is a live Google Maps spread which spans the whole background. Neat!

Social Media Weekly

Branding – Breadline Design’s Company Naming Machine
Just for kicks.

Design – A UI Design and Prototyping Treasure Chest
“Having these close by will save time and speed up your design and prototyping work flow. Here is a collection of these types of elements that should be a big help to you.”

Programming – 16 Different Clones You Can Build with Drupal
“So, if you’re thinking about building your next big site, here are a few ways that you can take existing modules and turn a project quickly, without needing to make any custom modules.”

Friday Focus 12/11/09: Sunbursts

December 11, 2009 By Sophia Lucero

This week, I’ve come across a lot of sites with sunbursts, a specific type of lighting that’s popular with not just the Web 2.0 look anymore. You decide if they’re crucial to the design or not.

Designs of the Week

Love the way the shape of the ribbon creates a similar cut for the rounded box below it. Everything in here is so chic, but it makes me wonder if to the ordinary visitor it’s Christmas-y enough.

I don’t get tired of seeing 3rd-party bird mascots for Twitter apps, but people could be a little more creative with their “cute” typefaces.

Overall, it’s a good look. But the treasure chest could’ve been more refined, and I’m not too keen about the inner shadow effect on the logo.

I could waste so much time telling you every bit of awesomeness on this site, or I could just tell you to go visit it and see for yourself. Perhaps the one worth mentioning here is the Featured Projects section, which looks pretty different compared to the other carousel designs we see. Also: respect to the tree!

The way the polaroid-style photos shuffle from front to back is topnotch.

The only thing that disappoints me here is that the blog is not as well designed as this site!

The sunburst is so subtle you’ll barely miss it. It’s practically design with the rest of the design. Lots of icons!

Excellent details here, from the illustrations to the framed photos to the type—the rounded font works so well here.

Sometimes a narrow, low-contrast site is the way to go, and that doesn’t mean you have to skimp on the details. I’m not sure the graphics are at the footer, but it definitely reinforces the scrapbook/collage look but doesn’t look heavy at all.

The last thing that appears on the page is the sun, which rises from behind the clouds. Good morning to you too!

Love the rainbow-colored navigation bar at the very top. The subdued blending is like the color palette for the whole site.

People should be more creative with the shape of their sunbursts, like this one. Love the fixed navigation on the rightmost column.

The color matches the dentists scrubs! I also like the arrow treatment—a great way to build to your branding, although I’m not sure if it does match theirs.

A nicely textured sunburst.

I love the splashes of orange watercolor mixed with the ornamental line art. But most of all, I love how all the user-generated photos are laid out on the page.

Some things need to be tweaked to work better but overall, the warm and playful nature-loving look is a welcome one.

The stark type in black combined with the two shades of blue is a nice departure from typographic sites that are usually black and white.

Needs a bit more color below the fold, but this site has its type and graphic details down pat.

I like the boxiness against the painterly header.

The amount of shine on this site is staggering, you’d think it were the set of Twilight (so I hear). But I like it. The links have large clickable areas, custom fonts are used everywhere, and they know their whitespace (though in this case it’s bluespace).

Social Media Weekly

Design – When Minimalism Backfires: When Too Little Is Not Enough
“This article explores some of the potentially negative side-effects of minimalist designs and the consequences of implementing one incorrectly.”

Typography – The Rhetoric Of Typography
“A functioning message is one that succeeds in connecting with the habits and expectations of its audience.”

Web Design – 10 short ‘n’ sweet tips on how to design for web
“This article will quickly run you through some of the greatest issues with design for web and hopefully give you something to think about when you start your next web design.”

Friday Focus 08/14/09: Sewing & Crafts

August 14, 2009 By Sophia Lucero

It’s Friday once again and this week on ‘Focus we’re looking at very “domestic” looking sites, like they were put together with fabrics, thread, and craft supplies!

Designs of the Week

This site is a prime example of a successful collaboration from concept to branding to execution. “Stitching” together a feed is a great metaphor, and consequently a great brand name, and now a great site design. This site is cheerful, has the right amount of texture, and will leave a good impression on those who visit.

Beautiful typography, color combinations, and graphic details. The etched text effect here doesn’t look forced as it fits the look perfectly. Perhaps the only thing I’m not 100% keen about (just 99%) are the icons used. They’re a bit impersonal and out of place considering how homey and crafty looking this site is.

Now this is what you call coming up with an idea and running away with it! The use of real fabrics, embroidery, and other sewing materials are just a joy to look at.

Great use of whitespace in the header. The image carousel is great too—gives a nice, 3-dimensional feel to it, even if they’re just images. And the zigzag edge effect (like they were cut by pinking shears) found at the top and bottom keeps the look consistent.

I very rarely feature Flash sites here, but this one’s nice enough: it has permalinks, which makes inner pages more accessible and navigable. Aside from the background and broken line borders, the animated transitions for each section of the site look like you’re flipping through a collection of fabric swatches, completing the metaphor.

The subtlety of the site’s design—subtle hues, subtle gradients, subtle edges—is what makes the look so delightful. And it pays to have a mascot, especially ones that interacts with you. Hoot!

Social Media Weekly

Design – The evolution of web design
The kind of history lesson us web designers need.

CSS – Away With Widths / Use and Abuse
An in-depth discussion about the right way to declare widths in CSS.

CSS – CSS Deconstruction: Atebits
Take notes on all the little details used to built Atebits.com.

SEO – Optimize your crawling & indexing
Google gives advice on optimizing website URLs

Friday Focus 07/10/09: Featuring Food

July 11, 2009 By Sophia Lucero

Apologies for posting this a day late, but I will try to make it up to you with yummy-looking websites. It’s a food-centric Friday Focus!

Designs of the Week

The full-width background photo under the earmarked recipe notecard is great. Unfortunately I’d rather that the top navigation wasn’t part of the Flash objects on this site. I like the very subtle grungy texture used here as it does seem to reinforce the seafood/marina feel.

A very green website, both in color and food group. Perhaps the best way to present veggies (and fruits) is to photograph them on a crisp, white background, and that works quite well here.

This is a nicely-designed restaurant site—elegant photography, rich dark hues, and good spacing all over. I like the high-res icons jutting out of both sides of the layout.

Another full-width background photo effect, this time it’s much bigger and has several rotating images. I kind of wish the content below it were longer—more than 3 links each for the new and popular recipes, for example—because you want to give more diverse options to your readers.

This is one of the more “different” designs of the bunch, because of the illustrations, brighter colors, and the overall lighter attitude this site has. But, really, when it comes to food websites, the greatest measure of good design is in the food photography, so make sure you prioritize that!

How pretty is that lettuce as a frilly background! Brings way more to the table than any other Photoshop brush, no? I would’ve liked a little more tweaking on the navigation but on the whole this is a nice, clean site. Very easy on the eyes.