7 Tips Krusial dalam Mendesain dan Maintaining Situs Besar

Project-project bervariasi dalam lingkup dan ukuran, dan tantangan yang mereka hadapi berbeda juga. Sebagai designer web tunggal, pekerjaan terbesar yang menjadi tanggung jawab saya adalah FlashDen. Seiring dengan ribuan anggota aktif semua chatting, uploading dan membeli, situs memproses sejumlah besar uang dan sejumlah besar traffic.

Mendesain, mendesain ulang, maintaining dan bekerja dengan tim developer telah memberi saya beberapa wawasan dan tips berguna untuk membuat hidup lebih mudah. Dan sejak hari ini kami telah meluncurkan redesign situs saya yang terbaru, jadi sepertinya ini saat yang tepat untuk menulis 7 tips teratas saya!

1. Desain dan Code yang Maintainability

Tips pertama dan terpenting yang bisa saya berikan, adalah mendesain situs yang mudah untuk di-maintain. Sering kali ketika mendesain sebuah situs anda mungkin mengorbankan sesuatu untuk estetika. Misalnya anda mungkin menggunakan gambar di mana teks atau style sudah cukup. Atau anda mungkin sengaja memilih struktur menu yang tidak memiliki ruang untuk tumbuh. Bila situsnya menjadi besar, ini menjadi ide yang sangat buruk.

Ketika saya membangun versi pertama FlashDen hampir dua tahun yang lalu, saya menggunakan gambar untuk tombol. Mereka terlihat sangat bagus, tapi saya selesai dengan sebuah library dengan 100 gambar tombol yang berbeda, belum lagi rollovers. Kemudian dalam beberapa bulan ke depan setiap kali seorang developer membutuhkan tombol baru mereka harus meminta saya untuk membuat gambar. Tak perlu dikatakan, saya belajar pelajaran itu dengan cukup cepat dan kami beralih ke class tombol tunggal yang mungkin tidak terlihat bagus, tapi jauh lebih baik untuk ketenangan pikiran.

Aspek lain dari maintainability adalah memikirkan bagaimana situs ini akan tumbuh dan berubah. Misalnya, saat halaman baru ditambahkan, kemana mereka ditempatkan? Awalnya saya ingin navigasi horizontal, tapi hal ini benar-benar terbatas, Setelah beberapa bereksperimen, kami akhirnya menggunakan nav vertikal, yang memungkinkan item submenu, dan kemudian di atas itu, menambahkan struktur tab ke dalam halaman untuk memungkinkan halaman terkait untuk dikelompokkan bersama. Saya tidak mengatakan itu navigasi terbaik di dunia, tapi itu pasti berarti kita tidak mendesain ulang setiap kali ada bagian baru yang ditambahkan ke situs ini!

Jadi dalam mendesain untuk situs besar, carilah cara untuk membuat hidup lebih sederhana nantinya, karena anda akan senang melakukannya!

2. Cari Tahu Kelompok User dan Tugas Anda

Salah satu perbedaan terbesar antara situs besar dan situs kecil, adalah jumlah dari jenis user yang berbeda yang mungkin menggunakan situs tersebut. Misalnya di FlashDen, ada buyers, authors, visitors, admins, dan members. Setiap kelompok memiliki serangkaian tujuan dan tugas yang berbeda yang harus mereka laksanakan. Terkadang tugas ini tumpang tindih, tapi terkadang sangat berbeda.

Contoh terbaik dari tempat di mana tugas pengguna bertentangan satu sama lain ada di homepage. Tidak ada tempat lain di situs yang dilakukan setiap kelompok pengguna, dan tidak ada tempat lain yang sangat penting untuk memastikan semua orang mendapatkan apa yang mereka inginkan. Dan tentu saja anda harus berhati-hati dalam melayani satu kelompok user anda tanpa mengabaikan yang lain.

Dalam mendesain ulang FlashDen terbaru ini, area terbesar yang saya kerjakan adalah homepage. Hal pertama yang saya lakukan adalah mencantumkan semua hal yang perlu dilakukan setiap kelompok user:

1. Buyers (pembeli) - Orang yang berada di FlashDen untuk membeli file
   Mulai browsing item, mulai searching, mengakses homepage pribadi mereka, deposit uang, mempelajari cara kerja situs (untuk pembeli baru)
2. Authors (penulis) - Orang yang menjual barang di FlashDen
   Chat dengan member lain, dapatkan fitur di beranda untuk mem-post item mereka, cari tahu tentang news situs, segera dapatkan portofolio dan penghasilan mereka
3. New Visitors (pengunjung baru) - Buyers/Authors/Members potensial, yang baru berkunjung
   Memahami situs apa ini / lakukan dengan cepat, memulai, cari tahu jenis file dan harga
4. Member (anggota) - Orang yang bukan benar-benar buyers atau authors, tapi ikut berpartisipasi dalam komunitas
   Ngobrol dengan member lainnya, melihat news situs, browse file
5. Admin / Reviewer - Staf kami yang mengelola approval file, fmoderate forum, dan umumnya berpartisipasi
   Dapatkan dengan cepat untuk file approval, lihat thread forum terbaru, melihat news situs

Bila Anda tahu seperti apa kelompok pengguna yang berbeda, Anda dapat merancang halaman yang menyelesaikan semua kebutuhan mereka. Tak perlu dikatakan ini adalah tugas yang secara eksponensial semakin sulit semakin banyak kelompok dan tugas yang ada. Di halaman lain di situs ini, Anda akan sering mendapatkan subset dari kelompok pengguna yang perlu dikhawatirkan, namun di beranda yang mereka semua konvergensi. Bukan kebetulan, beranda adalah bagian terpenting dari pekerjaan desain yang harus Anda lakukan di situs.

Sebelum Anda dapat mengatasi berbagai kebutuhan, Anda perlu memprioritaskan kelompok pengguna, dan untuk melakukannya, Anda harus memahami apa yang ingin dicapai situs ini.

3. Pahami Sasaran Situs

Meskipun setiap kelompok pengguna secara alami merasa mereka adalah yang paling penting, terserah pada Anda untuk memprioritaskan mereka sesuai dengan apa yang situs itu coba capai. Misalnya pada FlashDen setelah duduk bersama tim kami menarik beberapa kesimpulan sebagai berikut:

• Prioritas utama untuk situs ini adalah untuk melayani pembeli. Ketika pembeli dilayani dengan baik mereka tetap membeli membawa penghasilan dan sekaligus melayani penulis.
• Sangat penting untuk mendapatkan pengunjung baru untuk segera belajar tentang situs ini dan semoga menjadi anggota. FlashDen masih berada di pasar yang relatif baru, dan pesaing baru masih tampil, sehingga membuatnya lebih penting untuk menangkap pengunjung dan mengkonversikannya menjadi pembeli atau penulis atau anggota.
• Penulis penting karena pada intinya FlashDen benar-benar tentang pengarangnya, namun dari semua kelompok pengguna mereka adalah yang paling berkomitmen terhadap situs ini.
• Anggota tidak sepenting Penulis dan Pembeli, namun berkontribusi pada masyarakat sekitar lokasi.
• Admin / Reviewer adalah yang paling tidak penting karena mereka adalah kelompok berbayar.

Jadi, setelah ini, mungkin untuk menyimpulkan bahwa beranda membutuhkan pengguna server dalam urutan ini: Pengunjung > Pembeli > Penulis > Anggota> Admin.

Memahami apa yang ingin dicapai situs Anda adalah untaian akhir yang memenuhi tugas pengguna Anda bersama dan memberi tahu Anda apa yang seharusnya Anda coba taruh di laman. Idealnya pada setiap halaman utama Anda harus mengidentifikasi kelompok pengguna, tugas dan prioritas. Untuk halaman penting seperti homepage saya melakukan ini secara formal di atas kertas, dan untuk halaman yang lebih kecil saya akan sering melakukannya di kepala saya saat merancang.

4. Desain, Perbaiki, Perbaiki, Perbaiki ...

Hanya setelah Anda mengetahui kelompok pengguna, tugas, sasaran, prioritas, dan sebagainya, inilah saatnya merancang! Sangat penting bahwa Anda melakukan ini terlebih dahulu, karena pada tingkat praktis, secara dramatis menurunkan kemungkinan Anda akan kembali dan mengulang desain Anda. Kapan pun saya baru mulai merancang situs besar, tanpa benar-benar menganalisis dulu, saya pasti harus mengolah banyak layar atau bahkan keseluruhan antarmuka.

Banyak perancang suka menggunakan wireframes pada saat ini - yaitu dengan hanya meletakkan sekumpulan garis dan kotak yang menunjukkan kira-kira ke mana harus pergi. Secara pribadi saya lebih suka bekerja di Photoshop sejak awal karena saya cukup cepat dan ini membuat saya benar-benar melihat apa yang akan terjadi. Saya juga berpikir bahwa ada lebih banyak lagi desain informasi daripada di mana sesuatu muncul di halaman. Cukup mengubah warna dan warna latar belakang bisa membuat elemen halaman lebih bawah halaman tiba-tiba terasa lebih penting.

Begitu Anda memiliki gambaran kasar tentang bagaimana informasi tersebut perlu bekerja sama, Anda harus menemukan rancangan kerja yang umumnya baik, kemudian memperbaiki, memperbaiki, memperbaiki. Saya sering akan mengakhiri dengan 5 atau 6 versi dari tampilan yang sama, di mana saya telah mencoba berbagai hal yang berbeda seperti ukuran jenis, gambar, perubahan tata letak, latar belakang, dan sebagainya, untuk melihat bagaimana pengaruhnya terhadap informasi yang Anda tampilkan.

Tidak peduli seberapa baik Anda memikirkan tata letak pertama, saya dapat menjamin bahwa setelah menghabiskan lebih banyak waktu dan menemukan lebih banyak versi, Anda akan menemukan bahwa aslinya tidak begitu bagus seperti yang Anda pikirkan sebelumnya. Terkadang Anda akhirnya membuang seluruh desain dan memulai lagi, tapi jika Anda memiliki dasar yang baik, maka penyulingan akan membuat Anda selesai.

5. Dapatkan Pendapat Orang Lain, tapi Buat Panggilan Akhir

Dalam pekerjaan besar Anda akan memiliki banyak pendapat lain yang terlibat. Dalam kebanyakan kasus, ini akan menjadi opini klien Anda. Sebelum memulai FlashDen, saya dulu bekerja sama dengan semua jenis perusahaan yang membangun situs web. Di antara mereka, saya memiliki kemalangan untuk merancang beberapa perusahaan asuransi besar dan beberapa organisasi pemerintah. Saya mengatakan kemalangan karena ketika Anda sampai ke jumlah klien yang Anda hadapi dengan banyak pemangku kepentingan, dan dalam banyak situasi tidak jelas di mana kekuatan sebenarnya untuk membuat keputusan berbohong. Hal ini dapat berakibat pada pertemuan tanpa henti, perubahan tanpa henti dan tingkat kesulitan yang tinggi dalam membawa visi Anda.

Apapun kliennya, sangat penting untuk mendapatkan pendapat mereka. Selain hal lain, kebanyakan mereka tahu lebih banyak tentang bisnis daripada Anda. Mudah-mudahan mereka juga tahu lebih banyak tentang pengguna daripada Anda, dan dengan pengetahuan ini akan bisa memberikan saran yang membangun.

Penting juga untuk mendapatkan pendapat dari tim pengembang tempat Anda bekerja. Di FlashDen kita beruntung memiliki dua devs yang memiliki banyak keahlian dalam desain dan kegunaan user interface. Dan masukan mereka, bersama dengan anggota tim lainnya, membuat banyak perbedaan pada produk akhir.

Tapi pada akhirnya, terserah Anda sebagai perancang ahli untuk datang dengan panggilan terakhir. Jika Anda memiliki klien yang tangguh, ini bisa menjadi rumit, karena klien sering percaya bahwa mereka harus melakukan panggilan terakhir. Jika demikian, Anda perlu (a) menemukan cara untuk menjelaskan, mendidik, dan menunjukkan kepada klien bahwa pilihan Anda adalah untuk keuntungan mereka; dan (b) kadang-kadang menggigit peluru dan menerima arahan klien sebagai kendala lebih lanjut dalam proyek Anda, dan menemukan cara untuk membuatnya berhasil.

6. Atur untuk Masa Depan

Bila Anda merancang sebuah desain untuk situs besar, sangat penting untuk memikirkan kembali masa depan. Bagaimana Anda mengelola file dan folder Anda akan sangat mempengaruhi Anda nantinya. Sebagai contoh baru-baru ini kami telah memutuskan untuk membangun situs sister ke FlashDen yang berfokus pada audio yang hanya disebut AudioJungle. Untuk mempermudah situs ini akan menjalankan HTML yang sama, hanya dengan stylesheet yang membuatnya terlihat seperti situs yang berbeda. Perkembangan seperti itu menimbulkan berbagai tantangan baru pada struktur file dan folder saya, stylesheet saya dan HTML saya. Berikut adalah beberapa hal yang perlu diingat:

1. Atur diri Anda ke dalam struktur folder yang bagus
   Skrip, stylesheet, gambar antarmuka, gambar konten, dan sebagainya, semua perlu disimpan secara terpisah. Dengan situs kecil Anda mungkin hanya bisa membuang barang bersama-sama, tapi semakin besar semakin penting Anda untuk bisa menemukan yang Anda butuhkan.
2. Gunakan sistem penamaan yang koheren dan cerdas untuk file Anda
   Tidak ada yang lebih buruk daripada melihat setumpuk gambar dengan nama seperti "gd_l3.jpg". Bagaimana Anda melakukannya sebagian besar adalah masalah pribadi, tapi saya menemukan penamaan menggunakan awalan umum dan nama file deskriptif sangat membantu. Jadi misalnya saya bisa memulai setiap gambar yang ada di header dengan kata 'header_', setiap background dengan 'bg_' dan kemudian background menu dari header akan disebut 'header_bg_menu.jpg'. Awalan memiliki keuntungan bahwa ketika file Anda diurutkan berdasarkan nama, semuanya akan muncul bersamaan.
3. Gunakan Subversion
   Ini dipaksakan pada saya oleh pengembang kami, tapi syukurlah itu! Subversion melacak file dan file berubah dan menghentikan Anda dari menimpa perancang / pengembang lain yang mengerjakan proyek yang sama. Juga penting ini membantu Anda memutar kembali ke versi lama. Dibutuhkan beberapa membiasakan diri, tapi bahkan minus semua alasan pengembang menggunakannya, ini bermanfaat bagi perancang HTML / CSS. Tidak tahu tentang Subversion? Simak Subversion untuk Desainer
4. Jadilah bijaksana tentang bagaimana Anda menulis HTML dan CSS Anda
   Ini sangat mudah untuk membuat berantakan dengan file HTML dan CSS Anda, dan sangat sulit untuk membersihkannya kembali. Setelah empat perancangan ulang, saya masih menggunakan banyak file CSS yang sama dan ini adalah misi membersihkan kelas yang tidak digunakan lagi atau menemukan definisi yang tidak jelas yang terbungkus dalam banyak layer. Gunakan banyak komentar, bahkan mungkin beberapa stylesheet, dan pastikan Anda memberi nama gaya Anda dengan baik!
   
   
5. Dapatkan Kompatibilitas Browser yang bekerja dengan AWAL
   Ini adalah area yang saya benar-benar salah dengan FlashDen dan kami telah membayarnya sejak saat itu. Tata letak awal saya bekerja di IE7 dan saya mengabaikan IE6 sampai setelah selesai membangun keseluruhan situs. Sejak kita telah menambahkan conditionals IE, dan hacks dan workarounds. Ini jauh lebih mudah untuk membuat sesuatu yang kompatibel bila hanya ada beberapa elemen pada halaman daripada saat Anda membangun situs besar, jadi jangan ikuti kebodohan saya!

7. Buatlah Mudah Dikembangkan Dengan Stylesheet Anda

Semakin besar situs, semakin kecil kemungkinan seorang desainer bisa melihat atau memodifikasi setiap halaman. Jika Anda seorang desainer tunggal di situs besar - seperti saya - maka Anda juga mungkin tidak ingin dipanggil untuk segala hal. Jadi, membayar untuk membuat stylesheet yang hampir bisa membuat barang terlihat bagus. Sebagai contoh:

1. Pastikan elemen default gaya seperti <input>, <strong>, dan seterusnya
   Dengan cara itu halaman akan secara otomatis hadir dengan baik. Jika Anda bergantung pada orang-orang yang melakukan hal-hal seperti <strong class="my_bold"> maka pasti Anda akan berakhir dengan varians pada halaman.
2. Buat elemen yang bisa digunakan kembali yang bisa digunakan pengembang.
   Sebagai contoh pada FlashDen kita memiliki kelas tabel yang disebut "general_table", yang membuat gaya fall-back yang bagus untuk data. Ketika saya memiliki kesempatan untuk membuat sebuah halaman, saya bisa melakukan beberapa jenis tabel dan penyorotan data yang lebih spesifik, namun setidaknya pengembang menyusun halaman memiliki gaya meja bundar yang bagus untuk digunakan.
3. Pastikan tata letak halaman Anda memiliki struktur yang terlihat bagus bahkan saat itu hanya mendapat teks di dalamnya.
   Tak pelak lagi akan ada halaman yang belum sempat Anda tambahkan gambar, dan yang mungkin terlihat sedikit membosankan. Dengan menggunakan hal-hal seperti heading style, sidebars, dan sebagainya, Anda dapat memastikan bahwa mereka tetap terlihat menyenangkan dan memiliki beberapa gaya visual. Misalnya pada FlashDen kita membungkus sebagian besar blok teks di:

   <fieldset>
   <legend>Heading</legend>
   Content
   </filedset>

   Dan ini secara default membungkus teks dengan sedikit perbatasan bagus di sekelilingnya dan sebuah judul. Sangat mudah bagi pengembang untuk bekerja sama dan melakukan pekerjaan dengan baik untuk memisahkan teks dan membuatnya terlihat lebih mudah dibaca. Kami juga memiliki komponen sidebar yang merupakan paket lain untuk konten teks tambahan, namun sekali lagi membuat halaman terlihat lebih visual.

Tentu saja optimal jika setiap halaman melewati perancang, tapi juga kurang stres karena mengetahui bahwa meskipun tidak melakukannya, printer tetap akan terlihat profesional dan seragam.

Apa pendapat anda?

Jadi itulah tip saya, jika Anda memiliki beberapa dari Anda sendiri untuk bekerja di situs yang lebih besar, tinggalkan komentar!