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?
+4
A:
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.
Josh K
2010-06-27 03:37:59
+10
A:
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.
Aaron Harun
2010-06-27 03:43:02
A PSD deliverable is the cheapest solution, but may take quite a bit of time from you to slice and turn into HTML/CSS.
Jan Kuboschek
2010-06-27 13:30:19
+2
A:
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.
George Marian
2010-06-27 03:43:40
+3
A:
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.
Alex JL
2010-06-27 03:52:43
+9
A:
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.
Cam
2010-06-27 04:06:56
@Rimian: That's true. Tableless design means only using tables for organizing data in a tabular fasion, and creating the page's layout by other means (through css). In fact the flip side is also something to avoid - if you have data that should be organized in a table, use a table. I've seen some designs so keen on avoiding tables that 'pure css' is used for everything, making for bloated html for data presentation. I've edited my answer to clarify this.
Cam
2010-06-27 04:26:51
@incrediman Ah... you've just redefined the word "tableless" for me. Excellent! I've seen many designs that go overboard on tableless too. Then claim it saves bandwidth. Crazy, I tell you!
Rimian
2010-06-27 04:46:10
+2
A:
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.
Chris Henry
2010-06-27 04:15:05
A:
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.
Rimian
2010-06-27 04:24:16
A:
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.
Dean J
2010-06-28 14:04:56
+1
A:
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.
Sander
2010-07-09 14:02:22