Kiat dan sumber daya untuk desainer pemula


189

Berkat internet, desain grafis dan pemrograman menjadi bidang yang tumpang tindih.

Sebagai seorang programmer, saya terus-menerus menemukan diri saya membutuhkan pengetahuan dasar tentang Desain Grafis, tetapi mengalami kesulitan menemukan sumber belajar desain grafis yang ringkas namun ringkas, dan sebagai gantinya biasanya menemukan potongan-potongan pengetahuan yang berlaku untuk tugas yang dihadapi.

Bisakah kalian menawarkan beberapa tips atau merekomendasikan beberapa buku bagus, tutorial, blog, dan situs web yang memberikan gambaran tingkat pemula dari desain web yang, dalam pengalaman Anda, bahan pembelajaran yang efektif dan berkualitas tinggi. Saya tidak mencari kiat tentang cara menggunakan alat pengeditan gambar, tetapi dengan asumsi dasar tentang hal itu, sumber daya dan saran mana yang paling membantu seorang desainer baru membuat desain yang terlihat profesional?


Saya menemukan ini bermanfaat: net.tutsplus.com/articles/lectures/design-for-developers Ini layak untuk ditonton.
dan_waterworth

Jawaban:


180
  • Tetap Sederhana - Jangan mencoba melakukan sesuatu yang terlalu mewah atau penuh petualangan pada awalnya. Dapatkan dasar-dasarnya terlebih dahulu, maka Anda dapat mulai bereksperimen. Jangan mencoba meniru antarmuka komputer Star Trek.
  • Bersikap Konsisten - Desain yang konsisten adalah bagian dari fondasi desain yang baik. Pantau margin, ukuran, dan penempatan Anda dan pertahankan sepanjang desain.
  • Remove Clutter - Hanya sertakan elemen yang diperlukan untuk desain. Hapus yang lainnya.
  • Prioritaskan - Apa tujuan utama desain? Tekankan tujuan itu. Buat itu jelas.
  • Use Whitespace - Memungkinkan margin yang tepat. Blok teks besar dengan sedikit atau tanpa margin tidak bisa dibaca. Ditto untuk elemen desain lainnya.
  • Use A Color Palette - Anda tidak harus menggunakan total lebih dari 4-5 warna.
  • Font yang Konsisten - Tetap menggunakan satu atau dua font. Gunakan secara konsisten, biasanya satu untuk pos, satu untuk teks paragraf. Hitung dan pertahankan ukuran font, ketinggian garis, dan spasi baris yang konsisten. Jangan gunakan Comic Sans kecuali Anda bisa menangkis zombie velociraptor yang fanatik.
  • Desain Dulu - Desain tidak boleh ketinggalan jaman; harus menjadi anggota kelas satu dari tahap perencanaan. Desain akan menjadi cara pengguna Anda berinteraksi dengan pemrograman Anda dan mereka akan membentuk pendapat mereka terlebih dahulu dan sebagian besar didasarkan pada desain Anda. Berikan desain pentingnya yang tepat.

Adapun sumber daya, Anda memeriksa salah satu situs web berikut:


13
"Jangan mencoba meniru antarmuka komputer Star Trek." Hahaha, brilian. : D Terima kasih atas jawaban yang informatif.
Rob Howard

2
Lihat hackdesign.org ini adalah pelajaran mingguan yang sangat bagus tentang desain untuk peretas.
Augustin Riedinger

1
Tuts PSD - tautan buruk!
Dmitri Zaitsev

1
Saya akan menambahkan ke daftar ini betapa pentingnya pengguna, desain harus dapat digunakan terlebih dahulu dan segala sesuatu yang menghalangi kegunaan harus dibuang
Toni Leigh

Jadi pada dasarnya semua yang Anda lakukan dengan kode. Tetap menggunakan tab atau spasi. Gunakan spasi putih. Hapus kekacauan, dll.
Bald Bantha

29

Indeks dasar-dasar desain Jim Krause memberi saya ringkasan dasar-dasar komposisi, warna, dan jenis yang sangat bagus. Saya bukan penggemar berat sebagian besar contohnya sendiri, tetapi mereka mengilustrasikan poinnya dengan sangat baik dan dia menyentuh beberapa hal berharga yang belum saya lihat disebutkan di banyak tempat lain. Dan mungkin yang paling penting, membacanya membuat saya sangat bersemangat untuk pergi keluar dan bereksperimen dengan ide-ide yang diperkenalkannya.


24

Kadang-kadang ada sedikit tumpang tindih antara pengembangan web dan desain web, tapi saya tidak berpikir pengembang web harus mencoba menjadi desainer penuh waktu kecuali mereka mau berusaha sebanyak mungkin ketika mereka belajar program. Itu bukan sesuatu yang bisa Anda coba-coba pada akhir pekan dan menjadi ahli.

Jika demikian, Anda dapat belajar menjadi perancang web Anda sendiri (yaitu, mendesain web Anda sendiri untuk semua situs yang Anda kerjakan), maka saya sangat merekomendasikan Anda mendapatkan beberapa pelatihan formal (bahkan jika itu hanya mengambil beberapa kursus desain perguruan tinggi) untuk mempelajari dasar-dasar desain dan komposisi visual. Buku desain bergaya buku teks seperti yang diposting Damon dapat membantu, tetapi Anda harus benar-benar melakukan semua latihan dalam buku ini dan pastikan Anda memahami materi. Tetapi yang paling penting, Anda perlu menghabiskan banyak waktu untuk melihat-lihat (menelusuri galeri desain online, membolak-balik majalah dan iklan majalah, dll.) Dan membuat desain (unduh beberapa brief desain praktik online atau ikuti kontes desain online).

Jika itu untuk membantu Anda berkomunikasi dengan desainer web / grafis yang bekerja dengan Anda, maka cukup dapatkan buku yang mengajarkan Anda kosa kata (misalnya konsep tipografi) dan berfokus pada kegunaan , aksesibilitas , dan desain UX mungkin merupakan penggunaan waktu Anda yang terbaik. Dengan cara ini, Anda dapat terlibat dalam arahan kreatif proyek dan membantu merancang antarmuka, tetapi perancang yang menciptakan "tampilan" atau estetika situs.

Virtuosi Media mencantumkan banyak sumber daya yang bagus (jaringan Tutsplus pada umumnya bagus, dan Smashing Magazine adalah bacaan wajib untuk setiap pengembang / perancang web), yang ingin saya tambahkan:


2
Saya setuju dengan sebagian besar poin Anda, dan saya tidak mempertimbangkan perubahan karier atau hal-hal seperti itu :-) Di tempat kerja dan jika saya memulai proyek pribadi yang sangat serius tentu saja para profesional melakukan pekerjaan itu. Tapi saya dan saya berasumsi banyak programmer lain suka membangun proyek mini kecil dan tidak bisa menyewa pro untuk sesuatu yang akan mendapat 4 kunjungan sebulan. Jadi dengan upaya-upaya ini saya merancang sendiri, dan semakin baik penampilannya, semakin besar peluang mereka untuk lepas landas. Saya juga menikmati proses mencoba menciptakan seni digital. Ini adalah istirahat yang bagus dari pengkodean dan hasil yang layak membuatnya lebih menyenangkan.
Andy Groff

4
@Andy Groff: Kedengarannya seperti rencana yang bagus. Saya terutama merujuk pada pengembang web yang mencoba menangani desain sendiri untuk proyek komersial dan akhirnya menghabiskan 95% waktu mereka di bagian pengembangan dan kemudian mencoba untuk melakukan desain dalam 3-4 hari terakhir sebelum batas waktu. Tapi saya pikir siapa pun bisa mendapatkan sesuatu dari mempelajari keterampilan baru dan memperluas wawasan mereka. Ini seperti bagaimana atlet melakukan latihan silang, yang membantu meningkatkan kinerja mereka secara keseluruhan.
Calvin Huang

1
Ada BESAR tumpang tindih dalam hal peran. Peran-peran itu biasanya tidak ditangani oleh orang yang sama, tentu saja.
DA01

19

Saya seorang programmer dan bagi saya buku-buku berikut ini sangat membantu bagi saya:

  • Buku Desain Non-Desainer oleh Robin Williams: Buku ini membahas dasar-dasar desain grafis.
  • Menggambar di Sisi Kanan Otak oleh Betty Edwards: Buku untuk mengembangkan keterampilan menggambar Anda.
  • The Humane Interface oleh Jef Raskin: Buku ini memancing beberapa pemikiran tentang desain antarmuka pengguna.

15

Mungkin tidak relevan untuk semua kasus, tetapi untuk prgrammer web, salah satu hal terbesar yang menonjol bagi saya, yang mungkin sedikit menjembatani kesenjangan, adalah mempelajari CSS dalam dan luar, karena dapat mendesain dengan baik tidak berarti apa-apa jika Anda tidak dapat mengintegrasikannya ke dalam proyek yang Anda buat.


12

Pada tahun 2004 saya menemukan diri saya di tengah-tengah antara kedua dunia, seperti yang telah saya alami hampir sepanjang hidup saya - saya telah melakukan web sejak HTML 3.2 pada hari-hari dot-com; dibesarkan dengan Apple // e oleh orang tua (koreografer dan pendidik) yang memungkinkan dan mendorong saya untuk menghabiskan banyak waktu dengan seni. Desain bukanlah seni, dan pada kenyataannya beberapa pola algoritmiknya lebih sesuai dengan pemrograman, baik Anda melakukan web atau tidak.

Histogram rak buku

  • Bookshelf Histogram - cetakan yang saya buat di sekolah pascasarjana yang desain-y dan pengembang-y.

Tapi ya, 2004: Saya membagi perbedaan ketika saya pergi ke sekolah pascasarjana, di mana saya pertama kali mendapatkan pendidikan tipografi kelas satu, dan kemudian kebebasan untuk menjelajah - selama waktu yang lama kecenderungan geekier saya sangat berguna.

Jadi mungkin pertimbangkan pendidikan tinggi, atau apa pun yang juga terlibat dalam cara yang sangat memakan waktu untuk Anda. Semoga beruntung dengan itu.


12

Pelajari banyak tentang tipografi.

Dari klasik ...

Bentuk Kitab, Tschichold
Jan Tschichold

Bukan badut ...

The End of Print: Desain Grafik David Carson
David Carson

Tipografi yang strategis dan efektif adalah salah satu kualitas yang paling umum tidak ada di bidang ini (dan selalu ada).

Saya biasanya dapat merekrut seorang desainer yang sepenuhnya didasarkan pada penanganan tipenya. Sekitar 80% dari cerita tepat di resume yang diatur.

Awal yang baik (gratis) adalah adaptasi terinci dari sumber daya penting dari Robert Bringhurst ini untuk aplikasi ke web.

Unsur-unsur Gaya Tipografi, Bringhurst
Unsur-unsur Gaya Tipografi, Bringhurst

Ini adalah pertimbangan yang lebih luas yang berkaitan dengan interaksi jenis dan tata letak.

Sistem grid dalam desain grafis
Sistem Grid dalam Desain Grafis, Brockmann


10
  1. Pikirkan secara kritis tentang objek yang dirancang di sekitar Anda

    Hampir segala sesuatu di lingkungan buatan manusia memiliki semacam desain di belakangnya, apakah itu grafis, situs web, atau aksesori fesyen.

    Perhatikan seberapa baik fungsi desain untuk tujuan yang dimaksudkan, dan juga tampilannya.

  2. Pikirkan desain sebagai cara untuk mengisi kebutuhan atau menyelesaikan masalah

    Meskipun berusaha untuk membuat hal-hal terlihat bagus, desain berbeda dari jenis seni lain karena memiliki aplikasi praktis.

    Logo, misalnya, adalah jenis desain grafis yang membantu membuat merek atau perusahaan cepat dikenali.

    Artikel pakaian melayani tujuan menutupi tubuh, selain membuat pemakainya terlihat lebih menarik.

  3. Berlatih berkomunikasi secara visual.

    Desainer harus dapat membuat gambar atau representasi lain dari desain mereka untuk memperbaikinya dan menjelaskannya kepada orang lain, seperti kolega dan produsen desain.

    Menggambar adalah alat yang ampuh untuk desainer, tetapi jangan khawatir jika Anda tidak dapat menggambar secara fotorealistik. Gambar desainer tidak harus berupa karya, hanya cara untuk dengan cepat menangkap ide yang akan mengarah pada produk jadi. Menelusuri juga sepenuhnya dapat diterima.

    Selain gambar, desainer juga menggunakan hal-hal seperti tiruan, prototipe, dan pencitraan komputer untuk memvisualisasikan desain mereka.

  4. Jelajahi bagaimana segala sesuatunya dibuat

    Ketika Anda bekerja sebagai desainer, Anda tidak hanya harus mempertimbangkan apa yang enak dipandang, Anda harus selalu mempertimbangkan bagaimana desain Anda akan diimplementasikan.

    Untuk objek seperti wadah telepon seluler, perancang industri perlu memikirkan jenis plastik dan proses pencetakan apa yang akan digunakan, dan bagaimana setiap bagian akan disatukan.

  5. Temukan sumber informasi yang bagus

    Selain majalah desain, cari buku tentang proses, prinsip, dan metode desain.

    Coba lihat di buku teks dan video teknis untuk hal-hal konstruksi pakaian, metode pembuatan, dan berbagai teknik kerajinan.

    Belajar tentang desain lebih dalam dari membaca majalah mode dan dekorasi, meskipun ini adalah sumber yang bagus untuk tren saat ini.

  6. Mengembangkan keterampilan desain Anda

    Belajar dan berlatih itu bagus, tetapi hal yang benar-benar akan membawa desain Anda ke tingkat berikutnya adalah pengalaman dunia nyata.

  7. Lakukan kesalahan dengan cepat

    Anda akan membuat banyak kesalahan, dan semakin cepat Anda bisa melewatinya, semakin baik.

  8. Selalu siap untuk menangkap ide.

    Cari inspirasi di mana-mana. Inspirasi tidak harus datang dari desain lain atau tren desain - sering kali itu bisa datang dari alam atau hal-hal yang terjadi secara kebetulan.

Buku & bahan

http://www.alistapart.com

http://webdesignledger.com

Majalah Hancur

Tuts PSD

Abuzeedo

Stan UX


7

Beberapa hal yang perlu diingat:

  1. Setiap desain memecahkan masalah

Berhentilah memikirkan desain dalam hal "Bagaimana cara membuat ini cantik?" dan mulai memikirkannya dalam istilah "Bagaimana cara membuat ini semudah mungkin untuk digunakan secara manusiawi?"

Ketika Anda membuat situs web, ini berarti bahwa, dalam arti luas, Anda sedang memecahkan masalah bisnis .

Ada situs web untuk mewujudkan tujuan bisnis .

Para pengguna situs web juga memikirkan tujuan mereka sendiri — mereka mungkin ingin membeli sesuatu, membandingkan produk, membaca topik, dll.

Adalah tugas Anda sebagai perancang untuk membantu bisnis dengan memastikan bahwa sebanyak mungkin pengguna memenuhi tujuan bisnis dan membantu pengguna menavigasi situs web sehingga mereka dapat memenuhi tujuan mereka sendiri.

Misalnya, Anda merancang toko e-commerce: Tujuan bisnis di sini adalah menjual produk. Dan tujuan pengguna adalah untuk menemukan apa yang ingin mereka beli, secepat mungkin dan memeriksa, secepat mungkin.

Sebagian besar dari proses desain digunakan untuk mencari tahu masalah, membangun profil pengguna, memikirkan cara mewujudkan tujuan bisnis, dll.

Warna, font, tata letak, setiap keputusan desain yang Anda buat harus ditentukan oleh tujuan situs web .

  1. Ini pengulangan yang membuat segalanya terlihat cantik .

Tentang itulah konsistensi.

Misalnya, pemasangan font. Font dipasangkan berdasarkan pada sifat yang serupa, pada pengulangan detail.

Ini pertandingannya: Farnham dan Benton Sans.

Farnham dan Benton Sans adalah pasangan yang baik

Menurut posting ini di sini 2 kedua font ini cocok karena:

[...] wajah-wajah itu sama dalam squatness dari huruf kecil mereka, yang memiliki ascenders dan descenders yang jelas pendek. [...] Huruf kecil keduanya lebar.

Pengulangan sifat-sifat tertentu membuat 2 font ini bekerja sama dengan baik. Anda dapat melihatnya di halaman web di sini 3 .

Pengulangan membawa harmoni dalam desain. Dan harmoni membuat desain terlihat indah.

Tetapi, seperti yang Anda lihat, Farnham dan Benton Sans juga kontras —Farnham adalah font serif dan Benton adalah sans serif.

Mengapa perlu ada perbedaan? Kami ingin memperkenalkan persamaan dalam desain, bukan?

Ya, tapi pengulangan yang terlalu banyak membuat desain Anda kusam dan sulit digunakan .

Obatnya kontras.

  1. Kontras membantu pengguna menemukan jalannya

Ini membantu mereka membedakan elemen yang berbeda satu sama lain. Ini membantu mereka menemukan elemen kunci seperti heading, navigasi, tombol.

Semakin penting elemen, semakin kontras dengan lingkungannya.

Gunakan pengulangan untuk membuat desain Anda konsisten. Seperti yang dikatakan orang lain — 2 font palet warna terbatas, dll.

Gunakan kontras saat Anda benar-benar perlu memisahkan elemen dari elemen lainnya.

Semua itu menyenangkan untuk diketahui, tetapi ... masih tidak membantu Anda mendesain situs web berikutnya, bukan?

Yah, saya punya solusi untuk itu juga.

Langkah 1 untuk menjadi lebih baik di desain web adalah mengamati dan menyerap karya orang lain. Banyak sekali. Dari situlah "inspirasi" berasal.

Lihatlah seratus desain yang Anda sukai, analisis, dan Anda akan mulai melihat pola. Otak Anda akan membantu Anda menggabungkan pola-pola ini ke dalam desain Anda sendiri yang akan menjadi variasi dari semua desain serupa yang Anda lihat. Anda tidak perlu membuat sesuatu yang "unik".

Ringkasan: Lain kali Anda mulai merancang untuk proyek sampingan Anda

Telusuri selusin situs web / aplikasi web serupa dan buat sketsa cepat desain mereka. Perhatikan alur kerja apa yang mereka gunakan. Mengapa mereka menggunakannya? Perhatikan bentuk, warna, dan font apa yang mereka gunakan.

Kemudian lakukan proses ini untuk membuat desain Anda sendiri:

  1. Tentukan proyek. Benamkan diri Anda ke dalam proyek & kenal lebih banyak tentang:

    1. Tujuannya, hasil yang dimaksudkan

    1. Pengguna (masa depan)
    2. Pengalaman yang dimaksud untuk para pengguna / pengunjung
    3. Pencitraan di balik proyek
  2. Dapatkan sumber daya yang dibutuhkan. Dapatkan konten (sampel) dari Anda (pinjam dari situs serupa)
  3. Berikan bentuk pada konten

    1. Pilih jenis huruf untuk mengeset konten (pilih satu yang sesuai dengan suasana hati dan pesan situs)
    2. Pilih ukuran font untuk salinan tubuh
    3. Hasilkan skala modular (tabel dimensi harmonik proporsional) dari ukuran font salinan tubuh (menggunakan Skala Jenis - Kalkulator Visual)
    4. Buat sketsa tata letak yang berbeda berdasarkan persyaratan proyek
    5. Bangun tata letak (dalam HTML & CSS) dengan bantuan skala modular: lebar kolom, tinggi garis, ukuran tajuk, margin bawah, kolom (jika perlu)
    6. Oleskan warna sesuai dengan pedoman merek

Anda dapat membaca lebih lanjut tentang setiap langkah dari proses ini di sini .


6

Beberapa lagi:

  1. Lihatlah sekilas koleksi situs web inspirasional untuk mendapatkan ide. Koleksi Motherload dari Koleksi Situs Web Inspirasional mencantumkan beberapa koleksi. Dua situs bagus lainnya adalah siiimple.com dan minimalsites.com .

  2. Saran Virtuosi Media 'Hapus Kekacauan' adalah ide yang pasti, tetapi situs dengan kekacauan yang dilakukan oleh seorang pemula terlihat lebih baik daripada situs minimalis yang dilakukan oleh seorang pemula. Kekacauan agak menyamarkan elemen desain yang buruk lainnya, mengganggu konten. Situs bisnis tipikal memiliki terlalu banyak kekacauan, seperti halnya hampir semua templat, tetapi masih terlihat cukup profesional.

    Dibutuhkan koneksi intim dengan font, kontras, ruang negatif, pewarnaan, kerapatan, aliran, ... untuk membuat situs yang benar-benar dirancang dengan baik, efisien, yang bernafas dengan baik.

  3. Jika semuanya menjadi agak berlebihan, pertimbangkan untuk membeli templat.



6

Pada awalnya Anda akan menghadapi masalah karena beberapa hal tidak akan menghalangi Anda. Tetapi Anda harus bersabar dan melakukan banyak latihan. Ketika saya mulai mendesain dan melihat kembali pekerjaan saya 4 tahun yang lalu, saya tidak percaya bahwa saya melakukan pekerjaan itu.

Anda benar-benar perlu mencari karya desainer hebat lainnya. Untuk itu Anda harus mengikuti desainer hebat di Dribbble . Hal lain yang juga sangat penting adalah mengatur desain terbaru di situs galeri css seperti www.minimalistgallery.com atau yang lainnya.

Semoga yang terbaik !!!


2
Hai, kedua pos Anda di situs ini telah ditautkan ke situs eksternal yang sama, galeri minimalis. Asal tahu saja, orang mungkin berpikir hal semacam ini terlihat seperti spam.
user568458


2

Ini mungkin tip yang cukup umum tetapi bagi saya itu adalah sesuatu yang benar-benar memberi tahu jika seseorang adalah desainer yang baik atau tidak:

Ruang putih, margin dan perataan.

Mereka adalah kunci untuk membuat desain yang apik dan terlihat profesional. Mereka menciptakan 'ruang bernafas' semacam dan benar-benar dapat menentukan apakah desain Anda akan terlihat disatukan atau tidak. Sama seperti font, Anda ingin tetap menggunakan margin tertentu / spasi putih agar tata letak tetap bersih.

Untuk melacak hal-hal seperti ini, menggunakan kisi atau panduan untuk mendesain bisa sangat berguna.


0

Pertanyaan Anda seperti "Sebagai seorang desainer, saya selalu menemukan diri saya membutuhkan pengetahuan dasar tentang Pemrograman Aplikasi". Keduanya adalah wilayah yang luas, dengan supor wilayah yang saling bertumpukan yang saling membutuhkan. Berita baiknya: Anda tertarik dan memahami pentingnya hal itu. Berita buruknya: tidak ada cara mudah untuk sepenuhnya memahami apa yang diperlukan untuk membuat desain yang baik, tanpa kursus atau metodologi yang tepat. TAPI untuk langkah pertama, buku ini entah bagaimana bagus untuk mulai membangun sistem visual yang masuk akal.

Buku Desain Non Desainer

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.
Judi bola