Kullanıcılar neden sitemin korkunç göründüğünü söylüyor?


9

Bir web sitesi geliştirdim ve son zamanlarda bir iş arıyordum. Pratikte tüm görüşmeciler, kısa bir bakış attıktan sonra, sitemin çok iyi tasarlandığını (ancak konsepti sevdiğini) söyledi. Yazılım mühendisi olduğumdan bahsetmeliyim, ancak tasarım parçasını da doğru şekilde yapmaya çalışıyorum. Yeniden tasarlamaya çalışıyordum, ama neyin değişeceğini bilmiyorum.

Şimdi şu şekilde görünüyor:
resim açıklamasını buraya girin

Gerçekten sitem için özel herhangi bir ipucu için teşekkür ederiz, veya genel olarak bir sitenin tasarımını geliştirmek için nasıl (Ben sitelerin tasarım açıklayan bazı siteleri ziyaret ettik, ama bu yardımcı görünmüyor :)).

Edit 1 : Dediğim gibi, insanlar ben sadece bir göz atarak, hatta işlevselliği tanıtmak önce kötü bir izlenim eğilimindedir. Bu beni seçtiğim renkler veya düzende bir sorun olduğunu düşündürüyor. Ve belirli bir site tasarımının, tıpkı belirli bir hikayenin edebiyat öğrencileri için eğitici olduğu ve belirli algoritmaların yazılım öğrencileri için yararlı olduğu gibi, tasarımcılar için yararlı olabileceğini düşünüyordum. Teşekkürler.

Bir yan not: İşlevsellik: Önemli olursa, sitenin başarmayı amaçladığı (çok kısa bir süre): Kullanıcılar konu ekleyebilir ve her konu için cevaplarıyla birlikte sorular ekleyebilir . Site, kullanıcıların sonuçlarını alması ve karşılaştırması için "testler" ve "sınavlar" oluşturur

Edit 2 : İşte başka bir baskı ekranı:
resim açıklamasını buraya girin

Edit 3 : Bu ekran görüntülerinin hiçbiri açılış sayfam değil. Konuya özgü içerik sayfalarıdır.


6
+1 Yazılım kullanımı ve yazı tipi bulma yerine tasarımla ilgili bir soru görmek her zaman iyidir - ancak kesin bir yanıt almak için (StackExchange'te amaçladığımız şey budur), bazı kriterler olması için biraz daha fazla bilgiye ihtiyacımız olacak. yanıtları değerlendirmek için ve bu nedenle, yalnızca bir kişi için ücretsiz tasarım danışmanlığı olarak değil, başkalarıyla ilgili olabilecek genel bir tasarım sorununu çözüyoruz;). Sitenin hedef kitlesi kim, amaçlanan etkileşim nedir ve şu ana kadar hangi geri bildirimleri aldınız? StackExchange benzeri bir site gibi görünüyor?
user56reinstatemonica8

@ user568458: Yorum için çok teşekkürler. "Düzenle 1" ve "Bir yan not:" eklendi.
Oren A

5
Muhtemelen tasarımı yapmak için gerçek bir tasarımcı almalısınız. Elbette kariyeriniz boyunca sizi bağlayabilecek bazı temaslar kurdunuz. Hızlı ipucu: Büyük başlıklar dışında serif yazı tipleri kullanmayın, ekranlardaki düşük boyutlarda harika değildirler. Alt konu etiketleri de gerçekten korkunç görünüyor, biraz dolgu eklemeli ve onlar için daha iyi renkler seçmelisiniz, turuncu mor, o kadar iyi çalışmıyor.
kotekzot

1
Blimey, çok fazla cevap var ve hepsi çok yararlı değil ... İlgili bazı sağlam temel tasarım ilkelerini anlamak istiyorsanız, işte size bir süre önce gördüğüm yararlı yığın akışı bulabileceğiniz ilgili bir soruya klasik bir cevap . com / a / 58947/568458
user56reinstatemonica8

@ user568458 bu gönderi kaldırıldı ... her yerde mi?
Abe

Yanıtlar:


9

Her şeyden önce, bu cevaptaki her şeyin evrensel bir gerçek değil, sadece MHO olduğunu vurgulamak istiyorum;).

Bir yazılım mühendisi olarak, her projede net ve iyi tanımlanmış bir yapıya (siparişe) sahip olmanın ne kadar önemli olduğunu biliyorsunuz. Aynı şey “görsel” sanat ve tasarım için de geçerlidir. Tasarımı “görsel kapsülleme” olarak görme eğilimindeyim. Tasarımcı hedef kitlesine aktarmak istediği bilginin yapısını bilir. Mesela: bir kitap tasarlıyor. Bu kitabın bölümlere ve her bölümün alt bölümlere ayrıldığını biliyor. Ana meselenin bazı notlar (kenar notları, dipnotlar, sidenotlar) tarafından açıklandığını biliyor. Şimdi bu yapıyı görünür kılmak için “cephaneliğini” kullanmalıdır. Bir yazı tipi boyutu ve şekli kullanabilir ve ardışık tüm sayfaları bir glif bloğu ile doldurabilir, ancak bu, okuyucunun içerdiği bilgi yapısını bilmek için her şeyi okuması, yorumlaması ve anlaması gerektiği anlamına gelir. Tasarımcı aynı zamanda okuyucuya çeşitli bilgilerin önemini / düzeyini “önerebilir”. Hilelerden biri, sunulan “verinin” derecesini göstermek için yazı tipi boyutunu kullanmaktır. Bu yapılırsa, okuyucunun ana konuyu ve dipnotları ayırt etmek için metni okumasına (yorum yapmasına izin vermesine) gerek kalmaz. Bilginin önemi ve karşılıklı “konumu” görsel olarak “tanımlanır”. Okuyucu bilgileri kolayca “kesip çıkarabilir”. Ayrıca, görsel alanda gerçekleşen bir tür serileştirme / serileştirme süreci olarak da görülebilir (soyut bilgiler “görsel” alana aktarılır). Bu basit bir basitleştirme ama yeni başlayanlar için yeterince iyi olduğunu düşünüyorum. Bu yapılırsa, okuyucunun ana konuyu ve dipnotları ayırt etmek için metni okumasına (yorum yapmasına izin vermesine) gerek kalmaz. Bilginin önemi ve karşılıklı “konumu” görsel olarak “tanımlanır”. Okuyucu bilgileri kolayca “kesip çıkarabilir”. Ayrıca, görsel alanda gerçekleşen bir tür serileştirme / serileştirme süreci olarak da görülebilir (soyut bilgiler “görsel” alana aktarılır). Bu basit bir basitleştirme ama yeni başlayanlar için yeterince iyi olduğunu düşünüyorum. Bu yapılırsa, okuyucunun ana konuyu ve dipnotları ayırt etmek için metni okumasına (yorum yapmasına izin vermesine) gerek kalmaz. Bilginin önemi ve karşılıklı “konumu” görsel olarak “tanımlanır”. Okuyucu bilgileri kolayca “kesip çıkarabilir”. Ayrıca, görsel alanda gerçekleşen bir tür serileştirme / serileştirme süreci olarak da görülebilir (soyut bilgiler “görsel” alana aktarılır). Bu basit bir basitleştirme ama yeni başlayanlar için yeterince iyi olduğunu düşünüyorum. Ayrıca, görsel alanda gerçekleşen bir tür serileştirme / serileştirme süreci olarak da görülebilir (soyut bilgiler “görsel” alana aktarılır). Bu basit bir basitleştirme ama yeni başlayanlar için yeterince iyi olduğunu düşünüyorum. Ayrıca, görsel alanda gerçekleşen bir tür serileştirme / serileştirme süreci olarak da görülebilir (soyut bilgiler “görsel” alana aktarılır). Bu basit bir basitleştirme ama yeni başlayanlar için yeterince iyi olduğunu düşünüyorum.

Şimdi, tasarımınıza gelince. Şahsen, nereden bakmaya başlayacağımı bilmiyorum. Hepsini okumak, anlamak, hepsini düşünmek ve sonra doğru olduğunu düşündüğüm sıraya koymak zorundayım. Bu benim için bir okuyucu olarak çok iş. Burada en çok neyin en az neyin önemli olduğunu tanımlamak zor. İçeriği tanımak için zaman harcayacağım bile, yine de bazı belirli verilere bir yol bulmamda bana yardımcı olacak pek çok görsel “simge” yok. Düşünün: arabanızı park yerinde bıraktığınızda hatırlamanıza yardımcı olacak bir “dönüm noktası” arıyorsunuzarabanın olduğu yer. Bir an için web sitelerini nasıl kullandığınızı, en sık kullandığınız seçeneklerin / bağlantıların nerede olduğunu nasıl hatırlayabileceğinizi düşünmeye çalışın. “Sitenin üst kısmındaki bu kırmızı logodan sağa ikinci kare” olarak bir bağlantı mı arıyorsunuz? Okuma yok - sadece görüntü / konumu hatırlamak.

Bence buradaki en büyük sorun “çirkinlik” değil - bence önem derecesinin olmaması. Verileriniz aracılığıyla web sitenizin ziyaretçisini "yönlendirmeye" çalışın. Önce ne görmesini istiyorsun? Oradan nereye gidilir? Bu şekilde “bir okuma akışı” / “bir iş akışı” oluşturursunuz. Okuyucularınızın izleyeceği belirli bir yol yaratırsınız (incept belki?;)). Birkaç rota varsa, bunları olabildiğince ayrı yapmaya çalışın (örn. Menüden bir “yol” - içindekiler tablosu / ana genel bakış / yapı açıklaması, giriş formu ile “yol” vb.). ). Bunu düzeltirseniz, tasarımınızın kesinlikle gelişeceğini düşünüyorum. Belki hemen "güzel" olmayacak, ama en azından daha erişilebilir ve anlaşılabilir olacak ve bunun sonucunda, bir yan etki olarak, estetik açıdan daha hoş olacak.

Umarım bu sizin için bir anlam ifade eder :).


Cevabınız için teşekkürler. Yine de herkesin cevabınızı sevmesini çok talihsiz buluyorum, kitapların söylediklerini tam olarak söylüyor ve ben hala onu elde etmiyorum! Muhtemelen sitemin e-Öğrenme ile ilgili olduğunu fark ettiğiniz gibi. Vikipedi'de veya bu sitede nasıl "yer işareti" ve "potansiyel müşteri" olduğunu anlamıyorum ama benimkinde değil. (Tamamen standart) bir sol gezinme çubuğum, üst oturum açma çubuğum, bariz bir başlığım ve sayfadaki sıralı bilgilerim var. Bundan daha standart, açık ve düzenli olan nedir? Bu nasıl zor? Btw, bir sayfa kafa karıştırıcı olabileceğinden, tekrar başka bir printcreen.tnx ekledim
Oren A

3
Yorumunuzdan yola çıkarak, tasarımınızı geliştirmeye çalışırken “ölüme bıktınız” korkarım. Bu hissi kendim birkaç kez yaşadım :). Mesele şu ki, bakış açımı tamamen kaybettiğim şeyleri kendi tarzımda görebiliyordum. Her şey sadece “doğru yerde”, “açık” ve “açık” görünüyordu. Ama değildi :). Sadece bir süre sonra, ilk fikirlerimi tamamen unuttuğumda söyleyebildim :). Benim tavsiyem: bir süre dinlendirin, “unutun” ve ardından sıfırdan başlayın, önceki tasarımınızı tamamen ortadan kaldırın .
thebodzio

İşaretçilerimin oldukça kaba ve genel olduğunu anlıyorum, ancak anlayabildiğim kadarıyla, kendi başınıza nasıl “tasarım” yapacağınızı öğrenmek istiyorsunuz ve bence bu şekilde. Bu yüzden size söylemeyeceğim: “logonuzu buraya taşıyın, menünüzü buraya yerleştirin”. Bu sadece sizin yerinize tasarlanacaktı. Belki daha önce sizin için tamamen bilinmeyen bir proje için bir tasarım yapmaya çalışırsanız daha iyi olur? Ancak bu, PM için bu hizmetten daha uzun bir süreç olabilir.
thebodzio

8

Özellikle sevmediğimi fark ettiğim birkaç şey:

  • Bu daha çok bir web sitesinin "ön uç" veya "yönetici" kısmına, özellikle "ön uç" veya insanların gördüklerinden ziyade bir tür içerik yönetim sistemi gibi görünür. Özellikle, PhpMyAdmin akla geliyor.
  • Kullanılan renklerin tutarsızlığı. Bulduğum logo (biraz fazla sıkışık) içinde zaten bazı renkler var, bu yüzden bu renkler site için bir renk şeması geliştirmek için kullanılabilir. Bu renk şeması, tabloların şeritlenmesi, bağlantıların rengi vb.
  • Çok fazla zıt görsel var. Genellikle tasarımda daha fazla sadelik ve standardizasyonu savunuyorum. Ancak, bu ekran görüntüsünde şunu görüyoruz:
    • "Her şey" kutusu, dik açılı bir kutudur.
    • Kenar çubuğu gezinmesi yuvarlak köşeler kullanır.
    • Alt konular radyal bir gradyan kullanır.
    • Kutulardan hiçbirinde yeterli "dolgu" bulunmaz: "Alt konular" bağlantılarındaki kelimelerin ne kadar sıkışık göründüğüne dikkat edin; etrafında biraz boşluk olsaydı çok daha iyi görünürlerdi.

Daha sonra, @thebodzio'nun cevabını kesinlikle dikkatlice okuyun , çünkü çok doğru: Siteye yeni bir ziyaretçi, ilk önce nereye bakılacağını bilmekte zorlanacaktır ve bu genellikle "kötü" tasarımın bir işaretidir.


Yorumunuz için çok teşekkürler! Çok eğitici! Yine de cevap vermek istiyorum :) 1. Bir e-Öğrenim sitesi, Wikipedia'ya yakın bir tasarım düşündüm. Bu yüzden "backoffice" değil, ama sade ve basit olmasını istedim. Çok mu ileri götürdüm? :) 2. Ben de tam olarak bunu yapmaya çalıştım! logo mavi ve sarı, bu yüzden renkleri seçmek zorunda olduğum hemen hemen her şey! Göstermiyor mu? 3. Bu harika bir ipucu! Arka plana sahip tüm öğeler benzer şekilli bir arka plana sahip olmalı mı? Son olarak, ben de @thebodzio yanıtladı :) İsterseniz kontrol edebilirsiniz :). Teşekkürler!
Oren A

8

Burada birkaç iyi yanıt var, bu yüzden birkaç somut örneğe dikkat çekeceğim. Benim için sayfanın temel yapısı iyi görünüyor; Diğerlerinin de söylediği gibi, üç sütunlu bir düzen yıllardır web tasarımının temelini oluşturuyor. Sorunların çoğu grafik tasarımla ilgilidir.

Bunu söyledikten sonra, "Alt Konular "'ın göreceli önemi tuhaf görünüyor:

  • Başlık "Alt konular" gibi bir şey olmalı mı?

  • Sağda ve konu başlığından daha önemli görünüyor; belki de onu daha bağımlı hissetmek için ana konu gövdesine dahil edebilirsiniz?

  • "Alt Konular" başlığının ağırlığı, konunun kırıntılarından daha ağır (daha önemli) görünmesini sağlar.

Grafik tasarım için, kendinize sayfanın her öğesi için temel ilkeler hakkında soru sorabilirsiniz:

  • Kontrast : Aynı şey olmayan öğeler, kullanıcılarınızın bunları hemen ayırabilecek kadar farklı görünmelidir.

  • Tekrarlama : Sadece görünüm iyi şeyler eğer Tasarımları olan böyle aynı bakış. Başka bir deyişle, tutarlılığı hedefleyin. Bu, aynı doygunluk ve açıklığa sahip, ancak renk tonunda değişen veya tüm başlıklarda degradeler kullanan (veya degradeler kullanmayan) tüm arka planlarınızın biçimini alabilir. Örneğin:

    • "Alt Konular" arka planı gradyanı olan tek arka plantır (düğme farklı bir şeydir, bu yüzden üzerinde bir gradyan olması farklı görünmesini sağlar ve kontrastı oyuna getirir)

    • soldaki gezinme vurgusu yuvarlatılmış köşelere sahipken, diğer öğelerin çoğu keskin köşelere sahiptir

    • logoda "Quiz Preferences" (yanlış yazılmış) rengi görünmüyor, aksi takdirde renklerinizi deniyorsunuz; sayfa öğeleri için kitaptaki renklerle aynı tonu almaya çalışın

(Aslında, renklerin birlikte gitmesini sağlamanın kolay bir yolu vardır: tek bir renkle başlayın, ardından sadece renk tonu, doygunluk veya açıklıktan birini değiştirin. Bu yöntemle oluşturduğunuz tüm renkler birlikte iyi görünmelidir.)

  • Hizalama : Hizalamalar, öğeleri dağınık ve tutarsız görünmek yerine bir bütün olarak birbirine bağlar. Örneğin:

    • "Beni hatırla" kutusu yanındaki diğer metinden daha düşüktür

    • "Bilgi Yarışması Tercihleri" yukarıdaki alanlardaki kırıntılardan daha sağda

    • diğer gövde metninin çoğu sola hizalanırken tercihler ortalanır

  • Yakınlık : nesneleri birbirine yaklaştırmak, onları kullanıcının zihninde gruplandırır, ancak nesnelerin etrafında çok az yer bırakmak onları sıkışık ve ayrı ayrı öğeler olarak görmek zor hale getirir. Örneğin:

    • konu kırıntıları veya alt konular çevresinde boşluk yok (bence bu grafik tasarımın tam olarak geliştirilmediğini söyleyen en yaygın özelliklerden biri)

    • paragraflarınızın ana gövde başlığının altındaki aralığı tutarsız

Web'de tasarım ilkeleri hakkında daha fazlası var, ancak bunlar en önemlilerinden dört tanesi.


+2 ...
Oren A

7

Sitenizin tasarımıyla ilgili asıl sorunun grafik tasarımda kullanıcı arayüzü tasarımında olduğu kadar fazla olmadığını düşünüyorum . Özellikle, yukarıdaki ekran görüntülerinize baktığımda, kendime sorduğum soru " Harika, önce ne denemeliyim? " Değil " Bu ne halt ve bununla ne yapmam gerekiyor? "

Bu, mühendisler (veya diğer etki alanı uzmanları) tarafından tasarlanan web siteleri ve diğer kullanıcı arabirimleri ile ilgili yaygın bir sorundur: sistemin nasıl kullanılması gerektiğini zaten biliyorlar, bu yüzden onlar için, ihtiyaç duydukları tüm özelliklere kolayca erişilebilir olduğu sürece her şey yolunda . Ne yazık ki, bu genellikle tüm özelliklerin eşit derecede göze çarpan ve erişilebilir olmasına yol açar ve yeni kullanıcıya nereden başlayacağına dair çok az ipucu verir.

Grafik tasarımın burada bazı etkileri vardır, kötü grafik tasarım herhangi bir kullanıcı arayüzünü kafa karıştırıcı hale getirebilir, oysa iyi grafikler farklı arayüz elemanlarının anlamını ve ilişkilerini netleştirerek ve kullanıcının gözünü en önemli unsurlara çekerek kullanıcı arayüzünü geliştirebilir. Ama temelde sorun daha hakkındadır neyi kullanıcıya sunmak ve nasıl güzel görünmesi konusunda daha bunu yapılandırmak.


Tamam, biraz daha ayrıntılı olalım. İlk tavsiyem: basitleştirin! Temelde üç unsuru olan Google'ın orijinal ön sayfa tasarımından ilham almak isteyebilirsiniz : logo, arama kutusu ve iki düğme (ve ikinci düğmenin gereksiz dağınıklık olduğunu iddia edebilir). Oh, ve diğer sayfalara daha az şeyle, küçük bir yazı tipinde ve / veya gri renkte ikincil öneme sahip olduğu açıkça işaretlenmiş birkaç bağlantı ve görünüşe ince bir ipucu olarak görünen bir telif hakkı uyarısı sayfanın gerçekten bittiği kullanıcılar.

Veya bir göz atın Doodle , bir noodly isim ve basit ama etkili ön sayfa tasarımı ile başka bir şirket. Kolaylık sağlamak için, ön sayfalarının ekran görüntüsünü aldım ve üstüne kırmızı karalamalar ekledim:

Ek açıklama içeren Doodle.com ön sayfa ekran görüntüsü

Doodle, sizinkilerle karşılaştırmak için oldukça iyi bir sitedir, çünkü siteleri sizinki gibi, temel olarak kullanıcıların kendi içeriklerini (sizin için kısa sınavlar, onlar için etkinlik programları) tasarlamasına ve diğer kullanıcıları onunla etkileşime davet etmesine izin veren bir çerçevedir. Büyük fark, tasarımınızdan farklı olarak Doodle milletinin, kullanıcıları havuzun derin ucuna atmak ve batmalarını veya yüzmelerini beklemek yerine, kullanıcılarını hafifçe arayüze hafifletmek için çok çaba sarf etmeleri.

Ön sayfalarına baktığımda, özellikle karalamalarım olmadan, bununla ilgili bariz olan şey, ne kadar az şey, özellikle de alakasız şeyler var. Elbette, sayfanın altında bir sürü küçük not ve bağlantı var, ancak bunların hepsi "ekranın altında" ve yeni kullanıcıların görmezden geleceği bir şey. En göze çarpan ikinci şey, kullanıcının ilk bakabileceği büyük dost harflerle, sitenin ne hakkında olduğunu açıklayan sekiz (!) Kelimelik bir bulanıklıktır. En görünür şey, tüm göz kolay ve davet yapma basit resimler, iş akışının ana adımdan, içinde, büyük grafik gösteren olduğunu. Ve aralarında, kullanıcıyı tıklamaya ve başlamaya davet eden büyük bir düğme var.

Aslında, sayfanın üst kısmında yalnızca dört tıklanabilir şey vardır (kullanıcıların hariç olmasını istedikleri gibi - tıklanabilir olan logo hariç): yalnızca ön sayfaya geri dönüyor): ilk adıma iki bağlantı etkinlik zamanlama sihirbazında, biri sağa atlamak için yeterince emin olmayan kullanıcılar için hazır bir örnek ve sağ üst köşede yerleşik kullanıcılar için bir açılır giriş iletişim kutusu açan bir göze batmayan bağlantı. Bu kadar.


Peki siteniz ne durumda? Şey olarak bana göz atlar senin ekran görüntüsünde ilk şey olabilir en azından büyük tip ve "içerik alanında" nasıl göründüğünü ortasında, kısa yeşil başlıkları vardır at muhtemelen değer bakıyor olması. Ne yazık ki, orada çok ilgi çekici bir şey yok - "Konu Bilgileri" bölümünde sadece bir köşede küçük baskı olması gereken bazı önemsiz meta veriler var, "Alt Konular" bölümünde görünen birkaç bağlantı (diğer benzer sayfalara?) sağ üst köşede olanları kopyalamak için "Kaynaklar" bölümü boştur. Ayrıca, tüm bunları okuduktan sonra bile , sitenin ne hakkında veya onunla ne yapabileceğime dair hiçbir fikrim yok.

Peki, sitenizle ne yapabilirim? Peki, ben oluşturabilir ve sınavlar alabilir söylemek böylece nasıl "demek ön sayfasında bazı büyük ve çekici görünümlü bağlantılar / düğmeler koyarak yaklaşık bir testi uygulayın " ve " Quiz yarat "? (Birincisi daha belirgin olmalıdır, çünkü yeni bir kullanıcının bir sınav oluşturmaktan muhtemelen bir test yapması daha olasıdır, ancak ön sayfada ikinci olanı dahil etmek, en azından kullanıcıların bunu da yapabileceğini bilmesini sağlar.) Ayrıca, sitenizin neyle ilgili olduğuna dair kısa bir açıklama - birkaç kelimeden kısa bir paragrafa kadar - iyi olur. (Bu, üzerine "daha fazla bilgi" bağlantısını yapıştırmak için de iyi bir yer olabilir.)

Veya diğer taraftan baktığınızda, mevcut sayfanızdan ne kaybetmeyi göze alabilirsiniz? Gerçekten "çoğu" diyorum ama üst üste giriş formudur (meta veri dökümü yanında). Elbette, yerleşik kullanıcılara oturum açmak için kolay bir yol sağlamak iyidir, ancak bu, her sayfada giriş formunu gerçekten göstermeniz gerektiği anlamına gelmez. Bunun yerine, Doodle'ın yaptığı gibi yapın ve sadece bir bağlantı aracılığıyla erişilebilir bir açılır giriş formuna sahip olun. (JavaScript kapalı olan kullanıcılar için, bağlantı için yedek hedef olarak ayrı bir giriş sayfasının olması iyi bir fikirdir.)

Sizin de kaybedebileceğiniz başka şeyler de var: örneğin, yeni ve kayıtsız bir kullanıcı olarak, neden "sil" bağlantısına benzeyen bir şey görüyorum? Sayfayı gerçekten silebilir miyim? Evet ise, neden ? Değilse, bağlantı neden orada?

Benzer şekilde, "(703 Mevcut sorular)" notu, bir arayüz elemanı gibi göründüğü anlamsız bir oyalamadır. Ziyaretçileri sitenizin derinliği ile etkilemek istiyorsanız, sitenin ait olduğu yere koyun: içerik alanında uygun ve etkileyici görünümlü bir bulanıklık. (" Halihazırda 703 sorumuz var ve daha fazlası geliyor! ")

Son olarak, her şeyin göreceli olduğunu belirtmeliyim. Örneğin, TV Tropes korkunç bir kullanıcı arayüzüne sahiptir (sizinki gibi, gerçekten de), ama önemli değil, çünkü onlar yükleri ve mükemmel ve yoğun birbirine bağlı içerik yüklerini telafi ediyorlar, böylece çoğu yeni kullanıcı ' t Navigasyon arayüzüne hiç dokunmak zorunda değilsiniz. Aslında, bu wiki sitelerinde oldukça yaygındır; Wikipedia gerçekten o kadar iyi değil. Ancak yakalama, bu etkinin sizin için çalışmaya başlayabilmesi için zaten bu içerik yüküne (veya oluşturmaya bağlı bir kullanıcı tabanına) sahip olmanız gerektiğidir.


Vay canına, oradaki bazı harika yorumlar :). Bununla birlikte, diğer sitelerin açılış sayfalarını sitemin içerik sayfalarıyla karşılaştırdığınızı belirtmek isterim (muhtemelen bu soruda belirtmeliydim). Açılış sayfamı koymuş olsaydım .. Siz tasarımcılar, tasarımım konusunda en azından sabırlı olmazdınız. Ama açılış sayfamı nasıl geliştirebileceğim konusunda bana harika fikirler verdin! İkinci olarak, giriş bilgilerim bu sitenin giriş bilgileri gibi (ve bu site gibi bir puanlama şemasına sahibim ve giriş çubuğu "Ören A. gibi ve bu tür puan ve madalyalar ..."), bu yüzden emin değilim bu konuda ..
Oren A

Ve tıklanamayan bağlantılar görüntülemeye gelince .. Kullanıcıların kayıt olduktan sonra neler yapabileceklerini anlamalarına yardımcı olmaz mı? Ve son şey - "sınav oluştur" düğmesini eklemem gerektiğini öneren sitemin mesajı iletmediğini kanıtlayın - kullanıcılar gerçekten sınavlar oluşturamaz, sadece sorular ekler ve sitenin kendisi onlar için sınavlar oluşturur ..
Oren A

Giriş formuyla ilgili noktam, ekran görüntülerinizin üst çubuğa yerleştirilmiş tüm formu göstermesidir. Gerçekten ihtiyacınız olan tek şey "giriş" yazan tek bir bağlantı olduğunda, buradaki gereksiz gereksiz karışıklık.
Ilmari Karonen

Temizlenemeyen bağlantılara gelince, genellikle hayır diyorum, en azından "sil" gibi, yalnızca sınırlı sayıda kullanıcı için geçerli olan işlemler için. (Bildirim Stack Exchange da. Onları kullanmak temsilcisi yoksa en arayüz özellikleri gizler nasıl) ise özellik birçok kullanıcı kullanım istediğiniz beklediklerini şeydir, ve buna giriş kullanmak için gereken tüm eğer, o zaman gerçek bir çalışma bağlantısı yapmak istiyorum ama önce bir giriş / kayıt formu açılır var.
Ilmari Karonen

Ps. İkinci ekran görüntünüz hakkında daha ayrıntılı bir şey yazmalıyım, ancak kısa bir süre içinde sınav gerçekten hazırsa, düğmeyi tercih formunun (veya yanındaki) hareket ettirerek ve ikincisini vurgulayarak, bunu daha açık hale getirir. Olduğu gibi, bu sayfanın başlığı benziyor o yönetici çeşit gibi yapar "Şike prefrences" (sic), olması gerekiyordu / sayfa, Prefs değil normalde giderdim yer alacak sınav .
Ilmari Karonen

3

Sizin "tasarım" güzel olurdu ... 1995 yılında. Aslında modası geçmiş. Mühendislerin her zaman ortaya çıkardıkları bir tasarım :-) Yapabileceğiniz en kolay şey, Twitter Bootstrap , Zurb , neyse , bazı css çerçevelerini kullanmaktır . Çerçeve sizi kendi "yaratıcılığınızdan" korumanıza yardımcı olur ;-)


1
Bunun neden aşağı oy verildiğinden emin değilim. Çok yararlı değil ama tam olarak yanlış değil. Tasarımın ilk izlenim oldu oldu daha biz oldukça her şeyin görünüyor iyi yapmak isteyen bir tasarımcı yerine, her şeyin eserlerini yaratmaya ilgi olabilecek bir yazılım geliştiricisi beklediğiniz tasarım tipinde. Yani, bu kısa yanıtı yazacak kadar ön tarafta olduğu için +1.
Ananda Mahto

1
... Ama hey, harika kod yazıyoruz :). Çerçevelere gelince, birçok siteye baksam da, bunlara da bir göz atacağım, teşekkürler.
Oren A

Tabii ki yapıyoruz - ben de dev bir adamım :-) Çerçeve sizi sanallaştırmalı ve sizi yönlendirmeli, böylece renk seçimlerine (önceden ayarlanmış), sayfa / bilgi mimarisine (önceden ayarlanmış) vb. Gerek yoktur. yolu. Yapmanız gereken tek şey, sayfadaki hangi bilgilerin önemli olduğuna, neyin daha az önemli olduğuna karar vermektir. Örnek: Her iki ekran görüntünüzde de web sayfasının iki farklı bölümünü görsel olarak karıştırıyorsunuz: kırıntı ve başlık. CSS çerçevesi, bu öğeleri önceden ayarlanmış olduğundan bunu yapmanızı engellemelidir.
nubm

3

Düzen açısından bakıldığında, web sitenizde gerçekten yanlış olan hiçbir şey yoktur. Logo sol üstte standart 3 sütunlu bir düzendir. Bu genel çerçeve çağlar boyunca kullanılmaktadır ve bunun nedeni işe yarıyor. Çoğu modern web sitesi, birkaç ortak düzene dayanan, ancak çok daha ince grafiklerin altında gömülü olan benzer ilkeleri kullanmaya devam etmektedir. (Bir şeyin ne kadar modern olduğuna bağlı olarak eleştiren insanlara karşı çok dikkatli olun - sadece birkaç yıl geçtiğinden, insanların bilgiyi nasıl aldıkları aniden çılgınca farklı olduğu anlamına gelmez.)

Bazıları, ana gezinme bağlantılarının sol tarafta mı yoksa üstte mi olması gerektiği konusunda tartışabilir, ancak bu farklılıklar bir site oluşturmaz veya bozmaz.

Hayır, sorun, seçtiğiniz şeylerin konumu ile ilgili değil. Grafikler, renk seçimleri, şeylerin boyutlandırılması vb. Tamamen yerleştirme, tasarım , tamamen hissetme ve görünüm ile ilgili terimler düzenini farklılaştırıyorum . Herkesin terimleri tam olarak benimle aynı şekilde kullanıp kullanamayacağından emin değilim.

Senin söyledikten sonra düzen esasen iyi, ama sizin tasarım olduğunu maalesef zor durum çözmek için, problemlidir. Düzeniniz sorun olsaydı, "arama alanlarınızı buraya taşıyın" veya "logonuzu oraya yerleştirin" gibi daha somut tavsiyeler verebiliriz. Yerleşim gerçekten kullanılabilirliğin uygulanmasıdır .

Tasarım, tabii ki yorum yapmak çok daha zor olan duygu ve stil hakkında. Birçok renk seçimini varsayılan olarak bıraktığınızı söyleyebilirim (arka plan beyaz, bağlantılar mavi, çok az arayüz resmi), bunun yerine hangi renklerin ve grafiklerin olması gerektiğini söylemek çok daha zor . Ne tür bir his istediğinize çok bağlıdır. Kurumsal bir his için sıkıcı ve güvenli maviler ve griler, masum ve çocuksu bir his için pembeler ve sarılar, heyecan verici bir gece kulübü hissi için sıcak kırmızılar ve siyahlar ... Ve o zaman bile, sadece bu örnek renkleri kullanmak mutlaka onlara bağlı olduğumu hissediyor. Şeytan Ayrıntıda.

Daha somut mizanpaj sorunları ve daha eterik tasarım sorunları arasında , önemini vurgulamak ve site ziyaretçisine rehberlik etmek için bodzio'nun başlıklar ve dipnotlar için değişen yazı tipi boyutlarıyla ilgili cevabında söyledikleri gibi bazı çakışmalar vardır. sahip olmalarını istediğiniz bilgiler aracılığıyla. Onun tavsiyelerine dikkat etmelisiniz.

Ancak, korkarım ki hedefiniz bir tasarımcıyla ortaklık kurmak değil, kendinizi çekici bir site tasarımını nasıl uygulayacağınızı öğrenmekse, sadece bir cevap almıyorsunuz, bir yolculuğa çıkıyorsunuz. İyi bir tasarımcı olmak için tasarımcılar olduğu kadar çok yol var ve orada tonlarca kaynak var, bu yüzden öğrenme fırsatı yok.

Bu belirli bir site için tasarım anlayışı edinmenin en kısa yolu için, beğendiğiniz diğer sitelere ve yaptığınız hizmete benzer bir hizmet sunan diğer sitelere bakacağım ve beğendiğiniz ve konuyla ilgili karşılaştırmaya ve zıtlıklara başlayacağım. bunlar ve sitenizde eksik olan şeyler.

Ne yazık ki, bu olabildiğince objektif ve buzdağının sadece en üst noktası. Umarım söylediğim şeylerden bazıları yardımcı olur.


Benim durumumda bu "onun";)
thebodzio

1
Bence onun en önemli noktasını ima ettiniz - duygu. Birçok siteye baktım ve bence tasarımım onlarınkinden çok farklı değil. Sanırım hep birlikte nasıl güzel görüneceklerinin “hissini” kaçırıyorum. Bu da beni umut kaybettiriyor :( :). Bütün gün renklerle oynayabilirim ve hala hangisinin en uygun olduğunu bilemeyeceğim ... Belki başka sitelere daha fazla bakmak ve renklerin birbirine nasıl uyum sağladığını hissetmeye çalışmak. Yine de bir yan not olarak, seçtiğim renklerin logoya (mavi ve sarı) uyması amaçlandı. Sanırım işe yaramadı :) Sarı hissediyorum .. çok yüksek
Oren A

@OrenA blog.visual.ly/the-use-of-yellow-in-data-design - bilgi tasarımı hakkında daha fazla bilgi ancak ilkeler hala geçerlidir. Temel olarak, sarı yüksek sesle: dikkatli kullanın. İnce sıçramalar ve vurgulamalar için harika
user56reinstatemonica8

1
@OrenA: Gönderimin cesaret kırıcı olması anlamına gelmedim ve bu şekilde çıktığında özür dilerim. Lütfen "hissetmek", mutlaka mücadele edeceğiniz bir şey olduğu anlamına gelmez, çünkü bu tartışılmazdır. Daha çok vurgulamak istedim ki, öğrenme tasarımı büyük ölçüde bir süreç pratik denemesi olduğundan, bir destek forumunda bir veya iki açıklama ile tıklatmamaya hazır olmalısınız. Bu hoşunuza giden ve yapmak istediğiniz bir şeyse, o zaman biraz sabır gerektiğini ve çok yakında hayal kırıklığına uğramamayı uyarıyorum.
Soru

2

İnsanların sitenize olumsuz tepki verdiğini düşünüyorum: Bu çok fazla soru getiriyor!

Dediğiniz gibi , işlevselliği tanıtmadan önce . Bu bana insanların bunun ne hakkında olduğunu anlamadığını söyler. Hangi web sitesi tarafından ilk cevaplanan soru olmalıdır. Çünkü internetteyse, yanlarında duramaz ve açıklayamazsınız.

"Dünyadaki tüm bilgiler", sitede neler bulabileceğinizi (veya bu konuda çok inandırıcı olmadığını) veya neden giriş yapmanız gerektiğini tam olarak bildirmez. Bu nedenle, tasarımınız kötü algılanıyor çünkü bu soruların cevaplanmasını desteklemiyor.

Yani, öncelikle "bu site ne hakkında?" Örnegin bir görev bildirimi ile. Sizin için açık olabilir, ancak web'deki diğer herkes için açık olmayabilir. Temel amaç nedir? Kısa sınavlar mı yoksa kısa sınavlar mı? İnsanların ilk yapmasını istediğiniz şey nedir? Oturum aç? Bir sınavı cevaplamak ister misiniz? Bir tane yarat? Bunlar, insanların sayfanızda kalmasını istiyorsanız cevaplamanız gereken şeylerdir.

O zaman bilgilerinizi düzenlemelisiniz. İçerik nedir, meta nedir (logo, navigasyon, giriş). Stackexchange'e bir göz atın. İçerik (açık) metadan (karanlık) açıkça ayırt edilir.

Birlikte giden şeyleri gruplandırın. Navigasyon ile bağlantısı kesilmiş ekmek kırıntılarınız var. Görsel olarak da ifadeler. Ana navigasyonda "Her şey" i bulamıyorum. Oraya nasıl gidebilirim?

Neden bütün bunlar? İnsanlar kendilerine sunulan bilgileri ne kadar hızlı anlarlarsa, kalma ve etkileşim kurma olasılıkları o kadar artar. Eğer kafanız karışmaz ve cevaplayamayacakları sorularla karşı karşıya kalırlarsa, olumsuz tepki verirler.


1

Çünkü öyle. Bu demek değildi, değil mi :) Sadece bir şakaydı, en iyi cevabım tasarım bölümünde biriyle çalışmak olurdu, eğer bir serbest meslek sahibi almak için çalışacak biriyseniz yoksa, işe yaramazsa ayrıca yeniden sıfırdan başlayın, ancak işleri daha basit tutmaya çalışın ve içeriğin nefes almasına izin verin ...

Bazı ilk ipuçları / tavsiyeler / öneriler: h etiketleri (Başlıklar) yazı tiplerini p etiketlerinden daha büyük, çok daha büyük (başlık yazı tipi boyutu 30-48 ve paragraf (11-maks 13) aralığındaki bir şey) yapın. 20 piksel kenar boşlukları veya içerik blokları arasında dolgu (örneğin, bir kenar boşluğu: 20 piksel; giriş çubuğu için daha ayrı ve okunması kolay olacaktır.

Birinin size uygun bir logo tasarlamasını sağlayın, şu an sahip olduğunuz ... iyi değil. Farklı yazı tiplerini, belki de bir sans-serif yazı tipini deneyin (Open Sans gibi, Google yazı tiplerinde ücretsiz veya .. sadece Arial-Helvetica).

Sadece serin olduğu için veya size daha iyi göründüğü için renk duygunuz yoksa degradeleri kullanmayın, düz renklere bağlı kalmaya çalışın ve belki de sonunda, bitirdiğinizde sadece CTA'da degradeleri deneyin ve deneyin ( Harekete geçirici mesaj) alanları (örneğin düğmelerde).

Yapabileceğiniz çok şey var ... ama bu şeyler genellikle zamanla gelir, birçok harika tasarıma bakarak ve bu sonucun nasıl üretildiğini anlamaya çalışarak eğitimli bir göz alırsınız ... aynı sonucu kendiniz yeniden yaratmaya çalışın, bu süreçte kullanıcı arayüzlerine bakmak / etkileşim kurmak ve deneyimlemek için işlerin neden ve nasıl yapıldığı / yapıldığı hakkında bilgi ve fikir edineceksiniz.

Kitap keşfi: Smashing Book [birinci ve ikinci kitap] ve web sitesi:

http://smashingmagazine.com

ve başka bir tane: http://www.bamagazine.com/


Özel ipuçları için çok teşekkürler! Çok yardımcı oluyorlar. Ve btw, benim için logomu oluşturmak için birini (serbest çalışan) aldım :)
Oren A

1

Vaov! Gerçekten bir yanıt oluşturdunuz! En azından tasarımınızın fark edilmediğini biliyorsunuz;)

Sorunuzun kısa cevabı: Site , bir yazılım mühendisi tarafından tasarlanmış gibi görünüyor . Yaptığın şey bu ve eminim iyi yaptın. Şimdi fikrinizi ulaşılabilir kılmak için UI tasarımı yapan birine ihtiyacınız var. Bunun hiçbir yolu yok. Bir hafta sonu tasarımı öğrenmeyecek ve sorunu çözmeyeceksiniz.

Portföylerini doldurmak ve onlara biraz özgürlük vermek isteyen bir öğrenci veya genç tasarımcı bulun. Çalışmakta olan birinin bu proje için temiz ve düzenli olmasını istiyorsunuz. Minimalizmi tercih eden bir tasarımcı bulabilecek misiniz bir bakın.


0

Ben profesyonel bir tasarımcı değilim, bu yüzden kullanıcının bakış açısından ve çeşitli web sitelerine göz atma deneyiminden birkaç şeye dikkat çekebilir miyim?

  1. Sayfanın arka plan rengi beyaz, ancak bölüm üstbilgileri / vurguları sarı veya beyaz tonlarında, biraz kontrast renkler deneyebilirsiniz , kontrast düzeyini öğe hiyerarşinize uyacak şekilde tasarlayabilirsiniz (daha yüksek seviye başlığı = daha fazla kontrast) veya sabit bir başlık içeriği renk şeması (örneğin, başlık için logoda, başlık metni için beyaz ve içerik metni için koyu-Gri gibi gösterilen kitabın ikinci sayfasında olduğu gibi derin Turuncu).
  2. Çok fazla serbest uzay sayfanıza, serbest uzay kullanıcılara nefes için bir yer vermek iyi ama çok fazla boş alan arka ofis / altı bakım gibi sayfa görünmesini sağlar. örneğin, ilk ekrandaki "Alt konular" bölümü, "Her şey" bölümü altındaki tüm alana yayılmış olabilir. Ayrıca neden iki yedek alt başlık bölümü?
  3. İçeriğin IMO dağıtımı bir hiyerarşi altında olmalıdır . Google kod sayfaları (sitenize çok benzeyen), Wikipedia veya bu site gibi sitelerden herhangi birini örnek olarak alırsanız, bunların tümü site başlığı için önemli miktarda alan harcar ve ardından içerik gelir. Ayrıca artık bir çok sayfa, farklı bir renk, genel menüler ve içine yerleştirilmiş site logosuna sahip başlık gibi bir araç çubuğu kullanıyor, ancak logonuzun bunu yapmak için çok büyük olduğunu söyleyebilirsiniz. Örneğin, sayfanın en sağındaki alt konu bölümünü
    ele alalım, gerçekten mevcut içeriğin daha fazla uzmanlaşması gibi mi görünüyorlar? Daha çok rastgele etiketler veya ilgili konular gibi görünüyorlar . Hiyerarşilerini,ağaç benzeri yapı , çeşitli dokümantasyon sayfalarında olduğu gibi, ekmek kırıntılarını da gereksiz kılacaktır. Ayrıca IMO bu ağaç için doğru yer (gezinti) sol kenar çubuğunda ve geri kalan eylemler ekmek kırıntılarının yerine gider.
  4. Tekdüzelik dağılım kadar önemlidir. Düğmelerinizin amacına / önemine göre farklı renkleri olabilir. Ancak yapıları aynı kalmalıdır. "Şimdi sınav yap" köşesi yuvarlatılmışken "Giriş" düğmeniz keskin kenarlıdır. Bu yaklaşımlardan herhangi birinden kurtulmak isteyebilirsiniz.
  5. Bağlantılar ve eylemler aynı değildir , bunları da buna göre adlandırmalısınız. Soldaki "Sil" menüsü gibi silinmiş öğeleri yansıtır veya silme eylemi söylenemez. Kullanıcılara, tıpkı GMail'de olduğu gibi bir silme düğmesi ve silinmiş bir öğe menüsü / sekmesi verin.
  6. Yazı tiplerinin amacı yansıtması çok önemlidir. Bir sanat sayfası oluşturuyorsanız veya herhangi bir literatür serif ailesi bunun için iyidir, ancak bir e-öğrenme sitesi yapmak için farklı boyutlarda takip etmek ve daha az büyütme (daha uzun kenarlar gibi) olan bir yazı tipi seçmeniz gerekir, Sans bunda iyidir. Wikipedia bunu örneğin kullanıyor. Boyut ve ağırlık seçimi de önemlidir. İstatistiklerin önemli olduğu (ve değiştiği) sayıları kalın harflerle yazın (örneğin 703 mevcut soru). Sanki ikinci ekranda soru sayısını seçtiğin gibi. IMO başlıklarındaki italikler iyi görünmüyor, bunun yerine neden kalın yazı kullanmıyorsunuz?
  7. Bu çok benim kişisel görüşüme gibidir ama bazı düşünmek daha yuvarlatılmış köşeler kutu benzeri duygular kullanıcıları rahatlatmak olacaktır.

0

Ben profesyonel bir tasarımcı ve geliştiriciyim. Bir tasarımla ilgili en önemli şeyin, onu uygulamadan önce bir tasarım oluşturmak için Fireworks gibi bir grafik programı kullanmak olduğunu düşünüyorum. Bu, şeyleri değiştirmeyi ve kolayca denemeyi kolaylaştırır. Gelişim geçmişinden geldiğinde bunun önemini biliyorum.

Hangi pozisyonlara başvurduğunuzu bilmiyorum. Bir grafik tasarım pozisyonu için başvuruyorsanız, profesyonel grafik tasarımını öğrenmek için biraz zaman ayırmak isteyebilirsiniz. Bir geliştirme pozisyonu alıyorsanız, güzel bir tasarım yapmak için profesyonel bir tasarımcıya biraz ödeme yapmak veya öğrenmek için aylar almak yerine hızlı bir düzeltme yapmak mantıklı olabilir.

Hızlı bir düzeltme yapmak istiyorsanız, size bir başlangıç ​​yapmak için bazı özellikler vermeye çalışacağım. Buradaki cevaplar iyi - ama çok spesifik değiller. Deneyeceğim.

Değişken genişlikli bir tasarımın sabit genişlikli bir tasarımdan her zaman biraz daha zor olduğunu unutmayın. Bence 3 sütun tasarımı seçme hakkınız var. İçerik doğru, tasarım o kadar da iyi değil (bence).

İşte ne yapacağım (muhtemelen bir günden daha az sürer):

  1. Logo ile başlayın. Çok meşgul görünüyor -> basitleştirmeye çalışın. Daha canlı renkler kullanın; sarı kirli görünümlü. Daha basit bir yazı tipi deneyin.
    • Logoyu yaptıktan sonra, site renklerini onunla eşleştirebilirsiniz
  2. Web sitesi hakkında her şey "havadar" olmalıdır. Bu yüzden işleri sıkmayın.
    • sol sütun çok daha geniş olmalıdır. Mevcut genişliğinin 1.5 katı
    • üstte giriş alanları etrafında daha fazla boşluk olmalıdır
    • sağda alt başlıkların her biri yeni bir satırda olmalıdır. Birbirlerine ezilmemeleri için etraflarında daha büyük boşluklar olmasını sağlayın
    • alt tablo, hücrelerde tonlarca dolgu kullanabilir, başlık div'leri daha fazla doldurulabilir, vb.
  3. İçeriğin tamamı dalgalı olmak yerine akmalıdır. Bu, mümkün olduğunca hizalama, tek tip yazı tipleri ve uygun boyutlar kullanmanız anlamına gelir.
    • Ortadaki sütun "Dünyadaki tüm bilgiler" içeriğin geri kalanıyla birlikte görünmez. Belki sola yüzer, alt çizgiyi kaldırır ve kesinlikle başlıktan daha küçük yapar.
    • Sayfa içeriği hizalanmamış. Alt içerikleri alt başlıklarla hizalarsanız daha iyi görünür.
  4. Üstteki giriş alanları daha iyi yapılabilir.
    • Etiketleri metin giriş kutularının (gri renkte) içine koyabilirsiniz. Bu onu daha temiz yapar.
    • Beni hatırla onay kutusunu / yazı tipini çok daha küçük yapabilirsiniz. En önemli özellik değil, bu yüzden önemli olan kadar büyük olmamalı.

Bu, sitenizi internetteki en harika site yapmaz, ancak umarım incelemeleri geçecek kadar parlatır. :)


-1

vay ... bu çok kötü lol.

Herhangi bir tasarım fikriniz yoksa bir şeyleri birkaç öneriyle yeniden tasarlamayı öğrenebileceğinizi sanmıyorum, bu yüzden gerçekten düzeni yapmak için başka birini almanız gerektiğini düşünüyorum .. yerel bir sanat kolejine yaklaşın ve sınıf bunu gerçek dünya örneği olarak ele alacaktır.

Ama başarısız olursa, işte birkaç önerim. Dizin / açılış sayfasının adına rağmen, daha çok bir pano veya dergi reklamı gibi çalışması gerekir. Birkaç saniye içinde HIZLI mesajını iletmesi gerekiyor. Ben bilgi değil "mesaj" dedim unutmayın. İzleyici aradığında bilginin orada olması gerekir, ancak hepsinin biraz karıştırılmış bir içindekiler gibi düzenlenmesi gerekmez.

Yani, mesaj gelince ... ilk düşüneceklerimiz Neye bakıyorlar .. web sayfası, evet, ama neyin web sayfası? Kategorilerinizi okumak bile, o sayfanın ne olduğu net değil.

'Ne' renk şeması, genel düzen ve başlık başlıkları ile aktarılacaktır.

Sorunun ne olduğunu çözdükten sonra, ilk önce ne görmelerini istediğinize karar verin. Benim seçimim Pratik yapar Mükemmel logo ve ben bunun boyutunu artıracak ve başlık dışarı pop olacaktır. Ancak, başka bir şeye veya bir tür eylem çağrısına odaklanma nedenleriniz olabilir.

En önemli şeyinizin 'Dünyadaki Tüm Bilgiler' olduğunu tahmin ediyorum çünkü onu ortaladınız (kötü fikir) italik yaptım (kötü fikir!) Ve etrafına çok fazla alan verdiniz (iyi fikir). kendilerini ifade ediyor ... IS'nin ne yaptığı ya da ne yaptığı belli değil, daha açıklayıcı ve daha az aptalca bir şey deneyin.

Genel açılış sayfasını 3 tasarım öğesine ve 3 bilgi düzeyine ayırmaya çalışın. Kendinize, görmeleri gereken İLK şey, yapmaları gereken İLK şey nedir? ikinci, üçüncü nedir? ve buna göre yeniden tasarlamaya çalışın.

Daha az renk kullanın ve mantıklı olmasını sağlayın .. neden 3 farklı çatlak blues metnin etrafına rastgele serpildi ??? Daha fazla yazı tipi boyutu (!) Kullanın, tekrar 3s'ye bölmek iyi bir başlangıçtır, en önemlisi için BÜYÜK yazı tipi, ikincil için orta vb.

Son önerim, tasarımınızı İLK ve kod yazmadan önce yapmaktır. Bir sayfayı engellemek için KAĞIT ve kalem veya kalemle başlamanızı öneririm .. sadece hızlı eskizler, bunları yaparken gerçek kelimeleri yazmayın, içerik alanının başlığa karşı ne kadar büyük olması gerektiğine karar vermeye çalışırken sadece alanları engelleyin , kenar çubuğu ne kadar büyüktür ve böyle devam eder.

Sonra bir grafik programında daha kesin bir tasarım yapın. Bir şeyleri hareket ettirin ve yerleşim ile deneme yapın. Dergi sayfası gibi çalışması gereken bir sayfa tasarladığınızı unutmayın. Görüntüleyenlerinizi duraklatın, görmelerini istediğiniz şeyi GÖSTERİN, yapmasını istediğiniz şeyi YAPMAYA yönlendirin.

Ve tasarımda ve tasarımda BAKMAYA başlayın. Sadece bakmak. içeriği değerlendirmeyin, bunun yerine web sayfaları tarafından hangi iletilerin iletildiğine bakın. Boşluk, renk, yazı tipi boyutunu nasıl kullanırlar? İyi tasarımı taklit etmeye çalışın. iyi şanslar

ve sanat okulu önerisini ele alalım. grafik tasarım programları sıklıkla öğrencileri için gerçek dünyaya yeniden tasarım projeleri aramaktadır.


-2

Bu konudan topladığım temel sorun, "tasarımınızı" tartışmak ve savunmakla ilgilenmekten daha çekici bir şey yaratmayı öğrenmekle ilgilenmektir. Tipik bir yazılım mühendisi. Sayfayı bileşen öğelerine ayırabileceğinizi, bu öğeleri test edip inceleyebileceğinizi ve ardından bileşenleri bir araya getirdiğinizde, öğelerin matematiksel olarak iyi bir tasarım sayması gerektiğine inanıyorsunuz. Daha sonra bu soruyu göndererek sayfayı tekrar bileşenlere ayırabileceğinizi ve her birinin esasını tartışabileceğinizi ve cevap sağlayıcısının söylediklerini nasıl takip ettiğini tartışabileceğinizi düşünüyorsunuz.

UX'e emdiğinizi kabul edene kadar bu sorunu yaşamaya devam edeceksiniz. Yukarıda belirtildiği gibi, grafik tasarım hissetmekle ilgilidir. Grafik Tasarım, mühendislik tasarımına eşit değildir. Matematiksel olarak bir şey inşa edemez, diğer "matematiksel olarak doğru" şeylerle entegre edemez ve iyi bir sonuç bekleyemezsiniz. UX'de asla iyi olmayacaksınız (muhtemelen) çünkü bir tasarımcının gördüğü şekilde dünyaya bakmıyorsunuz. Ancak sayfanızı ölçmeyi ve başka bir şeyle karşılaştırmayı durdurursanız - grafik tasarım hakkında hiçbir şey bilmediğinizi fark etmeye tamamen kendinizi açın, o zaman onu almaya başlayabilirsiniz ...


1
Oh, UX'de emdiğimi tamamen kabul ediyorum. Fakat şu anki algılarımı yenileriyle değiştirmek için neden yanlış olduklarını anlamam gerekiyor. "Yazı tiplerim iyi görünmüyor çünkü profesyonel bir tasarımcı böyle dedi" diyemiyorum. Bu öğrenme değil. Tam olarak neyi yanlış yaptığımı ve NEDEN yanlış anladım, şeylere yeni bir bakış açısı benimsemeden önce iyi bir açıklamaya ihtiyacım var. Ben "savunmak" değil, sadece anlamaya çalışıyorum ..
Oren A

Ören. Hala aynı düşünceyi kullanıyorsunuz. Bana bir şeyin nasıl yanlış olduğunu söyle, böylece hatayı ölçebilir ve hesaplayabilirim - nicelleştirin ve düzeltin. YANLIŞ! Sorununuzun harici girişini kabul etmeden sınırlamalarınızı ASLA düşünemezsiniz. Bir resim dersi alın. Biraz uyuşturucu al. Acı çekmek. Başkalarının deneyimlediklerinizi seçmesine izin verin. Cevabı penceresiz bir kutunun içinde göremezsiniz.
VariableLost

yorumunuzu kabul edilen cevabı düşünün.
Oren A
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.