Rabu, 31 Maret 2010

Tutorial Layout Desain Web

Final layout:

View final layout(.psd)


Langkah:

  1. Buat dokumen baru dengan ukuran

  1. Pilih set foreground color lalu buat dengan format dibawah ini lalu pilih paint bucket tool


  1. Buat new layer lalu pilih brush tool dan sesuaikan

  1. Pilih pencil tool, ubah brush menjadi 20 dan 10.


  1. Pilih rectangle tool

  1. Atur layer style















  1. Pilih rounded rectangle tool

  1. Pilih rectangular marque tool dan buat set foreground color #ffffff lalu pilih paint bucket tool

  1. Pilih rounded rectangle tool dan sesuaikan


  1. Kemudian pilih duplicate layer, caranya klik kanan pada layer dan pilih duplicate layer


  1. Buat rounded rectangle tool lagi

  1. Tulis header dan isinya dengan horizontal type tool


Rabu, 24 Maret 2010

Prinsip dan Unsur Desain Web

Dimulai dari desain-prinsip yang mendasari profesi yang berhubungan dengan susunan benda-benda dalam suatu komposisi. Dan selanjutnya elemen-elemen desain-obyek yang digunakan untuk membuat komposisi sendiri. Akhirnya ada beberapa kendala yang melekat pada lingkungan yang dapat mengubah cara menggunakan prinsip-prinsip atau elemen-elemen desain.

1. Balance (Keseimbangan)

Balance biasanya datang dalam dua bentuk, simetris dan asimetris, dan memberikan rasa (atau kurangnya) ekuilibrium yang dapat menciptakan ketegangan dan visual berat.

2. Rhythm

Irama adalah pengulangan atau silih bergantinya benda, sering kali dengan interval ditetapkan. Ada banyak berbagai jenis irama, seringkali ditentukan oleh perasaan atau emosi yang ditimbulkan ketika melihat itu. Ketiga jenis irama yang kita diamati pada Prinsip-prinsip Desain adalah: teratur, mengalir dan progresif.

3. Proporsi

Proporsi biasanya didefinisikan sebagai perbandingan distribusi dimensi atau bentuk. Tampak pada hubungan dalam ukuran dan skala antara obyek dalam suatu komposisi. Proporsi dapat digunakan untuk membantu menentukan simetri dan visual berat badan, dan sering bisa menciptakan rasa ketegangan yang memfokuskan mata.

4. Dominasi

Dominasi adalah prinsip desain yang berhubungan dengan penekanan dan visual dalam sebuah komposisi berat. Sering membentuk perspektif, dan menyelesaikan di mana mata dipimpin untuk pertama-tama ketika melihat sebuah desain. Ada tiga tahap dominasi: dominan, sub-dominan dan subordinat.

5. Point

Sebuah point (titik) adalah elemen yang paling dasar desain. Ini adalah satu tanda di luar angkasa yang memiliki posisi, tapi tidak ada ekstensi. Sering kali kita melihat poin dikelompokkan bersama-sama untuk membuat garis, atau bentuk.

6. Garis (Line)

Garis adalah perpanjangan alami dari titik, dan ditandai oleh panjang dan arah.Garis dapat membuat kontur dan bentuk, perspektif dan kesinambungan, dan ketika dikelompokkan bersama-sama dapat membantu membangun rasa kerapatan atau nilai.

7. Form

Bentuk adalah elemen didefinisikan oleh batas, dan biasanya hasil dari sebuah kontur tertutup. Form adalah istilah yang sering diberikan kepada bentuk tiga dimensi, atau suatu bentuk yang memberikan ilusi tiga dimensi. Tiga bentuk dasar (bentuk) adalah: lingkaran (bola), persegi (kubus) dan segitiga (kerucut).

8. Warna

Warna adalah mata terhadap radiasi panjang gelombang dalam spektrum yang terlihat. Ada tiga komponen utama warna: rona, nilai dan saturasi. Rona di mana warna diposisikan pada roda warna dan apa yang kebanyakan orang pikirkan ketika mereka memikirkan warna. Nilai adalah terang atau gelap warna, berapa banyak hitam atau putih dicampur dengan itu. Saturasi adalah intensitas suatu warna.

Ada banyak cara yang berbeda untuk menggambarkan hubungan warna memiliki satu sama lain.. Pada pandangan pertama, skema warna "El collar de Tomas" muncul triadic, tetapi dalam kenyataannya itu adalah analog. Rona yang digunakan adalah yang warna merah, kuning dan oranye dengan abu-abu biru untuk aksen. Semua rona dibawa ke kisaran menengah nilai menyebabkan kuning muncul hampir hijau. Selain itu, dikelilingi oleh merah dan jingga, yang membantu untuk memperluas ilusi dengan bermain off melengkapi alam. Hasilnya adalah sangat hangat, sangat kaya rangkaian nada yang merasa kenyang dan bersemangat walaupun hanya terdiri dari tiga warna sangat erat terkait.

Sumber:http://www.digital-web.com/articles/principles_and_elements_of_design/

Teks asli Inggris

In this article we will be reviewing many of the topics previously covered, but we will be doing so using actual Web sites so that we can see how everything we have been talking about fits together.

Sumbangkan terjemahan yang lebih baik

WEB DESIGN PRINCIPLES

Prinsip desain web sama dengan prinsip desain pada umumnya. Dengan prinsip ini web dapat diletakkan secara efektif dan estetika. Web yang baik adalah web yang dapat bekerja secara efisien dan sesuai dengan tujuan awal. Beberapa dasar yang dapat dijadikan landasan dalam merancang galeri web yang berkualitas.

  1. Penemuan Komponen.

Penemuan komponen adalah tentang pertemuannya dengan klien dan menemukan apa yang mereka lakukan. Mengumpulkan informasi tentang siapa klien Anda dan bagaimana mereka menjalankan bisnis mereka adalah satu-satunya cara Anda akan mampu menghasilkan sebuah desain yang sesuai dan efektif.

  1. Pelaksanaan.

Pelaksanaan adalah untuk mengambil apa yang telah Anda pelajari dari klien dan menggunakannya untuk membuat desain. Tidak peduli apakah situs tersebut akan langsung terdiri dari HTML, template untuk sistem manajemen konten, atau Ruby on Rails aplikasi intinya adalah bahwa kita memiliki sebuah antarmuka untuk desain dan lembar kosong kertas.

  1. Navigasi.

Ini penting bahwa sistem navigasi situs ini mudah untuk mencari dan digunakan. Pengguna mengharapkan untuk melihat navigasi kanan di bagian atas halaman.

  1. Mengandung Block.

Setiap halaman Web memiliki sebuah wadah. Ini bisa dalam bentuk tubuh halaman tag, yang semuanya mengandung div tag. Unsur di luar batas-batas jendela browser kita akan dapat pergi ke ruang kosong.

  1. Logo.

Blok identitas yang muncul pada situs web harus mengandung logo perusahaan atau nama, dan duduk di bagian atas setiap halaman situs web. Blok identitas meningkatkan pengenalan merek dan memungkinkan pengguna mengetahui bahwa halaman mereka melihat adalah bagian dari satu situs.

  1. Isi.

Konten adalah raja. Sangat penting untuk menjaga blok konten utama sebagai titik pusat desain sehingga detik yang berharga tidak terbuang saat pengunjung memindai halaman untuk informasi yang mereka butuhkan.

  1. Footer.

Terdapat pada bawah halaman, footer biasanya mengandung hak cipta, kontak, dan informasi hukum, serta beberapa link ke bagian utama situs.

  1. Warna.

Warna adalah elemen dasar desain. Dalam desain ini bukanlah unsur terpenting, tetapi penggunaan warna yang baik menambah dimensi dan gaya desain situs Web.

  1. Kontras.

Kontras menunjukkan perbedaan antara elemen pada halaman. Besar dan kecil, hitam dan putih, persegi dan lingkaran - ini semua adalah kontras. Hal ini perlu mendapat perhatian khusus dalam membuat web.

  1. Arah.

Jurusan adalah unsur dasar desain. Ini lebih dari sekedar tata letak, sebaiknya desain dapat menggambarkan arah dan menunjukkan arah elemen di dalamnya.

  1. Garis dan Baris

Garis dan garis mengacu pada perbatasan dan pemisah pada desain yang terdiri dari satu atau beberapa baris. Bertindak sebagai garis pemisah dan menggambarkan berbagai bagian dari desain. Garis memiliki kerapatan, panjang, dan arah.

  1. Spasi.

Istilah desain grafis spasi (atau ruang negatif) secara harfiah mengacu pada setiap area halaman yang tidak tercakup oleh jenis atau ilustrasi. Memiliki ruang kosong pada halaman adalah sama pentingnya sebagai memiliki konten. Web yang direncanakan dengan hati-hati tanpa spasi, akan membuat desain merasa tertutup dalam, seperti ruangan yang penuh sesak. Spasi membantu desain untuk "bernapas" dengan membimbing pengguna mata di sekitar halaman, tetapi juga membantu untuk menciptakan keseimbangan dan kesatuan.

  1. Keseimbangan.

Keseimbangan adalah prinsip dasar desain.Saldo adalah gagasan bahwa unsur-unsur besar pada halaman Web harus seimbang di tengah atau memiliki jumlah besar sesuai elemen yang lebih kecil di sekitarnya untuk menjaga bahkan desain.

  1. Kedekatan.

Kedekatan adalah jelas, tetapi sering diabaikan cara untuk membuat grup objek merasa seperti satu unit. Menempatkan objek dekat bersama-sama dalam menciptakan tata letak titik fokus ke arah mana mata akan tertarik.


Inilah beberapa prinsip dalam desain web yang perlu diperhatikan. Semoga artikel ini dapat membantu anda dalam mempelajari desain Web principles.

Sumber: Beaird,Jason.2007.The Principles of Beautiful Web Design

PRINSIP-PRINSIP DESAIN WEB

Dengan adanya prinsip dalam desain web, anda dapat merancang halaman web yang efektif, memiliki estetika dan membuat orang agar tertarik untuk melihat web yang telah anda buat. Berikut ini prinsip-prinsip desain web agar pengunjung tertarik:

Memiliki Tujuan yang Jelas

Buatlah tujuan sespesifik mungkin dalam pembuatan website. Apabila website anda tidak memiliki tujuan yang terdefinisi dengan baik, maka anda akan menemui hambatan dalam internet yang penuh kompetisi dan persaingan ketat untuk mewujudkan keinginan Anda menjadikan website yang anda hasilkan menjadi salah satu website menarik yang patut dikunjungi.

Ingat, siapa Audience Anda

Siapa pengunjung website anda? berapa usia pengunjung website anda? Berapa lamakah waktu yang diluangkan pengunjung untuk mengunjungi website anda?

Waktu loading yang cepat

Apabila website anda gagal ditampilkan dengan sempurna dalam waktu beberapa detik, maka biasanya pengunjung enggan berlama-lama menunggu dan memutuskan untuk meninggalkan website anda.

Memiliki struktur desain yang tepat

Tentukan struktur penempatan konten website seperti header, footer, menu navigasi dan blok iklan. Usahakan struktur tersebut sama pada setiap halaman sehingga pengunjung tidak dibuat bingung dengan misalnya, menu yang berpindah-pindah. Usahakan agar pemilihan warna, penempatan logo website dan font yang digunakan konsisten pada setiap halaman sehingga pengunjung tidak merasa berpindah ke website lainnya. Jangan pernah menempatkan iklan yang lebih banyak daripada konten anda karena pengunjung tidak mencari iklan melainkan konten website anda.

Perlu diketahui bahwa website terbaik menyampaikan konten dalam tiga "klik" atau kurang dan sebisa mungkin menghindari scrolling.

Gunakan Item yang Bisa di Download secara Cepat

Lamanya waktu yang digunakan untuk menampilkan informasi yang diinginkan pengunjung dari website anda, merupakan salah satu alasan pengunjung untuk meninggalkan website anda. Biasanya gambar, video, audio dengan ukuran file lebih besar menyebabkan proses loading website kita menjadi lama, sehingga pengunjung merasa bosan dan tidak sabar. Jika anda terpaksa menggunakan gambar, video, audio dengan ukuran file yang besar, salah satu pilihannya adalah dengan menyertakan file yang beresolusi rendah dan berukuran lebih kecil (thumbnail) yang Anda link ke file sesungguhnya yang berukuran besar.

Ujilah Situs Anda secara Keseluruhan

Ujilah situs Anda menggunakan sebanyak mungkin browser yang ada saat ini, dan pada platform yang berbeda serta kecepatan modem yang berbeda. Karena kemungkinan besar pengunjung website anda menggunakan browser yang berbeda pula.

Sumber: http://www.geocities.com/webjurnal/juni2000/bwebsite.html