Devlounge

Design, Develop, and Grow

Design Focus: Art of Paper Folding

By

If last week was all about uncovering and unfolding, this we’re looking at designs featuring actual folded objects a.k.a origami.

Designs of the Week

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

Crafton website
Crafton

Letting this site’s visitors play an origami puzzle for each page and giving them a prize at the end if they succeed is very clever. I guess my only question is if it distracts too much from the content and message of their page. I do like all the geometric shapes that come into play in the design, and it’s especially striking in the small portfolio slideshow, which uses triangles and diamonds for navigation and framing. Even cooler is how they built a 3D version too!

On Departure website
On Departure

Extremely simple site but the colors, which hail from the film it’s featuring, are lovely. I also like the very textured background where the paper folds come forth.

Ivan McClellan's website
Ivan McClellan

Love all the origami on this page and the white on blue color scheme. Wish he’d use true web fonts instead of Cufon, and the navigation for the portfolio images could blend in a little better, like the way the screen-by-screen navigation on the right hand side does.

Social Media Weekly

Ready to go out and design your next website? Try building with the Catalyst Framework.

Responsive Web Design – Rundown of Handling Flexible Media
“When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths.”

Typography, JavaScript – Responsive Measure
“Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.”

E-commerce, User Experience – Accordion Style Checkouts – the Holy Grail of Checkout Usability?
“An accordion checkout can be truly great, but just redesigning your existing checkout in an accordion style won’t make it particularly easy to use in and of itself (although it might look good). It’s what the customer is required to do at each step that makes or breaks the checkout experience.”

Friday Focus 03/09/12: Chalked Up

By

It’s back to the classroom this week on Friday Focus as we study designs that feature the chalkboard effect on them.

Designs of the Week

Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.

Adrian Baxter's website
Adrian Baxter

Most blackboard effect designs stick to the the scratchy white on black (sometimes green) look, but this one uses multiple colors (there’s colored chalk, after all). There’s a bit of a movie and zombie apocalypse motif going on in the different pages (even parallaxed on the homepage), all clever ideas as you’ll discover.

Mustache website
Mustache

Surprisingly no mustaches in the design, but it’s there in the copy (e.g. “the clients we have shaved”), logo, and favicon. The way this site is laid out isn’t noticeably different at first, but you’ll find things that make you go “hmmm”, like how the portfolio images are in a fixed scrolling panel at the right, and have this stylized “magnifying glass” hover effect. I also find it interesting that the content boxes have uneven edges made up of multiple rectangles.

Planboard website
Planboard

I like how all the info is spaced out nicely and easy to read, but the type in the heading doesn’t match, and for such a tall area, there could have been more info in it. It’s nice how the texture repeats in the footer area though.

TSE-WebDesign website
TSE-WebDesign

There’s a slide-bounce effect to displaying the “blackboard area” once you load each page, and each heading is a specific design that matches the content. I also like the little underline touch on the menu links and the logo, the kind you find inside Photoshop.

Knock Knock Factory website
Knock Knock Factory

I like the red-white-black color scheme that’s softened a little by the “blackboard area” that mixes actual portraits with scribbled graphic elements. Unfortunately you don’t see that in the rest of the pages, where icons are featured prominently.

Social Media Weekly

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

JavaScript – Thinking Async
“Here’s the rub: when you load JavaScript from a third party you should do it asynchronously. You might want to load your own scripts asynchronously too, but for this article let’s focus on third parties.”

User Experience – Lean ways to test your new business idea
“These techniques allow us to test our business idea while it’s still an idea — before developers have written a single line of code.”

Business – Docracy
“Docracy is a social repository of legal documents. Our mission is to make useful legal documents freely available to the public.”

Web Design – New tools for web design and development: February 2012
“In this new regular feature Mark Penfold rounds up 10 of the best new tools for web designers and developers that we have come across.”

Friday Focus 12/30/11: Blast from the Past

By

The last Friday Focus of the year goes back in time before we move into the future. Happy New Year to everyone!

Designs of the Week

Celebrate Christmas at Biltmore website
Celebrate Christmas at Biltmore

Beautiful graphic touches and type. This site is first split into “Day” and “Night”, then into “Awe”, “Inspiration”, “Joy”, and “Stories”. Each is further broken down into sub-slideshows. Every section on this site slides into the framed panel either vertically or horizontally.

Ramiro Delgado's website
Ramiro Delgado

I like the bold colors and the big graphics put together, but I’m not too sure about using two different script fonts on the same page.

The Cottonseed Oil Tour website
The Cottonseed Oil Tour

Another strong set of colors at play here, not to mention lots of different things grabbing your attention at once, which could be a bit of a turn off for some.

Alien Abduction Lamp website
Alien Abduction Lamp

The texture/quality of the text isn’t quite the same as the photo but I like the skewed edges on the boxes and the lighting effects everywhere.

AdPacks website
AdPacks

Lots of elements that drive the look home such as the sparkles, sunbursts, 3D box, and of course the cursive font. I really like the arrow/button although the alignment of the text is a little off.

Maratona Makeover website
Maratona Makeover

Love the idea of using patterns to replace the hair sections! There’s quite a bit of folding going on here, as well as stripes as backgrounds and shadows, and the blue that grounds everything makes the photos pop all the more.

Lather Bee Rich website
Lather Bee Rich

Even the slideshow and dropdown menus carry the dirt and smudges you see all over the page. There’s also a significant number of typefaces being used here in a way that’s not chaotic at all.

Shipment App website
Shipment App

There’s not a lot going on here, but it’s a wonderful look. The background illustration is perfect while the signup form in the foreground has a good number of details to look like a real ticket. I think my only question is if it’s a good choice to keep that form up there instead of the usual center alignment you see on “coming soon” pages. Once you hit submit (Notify) the whole box flips over to signal confirmation.

Social Media Weekly

User Experience – Beyond Bandwidth: UI Performance
“UI performance tips have been disseminated throughout the community for years, but often as an aside, with bandwidth and latency concerns much more at the forefront.”

Design – A simpler and faster alternative to wireframes
“In my opinion there’s a better, faster, and easier way to accomplish that goal: prioritized lists.”

Typography – Public Service Announcement: Watch Your @font-face font-weight
“The problem is the font is muddier than you originally saw it, and it’s all about font-weight.”

Friday Focus 11/18/11: Moustaches for Movember

By

Last week we celebrated 11/11/11; this Friday Focus we’re looking at inspiring moustache-themed designs in celebration of Movember or men’s health awareness month.

Designs of the Week

Movember website
Movember

Lovely use of varying textures as backgrounds to the equally grungy icons. Even the boxy graphic items employ rough edges to break up the straight lines.

Gallery of Mo website
Gallery of Mo

Hilarious seeing moustaches in the background wallpaper of this gallery style site. It doesn’t stop there, either: hovering on the donate button shows a moustache as an arrow/marker replacement, while the left and right arrows for sideways scrolling use curly braces instead of the usual sharper brackets or triangles. I also like that the gallery frames vary from portrait to portrait.

Octavo Designs Movember website
Octavo Designs Movember

Very few elements on this page, but it’s notable how the layout is responsive and adjusts to smaller screens. Also, animated GIFs seem to be making a comeback.

Lambert Street Handlebar Club website
Lambert Street Handlebar Club

Brown seems to be the predominant color in all these designs, not to mention an adaptation of vintage elements and typography. This site’s spiced up a bit with collages and a brighter than usual color for its wooden background.

Movember Austin website
Movember Austin

This tumblelog actually uses a slightly modified theme but I thought it would be nice to feature its look here, especially the bento-style menu I’m growing to love more and more. Too bad the drop-down menu doesn’t look as rugged!

No Shave History website
No Shave History

Love the idea of the logo matching the background for a masked look. The hover effects on the photos are also a snazzy little idea (read on below for similar ones).

Social Media Weekly

CSS – Original Hover Effects with CSS3
“We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.”

HTML – Interactive Typography Effects with HTML5
“I will go over the development of dynamic, and generative banners to give your website that little extra wow!”

Interaction Design – The 10 principles of interaction design
“Chad Vavra, interaction design director at The Barbarian Group, rounds up 10 key rules that make good interaction designs and designers and that you need to understand before you can break them”

JavaScript – Exploring JavaScript’s Logical OR Operator
“With the || (OR) operator, since values don’t need to be explicitly true or false (they can be truthy or falsy), the operator can return non-boolean results when evaluated.”

User Experience – A Brief Rant on the Future of Interaction Design
“Our hands feel things, and our hands manipulate things. Why aim for anything less than a dynamic medium that we can see, feel, and manipulate?”

Friday Focus 09/09/11: Denim

By

This week on Friday Focus we’re featuring a specific type of texture being used in websites: denim. Is it the new wood pattern? Let’s find out.

Designs of the Week

Enliven Labs website
Enliven Labs

I like that the texture used isn’t the typical blue fabric, which also means you aren’t limited by the color palette for the design. You see color swatches at the top, a fixed red ribbon background, and a huge call to action button once you get to the bottom of the page. Also, in the quest for integrating social icons into a design, we come across another technique: there’s a dark silhouette of the Twitter bird, which “lights up” into full color when you hover.

wtfJeans website
wtfJeans

The jean texture looks interesting but seems to be fighting with the navigation text. I think it’s good that the figure text is actual text, and not merged with the rest of the pants diagram. The “Made In Europe” text looks a little out of place, and could have been styled more like a badge than a button. What I really like is the textured circular backgrounds in the four bottom links—not mind-blowingly stunning but a nice touch.

Alexander Hahn's website
Alexander Hahn

I love the stitched look especially on the logo. It’s a simple design, based on an existing theme in fact (as noted in the footer credits), but the idea of using two “layers” in the background, bounded by a vertical border on either side, is something I don’t see everyday.

Drupalcamp Atlanta website
Drupalcamp Atlanta

This site ties many different elements together to create a lovely design: vintage typography, tickets that look like tickets, folded tabs, and even orange-dyed denim shaped as ribbons! However, the orange on dark gray, combined with the Harlow font, is a little taxing on the eyes.

Social Media Weekly

Typography – The 10 best fonts from the Google Webfonts Directory
With Google’s Webfonts list growing, it’s nice to know which are the highly recommended fonts on there.

CSS, Design – Use Google+ to improve your UI
See how they did it! There’s also an Apple OS X version of the guide.

CSS – Why Browsers Read Selectors Right to Left
Understanding how things work always helps people get better.

Business – The Dark Art of Pricing
Jessica Hische lists her experiences in the dirty job of pricing your work.

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge