This is the story about a guy, a guy who could be seen as not wanting to write a post about how his recent redesign. It could also be seen as a way to vary the type of posts said guy does write. Either way, this is a behind-the-scenes walkthrough of Distortion.
For once in my career, I’m actually going to talk about the a design I did. I don’t think I’ve ever done that. I usually just say I will and then forget after realizing how much work it would take to gather all the screenshots. But no more! With the power of ScreenFlow I shall finally bring to you a very casual walkthrough of the design behind Distortion.
It’s 30 minutes of me talking, Jen typing and the kitties even hiss! I think you can hear sirens as well, but just ignore that, my headset is a bit more sensitive than I had ever intended.
I strongly encourage you to watch this in fullscreen as I have spent my week’s Vimeo quota bringing this to you in lovely HD. I know I didn’t cover everything either, so as I’ll say in the video, make sure to email me or leave me comments! Wether or not I answer them in another video or write about it has yet to be decided.
But anyway, enjoy it! I’m pretty happy with it myself… and that’s rare. Here’s the direct link in case you’re looking for it. The video is a bit stretched only because I was completely blind to the fact that Vimeo needed 1280x720 (and the original is 1187x720) or higher in order to activate the HD feature (two really long uploading periods really drove that into my head). I might replace it, someday.
Update: Alright, for some reason, it won’t let me embed the damn thing in HD, so you’re going to have to go to Vimeo to be able to see it as I intended. o_O;
Great Idea! ScreenFlow and such make things a lot easier to talk about, hehe; i.e., less writing.
I’m checking it out now.
Always fun watching how another designer works.
I am actually in the middle of hacking my way through my first Django site (my personal site redesign) and am having a lot of the same issues you seemed to be dealing with when you started this process (want something new/not WordPress, trying to get away from my ‘style’ of design, etc.) so it was fun to watch and hear your thought process.
I really enjoyed watching you explain how you reasoned your layout and show how things came about.
Particularly the bit about explaining how you came up with the background for the header. I was wondering how you developed that distortion and now I know it was just by accident and creative layer overlays.
I’m still trying to figure out why your Mac was running so slow, but can’t come up with a solution short of clearing the RAM with a reboot. But I’m sure you did that.
I’ll keep thinking…
Hey, just watched all of it Bryan. Yeah - don’t be redesigning the ‘zombie’ site anytime soon! Hehe
I thought the video was very interesting, thanks for sharing your design thoughts with us. I’m with you on the ‘above/below the fold’ thing too.
That was an interesting video you’ve recorded. It’s really cool to see how other people design. It’s pretty amazing to see how distortion evolved from just boxes. I can’t imagine myself going through so many revision before killing myself (or the project). but the end must have justified the means. Because again, I applaud your out of the box design. Thanks for sharing your process.
Thanks for the comments guys! I appreciate the encouragement and definitely look forward to doing more of these.
Jon, it’s interesting you mentioned how many revisions I go through. It’s rare that I’ll get it on the first try (especially on my personal sites), as each will go through constant refining and include ideas I think of along the way. Every Avalonstar for instance has been through at least 3, but most of them are as simple as the first revision of Distortion, just a box. :)
I was actually positively surprised when I saw this site in Safari, I usually use Firefox for both surfing and developing.
But I had thoughts of going back to Safari again. And now I’m fully back to Safari because of the drop shadows. People have to use Safari more, they just have to.
And for my question (because I’m too lazy to look it up myself), how do you do drop shadows on text?
Wireframing now huh, “B”? What’s next html/django prototyping? Process is always the hardest thing to pin down when you are a working on your personal projects. However, it was all imformative and cool to see a* come to life in photoshop. I am sure that the code overview will be just as exciting.
sidenote Don’t quote me, but I think that the slowness that you are seening in photoshop is due to your gpu/cpu and not so much the ram. Depending on the macbook pro you have and the card, this could be because the size of the comps you are working with and the cpu being taxed. We all know that Apple like to under clock its gpus, and depending on the cpu…there could be a bottleneck being created.
Your wireframing is very similar to Jason Santa Maria’s graybox comps. I think it’s a great idea—it lets you play around with the basic elements of a layout before adding too much decoration ontop of it. If a design doesn’t work at its fundamental level, no amount of lipstick will make it right.
Loved the screencast. It’s always cool to have a glimpse inside a great designer’s process.
Good stuff.. Like Rob (above) said, it’s nice to see somebody else’s process..
Surely you’ll live to regret the ‘redesign in 2 years : shoot me’ comment though haha.. I find it hard to go a few months without redesigning, let alone 2 years! :)
Long, long, long time reader (years). First time commenting (that I can remember).
Very nice video, amazing redesign. I absolutely love the details. Viewing the pages is almost like listening to a great piece of music — with the details, each listen/view brings new things to appreciate.
Bryan, I have been following your blog for around 3 years now although I have never actually commented before. I was quite upset when it was taken down for nearly a year, but one thing I must say is that it was all worth it. The new design is AMAZING! I must admit the navigation was a little confusing to begin with, however, with a little common sense, it is easily understandable. I just wanted to commend you on an excellent redesign, and look forward to once again reading what you have to say.
I think I know what’s wrong with your mac…. It’s a mac. ;)
With regard to .pngs and IE6, you can use DXFilter to render png transparency in IE6, but why bother? IE6 is deficient anyway, and I doubt you get much IE6 traffic on your site anyways as it’s really a by designer for designer kind of site. No-one who’s had to work with IE6 would make it their browser of choice.
Bryan, thank you for taking the time to dissect your latest release and share your design process with the rest of us. I think there’s something special about getting a behind the scenes tour like this and really enjoyed watching the video.
Next time I would just shorten it up a bit, otherwise, I’m looking forward to seeing more.
Well, what a great video… as has been said already, it’s great to see into the mind of a designer, in particular when they are doing something for themselves which allows more freedom and creativity to do what you like (like abandoning IE6 support!)
I particularly love this comment form, and think I’ll be peeking under it’s skirts to see how to emulate it -it’s different, and very nice to use!
HOLY FUCK! Seriously. HOLY FUCK!
I could be more polite about me liking your design or that you actually have felt the urge to do a screencast or to actually see someone using boxes to get a feeling for their design (which helps them with the overall logical layout of the whole damn thing) or and so on, but I just hate it when people force themselves to be polite about something when “HOLY FUCK!” is that much closer to the initial response of excitement.
You, Sir, and my hat is off, did a great job. Why didn’t you do this a year back? I would’ve loved (and still would love) this design having been featured in Web Premium’s little booklet..
Again, SACROSANCT CONSENTUAL UN-FLUFFY SEXUAL INTERCOURSE!
‘sme again.
For some strange reason the links provided within the “old-sites”-div in your ‘about’ section move downwards by a pixel or two if I do the a:hover; they remain that way until I scroll them out of view again (so it looks like a rendering- issue with Firefox as said glitch doesn’t appear using Opera or IE7). Yes, I am also capable of being very dry when it comes to feedback.
I’ve been staring at this comment form forever, not only because I don’t know what to say regarding the design (words fail me), but also because I just can’t stop staring at it.
To me, this design is a really good grainy picture of you. And I love it.
okokok
i adore your design! it’s wonderful. best regards from austria!
Awesome! Such a great video and a really impressive design.