BERAGAM MACAM LAYOUT DESAIN WEB

Web adalah sebuah halaman yang memuat banyak multimedia seperti gambar, video, tulisan, dan lainnya. Web adalah sebuah lahan kreatifitas yang sangat peka akan tampilan. Keinginan seseorang dalam mengakses suatu situs dipengaruhi oleh bagaimana nyaman nya dan menariknya suatu situs untuk dilihat. Dan Web design adalah suatu kegiatan yang bertujuan untuk merancang aplikasi dan tampilannya dengan basis web menggunakan bahasa pemograman. Dan bagaimana isi web konten ditampilkan, yang dikirimkan ke pengguna akhir melalui World Wide Web, dengan menggunakan sebuah browser web atau perangkat lunak berbasis web. Sebelum mengenal jenis-jenis design web, ada baiknya kita kenali dulu beragam macam layout desain web.

Website Statis

Merupakan website yang kontennya konstan atau tidak berubah. Setiap laman dibuat dengan kode HTML dan menunjukkan informasi yang sama kepada setiap pengunjung. Hanya webmaster atau developer yang bisa melakukan update pada konten website statis.Umumnya website statis dibuat dengan menggunakan HTML dan CSS oleh developer yang memahami pemrograman dan coding. Anda juga bisa menggunakan generator website statis seperti Jekyll, Hexo, atau Hugo. Karena website statis tidak membutuhkan update konten secara berkala, website statis tidak memerlukan database. Biasanya website statis digunakan untuk website perusahaan yang hanya perlu memberikan informasi-informasi dasar seperti alamat, kontak, dan sejarah perusahaan.

Website Dinamis

Sebaliknya website dinamis adalah website yang kontennya selalu di-update secara berkala. Kebanyakan website bersifat dinamis karena lebih mudah dikelola dibandingkan website statis. Website dinamis menampilkan kontennya dari database yang biasanya hanya bisa diakses oleh webmaster atau developer. Meskipun begitu, website dinamis memungkinkan untuk memiliki beberapa user yang bisa melakukan update konten website tanpa mengganggu desain web.

CMS

Metode pertama adalah cara yang paling populer, yaitu menggunakan Content Management System (CMS). CMS adalah perangkat lunak atau sistem yang digunakan untuk membuat dan mengatur konten digital. Anda bisa membuat website dengan cepat dan mudah menggunakan CMS. Beberapa CMS yang paling banyak digunakan adalah WordPress, Joomla!, dan Drupal. Dari ketiga CMS populer tersebut, WordPress adalah yang paling mudah untuk dioperasikan. Selain mudah dioperasikan, WordPress juga merupakan pemegang market share terbesar CMS dengan angka 59.9%.

HTML dan CSS

Jenis website berdasarkan platform yang terakhir adalah website yang menggunakan HTML dan CSS. Masih ingat jenis website di awal artikel ini? Betul, website statis. Biasanya website statis dibuat menggunakan metode ini. Metode membuat website terakhir ini memerlukan pengetahuan tentang coding dan pemrograman menggunakan HTML dan CSS. Anda bisa membuat kode untuk website menggunakan software seperti Notepad++, Text Wrangler, atau Sublime Text.

Blog atau Website Pribadi

  • Ecommerce/Toko Online
  • Website Perusahaan
  • Blog (Content Marketing)
  • Organisasi atau Instansi Pemerintah
  • Komunitas Online
  • Media Sharing
  • Website Berita

Berikut adalah macam-macam layout desain web:

1. Static

Layout static pada web desain memiliki ukuran tetap pada semua resolusi browser. Lebar layout static ini menggunakan satuan pixel (px) sehingga akan menghasilkan layout yang statis.

Contoh layout static: Facebook, Twitter.

2. Fluid

Layout fluid memiliki kemampuan untuk menyesuaikan lebar layout sesuai dengan resolusi browser. Hal tersebut terjadi karena lebar layout menggunakan satuan percent (%) sehingga lebar layout akan mengikuti resolusi browser saat dikecilkan atau dibesarkan (resize).

Contoh layout fluid: gmail, yahoo mail.

3. Responsive

Layout responsive memiliki kemampuan untuk berganti layout pada resolusi tertentu. Layout bisa berganti ini berkat kehadiran CSS3 dengan sintax media queries nya. Kalo di pemrograman fungsinya mirip ‘if‘, tapi ini di css. Jadi sebuah web bisa memiliki tampilan berbeda saat dibuka dengan pc, tablet atau smartphone.

4. Responsive-fluid

Layout responsive-fluid merupakan gabungan antara responsive dengan fluid sehingga lebar layout akan mennyesuaikan resolusi dan akan berganti layout pada resolusi tertentu. Layout ini menggunakan media queries dan satuan percent (%) untuk ukuran.

5. Horizontal Scrolling

Layout horizontal scrolling adalah dengan menata content web kesamping, sehingga untuk melihat content web tersebut menggunakan scroll horizontal.

6. Parallax Scrolling

Layout parallax scrolling menggunakan beberapa layer dan setiap layer memiliki kecepatan perpindahan yang berbeda-beda saat di scroll sehingga menimbulkan efek yang menarik.

(Sumber hiduptreda.com )

INGIN MENJADI SEORANG WEB DESIGNER? KAMU HARUS TAU HAL BERIKUT INI!

Jika kamu seorang pecinta teknologi, berarti kamu tau dong tentang web design?

Yup betul! Secara teori, web design adalah kegiatan untuk merancang aplikasi – aplikasi dan tampilan dengan berbasis web yang menggunakan bahasa pemograman.

Orang yang melakukan kegiatan tersebut dikenal dengan sebutan web designer. Peran dari seorang web designer adalah mengintegrasikan semua komponen dan semua sumber daya yang dipakai untuk membuat sebuah rancangan website seperti membuat tampilan halaman aplikasi web yang dinamis dan user friendly.

Berikut adalah hal yang harus dikuasai Web Designer kemampuan teknik seorang web designer, diantaranya:

  1. HTML/CSS

HTMLadalahsingkatan dari Hyper Text  Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser).

  • JavaScript/jQuery

Bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.

  • Framework CSS

Pengguna website apapun pasti akan membutuhkan yang namanya CSS Framework. Hal ini berguna untuk mempermudah dalam mendesain dalam sebuah website dan pemanfaatan yang ada

  • Preprocessor CSS

kemampuan untuk membuat variabel, fungsi, dan penulisan CSS yang lebih terstruktur dan pastinya membuat proses Development lebih efisien dan fungsionalitas

  • Version Control/Git

sistem yang dapat menyimpan perubahan yang dilakukan terhadap suatu file ataupun sekumpulan file, sehingga kita dapat melakukan mengatur versi dari file tersebut. 6. Responsive design

  • Testing/Debugging

Testing adalah salah satu aktivitas yang harus dilakukan sebagai bagian dari tahap pembangunan perangkat lunak. Sementara Debugging adalah aktivitas yang dilakukan untuk mencari posisi kesalahan dan memperbaikinya apabila dari hasil testing diperoleh indikasi adanya error atau defect

  • Soft skill web designer

Selain keterampilan secara teknik (hard skill) yang harus dimiliki oleh seorang web designer, ada juga keterampilan secara soft skill, yakni kemampuan berpikir dari dalam diri seseorang. Untuk selengkapnya, simak penjelasan berikut:

YANG HARUS DIPERHATIKAN BILA INGIN MENJADI SEORANG WEB DESIGNER

1. Keterampilan menulis

Keterampilan menulis sangat penting bagi perancang web agar hasil desain website semakin maksimal dan menarik di lihat pengunjung.

2. Gaya tersendiri

Setiap orang memiliki gaya unik tersendiri atau lebih spesifiknya “gue punya gaya sendiri” slogan itu cocok di sematkan untuk kamu yang mau mendesain web, be creative by your self ya!

3. Pengelolaan manajemen

Selain dalam hal artistik, kemampuan mengelola website juga perlu kamu pelajaridan perlu kamu terapkan lho

4.  Dunia Marketing

Bila kamu memiliki web dengan design mu sendiri, kamu bisa mempromosikannya kepada publik apa yang sudah kamu kerjakan, dan kuncinya harus tetap percaya diri ya!

5. Paham akan SEO

SEO merupakan singkatan dari “search engine optimization” (pengoptimalan mesin telusur) atau “search engine optimizer”. Hal ini sangatlah penting dalam mengoptimalkan halaman web, sehingga dapat muncul di halaman paling depan mesin pencari Google.

Elemen Penting Dalam Web Design

Tampilan website kamu harus bagus dan menarik, rapi sesuai fungsinya.

  • Layout
  • Element white space
  • Pewarnaan website