Autor Wątek: Wygląd strony  (Przeczytany 26573 razy)

Offline DarkEngineer

  • Użytkownik

# Grudzień 27, 2014, 18:06:07
Chciałbym uzyskać wskazówki co do wyglądu strony. Tworzę stronkę która ma być jako strona informacyjna oraz panel logowania do gry. Proszę o konstruktywną krytykę odnośnie kolorystyki i konstrukcji oraz porady co można umieścić na niej, aby odnosiła wrażenie przyjemnej dla użytkownika. Stronę robię sam, nie mam dużego doświadczenia dotyczącego kolorystyki.

Link: http://novabiorobotics.eu/

Offline Mr. Spam

  • Miłośnik przetworów mięsnych

Offline karaluch666

  • Użytkownik
    • Moje folio

# Grudzień 27, 2014, 20:08:15
Na pewno zmień fioletowy napis na górze strony, bo teraz to ni cholery nie da się przeczytać co tam jest napisane.

Offline DarkEngineer

  • Użytkownik

# Grudzień 27, 2014, 21:12:42
ok, spróbuję sprawić go bardziej czytelnym

Offline Kos

  • Użytkownik
    • kos.gd

# Grudzień 27, 2014, 22:16:39
Z małych uwag: Guziki są lewe, bo najeżdżam myszą na tło, guzik się podświetla, klikam i nic się nie dzieje, muszę kliknąć dokładnie na napis a podświetlenie mi kłamie.

Z dużych: Wchodzę na stronę i widzę jej changelog, zero wskazówek na temat "gdzie ja jestem i po co?".

Offline DarkEngineer

  • Użytkownik

# Grudzień 27, 2014, 22:24:14
@Kos dzięki za sprawdzenie tych przycisków, postaram się to zmienić. Zobacze też co z tymi informacjami, może coś właśnie nad niusami zrobię o przeznaczeniu.

Offline Reg

  • Administrator
    • Adam Sawicki - Home Page

# Grudzień 27, 2014, 23:53:07
Moje sugestie:

- Logo jest kompletnie nieczytelne przez te kropki/szum - moim zdaniem do wymiany.
- Nie wiem, czy też to macie, ale w moim Firefox/Windows każda litera "s" wygląda jak "ś". Dołączam obrazek. Pewnie coś nie tak jest z tą czcionką.
- Nagłówek "Nova Biorobotics - strona główna" - niepotrzebny. Po co to pisać, skoro u góry już jest logo z nazwą strony? (Aha, może po to że tamto logo jest nieczytelne ;)
- "Autor: admin (WEBSITE)" Będzie więcej autorów? Jest potrzeba, żeby internauta wiedział, kto jest autorem danego wpisu? Jeśli nie, do usunięcia.
- Pasek z komentarzami: ma inne tło i stanowi taki jakby separator między wpisami, a nie wskazuje wizualnie, czy dotyczy wpisu powyżej, czy poniżej niego. Moim zdaniem przydałoby się bardziej te wpisy jakoś oddzielić.

Offline Kos

  • Użytkownik
    • kos.gd

  • +1
# Grudzień 28, 2014, 00:07:55
- Nie wiem, czy też to macie, ale w moim Firefox/Windows każda litera "s" wygląda jak "ś". Dołączam obrazek. Pewnie coś nie tak jest z tą czcionką.

Na pewno każda? Bo to na screenie to jest ligatura s-t :-)

Offline Kos

  • Użytkownik
    • kos.gd

# Grudzień 28, 2014, 00:45:24
Okej, ostatnio się nie przyłożyłem, teraz się przyłożę trochę bardziej.

Można stronę oceniać na podstawie np. takich kryteriów jak:

1. Czy dobrze działa (technicznie)?
2. Czy spełnia swoją rolę?
3. Czy jest ładna?

Do 1 się przyczepiłem wcześniej (guziki), można jeszcze sprawdzić pod kątem bezpieczeństwa - w PHP bez frameworka jest całkiem łatwo o zabawne dziury :) Jedną podręcznikową Ci już znalazłem, podepnij sobie jakieś szablony zamiast wywalać zmienne prosto w HTML.

2. Zasadniczo nie wiem czy strona swoją rolę spełnia, bo nie wiem dla kogo jest przeznaczona. Pomyśl dla kogo jest i czego kto na niej szuka. Zgaduję:
- fani gry - chcą wiedzieć co nowego, dostawać info o aktualizacjach
- nowi znajomi - chcą wiedzieć co to takiego Nova Robotics i co można znaleźć
Jak masz taki zarys widowni, to możesz zastanowić się z czym wyjść widzom naprzeciw tak żeby w miarę zadowolić wszystkich.

3. Nie znam się na upiększaniu, jakbyśmy razem usiedli nad CSS to by się coś wykombinowało, ale na razie postaram się dać jakieś wskazówki:

- masz mnóstwo kolorów jak na taką prostą stronę. Jest pstrokato! Nawet bez logo masz bury w tle, szary pod newsami, bardziej szary między newsami, jeszcze inny pod linkach, do tego trzy kolory tekstu i czwarty na losowe linie. Bardzo dużo elementu. Rozmiarów czcionek też mnóstwo. Spróbuj trochę mniej różnorodności: daj jeden kolor na tekst, drugi na tło tekstu, trzeci na tło tła, ogranicz fonty do 2 rozmiarów (header/button i cała reszta) i spróbuj w takich sztywnych ramach ułożyć jakoś treść żeby było widać co jest bardziej ważne a co mniej. Ograniczenia pobudzają kreatywność :)

- Czcionka jest bardzo dekoracyjna, może zostawisz ją na nagłówki etc i dasz coś prostszego na tekst? 2 fonty na stronę to tak w sam raz.

- No i nie bój się dać więcej pustej przestrzeni np. między newsami. Nie musi być gęsto, a `padding: 1em` w losowych miejscach potrafi dużo ugrać :-)

Offline Astisus

  • Użytkownik
    • Portfolio

# Grudzień 28, 2014, 11:34:51
Dorzucę od siebie jeszcze brak dopasowania się strony do wielkości okna/urządzenia. Teraz sporo osób przegląda strony na tabletach i smartphonach (tu strona się lekko rozsypuje), więc jest to mile widziane. Ale potraktuj to jako radę na przyszłość, uwagi Kosa są bardziej "naglące".

Offline Xender

  • Użytkownik

# Grudzień 28, 2014, 12:45:24
Dorzucę od siebie jeszcze brak dopasowania się strony do wielkości okna/urządzenia. Teraz sporo osób przegląda strony na tabletach i smartphonach (tu strona się lekko rozsypuje), więc jest to mile widziane. Ale potraktuj to jako radę na przyszłość, uwagi Kosa są bardziej "naglące".
Czy to całe "responsive design" do czegokolwiek się nadaje?
Poza byciem trendy buzzwordem oczywiście.

Strony serwujące tryb mobilny przeważnie wymagały otworzenia menu, zaznaczenia "trybu desktop" i przeładowania strony. Wtedy przy odrobinie szczęścia serwowało wersję, która nadawała się do przeglądania.

Od tej pory jestem nieufnym wszelkim pomysłom przystosowywanie strony do mniejszych ekranów. 10x lepiej sobie oddalić lub przybliżyć, jak potrzeba.

Offline Raptor

  • Użytkownik

# Grudzień 28, 2014, 13:11:21
Od tej pory jestem nieufnym wszelkim pomysłom przystosowywanie strony do mniejszych ekranów. 10x lepiej sobie oddalić lub przybliżyć, jak potrzeba.

Oczywiście, że o wiele lepiej sobie oddalać czy przybliżać, niż korzystać z specjalnych wersji stron, które są o wiele mniej czytelne i funkcjonalne. Jedyny warunek, to żeby dało się przybliżać treść. Często na stronach przez jakieś hacki w CSSie przy przybliżeniu wszystko się rozjeżdża, divy przeskakują w inne miejsca. Albo co gorsza pojawiają się wyskakujące okienka, które ustawiają się tak, że krzyżyk zamykający nie mieści się nigdy na ekranie (jakieś "sprytne" wyśrodkowanie okienka większego, niż ekran).

Tutaj pod tym względem jest całkiem ok, jedyne co zauważyłem, to tekst "Komentarze (x)" wyjeżdżający poza szare tło, najeżdża na reklamę (smartfonowe Google Chrome).

Offline Astisus

  • Użytkownik
    • Portfolio

  • +1
# Grudzień 28, 2014, 13:23:50
Tylko zauważ, że jego strona się rozsypuje (niby drobnostki, ale jednak) więc warto to poprawić. Wersja typowo mobilna i jej użyteczność to już według mnie kwestia gustów i przyzwyczajeń, a jak wiadomo - wszystkich się nie zadowoli. No i jeszcze dochodzi samo wykonanie, które często pozostawia wiele do życzenia.

Jednak ja wychodzę z założenia, że jeśli jakiś znaczący procent użytkowników będzie odwiedzać stronę z poziomu "mobilnego" to warto o to zadbać w jakiś sposób - w końcu leży to wtedy w moim interesie.

Offline Xion

  • Moderator
    • xion.log

  • +2
# Grudzień 28, 2014, 16:43:15
Cytuj
Czy to całe "responsive design" do czegokolwiek się nadaje? (... bla bla rant ...)
/facepalm Klasyczne "nie znam się, więc się wypowiem". Zaczynasz od responsive design, a potem od razu zaczynasz narzekać na dedykowane wersje mobilne stron -- inaczej mówiąc, rzecz dokładnie odwrotną niż to, na czym responsive design polega.

W resposywności (*) chodzi w pierwszej kolejności o dopasowanie się do wymiarów okna -- nie tylko telefon vs. tablet vs. laptop vs. duży monitor, ale chociażby do różnych wymiarów okna przeglądarki na tych dwóch ostatnich. Poza tym celem jest też wspieranie różnic pomiędzy urządeniami, głównie poprzez np. dopuszczanie zarówno kilków jak i tapów, oraz ostrożność z niektórymi technikami UI-owymi (np. darowanie sobie wyrównania do dołu, bo klawiatury ekranowe psują to dość ostro).
Zasadniczo chodzi więc o to, żeby owych `if (mobile)` nie było wcale, albo przynajmniej jak najmniej (gdy już się inaczej nie da).

(*) tak, wiem że buzzword i że to słowo miało pierwotnie zupełnie inne i lepsze znaczenie, ale c'est la vie

Offline Xender

  • Użytkownik

# Grudzień 28, 2014, 18:43:08
/facepalm Klasyczne "nie znam się, więc się wypowiem". Zaczynasz od responsive design, a potem od razu zaczynasz narzekać na dedykowane wersje mobilne stron -- inaczej mówiąc, rzecz dokładnie odwrotną niż to, na czym responsive design polega.
Umyślnie, gdyż oba są różnymi rozwiązaniami tego samego "problemu" z przeglądaniem stron na małych ekranach.
Tylko, że ja problem nie bardzo widzę, a próby rozwiązania problemu, którego nie ma, mogą napsuć więcej, niż potrzeba...

Dlatego interesuje mnie odpowiedź pytanie, czy responsive design problemy stwarza, czy rozwiązuje.

Offline DarkEngineer

  • Użytkownik

# Grudzień 28, 2014, 18:44:32
@Astisus nie myślałem o stronie pod względem urządzeń mobilnych, dlatego z pewnością się rozsypuje na mobilkach.

Jak już wcześniej mówiłem, nie znam się na tworzeniu jednolitych stylów stron. Moje doświadczenie z tym wiążę się bardziej na metodzie prób i błędów. Tym bardziej jako twórca strony patrząc na stronę nie mam odzwierciedlenia w tym czy strona jest w harmonii kolorystycznej ani czy jest za bardzo ściśnięta. Dlatego dzięki bardzo za uwagi pod względem wyglądu strony i innych aspektów technicznych.