boxy

Friday Focus 07/23/10: Bento Boxes

July 23, 2010 By Sophia Lucero

This week on Friday Focus: websites whose content are arranged into boxes like those cute bento meals. This time, you must think inside the box!

Designs of the Week

Let’s start with the poster child of this week’s collection. A little too busy for me, perhaps the other columns that aren’t at the center of the page can be faded out? I do like the vertical approach here though, as the header becomes the leftmost sidebar.

For a design like this, you always need to pay attention to what you’re publishing. Here everything blends in nicely and looks like a happy quilt!

Love the horizontal and vertical scrolling, which makes total sense for a grid-based design like this. The experience feels great and makes you want to browse more stuff.

Disappointingly unusable site—it uses one big image map—but I like the concept.

Looking at this site quickly, it looks okay, but eventually you’ll have to wonder why the boxes aren’t lined up properly. I know that it’s a trend to let the floating behavior determine where they’ll land, but in some ways it feels lazy as well.

Better example. The stark black and white plus the bold titles make for a striking look, no doubt.

I like this fairly colorful look as well as the controls for filtering the content, although I’m not happy with the “myster meat” collection of boxes beside it. Of course the footer provides a more useful version of that.

Interface imitation is a growing trend, and here it’s still pretty subtle but memorable (click on the “slant” box, you get a marching ants effect, then of course the blinking cursor). Love the navigation effect.

One of the most peculiar implementations I’ve seen; the images appear only on hover, using pretty dated JavaScript techniques.

I like the use of primary (and secondary) colors for a “designy” feel. But this one doesn’t know how to use semantic HTML either.

I like the boxes and circles used all over, although I wish the sidebars were a little less distracting from the main content area.

I had a pleasant time browsing this site; it looks warmly welcoming and elegant.

Very nifty concept!

Boxy designs don’t just mean you have to put content in boxes, follow the grid rhythm, be done with it. See how this site played with its logo and the placement of its text and photos.

Love the use of the browser’s full width and height.

Really elegant looking, and I admire the fact that even the menus are typed out in HTML even when they could have just used a full image.

Social Media Weekly

JavaScript – JavaScript Minification Part II
“This article emphasizes what you should do to take advantage of YUI Compressor’s best feature for minification: local variable name replacement.”

JavaScript – Say No to noscript
“Despite early accessibility advice advocating use of the noscript element, best practice is to use unobtrusive JavaScript for progressive enhancement, rather than relying on fallback content.”

CSS – Bulletproof CSS3 media queries
“I tried to resolve this problem by providing pure CSS solution for 95% of market share PC browsers and JavaScript solution for the rest of the browsers.”

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 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 04/09/10: User-Generated Galleries

April 9, 2010 By Sophia Lucero

This week on Friday Focus: designs that prominently feature user-submitted content, particularly images. How do you prevent monotony and preserve quality on these sites? Let’s find out.

Designs of the Week

Very homey, and it’s all in the details. Just… look at it.

This look is a bit more understated compared to the previous one, but again it’s all in the details giving way to focus on the content. The overlay of info on hover, the color swatches on the sidebar, the visualization of tags by popularity, the use of thin borders for tabbed navigation, and so on.

I feel like the scripty, retro look could be reinforced more, especially in the blurb text, which seems a bit cramped.

I like the layout here. The All / iPhone / iPad filter is a little too small and up there, but other than that, all the non-gallery stuff are on the right. I also like that the four most recent images are larger than the rest, which breaks the rhythm and calls attention.

I think the middle area could be a little more refined, but I like that even the video player has the paper-like look around it.

Very underdesigned and I don’t mind one bit. It’s not so obvious but as you browse further, the site is left-aligned, not sure why. I find it interesting that the pixel-style footer, a repeat of the header, is very tall.

Looks extremely busy but the features are fantastic. The image containers swap according to the type of mobile device being developed for, and practically everything is in black and white so the apps stand out.

This is actually running on the Fullscreen premium WordPress theme, but I decided to use a live example where it works as a user-submitted community. I love that the layout is unconventional but still effective.

Social Media Weekly

Design – Know When to Stop Designing, Quantitatively
“Efficiency lets you know when you can stop looking for a better design.”

Usability – Horizontal Attention Leans Left
“Web users spend 69% of their time viewing the left half of the page and 30% viewing the right half. A conventional layout is thus more likely to make sites profitable.”

Usability How to Win Friends and Influence People Remotely
“Once remotely located a designers ability to interact with other team members and effect change are funneled through the telecommunication mediums that the team uses to communicate. This article lists the available mediums and analyzes their respective strengths and weaknesses and provides suggestions for their effective use.”

User Experience – Designing with the Elements of Play
“The elements of play, such as points, levels, and challenges, are powerful for application development beyond games.”

Friday Focus 03/12/10: Grit & Grime

March 12, 2010 By Sophia Lucero

Going dirty has never looked this good! It’s grungy websites this week on Friday Focus.

Designs of the Week

It’s interesting how despite the chaotic background you can still make out the boxiness. A nice contrast.

I like how the site is designed as this screaming poster for the band. The content for each page is minimal and concentrated in the middle. The style is a bit of old school webdesign with the custom scrollbars and whatnot, but impact looks like the top priority here.

Again, this looks chaotic but at first but you’ll find the screen divided into three: the navigation area, the content area, and the slideshow area. Simple.

I just love how well-integrated the navigation is into the design, which happens to be a bit cheery and not just the usual angsty grunge. Another thing I like: the custom background for the lightbox overlay—a lot of people don’t bother changing that, and here it matches the design.

Truth is, only the background is the grungy part. The foreground is a very interesting folded paper texture, which even influences how the logo looks. Also interesting is the treatment of the portfolio items.

Social Media Weekly

CSS – Progressive enhancement: pure CSS speech bubbles
“Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.”

Usability – 5 Can’t-Miss Usability Tips for Mobile Website Designs
“Because of the instability in a lot of the mobile web design information that is being distributed on the web, a lot of websites have very poor mobile interface designs. Below, we’re going to cover a few simple, yet prominent steps to designing a much more effective interface and increasing the quality of a mobile websites usability.”

JavaScript – The Total Newbie’s Guide to jQuery: Select Elements and Manipulate CSS with jQuery (Part 2)
“If you’ve been wanting to learn the basics of jQuery and start adding some dynamic interactions to your website, this is the place to start. If you’d like to follow along with the code in this article, download the sample, which includes all of the code examples from the book.”

Friday Focus 07/23/10: Bento Boxes

Designs of the Week

Social Media Weekly

Friday Focus 07/09/10: Background Repeat

Designs of the Week

Social Media Weekly

Friday Focus 04/16/10: Slanted

Designs of the Week

Social Media Weekly

Friday Focus 04/09/10: User-Generated Galleries

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Should You Start a Business or Remain Independent?

Search