Mengapa orang terus memberi tahu saya bahwa situs saya terlihat mengerikan?

Saya telah mengembangkan situs web, dan baru-baru ini sedang mencari pekerjaan. Praktis semua pewawancara, setelah melihatnya sekilas, memberi tahu saya bahwa situs saya dirancang dengan sangat buruk (tetapi menyukai konsepnya). Saya harus menyebutkan saya seorang insinyur perangkat lunak, tetapi saya benar-benar mencoba untuk mendapatkan bagian desain yang benar juga. Saya sudah mencoba mendesain ulang, tetapi tidak tahu apa yang harus diubah.

Begini tampilannya sekarang:

Saya sangat menghargai tips khusus untuk situs saya, atau tentang cara meningkatkan desain situs secara umum (saya telah mengunjungi beberapa situs yang menjelaskan cara mendesain situs, tetapi itu sepertinya tidak membantu :)).

Sunting 1 : Seperti yang saya katakan, orang cenderung memiliki kesan buruk hanya dengan melihatnya, bahkan sebelum saya memperkenalkan fungsionalitasnya. Itu membuat saya berpikir ada sesuatu yang salah dengan warna yang saya pilih atau tata letak. Dan saya berpikir desain situs tertentu dapat membantu para desainer di luar sana, sama seperti cerita spesifik yang mendidik bagi siswa sastra, dan algoritme tertentu bermanfaat untuk siswa perangkat lunak. Terima kasih.

Catatan tambahan: Fungsi: Jika itu penting, inilah yang ingin dicapai oleh situs ini (sangat singkat): Pengguna dapat menambahkan topik, dan untuk setiap topik, tambahkan pertanyaan bersama dengan jawaban mereka . Situs ini membuat "tes" dan "kuis" bagi pengguna untuk mengambil dan membandingkan hasilnya

Sunting 2 : Ini printscreen lain:

Sunting 3 : Hanya untuk memperjelas, bukan tangkapan layar ini adalah halaman arahan saya. Itu adalah halaman konten khusus topik.

Pertama-tama saya ingin menekankan bahwa segala sesuatu dalam jawaban ini hanya MHO, bukan kebenaran universal;).

Sebagai seorang insinyur perangkat lunak, Anda tahu betapa pentingnya dalam setiap proyek untuk memiliki struktur yang jelas dan terdefinisi dengan baik - urutannya. Hampir sama halnya dengan seni dan desain "visual". Saya cenderung melihat desain sebagai "enkapsulasi visual". Perancang tahu struktur informasi yang ia ingin sampaikan kepada audiens targetnya. Misalnya: dia mendesain buku. Dia tahu buku ini dibagi menjadi beberapa bab dan setiap bab menjadi beberapa sub-bab. Dia tahu masalah utama dijelaskan oleh beberapa catatan (catatan pinggir, catatan kaki, sidenote). Sekarang dia harus menggunakan "arsenal" untuk membuat struktur ini "terlihat". Dia dapat menggunakan satu ukuran dan bentuk font dan mengisi semua halaman berturut-turut dengan gumpalan mesin terbang, tetapi itu berarti pembaca harus membaca, menafsirkan, dan memahami segala sesuatu untuk mengetahui struktur informasi yang terkandung. Perancang juga dapat "menyarankan" kepada pembaca pentingnya / tingkat berbagai informasi. Salah satu triknya adalah menggunakan ukuran font untuk menunjukkan gradasi dari "data" yang disajikan. Jika ini dilakukan, pembaca tidak perlu membaca (apalagi menafsirkan) teks untuk membedakan antara materi utama dan misalnya catatan kaki. Pentingnya dan "posisi" informasi secara timbal balik "dijelaskan" secara visual. Pembaca dapat "mendekapsulasi" informasi dengan mudah. Orang juga dapat melihatnya sebagai semacam proses serialisasi / deserialisasi yang terjadi di domain visual (informasi abstrak dilemparkan ke ruang "visual"). Itu penyederhanaan greeeeat tapi saya pikir untuk pemula itu cukup bagus. Jika ini dilakukan, pembaca tidak perlu membaca (apalagi menafsirkan) teks untuk membedakan antara materi utama dan misalnya catatan kaki. Pentingnya dan "posisi" informasi secara timbal balik "dijelaskan" secara visual. Pembaca dapat "mendekapsulasi" informasi dengan mudah. Orang juga dapat melihatnya sebagai semacam proses serialisasi / deserialisasi yang terjadi di domain visual (informasi abstrak dilemparkan ke ruang "visual"). Itu penyederhanaan greeeeat tapi saya pikir untuk pemula itu cukup bagus. Jika ini dilakukan, pembaca tidak perlu membaca (apalagi menafsirkan) teks untuk membedakan antara materi utama dan misalnya catatan kaki. Pentingnya dan "posisi" informasi secara timbal balik "dijelaskan" secara visual. Pembaca dapat "mendekapsulasi" informasi dengan mudah. Orang juga dapat melihatnya sebagai semacam proses serialisasi / deserialisasi yang terjadi di domain visual (informasi abstrak dilemparkan ke ruang "visual"). Itu penyederhanaan greeeeat tapi saya pikir untuk pemula itu cukup bagus. Orang juga dapat melihatnya sebagai semacam proses serialisasi / deserialisasi yang terjadi di domain visual (informasi abstrak dilemparkan ke ruang "visual"). Itu penyederhanaan greeeeat tapi saya pikir untuk pemula itu cukup bagus. Orang juga dapat melihatnya sebagai semacam proses serialisasi / deserialisasi yang terjadi di domain visual (informasi abstrak dilemparkan ke ruang "visual"). Itu penyederhanaan greeeeat tapi saya pikir untuk pemula itu cukup bagus.

Sekarang, untuk desain Anda. Saya pribadi tidak tahu harus mulai dari mana. Saya harus membaca semuanya, mengerti semuanya, memikirkan semuanya, dan kemudian memasukkan kembali semuanya ke dalam urutan yang menurut saya benar. Itu banyak pekerjaan bagi saya sebagai pembaca. Sulit untuk mendefinisikan apa yang paling penting dan apa yang paling tidak penting di sini dalam sekejap. Bahkan ketika saya akan meluangkan waktu untuk mengetahui kontennya, masih tidak ada banyak "landmark" visual yang membantu saya menemukan cara untuk beberapa data tertentu. Pikirkan: ketika Anda meninggalkan mobil di tempat parkir, Anda mencari "landmark" untuk membantu Anda mengingatdimana mobilmu. Coba pikirkan sejenak bagaimana Anda menggunakan situs web, bagaimana Anda dapat mengingat di mana opsi / tautan yang paling sering Anda gunakan. Bukankah Anda sedang mencari tautan sebagai "kotak kedua di sebelah kanan dari logo merah ini di bagian atas situs"? Tanpa membaca - hanya mengingat gambar / lokasi.

Saya pikir masalah terbesar di sini bukanlah “keburukan” - saya pikir itu adalah kurangnya pentingnya gradasi. Cobalah untuk "mengarahkan" pengunjung situs web Anda melalui data Anda. Apa yang Anda ingin dia lihat dulu? Ke mana harus pergi dari sana? Dengan cara ini Anda membuat "aliran baca" / "alur kerja". Anda menginduksi (mungkin mungkin?;)) Jalur tertentu yang akan diikuti pembaca Anda. Jika ada beberapa rute, cobalah untuk membuatnya terpisah mungkin (misalnya "jalur" melalui menu - sesuatu seperti daftar isi / gambaran umum / deskripsi struktur, "jalur" melalui formulir login, dll. ). Saya pikir jika Anda akan memperbaikinya, desain Anda pasti akan meningkat. Mungkin itu tidak akan menjadi "indah" segera, tetapi setidaknya itu akan lebih mudah diakses dan dipahami dan dengan itu, sebagai efek samping, lebih menyenangkan secara estetika.

Saya harap itu masuk akal bagi Anda :).

Beberapa hal yang saya perhatikan yang tidak saya sukai adalah:

• Ini lebih mirip bagian "back-end" atau "admin" dari sebuah situs web, terutama beberapa bentuk sistem manajemen konten, daripada "front-end" atau apa yang dilihat orang. Secara khusus, PhpMyAdmin muncul dalam pikiran.
• Inkonsistensi dalam warna yang digunakan. Logo (yang saya temukan agak terlalu sempit) sudah memiliki beberapa warna di dalamnya, sehingga warna-warna itu dapat digunakan untuk mengembangkan skema warna untuk situs tersebut. Skema warna ini harus berlaku untuk hal-hal seperti pita untuk tabel, warna untuk tautan, dan sebagainya.
• Ada terlalu banyak visual yang kontras. Saya biasanya menganjurkan kesederhanaan dan standardisasi dalam desain. Namun, dalam tangkapan layar ini, kita melihat:
  • Kotak "Semuanya" adalah kotak siku kanan yang keras.
  • Navigasi bilah sisi menggunakan sudut bulat.
  • Subtopik menggunakan gradien radial.
  • Tak satu pun dari kotak memiliki "padding" yang memadai: Perhatikan bagaimana sempitnya kata-kata di tautan "subtopik" muncul; mereka akan terlihat jauh lebih baik jika ada ruang di sekitar mereka.

Kemudian, baca dengan teliti jawaban dari @ thebodzio , karena itu sangat akurat: Pengunjung baru ke situs akan mengalami kesulitan mengetahui di mana harus mencari pertama, dan itu umumnya merupakan tanda desain "buruk".

Ada beberapa jawaban bagus di sini, jadi saya akan tunjukkan beberapa contoh nyata. Bagi saya, struktur dasar halaman terlihat layak; seperti yang orang lain katakan, tata letak tiga kolom telah menjadi pokok dari desain web selama bertahun-tahun. Sebagian besar masalah adalah dengan desain grafis.

Karena itu, kepentingan relatif "Sub Topik" tampaknya aneh:

• Haruskah judulnya seperti "Sub-topik"?

• Ini ke kanan dan terlihat lebih penting daripada tajuk topik; mungkin Anda bisa memasukkannya ke dalam tubuh topik utama untuk membuatnya terasa lebih bawahan?

• Bobot judul "Sub Topik" membuatnya tampak lebih berat (lebih penting) daripada remah roti topik.

Untuk desain grafis, Anda dapat bertanya pada diri sendiri tentang prinsip-prinsip dasar untuk setiap elemen halaman:

• Kontras : Elemen yang tidak sama harus terlihat cukup berbeda sehingga pengguna Anda dapat langsung membedakan mereka.

• Pengulangan : Desain jika hal-hal yang hanya terlihat baik adalah tampilan yang sama seperti itu. Dengan kata lain, bertujuan untuk konsistensi. Itu mungkin berbentuk semua latar belakang Anda yang memiliki saturasi dan kecerahan yang sama, tetapi beragam rona, atau menggunakan gradien pada semua judul (atau tidak menggunakan gradien apa pun). Sebagai contoh:

  • latar belakang "Sub Topik" adalah satu-satunya yang memiliki gradien (tombolnya berbeda, sehingga memiliki gradien membuatnya terlihat berbeda, membawa kontras ke dalam permainan)

  • Sorot navigasi di sebelah kiri memiliki sudut membulat sementara sebagian besar elemen lainnya memiliki sudut persegi yang tajam

  • warna untuk "Preferensi Kuis" (salah dieja) tidak muncul dalam logo, yang sebaliknya Anda coba warna Anda; cobalah untuk mendapatkan rona yang sama untuk elemen halaman seperti warna dalam buku

(Faktanya, ada cara mudah untuk memastikan bahwa warna-warna itu bersatu: mulailah dengan satu warna kemudian ubah hanya satu rona, saturasi, atau cahaya. Semua warna yang Anda hasilkan dengan metode ini akan terlihat bagus bersama-sama.)

• Alignment : Alignment membuat elemen terhubung menjadi satu, daripada terlihat tersebar dan tidak koheren. Sebagai contoh:

  • kotak "Ingat saya" lebih rendah dari teks lain di sebelahnya

  • "Preferensi Kuis" lebih jauh ke kanan daripada remah roti topik di atas

  • preferensi dipusatkan, sementara sebagian besar teks badan lainnya rata rata

• Kedekatan : membawa benda lebih dekat bersama-sama membuat mereka dikelompokkan dalam pikiran pengguna Anda, meskipun menyisakan terlalu sedikit ruang di sekitar objek membuat mereka sempit dan sulit untuk dilihat sebagai barang individu. Sebagai contoh:

  • tidak ada ruang di sekitar remah roti topik atau sub-topik Anda (menurut saya, ini adalah salah satu fitur paling umum yang memberi tahu saya bahwa desain grafis belum sepenuhnya dikembangkan)

  • jarak paragraf Anda di bawah judul badan utama tidak konsisten

Ada banyak lagi prinsip-prinsip desain di web, tetapi ini adalah empat yang paling penting.

Saya pikir masalah utama dengan desain situs Anda tidak jauh dengan desain grafis seperti pada desain antarmuka pengguna . Khususnya, ketika saya melihat tangkapan layar Anda di atas, pertanyaan yang saya ajukan pada diri saya bukanlah " Keren, apa yang harus saya coba dulu? " Tetapi " Apa-apaan ini, dan apa yang harus saya lakukan dengan itu? "

Ini adalah masalah umum dengan situs web dan antarmuka pengguna lain yang dirancang oleh insinyur (atau pakar domain lainnya): mereka sudah tahu bagaimana sistem seharusnya digunakan, sehingga bagi mereka, semuanya baik-baik saja selama semua fitur yang mereka butuhkan dapat diakses dengan mudah . Sayangnya, ini sering mengarah ke semua fitur yang sama - sama mencolok dan dapat diakses, memberikan pengguna baru sedikit petunjuk tentang di mana untuk memulai.

Desain grafis memang memiliki beberapa efek di sini, sejauh desain grafis yang buruk dapat membuat antarmuka pengguna membingungkan, sedangkan grafis yang baik dapat meningkatkan antarmuka pengguna dengan membuat makna dan hubungan elemen antarmuka yang berbeda menjadi jelas dan menarik mata pengguna ke elemen yang paling penting. Namun pada dasarnya, masalahnya lebih pada apa yang harus disajikan kepada pengguna dan bagaimana menyusunnya daripada bagaimana membuatnya terlihat bagus.

Oke, mari kita sedikit lebih spesifik. Nasihat pertama saya adalah: sederhanakan! Anda mungkin ingin mengambil inspirasi dari desain halaman depan asli Google , yang pada dasarnya memiliki tiga elemen: logo, kotak pencarian dan dua tombol (dan orang mungkin berpendapat bahwa tombol kedua adalah kekacauan yang tidak perlu). Oh, dan beberapa tautan ke halaman lain dengan lebih banyak barang - yang jelas ditandai sebagai kepentingan sekunder dengan menjadi lebih rendah, dalam font kecil, dan / atau abu-abu - dan pemberitahuan hak cipta, tampaknya ditambahkan sebagai petunjuk halus untuk pengguna yang halamannya benar-benar berakhir di sana.

Atau lihat Doodle , perusahaan lain dengan nama buruk dan desain halaman depan yang sederhana namun efektif. Untuk kenyamanan, saya mengambil tangkapan layar halaman depan mereka dan menambahkan beberapa coretan merah di atas:

Doodle adalah situs yang cukup baik untuk membandingkan milik Anda, karena situs mereka, seperti milik Anda, pada dasarnya adalah kerangka kerja untuk memungkinkan pengguna mendesain konten mereka sendiri (kuis untuk Anda, jadwal acara untuk mereka) dan mengundang pengguna lain untuk berinteraksi dengannya. Perbedaan besar adalah bahwa, tidak seperti desain Anda, orang-orang Doodle menghabiskan banyak upaya memudahkan pengguna mereka ke antarmuka, bukannya hanya melemparkan mereka ke ujung kolam dan menunggu mereka tenggelam atau berenang.

Melihat halaman depan mereka, terutama tanpa coretan saya, hal yang jelas tentang hal itu adalah betapa sedikit hal - terutama hal yang tidak relevan - ada di dalamnya. Tentu, ada sejumlah kecil catatan dan tautan di bagian bawah halaman, tapi itu semua "di bawah flip" dan sesuatu yang akan diabaikan oleh pengguna baru. Hal kedua yang paling terlihat, dalam huruf ramah besar tepat di tempat pengguna cenderung melihat pertama kali, adalah delapan (!) Kata uraian yang menjelaskan tentang apa situs tersebut. Hal yang paling terlihat adalah tampilan grafik besar, dalam gambar sederhana, langkah-langkah utama alur kerja, menjadikan semuanya terlihat mudah dan mengundang. Dan tepat di antara mereka adalah tombol besar yang mengundang pengguna untuk mengkliknya dan memulai.

Bahkan, di bagian atas halaman, hanya ada empat hal yang dapat diklik (tidak termasuk logo, yang dapat diklik - seperti yang diharapkan pengguna - tetapi hanya membawa Anda kembali ke halaman depan): dua tautan ke langkah pertama di wisaya penjadwalan acara, satu ke contoh kalengan untuk pengguna yang tidak cukup percaya diri untuk melompat ke kanan, dan satu tautan tidak mencolok di sudut kanan atas yang membuka dialog login pop-up untuk pengguna yang sudah mapan. Itu saja.

Jadi bagaimana dengan situs Anda? Hal pertama dalam tangkapan layar Anda yang melompat keluar untuk saya sebagai sesuatu yang mungkin layak untuk dilihat adalah judul hijau, yang setidaknya pendek, dalam tipe besar dan di tengah-tengah apa yang tampak seperti "area konten". Sayangnya, tidak ada yang menarik di sana - bagian "Informasi Topik" hanya memiliki beberapa metadata sepele yang harus dicetak kecil di beberapa sudut, bagian "Sub Topik" memiliki beberapa tautan (ke halaman serupa lainnya?) Yang muncul untuk menduplikasi yang ada di sudut kanan atas, dan bagian "Sumberdaya" kosong. Dan selain itu, bahkan setelah membaca semua itu, saya masih tidak tahu apa situs itu atau apa yang bisa saya lakukan dengannya.

Jadi, apa yang bisa saya lakukan dengan situs Anda? Nah, Anda mengatakan bahwa saya dapat membuat dan menerima kuis, jadi bagaimana dengan meletakkan beberapa tautan / tombol besar yang tampak menarik di halaman depan yang bertuliskan " Ambil kuis " dan " Buat kuis "? (Yang pertama harus lebih menonjol, karena pengguna baru mungkin lebih cenderung mengambil kuis daripada membuatnya, tetapi termasuk yang kedua di halaman depan setidaknya membuat pengguna tahu bahwa mereka dapat melakukannya juga.) Juga, sebuah penjelasan singkat - dari beberapa kata hingga paragraf pendek - tentang apa situs Anda akan lebih baik juga. (Itu juga bisa menjadi tempat yang baik untuk memasang tautan "baca lebih lanjut".)

Atau, melihatnya dari sisi lain, apa yang bisa Anda kehilangan dari halaman Anda saat ini? Yah, saya benar-benar mengatakan "sebagian besar", tetapi hal yang jelas yang melompat (selain dump metadata) adalah formulir login di bagian atas. Tentu, itu baik untuk menyediakan pengguna yang mapan dengan cara mudah untuk masuk, tetapi itu tidak berarti Anda harus benar-benar menunjukkan formulir login pada setiap halaman. Sebagai gantinya, lakukan seperti yang dilakukan Doodle dan hanya memiliki formulir masuk pop-up yang dapat diakses melalui tautan. (Untuk pengguna dengan JavaScript dinonaktifkan, sebaiknya juga memiliki halaman login terpisah sebagai target mundur untuk tautan.)

Ada banyak hal lain yang bisa Anda hilangkan juga: misalnya, sebagai pengguna baru dan tidak terdaftar, mengapa saya melihat apa yang tampak seperti tautan "hapus"? Bisakah saya benar-benar menghapus halaman? Jika ya, mengapa ? Jika tidak, mengapa tautannya ada di sana?

Demikian pula, catatan "(703 Pertanyaan yang tersedia)" adalah gangguan yang tidak ada gunanya, karena terlihat seperti elemen antarmuka. Jika Anda ingin mengesankan pengunjung dengan kedalaman situs Anda, letakkan di tempatnya: di uraian yang cocok dan mengesankan di area konten. (" Kami sudah memiliki 703 pertanyaan yang tersedia, dan banyak lagi akan datang! ")

Akhirnya, saya harus mencatat bahwa semuanya itu relatif. TV Tropes , misalnya, memiliki antarmuka pengguna yang mengerikan (sangat mirip dengan antarmuka Anda), tetapi tidak masalah, karena mereka menebusnya dengan banyak konten yang sangat baik dan saling terkait, sehingga sebagian besar pengguna baru akan menang ' t harus menyentuh antarmuka navigasi sama sekali. Sebenarnya, itu cukup umum dengan situs wiki; Wikipedia sebenarnya tidak jauh lebih baik. Namun, maksudnya adalah Anda harus sudah memiliki muatan konten (atau basis pengguna yang berkomitmen untuk membuatnya) sebelum efek itu dapat mulai bekerja untuk Anda.

"Desain" Anda akan menyenangkan ... pada tahun 1995. Bahkan itu sudah ketinggalan zaman. Ini adalah desain yang insinyur selalu buat dengan :-) Hal termudah yang dapat Anda lakukan adalah menggunakan beberapa kerangka kerja css yaitu Twitter Bootstrap , Zurb , apa pun . Kerangka kerja membantu Anda untuk melindungi Anda dari "kreativitas" Anda sendiri ;-)

Dari sudut pandang tata letak, tidak ada yang benar-benar salah dengan situs web Anda. Ini adalah tata letak 3 kolom standar dengan logo di kiri atas. Kerangka kerja keseluruhan ini telah digunakan selama berabad-abad, dan itu karena ia bekerja. Sebagian besar situs web modern masih menggunakan prinsip yang sama, berdasarkan pada beberapa tata letak yang umum, tetapi terkubur di bawah grafik yang lebih licin. (Berhati-hatilah terhadap orang-orang yang mengkritik berdasarkan seberapa modern sesuatu itu - hanya karena beberapa tahun telah berlalu tidak berarti bagaimana manusia menerima informasi sama sekali sangat berbeda.)

Beberapa mungkin berdalih tentang apakah tautan navigasi utama harus di sisi kiri atau di atas, tetapi perbedaan itu tidak membuat atau merusak situs.

Tidak, masalahnya bukan pada pilihan posisi Anda. Ini dengan grafis, pilihan warna, ukuran benda, dan sebagainya. Saya membedakan istilah tata letak , yang semuanya tentang penempatan, desain , yang semuanya tentang rasa dan tampilan. Saya tidak yakin apakah semua orang akan menggunakan istilah dengan cara yang persis sama seperti saya.

Setelah mengatakan tata letak Anda pada dasarnya baik-baik saja, tetapi desain Anda bermasalah, sayangnya, adalah situasi yang lebih sulit untuk dipecahkan. Jika tata letak Anda adalah masalahnya, kami dapat memberikan saran yang lebih konkret, seperti "pindahkan bidang pencarian Anda ke sini", atau "letakkan logo Anda di sana". Layout sebenarnya adalah implementasi dari kegunaan .

Namun, desainnya adalah tentang rasa dan gaya, yang tentu saja jauh lebih sulit untuk dikomentari. Meskipun saya dapat mengatakan bahwa Anda hanya meninggalkan banyak pilihan warna sebagai default (latar belakangnya putih, tautannya biru, gambar antarmuka sangat sedikit), jauh lebih sulit untuk mengatakan warna dan grafik apa yang seharusnya ada di sana. . Itu sangat tergantung pada perasaan seperti apa yang Anda inginkan. Biru dan abu-abu yang membosankan dan aman untuk nuansa korporat, merah muda dan kuning untuk perasaan polos dan kekanak-kanakan, merah dan hitam panas untuk nuansa klub malam yang menarik ... Dan bahkan kemudian, hanya menggunakan contoh-contoh warna tidak selalu mengarah pada merasa saya sudah melekat pada mereka. Iblis ada dalam perinciannya.

Ada beberapa tumpang tindih antara masalah tata letak yang lebih konkret dan masalah desain yang lebih halus, seperti apa yang dikatakan thebodzio dalam jawabannya tentang berbagai ukuran font untuk judul dan catatan kaki dan sebagainya, untuk menekankan pentingnya dan membantu memandu pengunjung situs melalui informasi yang Anda inginkan. Anda harus memperhatikan sarannya.

Namun, saya khawatir jika tujuan Anda adalah untuk tidak bermitra dengan seorang desainer tetapi belajar sendiri bagaimana menerapkan desain situs yang menarik, Anda tidak hanya mendapatkan jawaban, Anda sedang dalam perjalanan. Ada banyak rute untuk menjadi perancang yang baik seperti perancang, dan banyak sumber daya di luar sana, sehingga tidak ada kekurangan kesempatan untuk belajar.

Untuk rute terpendek untuk memperoleh rasa desain untuk situs tertentu ini, saya akan melihat situs lain yang Anda suka, dan situs lain yang menawarkan layanan serupa dengan yang Anda buat, dan mulai membandingkan dan membedakan apa yang Anda sukai dan tentang itu dan apa yang hilang di situs Anda.

Sayangnya, itu seobjektif mungkin, dan hanya titik paling atas dari puncak gunung es. Semoga beberapa yang saya katakan bisa membantu.

Inilah mengapa saya pikir orang bereaksi negatif terhadap situs Anda: Ini menimbulkan terlalu banyak pertanyaan!

Seperti yang Anda katakan, sebelum Anda memperkenalkan fungsi. Yang memberitahu saya orang tidak mengerti tentang apa itu. Yang seharusnya menjadi pertanyaan pertama yang dijawab oleh situs web. Karena jika itu ada di web, Anda tidak bisa berdiri di samping mereka dan menjelaskannya.

"Semua pengetahuan di dunia" tidak persis mengomunikasikan apa yang dapat Anda temukan di situs (atau tidak bisa dipercaya dalam hal ini) atau mengapa Anda harus masuk. Jadi, desain Anda dipersepsikan buruk karena tidak mendukung menjawab pertanyaan-pertanyaan itu.

Jadi, pertama-tama Anda perlu menjawab "tentang apa situs ini?". Misalnya dengan pernyataan misi. Mungkin jelas bagi Anda, tetapi tidak bagi semua orang di web. Apa tujuan utamanya? Ambil quize atau buat quize? Apa hal pertama yang Anda ingin orang lakukan? Gabung? Jawab kuis? Buat satu? Ini adalah hal yang harus Anda jawab jika Anda ingin orang lain tetap berada di halaman Anda.

Maka Anda harus mengatur informasi Anda. Apa itu konten, apa itu meta (logo, navigasi, login). Lihatlah stackexchange. Konten (terang) jelas dibedakan dari meta (gelap).

Kelompokkan hal-hal yang berjalan bersama. Anda memiliki remah roti yang terhubung dari navigasi. Secara visual maupun kata-kata. Saya tidak menemukan "Semuanya" di navigasi utama. Bagaimana saya bisa sampai di sana?

Mengapa semua ini? Semakin cepat orang memahami informasi yang disajikan kepada mereka, semakin besar kemungkinan mereka akan tinggal dan berinteraksi. Jika mereka bingung dan dihadapkan dengan pertanyaan yang tidak bisa mereka jawab, mereka akan bereaksi negatif.

Karena itu benar. Itu kejam, kan :) Itu hanya lelucon, jawaban terbaik saya adalah bekerja dengan seseorang di bagian desain, jika Anda tidak memiliki seseorang untuk bekerja dengan mendapatkan freelancer, jika itu tidak berhasil juga baru mulai lagi dari awal, tetapi cobalah untuk menjaga hal-hal lebih sederhana, dan biarkan konten untuk bernapas ...

Beberapa tips / saran / rekomendasi pertama yang terlihat: Buat font h tag (Judul) lebih besar dari tag p, jauh lebih besar (sesuatu dalam kisaran ukuran font judul 30-48, dan paragraf (11-maks 13). Biarkan setidaknya 20 px margin atau padding antar blok konten (misalnya maring-bottom: 20px; untuk bilah login akan membuatnya lebih terpisah dan mudah dibaca.

Dapatkan seseorang untuk mendesain Anda logo yang tepat, yang Anda miliki sekarang adalah ... tidak baik. Coba font yang berbeda, mungkin font sans-serif (seperti Open Sans, gratis di font google, atau .. hanya Arial-Helvetica).

Jangan gunakan gradien jika Anda tidak memiliki indra warna hanya karena itu keren atau hanya karena terlihat lebih baik bagi Anda, cobalah untuk tetap menggunakan warna polos dan mungkin pada akhirnya, ketika Anda selesai mencoba dan bereksperimen dengan gradien hanya pada CTA ( Ajakan bertindak) (pada tombol misalnya).

Ada banyak yang dapat Anda lakukan ... tetapi hal-hal ini biasanya datang seiring waktu, Anda mendapatkan mata yang terlatih dengan melihat banyak desain hebat dan mencoba memahami bagaimana hasil itu dihasilkan ... cara terbaik untuk itu adalah dengan coba dan buat kembali hasil yang sama sendiri, dalam proses itu Anda akan memperoleh beberapa pengetahuan dan wawasan tentang mengapa dan bagaimana hal-hal dilakukan / dibuat untuk melihat / berinteraksi dan mengalami UI.

Rekomendasi buku: Smashing Book [buku pertama dan kedua] dan situs web:

http://smashingmagazine.com

dan satu lagi: http://www.bamagazine.com/

Wow! Anda benar-benar menghasilkan respons! Setidaknya Anda tahu desain Anda tidak luput dari perhatian;)

Berikut jawaban singkat untuk pertanyaan Anda: Situs ini terlihat seperti itu dirancang oleh seorang insinyur perangkat lunak. Itu yang Anda lakukan dan saya yakin Anda melakukannya dengan baik. Sekarang Anda membutuhkan seseorang yang melakukan desain UI untuk membuat ide Anda dapat didekati. Tidak ada jalan lain untuk itu. Anda tidak akan belajar desain di akhir pekan dan memperbaiki masalahnya.

Temukan siswa atau perancang muda yang ingin mengisi portofolio mereka dan beri mereka kebebasan. Anda ingin seseorang yang pekerjaannya bersih dan tidak berantakan untuk proyek ini. Lihat apakah Anda dapat menemukan desainer yang menyukai minimalis.

Saya bukan desainer profesional, jadi dari sudut pandang pengguna dan dari pengalaman menjelajahi berbagai situs web, bolehkah saya menunjukkan beberapa hal?

1. The warna latar belakang halaman putih, tetapi bagian header / highlights adalah dalam nuansa kuning atau putih, Anda bisa mencoba sedikit warna kontras , Anda bisa merancang tingkat kontras untuk mencocokkan hirarki elemen Anda (tingkat yang lebih tinggi sundulan = lebih kontras) atau skema warna konten tajuk tetap (mis. Oranye seperti pada halaman kedua buku yang diperlihatkan dalam logo untuk tajuk, putih untuk teks tajuk dan abu-abu gelap untuk konten-teks).
2. Terlalu banyak ruang kosong di halaman Anda, ruang kosong itu bagus untuk memberi pengguna tempat untuk bernapas, tetapi terlalu banyak ruang kosong membuat halaman Anda terlihat seperti back-office / under-maintenance. mis. bagian "Sub-topik" di layar pertama bisa membentang seluruh ruang di bawah bagian "Semuanya". Juga mengapa dua bagian subtopik yang berlebihan ?
3. Distribusi konten IMO harus berada di bawah hierarki . Jika Anda mengambil salah satu situs seperti halaman kode Google (yang terlihat sangat mirip dengan situs Anda), Wikipedia atau situs ini sebagai contoh, mereka semua menghabiskan banyak ruang untuk header situs , kemudian muncul konten. Juga sekarang beberapa hari banyak halaman menggunakan toolbar seperti header yang memiliki warna berbeda, menu umum dan logo situs yang tertanam di dalamnya, tetapi Anda mungkin mengatakan logo Anda terlalu besar untuk melakukan itu.
   Ambil bagian subtopik di bagian paling kanan halaman misalnya, apakah mereka benar-benar terlihat seperti spesialisasi lebih jauh dari konten saat ini? Sebaliknya mereka lebih mirip tag acak atau topik terkait . Anda dapat mencerminkan hierarki mereka dengan membuatstruktur seperti pohon seperti di berbagai halaman dokumentasi, itu juga akan membuat remah roti tidak perlu. Juga IMO tempat yang tepat untuk pohon itu (navigasi) akan berada di bilah sisi kiri dan tindakan lainnya akan dilakukan di tempat remah roti.
4. Keseragaman sama pentingnya dengan distribusi. Tombol Anda dapat memiliki warna yang berbeda sesuai dengan tujuan / pentingnya. Tetapi struktur mereka harus tetap sama. Tombol "Masuk" Anda memiliki ujung yang tajam sementara "Ikuti kuis sekarang" berbentuk sudut. Anda mungkin ingin menyingkirkan salah satu dari pendekatan itu.
5. Tautan dan tindakan tidak sama , Anda harus menamainya juga. Seperti menu "Hapus" di kiri mencerminkan item yang dihapus atau tindakan hapus, tidak dapat dikatakan. Berikan pengguna tombol hapus dan menu / tab item yang dihapus seperti di GMail.
6. Font sangat penting untuk mencerminkan tujuannya. Jika Anda membuat halaman seni atau keluarga serif sastra apa pun baik untuk itu, tetapi untuk membuat situs e-learning Anda harus memilih font yang nyaman untuk diikuti dalam berbagai ukuran dan memiliki lebih sedikit augmentasi (seperti tepi memanjang), Sans bagus dalam hal itu. Wikipedia menggunakannya sebagai contoh. Pilihan ukuran dan berat juga penting. Di mana statistik penting (dan berubah) buat angka dalam huruf tebal (mis. 703 pertanyaan tersedia). Seperti yang telah Anda lakukan untuk memilih sejumlah pertanyaan di layar kedua. Huruf miring dalam tajuk IMO tidak terlihat bagus, mengapa tidak menggunakan huruf tebal saja?
7. Ini sangat mirip dengan pendapat pribadi saya, tetapi saya pikir beberapa sudut yang lebih bulat akan membebaskan pengguna dari perasaan seperti kotak.

Saya seorang desainer dan pengembang profesional. Saya pikir hal yang paling penting untuk dilakukan dengan desain adalah menggunakan program grafis - seperti Fireworks - untuk membuat desain sebelum Anda menerapkannya. Itu membuatnya lebih mudah untuk mengubah berbagai hal dan bereksperimen dengan mudah. Berasal dari latar belakang pengembangan, saya tahu pentingnya itu.

Saya tidak tahu posisi apa yang Anda lamar. Jika Anda melamar posisi desain grafis, Anda mungkin perlu meluangkan waktu untuk mempelajari desain grafis profesional. Jika Anda mengambil posisi pengembangan, mungkin masuk akal untuk membayar sedikit perancang profesional untuk membuat desain yang bagus, atau melakukan perbaikan cepat alih-alih menghabiskan waktu berbulan-bulan untuk mempelajarinya.

Jika Anda ingin melakukan perbaikan cepat, saya akan mencoba memberikan beberapa spesifik untuk membuat Anda memulai. Jawabannya bagus - tetapi tidak terlalu spesifik. Saya akan mencoba.

Perhatikan bahwa desain lebar variabel selalu sedikit lebih rumit daripada desain lebar tetap. Saya pikir Anda benar untuk memilih desain 3 kolom. Kontennya benar, desainnya tidak terlalu bagus (menurut saya).

Inilah yang akan saya lakukan (mungkin akan memakan waktu kurang dari sehari):

1. Mulai dengan logo. Ini terlihat sangat sibuk -> cobalah membuatnya lebih sederhana. Gunakan warna yang lebih cerah; kuning itu tampak kotor. Coba font yang lebih sederhana.
   • Setelah melakukan logo, Anda dapat mencocokkan warna situs dengan logo itu
2. Segala sesuatu tentang situs web harus "lapang". Jadi jangan membuat hal-hal sempit.
   • kolom kiri harus jauh lebih lebar. 1,5 kali lebarnya saat ini
   • bagian atas harus memiliki lebih banyak spasi di sekitar bidang login
   • hak harus memiliki masing-masing sub topik pada baris baru. Buat mereka memiliki jarak yang lebih besar di sekitar mereka sehingga mereka tidak terjepit satu sama lain
   • sub tabel bisa menggunakan lebih banyak padding pada sel, judul divs bisa lebih empuk, dll.
3. Seluruh konten harus mengalir alih-alih berombak. Ini berarti sejajarkan sebanyak mungkin, gunakan font yang seragam dan ukuran yang sesuai.
   • Kolom tengah "Semua pengetahuan di dunia" tampak tidak pada tempatnya dengan konten lainnya. Mungkin mengapung kiri, menghapus garis bawah, dan pasti membuatnya lebih kecil dari judul.
   • Konten halaman tidak selaras. Akan terlihat lebih baik jika Anda meninggalkan menyelaraskan sub konten dengan sub judul.
4. Bidang login di atas dapat dilakukan dengan lebih baik.
   • Anda dapat menempatkan label di dalam kotak input teks (berwarna abu-abu). Itu akan membuatnya lebih bersih.
   • Anda dapat membuat kotak centang ingat / font saya jauh lebih kecil. Ini bukan fitur yang paling penting, jadi itu tidak boleh sebesar bagian penting.

Ini tidak akan membuat situs Anda menjadi situs yang paling menakjubkan di internet, tetapi semoga akan cukup memolesnya melalui inspeksi. :)

wow ... itu sangat buruk lol.

Saya tidak berpikir Anda dapat belajar mendesain ulang sesuatu dalam beberapa saran jika Anda tidak memiliki rasa desain, jadi saya pikir Anda harus membuat orang lain melakukan tata letak .. mendekati perguruan tinggi seni lokal dan melihat apakah ada kelas akan menganggapnya sebagai contoh dunia nyata.

Tetapi gagal itu, berikut adalah beberapa saran saya. Halaman indeks / pendaratan terlepas dari namanya, perlu berfungsi lebih seperti papan iklan atau iklan majalah. Perlu menyampaikan pesannya CEPAT, dalam beberapa detik. Perhatikan bahwa saya mengatakan "pesan" bukan informasi. Informasi harus ada di sana ketika pemirsa mencarinya, tetapi tidak semua harus ditata seperti daftar isi yang sedikit acak.

Jadi, untuk pesan ... hal pertama yang harus dipikirkan adalah APA yang mereka lihat .. halaman web, ya, tapi halaman web apa? Bahkan membaca kategori Anda, tidak jelas bagi saya apa halaman itu.

'Apa' itu akan disampaikan oleh skema warna, tata letak keseluruhan serta judul judul.

Setelah Anda memecahkan pertanyaan apa itu, putuskan apa yang Anda ingin mereka lihat terlebih dahulu. Pilihan saya adalah Praktek membuat logo Sempurna dan saya akan meningkatkan ukuran itu dan mengeluarkannya dari header. Tetapi Anda mungkin memiliki alasan untuk membuat mereka fokus pada sesuatu yang lain atau semacam panggilan untuk bertindak.

Saya menduga bahwa hal terpenting Anda adalah 'Semua Pengetahuan di Dunia "karena Anda telah memusatkannya (ide buruk) membuatnya miring (ide buruk!) Dan memberikannya banyak ruang di sekelilingnya sendiri (ide bagus). Tapi kecuali untuk kata-kata sendiri ... tidak jelas apa itu IS atau apa, coba sesuatu yang lebih deskriptif dan kurang konyol.

Cobalah untuk memecah halaman arahan keseluruhan menjadi 3 elemen desain DAN 3 tingkat kepentingan informasi. Tanyakan pada diri sendiri apa hal pertama yang harus mereka lihat, hal pertama yang harus mereka lakukan? apa yang kedua, ketiga? dan coba mendesain ulang sesuai.

Gunakan lebih sedikit warna dan minta mereka masuk akal .. mengapa 3 blues yang berbeda-beda tersebar di sekitar teks ??? Gunakan lebih banyak ukuran font (!), Sekali lagi memecah ini menjadi 3s adalah awal yang baik, font BESAR untuk yang paling penting, sedang untuk sekunder dll.

Saran terakhir saya adalah lakukan desain Anda terlebih dahulu dan jauh sebelum menulis kode. Saya sarankan mulai dengan KERTAS dan pena atau pensil untuk memblokir halaman .. hanya sketsa cepat, JANGAN menulis kata-kata yang sebenarnya ketika Anda melakukan ini, hanya memblokir di daerah ketika Anda mencoba untuk memutuskan seberapa besar area konten harus dibandingkan dengan header. , seberapa besar sidebar dan sebagainya.

Kemudian lakukan desain yang lebih final dalam program grafis. PINDAHKAN hal-hal di sekitar dan bereksperimen dengan penempatan. Ingat Anda mendesain halaman yang perlu berfungsi seperti halaman majalah. Buat pemirsa Anda berhenti sejenak, cobalah TAMPILKAN kepada mereka apa yang Anda ingin mereka lihat, cobalah untuk mengarahkan mereka untuk MELAKUKAN apa yang Anda ingin mereka lakukan.

Dan mulai MENCARI dan untuk desain. Hanya melihat. jangan mengevaluasi konten, melainkan MENCARI pesan apa yang sedang disampaikan oleh halaman web. Bagaimana cara mereka menggunakan spasi, warna, ukuran font? Cobalah untuk meniru desain yang bagus. semoga berhasil

dan pertimbangkan saran sekolah seni. program desain grafis sering mencari proyek desain ulang dunia nyata untuk siswa mereka.

Masalah utama yang saya peroleh dari utas ini adalah bahwa Anda lebih tertarik berdebat dan mempertahankan "desain" Anda daripada tertarik untuk mempelajari cara membuat sesuatu yang menarik. Khas seorang insinyur perangkat lunak. Anda pikir Anda dapat memecah halaman menjadi elemen-elemen komponen, menguji dan memeriksa elemen-elemen ini dan kemudian setelah Anda mengintegrasikan komponen Anda percaya bahwa elemen-elemen tersebut harus secara matematis menyebutkan desain yang baik. Kemudian Anda berpikir bahwa dengan memposting pertanyaan ini lagi, Anda dapat memotong halaman menjadi komponen dan memperdebatkan kelebihan masing-masing dan berdebat bagaimana hal itu mengikuti apa yang dikatakan penyedia jawaban.

Sampai Anda bersedia menerima bahwa Anda mengisap UX Anda akan terus memiliki masalah ini. Seperti dikatakan di atas, desain grafis adalah tentang rasa. Desain Grafis tidak sama dengan desain teknik. Anda tidak dapat membuat sesuatu secara matematis, mengintegrasikannya dengan hal-hal "benar secara matematis" lainnya dan mengharapkan hasil yang baik. Anda tidak akan pernah pandai UX (mungkin) karena Anda tidak melihat dunia seperti yang dilihat oleh desainer. Tetapi jika berhenti mengukur halaman Anda dan membandingkannya dengan sesuatu yang lain - buka diri Anda sepenuhnya untuk mengetahui bahwa Anda tidak tahu apa-apa tentang desain grafis, maka Anda mungkin mulai mendapatkannya ...