Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorHorisont
    • CommentTimeJul 24th 2006
     permalink
    Hello guys! :)
    I am new here. Very interested in CSS design.
    My question is... how do you work? I mean, first you start designing website in Corel Draw, then slice it in Photoshop, then write clean CSS code by yourself without any software(or with some software?), then insert some PHP code for dinamic parts etc
    So, can you please describe all steps of your work or maybe you have a link with article about it.

    Sorry for some typos and mistakes, English is not my native language :)

    Pavel
    • CommentAuthormista3
    • CommentTimeJul 24th 2006
     permalink
    I'm sure everyone goes about this very differently, but for me:

    1. Think about it. If stuck, leave for a few days, or sleep on it...
    2. Sketch on paper
    3. Mockup in Fireworks
    4. Sketch css layout on paper, and research if required (http://www.glish.com/css/, http://www.bluerobot.com/web/layouts/ etc)
    5. Build a skeleton CSS/html page to test layout
    6. Build final site
    • CommentAuthorGustavs
    • CommentTimeJul 24th 2006
     permalink
    Uhmm... What are you doing with CorelDraw? As far as I know it has nothing to do with web design.

    Well first of all I do it all on my localhost.
    Any way here it goes:

    1. Create cuple of skeches in Photoshop to choose from.
    2. Create CSS layout based on a skech I choosed. While doing this test in other browsers as well.
    3. Add PHP for the dynamic content.
    4. Add content. (Mostly I don't have the site content at first)
    5. Test again and if everything is running fine upload to server.
    • CommentAuthorHorisont
    • CommentTimeJul 24th 2006
     permalink
    for 3stripe
    Some questions :)
    Step 3 - how do you make mockup in Firefox?
    Step 4 - what is the difference between step 2?
    Step 5 - how do you build it? What software you use etc

    I spend SO MUCH time debugging my non-table designed pages :)
    • CommentAuthorHorisont
    • CommentTimeJul 24th 2006
     permalink
    for Gustavs
    How you create CSS layout without having you Photoshop skethes sliced for the website?

    About Corel Draw, I don't know why, but I just don't like using Photoshop and I think it is much easier and faster to create layout in Corel Draw. Hm, it is not right :) it is all because I am not really familiar with Photoshop.
    •  
      CommentAuthorfake
    • CommentTimeJul 24th 2006
     permalink
    Usually, I must do some amount of programming for each of the sites I do. So here's how I start.

    - I make the website work on a stripped html design using Dreamweaver. With only the needed sementic tags.
    - I make the design in Photoshop with that structure in mind (though I really should draw them more)
    - Then it's a matter of touch-ups until the site renders the same on most browsers.
    • CommentAuthorGustavs
    • CommentTimeJul 24th 2006
     permalink
    I just recreate it and save the nessecary pictures I need.
    •  
      CommentAuthormringlein
    • CommentTimeJul 24th 2006 edited
     permalink

    The question stated from "idea" to "new website".

    First thing first: Start with a plan.
    1. What is the objective of the site?
    2. What is your audiences' expectations?
    3. What does your audience want?
    4. What do you want your audience to want?

    Now determine your content and its hierarchy
    1. What content do you have?
    2. What content will you have for launch?
    3. Create a sitemap (I use Viso) to determine where your content will live and how users will get to that content
    4. Create wireframes (I use Viso) to detemine where your content will go on individual pages

    Now you start designing
    1. Like a coloring book, start to color in the lines of your wireframe (I use PhotoShop)
    2. I use Illustrator for any vector graphics needed or maniulated
    3. Be sure to layout your site design with guides/grids that resemble how you will code the site (this is the foundation for your structure)
    4. This is a good time to ensure you have a solid color pallet (helps me determine the little detailes like my H tags and Link attributes

    And finally we build the beast
    1. Translate those guides and grides from Photoshop into CSS elements accordingly (I use Dreamweaver). At this point your site should start to look like a high fidelity wireframe
    2. Then you slice and dice (I use Photoshop again, "save for web" option)
    3. Now that you have some HTML that looks like your mock-up, add the details using CSS to the rest of the mark-up
    4. At this point the template is complete and you can start to concentrate on the interaction of elements/actions

    You don't need all of these steps and many of you know there are a lot more steps to be included or elaborated on (depending on the project). But this is what I typically use as a starting block for most site designs. Some of the steps I skip or keep in my head (like the wireframe for example; at least on smaller sites).
    •  
      CommentAuthorSpookyET
    • CommentTimeJul 24th 2006
     permalink
    Gustavs. Corel Draw is the main competitor to Illustrator. If you can master vector graphics, it's much easier to use a vector-based program to create mockups because no pixelization occurs, and that makes resizing easy.
    • CommentAuthormatthamm
    • CommentTimeJul 24th 2006
     permalink
    1. S.W.O.T analysis
    2. content profile
    3. site map
    4. Mood board
    keywords doc
    image searches
    Style, colours etc.
    Sort Branding guidlines
    5. Design Swatch
    Layout decisions based on content profile
    Sketch up ideas in pencil
    Photoshop CS2 (considering 768px or 998px widths)
    Usually about 10-20 different look & and feels with lorem ipsum content. (considering how these will be built)
    6. Design development
    Lowerlevel design more detailed visuals.
    7. wireframe
    Using some realistic potential content and the sitemap.
    8. HTML coding
    I use dreamweaver 8 in code view as it gives me HTML & CSS code hints which can be handy.
    NO CSS or Div's at this stage just <h1> <p> <a> <Blockquote> etc. (this helps separate content from Style)
    9. CSS coding
    Linked css file
    Add divs and css to style homepage (validate HTML and CSS & Cross Browser check)
    build lowerlevel and key page CSS (validate HTML and CSS & Cross Browser check)
    10. PHP & Ajax integration and testing
    11. CMS template integration and testing
    12. Testing
    validate HTML and CSS & Cross Browser check
    Accessiblity considerations and testing
    Content & design reassesment

    & probably many other things which have totally failed to enter my brain at this stage...
    • CommentAuthorHorisont
    • CommentTimeJul 24th 2006
     permalink
    Ok, you have designed webpage in Illustrator or Photoshop, but how do you make css/xtml webpage of it?
    If I use tables it is easy - just slice it in Photohop or Imageready and you get almost finished website.
    I guess there is some function in Dreaweaver but I am not familiar with it, I use HomeSite.
    •  
      CommentAuthorSpookyET
    • CommentTimeJul 24th 2006
     permalink
    You slice the mockup and generate images. You write the code manually.
    •  
      CommentAuthorSpookyET
    • CommentTimeJul 24th 2006
     permalink
    matthamm: considering 768px or 998px widths? Interesting numbers. I usually do 775 and 1000.
  1.  permalink
    Hey Horisont!

    There is no magic button that you can click and convert Photoshop/illustrator layout to CSS/XHTML.
    You have to decide how you want to stucture you website and what objects will be present in final design.
    It's borring manual job by hand even if you using DW8 and can take hours and hours depending how complicated is design.
    CarelDraw was never designed for web it's vector graphic editor for publishing. Photoshop is the winner if we talking about website mockups. I know couple people that using Illustator for making mockups but they have publishing background and just get used to it.

    Cheers, DS
    • CommentAuthorHorisont
    • CommentTimeJul 24th 2006
     permalink
    to SpookyET
    >>You slice the mockup and generate images. You write the code manually.
    I wonder if there are any tools to do it automatically ?
    •  
      CommentAuthormringlein
    • CommentTimeJul 24th 2006
     permalink
    SpookyET --> I usually do 770 or 990, makes the math easier.
    •  
      CommentAuthorSpookyET
    • CommentTimeJul 24th 2006
     permalink
    Do you want to be a web developer? If not, hire someone else.
    •  
      CommentAuthormringlein
    • CommentTimeJul 24th 2006 edited
     permalink
    Horisont -- if you want a simple "one-push" button to make a wesbite, then just use tables. Your mark-up will never be semantic. If you're looking for these types of solutions -- you've come to the wrong place for answers. Everyone here is cringing at the very idea of auto-generated mark-up from PhotoShop (b/c we know the results).

    None-the-less, here is your solution:
    How to convert your photoshop document to a CSS in less than 30 seconds, a precise tutorial with illustrations

    NOT RECOMEDNED!
    • CommentAuthorHorisont
    • CommentTimeJul 24th 2006
     permalink
    to mringlein

    No, I am really keen on CSS design I am glad I've found this place :)
    So, seems like you do everything mannualy without any helping software? Is it because you are fan of clean code or something else?

    After reading your answers I am thinking about stop using Corel Draw for web design and finally learn Photoshop :) Do you know any tutorials about Photoshop for web design?

    Guys, I am sorry for a lot a questions, but I really want to get a bit of your experience :)
    •  
      CommentAuthormringlein
    • CommentTimeJul 24th 2006
     permalink
    I do everything manually. Dreamweaver has a few shortcuts (ie: auto complete) functions that I utilize; but discourage using it for the WYSIWYG editor. Asking why we develop code manually rather than finding a "one-button-push" application to transform our designs into mark-up is broad topic. Obviously -- if such an application existed, I would use it. Most of the applications that claim to do this will produce poor mark-up. Why do we care if our mark-up is poor? Why do we value CSS structured sites over table-based sites? These are the questions you have to ask yourself. If you are only doing it to "be cool" (HA HA) or because you notice most job descriptions demand it -- then I suggest doing some research first.

    Are you asking why we code manually? Or are you asking what the value in semantic and valid mark-up might be? A simple answer to the question, why do I code manually -- because there is no better alternative. It is challenging to code manually, thus exciting -- but not really "fun". Obviously a "one-button-push" alternative from a production cost stand point would be amazing -- it is just in my opinion near impossible to do.
    • CommentAuthormatthamm
    • CommentTimeJul 24th 2006
     permalink
    for free video podcasts of photoshop advanced techniques visit:
    http://www.photoshopkillertips.com/

    if your beginning. i suggest: http://www.planetphotoshop.com/tutorials.html or just reading the manual from the beginning.

    # SpookyET
    I use those widths because of this article that i read which I though was very good and then i made up my own mind from that, read it here:
    http://webmonkey.com/webmonkey/99/41/index3a_page2.html?tw=design

    ## Horisont
    Sounds like you have only just started out, be prepared ...it takes years to master all this stuff (i'm still learning after 10 years of building website!)... most is learnt through trial and error and experience.
    Photoshop can auto generate html for you if you slice up the psd, but it produces really messy unaccessible code (in my opinion).
    The most important thing with web design is keep it simple, makes your life as a coder easier too. Some of my favourite websites are really simple designs and coding very clean and simple.
    • CommentAuthormista3
    • CommentTimeJul 24th 2006 edited
     permalink
    Step 3 - how do you make mockup in Firefox?
    Step 4 - what is the difference between step 2?
    Step 5 - how do you build it? What software you use etc


    3. Fireworks is a web graphics program, easily confused with Firefox, lol. And it came out first!

    4. Sketching CSS layout - this is just a wireframe sketch - the div layout in rough, just some boxes with names I guess. You could even overlay it over your sketches from 1 I guess.

    5. I build my sites in Smultron, a text editor for the Mac. When I think back to a year ago when I relied 100% on Dreamweaver to code for everything me, it makes me smile :) For my last build, I decided to position the basic blocks first as empty divs, with different coloured backgrounds. Ony once I'd made sure this layout was 100% perfect in ALL browsers, did I add any content. Seemed to help!
Add your comments
    Username Password
  • Format comments as (Help)