Berbagai macam design web dan UX dapat kita temukan. Web design dan UX itu penting, pernahkan ketika kita membuka suatu website, kita tertarik membaca tulisan yang ada pada website tersebut meskipun tulisannya sedikit ?. Disitulah web design dan UX design digunakan, yaitu agar ketika orang membuka websitenya, mereka akan tertarik untuk membaca isi yang ada pada website tersebut.  Pada artikel kali ini penulis mencoba memberikan tips-tips pada design web dan UX. Tulisan ini bersumber dari pengalaman penulis sendiri selama mencoba pemrograman web.

1. Gambar sesuai ukuran layar

Ketika membuka suatu website dan kita disuguhi suatu gambar dengan resolusi tinggi dan ukuran sesuai ukuran layar browser seringkali gambar tersebut membuat kita terhenti dan fokus kepada gambar tersebut. Nah dari situ bisa diambil kesimpulan bahwa penggunaan gambar resolusi tinggi dan ukuran sesuai ukuran layar alias full akan memberi pengalaman yang baik untuk pengunjung website.

2. Mengarahkan user ke halaman yang tepat

Misalnya untuk website yang menawarkan suatu produk fashion, begitu user membuka halaman utama website dan melakukan scroll kebawah, berikan pilihan untuk mereka. Seperti fashion untuk cewek atau cowok. Tentu halaman yang mereka tuju berbeda tampilannya. Hal ini akan memberi pengalaman kepada user dimana mereka bisa "berpetualang" di website tersebut, rasa penasaran akan muncul dan tentu trafic yang tinggi untuk website tersebut.

3. Gunakan warna yang kontras

Dengan menggunakan warna yang kontras, tentu user mengerti elemen yang ada pada website. User tau mana yang tombol atau link, mana yang tulisan biasa. Carilah referensi warna yang cocok untuk website anda. Untuk kode warna bisa dilihat pada website w3schools.

4. Berikan navigasi yang menarik

Bagaimana memberikan navigasi yang menarik ?. Hal ini bisa dilakukan dengan memberikan style yang berbeda dengan tombol lain. Buatlah tombol yang bisa membuat user berpikir untuk menekannya. Misal suatu website memiliki deretan menu dan ada satu menu yang diberi warna background yang berbeda dan menggunakan kata-kata yang membuat user penasaran.

5. Menggunakan video pada website

Tips ini cocok untuk website yang menjual produk, dimana dibutuhkan kepercayaan dari pengunjung untuk melakukan transaksi. Disinilah video tersebut membangun kepercayaan untuk user agar melakukan transaksi.

6. Sticky menu / navigasi

Selalu tampilkan di layar tombol yang memudahkan user untuk bergabung kedalam website. Tombol tersebut dibuat dengan menggunakan kata-kata yang mempengaruhi user agar mereka bisa menikmati fitur lengkap yang ada pada browser.

7. Gunakan penggolongan yang tepat

Mungkin anda pernah membuka pinterest ? Pada situs tersebut, mereka menggunakan tampilan kartu untuk menampilkan konten websitenya. Hal ini menarik karena susunan kartu tidak beraturan namun memiliki jarak yang sama antar kartu. Hal ini memberikan pengalaman tersendiri untuk user.

Nah itu 7 tips untuk web design dan UX design yang menurut penulis bermanfaat untuk dicoba. Hal-hal diatas juga penulis dapatkan ketika mencari ide untuk mendesain suatu website. Semoga bermanfaat, terimakasih.

Read More »

 

Tentu kita sudah tidak asing lagi dengan judul artikel kali ini. Kita sering menemukan file gambar dengan ekstensi .jpeg, .png, atau .gif. Jika sering membuat suatu desain dengan aplikasi pengolah gambar tentu pernah menyimpan hasil desainnya dengan menggunakan format tadi. Sekilas tipe file gambar tadi tidak terlalu berpengaruh terhadap pc kita. Namun dibalik itu semua, sebenernya terdapat perbedaan besar antara tipe-tipe itu. Untuk tiap tipe file, sebenarnya ada waktu yang tepat untuk menggunakannya, seperti file png yang cocok untuk web page. Nah, berikut perbedaan antara tipe file jpeg, png, dan gif.

1. JPEG

Tipe file gambar jpeg atau kadang kita temukan jpg ditemukan pada tahun 1986. JPEG (baca:jay-peg) merupakan singkatan dari "Joint Photographic Experts Group". Format ini dapat menampilkan jutaan warna dan menggunakan algoritma yang kompleks untuk mengkompresnya. JPEG populer digunakan sebagai file standar hasil pemotretan dari kamera digital, kebanyakan kamera menggunakan tipe file ini ketika menyimpan hasil pemotretan. Kompatibel untuk kebanyakan platform seperti pc, mac dan beberapa program seperti browser dan image editor. Bahkan pada tahun 2014 web browser Mozilla membuat mozjpeg format untuk browsernya. File jpeg bisa dicompress sehingga ukuran file lebih kecil tanpa kehilangan kualitas gambarnya.

2.GIF

GIF merupakan singkatan dari "Graphic Interchange Format", awalnya GIF dibuat agar pengiriman file gambar lebih cepat untuk koneksi yang lambat. Tipe ini menggunakan 256 indeks warna dengan menggunakan proses dithering sehingga 2 piksel warna dikombinasikan menghasilkan warna baru. Seperti yang biasa kita temukan, format gif berupa gambar yang bergerak atau bisa dianimasikan. Karena indeks warna yang digunakan lebih sedikit, maka file nya memiliki ukuran yang lebih kecil daripada jpeg dan ketika ketika dikompres pun tidak terjadi kehilangan data.

3.PNG

PNG muncul pada pertengahan 1990-an dengan menggunakan keuntungan-keuntungan yang ada pada file jpeg dan gif. Jadi ketika dilakukan pengompresan pada file tidak terjadi kehilangan data. PNG adalah singkatan dari "Portable  Network Graphics". File ini terbagi dua tipe, yang pertama PNG-8 dimana tipe ini mirip dengan GIF, menggunakan 256 indeks warna namun ukuran filenya lebih kecil daripada GIF. Kedua yaitu PNG-24 yang mirip dengan JPEG, menggunakan lebih dari 16 juta warna namun file yang dihasilkan lebih besar daripada jpeg. File ini bisa diatur agar transparan, transparan secara penuh atau sebagian.

Nah itu dia sekilas tentang perbedaan antara jpeg, gif dan png. Berikut adalah tabel agar kita tau kapan waktu yang pas untuk menggunakan tipe file tadi

Tipe File	Waktu penggunaan
JPEG	Ketika file hanya tetap sebagai gambar Untuk fotografi Gambar menggunakan banyak warna Gambar mengutamakan shading
GIF	Untuk animasi
PNG	Untuk gambar pada web seperti logo Untuk pengeditan gambar Untuk fotografi dengan mengutamakan warna dan ukuran file tidak menjadi masalah

Silahkan berkomentar dibawah jika ingin berkomentar :)

Read More »