Web Fonts Exploration Found in Practical Web Design Magazine

Web Fonts

They aren't super new, but they are definitely becoming more popular and widely used. The source sites that provide them are growing and their libraries are expanding. Typekit was aquired by adobe and is available with an Adobe Creative Cloud membership. Font Squirrel and Google Fonts provide free web fonts and they are easy to use. I just found another free source of web fonts at Adobe Edge Web Fonts.  We'll see if it works when I publish this post, but I attempted to install the Adobe Edge code to this post and change the font.

A fantastic section was found in Practical Web Design magazine / January 2011 (yes I keep good magazines around for quite a while) regarding web fonts and other CSS3 capabilities and their implementation. The lostworldsfairs.com site pictured here employs a web font and it looks amazing. This is huge for a designer who wants to explore text in ways that the web has not been able to do in the past without inserting images. Very very fun and cool. Check it out.

Transform - Another Great CSS3 Tool

The January 2011 / Practical Web Design magazine has a  great ten part section outlining many of the useful new capabilities of CSS3 declarations. Among the declarations that I found particularly interesting, especially when viewing a site that the article provided as an example of it's use, is the "transform" property. 

The sunrays actually rotate around the sun using this transform: rotate; in the declaration. There are also moving clouds as well as motion in the form of a quicktime movie playing on the iPhone. The design is super clean and very simple looking, but employs some pretty neat new technology to really get the "Wow!".

Wow! This guy put together a mash-up that rocks!

Unrelated to my classes this semester, I ran into this and recalled back to last spring when this would have been perfect inspiration.  I've seen a few mash-ups with a similar idea, but this one is great too.  There are a few comments on the YouTube page that are somewhat negative, but they address content more than his ability to keep your eyes moving and keep with the beat of the music mash-up that was created by a different artist. I enjoyed this very much and I've seen it three times now already.

Pure HTML5 + CSS3 • Giuseppe Scappaticcio

Giuseppe Scappaticcio is using CSS3 effects for a text shadow on his portfolio site.  Drop shadows tend to get overdone or overused and instructors usually frown on the use of them, particularly on text. But, it is new to web design and hasn't yet been overused on websites. So, done in moderation and used strategically as Giuseppe has here, I think it works well. I found this article in Practical Web Design magazine / January 2011. I haven't digested the document source yet, but it appears that he is using other CSS3 techniques such as gradient or rgba to achieve the semi-transparent, rounded-corner box in the center of the page too.

Joint London

I have another site coming soon that I found via Computer Arts magazine.  But this just came to me in my daily Communication Arts email.  Their web pick of the day lead me to this innovative site from Joint London.  It is written using HTML5, CSS, and Javascript.  I'm going to try to build a test site using this as inspiration.  I love the extreme simplicity. Large is good.  It's damn near too simple.  You could do so much and still keep this type of navigation live in a site.  It's absolutely awesome!!!  I just had to put this on my blog for my future ease of reference.

John Patrick Thomas

CMYK magazine - v.53 2012 had a spread of illustration work done by the very talented young illustrator / designer, John Patrick Thomas. His work impresses me with its vibrant use of color as well as his use of curved line, swirls, and ribbons.

Everything is balanced on center but it is playful and energetic. The eye follows the ribbons around endlessly.  I like the center orange flat ribbon end like a hanging banner behind ampersand, and how the ampersand becomes the white ribbons. 

In this one, the hands are ribbon-like. 

The word "The" is ribbon-like while the other curved lines dance around. It's interesting how often he uses a 3D text effect in these works too, and he apparently doesn't have a favorite font either. 

Good Design in Business Cards?

Maybe it's a matter of personal choice.  Perhaps it is a cultural difference.  Maybe it's just the fact that I am unable to read the text. An article in the October 2012 PRINT magazine is tag-lined "The noisy aesthetics of Cairo's business-card district". Noisy is exactly what I see.  I'm not sure this equates to good graphic design though. The article's author explains that historically, business cards have had pictorial scene's on them. Of course, in recent generations, the European and U.S. method has been far simplified following the Swiss design style.

So, what perfect timing to find this article, when we're making design decisions in an identity project. I see modesty in a few, but mostly the designs are loud and obnoxious reminding me of a few that I've seen in the past from people like karaoke DJ's. 

To me, these are just chaotic in nature and are attempting to tell you a life story on a 2 X 3 card.  I'm nearly 100% certain that my design professor would tell me to go back to the drawing board if I were to present a concept like one of these in class. They are colorful and perhaps the way things are done in another land. But, apparently here, we just can't get away with this type of  loud chaos in design.

Turner Classic Movies

Communication Arts Web Pick of the Day brought this to my inbox today.  It's a Flash site, and it is very impressive.  Ken Burns effect is applied as you scroll through each "page" of the site that features a different actor.  This could be applied to a portfolio site with some thought.  I wish that Flash was able to be viewed on Apple iPads and iPhones.

Spend some time playing with the navigation. It is original and effective as you explore the actors names. I think it's just a really creative exploration site.