For a budding designer, how to design a website is a much sought after skill. It’s not always easy, and if you’re new to the game, you may find you have no idea where to even begin. So, for all you talented designers wishing to expand your skill set, here’s look at the basic process of designing a website from start to finish.

  1. Start in Photoshop: First thing’s first! If you’re used to designing in Photoshop, this will be no sweat at all. If you’re not, Design Contest highly suggest you get used to it, as you’ll likely be in and out of this application frequently. Either way, you’ll want to draw the website here first. Use all the tools you’re used to, and for the most part, you don’t even have to change your design methods. However, if you want to change the look of a button or other such element when it’s clicked (this is called a “state change”) you’ll want to create the modified state as a separate layer beneath the element. This will help out latter, and staying as organized as possible is the best idea. Once you’ve got the site laid out as you think it should be, move onto the next step!
  2. Splice It: This is where things tend to get a bit tricky. You see, the next step is to essentially take the design elements you created in Photoshop, and then turn them into coded images. This is commonly called splicing. In short, you’re turning all those lovely layers into single stock image files, which are then taught to behave a certain way. There are a number of programs that can help you do this, but our favorite starting spot is Adobe Fireworks. You can handle a lot of basic splicing elements here, and once that’s complete, you can easily import your saved file in Dreamweaver. Once there, add all the complicated CSS and jQuery code you desire. It’s a rough transition, but with both of these at the helm, you’ll find it much easier than you think.