• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Ocena designu strony głównej

VPS Starter Arubacloud
+1 głos
307 wizyt
pytanie zadane 1 lutego 2020 w Nasze projekty przez Layoutowiec Mądrala (5,470 p.)

Witam wszystkich!
 

Od kilku dni prowadzę pracę nad moją stroną. Skończyłem stronę główną, i prosiłbym o ogólną ocenę. Nie jestem do końca pewien czy idzie to w dobrą stronę, dlatego zanim zacznę pracować nad kolejnymi zakładkami chciałem poprosić tutaj o rady, na temat tego co mógłbym zrobić lepiej, oraz co mógłbym jeszcze "dołożyć"

Inspirowałem się także tymi stronami: 

https://unspam.reallygoodemails.com/

https://www.behance.net/search

https://www.apple.com/

I chciałem spytać czy nie będzie z tego powodu żadnych problemów no bo oczywiście nic nie jest skopiowane 1:1, aczkolwiek wolę spytać kogoś bardziej doświadczonego.

Moja strona: http://dreamsday.pl/

Bardzo dziękuję za poświęcony czas!

1 odpowiedź

+3 głosów
odpowiedź 1 lutego 2020 przez WireNess Stary wyjadacz (11,240 p.)

Cześć!

Na początku zapytam na jakim etapie jesteś? Czy strona będzie wyglądała tak jak teraz (weź pod uwagę drobne zmiany) czy może jest to dopiero prototyp?

 Skończyłem stronę główną, i prosiłbym o ogólną ocenę

Rozumiem przez to, że na stronie wprowadzisz więc co najwyżej drobne zmiany.

 

I chciałem spytać czy nie będzie z tego powodu żadnych problemów no bo oczywiście nic nie jest skopiowane 1:1, aczkolwiek wolę spytać kogoś bardziej doświadczonego.

Wszystkie strony poniekąd wyglądają podobnie. Layout strony również podlega prawu autorskiemu, ale nie powinieneś go złamać o ile nie będziesz kopiował 1:1.

 

Informacje które napisałem poniżej, są tylko moją skromną opinią! [SKIEROWANE DO INNYCH UŻYTKOWNIKÓW - nie do autora wpisu!] Jeśli z czymś się nie zgadzasz zachowaj to dla siebie ;)

 

Teraz do rzeczy (nie mam zbyt wiele czasu, więc opiszę tylko te rzeczy które zauważyłem podczas przeglądania):

Po pierwszeStrona główna (czyli to co zobaczy użytkownik po załadowaniu się witryny) jest bardzo ważna. Głównie dlatego, że to wtedy przekonujesz użytkownika czy ma przewijać dalej czy nie. To co zobaczy użytkownik "na starcie", może decydować o dalszych decyzjach (np.: czy zdecyduje się na zakup usługi (w przypadku strony na temat wykonania czegoś dla klienta) czy nie)

Twoja strona główna nie zawiera żadnej grafiki, natomiast jest bardzo dużo koloru czarnego na tle białego (co jest bardzo niekomfortowe dla użytkownika). Dodatkowo wielkość czcionki jest według mnie delikatnie za duża, a typy czcionki nie pasują do danych sekcji (na przykład tytuł strony może być - pisany dużymi literami, przewijany dwoma kolorami (najlepiej takimi które komponują się z całą stroną), dodane odpowiednie odstępy od liter i wyrazów, odpowiednio umiejscowiony, nie łączący się kolorami z tłem (jeśli jest grafika) itp.)

 

Po drugie: Menu jest delikatnie przesunięte na lewą stronę w przypadku dużych rozdzielczości ekranu (w moim przypadku: 1920x1080), natomiast im mniejsza rozdzielczość, tym bardziej menu "schodzi na lewo". 

Jeśli pasek górny nie zawiera loga strony, menu niech będzie centralnie na środku, a w przypadku telefonów, "hamburger" niech znajdzie się po prawej stronie (większość ludzi jest praworęcznych, więc łatwiej im będzie kliknąć [: )

 

Po trzecie: Brak "loga". Nie wiem czy jest tak tylko w moim przypadku, ale ja zwracam dużą uwagę na logo strony, ponieważ po pierwszym rzucie oka mniej więcej wiem czego spodziewać się na stronie (chodzi o tematykę)

 

Po czwarte: Nie zabieraj sobie czasu na bootstrap'a - chyba, że na prawdę chcesz - to tylko twoja decyzja, pamiętaj o tym!

Strony wykonane w bootstrap'ie są bardzo podobne i schematyczne.

 

Po piąte: Informuj użytkownika o akcji którą wykonuje - chodzi mi o to, że po najechaniu na opcję w menu nie dostrzegam żadnego nawiązania do tego, że jest to link który gdzieś przenosi (to tylko przykład!). Dodaj jakąś zmianę koloru (który pasuje do strony!), podkreślenie lub inną animację!

 

Po szóste: Brak stopki.

Ile razy widziałeś stronę, która nie posiada stopki? Jest to bardzo nienaturalne, ponieważ ludzie są przyzwyczajeni do tego, że coś informuje ich, że dotarli do końca strony. W przypadku twojej witryny przewinięcie do końca i "zablokowanie użytkownika" jest bardzo niekomfortowe. Zmień to!

 

Po siódme: Unikaj stosowania domyślnych borderów (chyba, że musisz ich użyć, ale wtedy chociaż je wystylizuj!).

Chodzi mi o "ostatnie wpisy na forum" czy też "najlepsi gracze". Przykro mi to mówić, ale strasznie to wygląda. Ponad to dodajesz użytkownikowi uczucia przytłoczenia i ciasnej przestrzeni - przynajmniej w moim przypadku :D

 

Po ósme: Dostosuj layout strony do tematyki! Twoja strona wygląda mi na typ: forum do gry.

Czy nie lepiej byłoby podzielić stronę na kolumny? Strony typu "One page" (trochę tu naciągnąłem to stwierdzenie) wyglądają ładnie w przypadku portfolio czy też wtedy kiedy chcesz zapoznać i przekonać klienta do napisania do Ciebie w sprawie wykonania, opisanej na stronie usługi. Natomiast w twoim przypadku lepiej wyglądałoby podzielenie strony na 2 kolumny. W lewej mogłyby się znaleźć informacje pasujące do forum tzn.: ostatnie wpisy, filtrowanie wpisów, najważniejsze kategorie itp., natomiast po prawej byłoby miejsce na: najlepszych graczy, archiwum, kategorie mniej ważne czy też - reklamy.

 

LINKI które mogą Ci się przydać w dalszej "przygodzie":

- Jak kolory wpływają na użytkownika?

- Darmowe grafiki do strony

- Ikony do zachęcenia użytkownika

Typy stron internetowych - kiedy jaki stosować?

 

 

Bardzo dziękuję za poświęcony czas!

Nie ma problemu!

Pozdrawiam i życzę powodzenia w dalszym tworzeniu stron!

komentarz 1 lutego 2020 przez Layoutowiec Mądrala (5,470 p.)

Póki co strona to właściwie lekki prototyp i trochę czas na poeksperymentowanie nad dobrym layoutem.

Postaram się lepiej dostosować czcionki oraz ich rozmiar. 

Z menu mam mały problem ponieważ nie do końca wiem jak powinienem je wycentrować. Siedziałem nad tym dłuższą chwilę, jednak nie znalazłem niczego konkretnego, no bo to bootstrapowy gotowiec aczkolwiek z pewnością postaram się to jeszcze poprawić.

W temacie loga, takowego jeszcze nie posiadam, mam jedynie prototyp zrobiony na "szybko", jednak nie użyłem moich grafik, dlatego nie chciałem go wrzucać na forum

No chciałem korzystać trochę z bootstrapa, ponieważ wydawało mi się, że to oszczędzi trochę czasu jeśli chodzi o prace z mniejszymi rozdzielczościami 

Masz rację, z pewnością to poprawi intuicyjność u użytkowników

Pamiętam o stopce, wiem że to ważny atrybut, dodam go oczywiście

Według mnie tez takie bordery nie wyglądają zbyt dobrze, jednak nie wiedziałem co mogę zrobić aby zawrzeć te sekcje na stronie, dlatego postawiłem na bordery. Co mogło by być lepszym wyborem tak aby wyglądało to dobrze według Ciebie?

Znaczy strona to nie bezie tak stricte forum. Będzie to coś w stylu tej strony, a forum ma być jedynie dodatkiem. Na stronie głównej chciałem umieścić niewielkie części z każdej z podstron do których można się udać poprzez kliknięcie w menu bądź w przyszłości poprzez kliknięcie na obecnie zielone kwadraty, w których miejsce wejdą grafiki, jednak na grafice zbytnio się nie znam dlatego raczej zapłacę komuś za ich wykonanie.

Osobiście także uważam że przeważający czarny oraz biały kolor może być mocno przytłaczający oraz zbyt elegancki jak na stronę o takiej tematyce, niestety jednak nie mam pojęcia jak mógłbym trochę "ożywić" tą stronę co gdzie dodać itd. Myślałem rozbudzić stronę tymi odcieniami zieleni której użyłem przy tych kwadracikach, ale nie mam pojęcia jak.

 

komentarz 1 lutego 2020 przez WireNess Stary wyjadacz (11,240 p.)

Z menu mam mały problem ponieważ nie do końca wiem jak powinienem je wycentrować. Siedziałem nad tym dłuższą chwilę, jednak nie znalazłem niczego konkretnego, no bo to bootstrapowy gotowiec aczkolwiek z pewnością postaram się to jeszcze poprawić.

Zrób tak:

<div class="container">
    <nav>
        ...
    </nav>
</div>

Pomoże :)

 

W temacie loga, takowego jeszcze nie posiadam, mam jedynie prototyp zrobiony na "szybko", jednak nie użyłem moich grafik, dlatego nie chciałem go wrzucać na forum

Nie od razu Kraków zbudowali! laugh Na początek umieszczaj grafiki zastępcze (tzw. placeholder'y - grafika w google wink), potem kiedy strona będzie gotowa od zaplecza technicznego, podmiana grafiki na właściwą nie zajmie dużo czasu ;)

 

Pamiętam o stopce, wiem że to ważny atrybut, dodam go oczywiście

W pytaniu napisałeś, że strona jest już prawie gotowa. W przypadku kiedy oddałbyś taką stronę klientowi z dopiskiem "prawie gotowa" prawdopodobnie nie skończyłoby się to dobrze laugh

 

Według mnie tez takie bordery nie wyglądają zbyt dobrze, jednak nie wiedziałem co mogę zrobić aby zawrzeć te sekcje na stronie, dlatego postawiłem na bordery. Co mogło by być lepszym wyborem tak aby wyglądało to dobrze według Ciebie?

Jak dla mnie - dobrze wyglądałby w tym miejscu slider: zobacz to: https://swiperjs.com/demos/

 

Osobiście także uważam że przeważający czarny oraz biały kolor może być mocno przytłaczający oraz zbyt elegancki jak na stronę o takiej tematyce, niestety jednak nie mam pojęcia jak mógłbym trochę "ożywić" tą stronę co gdzie dodać itd. Myślałem rozbudzić stronę tymi odcieniami zieleni której użyłem przy tych kwadracikach, ale nie mam pojęcia jak.

Sprawdź to: https://coolors.co

 

Ogólnie rzecz biorąc - jeśli nie masz pomysłu na wykonanie jakiegoś elementu strony, zawsze możesz poszukać przykładów w internecie! Przykładowo: [LINK1], [LINK2]

komentarz 1 lutego 2020 przez Layoutowiec Mądrala (5,470 p.)

Pomoże :)

W sensie to powinno wyglądać tak:

<div>
<nav>
    <nav class="navbar navbar-expand-lg navbar-light bg-light ">
        <a class="navbar-brand" href="#">
            <img src="img/Klepsydra.png" width="23" height="40" class="d-inline-block align-top" alt="">
        </a>
        
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse  " id="navbarNav">
          <ul class="navbar-nav ">

            <li class="nav-item mr-5 ">
                <a class="nav-link text-dark " href="#">Zarabianie</a>
            </li>
            <li class="nav-item mr-5">
                <a class="nav-link text-dark" href="#">Forum</a>
            </li>
            <li class="nav-item mr-5">
                <a class="nav-link text-dark" href="#">Ranking</a>
            </li>
            <li class="nav-item mr-5">
                <a class="nav-link text-dark" href="#">O Nas</a>
            </li>
            
          </ul>
        </div>
    </nav>
    </nav>
</div>

 

W sensie ja mam logo, no ale u siebie na lokalnej wersji. Później je zamienię już na to właściwe.

W pytaniu napisałeś, że strona jest już prawie gotowa. W przypadku kiedy oddałbyś taką stronę klientowi z dopiskiem "prawie gotowa" prawdopodobnie nie skończyłoby się to dobrze laugh

Racja, proszę mi wybaczyć mój błąd.

 

Jak dla mnie - dobrze wyglądałby w tym miejscu slider

Nie do końca jestem pewien jak powinienem to zastosować żeby tu dobrze wyglądało...

Sprawdź to: https://coolors.co

Szukałem stron tego typu i to dosyć pomocne jednak w jakich elementach można by to zastosować ?

Ogólnie rzecz biorąc - jeśli nie masz pomysłu na wykonanie jakiegoś elementu strony, zawsze możesz poszukać przykładów w internecie! Przykładowo: [LINK1][LINK2]

O! Dziękuję bardzo. Wcześniej jeśli szukałem czegoś w tym stylu wchodziłem np. na różne strony/fora etc. Jednak nie widziałem że Google daje nam tak łatwą możliwość znalezienia tego

komentarz 1 lutego 2020 przez WireNess Stary wyjadacz (11,240 p.)

W sensie to powinno wyglądać tak:

Tak wiem, ale aby uprościć sprawę, uogólniłem kod do najprostszej postaci i dodałem "..." - każdy wie o co chodzi :D

 

Nie do końca jestem pewien jak powinienem to zastosować żeby tu dobrze wyglądało...

Przykładowo:

Tutaj masz jak zacząć (musisz sobie poradzić): https://swiperjs.com/get-started/

 

Szukałem stron tego typu i to dosyć pomocne jednak w jakich elementach można by to zastosować ?

Tutaj ogranicza Cię tylko i wyłącznie twoja wyobraźnia! Możesz dodać dany kolor na przyciskach, tłach, borderach, linkach (:hover) itp. itd.

Ćwicz, a zobaczysz jak będziesz wymiatał za rok!

 

O! Dziękuję bardzo. Wcześniej jeśli szukałem czegoś w tym stylu wchodziłem np. na różne strony/fora etc. Jednak nie widziałem że Google daje nam tak łatwą możliwość znalezienia tego

Szukajcie, a znajdziecie :D 

 

komentarz 1 lutego 2020 przez Layoutowiec Mądrala (5,470 p.)

Tak wiem, ale aby uprościć sprawę, uogólniłem kod do najprostszej postaci i dodałem "..." - każdy wie o co chodzi :D

No, ale to nie centruje menu. W sensie dalej jest po lewej stronie... Dlatego chciałem spytać

Tutaj masz jak zacząć (musisz sobie poradzić): https://swiperjs.com/get-started/

Właściwie nie wygląda to najgorzej, być może jest to bardzo dobry pomysł na wykonanie tej sekcji, którego mi brakowało 

Tutaj ogranicza Cię tylko i wyłącznie twoja wyobraźnia! Możesz dodać dany kolor na przyciskach, tłach, borderach, linkach (:hover) itp. itd.

No dobrze wydaje mi się, że jescze nie jestem na tyle dobry, aby umieć to tak dobrze zastosować ale będę się starał każdego dnia pomyśleć nad tym co mógłbym jeszcze poprawić

Ćwicz, a zobaczysz jak będziesz wymiatał za rok!

Naprawdę dziękuję za motywację. Być może dla Ciebie to nie wiele, ale dla mnie znaczy to naprawdę dużo laugh​​​​​​

Postaram się poprawić wszelkie błędy i trochę nad tym wszystkim popracować, być może dodając jescze coś od siebie. 

komentarz 1 lutego 2020 przez WireNess Stary wyjadacz (11,240 p.)

No, ale to nie centruje menu. W sensie dalej jest po lewej stronie... Dlatego chciałem spytać

Sprawdziłem i działa. Może być tak, że twój hosting nie zmienia kodu w czasie rzeczywistym, lub przeglądarka zapisała już taki schemat w pamięci podręcznej i z niej korzysta (zdarzyło mi się to kilka razy)

W razie czego zapraszam na pw. W miarę możliwości pomogę!

Podobne pytania

0 głosów
3 odpowiedzi 223 wizyt
pytanie zadane 30 sierpnia 2018 w Grafika i multimedia przez Greeenone Pasjonat (16,100 p.)
+4 głosów
1 odpowiedź 291 wizyt
pytanie zadane 8 sierpnia 2017 w Nasze projekty przez mikolajc Nowicjusz (160 p.)
0 głosów
3 odpowiedzi 250 wizyt
pytanie zadane 20 sierpnia 2018 w Grafika i multimedia przez Greeenone Pasjonat (16,100 p.)

92,454 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...