Book Review/Giveaway: The Geometry of Design
Update, February 3rd: Early sketches and an inspiration board added to the end of the post.
LAYOUT. My old nemesis. Comp after comp is the same story: sketch the layout, try it in Photoshop, change it, change it, change it, and change it back until something sticks. It's the tyranny of choice - there are just too many possible layouts and never a good way to narrow the options down.
Even after deciding on a basic structure and beginning it in Photoshop, things never feel right. Is the header too tall? Is there too much space below that list? It's easy to pour hours into decisions like these and forget other, more critical areas of the design.
After a few recent collisions with layout, I decided to pick up Geometry of Design and Elements of Graphic Design, and spend some time refocusing on layout construction. I got through Geometry of Design in one evening, and AWESOMELY, I was able to apply it to my work the next day.
Continue reading "Book Review/Giveaway: The Geometry of Design"
Swedish Design Inspiration
A few months ago I had the opportunity to travel to the wonderful country of Sweden. Sweden, and Scandinavia in general, is well known for its simplicity and functional design. I've always found great inspiration looking at some of the beautiful work created there, whether it be a product, an interior of some sort, or graphic design.
Change Web Designers Can Believe In
Much has been written about President Obama's strategic use of the internet to market his campaign and mobilize an army of over 7 million supporters who might otherwise have sat on the sidelines. Our own Ryan Moede summed it up in this post by saying, "The Obama campaign was an impressive orchestration of on-message brand discipline, social media marketing, networking, user-generated content and direct marketing that built a fiercely passionate movement."
President Obama's campaign clearly "got it" when it came to leveraging the web community, and his designers cranked out beautiful sites for Change.gov and BarackObama.com, so I was looking forward to the WhiteHouse.gov redesign. I couldn't help but imagine how tense the team must have been, ready to launch their new site at precisely the right moment during a day of unprecedented pomp and circumstance. No pressure.... At exactly 12 p.m. on January 20th, http://www.whitehouse.gov/ switched over to a new design. I hope they had champagne on hand to celebrate the smooth transition.
Design Share, an Event Series
Let’s face it. 2008 was one of the wackiest years on record. In America, we witnessed a roller coaster presidential campaign make history by electing the nation’s first descendant of Africa, Barack Obama, as President. We watched financial markets worldwide tumble exposing scandal and corruption at many levels of society. Gas prices rose to unbearable heights only to fall more than half in less than a six month period. All this and more leading to widespread belt-tightening across the corporate spectrum where friends, loved ones, and -- sometimes -- we ourselves were left wondering what job opportunities await.
So what can we as designers do in such periods of uncertainty? It's not always clear. Do we compromise standards established during healthier times? Do we freelance when we might not have done so otherwise? Do we take on controversial spec work and hope that others won’t notice or call us out on (be careful)? All good questions. One thing we can do is to learn from each other.
The Making of VigeTurf - Design
The making of VigeTurf brought together folks from all our labs. In this series, we're pulling back the curtain to give a detailed explanation of how it was created. Here, it's all about the design.
The Big Picture
The Vigeturf project required some branding, detailed packaging design, functional web design, and loads of intensive illustration. Coming up with a plan of action and then creating a simple style/brand guide ensured we had structure around what we wanted to accomplish with the different pieces of the project.
Mood Board
Stephanie, Hilary, Brian, and I kicked-offed the project with an initial brainstorm meeting to lay down expectations and decide exactly how we wanted to push the project in both the web and print arena. Since we were building this concept-turned-product from scratch, we had the luxury of dictating exactly what we needed on the site as well as a rough sketch of the assets that would be included in the packaging upfront. With the basics put into place I moved on with a quick mood board to convey my initial ideas. I immediately gravitated towards classic brands like Hendrick's Gin with refined filigree elements. At the same time, I wanted to make sure that there was a touch of whimsy since we were creating a product that reminded me of something that you might have purchased in a general store back in the day.
The Making of VigeTurf - Design Build
The making of VigeTurf brought together folks from all our labs. In this series, we're pulling back the curtain to give a detailed explanation of how it was created. Here, it's all about the design build.
There are a lot of design elements on the page that act as decoration I decided to cut the design up into two large background images. The obviously problem with creating large background images is that it increases the size of the site especially with the Flash element, Flickr feeds, and displaying the user created images. Since this was a fun, internal site that needed to be put up quickly, we tried our best to compress the images down and make CSS sprites for all the other smaller elements. For the main background I left some extra "paper" on the bottom in case the content scaled and saved the image as a JPEG to keep the file size smaller. Unlike the main content, the footer content would likely never change so that image is a fixed size and since it sits on top of the repeating wood texture, I made it a transparent PNG in case the main content ever pushed it down.
All the other elements on the page, such as icons and buttons, are found in one big background image and then CSS background positioning is used to give the coordinates of what part of that big image should be displayed. So that brings the total number of images I used for the layout to about 4 images (I'm not counting a couple really small repeating background images). Not bad! One could argue I could've gone even further and condensed those images into a bigger sprite. If you don't know about CSS sprites there are a lot of good resources on how to make them, such as this A List Apart article, and Yahoo has suggested using CSS sprites in their Best Practices for Speeding Up Your Website. Speaking of Yahoo, another useful tool I used was their YSlow plugin for Firebug. YSlow can give you stats on the performance of your page and I used it to check the size of the site.
Take an in-depth look at how the other pieces came together.
The Making of VigeTurf - Flash
The making of VigeTurf brought together folks from all our labs. In this series, we're pulling back the curtain to give a detailed explanation of how it was created. Here, it's all about the Flash.
Uploading/Saving Photos
The actionscript side of uploading photos is very simple, but more involved for Matt who had the mighty task of putting the entire site together and did an awesome job. I just referenced the FileReference class, which will tell your OS to open a file browser window when you call FileReference.browse(). Because of security restrictions in Flash player 9, you need to send the file to a remote server before you can access it. This changes in Flash player 10, where you can directly access files at runtime (woohoo!).
Once the image was fully clipped, I simply took a snapshot of the stage and saved it out as a byte array. Using Adobe's Jpeg encoder class, I saved the image back to the server, where Matt returned the unique (and fun!) url's.
Grass
The blades of grass were probably the most fun part of this project. I was so excited about the task of making interactive grass that I started messing around with it that night. (You can see the grass in an earlier version here.) All of the blades are individually drawn using the AS3 drawing API and are given a random height and angle to look like nice, organic grass. All the blades are placed into a movie clip because, later, I will need to convert that movieclip into a bitmap to enable erasing.
The interaction with the mouse pointer was a bit tricky, and the result was not perfect, but the effect works (right?!). When the mouse pointer passes over the blade, it sticks to the pointer until you bend the blade to 45 degrees in either direction. At that point, the blade stops following the pointer and a tween takes over to get that "snap back" effect. That effect is handled using a simple tween that sends it back to its original rotation. The ease on the tween is set to "Elastic EaseOut" to get that great pendulum-like bounce (I used the TweenLite tweening library from GreenSock, which has become my tweening class of choice). When first envisioning the grass, I pictured very life-like blades that bow organically instead of the stiff bend they have now, but I quickly abandoned that idea after Steph said I couldn't take several weeks to perfect it because it had to be done by the holidays. Picky picky.
Recent Comments
Hi Doug!
I just want to print this article :) But the print version is yet to be fully polished. I hope you guys spend sometime :) Viget inspire is a really nice resource for me....
- Lance on 'What To Expect When You're Expecting CSS/HTML Handoff'.
- Erik Wallace on 'What To Expect When You're Expecting CSS/HTML Handoff'.
- Jonathan on 'Switching Mindsets: From WordPress to ExpressionEngine'.
Subscribe to Comments RSS