fixed footer

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 07/25/08: Illustrated Designs

July 25, 2008 By Sophia Lucero

Dive into the colorful and detailed world of illustrated web design this week on Friday Focus.

Designs of the Week

I like that this is a 3-column layout that gives off more of a brochure vibe than an online shopping cart. I also like that this site could have been done fully in Flash, but the creators chose to use it moderately.

This web design company has a signature elegant look to its illustrations, showing you don’t always have to look cartoony when employing this design technique.

Now here’s a site that literally rides on the comedy of cartoony illustrations. Again, Flash is used only in the header to add even more quirk to the site. And at the bottom we see another fixed footer using translucent waves (from the French Riviera?).

I know, this site has been featured every which way you look months ago, but now Silverback has launched and aside from the parallax effect when you horizontally resize your browser window, you get to scroll down for more jungle-y goodness—love the furry border at the footer!

Social Media Weekly

Design – Getting Moody: A Look at Inspiration and Style in Early Design Techniques
Tom Osborne from Viget Labs shows you how to cultivate inspiration with the help of a mood board.

Programming – Top 10 Concepts That Every Software Engineer Should Know
Go back to basics and check off this list of what you should be studying or brushing up on as a software engineer, or just a curious geek in general.

Friday Focus 07/11/08: Blue-Gray

July 11, 2008 By Sophia Lucero

Happy free 7-11 Slurpy day! Happy iPhone 3G day! Let’s celebrate with some sleek websites this week. They’re mostly blue, gray, blue-gray—that seemingly drab section of the spectrum actually manages to turn up excellent designs, so don’t shun it just yet! Oh, and we have a ton of examples this time, so brace yourself!

Designs of the Week

I love the subtle navigation and portfolio item effects here. A few years ago this page would probably be constructed in pure Flash, but it’s amazing what you can do with simple JavaScript these days.

This fixed-footer layout technique is reminiscent of StrawPoll, which is also a voting site that uses Twitter. But there’s a twist: you can hide the island if it’s getting in your browsing way.

I guess you’d say that this website has typical “Web 2.0” elements in it: gradients, reflections, rounded corners…everything except for the candy colors of all those crazy webapps. This is a reminder that despite their overuse and misuse, a good-looking website can still emerge using those tried and tested techniques. The tip here is to avoid the bright hues in the structural elements, but keep them in the “accessories” like the icons.

Another muted design here—not just the blues, but the reds. Though I think the gray background is a little too dark and close to the color of the text, which could be a contrast issue with some people. I particularly like the navigation tabs, including how they described each section so you have an idea of where you’re going.

Now this is a very strong design, even though its colors are practically monochromatic. It’s all in the details and the right amount of contrast, while maintaining this boyish feel.

I love the use of (faux) transparency here. Normally I wouldn’t be too thrilled about the black to light gray gradient because it’s so abrupt, but in here, it’s a great lighting technique. Again, another almost-monochromatic design that still looks interesting.

Friday Focus 04/16/10: Slanted

Designs of the Week

Social Media Weekly

Friday Focus 07/25/08: Illustrated Designs

Designs of the Week

Social Media Weekly

Friday Focus 07/11/08: Blue-Gray

Designs of the Week

About Devlounge

The Best of Devlounge

Vectr: a free graphics editor on your desktop and in the browser

Search