Hacker News Reader

Comment by kenjackson | Hacker News Reader

The following really surprised me coming from a designer: Build the web app first, then design it.It was tempting to build the entire interface first but I deliberately ignored the design until I had things 90% working. This got me to constantly work on the code before working on the "fun stuff", plus encouraged me to launch quickly since as soon as the code was finished, all I had to do was quickly "skin" it before getting it live with the assumption that I would be iterating on the design after it launches. Also, if I needed to abandon the project due to some insurmountable code problem, the time wasted wouldn’t include the time spent on design.

I'm impressed that the site looks so good, with design being skinned on afterwards. Was it literally just divs, spans, and lists, and then you did the CSS in one fell swoop (well one fell-iterative swoop)?

View on HN

Pretty much correct — I built it in plain HTML/CSS to get it working, then retired to Photoshop to build how it would essentially look (which I took a lot from the existing weddingtype.com design, so that helped with the speed), then threw in CSS at the end. None of the extraneous pages, like "About", were built either until the CSS point, so it wasn't all design.

Thank you!

Did you do wireframes or page description diagrams?

I always need something to help me conceptualize what it is that I want to build, more than just a few bullet points or flowcharts. As a designer/developer, I find it easiest to just dive into photoshop and mock a few things up, even if they're not what I would consider final designs. It helps me think about how things will work, and what the user experience will be like.

If I'm working on client work, then I always do wireframes first (giving a choice of three different layout/UX concepts). But for WIL, because I was working for myself and under a self imposed time constraint, I went straight from sketches --> PSDs --> CSS.

I'm going to be revamping the profile pages in the near future, and that process will almost certainly include wireframing, since I have more time to do it "right".

I do both design and development so I'm not really sure what side of the fence I fall under, but in the last year or so I've actually transitioned to writing the HTML first and then designing in photoshop as well. I actually find this method to be far superior to skin first, but then again I am a good enough developer that it makes sense to me to think in this way easily. I'm surprised that this method comes as such a surprise to HN, I thought it was a much more common practice.

The best part is that this leads to very clean and well structured HTML, and a better design because you know exactly what your content is.

Gorgeous design! If I'm allowed a nitpick, the two buttons on the About page are nearly but not exactly aligned vertically, probably as an oversight.

Definitely allowed to nitpick — in Firefox they were aligned but I can see now that in Chrome they aren't. Thanks for passing along!

A nitpick on the linked bio page:

WeddingType, the invitation typography generator, is for non-designer couples looking for a save some money by creating their own invitations.

"...looking for a save..." should probably be "...looking to save..."

Im really impressed to see a person who wont give up and try even if it means to learn something new and not being in the part that they like the most. sidenote: you have inspired me to keep going. I hope you have a bright future in your road.

Hey Tracy, congrats on finally launching! You probably don't remember me, but I was hoping to see a YC11 on that app. Anyway, if you ever need any Django advice, feel free to contact me!

I recognize the name, and due to the power of Gmail, found our convo way back in August. ;)

Alas, not YC but that's not the end of the world. I'm sure the YC folks won't be surprised to see me applying again soon. :P

You definitely should. I was hoping to meet you in this batch but I guess our days were different (I was on the last one). Regardless, good luck!

Django strongly enforces MVC (MVT to be pedantic) programming. The templates and backend programming are kept not just at arms length, but in separate rooms.

My day job is pretty much all Django, but I would like to point out that this overly popular trope about Django templates is unmerited and not unique/interesting.

I would also like to point out that it's not a meaningful feature as templates still cannot be written in isolation by designers without a lot of previous agreed upon structure.

The django apps model is similar in getting an unmerited amount of attention/praise.

"I would also like to point out that it's not a meaningful feature as templates still cannot be written in isolation by designers without a lot of previous agreed upon structure." True. I don't know of any framework that's truly nailed developer-designer interaction, though.

Good, short read: http://alexgaynor.net/2010/mar/29/designer-developer-relatio...

> I don't know of any framework that's truly nailed developer-designer interaction, though.

Never 'appen, icky hoomans are involved.

That's like saying engineers and management will stop fighting over budgets and specifications.

Being a programmer first, this works backwards for me. If I would work on the fun stuff from day one, my sites would never get skinned. :)

Yeah, I think a lot of it might be to target the areas you're uncomfortable with first to make sure you can get them right, and then end with what you're comfortable with and what you're good at.

I think doing the reverse might sometimes end up being a subtle form of procrastination where you might be afraid of doing the part you're not as familiar with.

Ugh, yes. Hitting a problem with my code, I would ignore the site for days until I realized that I was just procrastinating away from the uncomfortable. It sucks when you feel completely out of your element (me, learning design, others, perhaps working on design), especially when I was stuck on a problem and had no idea how to go further.

For long time I've been arguing that code / functionality should come before visual design.

Never found anyone to agree with me.

- "Hey can you build me a house?"

- "Sure, how big do you want it? How many rooms?"

- "I'll tell you what. Build the house and we see how it goes".

There's a difference between visual design and architectural design.

1st off I belive this conversation was about building software not houses.

2nd how big, how many rooms, also is it made of bricks, does it have a fireplace, etc are all functional and not visual design.

Depends whether you're innovating in the frontend or the backend. The user interface for the iPhone was completely designed before any of the frontend was coded. There's a great comment by tlrobinson somewhere about how the iPhone was designed and developed but I can't seem to find it.

Also consider New Twitter. I don't understand how you'd start coding the HTML and the JavaScript without understanding the visual design for how the dynamic, two-pane interface was expected to work.

But if you're building a search engine, then you can probably put off the design until later. The analog is that you really wouldn't (or shouldn't) start writing code until you had an idea (a design or an architecture) of what you were trying to write. Same way you wouldn't start to code an interaction (HTML+JavaScript+CSS) if you had no idea what that interaction looked like.

Seems you just hadn't found the right people yet :)

There's a fair bit of noise for content preceding design in web mockups, same principle.

As a backend developer, I'm more productive with a top down approach instead. In a bottom-up approach I always fall into the trap of making an amazing backend full of cool features, when then I realize that only the 30% of them is required by the frontend.

I think this makes a lot of sense. You have to build the cake before you can put the icing on it. Your CSS is invisible unless it has html to decorate.

Why would you be impressed. That was after all the entire point of CSS; Different skins on the same html.

Reply on news.ycombinator.com