Identifikasi Kebutuhan Pengguna Terhadap Grafik Pada Aplikasi Berbasis Web

IDENTIFIKASI KEBUTUHAN PENGGUNA TERHADAP GRAFIK PADA APLIKASI BERBASIS WEB

Pemodelan Desain Grafis Yang Diperlukan Dalam Memperindah Tampilan Web

Ada beberapa hal yang perlu diperhatikan pada desain website, diantaranya adalah:

Penggunaan warna yang tepat

Warna sangat berpengaruh dalam sebuah desain. Seperti yang telah kita ketahui, masing masing warna memiliki karakter tersendiri, dan mecerminkan suasana tertentu. Skema warna (kombinasi warna) dalam desain harus bisa mewakili karakter yang diinginkan. Tetapi perlu diingat, kombinasi warna yang berlebihan akan mengalihkan pengunjung dari konten website.

Teks yang mudah dibaca

Teks harus mudah dibaca, hal ini bisa dicapai dengan mengatur kontras warna teks dengan background. Selain itu penggunaan font yang tepat juga perlu diperhatikan, jenis font, ukuran font, style dan konsistensinya dalam desain. Selain itu pengaturan paragraf dan jarak antara teks dengan elemen lain juga perlu diperhatikan. Whitespace atau ruang kosong antar elemen harus harmonis. Semua hal tersebut bertujuan supaya Teks mudah dibaca.

Desain visual yang harmonis

Image atau gambar secara visual merupakan unsur atau elemen utama dalam desain. Image bisa digunakan sebai pemanis, atau penyeimbang atau point of interest. Sebaiknya pemilihan image sesuai dengan keseluruhan tema dan karakter desain website. Komposisi image dengan elemen lain juga harus sesuai, adakalanya sebuah website membutuhkan image yang besar (hampir fullscreen) untuk memberi kesan tertentu, dan dikombinasi dengan teks yang lebih kecil porsinya, ada pula website dengan komposisi teks yang lebih banyak dan image hanya sebagai unsur tambahan. Komposisi antara image dengan teks tergantung dari tema dan karakter yang ingin dibangun.

Yang penting harus bijaksana dalam memilih, menempatkan, dan mengkomposisi image, dan yang tidak kalah penting adalah kualitas image itu sendiri. Hal lain yang harus menjadi pertimbangan adalah besarnya file. Kecepatan load sebuah halaman website sebagian besar ditentukan oleh besarnya ukuran file, terutama image, apalagi bagi kita di Indonesia yang kecepatan akses internetnya sebagian besar dibawah rata-rata.

Layout yang Simpel

Layout atau tataletak desain diusahakan sesederhana mungkin, minimalisir elemen-elemen yang tidak penting, maksimalkan whitespace (jarak antar elemen). Website dengan layout yang baik, mudah untuk dijelajahi, pengunjung mudah untuk menemukan sesuatu, dan dengan cepat menemukan apa yang dicarinya.

Layout yang berantakan membuat pengunjung kesulitan dan membutuhkan waktu lebih lama untuk menemukan sesuatu. Penempatan yang tidak sesuai, point of interest yang menyesatkan, dan urutan tata letak yang acak, sangat tidak menguntungkan.

Alur yang mudah dimengerti

Layout desain website harus bisa menuntun pengunjung dan mengarahkan mereka ke sesuatu yang kita inginkan, jadi kitalah yang menuntun alur perhatian pengunjung dari titik a, ke titik b, ke titik C, dan seterusnya, sehingga tujuan kita dan misi dari website bisa dicerna dengan baik oleh pengunjung. Hal ini tidaklah mudah, berbeda dengan media lain seperti televisi, dan koran, audience dalam kendali pemberi informasi, mereka menerima apa adanya dan pasif, dan tidak melakukan tindakan aktif untuk memilah. Sedangkan pada website, pengunjung memiliki kendali penuh, mereka aktif, dan oleh karena itu alur dari desain website harus jelas dan mudah dipahami agar pengunjung tidak frustasi menemukan apa yang mereka inginkan.

Menu Navigasi yang jelas

Salah satu elemen penting yang juga wajib diperhatikan adalah navigasi atau menu. Menu navigasi adalah satu-satunya cara pengunjung berinteraksi dengan website. Ada banyak cara dan banyak desain menu navigasi, tetapi yang tidak boleh dilupakan adalah fungsi utamanya, sebagai alat interaksi pengunjung dengan website.

Website bisa saja mempunyai beberapa menu/navigasi, bisa diatas pada header, atau pada sidebar, maupun dibawah pada footer. Tidak ada rumus yang mengharuskan dimana kita menempatkan menu, yang penting harus menyatu dengan alur dan layout desain sebuah website.

            Ada dua hal penting yang membuat website Anda menjadi sukses dan mampu mendapatkan trafik dalam jumlah tinggi: konten berkualitas dan desain yang unik serta menarik. Desain website yang tidak rapi dan berantakan memengaruhi kesempatan konten dibaca oleh pengunjung situs. Pastinya mereka tidak akan melanjutkan membaca konten jika desain web yang Anda buat ‘merusak’ pandangan mata. Kalau sudah begini, jumlah pengunjung yang mengakses web Anda akan berkurang. Oleh karena itu, Anda harus berhati-hati dalam mengatur tata letak website. Carilah informasi sebanyak mungkin tentang cara desain web guna membantu Anda dalam menemukan style yang tepat.

Di artikel ini kami akan membahas cara mendesain website dari nol. Ada enam langkah yang wajib dilakukan, yakni:

1. Mencari web hosting yang tepat dan andal.
2. Memilih platform untuk membuat website.
3. Menginstall tool yang dibutuhkan untuk mengonlinekan website.
4. Membuat mockup untuk desain website.
5. Membuat prototipe desain.
6. Mengecek apakah desain terlihat bagus di perangkat mobile.

Meskipun masih pemula, Anda tetap bisa membuat website dengan desain yang menarik dan menakjubkan. Cukup simak tutorial cara mendesain web ini sampai selesai.

Langkah 1:  Mencari Web Hosting yang Tepat dan Andal

Sebelum membahas cara mendesain website lebih lanjut, ada hal paling penting yang tidak boleh dilewatkan. Carilah web hosting berkualitas untuk mengonlinekan website Anda.

Kebiasaan kita adalah memilih sesuatu berdasarkan harga. Mana yang paling murah, itulah yang punya ‘banyak penggemar’, dan ini juga berlaku ketika kita memilih hosting. Sayangnya, tindakan ini salah besar. Provider web hosting A belum tentu menyediakan layanan atau fitur yang sama dengan provider web hosting B. Jadi, kami sarankan agar Anda melakukan riset singkat hingga menemukan web hosting yang tepat untuk membuat dan mengonlinekan website.

Berikut beberapa hal yang harus Anda perhatikan pada saat memilih provider hosting:

• Memiliki layanan bantuan pelanggan yang cepat tanggap.
• Menawarkan performa tingkat tinggi untuk setiap website yang dibuat di layanan hostingnya.
• Menyediakan fitur tambahan untuk memudahkan Anda dalam membuat website, misalnya backup otomatis.
• Memiliki panduan, artikel, serta knowledge base (pengetahuan dasar) yang memuat pertanyaan dan jawaban teknis sehingga Anda bisa dengan cepat menemukan informasi yang dibutuhkan.
• Kompatibel dengan platform yang akan Anda gunakan untuk membuat website.

Hampir sebagian besar provider web hosting mengklaim memiliki semua kriteria di atas. Anda bebas memilih dan menentukan penyedia hosting yang akan digunakan. Baca juga review atau ulasan yang ditulis oleh para penggunanya baik di blog maupun komunitas forum. Di Hostinger, Anda akan menemukan paket hosting yang menawarkan berbagai fitur serta layanan yang canggih dan berkualitas dengan harga terjangkau:

Apabila membeli paket hosting Bisnis dan Premium, maka saat itu juga Anda akan mendapatkan domain gratis. Syaratnya mudah, belilah salah satu paket hosting tersebut dengan durasi 12 bulan (atau kelipatannya). Jangan lupa selesaikan prosesnya hingga checkout, ya!

Langkah 2: Memilih Platform untuk Membuat Website

Setelah mendapatkan layanan hosting yang diinginkan, langkah selanjutnya adalah memilih platform untuk membuat website. Sebenarnya, Anda bisa membuat website dengan menerapkan coding. Hanya saja, metode ini terdengar sulit bagi para pemula. Metode pembuatan website dengan menerapkan berbagai ragam coding atau bahasa pemrograman hanya untuk para developer yang sudah berpengalaman.

Jika mengikuti blog kami dari awal, pasti Anda sudah paham bahwa kami sering menyebutkan Sistem Manajemen Konten (CMS) sebagai salah satu platform terbaik untuk membuat dan mengonlinekan website. Tool ini memungkinkan Anda untuk membuat website dengan tampilan profesional serta mengelola sejumlah konten. Kedengarannya rumit, tapi tool ini benar-benar beginner-friendly alias mudah digunakan oleh para pemula di bidang pengembangan website.

Ada banyak pilihan CMS yang bisa Anda pilih, misalnya WordPress:

Platform ini menjadi ‘rumah’ bagi lebih dari 30% website. Sungguh suatu bukti yang bisa mengklaim bahwa WordPress akan membantu Anda dalam meraih kesuksesan online. Selain menawarkan kemudahan dalam penggunaan, WordPress juga menyediakan sejumlah opsi kustomisasi berkat adanya sistem plugin dan tema.

Langkah 3: Menginstall Tool yang Dibutuhkan

Setelah install WordPress, Anda juga wajib mengaktifkan tool tambahan yang dibutuhkan untuk desain web. Hal pertama dan paling utama, Anda memerlukan tema yang sesuai dengan style website yang sudah dikonsepkan sebelumnya.

WordPress memiliki ribuan tema sehingga Anda tidak akan kehabisan pilihan. Jika ini pertama kalinya menggunakan WordPress, kami sarankan agar Anda memilih tema gratis untuk membiasakan diri dengan platform ini. Kunjungi repositori resmi WordPress.org untuk memilih tema gratis terbaik:

Supaya Anda tidak ‘tersesat’ dan akhirnya menginstall tema yang salah, sebaiknya baca terlebih dulu berbagai ulasan atau review dari user dan cek apakah tema tersebut selalu diupdate. Jangan memilih tema yang terlalu banyak menuai review negatif dan sama sekali atau jarang diperbarui. Bersikeras memakai tema yang tidak memenuhi kriteria hanya akan membuat Anda sakit kepala. Jika sudah menemukan tema yang tepat, segera install dan aktifkan.

Install pula plugin WordPress page builder. Dengan plugin ini, Anda bisa lebih mudah desain website. WordPress memang menawarkan kemudahan penggunaan, tapi dari segi cara mendesain web, dibutuhkan keahlian dan kreativitas. Menginstall dan mengaktifkan plugin website builder memberikan Anda kesempatan untuk memodifikasi tampilan web.

Langkah 4: Membuat Mockup untuk Desain Website

Sampai di sini, Anda sudah punya website berbasis WordPress, tema yang diaktifkan, dan plugin page builder yang siap dijalankan. Sekarang siapkan kertas dan pensil atau pulpen (yap, kita akan menggunakan cara tradisional). Anda akan buat sketsa tampilan website yang diinginkan. Pembuatan sketsa inilah yang kemudian disebut sebagai mockup.

Anda tidak harus sebegitu detailnya untuk membuat mockup desain web. Cukup masukkan semua elemen yang ingin Anda tampilkan ke website. Tentu saja Anda bisa menambahkan sebanyak mungkin detail elemen yang diinginkan. Nantinya mockup akan berperan sebagai referensi visual ketika Anda mulai desain website di WordPress.

Buatlah mockup di komputer jika Anda lebih suka sketsa digital alih-alih menggoreskan pensil di atas kertas. Sayangnya membuat mockup di komputer tidak semudah yang dibayangkan. Ada berbagai proses yang harus dilalui dan tidak bisa dilakukan hanya dalam waktu semenit.

Silakan edit dan revisi mockup desain website berulang-ulang kali sampai akhirnya Anda sreg dengan tata letak dan tampilan.

Langkah 5: Membuat dan Mempertajam Prototipe Desain

Jika sudah selesai dengan mockup desain web, maka langkah selanjutnya adalah ‘memindahkannya’ ke dalam bentuk digital. Dengan kata lain, Anda akan melakukan prototipe desain website.

Buka website builder yang telah diinstall dan diaktifkan dengan menggunakan editor WordPress. Tambahkan elemen yang Anda inginkan ke halaman website dan mulailah mengaturnya seperti yang telah dibuat di mockup sebelumnya.

Proses prototipe desain tergantung dari jenis plugin yang diinstall. Akan ada berbagai detail di sana, tapi jangan terlalu dipikirkan, misalnya memilih warna atau ukuran font yang hendak digunakan. Setelah prototipe ini selesai, Anda bahkan masih punya waktu untuk mengatur hal-hal tersebut.

Hal terpenting yang sebaiknya dilakukan sekarang adalah menyelesaikan prototipe website, yang di dalamnya memuat semua elemen yang telah Anda rencanakan sebelumnya di mockup. Dengan prototipe, Anda bisa mengetahui mana layout yang tepat dan mana layout yang tidak perlu dimasukkan serta membuat beberapa perubahan untuk memperbaiki desain website. Poin inilah yang harus Anda perhatikan dengan saksama.

Ketika ditransisikan ke prototipe, terkadang Anda akan sedikit ‘melenceng’ dari mockup yang asli. Sebenarnya, ini hal yang wajar. Bahkan Anda membutuhkan waktu yang tak sedikit untuk desain web, tergantung pada seberapa perfeksionisnya Anda. Anda diberikan beragam elemen untuk dikustomisasikan serta opsi layout untuk digunakan. Jadi, tidak perlu terburu-buru.

Kami tekankan sekali lagi bahwa untuk saat ini Anda tidak perlu khawatir dengan teks website dan tipe konten lainnya. Jika ingin proses prototipe dilakukan lebih cepat, silakan gunakan text placeholders dan stock images. Apabila layout sudah selesai diatur dan hal lain yang diinginkan telah dimanajemen sesuai dengan keinginan, maka itulah saatnya Anda menggantikan prototipe dengan konten yang hendak digunakan.

Langkah 6: Mengecek Apakah Desain Website Terlihat Bagus di Perangkat Mobile

Anda sudah mempelajari cara desain web. Langkah terakhir, mengecek apakah tampilan desain sudah terlihat bagus dan berfungsi sebagaimana mestinya di perangkat mobile atau belum.

Belakangan ini mobile traffic memberi pengaruh dan dampak yang sangat signifikan. Karena itulah, Anda harus memastikan bahwa desain web terlihat mulus bahkan dalam resolusi rendah sekalipun. Apabila seseorang membuka website Anda melalui smartphone tapi sedetik kemudian hanya tampilan rusak yang didapat, maka besar kemungkinan dia tidak akan pernah kembali lagi. Keadaan ini hanya mengakibatkan meningginya bounce rate, sesuatu yang sebaiknya harus Anda hindari.

Untungnya, beberapa page builder WordPress (termasuk Beaver Builder) mobile-friendly. Ini berarti desain website yang Anda buat dengan menggunakan plugin tersebut akan terlihat ciamik di perangkat mobile.

Meski telah menggunakan plugin yang mobile-friendly, sebaiknya tetap lakukan pengecekan mengenai tampilan website di perangkat mobile. Ada banyak cara atau metode pengecekan. Misalnya, coba akses website Anda melalui smartphone atau perangkat mobile lainnya. Cara lain yang bisa dicoba adalah dengan menggunakan Chrome’s Dev Tools, tool yang memungkinkan Anda untuk memvisualisasikan website di berbagai resolusi.

Untuk menggunakan dev tool browser, hal pertama yang harus dilakukan adalah akses website Anda dan klik di area mana saja, kemudian pilih Inspect. Lihat bagian atas layar. Ada beberapa kolom (field) di mana Anda bisa menentukan resolusi. Dengan pilihan resolusi inilah Anda bisa melihat bagaimana tampilan website:

Kami sarankan untuk mencoba semua pilihan resolusi yang disediakan. Dengan begini, Anda bisa tahu di resolusi berapa desain web Anda tidak tampil dengan baik. Jika ada masalah atau error, kembali ke prototipe dan gunakan website builder untuk mengubah atau memperbaikinya. Apabila sudah tidak ada lagi error, website siap dionlinekan.

Kesimpulan

Untuk menarik trafik yang tinggi, Anda harus membuat desain website yang menarik serta profesional. Dengan desain web yang apik, orang-orang akan lebih betah dalam membaca konten yang Anda sediakan. Tak jarang konversi pun akan naik.

Anda tidak perlu menjadi developer untuk membuat tampilan yang cantik. Cari saja informasi sebanyak mungkin tentang cara mendesain web. Banyak tutorial (termasuk artikel ini) yang menyampaikan langkah serta cara mendesain website hingga detailnya. Berlatihlah dengan mengikuti langkah-langkah yang ada pada panduan tersebut. Dalam beberapa saat, website dengan desain yang menarik berhasil Anda wujudkan.

PERANGKAT LUNAK DESAIN GRAFIS YANG DIPERLUKAN DALAM MEMPERINDAH TAMPILAN WEB

Software Untuk Membuat Website

Era digital ini membiasakan kita untuk selalu terhubung dengan yang namanya internet. Internet inilah yang menjadi pintu pertama kita menjelajahi dunia maya, banyak yang bisa kita jelajahi di dunia maya salah satunya adalah berselancar di website. Website itu sendiri identik dengan halaman di internet yang menampilkan informasi yang memang betul-betul dibutuhkan oleh para pengunjung atau bisa juga disebut para pembaca. Jadi, apabila diibaratkan, website itu bisa berupa sebuah wadah yang menyajikan beragam ilmu-ilmu yang hanyalah tinggal kita ambil (akses) dan mulai kita baca.

Banyaknya website yang beredar ini menjadi pekuang bagi para web designer, tapi tahukan Anda bahwa sesungguhnya Anda juga bisa membuat website sendiri dengan menggunakan software pendukung. Dibawah ini sudah kami rangkum beberapa software untuk membuat website yang bisa Anda gunakan untuk membuat sebuah website.

1. Web Builder Visual (Wysiwyg editor)

Software yang satu ini bisa dimanfaatkan untuk menyunting website secara visual. Aplikasi dengan basis Wysiwyg editor ini Anda dapat merancang website dengan praktis dan mudah. Sehingga tidak memerlukan pengetahuan mendasar tentang pemrograman sebuah website.

Dengan memanfaatkan Web Builder Visual ini, Anda bisa menciptakan sebuah website yang sangat profesional dengan mudah hanya dalam beberapa wakt saja. Jadi, bagi pemula yang belum mengetahui banyak tentang pemrograman website bisa mencoba memanfaatkan Web Builder Visual ini.

2. Dreamweaver

Software untuk pembuatan website lainnya adalah dreamweaver. Software ini bisa Anda manfaatkan untuk pembuatan website, baik website yang sederhana hingga website profesional. Untuk memanfaatkan software ini kita bisa mencoba salah satu dari jenis dreamweaver, yakni macromedia dan adobe.

3. Notepad

Bagi pemula memang sangat cocok untuk memanfaatkan aplikasi notepad ini untuk merancang dan membuat sebuah website. Notepad sendiri adalah aplikasi editor teks yang biasanya digunakan untuk CSS, PHP, HTML dan lain sebagainya. Selain itu, memanfaatkan aplikasi pembuat website ini tergolong lebih ringan dibandingkan aplikasi lainnya.

4. CoffeeCup HTML Editor

Aplikasi pembuat website secara gratis lainnya adalah CoffeeCup HTML Editor. Namun untuk versi gratisnya sendiri tidak memiliki beberapa fitur, seperti Image Mapper, Visual Editor, Website Color Schemer dan CSS Menu Designer. Akan tetapi, Anda dapat membuat tampilan sebuah blog yang menarik dengan memanfaatkan aplikasi CoffeeCup HTML Editor ini.

5. WordPress

Software lainnya yang bisa Anda manfaatkan untuk membuat sebuah website adalah WordPress. Seperti kita ketahui, wordpress memiliki 2 jenis yaitu wordpress instan dan wordpress install / CMS. WordPress instan bisa kita manfaatkan untuk membuat blog langsung dari situs wordpressnya itu sendiri dengan cara mendaftarkan akun Anda di sana. Sedangkan wordpress install sendiri bisa dimanfaatkan untuk membuat sebuah website dengan cara mengunduh aplikasinya terlebih dahulu lalu menginstalnya dan mulai merancang website.

6. PageBreeze

Software ini adalah software editor HTML yang menekankan kesederhanaan dalam pembuatannya. Kesederhanaan disini berarti aplikasi ini lumayan agak mudah untuk dijalannkan. Software ini gratis dengan ukuran file 8 Mb. Keunggulan software membuat website ini adalah support untuk jenis HTML baru. Terdapat pemilahan antara berbagai tag dalam kode html. Terhubung otomatis dengan ratusan template gratis yang dapat digunakan. Untuk menggunakannya hanya dengan sistem operasi windows 32 maupun 64-bit.

7. Bluefish Editor

Bluefish hadir sebagai alat yang kuat untuk digunakan oleh programer dan webdevelovers. Selain sebagai alat tulis untuk mendesign website. BlueFish juga dapat berguna sebagai tempat penulisna bahasa pemograman yang lain. Oleh karena itu BlueFish mendukung berbagai bahasa pemograman dan bahasa makrup. Software ini dapat berjalan diberbagai sistem operasi, seperti Linux, Windows, MAC OS, FreeBSD, Solaris dan OpenBSD.

8. KompoZer

KompoZer adalah sebuah aplikasi untuk membuat dan mendesign web dengan mengkombinasikan menajemen file dan memenuhi kriteria WYSIWYG untuk mengedit halaman web. Untuk menggunakannya tidak perlu mengetahui banyak tentang HTML dan web coding. Cukup menggembirakan karena kebanyakan orang ingin membuat web tapi tidak banyak mengetahui HTML secara banyak. Ringkasan tentang fitur yaitu terdapat FTP situs manager, Tab, CSS editor, tollbar, markup cleaner, resize tabel dan lain-lain.