Creativity Block Busting

I was just browsing around today and found one of those adspace posts on facebook that I never click on. But this one was for www.build.com and I thought it looked interesting and harmless. They used the "word cloud" method of gathering ideas for a bathroom remodel and then materialized it in a nice looking well laid out image of text that to me resembles a fish or whale. Some words are larger than others, some bolder than others, and the design as a whole was a work of art in itself. I'm not able to connect you directly to the original link, but this is the image that got my attention.

That got me looking into finding more examples of word clouds and mind mapping. Of-course, my next step was to search Google for "word cloud". I found the Tagxedo site and many images like this one.

I really like the concept of brainstorming using a word cloud or a mind map. The whole idea of it becoming a piece of art in itself is just incredibly ingenious. Adding to my findings today, I received an email from Learnist with links to even more of what I was looking for. Are the stars and planets aligned or what?

Steal Like an Artist

This semester's blog assignment is to find a section in this book, read, live and practice what is said on your chosen page(s). Then we bring it back and post results here for discussion in class.

Page 64 - Steal Like an Artist | Austin Kleon  "The work you do while you procrastinate is probably the work you should be doing for the rest of your life" – Jessica Hische

Wow! I don't know how much more true something can ring in my head. This is definitely an issue with me. I procrastinate. I have heaps and loads of ambition, and I can start something that will be one of the wonders of the world when I'm finished. But, then it would be a miracle if I ever really finished something. I don't have any miracles laying around, but I do have a lot of unfinished projects.

First Sample Post for Typography I

Canvas Rider

This site was featured in the January 2011 edition of Practical Web Design.  The designer used HTML5 and canvas to create an online, interactive game.  The game, called Canvas Rider, requires people to race on tracks designed and uploaded by other players.  When I initially pulled up the website, I was impressed by the header and background artwork, which is sketch-quality illustration.  It's simple, yet intricate, conveying action with a storyboard feel.  Immediately, the center box flashes different screen shots of the game, drawing you into the action.  The other interesting feature is the use of a font style that is reminiscent of the old Commodore 64 choose-your-own adventure-type experience.  The website claims that the site is entirely written in JavaScript and HTML5 and hundreds of new race tracks are submitted daily.  So, of course, I attempted to play the game. Maybe that wasn't the best thing to do since I really need to finish my homework!  The website does warn that it is an addictive game!

Hair Campaign?

The outdoor campaign for Rogaine featured in issue #53 of CMYK caught my attention because of the one-word slogan.  However, it took me quite awhile to figure out what the posters were trying to say.  Designed by students at the University of Colorado, this ad campaign is very bold and simple - one word, quick and easy to read while driving.  The company's slogan is in the lower right-hand corner, in case you can't quite figure it out.  If you still can't figure it out, take a closer look at the unfilled letters in each word.  You guessed it - hair.  I can only assume that this campaign is saying that with hair (if the letters were completely filled) you would be charming, handsome, and enchanting.  The converse of this concept, of course, is that without hair you are none of these things, which I, of course, take some offense too, having some years ago elected to shave my head in lieu of cutting and trying to style the remaining hairs on my head.  Regardless, it's a very interesting and clever design.  The word I had the most difficulty with was "handsome" because the "i" was part of the "d", which was hard to read.  The "r" as part of the "n's" and "m" in all three words, was a bit easier to figure out.  Nonetheless, a creative play on words and letters.

She & Him Poster

The poster below, printed in issue #53 of CMYK, is for a She & Him concert promotion.  One of the reasons I chose this poster is because my wife loves Zooey Deschanel (the "She" in "She & Him") and the show, New Girl, in which she stars.  My wife has played some of their songs for me, although it's not really my style.  Aside from the subject matter, the poster is very interesting.  The first thing that caught my eye, were the large circular objects with "She" & "Him".  Upon closer examination, I saw that the image on the left was actually a hand, with jeweled fingers.  Following the thin blue lines of the hand, you start to see other outlines, including the chain of the necklace with the date and then looking back up at the "She" & "Him" circles you realize they are actually earrings with a woman's hair and lips above.  It's very subtle, but clever.

Toyota - Interactive

CMYK magazine, Issue #53, highlighted the "Toyota Find Your Match" website, designed by Florence NG, Art Director, and Nick Platt, Executive Creative Director.  The magazine included several screen shots showing the color scheme and continuity throughout the site.  When you first access the site, there is a spinning globe that asks you, "What Drives You?"  The globe spins while the site loads and then shows you options for your driving needs (see below).  Hovering over each button lights up the platform beneath it.  When you click on a button, the screen shifts over, following a road drawn through a city as the screen moves.  The road ends at new buttons with new choices and so on and so on.  Essentially, this site is an interactive form.  Instead of checking boxes that bring up new options with each selection, the page is programmed to draw roads taking you where you should be - finally, ending up with the car that will get you there.  It's visually appealing and loaded quickly and without glitchiness.  I've included some other screen shots below.  I tried to take shots while the screen was moving to show some of the graphics. Check it out!

Ford Rear View Camera

The ad campaign below for Ford's rear view camera is very eye-catching. This campaign was created by JWT Mexico and features the Edge, Lobo, and Explorer and was included in the November/December 2012 issue of Communication Arts.  Even without reading the text, I suspected that the subject matter was a rear view camera.  Especially with the image of the dog laying on the driveway and the kid playing soccer, both common situations that may easily be missed in a driveway, especially with using only the vehicle's mirrors.  The middle image with the lady and her groceries had me a bit confused and might make more sense if there were other cars parked in the parking lot (like she was walking to her car).  The circular design of the image of the vehicles projects motion, almost like Mr. Fantastic from the Fantastic Four.  The ads definitely caught my attention, however, I'm not sure why the text was so small.  I almost think it would have been more clear if the text was larger and spread across the entire bottom edge of the image.  Especially since each one is a different vehicle, it would highlight the vehicle model itself as well as the new feature.

 

Rivet Gallery

I recently browsed through a magazine called Hi-Fructose, looking for some blog inspiration. The images are very unique and there was some wild and unusual artwork.  The magazine contains a lot of ads for art gallery shows, so I pulled up some of the art gallery websites to see if they were as artistic as the art they display.  Surprisingly, they were not.  Most of the sites I viewed were very basic and seemed dated in terms of style.  I was really expecting more bold and interactive sites, but had trouble finding them.  Finally, there was a site that caught my attention, although it pales in comparison to the artwork displayed throughout the magazine.  The site is for the Rivet Designer Toy & Art Gallery.  The logo was very interesting and forms the upper left-hand cell of a lightly bordered table.  The other thing that caught my attention was the fact that the social networking links (in the form of app-like buttons) were above the website's navigation bar, all in the same color as the logo.  This almost draws your attention away from the site information below and may be a dated style.

Sans Cursive

The poster below entitled, "Sans Cursive," was designed by Cristina Vanko, student at Indiana University.  The poster was created for a campaign to support retaining cursive handwriting in the educational curriculum, as printed in issue #53 of CMYK.  The chalkboard backgrounds and white-chalk lettering represents the elementary classroom.  The bright pink color as the tips of the erasers brings attention to the piece and highlights key information.  It is also interesting that the artist uses several different styles of cursive script, some are thick lines, some are thin.  Some of the cursive lettering is very elaborate and decorative, other lettering is simple and clean, like the letters learned in school.  I really like the lower left-hand box because of the lines with dashes, just like elementary school writing paper.  Then, it states that "cursive will be replaced by the key" with the last three words as letters on a keyboard.  Very good use of imagery.  The poster is clearly a call to action.  The action words in the lower right-hand box are all in cursive, emphasizing the writing style.  I also liked how the artist included the pencils in the lower middle box as if someone just finished writing on the board.

Kohl's - Food Packaging

The following packaging design included in CMYK's issue #53 is very interesting.  The design was created by students of the Academy of Art University in San Francisco, CA for Kohl's Retail Store.  I was really drawn to the simple boxes with an almost chalky, powdery white color.  The lettering has a plain, but classic look, which makes the full-color images stand out even more.  The trick with this design is that the product images are not the product.  The images represent things you can make with the products.  When I first saw these boxes, I thought they were food products, not appliances.  Images of food, naturally draws your attention, especially when you are hungry.  The text is very simple and plain - telling you what is in the box, without embellishment - simply a convection oven, electric knife, etc.  However, the images of the food really draw you in and make you want to take notice and read more about it.  As a consumer, however, I would still want to see an image of the product itself before I bought it, maybe the image is on the back of the box.  Regardless, I thought this was a very interesting design that would definitely stand out on the shelf.

Box-Shadow Feature - Naomi Atkinson Design

The January 2011 issue of Practical Web Design featured the website below as an example of shadow effect features in CSS3, particularly the box-shadow and text-shadow features.  Although the site has changed a bit since this article, there are some very interesting features. There is no traditional navigation bar.  The work samples, about us information, and the contact us information is all on the home page.  All of this information is static, except for the work samples.  You can scroll down to access the about us and contact information, however, the work samples section is interactive in a very unique way.  The work samples section has left and right arrows that scroll a separate window built into the home page.  You can scroll left or right for examples of designs, which is only a portion of the entire design.  If you like a design, you can click the "Show More" button at the bottom to expand.  Although this design is simple and self-contained, there is a lot of scrolling just to access information.

One Trick Pony - Blueberry Contest

This website was featured in the January 2011 issue of Practical Web Design.  The site was featured because of its mobile functionality.  The article explains how the advertising and branding agency, One Trick Pony, hosts a blueberry pie eating contest each year, partly for self-promotion.  The company is located in Hammonton, New Jersey, which is known as the blueberry capital of the world.  The site caught my attention because of the realistic graphics of the field, the sign, and the ribbon.  However, I was in for quite a surprise when I accessed the site because it is full of catchy music and visual interest. By moving your mouse to the right (no clicking necessary), the entire screen scrolls to reveal a long line of pie-eating contestants in various costumes and poses.  Next to each person is a star that expands and contracts when you hover to choose your favorite.  The site is very stimulating and very funny.  It was a little glitchy at times, for example, I was not able to easily go back to the screen scrolling after clicking on a contestant to read more about them.  Also, sometimes when I accessed the site, it did not load completely, although the music continued to play.  The site is sound friendly so when you are tired of hearing the music, you can click the sound button.  Instead of shutting off abruptly, it gently fades into silence.  Very interesting!

Science Museum of Virginia

In the November/December issue of Communications Arts, the image below was one of the winners of the 53rd Annual Advertising Competition.  The image was created by the Siddall ad agency in Richmond, VA.  The image is so striking in its realism.  Not only do you feel like you are viewing a child on the beach, but, even against all reason, it appears very common sense to believe that a person could actually lift up the water like a blanket and peer underneath.  The child's shadow behind her gives it a realistic feel along with the motion of the waves.  At the top of the wave lifted into the air, it appears that the water is cascading down from its highest point.  The image speaks about curiosity and imagination.  The text at the bottom, "Question your world" is so small, it's almost a whisper, like a secret or mystery.  The action of the child holding up the water is large and center in frame and the very small and faint buildings in the background emphasize the closeness of the action to the viewer.  In fact, you almost feel like if you look close enough, you can see under the water to discover what's underneath.

Responsive is where it's at!

Looking around the internet gathering ideas, I stumbled on a site that I have visited before but I think it's been years. Web Designer Depot has regular posts and articles regarding web design.  They posted an article today that is a compilation of 10 jaw dropping responsive landing pages. The very first site that they list is a portfolio site of Stephen Caver. He is a web designer and it shows. His landing page is very bold and uses some really great tricks in it's design. I love the background of what looks similar to a brushed steel. It shows through huge transparent bold text and when the browser is resized it looks great while in motion. The blocks at the bottom scale with the resize and when you get to phone dimensions, the nav bar converts to blocks that would be easy enough to touch on your smart phone touch screen. The design is clean and relatively simple looking until you scroll down. Take a look!

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.

Museum of Art: Fort Lauderdale

I get a daily inspiration email from Communication Arts.  I love getting these emails. Every one has a "Webpick of the Day" in it. Sometimes I like them, sometimes the site isn't as impressive as I hope it will be.  This time, I found a great, happy, colorful, energetic site for the Museum of Art: Fort Lauderdale.

I'm really intrigued by the diagonal line in the header that creates a semi-transparent area revealing the images below through several color overlay type vertical bands. It is a very small area, but it provides an incredible effect when the slideshow plays and the various images produce exciting effects when viewed through this "filter" effect. I love it!!  Super creative! The diagonal line trends to the center gray bar as well and there are other angled shapes in the design.  Navigation is clean and simple residing in the center gray bar with secondary navigation at the top along with social icons. The site is built in HTML5 and I like how it works when I re-size the browser window.

Size reduced for close to tablet size, the site looks even cleaner.  It becomes more obvious that the main navigation resides at the bottom. Clicking any of the links takes you to the "inside" layout below.

Basically everything remains the same, but the main slideshow area is reduced, bringing the lower part of the home-screen into view plus a blue identification bar at the very bottom letting you know "where you are". I clicked "ACADEMY" and the blue bar verifies this. To see the information provided about the Academy program, you scroll down. Same goes for all links. It is a very unified and nicely organized navigation design.

Adobe Rocks!

Again from the new September / October issue of Communication Arts magazine is this packaging design theme and campaign that the Adobe Creative Team came up with for this year's release of the newest Adobe Creative Suite 6.  I've been watching Adobe for over a year in anxious anticipation of this release and it doesn't disappoint. I had been using CS3 for years. I've always enjoyed staring into Adobe packaging graphics.

To me this new era says "NEW" all over again.  It says modern, cutting edge, futuristic, even space age.

The way they manage to bring "sexy" to a sliced, diced, blurred, and color altered woman is amazing. Lines are sharp, simple, and sleek in some, yet others tend to have an even further digitized blur, combined with texture and more I'm sure I can't decipher at my skill level. But somehow, there remains a unity among them.

Is that unity the feminine form then?

They even slice and disfigure the "CS6" as kind of a tribute to David Carson I would guess. The packaging and brochures are beautifully done, and they speak volumes about the technology poured into the new CS6.

Joanna Kustra: Fashion Photographer

Our next project is to design and build a website for a photographer.  I like how this site uses the entire screen as a home-screen slideshow and the over-sized navigation text rests on the left. With each hover over a link, the image changes and there is a very subtle scale change upon the new image loading. It almost produces a Ken Burns effect.  When you click on a link taking you to the category, then I get a bit disappointed because the home-screen images were so large and impressive. A slider with four or five images is placed in the center. Navigation can be done by sliding the bar at the bottom, or with arrow keys. The site is built in Flash and is nicely done overall.

I receive daily inspiration emails from Webneel . This is where I learned of Joanna Kustra's site. 

Mohawk Branding

I just recently received my copy of the new September / October issue of Communication Arts. It's the 53rd  Design Annual and is filled with tons of great design. Everything from packaging and brochures, to book covers and branding is represented. All of the entries are impressive. Similar in concept to the Kerr Vernon post that I made on Aug. 28, this design is bright and I'm drawn to it.

I love the way the colors overlap and create different shades and shapes within the composition.

I did the best that my scanner could do to bring this to a decent representation of the printed magazine.

The design works very well for everything from business cards and letterheads, to package wrap. The recognizable logo shape works even without the color. Repeating it on the package wrap creates an intriguing pattern too. Michael Bierut is the art director with Katie Barcelona, Michael Bierut, and Joe Mariancek designing with the Pentagram design firm, New York, NY.

Helms Workshop

Communication Arts May / June 2012 Illustration Annual.  Another design house highlight section. I had seen Helms Workshop in another issue of Communication Arts where the group had been recognized for their concert poster style of screen printing for various advertising campaigns. This time around many of this types of work are displayed.  The pizza box for Pinthouse Pizza is incredible. It looks like a compass with all the various points in a multi-point star type arrangement of triangles and diamond shapes. What grabbed my attention though as I was looking through the Illustration Annual with the term "illustration" on my mind, was the image below.  It is an illustration done for the same Pinthouse Pizza.  I was taken by the subtle use of color on the background with simple black and white used to advertise for the pizza business.  I'm not sure what a "Whale" has in common with pizza, but I guess they're having a Whale of a Good Time.

Austin Beerworks

So, while looking through the May / June 2012 Communication Arts magazine, I was curious to see if Helms Workshop did any web and interactive design as well.  As it turns out, they do that too. In fact, their letterpress / screen-print type designs work very well in their website designs. Check out their site to see more of what they have done. The background image doesn't scale as we have been working on. Instead, it kind of slides left a bit when you re-size the browser. So, in terms of fully cross device usage, it isn't meeting that. But I don't think it would be difficult for them to update it and make it more mobile friendly.

Juniper Park

The May / June 2012 issue of Communication Arts magazine is an Illustration Annual.  Among the many impressive designs to look at in the magazine is a section highlighting the work of a design firm called Juniper Park. Numerous campaigns of theirs were displayed, but the one that caught my eye for its creativity and absolutely insane approach is the Kettle Cooked billboard.  They actually hand carved the billboard out of wood, rather than just printed material.  This would be an incredibly creative concept if you were to try to make a print appear to be hand carved wood. But they went the extra mile and actually did it with wood.  I think this is way outside the box thinking and I love it.

Side Note...

I knew I had seen something recently that claimed it could produce HTML and CSS from the layers in your Photoshop file.  I haven't tried this yet, but it looks intriguing. I can't wait to see how well it works. Best of all, it is cloud based and FREE.  Click the image to view the actual site. The article that led me to it was on YouTube.  I subscribed to these guys channel because they come out with a lot of great things to share with you. It's called The Treehouse Show.

Elegant Branding

This was found in the same location of HOW Magazine - November 2011 as the last post.  I really enjoy the look and feel of elegance with this design though, so I am adding it too. Aesthetic Movement designed this for their own identity and use.  The choice of stationary is designed to be more traditional feeling. To me, it says that I should get out my calligraphic pen and write a long letter to Grandma.  The clean and simple sans-serif font takes that classic feel to a different level, making it much more professional looking.  The simple A M initials couldn't be simplified any more. The logo is on one side of the business card while the other has the contact info.

Kerr Vernon Branding - HOW Magazine

Branding and Identity is a huge market and very important for a designer to master if only to develop his / her own identity.  The November 2011 issue of HOW magazine offered a selection of impressive branding solutions that various design groups have come up with.  I really like the vibrant feel and color of this design. I love how the use of Letterpress creates a blend of overlapping color.  The designer, Kerr Vernon Graphic Design, characterizes this as "Timeless" by using a modern sans-serif font and the retro-style of Letterpress.

Air Force Life

I have been scouring the internet in search of the latest and the greatest in web design. I have found list upon list of showcase sites that have done just what I'll be collecting here.

Recently, in class, I heard a definition of "Web 2.0" as being : plain, stark, black & white.   From what I've found, "Web 2.0" is an extremely broad subject and vague term that is tossed around.  It can be used to refer to the recent trend of shiny, glossy, sleek, and elegant, as in Apple's recent designs of all of it's products and software.  It can be used to identify the social trends and interactivity that we have seen grow over the last decade. Honestly, I found very little reference to the term that was used in any scholarly articles written since 2008.  So, I can't draw any real conclusions about the term, but I will continue to search for answers.

A term that does appear to be new, fresh, and current is "Responsive Web Design".  I had success finding great sites by following design firms who were shown in Communication Arts. This one right there in the magazine. Coloring Book Studio/GSD&M designed and developed this project for the Air Force.  The site is very cool. I think it would be attractive to the youth who is used to seeing technology in their game systems etc.  Click on the image to go to the site.