light

Design Focus: Light & Shadow

December 2, 2014 By Sophia Lucero

Mesmerizing interactions of light and shadow are on display for this week’s feature.

Designs of the Week

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

Very editorial, but not static. Video plays while masked in a silhouette, while text moves, splices, and changes while overlaying brightly filtered photos.

A simple blocky layout with one over-the-top effect: interactive long shadows.

The kaleidescope animation is masked under the band name on first load, and clicking Launch loads the full view while playing the tracks—very trippy.

This one looks similar but also interacts with your mouse in 3D space. I also like the hover effect in the Updates section: a swift gradient slides behind the links, which feels like a ray of light streaming past.

Social Media Weekly

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

Web Design – What It Takes to Build a Website
“The web is important, so we need to build it right.”

CSS, Typography – Towards a more perfect link underline
“Accompanied with four text-shadows positioned to the left and right of the link text in the color of your background, you even get a nice descender clearing effect.”

Interaction Design – Top prototyping tools for interaction designers
“As with any gamut of tools, each prototyping tool has its strengths and weaknesses. I designed my own grading scale using five characteristics, on a scale of “terrible” to “awesome”.”

Friday Focus 12/09/11: Hello, My Name Is

December 9, 2011 By Sophia Lucero

This week’s featured designs business card websites, some of them looking literally like cards containing contact information of their owners. That means very minimal layouts but still all compelling experiences.

Designs of the Week

First up, the site that started this trend. The design may be over a year old but the graphical details are still all the rage today. One of the most important features for this genre of a site are the vCard download link and the social media links, accompanied of course by the colorful icons for each site. No tabs here, but each section in the menu loads with a vertically sliding animation, while the hover effects use horizontally sliding effects.

The shooting star in the background is actually animated with Flash. So are the stars which twinkle. There’s a touch of the Aero (Windows Vista/Windows 7) interface in this design (particularly the avatar) but I feel it’s the custom font used on this page that gives a different look to the whole site.

Benjamin De Cock's website — Benjamin De Cock

This site greets you with the owner’s name then displays a closed box, which you click on so it pops open to reveal this card. The animation even contains accompanying smoke effects. Other visual treats to enjoy on this page: an icon-based website tooltip on the text link for “interface designer”, glowing hover effects on the bottom icons, and a slider for his three avatars.

Not the usual boxed in layout but it’s all only contact information in here. Hovering over the initials reveals the full name and occupation. Same goes for the links below it.

Margot Dowleska Dyer's website — Margot Dowleska Dyer

A nice earthy look with icons that blend in and a slideshow running in the polaroid frame to the left. There are some portions though where the graphics make the text a little difficult to read and are competing for attention with the foreground.

Maximilian Schoening's website — Maximilian Schoening

The closest thing to the business card metaphor translated to a webpage, complete with an animated flip done with CSS3 transforms when you click on the top right blue corner. The background uses another CSS3 property, radial gradients. The other side contains nothing but tiny social icons.

Social Media Weekly

CSS – The CSS profilers are coming!
“Back in August I talked about the lack of benchmarks or performance tools for CSS. In the meantime, the fine folk we call browser makers have been working hard on new developer tools to do just that: measure CSS performance.”

CSS – Truncating text using only CSS
“It works in IE 6+, Safari 4+, Firefox 7+, Opera 11+ and Chrome 10+”

Design, Business – Warm Gun: Design for Continuous Deployment
“In his Design for Continuous Deployment presentation at the Warm Gun conference in San Francisco, CA Randy Hunt shared how Etsy’s development process allows designers and developers to collaborate at scale on production code.”

CSS – Knyle Style Sheets
“Inspired by TomDoc, KSS attempts to provide a methodology for writing maintainable, documented CSS within a team.”

Friday Focus 03/26/10: Full Bloom

March 26, 2010 By Sophia Lucero

Let’s celebrate the new season with stunning designs that display the best nature has to offer. Happy Friday Focus!

Designs of the Week

Wonderful design. The hover effects are brilliant. I also like how the layout is open and flowing. Both the photographs and the inner page designs are full of personality.

The integration of nature here is simple and limited but the effect is still eye-catching.

I can’t stop looking at this site. The art is topnotch. It’s warm and relaxing but still a strong color palette; I want to put it on my desktop or hang it on my wall. The animated candles are a nice, subtle touch.

Despite its darkness, the has the same effect on me as the previous one—the design has a great scene that puts you in a certain mood. The typography and other graphic details are also excellent. Tiny gripe: the contact icons and CSS awards could have been blended in better.

Despite some cliche elements (the man with outstretched arms and the glowing tree), there are some great graphic details on this site. My favorite would have to be the borders turned twisting ribbons turned hills, with leaf-like patterns—how do you even describe this? The brown, orange, gold, and green colors blending into one another is just great.

Social Media Weekly

User Experience – Five User Experience Trends I’ll be Watching in 2010
“Today I’m sharing five trends I’ll be watching over the coming year (and beyond) along with some thoughts about how they might change our industry. And even if I’m wrong about some of these, I’ll be interested to see where they go.”

CSS – 11 CSS3 Code Generators to make CSS3 development a breeze
“CSS3 is awesome, but the new syntax is sometimes hard to get your head around. Thankfully though, a few kind souls have created some very useful tools to generate the code for you.”

CSS – A Killer Collection of Global CSS Reset Styles
“I have used each of these resets on various occasions with great success, and have even managed to scrape together a customized hybrid that cannibalizes key aspects of various others. For each reset, I provide as much information as possible concerning the source of the reset, key effects, and other essential information.”

jQuery – jQuery Presentation Plugin: Say NO to Keynote!
“I wrote this small jQuery plugin that gives you an interface in a browser to give a presentation. If you are getting antsy, take a look at a demo or download it from github.”

Design – 7 Steps To A More Effective And Productive Web-Design Process
“The tips and tricks below are my personal experience. It has worked for me and I’ve learned many of them from working with other designers, too. They’re little insights into my own design process. I hope you find it useful.”

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 02/05/10: Lightly Textured

February 5, 2010 By Sophia Lucero

Subtlety is the name of the game this week on Friday Focus. We’re featuring designs with light hues and textures for a relaxing, elegant feel overall.

Designs of the Week

Love the texture on the blurb itself, not just in the background. And the use of rotated spades as bullets? Lovely.

I really like the asymmetrical elements in this design. And it feels organic and warm as opposed to loud and bold—a different take on what design firm websites typically look like.

Airy, open design. What I could call a “pretty much perfect”!

I’m not sure what the reasoning behind a left-aligned design is, but it’s interesting to see that isn’t completely extinct. Also interesting: the ad placement on the left side.

Everything’s so nice and wide, including the neat dropdown menus.

I really like the way the edges of the “paper” layout have thumbprints on them, aside from the shadows and watercolor paint below.

The repeated use of the curly brace as a design element is a great touch.

Animated elements in headers are getting more popular too. I just think I want the navigation to have bit detail to it.

The only thing that bothers me is the way the button is designed. It’s very striking, yes, but I think it could be done better.

Love the stack of images that each comes to the front upon hovering.

Note how there’s not a whole lot of links in the header, and that they’re all big clickable things, which makes the visitor’s browsing choices dead simple.