M 14-15 , Perangkat lunak desain grafis yang diperlukan dalam memperindah tampilan web

Perangkat lunak disain grafis yang diperlukan dalam memperindah tampilan web

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.

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.

1.   Proses Desain Web

8 Langkah Web Desain yang Efisien

Seperti yang sudah disebutkan sebelumnya, salah satu faktor paling penting di industri desain saat ini adalah mengatur workflow atau alur kerja agar Anda bisa bekerja dengan efisien. Untuk dapat melakukan pekerjaan yang efisien, Anda tentunya memerlukan waktu untuk menyusun pekerjaan Anda. Dengan membagi-bagi pekerjaan dalam beberapa tahapan, Anda tetunya bisa menjadi lebih produktif dalam pengerjaan dan penyelesaiannya.

Setiap orang dan desainer memang memiliki proses desain yang mereka rasa paling enak dan paling produktif. Di artikel kali ini, kami akan membahas workflow atau alur kerja desain yang efisien untuk membantu Anda para designer. Apalagi bagi kalian yang men-desain dan mengembangkan website. Ada lima langkah yang akan dibahas di artikel ini yaitu, mendengarkan kebutuhan client, melakukan riset, mengumpulkan ide, dan sketch desain website, buat wireframe dan style tiles, kemudian buat prototype desain web sebelum Anda membangun dan mengembangkan website itu sendiri. Kelima langkah ini diharapkan dapat membantu Anda untuk mendesain dan mengembangkan sebuah website dengan sukses dan efisien.

Kebutuhan client

Desainer web sering berpikir tentang proses desain web dengan fokus pada hal-hal teknis seperti wireframes, kode, dan manajemen konten. Namun desain yang hebat bukan saja tentang cara Anda mengintegrasikan tombol media sosial atau bahkan visual yang menarik. Desain hebat sebenarnya adalah membuat situs web yang sesuai dengan strategi menyeluruh.

Oleh karena itu, penting sekali bagi Anda untuk mengetahui tujuan dari website ini. Apa yang sebenarnya klien inginkan dari website ini? Sebelum memulai perencanaan desain Anda, Anda harus mengumpulkan informasi sebanyak-banyaknya dari klien Anda. Semakin Anda tahu banyak, semakin cepat Anda bisa mengerjakan desain web-nya.

Dengarkan ide mereka

Biasanya klien tidak akan langsung memberi tahu Anda apa yang mereka inginkan, Anda biasanya harus menanyakannya kepada mereka. Mereka ingin Anda bisa memvisualisasikan apa yang mereka inginkan dari brief yang sudah mereka berikan. Ada juga klien yang kesulitan untuk menyampaikan dan mengkomunikasikan yang mereka mau. Oleh karena itu, penting bagi Anda untuk menanyakan klien pertanyaan-pertanyaan mengenai bisnis mereka. Anda harus memastikan mood seperti apa yang mereka inginkan, apa yang mereka suka, dan tidak suka.

Kuesioner Klien

Salah satu cara yang bisa Anda lakukan adalah meminta klien Anda untuk mengisi sebuah kuesioner tentang desain website yang mereka inginkan. Anda bisa memulai dengan menuliskan pertanyaan penting apa saja yang bisa membantu Anda untuk memulai sebuah proyek. Misalnya, apa tujuan dari website ini? Siapa target audiencenya? Siapa saja competitor klien Anda? Apa yang klien Anda harap pengunjung website lakukan saat berada di website mereka?

Pastikan Anda mengirimkan kuis ini sebelum Anda mulai membuat proposal. Jika Anda ingin melihat contoh, Anda bisa melihat form kuesioner desain ini.

Agar lebih mudah, Anda juga bisa membuat kuesioner ini menggunakan Google Docs sehingga bisa diakses dimana saja dengan mudah oleh Anda maupun klien Anda.

Setelah klien Anda mengisi kuis ini, Anda bisa mengirimkan proposal dan membahas budget, project scope, timeline, dan kepemilikian. Setelah proposal disetujui, Anda sudah bisa mulai mengerjakan proyek tersebut.

Riset, Ide, dan Sketch

Bagian ini adalah salah satu bagian tersulit dalam suatu proyek. Ada banyak desainer di luar sana yang langsung menggunakan Photoshop atau Illustrator dan memulai proses desain. Padahal, ada baiknya Anda menggambarkan dulu desain web seperti apa yang Anda ingin buat di atas kertas.

Mulai Sketching

Menulis – atau mungkin dalam kasus ini menggambar – ide Anda di sebuah kertas adalah cara yang efisien dalam proses brainstorming. Ambil waktu yang Anda butuhkan untuk berpikir dan mulai sketching ide apapun yang muncul di kepala Anda. Anda juga tidak perlu langsung menggambar layout desain web dengan detail. Anda bisa membuat bentuk-bentuk seperti lingkaran dan kotak. Nantinya, ide-ide Anda bisa saja mulai bermunculan dengan natural. Jangan lupa untuk menuliskan atau menggambar ide apapun yang muncul di kepala Anda di mana saja.

Kompilasikan inspirasi Anda

Inspirasi juga penting dan bisa sangat membantu dalam proses desain web. Anda bisa memulai dengan menyiapkan sebuah folder bookmark di browser Anda. Mulai research dan kemudian simpan berbagai halaman web yang Anda kira relevan. Jangan sampai Anda menjiplak elemen atau ide dari website ini karena itu akan dianggap sebagai plagiasi. Cari website yang memiliki desain paling menarik dan cocok dengan kebutuhan klien Anda. Kemudian tulis apa yang Anda suka dan tidak suka dari desain web tersebut, baik layout, warna, bentuk, animasi, dan sebagainya. Dengan begini, Anda bisa mendapatkan inspirasi bentuk layout dan tampilan untuk website klien Anda.

Kenali competitor bisnis klien Anda

Ada baiknya Anda juga melihat desain website competitor bisnis klien Anda. Anda bisa mempelajari desain web dari competitor local maupun international dan pelajari isi-isinya. Elemen apa saja yang mereka semua miliki? Ini tentunya hal-hal yang harus Anda masukkan ke website Anda. Apa yang Anda rasa harusnya mereka miliki tetapi tidak ada? Ini adalah hal-hal yang bisa Anda masukkan ke website klien Anda. Selain itu, Anda juga bisa membaca artikel kami tentang 10 elemen penting desain website.

Wireframe

Wireframe adalah blueprint website Anda. Ini adalah hal yang membantu memberikan website Anda struktur visual. Beberapa desainer memiliki kecenderungan untuk memasukkan elemen desain ke wireframe. Ini sebaiknya tidak dilakukan karena wireframe sebenarnya dimaksudkan untuk memberi tahu Anda dimana elemen diletakkan, bukan bagaiman desain website ini akan kelihatan nantinya. Wireframe juga sebaiknya ada di mode grayscale agar Anda focus 100 persen ke layout desain web tersebut.

Untuk memulai, Anda memang membutuhkan pen dan kertas. Tulis dulu semua elemen yang akan Anda masukkan ke halaman web. Setelah itu susun mereka di halaman webnya. Anda bisa melakukan penyusunan ini dengan menggambar di kertas atau menggunakan tools wireframe seperti Proto.io, wireframe.cc, dan bahkan Photoshop.

Letak Elemen

Anda tentunya tidak bisa memulai website Anda tanpa tahu dimana Anda ingin meletakkan berbagai eleman yang sudah Anda rencanakan. Oleh karena itu, Anda harus tahu dimana Anda ingin meletakkan berbagai elemen.

Hirarki Informasi

Sitemap yang memiliki banyak link bisa jadi membingunkan untuk seorang klien dan bahkan untuk desainer. Dengan meletakkan sitemap, Anda akan dapat melihat bagaimana halaman-halaman itu terlihat di website Anda. Dengan begini, Anda bisa melakukan penyesuaian sebelum Anda sudah bergerak terlalu jauh ke depan.

Interaktif

Ketika Anda membuat sebuah wireframe, Anda juga harus bertanya: bagaimana elemen ini akan berinteraksi satu sama lain? Apakah pengunjung website akan mau menghabiskan waktu lebih banyak di website Anda? Apakah pengunjung website dapat dengan mudah menavigasi websitenya? Di sinilah user experience akan sangat berperan.

Perencanaan Konten

Setelah kerangka situs web Anda tersedia, Anda dapat mulai dengan aspek yang paling penting dari situs yaitu konten tertulis.

Konten sendiri memiliki dua tujuan penting:

Mendorong keterlibatan dan tindakan

Pertama, konten melibatkan pembaca dan mendorong mereka untuk mengambil tindakan yang diperlukan untuk memenuhi tujuan sebuah situs. Ini dipengaruhi oleh konten itu sendiri (tulisan), dan bagaimana materi itu disajikan (tipografi dan elemen struktural).

Konten yang singkat, tajam, dan menarik menarik perhatian mereka dan membuat mereka mengklik ke halaman lain. Bahkan jika halaman Anda membutuhkan banyak konten, Anda perlu dengan benar “memotong” konten tersebut dengan memecahnya menjadi paragraf pendek yang dilengkapi dengan visual. Dengan begitu artikel Anda dapat tetap terasa ringan dan menarik.

Search Engine Optimisation

Konten juga meningkatkan keterlihatan situs untuk mesin telusur. Praktik pembuatan dan peningkatan konten agar mendapat peringkat yang baik dalam pencarian dikenal sebagai search engine optimization, atau SEO.

Mendapatkan kata kunci dan frasa kunci Anda sangat penting untuk kesuksesan situs web manapun. Salah satu tools yang dapat Anda gunakan adalah Google Keyword Planner. Alat ini menunjukkan volume pencarian untuk kata kunci dan frasa target potensial, sehingga Anda dapat mengasah apa yang sebenarnya manusia cari di web. Karena mesin pencari menjadi semakin canggih, konten Anda juga harus bisa mengikuti kecanggihan mesin pencari. Google Trends juga berguna untuk mengidentifikasi istilah yang benar-benar digunakan ketika mereka mencari. Untuk tahu lebih banyak tentang kedua tools Google ini.

Proses desain pun juga harus focus pada perancangan situs web seputar SEO. Kata kunci yang Anda ingin peringkat perlu ditempatkan di tag judul – semakin dekat ke awal, semakin baik. Kata kunci juga harus muncul di tag H1, meta description, dan konten isi.

Konten yang ditulis dengan baik, informatif, dan kaya kata kunci lebih mudah diambil oleh mesin telusur, yang semuanya membantu membuat situs lebih mudah ditemukan.

Biasanya, klien Anda akan menghasilkan sebagian besar konten, tetapi penting bagi Anda untuk memberi mereka panduan tentang kata kunci dan frasa apa yang harus mereka sertakan dalam teks.

Untuk tahu lebih banyak tentang kinerja halaman pada mesin pencari, Anda bisa membaca artikel kami tentang Search Engine Optimisation.

Style Tiles

Style tiles atau yang lebih dikenal dengan nama style guides atau panduan style adalah kumpulan desain untuk visual branding sebuah web yang biasa berisi font, warna, dan element interface yang akan membantu menyampaikan identitas website ini kepada pengunjung website. Style tiles juga biasa sesuai dengan diskusi client. Elemennya biasa terdiri dari logo, typography, warna, dan voice brand itu sendiri.

Visualisasi Konsep

Membuat sebuah style tiles akan membantu menerjemahkan mood, feeling, dan nada website yang akan Anda buat. Ini juga akan mempermudah Anda untuk melihat apakah website ini sudah sesuai dengan permintaan klien Anda. Selain itu, ini juga akan membantu Anda melihat dengan lebih jelas bagaimana sebaiknya Anda menggunakan elemen desain agar klien bisa mengerti desain Anda.

Menjaga konsistensi

Style tiles dapat membantu Anda menjaga konsistensi dalam tampilan website Anda. Misalnya dengan warna, Anda tahu colour scheme apa yang ingin Anda gunakan agar website Anda memiliki warna yang senada dan cocok. Dengan begini, Anda bisa bekerja dengan lebih mudah dan konsisten.

 Efisiensi waktu

Mendesain style tiles akan memudahkan Anda untuk menunjukkan kulit dari desain website tersebut. Dengan begitu, jika klien merasa ada yang kurang atau ingin melakukan perubahan, Anda tidak perlu mengulang proses desain website-nya. Anda tinggal mengupdate style tiles Anda dan kemudian menunjukkannya lagi kepada klien.

Prototype

Membangun sebuah website sebenarnya hampir sama seperti membangun rumah; wireframe berperan seperti floor plan dan interior desainnya berupa style tiles. Setelah Anda  membuat wireframe dan style tiles, Anda hanya tinggal menggabungkan keduanya. Dengan menggabungkan keduanya, Anda akan melihat tampilan website Anda.

Prototyping adalah proses dimana Anda membangun model website Anda sebelum Anda membangun websitenya. Beberapa desainer suka mendesain prototype desain website mereka dengan Photoshop. Jika Anda tidak terlalu suka Photoshop, Anda juga bisa menggunakan framework web seperti inVision dan UXpin.

Prototype sendiri terdiri dari tiga langkah, yaitu:

Prototype

Mengimplementasikan style tiles ke layout sambil mengadaptasi tampilan dan fungsionaitas  dengan user experience. Ini dilakukan untuk memastikan bahwa desain web Anda tetap terlihat menarik tetapi mudah dinavigasi dan digunakan.

Test

Step ini adalah langkah yang sangat penting. Di langkah ini, Anda akan mengevaluasi apakah website Anda sesuai dengan kebutuhan dan ekspetasi klien. Anda bahkan bisa membagikan prototype dengan pengguna Anda untuk mengetes interaktifitas dan user experiencenya.

Fine Tune

Di langkah ini, Anda bisa melakukan perubahan dan peningkatan kinerja website tersebut. Proses ini mungkin membutuhkan waktu lebih lama, semuanya tergantung dengan berapa kali Anda bertemu dengan client untuk mem-finalkan permintaan desainnya.

 Testing Website

Setelah visual dan konten situs siap, website Anda siap untuk diuji.

Uji secara menyeluruh setiap halaman untuk memastikan semua tautan berfungsi dan situs web dimuat dengan benar di semua perangkat dan browser. Kesalahan mungkin disebabkan oleh kesalahan pengkodean yang kecil, dan meskipun seringkali sulit untuk menemukan dan memperbaikinya, lebih baik lakukan sekarang daripada menyajikan situs yang rusak kepada publik.

Jangan lupa juga untuk memeriksa halaman meta judul dan deskripsi. Bahkan urutan kata-kata dalam judul meta dapat mempengaruhi kinerja halaman pada mesin pencari.