Langkah-Langkah yang Harus Diikuti Saat Mendesain Situs Web Baru

Diterbitkan: 2021-04-19

Desain web yang hebat adalah tentang menggabungkan estetika yang hebat dengan fungsionalitas yang luar biasa. Untuk mencapai situs web yang dirancang dengan cemerlang, Anda memerlukan berbagai keterampilan, sedikit bakat kreatif, dan beberapa organisasi di awal!

Panduan ini bertujuan untuk membantu Anda membuat situs web yang brilian. Salah satu yang tampak hebat dan bekerja lebih baik. Kami akan menjalankan beberapa langkah kunci yang perlu Anda ambil untuk mencapai situs web terbaik yang Anda bisa. Mari kita mulai!

Tujuan dan Penelitian

Sebelum Anda turun ke bagian kreatif dari proses desain web, ada beberapa hal yang harus Anda buat terlebih dahulu. Kuncinya adalah memahami audiens target Anda. Ini sangat penting. Lagi pula, tidak ada gunanya menuangkan waktu dan uang ke situs web yang tidak memenuhi kebutuhan demografis target Anda.

Langkah pertama ini bisa sangat rumit. Sangat mudah untuk berasumsi bahwa Anda tahu apa yang diinginkan audiens Anda. Namun meluangkan waktu untuk benar-benar meneliti ini di awal dapat menghemat banyak bolak-balik di kemudian hari dalam proyek dan meningkatkan peluang situs web Anda menjadi sukses. Dan jangan lupa, jika Anda mendesain situs web untuk klien, pastikan Anda melibatkan mereka dalam proses ini!

Beberapa poin penting yang mungkin ingin Anda pertimbangkan, terutama jika situs web tersebut untuk klien adalah sebagai berikut:

Apakah situs web merupakan item yang berdiri sendiri atau merupakan bagian dari strategi pemasaran yang lebih komprehensif?
Apakah sudah ada merek yang kuat – jika demikian, penting bahwa situs web mencerminkan hal ini. Ini terkadang menjadi hal yang sulit untuk dilakukan karena godaannya mungkin untuk fokus pada tren desain modern yang tidak selalu sesuai dengan gaya yang sudah ditetapkan oleh sebuah merek. Meskipun penting bahwa situs baru tidak terlihat ketinggalan zaman sejak awal, itu juga tidak dapat menyimpang terlalu jauh dari prinsip-prinsip desain inti yang telah ditetapkan oleh suatu merek (kecuali jika merek tersebut bersedia melakukan perombakan total terhadap citra mereka).
Hal ini juga sangat penting untuk melihat pesaing Anda atau klien Anda. Identifikasi kekuatan dan kelemahan mereka untuk memastikan situs baru Anda menggabungkan semua yang dibutuhkan untuk menjadi sukses. Melihat kompetisi juga dapat membantu karena dapat memastikan Anda tidak melewatkan fitur atau fungsi yang berpotensi vital.

Setelah penelitian Anda selesai, Anda sekarang harus merasa yakin bahwa setiap situs baru yang Anda desain akan memenuhi persyaratan klien Anda (atau Anda sendiri tentu saja!). Penelitian terkadang terasa membosankan, terutama ketika Anda merasa diri Anda penuh dengan kreativitas dan keinginan untuk mulai menampilkan sesuatu yang nyata di layar bisa menjadi luar biasa. Jangan lewatkan langkah ini, betapapun menggodanya. Ini dapat menghemat BANYAK waktu di masa depan.

Linimasa

Membuat garis waktu untuk pekerjaan yang diperlukan untuk menyelesaikan situs web, meskipun tidak wajib, sangat disarankan. Tonggak sejarah dalam garis waktu dapat membantu Anda mengklarifikasi proses yang diperlukan untuk beralih dari halaman kosong ke situs web yang telah selesai dan dapat membantu dalam mengutip secara akurat untuk proyek di awal. Untuk situs yang lebih besar, garis waktu dengan pencapaian akan memungkinkan Anda untuk membagi pekerjaan di antara anggota tim Anda secara lebih efisien, dengan semua orang dapat melihat bagaimana pekerjaan mereka (dan tenggat waktu!) sesuai dengan gambaran keseluruhan.

Akan berguna untuk menggunakan alat seperti Asana untuk membantu proses ini. Dengan hati-hati memecah setiap elemen dari situs web yang dibangun menjadi tugas akan memastikan bahwa tidak ada yang lolos dan memungkinkan Anda untuk lebih percaya diri memberikan tanggal penyelesaian situs web kepada klien. Jika situs web baru akan menggantikan situs web yang ada, maka jangan lupa untuk mengatur waktu untuk mengelola transisi 'tayangkan langsung' di mana Anda mungkin perlu melakukan pengalihan dari halaman lama ke halaman baru dan seterusnya.

Terakhir, selalu ingat untuk memenuhi janji dan memberikan lebih. Situs web, seperti kebanyakan proyek, selalu membutuhkan waktu lebih lama dari yang mungkin Anda perkirakan pada awalnya, jadi aturan praktis yang baik adalah menambahkan 20% waktu lainnya ke perkiraan awal untuk membantu memastikan Anda tidak jatuh ke dalam jebakan lama untuk menemukan diri Anda berlari. waktu yang singkat (dan karenanya cenderung melewatkan tenggat waktu) sejak awal.

peta situs

Langkah selanjutnya dalam proses desain adalah membuat peta situs. Meskipun situs Anda kecil, senang memilikinya. Peta Situs tidak hanya membantu Anda sepenuhnya memvisualisasikan tata letak situs baru (dan karenanya memastikan Anda tidak melewatkan sesuatu yang penting atau memiliki struktur navigasi yang membingungkan) tetapi juga pada akhirnya membantu Google merayapi situs Anda saat ditayangkan yang dapat membantu meningkatkan SEO.

Beberapa desainer dengan senang hati membuat sketsa peta situs menggunakan alat ilustrasi favorit mereka, tetapi Anda dapat menggunakan alat peta situs khusus seperti WriteMaps untuk membuat hidup Anda lebih mudah.

Gambar rangka, Mockup & Prototipe

Wikipedia mendefinisikan wireframe situs web sebagai 'panduan visual yang mewakili kerangka kerangka situs web'. Membuat wireframe situs web biasanya merupakan langkah pertama saat mendesain situs web karena membantu Anda mendapatkan kejelasan penting tentang tata letak situs. Wireframes juga merupakan alat yang hebat untuk digunakan ketika mendiskusikan situs baru dengan klien dan tim Anda karena mereka memberikan visualisasi yang jauh lebih nyata dari desain yang diusulkan tetapi, yang terpenting, dapat dibuat jauh lebih cepat daripada mockup halaman yang sebenarnya. Hal ini memungkinkan para pemangku kepentingan untuk mengkritik sebuah desain sebelum berjam-jam ditenggelamkan ke dalam situs.

Mockup membawa wireframe ke level berikutnya. Beberapa desainer dapat memilih untuk membuat mockup 'tulang telanjang' dari situs yang merupakan versi wireframe yang sedikit lebih disempurnakan (mungkin menempel pada skala abu-abu) sementara yang lain memilih untuk membuat mockup lengkap yang mencakup gambar, warna, dan bahkan beberapa fungsi. Seberapa jauh Anda ingin mendorong mockup Anda akan bergantung pada seberapa yakin Anda dengan desain yang Anda usulkan. Jika Anda merasa bahwa klien mungkin masih ingin mengubah sebagian besar desain situs, maka jelas masuk akal untuk menjaga mockup sesederhana yang diperlukan untuk menyampaikan desain/fitur yang diusulkan.

Setelah Anda dan klien Anda yakin dengan desainnya, maka Anda dapat membuat mockup lengkap yang sepenuhnya menunjukkan desain halaman atau keseluruhan situs web.

Ada banyak alat online yang secara signifikan dapat mempercepat proses mockup. Ini termasuk Mockflow dan Moqups yang keduanya dapat membawa Anda dari gambar rangka hingga ke mockup situs web lengkap.

Bahkan jika mockup tidak memungkinkan Anda untuk sepenuhnya menyampaikan fungsi situs web, itu memastikan bahwa Anda, tim Anda, dan klien semuanya 100% pada halaman yang sama dalam hal desain situs. Dan, seperti yang akan diketahui oleh siapa pun dari kita yang mengkode situs untuk mencari nafkah, jauh lebih mudah untuk mengubah desain situs dalam mockup daripada di situs final itu sendiri!

Langkah terakhir yang mungkin ingin Anda ambil adalah membangun situs web prototipe. Secara tradisional ini akan memakan waktu (dan hampir sama dengan membangun situs akhir itu sendiri). Namun berkat alat seperti Framer, sekarang lebih mudah dari sebelumnya untuk membawa maket Anda ke tingkat berikutnya dengan memperkenalkan elemen fungsional ke dalam desain maket yang memungkinkan klien untuk benar-benar mendapatkan 'perasaan' tentang bagaimana situs akan bekerja.

Sebagai catatan terakhir untuk bagian ini, perlu diingat bahwa terlalu banyak pilihan bisa menjadi hal yang buruk. Pada akhirnya, apa pun yang dikatakan klien, Anda adalah pakar desain dan dalam hubungannya dengan tim Anda kemungkinan besar akan memahami apa yang akan memberikan hasil optimal dalam desain situs web. Karena itu, terkadang lebih baik untuk menampilkan warna dan tata letak yang menurut Anda akan bekerja paling baik dan tidak membingungkan berbagai hal dengan juga menyediakan berbagai opsi yang dapat dipilih klien. Ini menghindari klien berakhir 'memilih dan memilih' dari elemen yang, digabungkan, mungkin tidak kompatibel. Lebih sedikit pasti bisa lebih kadang-kadang!

Menulis Konten Hebat

Tidak peduli seberapa bagus desain website, pada akhirnya tidak ada artinya jika salinan di situs tidak menyampaikan pesan yang diinginkan. Karena itu, merupakan praktik yang sangat baik untuk melibatkan copywriter dalam proyek sejak awal. Mereka dapat membantu membuat konten yang benar-benar akan melibatkan pembaca dan Anda kemudian dapat bekerja dengan mereka untuk memastikan ini ditempatkan di situs secara optimal.

Misalnya, copywriter dapat membuat tag line yang luar biasa yang menyampaikan produk/layanan dalam satu kalimat. Ini jelas merupakan informasi penting tetapi jika Anda hanya melibatkan copywriter pada tahap akhir proyek, Anda mungkin menemukan bahwa Anda tidak mendesain di lokasi yang sesuai untuk menampilkan teks ini. Jelas itu akan menjadi kesalahan besar.

Copywriting adalah elemen situs web yang sering diabaikan. Kita semua tersedot ke dalam daya tarik visual tetapi salinan bisa menjadi tambahan 'menit terakhir' yang tidak menguntungkan siapa pun.

Alasan lain untuk melibatkan copywriter sejak awal (jika Anda ragu) adalah untuk memastikan bahwa situs tersebut dioptimalkan dari perspektif SEO. Salinan dapat membuat atau merusak SEO situs web, jadi jika menurut Anda itu tidak penting, pikirkan lagi! Dengan menggunakan kata kunci dan frasa kunci dengan cara yang benar, kemungkinan besar mesin pencari Anda akan memberi Anda prioritas lebih tinggi di SERP. Ada beberapa alat hebat untuk membantu meningkatkan SEO Anda seperti Google Keyword Planner, Screaming Frog's SEO Spider, Google Trends, dan lainnya.

Dan jika Anda tidak memiliki kemewahan untuk mempekerjakan seorang copywriter dan berpikir untuk 'melakukannya sendiri' maka Anda mungkin ingin melihat beberapa sumber daya dan alat menulis yang dapat membuat hidup Anda lebih mudah. Alat pertama yang layak untuk dilihat adalah Grammarly yang merupakan asisten penulisan yang mudah digunakan. Grammarly dapat membantu Anda menghindari kesalahan ketik dan juga meningkatkan cara teks Anda diformat (dari perspektif linguistik) membantu memastikan salinan Anda dapat dibaca semudah mungkin.

Yang kedua yang kami sarankan untuk dilihat adalah lebih sedikit alat dan lebih banyak sumber daya pemasaran yang disebut Storybrand. Storybrand menjalankan lokakarya yang membantu Anda 'mengklarifikasi pesan Anda'. Dengan demikian, kesuksesan situs web Anda dapat meroket dengan meningkatkan pesan yang disampaikannya tentang bisnis Anda dengan istilah yang jelas dan tidak ambigu. Jika bengkel mereka terlalu mahal maka periksa buku tentang kerangka pemasaran mereka.

visual

Hal pertama yang kemungkinan besar akan membentur otak pengunjung situs web adalah visual di situs web! Tak perlu dikatakan bahwa ini karena itu cukup penting.

Tidak diragukan lagi sebagai seorang desainer, Anda akan memiliki pemikiran konkret tentang jenis visual yang ingin Anda gunakan. Ini mungkin berkisar dari gambar animasi hingga foto produk atau foto yang mewakili merek dan produk mereka. Apa pun yang Anda pilih untuk digunakan, pastikan visual ini berkualitas tinggi atau semua upaya Anda yang lain akan sia-sia.

Visual adalah area utama di mana Anda dapat berharap untuk benar-benar membedakan diri Anda dari kompetisi. Jangan biarkan kesempatan ini sia-sia! Sebelum mengutip dan menerima proyek, pastikan Anda mendiskusikan visual yang ingin Anda gunakan dengan klien. Cari tahu apakah mereka memiliki perpustakaan gambar internal yang dapat Anda gunakan, atau mungkin mereka berencana melakukan pemotretan untuk mendapatkan citra yang diperlukan. Jika tidak, dan tidak memiliki gambar dengan kualitas yang sesuai, dapatkah Anda menemukan gambar 'generik' yang wajar dari perpustakaan foto seperti Shutterstock?

Terakhir, selama tahap pengembangan, pastikan Anda memperhatikan ukuran gambar-gambar ini dan pastikan mereka dioptimalkan agar tidak memperlambat situs. Menggunakan alat seperti TinyPNG layak dilakukan atau sebagai alternatif, host Anda mungkin menyediakan layanan yang setara seperti alat Image Smacking yang kami gunakan di Pressidium.

Dengan tata letak yang lengkap, salin tulisan dan gambar yang sesuai di tempat Anda telah mencapai tonggak sejarah yang menarik… pengembangan! Mari kita lihat apa yang diperlukan dan beberapa jebakan yang harus diwaspadai.

Perkembangan

Kecuali jika Anda menangani sendiri pembangunannya, maka inilah saatnya untuk mengirimkan desain situs kepada pengembang Anda agar mereka dapat melakukan pekerjaan mereka. Semakin jelas desain Anda dan juga deskripsi fitur tambahan apa pun yang Anda perlukan, maka semakin mudah bagi pengembang untuk menghadirkan situs yang Anda visualisasikan. Di sinilah situs prototipe yang dibuat menggunakan alat seperti Framer benar-benar dapat muncul dengan sendirinya.

Selama pembangunan, banyak pengembang akan menyediakan tautan pengembangan yang dapat diteruskan ke klien sehingga mereka dapat melihat pratinjau bagaimana pembangunannya. Sepintas, ini tampak seperti ide yang bagus karena selalu menyenangkan untuk dapat menunjukkan bahwa pekerjaan sedang berlangsung (terutama jika klien menumpuk pada tekanan untuk menyelesaikan situs!). Banyak pengembang cenderung membuat beberapa tautan pengembangan untuk menunjukkan kepada klien bahwa pekerjaan sedang berlangsung.

Jika Anda merasa tergoda untuk melakukan ini, mungkin berhenti sejenak dan pertimbangkan apakah ini benar-benar ide yang bagus. Sebagian besar klien tidak akan memahami alur kerja yang akan diikuti pengembang dan kemungkinan besar akan kembali kepada Anda dengan sejumlah pertanyaan dan bahkan mungkin mengubah permintaan. Harus berurusan dengan ini pada tahap ini kontra produktif dan dapat menjadi getah waktu nyata sehingga Anda sebaiknya menunggu sampai situs akhir siap sebelum duduk bersama mereka untuk menjalankan penuh.

Pengujian Kualitas

Dengan situs final yang siap digunakan, sekarang saatnya untuk melakukan beberapa pemeriksaan sebelum Anda mempertimbangkan untuk ditayangkan. Ini bisa sangat luas dan, ada baiknya membuat daftar periksa yang dapat digunakan kembali yang dapat dicentang untuk membantu memastikan tidak ada yang terlewat. Beberapa hal yang mungkin ingin Anda periksa (tanpa urutan tertentu) adalah sebagai berikut:

Validasi HTML & CSS: Validasi HTML dan CSS Anda dengan menggunakan alat seperti Validator HTML W3C dan Validator CSS. W3C juga menyediakan Pemeriksa Internasionalisasi yang membantu Anda memeriksa apakah situs web Anda dapat dengan mudah diterjemahkan ke dalam bahasa lain.
Tautan: Sangat penting pada langkah ini untuk memeriksa apakah semua tautan internal dan eksternal berfungsi dengan baik.
Tata Bahasa & Ejaan: Semoga teks telah disalin dan ditempel dari dokumen yang disediakan oleh copywriter Anda, ini seharusnya baik-baik saja. Meskipun demikian, slip up dapat terjadi sehingga membaca ulang adalah waktu yang berharga.
Formulir: Periksa pekerjaan ini seperti yang diharapkan dan kiriman apa pun tiba. Anda disarankan untuk menguji ulang formulir ini setelah situs ditayangkan dan kemudian menginstruksikan klien untuk menjadwalkan pengujian di masa mendatang, mungkin setiap bulan.
Waktu muat: Situs web yang cepat adalah suatu keharusan. Alat-alat seperti WebPageTest, GTMetrix, PageSpeed Insights atau Pingdom dapat digunakan untuk memeriksa apakah waktu muat bagus dan cepat. Jika situs Anda dihosting di server pengembangan yang tidak akan digunakan sebagai server langsung, maka Anda harus menguji ulang saat situs ditayangkan.
Responsivitas Seluler: Pastikan situs web Anda ditampilkan dengan benar di semua jenis perangkat. Anda dapat menggunakan alat seperti BrowserStack untuk melakukan ini.
Fungsionalitas: Jika Anda memiliki fungsionalitas yang lebih canggih di situs Anda di luar hal-hal seperti formulir kontak, maka Anda akan ingin menguji fungsi-fungsi ini dengan hati-hati. Misalnya jika Anda meluncurkan situs WooCommerce maka proses pengujian Anda mungkin harus lebih intensif daripada untuk situs web bergaya brosur. Menggunakan WooCommerce sebagai contoh, menguji gateway pembayaran, fungsionalitas keranjang, cara kerja hal-hal seperti kode promo, dan sebagainya. Tes tes dan tes lagi!
Pemeriksaan Visual: Lihatlah konsistensi palet warna dan spasi, margin, padding, dll. Hal yang sama berlaku untuk tipografi dan pemosisian gambar, resolusi, dan pengoptimalan.
Perilaku Browser: Berikutnya dalam daftar adalah memeriksa perilaku situs web di beberapa browser dan perangkat.
SEO: Periksa kembali SEO Anda! Ini mencakup semua elemen struktur semantik Anda seperti judul, paragraf, daftar, dan jenis tag lain yang mungkin Anda gunakan serta judul dan deskripsi meta serta pengaturan Grafik Terbuka untuk media sosial.

Saat Anda senang bahwa situs Anda berfungsi seperti yang diharapkan dan terlihat sebagus yang Anda harapkan, sekarang Anda mungkin berpikir bahwa Anda siap untuk diluncurkan. Kami menyarankan bahwa sebenarnya Anda sekarang mendapatkan 5 atau lebih orang yang tidak terlibat dengan proyek untuk juga menguji situs Anda. Idealnya, para pengguna ini juga kurang 'berorientasi pada teknologi' daripada Anda. Anda akan kagum dengan apa yang bisa dilihat oleh sepasang mata baru. Melakukan hal ini dapat menghindari masalah dengan pelanggan 'nyata' setelah peluncuran dan memberi Anda kesempatan untuk lebih meningkatkan alur situs.

Meluncurkan

Ini dia! Idealnya luncurkan situs Anda pada saat volume lalu lintas cenderung rendah. Menggunakan penyedia DNS seperti Cloudflare dapat membantu menghindari masalah caching DNS. Ini juga yang terbaik untuk diluncurkan saat pengembang Anda siap sehingga mereka dapat turun tangan dan membantu jika ada yang tidak beres.

Sekarang Anda tinggal pastikan Anda meluangkan waktu untuk memeriksa ulang situs dan jangan khawatir jika Anda menemukan gangguan! Hampir tidak mungkin untuk menghindari sesuatu yang jatuh melalui celah tetapi mudah-mudahan, menggunakan daftar periksa yang menyeluruh akan membantu memastikan bahwa sebagian besar item utama berfungsi seperti yang diharapkan.

Kesimpulan

Merancang situs web yang baik adalah pekerjaan besar dan mudah untuk merasa sedikit gentar dengan tugas yang ada. Memecah pekerjaan menjadi bagian-bagian yang dapat dikelola dan benar-benar merencanakan segala sesuatunya sebelum Anda terlalu terjebak dapat benar-benar membantu membuat proses menjadi lebih sukses dan juga menyenangkan.

Semoga beruntung!