Pierwszy draft nowego layoutu 4programmers.net

Na poczatek pare slow tytulem wstepu.

W zwiazku z planami rozwoju systemu, chcialem rowniez zmienic (odswiezyc) grafike. Jednak chcialbym uniknac zbyt duzych rewolucji, tak, aby nie trzeba bylo znacznie zmieniac kolorystyki - np. forum.

W zalaczniku prezentuje pierwszy draft strony glownej, ktory dostalem od grafika. Prosze o konstruktywna krytyke. Celem tego watku jest zebranie uwag i stworzenie mozliwie jak najlepszego layoutu. Najlepiej bedzie zapoznac sie na wstepie z zawartoscia tego watku: http://4programmers.net/Forum/Coyote/171703-jak_krytykowac_z_pozytkiem_dla_rozwoju_projektu_coyote

Moze zaczne od siebie: zielonkawy kolor tekstu (Mikroblogi czy Na forum oraz kolor zakladek) wydaje mi sie zbyt mdly. Kolory charakterysuja sie zbyt niskim kontrastem.

Slider z zielonym tlem u gory strony nalezy zignorowac. Ten element nie jest jeszcze ukonczony

Obecni używany odcień zielonego jest o wiele lepszy, seledynowy w ogóle mi nie podchodzi.

Strasznie stylizowane Apple'owo (przyciski, inputy), tzn. bardzo zaokrąglone rogi. Jestem sercem za Metro i kwadratami niż za zaokrąglonymi rogami. Nie wiem jak to drobniutkie tło będzie się używało na co dzień, możliwe, że jednolite kolory byłyby lepsze.

kolorystyka i inne cechy rozpoznawcze powinny zostac te same, w koncu od 10 lat (?) uzytkownicy po tym identyfikuja ten portal.

mi się też ten zielony nie podoba i uważam, że powinien zostać stary zielony. Co do zaokrąglonych przycisków to ja jestem akurat na tak :). Natomiast drobne tło zlewa się np. z listą zalogowanych userów i to chyba nie jest najlepszy pomysł

Z uwag estetycznych:

• Paskudny zielony
• Siateczkę w tle lepiej zastąpić jednolitym szarym... Oczopląsu można dostać...
• Czy naprawdę box z buttonem "dołącz do nas na FB" musi zajmować jedną czwartą szerokości strony....? Na większości stron wystarczy małe gustowne f na niebieskim tle.

A poniższe komentarze wróciłyby do grafika, gdybym ja miała to ciąć:

• Tytuły generalnie powinny znajdować się bliżej tego, co tytułują, niż poprzedniej sekcji. Tymczasem np. tytuł "Facebook" jest oddalony od swojego boxa o 37px, a od boxa powyżej tylko 28px! No ładnie - nawet nie to, że po środku (jak "Aktualnie online na stronie:", które też wg mnie powinno być choć delikatnie przesunięte ku temu, czego dotyczą), tylko 10 pikseli bliżej banera, niż swojego własnego boxa. To samo dotyczy "Mikroblogi" i "Na forum", gdzie przy tym ostatnim szczególnie widać, że przesunięcie nie pasuje, jest nie w tę stronę. Ten większy margines powinien być powyżej tytułu (a wielu powiedziałoby, że musi być dokładnie pomiędzy).
  Nawet w footerze, nad listingami - od "Programowanie" do górnej granicy footera (nawet nie do poprzedniego boxu mierząc, tylko do góry tego boxa): 39px. Od "Programowanie" do "Delphi" - 43px! Gdzie tu logika...

• Wrócę jeszcze do "Aktualnie online na stronie:". Tu co prawda jest napis dokładnie pomiędzy boxem "Kompedium wiedzy" a swoim własnym, ale.... tylko jeżeli nie liczymy odstępu pod kreską... Pod kreską mamy dodatkowe 20px. To sprawia, że wizualnie, to wygląda tak, jakby "Aktualnie online na stronie:" to był jeden box, a "kwae, bswierczynski, bogdans, aurel, Grimm....." to był całkiem drugi, oddzielny box! Szczególnie jak spojrzeć do kolumny lewej, gdzie właśnie taka kreska, właśnie na tym poziomie oddziela dwa zupełnie różne działy.

• W boxie "Co nowego?" zastąpiłabym "Czytaj całość" przez "więcej" - dla zwykłej konsekwencji. Tak jest w mikroblogach. Przesunęłabym też do prawej krawędzi.

• Brak konsekwencji jeśli chodzi o górny margines działów: "Partnerzy serwisu" - 39px, "Aktualnie online na stronie:" - 33px, "Facebook" - 28px, "Na forum" - 19px, "Mikroblogi" 28px. Jakbym miała to ciąć, uświerkłabym.

• Strzałeczki w listinga w footerze są wyrównane do dołu napisu, zamiast do jego środka.

• Na koniec zarzut może niesłuszny, bo mierzyłam w paincie, więc może niedokładnie zmierzyłam - ale jeżeli moje pomiary są ok, to jasny gwint, dlaczego 28px, a nie 30? Dlaczego 39, a nie 40? 19, a nie 20?

Zielony ohydny, przyciski za bardzo zaokrąglone - ogrągłe rogi są fajne, ale bez przesady. Te kropki w górnej części - byłyby ok, gdyby nie to, że piszesz po nich tekst ("aktualnie online") również szarym, tylko trochę ciemniejszym - źle się czyta. kropki wymagają rozjaśnienia (przynajmniej w tej kolumnie od "Facebook" i "co nowego?"). Ostatnio na forum zdaje się być niepotrzebnie rozstrzelone/duże. Mikroblogi ładnie. Stopka ładnie, bez tego copyrighta i "do góry" - powyżej jest logo 4p, tam można wrzucić copyright, wywalić "do góry" (bo ludzie są upośledzeni i nie umieją używać scrOLLa/paska/page up/home - tylko jak zjechali na dół?) i stopka będzie się kończyć ładniej.

mi się ten wygląd kojarzy ze stronami reklamowymi które się pojawiają po zrobieniu literówki w adresie :/

ogólnie jakoś nie podoba mi się że elementy nie mają tła i prześwituje ta krateczka - gdyby jeszcze tło strony było jednolite...
i po co tyle miejsca na stronie przeznaczać aktualnie zalogowanym użytkownikom? To taka ważna informacja?

Dzieki za opinie i prosze o wiecej :) Zbiore je i przekaze do grafika.

Pierwsze co przychodzi mi na myśl to ten zielony. Koszmar. Ten co jest aktualnie na stronie jest świetny. Poza tym pokusiłbym się o trochę więcej zielonego np. dałbym przyciski na taki właśnie jaki jest teraz na 4p. Poza tym zgadzam się z @aurel, miejscami są trochę dziwne odstępy. Chociaż na początku zdziwiłem się tym wyglądem i zacząłem klnąć, potem mi przeszło :) A poza tym czyżbyście kładki większy nacisk na FB, który zajmuje względnie sporą cześć strony ? Podobno programiści z tego forum nie lubią Fejsa ;)

Golden_Mind napisał(a):

A poza tym czyżbyście kładki większy nacisk na FB, który zajmuje względnie sporą cześć strony ? Podobno programiści z tego forum nie lubią Fejsa ;)

To jest propozycja grafika. Ja zasugeruje mu, zeby jednak to miejsce, mozna bylo przeznaczyc na cos innego, tak jak wspomniala @aurel

• Krągłości spoko, ale wg mnie za duży promień. Bardziej widziałbym zaokrąglone prostokąty niż elipsy.
• Zielony to jak mycie szklanki po Absyncie Ludwikiem.
• Facebook do wywalenia bądź ekstremalnego zredukowania. To 4programmers.net ma być najważniejsze, a nie inny, niezrzeszony portal z zerowym związkiem dla programistów. Bardziej bym widział panel społecznościówek w stylu http://guildwars2.pl/ (Facebook mamy, Steam mamy, Twittera można by podpiąć pod info o nowościach, Google+ i YouTube może kiedyś)
• Banner rotacyjny na górze na plus, można tam wrzucać promowane artykuły, wątki na forum bądź info partnerskie.
• Koniecznie pod każdy link/zakładkę podpiąć click tracking, byśmy w końcu wiedzieli czego ludzie używają, a z czego można zrezygnować.

[edited]

• Byłbym zapomniał. Ta krateczka w tle. Oczopląs to raz. Dwa, że przy powiększeniu/pomniejszeniu strony wygląda jeszcze gorzej. Zdecydowanie jednolity kolor, bez żadnej grafiki.
• Również nie widzę potrzeby informacjo "who is online" na głównej.

A koniecznie trzeba zmieniać design? Bo ten naprawdę jest czytelny i przyjemny dla oka.;)

Również panowie musielibyście pomyśleć, gdzie wrzucić reklamy. Tak, żeby można było na nich zarobić, ale równocześnie, żeby z tego powodu, nie odstraszyć użyszkodników - chociaż o ilość i rozmieszczenie reklam się nie boję, jak do tej pory, było rozsądnie ;) No chyba, że macie w planach zrezygnowanie z reklam na rzecz czegoś innego :)

A mi się tam podoba, ale oczywiście bez tego zielonego (martwego). :) Ten obecny zielony (żywy) jest lepszy. :)
Nawet wydaje mi się że łatwo można taki szablon napisać, jak się już ma gotowe grafiki (pocięte). :D

Ja myślę, że link do forum powinien być bardziej wyeksponowany. Tak jak zostało to zrobione z "kompendium wiedzy" - ładny duży banner z grafiką.

Logo w headerze jest zbyt małe, zestaw kolorów powinien zostać taki jaki jest teraz - bo to jest mocna cecha rozpoznawalna 4p. Nowy layout jest utrzymany w zupełnie innych odcieniach zielonego niż przewijały się do tej pory - źle. Sam layout jest całkiem fajny - tylko to co mówiłem, zmiana kolorów na bardziej rozpoznawcze + ew. drobne poprawki usability ;)

Za szaro. Więcej zielonego. Takiego trawiastego, jak teraz i dawniej.

W zalaczniku kolejna propozycja.

Może sekcję "Na forum" przenieść całkowicie na prawo, a w zamian powiększyć sekcję z mikroblogami?
Coś jak w załączniku.

Lepiej!

Czy sekcja ze statystykami jest w ogóle potrzebna?

@Patryk27 tylko u Ciebie większość strony jest przydzielana mikroblogom, czyli czemuś, co nie wiemy jak zadziała, jak będzie treściwe. Może warto przygotować 2 wersję layoutu, na start mikroblogi mniejsze, a gdy się okażą strzałem w dziesiątkę wersja z większym eksponowaniem?

A nie lepiej top (logo, menu kompendium,forum,powiadomienia) zostawić w obecnej formie? :)

Coldpeer napisał(a):

A nie lepiej top (logo, menu kompendium,forum,powiadomienia) zostawić w obecnej formie? :)

No jakoś niespecjalnie powalające są te nowe propozycje w stosunku do obecnego. Nie wiem czy "nowy layout" nie powinien w bardzo dużej mierze opierać się na obecnym...

A to co się rzuca w oczy, to położenie nacisku na mikroblogach (jeszcze nie istniejących - którym prawdę mówiąc wróżę nie aż takie znaczenie, żeby miały zajmować większość strony głównej).

Baza wiedzy, czyli w tym i artykuły jawią się w postaci pojedynczego przycisku. Żadnej promocji artykułów - a to mam wrażenie przyniosłoby więcej korzyści pod kątem "poczytności" 4p niż "wirtualne" mikroblogi.

Jak dla mnie ta ciemna belka na samej górze jest zbyt wysoka, w szczególności w stosunku do wielkości loga. Ale w sumie to nie wiem, jakoś nie czuję tego nowego layoutu, zobaczymy jak to będzie w finalnej wersji, ale właściwie nie słyszeliśmy opinii szeryfa - @Adam Boduch podoba Ci się ten nowy layout ? ;)

wg mnie layout jest świetny, wywal statystyki, zajawki z forum zostaw po prawej stronie i będzie gitara

IMO wszystko jest nieco za duże i mało treściwe, np. ramka z "Podstawy PHP" - zmieściły się raptem 3 zdania, a button na cały akapit. To samo w "Turniej...". Góra jest ok, ale to samo co @Golden_Mind. Buttony społecznościowe są dziwnie wciśnięte.
Ja bym na głównej widział (od najważniejszego):

• newsy (o ile jakieś będą, nie te, co teraz mamy; o, np. ten z Razerem)
• nowe artykuły (te można by dostosować do preferencji użytkownika, chociaż z drugiej strony - mało ich powstaje)
• mikroblogi
• zmiany na forum

"Na stronie" dałbym na dół, tak, jak jest na forum. Statystyki to raczej dla konkretnych artykułów/mikroblogów/tematów.

Nie podoba mi się to że ostatnie zmiany na forum są niżej.

• kompeNdium
• pasek na samej górze w pierwszej wersji layoutu powoduje, że strona wygląda jak kolejny klon layoutu facebooka. obrzydliwość. nie róbmy fb z 4p.
  w nowszej wersji kojarzy się mniej, ale wygląda jaszcze bardziej paskudnie. 20% strony na pokazanie pięciu linków (w wersji z 4_01.png).
• ogólne wrażenie mam takie, że dużo miejsca się marnuje, zbyt wiele poświęcone jest na ozdóbki, zbyt mało na treść, np. muszę przewijać, żeby zobaczyć ostatnie zmiany na forum (1600x900).
• imho layout nie przystaje w ogóle do 4p - powinno być dużo list (ostatnie zmiany w postach, mikroblogi, ostatnie artykuły, ostatnio dodani użytkownicy, zalogowani, newsy); co to jest "poznaj podstawy php"? skąd się to wzięło i dlaczego akurat to? przecież nie mamy teraz takiej funkcjonalności. to samo z "razer" - szto to? slider z "super kody" - to samo. komu się będzie chciało dobierać grafikę do takiego slidera i w ogóle skąd będzie czerpana treść?
• na co taka wielka stopka? to samo tyczy się aktualnego layoutu.

podsumowując - to jest serwis dla programistów. najważniejsza jest treść, potem funkcjonalność, a dopiero na końcu wygląd. na dobrą sprawę nie wiem, po co kolejna zmiana layoutu, jeszcze nie do końca przyzwyczaiłem się po poprzedniej zmianie, a tu już następna.

Aha, to na zielonym to newsy, tak? Chyba myślałem, że reklama czy coś i w ogóle nie zwracałem uwagi (na drugim screenie tego nie ma). Tam jest ok, więc sekcja z "Turniej COD" jest zbędna.

Poki co ten draft poszedl w odstawke. Niestety nie nadaje sie w takiej formie na layout 4programmers.net