Hi All,
I am quite new and have been working with online classes, one class at the local community college and lots of to become competent. I also can give some thanks for inspration to a local user group. I have become reasonably proficeint at HTML 4 and 5, CSS (by my own harsh standards, I am at a good level here) and PHP / Mysql. I have a ways to go on the PHP/Mysql to develop complex sites, but I can get a basic ecommerce site up. I am just starting to learn Javascript at lynda.com. I am working hard to improve. I built a small website for myself for a slideshow business before really learning anything. It is pretty crude Further, I built a site for free for a friends business and got paid to build an internal website / app for a local law enforcement agency. So one paid job. I also have done several complete sample sites for practice. So, I have a bunch of questions about workflow / process. Here is what I am considering right now and any input / ideas would be greatly appreciated. Note that I am not a Photoshop expert or even advanced beginner and that is by design. I do not intend to use Photoshop for mockups / design.
So here is what I am considering
Do crude mockups using Balsamiq or equivalent. I am looking at Balsamiq, Wireframe Sketcher, and Iplotz. These tools will not create a high fidelity mockup and I am hoping to skip this step and if clients need more, doing it in HTML / CSS.
I would consider something like Adobe Fireworks if I determined that a high fidelity mockup is required for my workflow. Like many starting out, I am broke and would like to avoid that expense, but I can get it and learn it if it is required (I can be influenced here)
I have a copy of PHPStorm and it is an excellent HTML/CSS/PHP/Java IDE. I will be using it for most of my work Stylizer (a cool CSS tool) and will be incorporating it to do the CSS work.
If the site requires a database / interaction develop the interaction in some type of tool (perhaps MySQL Workbench, free and I understand, powerful, or something else if there is a better solution. Any suggestions are welcome)
Implement the necessary PHP/HTML and test / refactor / test like crazy.
I know this is a bunch. Any feedback I can get from experienced designers/developers would be great.
Another option—which is growing in popularity—is to design within the browser itself. I’m a fan on this, and it makes sense. From simple wireframes upwards, why not work in the actual medium of the web? Some clients like to know what the final design will look like from the beginning, but this is the wrong approach, IMHO. Before any kind of design, the content and its structure should be determined, as this will inform the basic layout, which you can then present as a simple, web-based wireframe. Then the client can see what will happen to elements at various screen sizes etc … something thats not practical with a graphics editor. Then add in styles as appropriate … meaning you don’t kind of build the site twice.
Here’s an article about it:
My other comment would be that it’s worth considering a CMS for building database driven sites. There are many good ones out there, like MODx or ExpressionEngnine. They save you from reinventing the wheel.
Hi Ralph,
Thanks for the quick reply. I have a couple of thoughts. I have found that having a crude markup helps me alot, forget the client Then going straight to HTML / CSS. I actually read that article you recommended before and it made a lot of sense to me from the beginning, especially die Photoshop die. It takes way too long for me and its hard to make changes quickly. Maybe I could forgo the cheezy Balsamiq like mockup as well. Further, the other thing I like about your suggestion is that if I need a high fidelity mockup, HTML / CSS can do that perfectly (obviously) and better than some cheezy unuseable export from any graphics program. I am new, but already I feel good about styling pages expertly, so why not leverage that? Anyway, great suggestion.
I have been playing with Wordpress and modifying templates for awhile. Your comment about a CMS for database driven sites is interesting (Wordpress doesn’t really have a clue about databases per se unless you add it) Specifically, how do these CMS’s help with the database? I really have no idea, so a quick concise answer would be great. Of course, I can always just start looking
Yes, the other problem with designing in Photoshop et al. is that you may not be able to recreate what you did there reliable on the web, so the client also gets unrealistic expectations. For example, if your clients insist on using an older browser, they’ll never know that they are missing out on rounded corners and drop shadows if you are desinging in-browser, whereas if they have a Ps mockup by their side …
They look after it by themselves. You just set up your pages how you like, enter content and so on, and the CMS stores everything in the database wihtout you ever having to touch it at all. Of course, you can play with the database, but you don’t have to. So you can build a database-driven site with little or no knowledge of backend technologies at all. (Perhaps not ideal, but great for being able to deliver nifty sites to clients.)
Sitepoint seems to be populated by a disproportionate number of “design within the browser” advocates. (That includes myself!) Other design forums feature mostly designers who advocate designing via PS or Illustrator or whatever before starting the actual code. It’s a matter of taste, training, approach, and preference.
This is why I like to design within the browser. It has nothing to do with my rank incompetence in PS, so stop saying that!
Further, I built a site for free for a friends business and got paid to build an internal website / app for a local law enforcement agency. So one paid job. I also have done several complete sample sites for practice. So, I have a bunch of questions about workflow / process. Here is what I am considering right now and any input / ideas would be greatly appreciated. Note that I am not a Photoshop expert or even advanced beginner and that is by design. I do not intend to use Photoshop for mockups / design.