Devlounge » Friday Focus

Friday Focus 02/03/12: Scrolling & Sliding for Good

Sophia Lucero — Fri, 03 Feb 2012 13:02:56 +0000

Happy February Friday Focus! Our featured websites of the week highlight informative, for-good topics in a vertical storytelling format.

Designs of the Week

Need help in promoting your site? INeedHits has been in the search engine marketing since 1996!

Coca-Cola + McDonald's 2011 Stewardship Report

The combination of hand-drawn illustrations and photos and the parallax animations that “lift off” each object drives home the charm and quirk of this design. The backgrounds are very bright so the small text is a little difficult to read at times but other than that, a fun little ride.

Dangers of Fracking

Some sites like to do their storytelling with different slides per screenful but in this case it’s one long connected trail, from roads going through factories all the way to underground tunnels. And aside from the usual navigation marker, you’ll see icons pop up and stay at the top of the screen as a summary of the facts you’ve scrolled through so far.

6 Steps to Responsible Paper Purchasing

This one’s also colorful but on a warmer, more “organic” palette. Aside from the large graphics, the different paper textures at work, it’s the typography that gets the message across effectively, with every screenful easy to read.

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

Social Media Weekly

Accessibility – Skip links and standards?
“Q: Are there any standards associated with skip links? A: Yes!”

HTML5 – The best of s
“Avid HTML5 watchers will know that the element was dropped from HTML, then re-instated, with more New! Improved! semantics.”

CSS – CSS Specificity
“Some people are confused by CSS Specificity, especially with all of the (not-so) new CSS3 Selectors. The image below may help make sense of CSS Specificity.”

Debugging, User Experience – Support Details
“Tech support management.”

Accessibility, User Experience – Did we lose track of the big picture?
“Let’s think Responsible Design before anything else.”

Friday Focus 01/27/12: Solid Color Coded

Sophia Lucero — Fri, 27 Jan 2012 13:07:19 +0000

Welcome to the last Friday Focus of the month! This week we’re featuring sites employing blocks of color as a dominant part of their designs. Who says we need to use gradients in everything we do? See how it’s done.

Designs of the Week

Get solid WordPress themes, plugins, and web design training from iThemes.

Medis Kök & Bar

Always a good idea to grab inspiration from your logo and and translate it directly into your design. Here you have a sumptuous photo slideshow on the homepage, but inside it’s all color blocking, with each page title in its own column, and the body copy to the left. It’s only unfortunate that background images had to be used instead of real text, and again, too much all caps.

Camp Luxe

It looks like color coding and icon-based navigation go hand in hand in this trend. Lots of boxed in elements here, but still looks very light and breezy. I particularly like the background pattern made up of the icons you find in the navigation, but arranged in a way that’s both luxe and cozy at the same time.

Favolla Comunicação

I like the paper-based forest in the background and the icon designs that mesh so well with the logo. What puts me off a little, however, is the uneven alignment of the boxes and the justified text.

Orestis Webdevelopment

Once again, another icon-focused design, but in this case they’re quite abstract and futuristic looking. The use of very colorful hues is just right and not overwhelming at all.

Maria Helena Cunha

Two more familiar trends here: triangles and the use of CMYK as the color palette. I find the text to the left a little too cramped and dark, and considering each block is pretty lengthy there should have been at least some hover effect that lit them up similar to the one you see to the portfolio on the other half of the page.

Dataveyes

I like how each section literally uses one bold color in its background. The visualizations and and other hover effects are also lovely. Some blocks are cut off though, as if the height isn’t calculated properly, and the typesetting is a little rough.

The Work Cycle

Another CMYK (plus green) color scheme here. One good idea I noticed is the hover on each image puts on a slight tint based on the section it’s in. It’s a little confusing, though, that the four colors are used for both locations and the top navigation as seen in the circles above.

Social Media Weekly

Copywriting, User Experience - Not Lorem Ipsum
“We want clients and designers alike to think about their design and how it will work with the web copy, we want you think about how numbers, symbols and bullet points will look.”

Typography – Our Favorite Typefaces of 2011
“The idea is simple: I invite a group of writers, educators, type makers and type users to look back at 2011 and pick the release that excited them most.”

Business – Why I don’t do “mates rates” projects
“It’s almost a certainty that at some point in your career, you’ll be asked by a friend or member of your family to work on a project and feel you should only take a nominal “mates rates” fee. Try not to.”

Typography, Accessibility, Semantics – A better way to use icon fonts
“What do you think about this issue? Is speak:none the Holy Grail of icon fonts? Or could we use SVGs to archive similar things?”

Get solid WordPress themes, plugins, and web design training from iThemes.

Friday Focus 01/20/2012: Round and Round We Go

Sophia Lucero — Fri, 20 Jan 2012 13:08:54 +0000

Where we stop, nobody knows! This week’s Friday Focus showcases designs that spin around. First it was the fascination with rounded corners, and circles, and now it’s rotating objects that’s all the rage these days.

Designs of the Week

vlog.it

Every video is displayed in one of the three concentric wheels turning in opposite directions against one another. Clicking on the image loads a lightbox, one of two black-and-white transition animations, and plays the video. You can pick from either Vimeo or YouTube, as these are the designer’s liked/favorited ones on each site. This concept is quite the feat and a bit intensive of some computers, but that’s how experimental websites roll (pun intended). I guess my only comment would be that when you’re not doing anything on the site, i.e. the static state, it’s not animated, and you miss the movement between the welcoming animation and the ones that appear when you do clicks.

Alpis Design

Not visible here but: the logo sports a stylized teardrop/lowercase ‘a’ shape pointing to the lower left, and this form is echoed in the navigation at its right, every link corner except the bottom left is rounded. Aside from the large images in the portfolio section which resize with the layout accordingly, there’s this secion which contains large circular icons that turn when you hover on them.

Ralph Van Rentergem

Lots of strong imagery in this one-pager; for a baby announcement site it’s very mature with lots of browns and rough textures and its overall imported coffee theme, mixed with this carousel and a rocketship a couple of screenfuls below. Another thing I noticed here is that the anchor links use period (.) instead of the usual hashes (#), which is quite surprising.

Youandigraphics

There’s another animation going on in this site and it’s one of a pointing hand pressing a button behind an array of stripes. There are only two images laid on top of the other (the stripes and the hand graphic) but a simple horizontal movement creates the optical illusion of something more. Now, these section headings have several more layers of shapes piled on, rotating in different directions and speeds when you scroll past. All fun ideas and the only concern I have is semantics in the markup.

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

Social Media Weekly

CSS, JavaScript – Making Love To WebKit
“This idea started with an accidental discovery: if you put a CSS perspective on a scrollable

, then 3D elements inside that

will retain their perspective while you scroll. This results in smooth, native parallax effects, and makes objects jump out of the page, particularly when using an analog input device with inertial scrolling.”

CSS – CSS1K
“A demonstration of what can be accomplished with only 1 K (Kibibyte) of CSS.”

User Experience – Five skills you need to make AB testing work
“Multivariate and split testing can be crucial for sales conversions but how do you get the most out of it?”

Build on DIYThemes’ Thesis Framework for rock solid SEO and great layout customization options.

Friday Focus 01/13/12: Keeping It Trim

Sophia Lucero — Fri, 13 Jan 2012 15:18:35 +0000

This week’s featured designs are staying fit and trim with these not-so-wide layouts. Happy Friday the 13th Focus!

Designs of the Week

BBQWar

Having a one-column site champions focus. Blogs often get cluttered with unnecessary information (I’m not even talking about ads) so here’s it nice see that’s not the case. Dashed lines repeat everywhere, and so do the raw treatment to the graphics, from the bulls in the background to the rough borders running form top to bottom (neat idea to use tire tracks too).

SeaChange

The right column illustrations appear in full color upon hover. I like the idea of cutouts in the “paper” to signify separate sections of text. You can also see flecks both in the background and foreground.

The Design Cubicle

There’s also a bit of paper metaphors going on here, from the texture to the illusion of folds. I like all the tiny little patterns used on this page, both the linework and grainy ones. And then there’s a neat little ribbon for the monthly archives to the right side.

Matt Puchlerz

Notice how the background of the typographic heading and the background are both clouds. I also like how the four corners of the page are cut inward (a nice-to-have in CSS3 someday). There are also some stylings in the section headings and the contact form at the bottom. I guess the thing I wanted was an anchor navigation but perhaps one thinks that because it’s a one-page site, it’s no longer necessary?

Adrian Le Bas

Moving your mouse around the page move the blue circle behind the logo. That box also contains more information on its “flip side”, like a business card. Below it are icons that AJAXically loads the other sections of his site. It’s also a responsive design: when the window becomes very narrow the background image disappears and the icons grow larger, becoming more touch-device friendly.

Rivers and Robots

The combination of the blurred background and its lomo filter coloring topped with a subtle parallax effect makes this site for a calming browsing experience. I also really like the almost completely transparent background in the slide-out boxes under each button (not to mention the button style itself).

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Social Media Weekly

User Experience – Stepping Out of Line
“Nature has no “visual design” phase. Why do we?”

Mobile Web Design – “Mobile first” CSS and getting Sass to help with legacy IE
“Even if you want to don’t want to use any of the Sass or Scss syntax, the pre-processor itself can help you to write your CSS in a “mobile first” manner (with multiple breakpoints), provide a “desktop” experience for IE 6/7/8, and avoid some of the performance or maintenance concerns that are sometimes present when juggling the two requirements.”

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

Friday Focus 01/06/12: Look Alive!

Sophia Lucero — Fri, 06 Jan 2012 13:20:13 +0000

Our first Friday Focus for the New Year is all about animated designs, a bit on the subtle side but sure to pique your interest nonetheless.

Designs of the Week

WEAREEMPIRE

The page first loads the logo, then clicking on it displays a trail of circular navigation items for each section of the site. Hovering on each runs a vertically scrolling animation in the background, each unique to the item. Clicking then loads the content area either in the huge half-circle background sliding out from the top, or another slide-out area from the bottom. Nothing too crazy, but lots of fun, casual touches from the heading font choice to the scarcity in straight edges. There’s also a nice little bounce/delay effect in the portfolio slider, where the MBP screenshot “stops” before the iMac one.

RainyDay Interactive

The gray droplets of rain appear to stagger diagonally downward, just as slowly as the ferris wheel turns—it’s not my usual expected behavior for rainfall and almost seems to be creeping instead of falling. Clicking around the area (wait to see your cursor change) reveals people holding black umbrellas appearing out of thin air and floating away. You might even chance upon a dinosaur. The portfolio items are arranged one after the other so it’s a tall website, and scrolling past the first screenful reveals a cloud menu affixed to the left, replacing the original one.

Reverend Danger

This site plays two different animation modes in each section, which you can select by dragging the slider at the top: the pleasant “Reverend” and the more violent “Danger”. Also featured are tree stumps that pop up as you scroll past, and a slider with an added bouncing effect. All areas use simple animations—slides, flips, easing—but it’s the story and visuals that make them special.

Colin Grist

There’s only one small animation here and it’s the smoke coming out of the cowboy’s gun. I like how it looks random or unpredictable enough although it does look just a little pixelated at some points. The slanting text in the top navigation gives a small, old-style touch, while the four circles repeat in the social icons at the bottom.

Harrison Pensa LLP - Season's Greetings

Here’s another on a very short list of sites with the scroll-to-zoom effect, and in this case it’s zooming out instead of zooming in. But that’s only half the story, below it is a shooting game of snowmen and snowballs. I think I only gripe is the two things kind of handicap the scrolling so once you’ve gone down you won’t be able to go up unless you use the “Top” link, which actually reloads the page instead of jumping upwards with an anchor.

Create Digital Media

Here the animations occur in the slider, albeit one you can’t control (at least a pause on hover would be nice). I like the concept of using CMYK colors for each graphic (also on other pages), tying everything together. Other sections remain warm and neutral.

Social Media Weekly

Design – Ketchup Bottles & The Physicality Of Design
“You may not immediately notice these little details, but they make digital interfaces appear more valuable, like little hand-crafted executive paperweights: expensive, heavy and solid.”

CSS – Seven things still missing from CSS
“CSS has come a long way but it’s not perfect (yet). Molly Holzschlag, passionate standardista and open web evangelist, quizzed her peers to find out what they see as the most frustrating aspects of CSS.”

User Experience – A plea for progressive enhancement
“For this ubiquity to truly benefit all of us (not just those of us with a high income, or the latest phone) we have to start building sites using solid, future friendly principles such as progressive enhancement…not just when it’s handy or simple, but all the time.”

CSS, Optimization – Profiling CSS for fun and profit. Optimization notes.
“As our pages/apps become more interactive, the complexity of CSS increases, and browsers start to support more and more “advanced” CSS features, CSS performance will probably become even more important.”

Tools, HTML, CSS – Animatable
“Create, serve and track HTML5/CSS3 animations for desktop, Android, Blackberry QNX, iOS and WebOS mobile devices.”

Mobile – Test on Real Mobile Devices without Breaking the Bank
“Mobile is the future of the web, so it’s time to start investing in some mobile devices. “

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

Sophia Lucero — Fri, 30 Dec 2011 13:01:32 +0000

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

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

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

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

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

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

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

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

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 12/23/11: Happy Holidays!

Sophia Lucero — Fri, 23 Dec 2011 13:08:54 +0000

It’s that time of the year once more, so let’s soak up some Christmas cheer with these designs. Happy Christmas Friday Focus!

Designs of the Week

Occupy North Pole

This is a wonderfully decked out design from the logo to the interface elements to the themed graphics in each blog post. The cookie charts look yummy and the Twitter/Facebook widgets blend in perfectly, and it’s all topped off with subtle falling snowflakes.

A Real Letter from Santa Claus

Site’s defunct now but still worth mentioning for the lovely look it has. Deep red and gold hues combined with classic type make for a warm and elegant seasonal website.

A Very Warwick Christmas

Deep blue and white is typical for a snowy night scene but this site adds a touch of not red but hot pink for a more funky, modern touch. Each slide of the screen loads a few animations in the background and invites you to click on the ribbon button which loads a lightbox fashioned like a scroll.

You Better Not Stress

Simple but striking (you can never go with red and white!) and packs a responsive web design punch. Each red box shows a subtle background on hover, then loads a white box that’s the exact width of the grid. Beautiful type, photography, and concept.

It's A Shape Christmas

Another red and white design but takes the color scheme in a bolder direction: pretty much all of the text is in red on white, while other areas simply flip the colors around. That, combined with the thin diagonal line pattern in the background makes this page a little challenging on eyes, but it’s certainly bright and cheery.

Christmas Cracker App

The only design in the bunch that does not use typical Christmas color combinations, or typical color combinations at all! Also taxing for the eyes, especially with the non-stop animations in each box, repeating several screenfuls down, but it’s a fun concept.

Social Media Weekly

HTML, Accessibility - The Hidden Nuggets of WCAG2: When Not to Use ALT Attributes
“Hopefully, that’s going to help you make the right choice as to when to give an image an empty ALT attribute so that screen readers ignore it, or one that has meaningful information that will help the user.”

Business – From Side Project to Not So Side Project
“There still seems to be something of a disconnect between having a side project and turning it into something that is moderately successful; in particular, the challenge of making enough money to sustain the project and perhaps even elevating it from the sidelines so that it becomes something not so on the side at all.”

Web Standards – IE to Start Automatic Upgrades across Windows XP, Windows Vista, and Windows 7
“Today we are sharing our plan to automatically upgrade Windows customers to the latest version of Internet Explorer available for their PC.”

Friday Focus 12/16/11: Under Fire & Water

Sophia Lucero — Fri, 16 Dec 2011 15:55:26 +0000

This week on Friday Focus: designs that use two opposing elements found in nature: fire and water.

Designs of the Week

Zindustry

Everything is burning in here, from the wooden background to the strips and sheets of paper—not overdone at all. I really like the little area of blue flames whose color echoes as accents throughout the rest of the site. All in all a striking look.

Made By Points

Here pink is the accent color as seen in the logo, navigation, footer, and the loading screen—which seems to be growing popular in non-Flash sites with lots of graphics. Another parallax-driven site with some translucent backgrounds and some very thin arrows.

Liquid Torch

I like the splashes of water everywhere and the lighting that seems to imply an underwater environment (although I’m leaning towards an aurora in the sky). The top navigation is also fixed and the layout breathes easy.

Family of Fish

This site prides itself in beautiful photography, and another round of parallax and fixed background peekaboos take advantage of that. The later not just piles on one full-screen image after another though, there are some interesting effects to be had when you make certain areas of a photo transparent. What is unfortunate, though, is that the descriptions in each page are images.

Social Media Weekly

Web Design – What I Learned About the Web in 2011
It’s time to look back on the year that was and see how far we’ve grown as designers and an industry as a whole.

CSS – Six CSS Layout Features To Look Forward To
Several proposed featured by the CSS Working Group to make our laying out webpages easier.

Web Standards – On HTML and CSS best practices
Strive for the best quality possible.

User Experience – Give Your Users A Hollywood Experience
Learn to build for your audience with film metaphors.

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

Sophia Lucero — Fri, 09 Dec 2011 13:12:49 +0000

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

Tim Van Damme

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.

Mehmet Aksoy

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

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.

Chris Rowe

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

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

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 12/02/11: Like A Modern Day Leonardo

Sophia Lucero — Fri, 02 Dec 2011 16:33:05 +0000

Happy December Friday Focus! This week’s featured designs contain sketches and diagrams with a scientific slant, quite reminiscent of the drawings that Leonardo Da Vinci was renowned for.

Designs of the Week

Metaphiziks

Nice icon-based navigation although I wish the whole circle were clickable. I also wish the up/down arrows scrolling from one screen to another were in the same place, but I see how the layout affected the positioning.

Growcase

This design looks swell, there are so many nifty details that went to it, especially how the social media icons were fashioned at the footer—as part of an atom! probably the best idea I’ve seen—but there seems to be too much uppercase styling here.

Carsonified

Every page uses an ivory-colored foreground on a very strong colored background—orange, green, purple, you name it—and remains highly readable while gunning for maximum impact. The key to this design is definitely great illustrations and typography.

Paolo Cavanna

There’s a section that runs text a little too long but I really appreciate the use of old style fonts and graphics. There’s no horizontal menu, just the vertical one opposite the head diagram. Looks straight out of an old anatomy textbook.

Joshua Turner

Beautiful grid-based, black and white design with a pop of red here and there. The one thing about anchors and one-page sites is that if a section isn’t tall enough, it won’t be apparent that you’ve skipped to that place once you click on the link. Here, when you click on the Contact link, it doesn’t place that section in focus because there’s no more space to scroll down.

Social Media Weekly

HTML, JavaScript – The Script Tag
“I’ve noticed that on a