10 Langkah Menciptakan Desain Layout yang Keren

calibreworks December 2, 2015

Langkah-langkah untuk menciptakan website yang baik.

Ketika berbincang dengan anak-anak magang di Calibreworks mengenai layout sebuah website yang menarik dan memiliki user experience yang mudah, kita melihat banyak kesalahan umum yang sering dilakukan oleh para fresh graduate dan web designer pemula.

Pembicaraan ini membuat kami memutuskan untuk membuat langkah-langkah panduan untuk membuat suatu layout website yang terbaik untuk ditayangkan. Tim Calibreworks telah dilatih untuk melakukan perencanaan baik dari step pertama pembuatan website.

Pada dasarnya semua perusahaan konsultan teknologi atau untuk web developer biasanya telah mengetahui apa yang harus dipertimbangkan dan dilakukan sebelum memulai suatu project serta memperhatikan tiap prosesnya.

Tentu bukan saja hanya aspek desain yang krusial, namun juga flow penggunaan website secara keseluruhan. Ikuti langkah-langkah ini untuk membuat rangka berpikir sebelum membuat website Anda.

  1. Coret-coret apa yang ada di kepala ke atas kertas
  2.  
    10langkah_Image01
     
    Langkah pertama yang harus dilakukan sebaiknya adalah membuat ilustrasi layout pada secarik kertas. Biasanya tim designer Calibreworks memulai dengan diskusi di whiteboard guna menemukan layout yang cocok yang juga dapat menemukan flow dan kerangka sebagai solusi bisnis. Kemudian baru menggunakan Photoshop atau Adobe Ilustrator untuk membuat tampilan yang cantik dan menambahkan warna. Mulailah dengan memikirkan konten, penataan letak atau layout yang maksimal, sitemap yang memenuhi kebutuhan dan fungsi yang tepat, sebelum membuat karya yang cantik.
     

  3. Sketching a top level framework
     
    10langkah_Image02
     
    Usahakan untuk membuat gambaran kerangka website yang akan membantumu mendapatkan solusi atas masalah User Experience atau UX serta struktur layout.Carilah solusi atas top level framework. Yaitu User Interface yang berada di sekitar konten serta akan membantu aktivitas dan navigasi yang lebih terarah, seperti misalnya sidebars dan bottom bars.
  4.  

  5. Membuat grid pada PSD
     
    10langkah_Image03
     
    Sebelum mendesain, tambahkan 978 grid dengan baseline 10px. Cukup mudah dan sangat membantu. Jangan pernah melupakan untuk tidak membuat grid dari awal karena desainmu pasti tidak bisa rapih.Grid disini fungsinya adalah untuk membentuk struktur layout menjadi bagian yang berbeda-beda, sehingga kamu pun dapat lebih jelas dan mudah untuk membuat template yang sesuai dengan ukuran dan memiliki jarak yang rapih.
  6.  

  7. Pemilihan Typography yang sangat penting
     
    10langkah_Image04
     
    Mengeksplorasi typefaces atau font family serta warna font merupakan salah satu proses yang tak dapat dihindari. Font menjadi sangat penting untuk menciptakan website yang enak dilihat. Maka usahakan menggunakan dalam satu layout desain hanya menggunakan dua jenis font dan tidak lebih.Cari yang mudah untuk dibaca bahkan dalam waktu lama. Tidak masalah untuk bermain dengan besar kecilnya font namun tetap konsisten dengan penggunaan font tersebut.
  8.  

  9. Pilih warna tema
     
    10langkah_Image05
     
    Untuk mencari warna tema yang sesuai, triknya adalah mempersempit lagi gradasi warna yang ada, misanlnya mencari biru, maka carilah di bagian gradasi pada warna biru saja. Untuk proses keseluruhan pemilihan warna, sesuaikan warna yang akan kamu gunakan pada UI, text dan background. Sebaiknya menggunakan warna terbatas dan senada, untuk UI secara keseluruhan.Sangat penting untuk mengaplikasikan keseluruhan warna yang konsisten dan sesuai dengan fungsi bagian-bagian tersebut. Jangan lupakan detil, namun juga jangan sampai mengganggu fungsi komponen yang ada.
  10.  

  11. Gunakan pembagian layout
     
    10langkah_Image06
     
    Untuk membuat suatu website semakin mudah digunakan, struktur website tersebut juga harus dibuat sesederhana mungkin. Semua bagian harus bisa menjawab kebutuhan, memberikan fungsi dan alasan yang tepat serta memberikan hasil akhir untuk pengguna. Suatu layout harus dapat menghighlight bagian mana yang paling penting dalam website tersebut, seperti halnya bercerita. Di bagian akhir, website harus dapat menjawab apa yang harus mereka lakukan di website tersebut dengan mudah.Biasanya orang akan memaksakan beberapa komponen yang tidak penting. Membuat website yang sederhana ternyata lebih susah loh!
  12.  

  13. Keluar dari fungsi-fungsi standar
     
    10langkah_Image07
     
    Apakah perlu ada fungsi search di tiap website? Jawabannya, kebanyakan website tidak memerlukannya. Hanya karena latah, dimana semua orang menggunakan fitur ini. Seorang designer akan menentukan bagaimana pengguna internet akan menjelajah website tersebut. Berapa langkah, seberapa rumitnya atau seberapa sederhananya. Banyak sekali pola design yang dapat dibuat lebih sederhana dan efisien. Namun seringkali para designer tidak memiliki waktu untuk evaluasi dan mengubahnya. Padahal sangat penting untuk memikirkan kembali pola dari semua komponen yang ada dan meningkatkannya.
  14.  

  15.  Inovasi
     
    10langkah_Image08
     
    Calibreworks selalu memberikan tantangan untuk para desainer nya untuk menantang diri mereka sendiri di tiap project. Proses evaluasi bersama dan memberikan inovasi yang baru terkait dengan desain atau interaksi di dalam website. Itulah yang harus selalu kalian lakukan, berinovasi dengan sistem grid, memikirkan komponen dengan fitur yang baru, kadang harus menggunakan blend dan kadang harus menghindarinya dan penggunaan warna yang spesifik.
  16.  

  17.  Detil yang harus diperhatikan
     
    10langkah_Image09
     
    Pada bagian akhir pengerjaan suatu website, bahkan mulai dari flow, animasi, hingga desain yang kecil pun harus diujicoba dan diteliti kembali. Bayangan atau garis yang mengganggu harus dihilangkan. Bahkan jika ada, titik di dalam konten pun harus dapat diketahui. Semua ini akan sangat mudah dan fun dikerjakan jika kamu suka dengan apa yang kamu lakukan.
  18.  

  19. Mindset untuk memberikan karya yang terbaik
     
    10langkah_Image10
     
    Untuk menjadikan setiap hasil adalah suatu karya, kami selalu berpikir untuk memberikan setiap detil komponen adalah lebih hanya sekedar pelengkap. Setiap bagian harus diperlakukan sebagai suatu desain yang detil dan tidak dapat dikesampingkan. Beberapa desainer lain akan menyampingkan suatu fitur dan memberikan desain lebih baik pada fitur lainnya. Namun itu tidaklah tepat.

     
    Lihat contoh web design lainnya disini:
    http://www.calibreworks.com/portfolio/
     
    Untuk berkonsultasi dengan web design specialist Calibreworks:
    http://www.calibreworks.com/contact-us/



Leave us your thought

(start with http://)