Web Designers: What is your process? (software or pen paper..)

13 replies
  • WEB DESIGN
  • |
Hi,

I am in the process of re-examining my work flow and design processes including the software I use. I'm curious about other peoples processes. Not looking for software suggestions per se more overall examples of actual production processes those of you that are web developers / designers use.

This is an example of one of the process I personally use though I am thinking of doing something different, I feel there is a more productive method.

----------

I put up a white board on a couple walls in my house, I use this to layout design layout ideas, thoughts and visually depict in very rough raw format a website layout or mobile app layout, user interface or what have you.

Sometimes I also use a artists notebook, large ringed book full of large blank paper. You can get these at most office supply stores or artists store.

-----------

Starting from the draft I begin to layout the page in paint.net or fireworks CS3 to mockup the actual potential look of the site and design the flow of the content, images, text etc...

-----------

From there I begin to write out the html and begin to form the flow of the page programmatically in html and begin the css. I usually use PsPad for the actual programming aspect. I have several IDE's but some reason keep coming back to using PsPad, some use NotePad++ or similar I just prefer PsPad just cause.

-----------

Then it is just tweaking to make everything look good, make polishing touches and then upload to hosting.

I am going to the next level with my business and have been doing some major upgrades recently including new computer and various equipment upgrades. Also have been looking around at various software options available for increasing productivity and very quickly going from mockup to live design.

Which is making me rethink the old hand coding methods I have been using for years.

I am really interested in learning about actual designers real world methods and practices actually being used. I am not talking about comparing software titles as main focus I mean the process you go through you actually use, software has a strong part in that but if you can elaborate on how you use whatever software you chose.

I am strongly leaning in a more visually oriented design work flow now after switching mostly to technical hand coding for the last 5 years or so. Curious about processes others are using now.

The Adobe Creative Cloud is looking rather usable now after years of in my opinion hack code generators. I mean if you look at the source view on pages created with say Dreamweaver or Fireworks from past versions it resembled FrontPage 2000 crap code. The new just released versions, the code looks almost like if I had hand coded it myself, almost.

So, what process is your design work flow and how do you use the software you use to improve your productivity?

- T


NOTE: I know this question has been asked various times over the years but things change over time, processes evolve become simpler. Software used changes etc...

I did not see a recent existing thread on this topic, if there is one I completely missed it.
#designers #paper #pen #process #software #web
  • Profile picture of the author webpeon
    Ive used the same approach for all the projects Ive done for years now so I see value in re-visiting the topic

    my process consists of the following...

    1. paper prototype - a rough sketch of the layout and design with labels on relevant controls, dont normally spend alot of time on this as it'll go through a bunch of changes before it gets to the final product but it gives me a starting point

    2. layout and design - Im no designer so most of this is basic where I want things to go kinda thing... labelling ids, names and attributes etc

    3. I then normally comment in some 'pseudo code' behind the controls I am using so I know what everythings suppose to do since it can sometime before I revisit this section for coding (I sometimes to draft this on paper as well just because it can often be quicker)

    4. Finally I write the code, test an debug

    - any further designs and touch ups I normally would pass onto someone else
    Signature
    Web 2 Mobile
    The Future of The Web
    {{ DiscussionBoard.errors[6495821].message }}
  • Profile picture of the author rontheitguy
    Wow...you guys make me look pretty unorganized!

    I pretty much use Wordpress & Artisteer exclusively. I just start with the theme design by having my clients show me other sites around the web that they like and I go to town on the theme design. Once complete and the client is happy we move onto phase 2 of setting up the Wordpress site and installing the theme. From there it's just a matter of adding the content and desired functionality.

    And...you guys make me look really unorganized!
    Signature

    "Do, or do not. There is no try."
    The Wisdom of Yoda
    {{ DiscussionBoard.errors[6496924].message }}
    • Profile picture of the author webpeon
      Originally Posted by rontheitguy View Post

      Wow...you guys make me look pretty unorganized!

      I pretty much use Wordpress & Artisteer exclusively. I just start with the theme design by having my clients show me other sites around the web that they like and I go to town on the theme design. Once complete and the client is happy we move onto phase 2 of setting up the Wordpress site and installing the theme. From there it's just a matter of adding the content and desired functionality.

      And...you guys make me look really unorganized!
      it can get pretty unorganised.. I can easily rip through a pack of A4 in a project if you can imagine what that looks like on a desk lol

      you mention building the theme design,what are you using to do that?
      Signature
      Web 2 Mobile
      The Future of The Web
      {{ DiscussionBoard.errors[6497820].message }}
      • Profile picture of the author rontheitguy
        Originally Posted by webpeon View Post


        you mention building the theme design,what are you using to do that?
        I use a program called Artisteer which has been amazing to have. Takes so much 'work' out of creating great looking themes and has worked very well for me so far.
        Signature

        "Do, or do not. There is no try."
        The Wisdom of Yoda
        {{ DiscussionBoard.errors[6499170].message }}
  • Profile picture of the author Randize
    Normally I'd start with photoshop, from brush to marquee selection, just rough out the draft design and then going to illustrator make the pre-final design before jumping dreamweaver.
    {{ DiscussionBoard.errors[6497023].message }}
  • Profile picture of the author Emil from Bavaria
    I use Photoshop only for some graphical elements like icons, or shadows that cannot be done with CSS alone. The HTML and CSS I do in Notepad++. I don't start from scratch but take something I did before and strip off / add HTML/CSS/JS incrementally, reloading Firefox like every few seconds, and checking it in other browsers every now and then whenever I suspect there may be a problem.
    {{ DiscussionBoard.errors[6500847].message }}
  • Profile picture of the author liliaha
    Artisteer is a great tool indeed. Makes it super fast to create any great looking website. Plus it is awesome for anyone who is new to CSS.
    {{ DiscussionBoard.errors[6501386].message }}
  • Profile picture of the author webpeon
    omg where have you been all my life 'artisteer' no more building asp templates from scratch for me anymore, wordpress theme generator could come in handy too


    thanks everyone, sorry for hijacking your thread Terry
    Signature
    Web 2 Mobile
    The Future of The Web
    {{ DiscussionBoard.errors[6508945].message }}
    • Profile picture of the author rontheitguy
      Originally Posted by webpeon View Post

      omg where have you been all my life 'artisteer' no more building asp templates from scratch for me anymore, wordpress theme generator could come in handy too


      thanks everyone, sorry for hijacking your thread Terry
      It's great isn't it! I think it's great that people can build stuff from scratch, but I've always figured if I don't have to, why should I? But yeah, Artisteer is great! If you want even more from it, check out 'The Templateer' addon product for Artisteer. I'm not sure what it does for other templates, but it gives some very nice added functionality to Wordpress themes.
      Signature

      "Do, or do not. There is no try."
      The Wisdom of Yoda
      {{ DiscussionBoard.errors[6509055].message }}
      • Profile picture of the author webpeon
        Originally Posted by rontheitguy View Post

        It's great isn't it! I think it's great that people can build stuff from scratch, but I've always figured if I don't have to, why should I? But yeah, Artisteer is great! If you want even more from it, check out 'The Templateer' addon product for Artisteer. I'm not sure what it does for other templates, but it gives some very nice added functionality to Wordpress themes.
        'great' would be the understatement of my Day I reckon!

        how many other options do you have to go from a blank screen to this fully fledged theme Artisteer Round 1 in only a few click and barely a minute, it honestly took me longer to open my ftp software and upload the files than it did to make the site itself and Ive been at this less than half an hour, I could imagine what someone with more artisteer experience could come up with, thanks for the addon suggestion as well
        Signature
        Web 2 Mobile
        The Future of The Web
        {{ DiscussionBoard.errors[6509254].message }}
        • Profile picture of the author rontheitguy
          Originally Posted by webpeon View Post

          'great' would be the understatement of my Day I reckon!

          how many other options do you have to go from a blank screen to this fully fledged theme Artisteer Round 1 in only a few click and barely a minute, it honestly took me longer to open my ftp software and upload the files than it did to make the site itself and Ive been at this less than half an hour, I could imagine what someone with more artisteer experience could come up with, thanks for the addon suggestion as well
          Haha! Glad it's working out for you! You're reminding me how I felt when I first found it a couple years ago...like Christmas morning x 50! Well, have fun with it!
          Signature

          "Do, or do not. There is no try."
          The Wisdom of Yoda
          {{ DiscussionBoard.errors[6509452].message }}
  • Profile picture of the author Terry Crim
    I have never really been that fond of artisteer type of products. I used Dreamweaver up until CS3 but the code that was generated was really ugly. The workflow that was promised in Adobe's creative suite series in CS3 didn't really pan out as well in my actual usage and personal workflow procedures.

    Plus today being in the year 2012 that particular version is really out of date. I have been looking at the new Creative Cloud offering adobe just recently released and seems to me to be really actually at the level to deliver on the promise they are presenting with workflow.

    The thing is, for me, I don't want to be stuck in one thing. I need a set of tools that can work with me in what I do which is not wordpress themes or custom CMS design or static html pages or mobile design or desktop software or marketing materials or product creation or multi media or or or... I do them all, some more than others but it is vital I have tools that allow me flexibility and products like this artisteer is great if you just do that one thing or just those type of websites. Looking over the screen shots it seems to be just a visual designer for page layouts. Which is nice if that is the thing you do.

    Up until recently I have done most everything seperately and then put together manually via text editor or IDE of some kind. Learning the new html5, css3, jquery and all the things along these lines it is going to be very very hard going forward to do things they way I have been doing them because it just isn't about one type of site anymore you also have to plan for various devices as well and designing sites that work simultaneously in mobile and desktop.

    It is really great learning how you work and the techniques and resources you use to do your thing. Didn't know about artisteer before, looks interesting but for me I don't think it would be a good fit.

    Graphics I primarily use paint.net or fireworks CS3, but I am not really a graphic artist, I can do it but it isn't my favorite thing.

    If anyone else has any techniques or workflows not discused yet please feel free to share your workflow and how you stay productive.

    Thanks.
    {{ DiscussionBoard.errors[6513755].message }}
    • Profile picture of the author IsaacWendt
      Artisteer WoW how the hell have I not heard of this before? 5 years of webdesign turning html into wordpress is time consuming. Thanks allot.

      You never know where you are going to pick up a golden nugget lol.
      Signature

      We Provide SEO and Web Design for Small and Local Business.

      {{ DiscussionBoard.errors[6516996].message }}

Trending Topics