Cara desain untuk pemula

Cara desain untuk pemula. Blog Desain untuk Pemula. Peter Posting berikut adalah posting tamu dari desainer blog yang sangat berbakat, Peter Flaschner, sebagai bagian dari blogging untuk seri pemula .

Hi semua. Aku Peter Flaschner, pendiri dan diktator kreatif di The Blog Studio . Aku akan memandu Anda melalui proses yang kita lalui ketika merancang sebuah blog atau website lain. Ini adalah bagian salah satu dari dua. Ketika kita sudah selesai, kita akan memiliki tema WordPress yang sempurna yang super fleksibel bagi siapapun yang ingin menghasilkan uang dengan blog.

Desain dapat menambah nilai luar biasa ke blog. Ketika datang untuk membuat uang dengan blog Anda, desain web yang tepat dapat membuat dampak besar pada bottom line. Untuk beberapa alasan, saya mendapatkan banyak perlawanan ketika saya mengatakan ini. Saya pikir itu ada hubungannya dengan definisi seseorang dirasakan desain. The khas Tanggapan saya dapatkan adalah situs jelek melakukannya dengan baik dengan adsense. Yang mungkin sangat baik menjadi kenyataan. Aku yakin meskipun, bahwa situs-situs yang sama akan melakukan bahkan lebih baik dengan desain yang tepat.

Sebelum kita masuk ke dalam ini, saya perlu untuk menghilangkan satu mitos lagi: desain tidak tentang membuat hal yang cukup. Ini tentang membuat sesuatu bekerja dengan kemampuan terbaik mereka. Mari saya kutip dari dictionary.com:

    Untuk merumuskan rencana untuk; merancang: merancang strategi pemasaran untuk produk baru.
    Untuk merencanakan dalam bentuk sistematis biasanya grafis,: desain bangunan, merancang program komputer.
    Untuk membuat atau merancang untuk tujuan atau efek tertentu: sebuah permainan yang dirancang untuk menarik segala usia.
    Untuk memiliki sebagai tujuan atau tujuan; berniat.
    Untuk membuat atau menjalankan secara artistik atau sangat terampil.

Jadi, tanpa basa-basi, mari kita merancang sebuah situs. Inilah yang akan kita butuhkan: pensil, kertas, dan editor grafis (seperti Photoshop, Illustrator, Freehand, atau Gimp).

Kita akan memulai dengan mengumpulkan banyak informasi. Aku tahu naluri adalah untuk melompat langsung ke dalam program gambar Anda dan mulai main-main, tapi itu bukan pendekatan yang terbaik. Anda akan melihat mengapa karena kami bergerak melalui ini.

Kita akan merancang sebuah situs untuk problogger fiksi. Orang ini (sebut saja namanya Fred) menulis tentang jam tangan. Dia mendapatkan beberapa ratus dolar per bulan dari situs saat ini, dan ingin melangkah bahwa sampai.

Langkah 1: Identifikasi tujuan situs (? Apa yang Anda coba lakukan Bagaimana Anda akan mencapainya)

Kami sedang merancang situs ini untuk meningkatkan keuntungan Fred. Kita akan melakukan hal ini dengan merancang kerangka kerja yang fleksibel untuk Fred untuk bereksperimen dengan penempatan iklan, dengan meningkatkan perhatian grabbing aspek untuk menangkap lebih banyak pengunjung pertama kali, dan dengan meningkatkan kekakuan situs, memberikan pengguna lebih banyak kesempatan untuk melihat iklan bahwa mereka ingin untuk mengklik.

Sementara kami berada di itu, kita akan menggunakan plugin kami baru-baru ini dikembangkan yang akan memberikan Fred kontrol atas warna dari berbagai elemen situs nya. Dengan cara ini, dia akan dapat menjaga hal-hal terlihat segar.

Langkah 2: Identifikasi audiens Anda (yang mereka, dan di mana mereka datang dari)

Penonton Fred terdiri dari dua kelompok: kacang menonton hardcore, yang membaca situs Fred untuk berita dan ulasan dari timepieces terbaru, dan orang-orang berbelanja untuk jam tangan, yang datang ke situs melalui pencarian untuk merek dan model tertentu.

Langkah 3: (? Apa fungsi situs tidak perlu memiliki dalam rangka memenuhi tujuannya) Mengidentifikasi kebutuhan spesifik

Fleksibilitas dengan minimal rewel adalah kunci di sini. Kami ingin Fred untuk dapat memindahkan blok iklan sekitar tanpa harus main-main dengan kode. Kami juga ingin Fred untuk dapat mengubah sampai tampilan situs untuk menjaga hal-hal segar, sekali lagi, tanpa bermain-main dengan kode.

Kami juga ingin meningkatkan kekakuan situs. Kami akan melakukan ini dengan termasuk "posting favorit" daftar dan link terkait di posting footer.

Kami akan menampilkan daftar kategori, untuk memungkinkan pembaca untuk menjelajahi situs dengan cara non-linear, dan bar pencarian, sehingga pembaca dapat mencari merek atau model tertentu. Kami juga ingin menyertakan blogroll, untuk berbagi kasih. Akhirnya, kami ingin menunjukkan komentar baru-baru ini, sehingga pengunjung situs biasa Fred dapat bersaing dengan percakapan secara keseluruhan.

Langkah 4: wireframes Draw (sketsa kasar untuk bereksperimen dengan penempatan elemen dan tata letak)

Sekarang menyenangkan dimulai. Saya menggunakan sebuah program yang luar biasa yang disebut OmniGraffle (mac saja) untuk bermain-main dengan tata letak situs dan hirarki elemen (lebih lanjut tentang ini dalam beberapa saat). Saya ingin tetap keluar dari editor grafis saya, karena potensi untuk terjebak dalam merancang elemen visual begitu kuat. Anda benar-benar ingin menghindari melompat ke bagian visual dari desain pada tahap ini, karena Anda hanya akan berakhir tersesat.

Apa yang kami lakukan sekarang adalah membangun medan yang kita akan meletakkan elemen-elemen visual kita berakhir. Melewatkan tahap ini adalah desainer tunggal terbesar kesalahan pemula buat.

Berikut ini adalah contoh dari situs Fred pada tahap pertama pembangunan:

Wireframe

Seperti yang Anda lihat, tidak ada "design" per se hadir. Apa yang kami lakukan adalah mencari tahu meskipun penempatan optimal dari berbagai blok yang membentuk situs kami. Kami mendirikan hirarki dari elemen halaman, memutuskan apa yang paling penting, di mana kita ingin mata para pengguna untuk bergerak.

Ini adalah daerah yang sangat kaya studi. Aku akan mencoba untuk mendidih itu ke itu yang paling dasar (data ini berasal dari sebuah artikel oleh Peter Faraday Pada dasarnya kami melakukan 2 fungsi segera setelah mendarat di sebuah halaman web:.. pencarian, dan scan Fungsi pencarian adalah mata kita mencari titik masuk yang menonjol ke dalam halaman. Kami tertarik dengan berikut (dalam urutan)

    gerakan
    ukuran
    gambar
    warna
    gaya teks (pilihan font, font yang berat)
    posisi

Setelah kami telah menentukan di mana kita dapat mulai membaca, kita menentukan apa yang harus dibaca dengan memindai halaman. Kami melihat kelompok benda, dan kedekatan objek individu untuk memutuskan apa yang paling penting untuk membaca terlebih dahulu.

Mengetahui hal ini, kita dapat membuat keputusan dalam tata letak dan styling halaman kami untuk meningkatkan peluang menghasilkan respon yang diinginkan (misalnya, mengklik iklan).

The eagle eyed antara Anda mungkin telah menyadari bahwa kita memiliki blok iklan lebih dari Google saat ini memungkinkan. Kami tidak akan menggunakan mereka semua pada waktu yang sama, tapi kami sedang membangun mereka sehingga Frank memiliki kemampuan untuk memindahkan iklan di sekitar.

Langkah 5: Membuat papan mood (koleksi gambar, warna, jenis, dll yang memberikan nuansa Anda bertujuan untuk).

Pada pekerjaan yang lebih besar, kami mengumpulkan sekelompok citra yang terasa seperti proyek di tangan. Kami melihat melalui majalah (majalah fashion tambang emas), buku, dan web untuk warna, tekstur, layout, dll Kami memotong-motong majalah atau hal-hal print out dan benar-benar membuat sebuah papan yang merangkum suasana hati kita bertujuan untuk buat untuk situs.

Untuk pekerjaan yang lebih kecil, kita pergi melalui proses yang sama, tetapi membuat papan virtual bukan. Ini pada dasarnya adalah dokumen besar dalam Photoshop yang dapat kita sisipkan banyak hal ke dalam. Gambar-gambar ini menjadi tempat awal kami untuk menciptakan palet warna, menjelajahi tekstur dan bentuk, dan umumnya bertindak sebagai inspirasi.

Membuat salah satu dari hal-hal ini tidak butuh waktu lama - pergi dan mencobanya, Anda akan terkejut berapa banyak membantu.

Berikut ini adalah contoh dari sebuah proyek baru-baru ini:

Suasana hati-Board

Langkah 6: desain Visual

Setelah menyelesaikan semua hal di atas, desain visual adalah pekerjaan yang jauh lebih mudah dikelola daripada telah kami melompat langsung di di awal. Sekarang kita dapat berkonsentrasi pada situs keseimbangan, energi, dan gaya.

Satu kesalahan web pemula desain besar membuat tidak meninggalkan ruang yang cukup di sekitar unsur-unsur individu. Ini disebut "ruang putih". Perhatikan bahwa tidak harus putih! Sebaliknya, istilah ini mengacu hanya untuk ruang kosong.

Pada titik ini, Anda harus cukup baik bersama dalam desain Anda. Aku akan meninggalkan Anda sekarang dan mulai bekerja pada desain Fred.

Besok, kita akan mengubah grafis statis kita menjadi tema WordPress Cara desain untuk pemula.