Alat-alat yang digunakan untuk membuat website, dalam hal ini software yang digunakan, misalnya menggunakan Adobe Photoshop sebagai alat desainnya, Macromedia Dreamweaver sedagai alat untuk coding, dan sebagainya. - Bahan-bahan untuk website tersebut, dalam hal ini adalah materi atau informasi yang akan ditampilkan pada website yang kita buat, misalnya: biodata, curiculum vitae, list barang dagangan, profile perusahaan, dan banyak lagi yang lainnya. - Setelah software tersedia di komputer kita, dan materi sudah ada, baru kita dapat memulainya dengan mendesain layout, programnya sampai dengan selesai. - Setelah semua selesai, kemudian kita tes. - Seletah tes sukses, baru kita bisa upload ke server, baik itu yang gratisan atau yang beli.

1. Tujuan / Goal Website Setiap desain harus mempunyai tujuan yang jelas dan goal apa yang ingin di raih melalui website tersebut. Jika itu website portfolio, tentukan tujuan nya, apakah untuk mendapatkan projek baru? , melakukan personal branding atau untuk menjadi semacam katalog online hasil kerja kita?

2. Sitemap Sitemap merupakan bagian yang sangat vital,  karena akan menjadi gambaran alur informasi yang jelas mengenai website yang akan kita buat. Tentukan navigasi dan fitur yang di perlukan di tahap ini dan buang fitur yang tidak efektif.

3. Sketsa / Wireframe Supaya tidak tersesat di kanvas kosong Photoshop, lebih baik kita merancang terlebih dulu di atas kertas. Langkah ini perlu untuk menghindari kerja dua kali di Photoshop. Bisa di bayangkan waktu yang terbuang ketika membuat background atau tombol terlihat bercahaya dan web 2.0 banget!, tapi ternyata letak dan ukurannya kurang tepat.

4. Resolusi 72 Dpi & Warna RGB 72 Dpi adalah resolusi standar untuk tampilan di monitor (jangan pernah membuat desain website di resolusi 100 dpi sekalipun, karena ukuran asli nya akan menjadi besar juga). Dan gunakan warna RGB yang memang di khususkan untuk monitor.

5. Lebar Konten Website Maksimal 960 Pixel Seheboh apapun desain yang kamu buat, jaga area konten (teks, foto dll) agar jangan melebihi lebar 960 Pixel. Ini karena standar monitor orang awam masih berkisar di resolusi 1024 x 768. Untuk bagian background image mungkin perlu untuk melebihi lebar 960 pixel ini dengan tujuan supaya background terlihat rapih dan tidak terpotong jika di buka di monitor yang lebar seperti 1360 x 768 pixel atau lebih.

6. Gunakan Grid System Grid bukanlah suatu pembatasan kreatifitas terhadap desain. Grid di ciptakan untuk mempermudah kita menjaga konsistensi layout dari halaman satu ke halaman yang lain. Selain itu gird juga membantu programmer yang akan menslicing desain kita di photoshop.

7. Manajemen Folder & Layer di Photoshop Biasakan untuk membuat folder di bagian-bagian penting sebuah website, misalnya, folder header, folder body, folder sidebar, folder footer. Sebenarnya nama folder nya bisa terserah kamu, yang penting di namakan dan masing-masing layer yang termasuk ke dalam satu bagian/section di satukan ke dalam satu folder.

Kesimpulan 7 langkah di atas adalah langkah awal supaya kita terbiasa mendesain dalam keadaan yang terorganisir (khususnya desain website). Karena kita tahu terkadang kita tidak bisa menyelesaikan suatu projek sendirian, dalam hal ini mungkin kita butuh teman programmer, jadi supaya code yang di hasilkan juga rapih, kita sebagai desainer juga harus memberikan “file mentah” yang rapih.