Hobby
Batal
KATEGORI
link has been copied
767
KASKUS
51
244
https://www.kaskus.co.id/thread/000000000000000007700611/all-about-website-design
Sebelumnya saya meminta izin terlebih dahulu kepada moderator dan sekaligus para penghuni Forbidden untuk membuka Thread mengenai Website Design yang akan saya kelola. Jangan lupa untuk mentaati aturan maen di Forbidden yah General Rules! Thread ini dibuat untuk berdiskusi dan memberikan informasi tentang Design Website saja. (Tidak termasuk informasi mengenai cara coding/development/css/html/etc.
Lapor Hansip
30-03-2011 08:10

All About Website Design

All About Website Design

Quote:
Sebelumnya saya meminta izin terlebih dahulu
kepada moderator dan sekaligus para penghuni Forbidden
untuk membuka Thread mengenai Website Design yang akan saya kelola.


Quote:
All About Website DesignJangan lupa untuk mentaati [url='http://www.kaskus.co.id/showthread.php?t=886766'] aturan maen [/url] di Forbidden yah


General Rules!
Quote:
  1. Thread ini dibuat untuk berdiskusi dan memberikan informasi tentang Design Website saja. (Tidak termasuk informasi mengenai cara coding/development/css/html/etc. Silahkan kunjungi sub forum [url='http://www.kaskus.co.id/forumdisplay.php?f=13']Website, Webmaster, Webdeveloper [/url] jika anda mencari informasi di luar website design.)

  2. Berusahalah mencari dulu topik permasalahan yang ada, Cek Index FAQ [Frequently asked questions] siapa tau masalah / informasi sudah pernah dibahas! kalo perlu cari dulu juga di GOOGLE!

  3. Gunakan Bahasa Indonesia yang baik & benar dalam berdiskusi / membagikan informasi. Supaya mudah di mengerti dan tidak terjadi mis-communication dalam diskusi.

  4. Usahakan buat judul pada post anda jika mau men sharing kan informasi atau bertanya, sehingga mudah untuk di index dan di cari di lain hari.

  5. Kalau ingin bertanya ga usah bertele-tele, langsung aja to the point ke permasalahannya.

  6. Respect each other! kalo bertanya yang sopan, pertanyaan blm dijawab harap sabar ya, di real life kita punya kesibukan pada kerjaan masing2 jadi ga tentu 24 jam kita online terus.

  7. Moderator ber-HAK untuk meng-edit atau men-delete setiap posting / reply yang isinya ga sesuai dengan tujuan Thread dan tata tertib / aturan.

  8. Setiap Anggota Forum berkewajiban untuk mematuhi seluruh ketentuan-ketentuan yang berlaku di dalam Thread tanpa terkecuali.



Posting Rules!
Quote:
  1. Do not spam
  2. Do not advertise.
  3. Do not post adult material.
  4. Do not write about SARA



All About Website Design
0
Tampilkan isi Thread
Masuk atau Daftar untuk memberikan balasan
Halaman 14 dari 41
All About Website Design
28-04-2011 06:39
Quote:Original Posted By agusdemak
Hehehehe... lha ada yang nanya bang, sebagai sesama orang yang lagi belajar kan wajib hukumnya sharing ilmu sebisanya... meski memang agak OOT...

OKE, LET'S LEARN ABOUT GRID SYSTEM!

==========================================


Mendesign Website Berbasis Grid System

Menggembangkan weblog atau template berbasis "Grid System" adalah salah satu alternatif untuk mempermudah penempatan dalam pembagian kolom. Sebagai kerangka tata letak halaman, supaya terlihat seimbang dan tertata rapih.

Ragam Jenis Framework dan Tool untuk Menggembangkan Grid

Ada beraga jenis tools dan framework yang dapat memandu anda mengembangkan desain weblog berbasis grid. Mulai dari yang kompleks seperti Blue Print dan 960 Grid System, sampai yang sederhana seperti The 1KB Grid dan Simple-css-grid.

Lihat Ultimate Guide To Grid-Based Web Design: Techniques and Tools lebih lengkapnya.

Prinsip Dasar Menggembangkan Desain Weblog Berbasis Grid

Prinsip dasar membangun desain grid adalah keseimbangan antar kolom berdasarkan rasio, yaitu:

1. Lebar Keseluruhan Layout

Lebar keseluruhan layout ini yang pertama perlu anda pastikan sebagai kerangka. Standart saat ini mungkin lebar yang tepat digunakan adalah 960 pixel (berdasarkan pertimbangan jenis monitor dan resolusi yang digunakan).

Lebar Keseluruhan Layout berdasarkan grid itu = Jumlah Kolom+ Lebar Kolom+Jarak antar Kolom.

2. Jumlah Kolom

Lajimnya kita dapat membuat jumlah kolom dalam suatu layout yaitu: 9, 10, 12, 14 atau 16. Jumlah kolom ini sebagai kerangka pembagian ruang elemen seperti Header, Post, Sidebar dan Footer.

3. Lebar Kolom

Masalah lebar tiap kolom ini berkaitan dengan jumlah kolom yang anda tentukan, atau sebaliknya. Lebar tiap kolom bisa 40, 60, atau 80 pixel.

4. Jarak antar Kolom

Jarak antar kolom ini adalah ruang terbuka, bisa sebagai pembatas tiap kolom. Lebar jarak antar kolom ini standarnya 10 atau 20 pixel.

Gambar dibawah adalah contoh Penerapan Grid System. Jumlah Kolom: 12, Lebar Kolom: 60px, Jarak antar Kolom: 20px, Lebar Layout keseluruhan: 960px.

All About Website Design

Empat hal diatas bisa menjadi dasar kerangka grid. Namun untuk masalah detilnya anda dapat mengembangkan sendiri tanpa terpatok ukuran standar diatas.

Mark Boulton dalam Five Simple Steps to designing grid systems, menjelaskan mengenai sistem grid secara lengkap.

'Subtraction.com' : Contoh Kreatif Penerapan Grid

Membangun Weblog atau template yang berbasis grid, sebenarnya tidak perlu menggunakan jasa seperti framework atau tool grid. Anda dapat mengembangkannya sendiri dengan kemampuan teknik CSS.

Subtraction.com, bisa kita jadi contoh atau inspirasi untuk mengembangkan sistem grid yang menarik, tidak terlihat kaku. Blog yang bermain warna putih dan hitam ini sudah sangat populer untuk masalah grid, banyak sudah yang mereviewnya.

All About Website Design

Lihat bagaimana desain grid yang diterapkan pada template yang merapat kekiri ini. Pembagian komposisi kolom yang menarik pada artikel untuk tanggal, judul, dan jumlah komentar.

Halaman berikut ini Grid Computi, mengambarkan bagaimana blog tersebut mengembangkan sistem grid di blognya.

All About Website Design


Kreatifitas sipengembang desain berbasis grid tersebut yang membuat blog diatas terlihat elegan.

Penutup

Grid system hanyalah sebuah kerangka atau acuan desain weblog atau template agar terdapat keseimbangan ruang. Anda bebas mengembangkan desain berbasis grid sesuai kreatifitas anda.


Tambahan: Grid system juga bisa diterapkan dengan lebar berdasarkan fluid. lihat Fluid 960 Grid System


Nih contoh vedeonya!





JIKA ADA YANG MENCARI GRID SYSTEM TEMPLATE, SAYA ADA, DAN BISA PM SAYA.

Komplit dari yang 12, 16 ato yang 24 column... dari mulai photoshop, illustrator, indesign, inkscape, omnigrafle, sampe yang visio.

Nih penampakannya:

All About Website Design
12 Column

All About Website Design
16 Column

All About Website Design
24 Column




Kalo ada yang berkenan kirim cendol ke kulkas, ga nolak kok emoticon-Big Grin


Semoga membantu...
All About Website Design


gan mau dong templatenya emoticon-Big Grin
0 0
0
All About Website Design
28-04-2011 09:24
gan nice info emoticon-2 Jempol
0 0
0
All About Website Design
28-04-2011 16:04
ini yang ane cari gan emoticon-Angkat Beer
0 0
0
All About Website Design
28-04-2011 18:35
web buat download template UI kit yg keren ada yang tau gan? emoticon-Big Grin
0 0
0
All About Website Design
28-04-2011 20:32
akhirnya nemu juga yang beginian makasih yah agan udah bantu ane design web hahaha emoticon-Big Grin emoticon-I Love Kaskus
0 0
0
All About Website Design
28-04-2011 20:56
Quote:Original Posted By yougun
gan mau dong templatenya emoticon-Big Grin


gan..yang punya file kan bilang tinggal di PM aja klo mau..pake di quote juga sebujubuneng..emoticon-Hammer
0 0
0
All About Website Design
28-04-2011 23:38
Quote:Original Posted By yougun
gan mau dong templatenya emoticon-Big Grin


pake blueprint css framework aja emoticon-Big Grin
0 0
0
All About Website Design
30-04-2011 00:37
gan kalo desain web full page / fullscreen bagusnya gimana ya gan??
ane susah buat headernya,, bisanya cuma warna polos doang,, kalo pake ada texturenya ane masih bingung caranya gan..

ada contoh2 web yg full page / full screen gak gan,, tp yg khusus design yg resmi gan..??
kalo untuk design sistem informasi rumah sakit bagusnya gimana ya gan,, logonya rumah sakitnya dominan warna hijau gan..


mohon pencerahannya ya gan.. ane msh bingung kalo masalah design.. emoticon-Big Grin
0 0
0
All About Website Design
30-04-2011 04:03
gan ane masih belum bisa masalah bikin icon masukinnya gmna ya ?? emoticon-Big Grin
tolong bantuannya ya gan emoticon-Big Grin emoticon-Big Grin
0 0
0
All About Website Design
30-04-2011 08:23
Quote:Original Posted By the.gunners
gan kalo desain web full page / fullscreen bagusnya gimana ya gan??
ane susah buat headernya,, bisanya cuma warna polos doang,, kalo pake ada texturenya ane masih bingung caranya gan..

ada contoh2 web yg full page / full screen gak gan,, tp yg khusus design yg resmi gan..??
kalo untuk design sistem informasi rumah sakit bagusnya gimana ya gan,, logonya rumah sakitnya dominan warna hijau gan..


mohon pencerahannya ya gan.. ane msh bingung kalo masalah design.. emoticon-Big Grin


yang penting kuasai konsep design, nantinya bakal kepake kalo mau desain website juga emoticon-Smilie

Quote:Original Posted By gravatar
gan ane masih belum bisa masalah bikin icon masukinnya gmna ya ?? emoticon-Big Grin
tolong bantuannya ya gan emoticon-Big Grin emoticon-Big Grin


masukin gimana maksudnya gan? emoticon-Thinking
0 0
0
All About Website Design
30-04-2011 08:35
mungkin bikin favicon kaya icon punya kaskus gt ya gan ?
0 0
0
All About Website Design
30-04-2011 12:28
Quote:Original Posted By wongalus
mungkin bikin favicon kaya icon punya kaskus gt ya gan ?


coba pake website ini kali yah. saya belom coba sih. tapi di google keluarnya beginian.

http://www.favicon.cc/
0 0
0
All About Website Design
01-05-2011 17:27
Quote:Original Posted By gravatar
gan ane masih belum bisa masalah bikin icon masukinnya gmna ya ?? emoticon-Big Grin
tolong bantuannya ya gan emoticon-Big Grin emoticon-Big Grin


Sorry lama tengok nih thread, masih banyak project soalnya.

Untuk Favico bisa dilakukan sebagai berikut;

Buat gambar/image yang akan dijadikan favico, buat ukuran 16x16 px lalu simpan dengan ekstensi .ico

Atau kalau mau simpel buat aja dalam format PNG dengan ukuran terserah yang penting sama. Misal 100x100 px, lalu buka :

http://tools.dynamicdrive.com/favicon/

upload gambarnya dan klik "create icon", lalu simpan file ico nya.

Upload ico ke hosting lalu masuk kan script di bawah ke website:

<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />

Masukkan sebelum tag </head>

Yang saya beri warna ungu adalah lokasi/path/folder file.
Yang saya beri warna merah adalah file favico nya.



Semoga Membantu
All About Website Design
0 0
0
All About Website Design
01-05-2011 17:29
Quote:Original Posted By yougun
gan mau dong templatenya emoticon-Big Grin


Boleh bisikin alamat emailnya ke PM saya? saya akan kirimkan. Maaf telat menanggapi, lagi sibuk kerjain project.
0 0
0
All About Website Design
08-05-2011 14:43
hmm.. ijin nyimak, gan.. emoticon-Toast
0 0
0
All About Website Design
08-05-2011 21:14
izin gabung gan, keren threadnya :beer
kebetulan ane lagi ngulik ni balsamiq..
sekali nyoba langsung jatuh hati..hahaha emoticon-Kiss

ane mau tanya gan, cara convert balsamiq ke UI di php gmn ya?
kalo udah pernah dijawab maafin ya gan,
tolong kasih tau link/page berapanya..

tolong di jawab ya gan..
ntar ane kasih GRP
0 0
0
All About Website Design
09-05-2011 11:11
Quote:Original Posted By dannyachmadfauz
izin gabung gan, keren threadnya :beer
kebetulan ane lagi ngulik ni balsamiq..
sekali nyoba langsung jatuh hati..hahaha emoticon-Kiss

ane mau tanya gan, cara convert balsamiq ke UI di php gmn ya?
kalo udah pernah dijawab maafin ya gan,
tolong kasih tau link/page berapanya..

tolong di jawab ya gan..
ntar ane kasih GRP


Kalo itu udah masuk ke ranah web programming mas, coba tanyain DI SANA


Semoga Membantu
Salam Freelancer...
All About Website Design
0 0
0
All About Website Design
11-05-2011 21:02
gan nanya dong. ane bikin menu trus ane kasih rollover. tp pengennya ane gambar yg ada dipojokan ikut gerak juga pas cursornya ane arahin ke menu. itu gmn yah gan?

sorry gan ane bener2 nubi dalam web design. baru nyoba prtama kali

ow iya gan. ini kan web offline gtu. nah misalnya pengen ngelik ke fb pas neken tombolnya gmn yah? soalnya ane coba tulis target link nya malah nyari kedalem file2di kompi ane. alhasil gak keluar fb ane.
0 0
0
All About Website Design
11-05-2011 21:30
Quote:Original Posted By CimungZ
gan nanya dong. ane bikin menu trus ane kasih rollover. tp pengennya ane gambar yg ada dipojokan ikut gerak juga pas cursornya ane arahin ke menu. itu gmn yah gan?

sorry gan ane bener2 nubi dalam web design. baru nyoba prtama kali

ow iya gan. ini kan web offline gtu. nah misalnya pengen ngelik ke fb pas neken tombolnya gmn yah? soalnya ane coba tulis target link nya malah nyari kedalem file2di kompi ane. alhasil gak keluar fb ane.


Gan Disini Design,Gak Ada Coding emoticon-Big Grin emoticon-shakehand emoticon-Malu (S)
0 0
0
All About Website Design
11-05-2011 22:07
Quote:Original Posted By Terrabyte
Gan Disini Design,Gak Ada Coding emoticon-Big Grin emoticon-shakehand emoticon-Malu (S)


iya gan ane udh curiga pasti pke coding2an yg ane sendiri gak ngerti. emoticon-Frown
ane kira ada sesepu disini yg ngerti soalnya kmn lg ane hrs curhat emoticon-Frown
0 0
0
Halaman 14 dari 41
icon-hot-thread
Hot Threads
obrolan-hangat-logo
Obrolan Hangat
Copyright © 2020, Kaskus Networks, PT Darta Media Indonesia