• Free consultations 24/7 and support
  • Call ico 1888-906-1888
    Phone support: Open

    Ready for your call :)

    Our business hours:

    Mon — Fri, 8am — 2am (EST)

    US & EU support teams

    Phone support: Closed

    We are back in: 2h 34 min

    Our business hours:

    Mon — Fri, 8am — 2am (EST)

    US & EU support teams

The Web Design Process Every Designer Should Follow

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.

Posted on February 27, 2012

Category: Designing, Web Design

Article tags

Are you a Designer?

Join Us

community counts

~150.1k designers


Related Articles
George Bokhua logos and marks

George Bokhua logos and marks

Designing, Graphics, Inspiration, logo

George Bokhua is considered to be a master of tiny logos, icons and marks....

Cool Tools: Browser Shots

Cool Tools: Browser Shots

Designing, General, Web Design

When you are designing for digital applications, nothing is more important than knowing how...