Wednesday, April 18, 2012

The Design Process - Development

So your client has approved the designs and now you’re onto developing the site! Some designers prefer to send off their work to outside web developers, but it is more and more common nowadays for designers to also develop their own work. Front-end development involves the simple web languages like HTML and CSS, which will enable you to get your site up and running. 

Slicing
First off, you have to get your images ready to be implemented into the HTML. In Photoshop, this involves using the slicing tool. This is a nifty little feature that allows you to not only chop each part of the layout into separate images, but also gives you the ability to export the slices into a tabled HTML layout! 

If you have never used the slice tool before, HERE is an informative video on slicing webpages courtesy of 1stoptutorials


Coding
After getting the design slices, open the file in Dreamweaver. It should already be looking pretty familiar. As your skills improve you will be making big changes that will increase the functionality of the website. Some of your first sites may not look at all different from the .psd document of your site. Once your HTML and CSS skills improve, you will be transforming your site into one that can adjust sizes, add text wherever you want without hurting the layout, and implementing special scripts that only improve upon your intial .psd designs.

After coding the initial design, if you have made multiple pages you will code each of those. If you made wireframes originally

From there, start adding the content! Images, articles and text will be all over the pages. This is usually provided by the client but if it’s not you have the option to put filler text into areas until they are able to change it to their liking.
These are just the basics of coding. If HTML were the Earth than the Web would be the rest of the universe. There are countless other languages that you can learn that improve functionality and add special features. I won’t get into that now but in the future I will have a basic write-up on languages and then more in-depth articles.

No comments:

Post a Comment