Web Design Guide and Ref

web design to code workflow

Here is a general quick guide

  1. start and end with Photoshop design
  2. export image elements out
    1. select element layers, copy element (logo, button, art text)
    2. new file, paste element, save for web as png-24
    3. note: transparent element gives you flexibility of later theme change
    4. for bg pattern, save as jpg
  3. start and end with html div layout coding

Sample folder structure

/site/
|----/css/
|----/js/
|----/img/
|--------/nav/
|--------/logo/

Sample html layout code

index.htm
<body>
  <div id='wrap'>
<!-- ============================================ -->
<!-- ============================================ -->
    <div id='header'>
      <h1><a href='#'>Logo</a>
      <ul><!-- nav items -->
        <li id='home'><a href='#'>home</a></li>
        <li id='about'><a href='#'>about</a></li>
        <li id='contact'><a href='#'>contact</a></li>
        <li id='search'>
          <img src='img/search_icon.png' alt='search' />
          <input type='text' name='search' id='search' value='search' />
        </li>
        <li id='rss'><a href='#'><img src='img/rss.png' /></a></li>
      </ul>
 
      <p id='title'>Here is the greate Title!</p>
    </div><!-- end header -->
<!-- ============================================ -->
<!-- ============================================ -->
    <div id='main'>
<!-- ============================================ -->
      <div id='first_part'>
 
        <div class='post-item'>
          <img src='img/post_pic/one.jpg' alt='thumb' />
          <h2>My post today 1</h2>
          <p class='meta'>2011-01-01 Fri Rain</p>
          <p>
             Content......
          </p>
        </div><!-- end post -->
 
        <!-- ~~ repeat posts ~~ -->   
 
      </div><!-- end first_part -->
<!-- ============================================ -->
      <div id='second_part'> <!-- anything extra -->
        <div class='box'>
          <h3>box title 1</h3>
          <!-- ++box content++ -->
          <ul>
            <li><a href='#'>item 1</a></li>
            <li><a href='#'>item 2</a></li>
            <li><a href='#'>item 3</a></li>
          </ul>
          <!-- end box content -->
        </div><!-- end box -->
 
        <!-- ~~ repeat boxes ~~ -->
 
      </div> <!-- end second_part -->
<!-- ============================================ -->
    </div><!-- end main -->
<!-- ============================================ -->
<!-- ============================================ -->
  </div><!-- end wrap -->
</body>
  • Example of foundation framework
    • html
      <!doctype html>
      <html>
          <head>
              <title>a flat design</title>
              <meta charset="UTF-8">
              <link rel="stylesheet" href="css/foundation.min.css">
              <link rel="stylesheet" href="css/custom.css">
              <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800,800italic,300,300italic' rel='stylesheet' type='text/css'>
              <link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
              <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
          </head>
          <body>
              <div class="container-spacy bg-orange">
                  <header class="row" id="main">
                      <div class="large-4 column">
                          <div class="brand">
                              <a href="#">Coloristic</a>
                          </div>
                      </div>
                      <nav id="main" class="large-8 column">
                          <ul>
                              <li><a href="#">Home</a></li>
                              <li><a href="#">Service</a></li>
                              <li><a href="#">Portfolio</a></li>
                              <li><a href="#">Blog</a></li>
                              <li><a href="#">About</a></li>
                              <li><a href="#">Contact</a></li>
                              <li><a href="#" class="button button-primary">Sign up</a></li>
                          </ul>
                      </nav>
                  </header>
                  <div class="row feature">
                      <div class="large-5 column">
                          <h1>Make Things Happen.</h1>
                      </div>
                      <div class="large-7 column">
                          <img src="imac.png" alt="" height="400" width="400">
                      </div>
                  </div>
       
              </div>
       
              <div class="container-spacy bg-white">
                  <div class="row features">
                      <div class="large-4 column">
                          <img src="call.png" alt="" height="64" width="64">
                          <h5>Call Anyone</h5>
                          <p>Dial anyone in just 1 click without pain.</p>
                      </div>
                      <div class="large-4 column">
                          <img src="music.png" alt="" height="64" width="64">
                          <h5>Music Anywhere</h5>
                          <p>Feel in air anywhere, bus or boat.</p>
                      </div>
                      <div class="large-4 column">
                          <img src="mail.png" alt="" height="64" width="64">
                          <h5>Mail Unstop</h5>
                          <p>Stay in contact and in line.</p>
                      </div>
                  </div>
              </div>
              <div class="container-spacy bg-green recent">
                  <h2>Recent Works</h2>
                  <p>Tons of to do, lots of to work. I have no idea.</p>
       
                  <ul class="list-line">
                      <li class="marked" ><a href="#">All</a></li>
                      <li><a href="#">Web</a></li>
                      <li><a href="#">Mobile</a></li>
                      <li><a href="#">Design</a></li>
                      <li><a href="#">Photo</a></li>
                      <li><a href="#">Type</a></li>
                  </ul>
       
                  <div class="row">
                      <div class="large-4 small-6 column">
                          <div class="item bg-grey">AAAA</div>
                      </div>
                      <div class="large-4 small-6 column">
                          <div class="item bg-white">AAAA</div>
                      </div>
                      <div class="large-4 column">
                          <div class="item bg-blue">AAAA</div>
                      </div>
                  </div>
                  <div class="row">
                      <div class="large-4 small-6 column">
                          <div class="item bg-red">AAAA</div>
                      </div>
                      <div class="large-4 small-6 column">
                          <div class="item bg-yellow">AAAA</div>
                      </div>
                      <div class="large-4 column">
                          <div class="item bg-dark">AAAA</div>
                      </div>
                  </div>
                  <a href="#" class="button button-2nd">Show More</a>
       
              </div>
          </body>
      </html>
  • css
    body {
        font-family:"Open Sans";
    }
    /*
        headers
     */
     
    h1,h2,h3,h4,h5{
        font-family: "lato";
    }
     
    .container {
        padding: 40px 20px; /* top-btm, left-right */
    }
     
    .container-spacy {
        padding: 80px 20px;
    }
     
    /* color */
    .bg-orange {
        background-color: #f8bc3b;
    }
    .bg-white {
        background-color: white;
    }
    .bg-green {
        background-color: #27ae60;
    }
    .bg-grey {
        background-color: #3a3a3a;
    }
    .bg-red {
        background-color: red;
    }
    .bg-yellow {
        background-color: #fec400;
    }
    .bg-blue {
        background-color: #7ecefd;
    }
    .bg-dark {
        background-color: #111111;
    }
     
    .button {
        padding: 14px 30px;
        border-radius: 5px;
    }
    .button-primary,.button-primary:hover {
        background: #3a3a3a;
        color:white;
    }
    .button-2nd,.button-2nd:hover {
        background: #fff;
        color: #3a3a3a;
    }
     
    /* headers */
    header#main {
        margin-bottom: 40px;
    }
     
    header#main .brand a{
        display: block;
        font-family: "Pacifico";
        font-size: 2em;
        color:#393f4a;
        margin-bottom: 20px;
    }
     
    nav#main ul{
        list-style-type: none;
        margin: 0;
        padding: 9;
        float: right;
    }
    nav#main ul li{
        display: inline-block;
        margin-right: 20px;
    }
    nav#main ul li:last-child{
        margin-right: 0px;
    }
    nav#main ul li a{
        font-size: 78%;
        text-transform: uppercase;
        font-weight: 600;
     
    }
    nav#main ul li a:not(.button){
        color:#393f4a;
    }
     
     
    .feature {
        margin-top:20px;
        text-align: center;
    }
    .feature h1{
        text-align: left;
        font-size: 5.5em;
        color:white;
        text-transform: uppercase;
        font-weight: 900;
        line-height: 70px;
        margin-top: 60px;
        margin-bottom: 40px;
    }
     
    .features {
        text-align: center;
    }
     
    .features h5{
        font-weight: 600;
        font-size: 1.4em;
    }
     
    .features p{
        font-size:80%;
        margin-bottom: 40px;
    }
     
    .features img{
        margin-bottom: 20px;
    }
     
    .recent {
        text-align: center;
    }
    .recent h2 {
        text-transform: uppercase;
        color: white;
        letter-spacing: 3px;
    }
    .recent p{
        margin: 0 auto 60px auto;
        color: white;
    }
     
    .recent .item{
        padding: 100px 0;
        margin-top: 30px;
    }
    .recent ul li a{
        color: white;
        border: 2px solid transparent;
        padding: 8px 20px;
        border-radius: 5px;
        font-weight: 600;
    }
     
    .recent ul li.marked a{
        color: #27ae60;
        background: white;    
    }
    .recent ul li a:hover{
        border: 2px solid #fff;
    }
    .recent .button-2nd{
        margin-top: 20px;
        font-weight: 600;
    }
     
     
     
    .list-line {
        list-style-type: none;
    }
    .list-line li{
        display: inline-block;
        margin: 0 20px;
        margin-bottom: 40px;
    }

Web Tool and Framework