Apa langkah-langkah dalam mendesain situs web?

Memanggil semua Desainer Web :)

Saya mulai membuat situs web untuk bisnis kecil di kota asal saya dan itu akan menjadi proyek pertama saya yang layak. Saya telah membuat situs di masa lalu, yang telah saya lakukan untuk bersantai. Saya fasih dalam HTML dan CSS. Saya sudah mendapatkan persyaratan klien dan apa yang dia inginkan di situs web dll. Saya terjebak pada langkah apa yang harus saya ikuti setelah menyelesaikan persyaratan. Saya telah mencari di web dan tidak dapat menemukan apa pun yang relevan dengan pertanyaan saya karena infonya sudah usang.

Pertanyaan saya adalah:

Apa alur kerja desainer web di tahun 2014? (Karena semuanya berubah begitu cepat) Apakah saya membuat wireframe situs dan kemudian mendesainnya di photoshop dan kemudian kode desain?

Saya hanya ingin tahu bagaimana proses "desain" bekerja, seperti langkah apa yang perlu saya ambil untuk membuat situs web.

Terima kasih sebelumnya.

Penemuan dan Lingkup

Duduk bersama klien untuk menentukan, tujuan, tujuan, dan kebutuhan. Anda harus menyusun kutipan dari situs yang dituju dan juga mendiskusikan waktu pembalikan. Pastikan Anda telah menulis apa pun yang diperlukan yang tidak dapat Anda berikan. Anda perlu mengetahui bagaimana situs akan disusun. Seperti responsif, hanya tablet dan telepon, desktop saja, desktop dan tablet saja. Anda perlu mengetahui apakah desain tersebut merupakan target desain multi-fase, seperti klien akan ingin merilis versi desktop dan ingin aplikasi seluler lengkap nanti.

Pemetaan Konten

Semoga Anda telah diberi semua konten yang diinginkan untuk situs tersebut. Anda harus memetakan situs dan fungsinya. Putuskan bagaimana skalabilitas untuk modifikasi di masa mendatang, putuskan bagaimana kode dapat disusun jika untuk CMS atau aplikasi.

Contoh:

Maket

Setelah "pohon" atau "peta" Anda selesai dengan persetujuan klien, saya akan mengerjakan sketsa tangan atau alat mockup. Ada sejumlah besar pertanyaan tentang topik ini jika Anda melakukan pencarian di kanan atas

Contoh:

Genteng Gaya

Merancang dalam Photoshop untuk desain web mengalahkan tujuan zaman sekarang. Saya tidak tahu banyak orang yang masih menggunakan Photoshop karena jumlah waktu yang Anda perlukan untuk membuat tombol mewah Anda bisa menghabiskan waktu yang sama dan kode di browser. Jika saya harus menggunakan aplikasi per permintaan khusus, saya akan menyebarkannya di Illustrator atau InDesign. Saya menyarankan migrasi untuk merancang ubin gaya seperti:

Dengan tujuan ubin Anda tidak memberikan klien desain dan menempatkan diri Anda di sudut "ini tidak terlihat seperti desain yang Anda berikan kepada saya". Juga, jika Anda merencanakan situs, tidak ada alasan untuk menghabiskan waktu meletakkannya di Photoshop untuk responsif karena Anda akan menghabiskan banyak waktu merancang untuk perangkat tertentu, dll. Jika Anda HARUS merancang situs lengkap, saya akan pertimbangkan Illustrator, seperti yang disebutkan, untuk SVG-nya dan kemampuan untuk mengekspor elemen untuk situs Anda dibandingkan dengan Photoshop. Pada tingkat tertentu Anda bahkan dapat menggunakan InDesign untuk memformat konten, tetapi saya hanya akan menggunakan Photoshop untuk manipulasi gambar dan jika saya akan melakukannya saya mungkin akan roll dengan ImageMagick. Saya mengambil Tile Style lebih jauh dari yang lain dan mengkodekannya ke dalam satu halaman jadi saya telah merobohkan tugas awal dari tuan saya.css mengajukan.

Wireframe

Saya lebih suka menggunakan desain di browser jika Anda belum menyadarinya. Sekarang hari ini saya dapat menggunakan Illustrator untuk sketsa situs atau maket situs tetapi saya biasanya menggunakan .cssfile templat default dengan tidak lebih dari 6 warna dalam skala abu-abu dan saya memberi kode segalanya untuk struktur situs karena kebanyakan orang tidak dapat dapatkan pemahaman desain dan menginginkan sesuatu untuk dimainkan. Saya kadang-kadang maju dan melakukan ini dalam PHP karena lebih mudah digunakan untuk CMS. Saya kemudian akan mengembangkan sub-domain sederhana dengan font yang DISEDIAKAN klien dengan cara hitam dan putih sehingga seluruh fungsi situs hadir dan mereka dapat melewatinya. Karena saya belum menghabiskan waktu menambahkan semua konten atau warna (karena saya menggunakan referensi teks boneka: "Alternatif untuk Lorem Ipsum (teks boneka) untuk situs web") Saya dapat dengan mudah memodifikasi setiap perubahan yang ada jika mereka tidak menyukai elemen tertentu berdasarkan perangkat.

Pewarnaan dan konten

Setelah klien menandatangani struktur situs dan fungsionalitas, saya akan menulis sisa CSS dan menambahkan animasi yang diminta atau spesifik JavaScript. Karena saya telah menyetujui ubin gaya dan jika saya mengembangkannya dengan benar, saya cukup menyalin CSS dan mengaturnya.

Debug, Debug, Debug

Langkah terakhir sebelum klien sign-off adalah debug dan pastikan kode saya solid tanpa kesalahan. Jika semuanya benar saya harus memiliki rilis yang lancar. Langkah ini juga mencakup pengujian penyajian dan pengujian beban, jika itu yang Anda hargai dan tawarkan. Secara pribadi, saya sangat percaya bahwa setiap desainer harus menyadari apa yang mereka kembangkan seperti yang Anda harapkan, semoga, lakukan ketika datang ke desain cetak. Jika klien tidak mampu membeli penyedia hosting sejati, itu dapat membatasi kinerja situs dan semua yang mereka katakan itu adalah kesalahan Anda dan Anda melakukan sesuatu yang salah.

Latihan

Saya biasanya mengajukan penawaran dalam pelatihan singkat / kutipan saya di situs CMS. Beberapa pengguna tidak tahu apa yang mereka lakukan, jadi saya akan menawar untuk sore dengan satu jam lebih untuk pertanyaan setelahnya untuk memastikan memeriksa apa pun atau memastikan mereka menggunakan desain saya dengan kemampuan maksimal.

Beberapa topik lain yang mungkin membantu karena Anda mengajukan pertanyaan dasar:

• Apa perbedaan antara wireframes dan mockup?
• Bagaimana cara menyajikan maket desain web kepada klien?
• Apa praktik "mocking-up" yang bagus dalam desain web?

Saya juga seorang desainer web yang baru saja mulai di bidang ini. Saya telah melakukan beberapa proyek sekarang. Bagi saya, alur kerja saya seperti ini:

1. Pertemuan Desain & Pengembangan Awal
   Inilah saat saya mengumpulkan semua informasi yang relevan, termasuk tanggal penyelesaian yang diharapkan, membuat daftar barang yang dibutuhkan dari klien saya, dll.
   
2. PhotoShop Mockups
   Saat ini, saya menemukan satu atau dua desain yang pas untuk klien saya dan membuat mockup di Photoshop menggunakan branding, warna, gaya, dll. Saya mengirim ini dan membahas apa yang harus diubah / disimpan pada masing-masing , lalu biarkan klien memutuskan desain mana yang paling mereka sukai.
   CATATAN: Jika Anda menggunakan WordPress untuk membangun, Anda dapat mengunjungi http://themeforest.comdan periksa banyak tema. Dari sana, Anda dapat mengambil tangkapan layar dan melakukan mockup, lalu Anda juga dapat memberikan demo langsung (tanpa kustomisasi klien, tentu saja). Jika klien Anda menyukai salah satu dari maket ini, Anda kemudian membeli tema dan dapat mengubah apa pun yang Anda butuhkan. Inilah yang cenderung saya lakukan. Saya tidak pernah menggunakan tema (atau apa pun juga) tanpa memberikan kredit / pembayaran yang sesuai / dll. untuk pencipta asli. :)
   
3. Pengembangan
   Kemudian saya akhirnya mulai benar-benar mengembangkan situs dalam lingkungan pengembangan (BUKAN situs web langsung klien, tetapi subdomain jika mungkin - IE dev.clienturl.com) Saya mengirim pembaruan ke klien saya setiap kali saya merasa halaman semakin dekat untuk menyelesaikan, dengan cara itu jika ada masalah, kita dapat memperbaikinya segera.
4. SELALU IKUTI
   Bahkan setelah situs web klien Anda telah tayang dan mereka tampaknya puas dan belum meminta perubahan lebih lanjut, pastikan untuk menindaklanjutinya. Pastikan semuanya berfungsi sebagaimana mestinya, sesuai harapan mereka. Saya juga merekomendasikan menulis survei kecil untuk setiap klien untuk menyelesaikan setelah situs web telah ditayangkan selama sekitar satu minggu. Anda dapat menggunakan komentar dari sini sebagai testimonial di situs web Anda.

Jika Anda memerlukan bantuan apa pun, hubungi saya melalui situs web saya. Saya memiliki banyak sumber daya yang dapat saya bagikan dengan Anda untuk hal-hal seperti kontrak, survei pasca-produksi, kuesioner awal, dll. Http://anchorsawaydesigns.com/

coba dan dapatkan info sebanyak mungkin dari awal, lalu ikuti pendekatan bertahap yang mirip dengan di bawah ini. Cobalah dan beri tahu klien Anda sebanyak mungkin, karena Anda tidak ingin mengembangkan sesuatu secara terpisah hanya untuk mengetahui kemudian bahwa itu tidak memenuhi harapan mereka. Jika Anda berinvestasi dalam alat wireframing yang baik (saya menggunakan balsamiq) maka setengah dari pekerjaan dilakukan untuk Anda.

1. Pengumpulan persyaratan
2. Wireframing
3. Desain maket
4. Desain selesai
5. Pengembangan
6. Hosting

Semoga berhasil.

Hai kawan, bagus Anda memulai proyek baru.

Langkah-langkah untuk Kebutuhan Anda:

1. pertama Anda Putuskan teknologi apa yang ingin Anda gunakan untuk proyek Anda yang saya maksud adalah satu halaman bergulir, beberapa halaman dll

2. Kemudian, siapkan sketsa untuk tata letak dan alur kerja Anda.

3. Sekarang mulai merancang tata letak Anda di alat yang Anda suka saya lakukan dengan photoshop tetapi Anda dapat menggunakan keinginan Anda.

4. Setelah itu ada baiknya Anda menunjukkan tata letak Anda ke klien untuk setiap perubahan yaitu. warna, font dll agar Anda tidak membuat sakit kepala pada saat html.

5. Sekarang, Setelah konfirmasi klien. Saatnya memulai pengkodean dengan Html dan Css.

6. Setelah itu saatnya untuk meneruskannya ke Pengembang untuk pengkodean berbasis Bahasa Selanjutnya yaitu. PHP, .Net dll.

Nikmati............

Dalam industri Web, untuk merampingkan proses pengembangan Anda, Perancangan dilakukan, dan sebelum desain akhir disajikan untuk dikembangkan lebih lanjut atau diuji, beberapa langkah menengah lainnya terlibat:

Langkah 1: Mendapatkan Inspirasi:

Jika Anda terus mengamati apa yang dilakukan perancang atau situs lain untuk kerangka gambar mereka, Anda akan perlahan mendapatkan gambaran dalam benak Anda tentang bagaimana kerangka gambar membantu mengatur informasi untuk layar.

dan untuk itu Anda dapat menggunakan alat Wireframing "Wirify", cukup tambahkan tautan besar ke bookmark Anda dan dapatkan situs web yang diinginkan, klik bookmark, Anda akan melihat situs web berubah menjadi bingkai gambar.

Langkah 2: Merancang Proses Anda:

Desainer yang berbeda mendekati penyadapan dan terjemahannya ke visual atau kode dengan cara yang berbeda,

Di sini bukan hanya perancang yang memilih jalan yang harus diikuti, kadang-kadang klien lebih memilih untuk langsung membuat maket, dan beberapa lebih suka secara sistematis,

Sketsa => Wireframe => Mockup => Kode

Langkah 3: Membuat Sketsa:

Sekarang ketika Anda terinspirasi memiliki beberapa ide kasar dan perencanaan pendekatan, itu selalu baik untuk memulai dengan membuat sketsa, tidak peduli seberapa baik Anda mengendalikan mouse / stylus atau apa pun yang Anda gunakan, mereka tidak dapat mengalahkan kertas, pensil di kesederhanaan.

Membuat sketsa tangan di atas kertas selalu merupakan titik awal yang baik untuk setiap desainer. Ini memberikan cara cepat dan mudah untuk fokus dan mengatur. Jika Anda sangat tepat membuat sketsa, Anda bahkan bisa menggunakan ini sebagai gambar rangka akhir Anda.

Langkah 4: Wireframing:

Membuat kerangka gambar adalah salah satu langkah pertama yang harus Anda ambil sebelum mendesain.

Bingkai gambar membantu Anda mengatur dan menyederhanakan elemen dan konten di dalam situs web dan merupakan alat penting dalam proses pengembangan.

Bingkai gambar pada dasarnya adalah representasi visual dari tata letak konten dalam suatu desain .

Seperti fondasi bangunan, bangunan itu harus kuat secara fundamental sebelum Anda memutuskan apakah akan memberinya lapisan cat yang mahal.

Pilih Alat Anda

Berikut adalah daftar 10 alat bantu Wireframing Gratis untuk Desainer dari Mashable

Mengatur Grid

Kisi sangat diperlukan untuk mencapai desain simetris dan paralel.

setiap kali Anda melihat situs web yang dirancang dengan baik, Anda akan menemukan bahwa kontennya dimulai dari titik tertentu di badan dan berakhir pada satu, yang dikelola dengan menggunakan grid.

Tentukan Tata Letak Dengan Kotak

Tetapkan Hierarki Informasi Dengan Tipografi

Apa yang Harus Dihindari Saat Melakukan Wireframing:

• Terlalu banyak yang terjadi pada halaman.
• Penekanan pada warna dan desain
• Terlalu banyak detail

Membuat kerangka gambar memberi klien, pengembang, dan desainer peluang untuk melihat secara kritis struktur situs web dan memungkinkan mereka membuat revisi dengan mudah sejak awal dalam proses.

Wireframing membawa manfaat utama berikut:

Langkah 5: Maket / Visual:

Sekarang Wireframe akhir dapat dikonversi ke maket final atau Visual:

Beberapa alat umum untuk Mockuo adalah Adobe photoshop, Corel Draw dan Sketch yang sangat baru tetapi sudah populer, dll.

Hierarki Informasi

Anda mungkin perlu mempertimbangkan apa yang harus disorot dan apa yang menjadi informasi sampingan, dan skema warna, penentuan posisi ulang, dan tipografi sudah ditentukan.

Tipografi

Pilih tipografi yang menarik secara visual dan mudah dibaca untuk situs web dengan kombinasi alternatif yang tepat. Ukuran font, berat dan warna memainkan peran penting dalam keterbacaan.

Skema Warna

Skema warna yang mewakili Identitas Merek dan warna psikologis sebagai Merah untuk bahaya, hijau untuk Sukses, dll.

Langkah 6: Prototipe :

Sebuah prototipe adalah contoh, model, atau rilis awal produk dibangun untuk menguji konsep atau proses atau bertindak sebagai sesuatu yang harus direplikasi atau belajar dari.

Wireframes menangani struktur, maket menangani visual, dan prototipe menangani kegunaan (dalam produk web / aplikasi).

Sebuah produk prototipe dibuat dan kemudian ini diuji dan POC (Prof of concept) selesai, Sekarang kita dapat menuju ke produk Real (jelas jika tidak ada perubahan yang diperlukan)

Tautan ke artikel asli dengan gambar dan tautan lainnya