Ada 13 Cara menDesain Blog untuk Pemula:
1 . Membuat Keputusan Desain Goal - Driven
2 . Gunakan 2-3 Font , Max
3 . Gunakan 2-3 Warna , Max
4 . Pilih Skema Warna Sempurna Matching
5 . Cherish Kehalusan di Gradien , Shadows, dan Textures
6 . Terapkan Angles Cahaya Global untuk Gradien dan Bayangan
7 . Rangkullah Space Putih
8 . Pisahkan dengan Borders 1 - Pixel
9 . Melaksanakan Keselarasan Grid - Based
10 . Melaksanakan Hierarki anak judul dalam Konten Anda
11 . Desain dengan CSS
12 . Speed Up Desain Anda dengan Kecil , Mengulangi , Gambar Latar Belakang
13 . Menjaga Konsistensi dalam Panggilan Anda untuk Aksi
Desain blog dapat sederhana seperti menginstal tema dan menambahkan beberapa widget .
Tetapi jika Anda mengambil blog Anda serius dan Anda ingin visual menonjol , langkah pertama adalah memahami prinsip-prinsip desain . Setelah Anda memahami apa yang membuat desain blog yang baik , Anda dapat bekerja pada sendiri atau menemukan dan memenuhi syarat seorang desainer berbakat.
Berikut adalah 13 - tingkat ahli blog tips desain yang telah saya kumpulkan dari tiga tahun menjadi seorang desainer web freelance . Untuk membantu menggambarkan tips ini , aku akan menggunakan desain HelloBar.com ' s sebagai contoh .
1 . Membuat Keputusan Desain Goal - Driven
Tujuan dari desain adalah untuk mendapatkan website Anda untuk mengkonversi menuju tujuan Anda . Itu saja. Segala sesuatu yang lain datang sekunder .
Bagaimana Anda melakukannya ?
Anda perlu memiliki hirarki visual yang mengarah ke panggilan untuk bertindak . Dalam istilah sederhana, fitur utama atau serangkaian berita yang berakhir dengan panggilan untuk bertindak . Kemudian pasang Headline ini / ajakan untuk bertindak duo di tempat-tempat yang orang melihat paling ( yaitu atas homepage , atas sidebar , bawah posting , dll ) .
Goal - Driven Keputusan Desain - Hello Bar
Tujuan dari situs Hello Bar adalah untuk mendapatkan Anda untuk "Sign Up " atau " Cobalah Out " dan desain mereka membuat yang jelas.
2 . Gunakan 2-3 Font , Max
Paling-paling , gunakan salah satu font untuk logo Anda, satu untuk judul Anda , dan satu untuk konten tubuh Anda .
Lagi dan blog'll Anda terlihat berantakan .
Font - Hello Bar
Hello Bar memiliki font yang berbeda logo , huruf judul Pacifico , dan font tubuh standar sans -serif .
3 . Gunakan 2-3 Warna , Max
Blog Anda harus memiliki warna dasar , warna abu-abu , dan panggilan untuk warna tindakan.
Warna primer adalah warna pertama yang Anda ingin orang melihat dan warna terakhir yang Anda ingin mereka ingat. Untuk Hello Bar , itu biru muda .
Naungan abu-abu akan membantu Anda secara halus menekankan dan de - menekankan aspek-aspek tertentu dari desain Anda .
Panggilan untuk warna tindakan akan digunakan hemat seperti , Anda dapat menebaknya , warna yang Anda ingin orang melihat ketika mereka memutuskan apa yang harus dilakukan selanjutnya . Untuk Hello Bar , itu oranye .
Warna - Hello Bar
Hello Bar menggunakan cahaya biru, berbagai nuansa warna hitam / abu-abu, dan oranye cerah untuk menarik perhatian Anda .
4 . Pilih Skema Warna Sempurna Matching
Seiring dengan membatasi skema warna Anda , primer dan panggilan untuk warna tindakan harus melengkapi satu sama lain .
Untuk menemukan ilmiah pencocokan skema warna , mulai dengan warna dasar Anda dan menemukan warna tambahan dengan ColorSchemeGenerator.com .
Pencocokan Warna - Warna Generator Skema untuk Hello Bar
Hello Bar yang biru dan oranye yang sempurna melengkapi.
5 . Cherish Kehalusan di Gradien , Shadows, dan Textures
Web desain adalah seperti make up, kurang lebih. Dengan gradien Anda , bayangan , dan tekstur , membuat mereka begitu halus bahwa Anda harus melihat dari dekat untuk memberitahu bahwa mereka ada di sana .
Subconsiously , Anda akan melihat bahwa itu terlihat baik . Tapi Anda harus melihat lebih dekat untuk menyadari mengapa .
Gradien Bayangan Textures - Hello Bar
Jika Anda akan melihat lebih dekat , ada tekstur di latar belakang , logo memiliki bayangan , judul memiliki bayangan , dan tombol-tombol memiliki gradien halus.
6 . Terapkan Angles Cahaya Global untuk Gradien dan Bayangan
Sebuah tujuan bersama dengan seni adalah untuk membuatnya tampak seolah hidup seperti mungkin. Web desain tidak berbeda . Salah satu cara untuk melakukannya adalah untuk mempertahankan sudut cahaya global di seluruh gradien dan bayangan .
Pikirkan tentang hal ini . Jika matahari bersinar di atas meja penuh tombol dan surat dibangkitkan , mereka semua akan memiliki sama persis gradien - efek dan bayangan .
Global Cahaya Angles - Hello Bar
Hello Bar menggunakan 90 derajat sumber cahaya global. Logo bayangan, bayangan judul , dan tombol gradien secara konsisten di 90 derajat .
7 . Rangkullah Space Putih
Selain efektif menggunakan padding dan margines , cara terbaik untuk merangkul ruang putih adalah hanya menyingkirkan segala sesuatu yang tidak berkontribusi ke arah mencapai tujuan Anda .
Apakah Anda benar-benar membutuhkan tag awan ? Tidak, Anda tidak. Tidak ada yang menggunakan mereka .
Space Putih - Hello Bar
Hello Bar menggunakan " putih" ruang untuk menghilangkan semua gangguan dan menarik perhatian panggilan mereka untuk tombol tindakan .
8 . Pisahkan dengan Borders 1 - Pixel
Borders membantu untuk membersihkan desain Anda dan untuk visual memisahkan bagian yang berbeda . Gunakan perbatasan 1 - pixel karena mereka bersih dan segar .
1 Pixel Borders - Hello Bar
Hello Bar menggunakan sekelompok berlari dan padat , batas 1 - pixel untuk memisahkan konten mereka .
9 . Melaksanakan Keselarasan Grid - Based
Ini adalah salah satu tips lebih rumit . Jacob Cass , dari HANYA ™ Kreatif , memperkenalkan saya ke 960 jaringan . Ini template Photoshop yang membantu Anda menyesuaikan desain Anda dengan sempurna dan tepat .
Apakah atau tidak Anda menggunakan 960 grid, bagian yang berbeda , bagian, dan blok teks dalam desain Anda perlu berbaris secara vertikal .
Grid Keselarasan Berbasis - Hello Bar
Saya tidak yakin apakah Hello Bar awalnya dirancang dengan 960 Grid , tapi semuanya sempurna sejalan semua jalan ke bawah halaman.
10 . Melaksanakan Hierarki anak judul dalam Konten Anda
Jika Anda ingin berkomunikasi serangkaian pikiran atau proses ( yaitu posting blog ) , gunakan hierarki anak judul ditambah dengan body copy singkat untuk membuatnya mudah untuk bergerak ke bawah halaman .
Dari sudut pandang desain , subjudul memecah konten tetapi mereka juga membuat scannable dan lebih mudah untuk mengkonsumsi .
Anak judul Hierarki - Hello Bar
Hello Bar menggunakan serangkaian subjudul yang dirancang dalam " Cara Kerja " bagian dari situs mereka .
11 . Desain dengan CSS
Proses mengambil desain dan menaruhnya di situs web Anda lebih rumit daripada yang Anda pikir . Pada intinya, Anda mengambil gambar dari file Photoshop Anda dan menetapkan mereka sebagai latar belakang daerah tertentu dengan HTML dan CSS .
Jika Anda memiliki banyak daerah latar belakang yang rumit , maka ini berarti bahwa website Anda akan perlu memuat banyak gambar yang akan memperpanjang waktu loading Anda .
Salah satu cara untuk berkeliling ini adalah untuk merancang detail sederhana dengan CSS . Berikut adalah beberapa elemen desain Anda dapat menambahkan dengan CSS :
Borders - {border : 1px dashed # CCC ; }
Frames - {border : 1px solid # CCC ; padding: 1px ; }
Teks Bayangan - { text-shadow : 1px 1px 1px # CCC ; }
Kotak Bayangan - { box-shadow : 10px 10px 5px # CCC ; }
Corners bulat - { border-radius : 5px ; }
Anda juga dapat menggunakan CSS untuk membuat gradien , transisi , animasi , font- wajah , dll, tapi awal ini untuk mendapatkan rumit dan tidak muncul di browser lama .
Desain dengan CSS - Hello Bar
Hello Bar menggunakan padding, perbatasan , dan bayangan kotak menambahkan loading cepat CSS styling untuk foto kesaksian mereka.
12 . Speed Up Desain Anda dengan Kecil , Mengulangi , Gambar Latar Belakang
Jika Anda menggunakan gambar untuk membuat latar belakang Anda , membuat mereka sekecil Anda dapat sehingga mereka memuat lebih cepat . Kemudian gunakan CSS untuk membuat tema repeat-x/repeat-y .
Repeatable Gambar Latar Belakang - Hello Bar
Ini adalah gambar latar belakang sebenarnya yang berulang secara horizontal di latar belakang Bar Hello membuat beban situs lebih cepat .
13 . Menjaga Konsistensi dalam Panggilan Anda untuk Aksi
Tip terakhir saya untuk Anda adalah untuk mempertahankan desain yang konsisten di tombol panggilan untuk tindakan Anda . Ini membantu orang menemukan apa yang mereka cari . Plus, jika mereka melihat tombol yang sama tiga kali pada halaman, mereka akan melihat dan berpikir , " Aku mungkin harus klik itu . "
Panggilan untuk Aksi Konsisten - Hello Bar
Hello Bar memiliki tiga panggilan utama untuk tombol tindakan di situs mereka dan mereka semua ditata persis sama .
Jika Anda belum pernah memeriksa Hello Bar , saya mendorong Anda untuk melakukannya . Saya menggunakannya di blog saya dan tampaknya akan bekerja dengan baik .
Firman Final
Jika Anda bukan seorang desainer atau programmer , saya tidak mengharapkan Anda untuk menerapkan tips ini segera.
Tapi begitu Anda ingin meng-upgrade desain Anda, Anda akan dapat mengajukan pertanyaan desainer Anda seperti , " Bila Anda mengkonversi PSD ke HTML , elemen desain yang Anda menciptakan dengan CSS sehingga kita tidak rawa ke situs dengan a bunch gambar latar belakang besar ? "
Pada catatan lain , satu-satunya aturan di sini yang tidak bisa dipecahkan adalah # 1 . Sisanya didasarkan pada praktek-praktek terbaik dan pikiran pribadi saya pada desain . Bend mereka yang Anda inginkan .
Seperti biasa , jika Anda membutuhkan bimbingan dengan tips ini , memberikan komentar di bawah ini dan saya akan mencoba untuk membantu Anda keluar .
