Kamis, 14 Maret 2019

ASMA COOKIES

Maret 14, 2019 0






          Asma Cookies merupakan toko roti yang menjual bakery dan kue kering. Lokasi Asma Cookies berada di Jalan Polowijo No.46B (Barat Pasar Ngasem) Yogyakarta. Toko roti yang sudah merintis usaha sejak tahun 1995 di kelola oleh Ibu Sri Purwaningsih (50thn). Setiap harinya, setidaknya 100pcs roti yang siap dijual.
          Kebanyakan pelanggan dari Asma Cookies berasal dari organisasi atau lembaga yang biasa memesan dalam jumlah besar. Bu Sri atau yang lebih akrab disapa Bu Asma ini tidak pernah memikirkan berapa besar keuntungan, jika roti basah yang dia jual dapat bertahan selama 3 hari, beliau selalu menggantinya sebelum habis agar tetap menjaga kualitas.
             Dengan semangat kerja Bu Asma, kami tertarik untuk membantu mendesainkan website agar usahanya dapat maju. Berikut adalah User Persona dan User Needs yang sudah kami buat.

Kamis, 07 Maret 2019

Analisis Pola Website : Web Pariwisata, Company Profile dan Edukasi

Maret 07, 2019 1
Website adalah kumpulan dari satu atau lebih halaman yang saling berkaitan, di dalamnya berisi informasi termasuk konten multimedia.

Sebuah website diidentifikasikan dengan nama domain dan dipublikasikan pada setidaknya sebuah web server. Sebuah website bisa diakses melalui jaringan IP publik, seperti Internet, atau jaringan lokal (LAN), dengan menggunakan Uniform Resource Locator (URL) sebagai alamat referensinya.



Dari bentuk dasarnya, website dibagi menjadi dua, yaitu website statis dan website dinamis sementara dari fungsinya website dibagi menjadi beberapa jenis:

  1. Company Profile
  2. E-Commerce
  3. Archive
  4. Dating
  5. Government
  6. Personal
  7. Entertainment
  8. News Portal
  9. Blog
  10. Community
  11. Educational
  12. Search Engine
  13. Gallery
  14. Social Media
  15. Social Bookmarking
  16. Social News

Dari klasifikasi jenis website menurut fungsinya yang sudah disebutkan sebelumnya, saya akan mencoba menganalisis dan mencari tahu perbeda pola web pariwisata, company profile dan web edukasi.


1. Situs Web Pariwisata
Website ini biasanya berisi tentang informasi pariwisata yang bersifat entertainment(hiburan). Biasanya berfungsi untuk mempromosikan sesuatau atau lebih kepada kebudayaan setempat.

halaman website kota Semarang                                                                 halaman website Enjoy Jakarta
   

Ini adalah tampilan halaman website pariwisata dari kota Semarang dan Jakarta. Untuk tampilan keduanya memiliki pola yang serupa yaitu dengan :
    
1. logo pariwisata disebelah kiri atas
    2. Nama website berada di tengah atas
    3. Menampilkan slide foto-foto
    4. Adanya navigasi menuju halaman lainnya
    5. Menampilkan widget untuk masuk ke galeri dan informasit
    6. Dilengkapi dengan contact serta akses media sosial

2. Situs Web Company Profile
Company profile merupakan website sederhana yang tentu saja statis, biasanya dibuat oleh perusahaan untuk menampilkan informasi bisnis mereka seperti produk atau jasa, visi misi, dan halaman kontak.
Biasanya, website company profile lebih fokus kepada desain tampilan website yang menawan namun informasi yang dibutuhkan pengunjung tetap ditampilkan dengan jelas.

halaman web amazara.co.id                                                                                halaman web http://bro.do/en/
Ini adalah dua contoh tampilan halaman website company profile. Untuk tampilan keduanya memiliki pola yang serupa yaitu dengan :
    1. logo brand amazara berada di tengah atas sedangkan brodo di kiri atas seperti biasanya
    2. Menampilkan slide foto-foto yang dapat berubah setiap ada pembaharuan produk atau promosi
    3. langsung menampilkan visual produk


3. Situs Web Edukasi
Website pendidikan sebagai sarana personalisasi hubungan antara pusat dan komunitas pendidikan (murid/mahasiswa) agar dapat saling berkomunikasi dan menyebarkan informasi berkaitan dengan pendidikan secara luas.

https://www.ubm.ac.id/

https://binusmaya.binus.ac.id/newDefault/login.html

Ini adalah dua contoh tampilan halaman website edukasi. Tampilan keduanya memiliki pola yang serupa yaitu dengan :
    1. logo kampus berada di bagian kiri atas
    2. Menampilkan slide foto-foto yang dapat berubah setiap ada pembaharuan informasi kampus
    3. Ada portal mahasiswa dan dosen khusus untuk yang menjadi anggota di kampus tersebut


Kesimpulannya
Ketiga website tersebut merupakan situs web yang menampilkan halaman dengan informasi yang dapat berubah sewaktu-waktu. Website-website ini termasuk bersifat statis yang hanya dapat diubah oleh webmaster atau developer yang bisa melakukan update pada konten website statis.

Kriteria Good dan Bad Design Website Beserta Contohnya

Maret 07, 2019 0
Ketika seseorang mengakses website kita, mereka harus disambut dengan tampilan yang menarik dan nyaman. Tampilan yang baik dapat meningkatkan presentase kunjungan pada web/blog. Tampilan web/blog yang nyaman meliputi beberapa aspek sepeti pemilihan font, perpaduan warna, serta tata letak yang nyaman untuk dibaca.

Berikut ini adalah beberapa hal penting yang harus diperhatikan ketika mendesain halaman web/blog.

  • Typography
  1. Gunakanlah klasifikasi tipe font yang sesuai dengan isi konten
  2. Pilih ukuran font yang tepat. Standar ukuran font untuk body halaman website/blog adalah 16px sampai 26px.
  3. Hindari penggunaan font Comic Sans sebagai isi atau konten. Font Comic Sans adalah font dengan klasifikasi Script yang biasa digunakan untuk quote atau kata-kata mutiara, tidak untuk isi konten atau informasi.
  4. Hindari 2 atau lebih font dalam satu konten atau informasi. Penggunaan lebih dari 1 font menunjukkan inkonsistensi dari suatu halaman web/blog.
  5. Gunakan Line-Height 1,5 atau 120% - 150% dari ukuran font untuk jarak antar baris.
  6. Manfaatkan kustomisasi ketebalan huruf guna mempertegas suatu informasi.
  7. Sebaiknya dalam satu baris aplikasi web maksimal terdapat 50-70 karakter termasuk spasi dan untuk aplikasi mobile maksimal terdapat 40-45 karakter termasuk spasi.
  8. Hindari ‘Widows’ yaitu kalimat yang tersisa pada halaman tertentu dan ‘Orphan’ yaitu sisa kata dalam suatu paragraph.
  • Color
  1. Pilihlah dasar warna RGB (Additive color) yang seluruh kombinasi warnanya dipadukan dengan warna putih untuk desain grafis digital, sedangkan untuk percetakan pilihlah dasar warna CMYK (Subtractive color) yang seluruh kombinasi warnanya dipadukan dengan warna hitam.
  2. Gunakan tone warna pada halaman website/blog sesuai dengan kesan yang ingin disampaikan kepada pengunjung.
  3. Perhatikan pemilihan warna pada background dan foreground website/blog. Gunakan kombinasi HSL (Hue untuk kombinasi warna, Saturation untuk kepekaan warna, dan Luminosity untuk keterangan warna) pada halaman website/blog
  • Layout
  1. Pada umumnya logo web/blog diletakkan di kiri atas karena pengguna mengidentifikasi halaman web dari posisi kiri atas.
  2. Navigasi sebaiknya diletakkan horizontal atau vertical mengikuti posisi logo.
  3. Apabila terdapat gambar pada logo, header, ataupun konten web, maka pastikan arahnya condong pada informasi terkait.
  4. Apabila memiliki layout dengan lebih dari satu kolom, posisikan sejajar (horizontal atau vertikal).
  5. Hal lain yang tidak kalah penting adalah pastikan halaman web Anda memiliki wide space. Hal ini membantu pengguna untuk mengistirahatkan pandangannya saat menyisir informasi pada web Anda.

Setelah mengulas hal penting yang harus diperhatikan dalam mendesain suatu halaman website/blog, mari kita lihat beberapa website dengan desain baik dan buruk sesuai ketentuan diatas.

  • Desain Halaman Website yang Baik
             1. http://www.gudegbulies.com/

k
         Website dikatakan baik karena memenuhi kaidah berikut :
         a. Tampilan website sangat informatif.
         b. Terdapat konsistensi tone warna pada halaman website.
         c. Pemilihan tone warna utama dan warna font yang tepat sangat memudahkan pandangan pengunjung.
         d. Halaman website tidak mengandung konten yang berlebihan sehingga tergolong 
ringan.

           2. http://bro.do/en/



          Website dikatakan baik karena memenuhi kaidah berikut :
          a. Pengaturan letak/layouting website yang sangat baik.
          b. Pemilihan latar belakang foto dengan teknik non-fokus tersebut membuat tampilan lebih menarik namun tetap memperhatikan komunikasi halaman web 
ke pengunjung.
          c. Terdapat konsistensi pemilihan jenis font dan warna tulisan dengan kontras warna yang baik (hitam dan putih).
          d. Halaman website sangat komunikatif dan mudah dipahami.

       3. https://ruangguru.com/


           Website dikatakan baik karena memenuhi kaidah berikut :
           a. Terdapat konsistensi dalam penggunaan font dan pemilihan tone warna pada 
halaman website.
           b. Tujuan dan menu yang terdapat pada halaman website mudah dipahami oleh pengunjung.
           d. Website disertai gambar yang sesuai dan tidak berlebih sehingga menunjang halaman web menjadi lebih menarik dan komunikatif.

  • Desain Halaman Website yang Buruk
        1. http://lk21.li/


           Website dikatakan buruk karena beberapa alasan berikut :
           a. Halaman website terlalu padat
           b. Tampilan website tidak komunikatif dan informatif
           c. Terlalu banyak iklan dan animasi
           d. Navigasi tidak jelas

      2. http://www.arngren.net/


           Website dikatakan buruk karena beberapa alasan berikut :
           a. Halaman website terlalu padat, tidak terdapat ruang kosong untuk istirahat 
pengunjung.
           b. Terdapat inkonsistensi dalam penggunaan jenis dan warna font pada halaman website.
           c. Tujuan dan maksud website tidak tersampaikan



           Website dikatakan buruk karena beberapa alasan berikut :
           a. Pengaturan letak/layouting halaman website yang buruk.
           b. Terdapat inkonsistensi dalam penggunaan jenis dan warna font pada halaman website.
           c. Halaman web tidak komunikatif.