Skip to main content

Deliverables for PHP web designer



I'm in the design phase of a medium-sized PHP web application (not a static website). Since I'm a programmer with the creativity of an eggplant I'd like to contract with a freelancer to design the look and feel of the application. What deliverable should I ask for from the designer? HTML files? PHP files? How do I apply the look and feel from the designer to my app?





Source: Tips4all

Comments

  1. Ask for:


    HTML Files
    CSS Files
    tableless design - it is much easier to update CSS files than it is to update tables. Note that this advice is only that you should avoid the use of tables for organizing pages' layouts. For organizing data in a tabular manner, tables are definitely still the best option.
    Image Files (all the jpg's/gif's or whatever the case may be)
    cut (<---- this is important) PSD files so you can easily edit image content and replace images. Other similar formats such as GIMP could be acceptable too.


    Once it's time to integrate the deisgn into your application, you want to separate the design from your logic and database access. This makes maintenance easier later on, and also will make it easier to make changes as you develop the application.

     - Although the specifics of which ones you should use are outside the scope of this answer, note that there are many frameworks and paradigms (MVC frameworks, content management systems, etc) which facilitate the separation of the logic.

    A simple way to separate the logic from the design is to simply set up variables in PHP files, and then include the appropriate files for the design (which should also be php, or phtml files as you'll see below). Also, you should take any sections of the page that recur in many pages and have those as a separate php file which you can include in other pages. For example...

    Bad Way (do NOT do this!):

    //File: itemsPage.php:

    <html>
    <head>
    <title>Our items</title>
    </head>
    <body>
    <?php
    echo "<ol>";
    $itemsResult = mysql_query("SELECT * FROM items ORDER BY id LIMIT 10");
    while ($item=mysql_fetch_array($itemsResult)){
    echo "<li>".$item['name']." - ".$item['description']."</li>";
    }
    echo "</ol>";
    ?>
    <br><br>
    Affiliates: Microsoft | Bob's Home Furnishing Store | <a href="http://www.example.com/affiliates.php">become an affiliate</a>
    </body>
    </html>


    Better Way:

    //File: itemsPage.php
    <?php
    $title='Our Items';
    include('header.php');
    include('items.php');
    include('footer.php');
    ?>


    ...

    //File: header.php
    <html>
    <head>
    <title><?php echo $title?></title>
    </head>
    <body>


    ...

    //File: items.php
    <?php
    $itemsResult = mysql_query("SELECT * FROM items ORDER BY id LIMIT 10");
    $items=array();
    while ($item=mysql_fetch_array($itemsResult))
    $items[]=$item;

    include('items.phtml');
    ?>


    ...

    //File: items.phtml
    <ol>
    <?php foreach ($items as $item){?>
    <li><?php echo $item['name']?> - <?php echo $item['description']?></li>
    <? } ?>
    </ol>


    ...

    //File: footer.php
    <br><br>
    Affiliates: Microsoft | Bob's Home Furnishing Store | <a href="http://www.example.com/affiliates.php">become an affiliate</a>
    </body>
    </html>


    Best way:
    As hinted at above, the best way to go about this is to use a framework (Zend, etc), which will be designed to make things as organized and easy as possible for you.

    ReplyDelete
  2. Usually, I get HTML files from my designers or PSDs and cut them up myself. The HTML files should contain all the basic elements you need to put them into PHP with separate includable header files etc. Of course, you will also want the CSS and the images.

    I find it is better to let the designer focus on what they do best which is design rather than just try to minimize my work.

    ReplyDelete
  3. You should supply them with the HTML output and let them work with that. They might ask you to restructure the output / apply id's or classes to certain things.

    "Deliverables" would be any image files / css files.

    You're going to have to gauge how far into the site you will allow them. If possible the provide them with the view PHP files (assuming a MVC system) to work with / modify.

    Just a side note: I know exactly how you feel. Creativity of an eggplant would be too kind for me.

    ReplyDelete
  4. It depends on what sort of designer you will be working with.

    My designer produces PSDs for the layout and supplies jpg/gif/png images for the graphical elements. I write all of the CSS and HTML, and that's the way I prefer it, since the JavaScript has to closely interact with the CSS. I prefer to pick my own CSS IDs, do all the layout testing and so on. She's an illustrator and artist, and hasn't the first clue about PHP, JS, CSS, etc. That works quite fine for us.

    If you have a designer that handles CSS and HTML, you would benefit from using a templating system like Smarty or h20. That way, the designer can do the job without potentially interfering with your DB and business logic (model/controller).

    The designer will have to understand the flow and logic of your app to be able to make designs for all of the different screens and states.

    ReplyDelete
  5. HTML, CSS and -- probably -- image files. (Personally, I would also want the PSD -- Photoshop file -- that they used to create the design. That way, you can see the designer's vision versus what may actually be rendered in HTML.)

    Making use of those assets depends on your application. If you're using an MVC framework, for example, you would use those assets to create your views.

    ReplyDelete
  6. First, you should find a designer who really understands your project and can provide a design that fits. The answer to your question should entirely depend on the designer's expertise.

    Some designers have excellent HTML, CSS, and sometimes PHP skills. If this is the case, your deliverables should be just that. If this is the case, they should provide you with full, working HTML, CSS. If their php skills are decent, you could even ask them to break common elements out into includes. Your mileage will vary here. As the application developer, it's your choice as to how you do that, and having a designer do it may cause more harm than good.

    If you wind up with a designer who doesn't have the technical chops, I would recommend detailed PSDs. The layers should be clearly labeled, and distinctions made between what is meant to be text vs images. At this point, you have another choice. Being a developer, you could build the HTML templates yourself. If you don't want to take the time necessary to do that, you could always use a service like http://www.psd2html.com/. I like to use them because they deal with all the cross-browser incompatibilities, and will even break things out into includes if you provide enough guidance. Only caveat is to make sure that the PSD is well labeled.

    Either way, most important thing is make sure your designer gets what you're doing, and figure out what the best solution for deliverables should be based on their skillset.

    ReplyDelete
  7. Also, make some arrangement over who 'owns' the design after the designer is finished. If you don't, the design belongs to the designer, and legally you can't make changes to it without his consent. So let the designer transfer the rights of the design to you.

    I guess you can count that as a deliverable.

    ReplyDelete
  8. If your application separates logic from presentation, you should be clear on now to apply the designer's work to yours.

    My designers supply me with PSD files. But that's the way I like it. Have a chat to your designer and you'll find common ground.

    ReplyDelete
  9. For the designer you're going to need, HTML, CSS, and images.

    Other designers might only provide an image of the page, and leave you to chop it up yourself.

    ReplyDelete

Post a Comment

Popular posts from this blog

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex