This is the new Design Process I’ve been trying to use lately. Skipping Wireframes and Photoshop comps! This video shows all the different design steps needed to create the Shitty Day site. As you can see, I tried to implement some principles I picked up during the years:
So, where are all the wireframes and Photoshop comps? They got skipped..!! no wait.. actually you could say that the wireframe (basic layout at the beginning) and the Photoshop comp got created straight with HTML/CSS and then constantly changed and refined.
The tools I used for this project were Espresso for the HTML markup and then CSSEdit for styling. Later in the process I used Photoshop to create single images like the background tile, paper holder and so on, but never for the layout.
It all seems pretty easy and straightforward, but I think this process works best for smaller simple sites. For bigger and more complex projects, the traditional approach might still be better. Also before I started I had sketched out the idea on a notebook and had already a pretty clear picture in mind how everything should look and work. If you would ask the client for feedback during the process, they would probably tell you nonstop how ugly it looks. ;-)
Shitty Day is a side project I created just for fun. It searches for Tweets from people that write about their shitty day. The results can be seen in a fun way (toilet paper roll) and users get encouraged to send back some love. You might even could argue that it will have a therapeutic effect (you’re not alone with your shitty day).
First I intended doing everything in Flash, but then I thought it’s a good chance to play around with some CSS3, jQuery and the Twitter API. And a lot of fixed PNGs to let only the paper roll scroll. Watch the making of video.
Here a short video showing the making (actually cutting) of my new business cards.
I just got the new Moo MiniCards. YAY! When they arrive in the shiny box, they are actually still not finished.. Just by cutting off the edges it looks like the card got shifted from a samurai sword cut.
Watch the making-of.. ahh.. no.. cutting-of video.
Added some custom icons to the site. The bigger ones on the top are scanned to keep the “sketchy” look. Makes it more personal and matches more the brush stroke style.
The small ones (footer/meta) are all painted pixel by pixel to make them as sharp as possible. If you scan/resize them from your sketch, they would look too blurry.
“ Meet the new CSS double dream team: border-radius + box-shadow. ”
Together they are unbeatable! It’s such a joy to use them for rounded corners with a drop shadow. The box above uses: border-radius: 8px; to do the magic.
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
And it get’s better: They even work on embeded Flash! See the 4px rounded corners live in the photo/video section.
Note: This is CSS3 and not all browsers support it yet, like our friend IE.
Why I’m switching to tumblr.
This is already the 5th version of simurai.com. I’ve gone trough many phases.. highly graphical - minimalistic chic - fat blog - interactive 3D. But I’ve always struggled meeting all the following goals:
With tumblr I think I pretty much found that perfect balance. Thanks tumblr.
Credits: This site is based on the Prologue Theme by Hayden Hunter.
Trip to Korea. Mostly Busan and area. See more photos.
Couple days in Tokyo. See them all.
I’m spending the summer in Japan. Yesss.. the land of Samurai’s and robots!
The town is called Fukuoka and is located south-west of Japan. It’s really nice here and I like it a lot.
Concept art for PlayStation’s game “Little Big Planet”. It’s a tamagochi/virtual pet like web app.. Unfortunately it’s gonna stay just concept art.. huhu..
All items (except sackboy and the logo) were found on Flickr. It seems to me alot of people are into plush.
See bigger size the happy planet or dead planet.
Second trip to Japan. See more photos.
