Back Home

Open Designs

Community. Driven.

    • CommentAuthorDaisy
    • CommentTimeJan 12th 2007
     
    Although published in April 2005, it's the first time I've come across this animated gif showing each stage of the design process from sementatic markup to completed design over at Designline by Dylan Bennett.

    "To create this designline, I took a screenshot basically every time I
    saved my HTML file. I'm one of those people who impulsively hits Ctrl-S
    after every tiny little change, so you end up seeing every little
    change made to the file as it goes. I started out with a blank text
    file and I go all the way to a completed site design."
    •  
      CommentAuthorSean
    • CommentTimeJan 12th 2007 edited by Sean on the 12th January 2007 at 16:40:50 EST
     
    Here is a direct link to the image. It's pretty neat actually.
    • CommentAuthordonny
    • CommentTimeJan 12th 2007
     
    That is pretty cool actually. cool
  1.  
    Interesting to see the progress from blank screen to full-fledged web page. A lot of times, I think we just look at designs without thinking about how they were made, what steps the designer took, and all that jazz. This helps to illustrate the thought process behind the design.
    •  
      CommentAuthorarwen54
    • CommentTimeJan 12th 2007
     
    I like that...it's very interesting to see the progress of the page smile
    •  
      CommentAuthorLobsterMan
    • CommentTimeJan 13th 2007
     
    wow, that's pretty cool.
    •  
      CommentAuthorjanpd24
    • CommentTimeJan 14th 2007
     
    Nice. It's also interesting to see how others go about making a design. bakie
    • CommentAuthordonny
    • CommentTimeJan 14th 2007
     
    Well I tend to write the styles before I add the HTML, whereas this is done with the HTML first.
    •  
      CommentAuthorDENiAL
    • CommentTimeJan 14th 2007
     
    Posted By: donnyWell I tend to write the styles before I add the HTML, whereas this is done with the HTML first.


    Hmmm, thats pretty backwards to most people, but whatever works for you. :)bakie
    •  
      CommentAuthormegadeth
    • CommentTimeJan 16th 2007
     
    That's a pretty cool idea.
    Posted By: donnyWell I tend to write the styles before I add the HTML, whereas this is done with the HTML first.

    I do the same. wink
  2.  
    Posted By: donnyWell I tend to write the styles before I add the HTML, whereas this is done with the HTML first.


    Same here shocked
    •  
      CommentAuthorarwen54
    • CommentTimeJan 16th 2007
     
    me too bigsmile
    •  
      CommentAuthorjanpd24
    • CommentTimeJan 16th 2007
     
    Well, me too! Unless I'm redesigning something.
    • CommentAuthormadrock
    • CommentTimeJan 17th 2007
     
    I cant say i do either css or html first; I have to code them both at the same time to know what it will look like in every browser:

    Layout first (HTML and CSS)
    apply the design (CSS)
    Add the content (HTML)
  3.  
    I always make sure the content is ordered logically and semantically firstly. Then style it with external CSS.

    What I mean, is if I have a 2 column design, I want the main content to be above the side (less important) content if no CSS is loaded, also make sure lists look OK without CSS, also throw in a few when you get about styling the CSS you can remove the hr tags using display:none; etc.

    But hey, each to their own wink
    • CommentAuthordonny
    • CommentTimeJan 17th 2007
     
    Posted By: DENiAL
    Posted By: donnyWell I tend to write the styles before I add the HTML, whereas this is done with the HTML first.


    Hmmm, thats pretty backwards to most people, but whatever works for you. :)


    4 more people disagree with you tongue
    •  
      CommentAuthorOutsider
    • CommentTimeJan 17th 2007
     
    I don't know about you guys but I start with Photoshop first... bigsmile

    Then I cut up the graphics.

    Then make an empty HTML shell with all the divs and headers, name the classes and ids, put in some dummy text, then start styling it.
    •  
      CommentAuthorJeremyD
    • CommentTimeJan 17th 2007
     
    I just go crazy and code it up before i even have a design in mind.
    •  
      CommentAuthorcastis
    • CommentTimeJan 17th 2007
     
    I get bored and just start typing things out without having a goal in mind. Save them when i find something else do do. Then go back a couple days later with different ideas and go from there.

    I generally just put in the main div's, a small bit of content, then do the css for those. Then switch back and forth between the two as im going.