11 ms·

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 deli

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)?

xyzzyb 16y ago
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.
- alnayyir 16y ago
  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.
  - stdbrouw 16y ago
    "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-relations/ http://alexgaynor.net/2010/mar/29/designer-developer-relatio...
    - alnayyir 16y ago
      > 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.
pestaa 16y ago
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. :)
- slile 16y ago
  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.
  - limedaring 16y ago
    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.
limedaring 16y ago
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!
- justinph 16y ago
  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.
  - limedaring 16y ago
    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".
- psykotic 16y ago
  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.
  - limedaring 16y ago
    Definitely allowed to nitpick — in Firefox they were aligned but I can see now that in Chrome they aren't. Thanks for passing along!
commanda 16y ago
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.
fosk 16y ago
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.
njharman 16y ago
For long time I've been arguing that code / functionality should come before visual design. Never found anyone to agree with me.
- thetylerhayes 16y ago
  Seems you just hadn't found the right people yet :)
- synotic 16y ago
  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.
- dools 16y ago
  There's a fair bit of noise for content preceding design in web mockups, same principle.
- rudasn 16y ago
  - "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".
  - ryanelkins 16y ago
    There's a difference between visual design and architectural design.
  - njharman 16y ago
zepolen 16y ago
Why would you be impressed. That was after all the entire point of CSS; Different skins on the same html.

xyzzyb 16y ago

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.

alnayyir 16y ago
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.
- stdbrouw 16y ago
  "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-relations/ http://alexgaynor.net/2010/mar/29/designer-developer-relatio...
  - alnayyir 16y ago
    > 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.

pestaa 16y ago

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. :)

slile 16y ago
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.
- limedaring 16y ago
  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.

limedaring 16y ago

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!

justinph 16y ago
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.
- limedaring 16y ago
  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".
psykotic 16y ago
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.
- limedaring 16y ago
  Definitely allowed to nitpick — in Firefox they were aligned but I can see now that in Chrome they aren't. Thanks for passing along!

commanda 16y ago

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.

fosk 16y ago

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.

njharman 16y ago

For long time I've been arguing that code / functionality should come before visual design. Never found anyone to agree with me.

thetylerhayes 16y ago
Seems you just hadn't found the right people yet :)
synotic 16y ago
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.
dools 16y ago
There's a fair bit of noise for content preceding design in web mockups, same principle.
rudasn 16y ago
- "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".
- ryanelkins 16y ago
  There's a difference between visual design and architectural design.
- njharman 16y ago

zepolen 16y ago

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