Timelapse: Designing a new website | Hacker News Reader

Timelapse: Designing a new website

guestlistapp.com

46 pointsjsg19 comments

"The new homepage took two weeks to get to a final design, but only 4.5 hours of actual work. Why the discrepancy? If you stare at the same design for extended periods of time things will start to blend together. Sleeping on a design for a day or two will allow for a fresh look."

Good to hear, because I find the same thing with regard to app design--long periods of mental churning followed by brief glimmers of clarity and insight.

Glad to see this as a common experience.

I routinely tell my co-founder that design, for me, is constantly iterating until it doesn't suck. The only designs I'm very happy with are the ones that are extremely minimalist (my own blog, my wife's site), and those are the ones in which I'm JUST trying to present the content, and even those end up with iterating towards 'stark' until I have to put something back on the page. Then I call it done.

The other common adage between Steve and I, whenever he doesn't like something, is that I'll tell him to 'give it time.' Sometimes, he grows to love the thing he hated, and sometimes, it evolves into something much better.

Again, I am appreciative of those designers who can just throw something down that looks awesome on the first or second try, but at least I'm getting to the point that the average wireframe isn't better than my best efforts.

For those on Linux and without Flash, may I recommend http://vminko.org/it_notes/video-dl to play the video in mplayer:

    wget http://vminko.org/storage/video-dl.sh && chmod + x video-dl.sh && ./video-dl.sh vm 17158963

I can't wait to make one of these. This can be a great method(resource)for hacker/artists to show money the depth in workflow which goes into a project. Thanks, and great work with this and your deliverable.

I know nothing about design. Is that photoshop he is using? Are there standard/automated ways to go from photoshop to html/css? A cursory google search reveals little but paid services.

Yes it is Photoshop CS3. There is no automated way to go to HTML/CSS. You have to do it manually hence all the paid services.

This video is really cool, designing looks so much cooler than coding when time-lapsed :) -- then again, coding looks pretty awesome in movies like Hackers.

Anyone else catch him reading HN right before 6:30? :)

For anyone wondering, the song is In Motion from The Social Network soundtrack, which by the way, i find to be excellent coding music.

It's fun to watch something like this, but it looks like he copied & pasted a lot of elements from other websites into his design. Directly lifting UI elements & photos from other websites and dropping them into your site is a big negative in my mind.

I didn't see any photos that didn't come from istockphoto. The logos were his customers logos.

Most of the UI elements seem to come from other PSDs of stuff he's already created.

Inspiration from Basecamp and it looks like some Flickr screenshots... totally normal.

I also didn't see any purchase process for the Eiffel Tower picture he found on iStockPhoto. Finding random images on the Internet and copying them into a design is not how professionals build websites.

You are allowed to use stock images in your designs to figure out if you are actually going to use it. It has an enormous watermark on it that you can't see because of the compression in the video.

I've seen A LOT of designers works like that, nothing unusual or evil. List of reference elements for inspiration from all over the place, crude placement and re-work/redesign/throwing out/making it all work together in the end. It's actually quite similar to matte painting if you think about it.

but it looks like he copied & pasted a lot of elements from other websites into his design

he was using them as inspiration, i don't think he actually copied any ui elements (unsure about where he got the photographs, but it's common practice to pay a royalty fee or use free if it's not required). as an example, many good designers will look at apple's design elements in mac os x or iphone os. you'll hear steve jobs got a lot of his inspiration from other sources too. that's how design works; you'll take something that's good right now and you make it better.

"The inspiration for the type of plastic case (a first for computers) for the Apple II came from Jobs seeing a Cuisinart food processor in the kitchen section of Macy’s.

Additionally, Jobs showed up at a design meeting for the Quicktime software product with a brochure from Hewlett-Packard with the H-P logo in a brushed metal.

The brushed metal ended up being adopted in across much of Apple’s software and some high-end hardware including the Safari Web browser and iCal calendar." Leader Kahney, Inside Steve's Brain

http://www.youtube.com/watch?v=CW0DUg63lqU&feature=playe...

The photographs are from actual Guestlist events.

I spotted one site I know very well (I used to maintain it), which was the distinctive Xero.com homepage and sub pages.

I don't think it was copy and pasting, but "inspiration" ... This is how most designers work, I think.

Yeah, oneplusone loves Xero.com's design.

I thought I saw him lift a picture of a MBP off Apple.com into his document for a bit. I got a bit worried there too. I know lots of web apps end up with one of those generic MacBook pictures showing their site on the screen -- Apple won't sue you for using their picture?

Reply on news.ycombinator.com