Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>My opinion is that HTML/CSS is sufficiently simple that a competent web designer should be moderately fluent in it. Photoshop has its place for quick look-and-feel experiments, but I think this misses an important step: user experience design. </p> <p>Personally, I've been designing and prototyping directly in HTML for some time now. This is where the clean separation of content and layout provided by CSS really shines. I organize pages into regions using unstyled divs, which allows me to organize the page conceptually (i.e. keep related items near each other in the code) and postpone thinking about appearance. This has the side effect of making a pretty thorough site inventory.</p> <p>Next I'll use CSS to lay out the divs, which happily also produces wireframes (useful for reviews and paper prototyping.)</p> <p>The last step is applying visual elements: color, text styles, graphics. I'll use whatever graphic program I need to cook up the pretty.</p> <p>Note the orthogonality inherent in this method: develop concepts, then layout, then look and feel. This puts the hard thinking (conceptual models) up front, and the most volatile thinking (colors/styles) at the end. So when the art director changes the color palette, you only have to edit one CSS file. And if you need to change your conceptual model, much of the layout and look/feel may be reusable.</p> <p>If you need traction in this method you can use a standard css grid like 960 (<a href="http://960.gs/" rel="nofollow noreferrer">http://960.gs/</a>). It handles a lot of the arithmetic and floaty business that makes layout such a chore.</p> <p>In addition to Rahul's link above I also recommend: <a href="http://www.37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss" rel="nofollow noreferrer">http://www.37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload