Szczera krytyka designu

Szczera krytyka designu

Wątek przeniesiony 2020-06-01 14:57 z Społeczność przez cerrato.

Krzysztof Król
  • Rejestracja:prawie 5 lat
  • Ostatnio:ponad 4 lata
  • Postów:2
0

Cześć, proszę o podzielenie się myślą na temat wyglądu mojej strony. Robię ogólnie frontend, strony internetowe i pozycjonowanie. Mam zamysł na odświeżenie strony głównej w React i trochę przemyśleń o rozwiązaniach UX, jednak nie mam kogo innego zapytać o obecny stan. Wiem jak przerobić sekcje portfolio i laboratorium, żeby nie były toporne a nawet eksponowały w przystępny sposób. Być może jednak nie jest tak źle? Proszę o odpowiedź czy mogę podlinkować stronę do oceny.

sugar_hiccup
Proszę o odpowiedź czy mogę podlinkować stronę do oceny. wszystko tak rozwlekasz na 100 etapów do zatwierdzenia? Wyślij link, na pewno ktoś chętnie skrytykuje.
UglyMan
Ty się do wszystkiego tak zabierasz? Ależ oczywiście milordzie, że możesz udostępnić linka.
Krzysztof Król
  • Rejestracja:prawie 5 lat
  • Ostatnio:ponad 4 lata
  • Postów:2
0

wszystko tak rozwlekasz na 100 etapów do zatwierdzenia?

Haha, musiałem rozbić go na drugą wiadomość, bo można podlinkować dopiero od drugiego posta. :D Nie chciałbym zostać podsumowany jako spamer. https://royalcode.eu

edytowany 4x, ostatnio: Krzysztof Król
purrll
  • Rejestracja:około 5 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Kuala Lumpur
  • Postów:241
3

Nareszcie jakiś front-end, któremu przy okazji zadam bardzo ważne pytanie na bazie jego wypowiedzi. Napisałeś:

Robię ogólnie frontend, strony internetowe i pozycjonowanie. Mam zamysł na odświeżenie strony głównej w React i trochę przemyśleń o rozwiązaniach UX

Pomijając już, że Twoja strona wygląda całkiem dobrze chociaż przypomina jakieś 3_000_000 innych stron w tym 97% szablonów, które można kupić za 15$ na themeforest co kierowało Tobą żeby używać React? Pytam całkiem serio. Zawsze mnie zastanawiało co kieruje ludźmi wsadzającymi kobyły pokroju React/Angular do prostej Single-Page w której oprócz obrazków, treści, slidera i formularza kontaktowego nic więcej nie ma.

Pytam z perspektywy człowieka, który z frontem nie ma zbyt wiele wspólnego. Dzięki za potencjalną odpowiedź.


WeiXiao
chęć obycia się z frameworkiem
Krzysztof Król
Obecnie react jest moim najbliższym kamieniem milowym, więc krążą mi po głowie myśli jak mogę go już teraz wykorzystać w projektach, które nie są tylko treningiem. Wbrew pozorom strona główna w react nie byłaby cięższa od obecnej, a w JS pracuje mi się po prostu wygodnie. Jest to dla mnie coś nowego po paru latach pisania frontu z użyciem PHP i JS do obsługi zdarzeń. Potraktowałbym to jako eksperyment. Jeśli chodzi o wygląd, to zerżnąłem atom.io.
sugar_hiccup
  • Rejestracja:prawie 11 lat
  • Ostatnio:około 2 lata
  • Postów:176
2

Mnie się podoba. Nie jestem żadnym ekspertem UI, piszę z perspektywy użytkownika. Więc IMO troszkę za małe paddingi w formularzu kontaktowym i te buttony "hire me", "call me" odstają od reszty. Nie wiem przez co, czy przez te gradienty (nie same w sobie, tylko kolory) albo cień, którego nie ma po bokach.

Aha, no i ta animacja przy przejściu do kategorii troszkę za długa. Ja bym to rozwiązał albo ją przyspieszając, albo pokazując ją tylko raz, bo teraz wygląda jakby stronka się doładowywała ciągle.


My to na arm napiszemy wszystko i zrobimy co chcemy tyle że 90% kodu to biblioteki z netu albo robota kompilatora Zdajesz sobie sprawę że tak na prawdę wyższy poziom języka może świadczyć jedynie o tym jak niskim poziomem wiedzy może dysponować bałwan,który nazwie się w rezultacie programistą i napisze działający program wciskając zleceniodawcy że tam to akurat musi być 100MHz ARM z 1M pamięci bo tak na prawdę jego pusta łepetyna nie potrafi zrealizować czegoś na innym słabszym mikrokontrolerze
edytowany 1x, ostatnio: sugar_hiccup
Krzysztof Król
Bardzo konstruktywna ocena, dzięki. Dajesz do myślenia co można wyrzucić a na co poświęcić czas, żeby zostało udoskonalone. :)
sugar_hiccup
https://i.imgur.com/VVpsfFL.png - o, jeszcze tutaj, to chyba przeoczenie z twojej strony (:
Krzysztof Król
@sugar_hiccup: używasz safari? Niestety na Chrome, Firefox, Edge i Opera jest ok, a do softu Maca nie mam dostępu. :( Symulatory safari nie radzą sobie za bardzo, musiałbym za jakiś czas po prostu kupić sobie egzemplarz.
sugar_hiccup
Nie, ale rzeczywiście jestem na maku. Firefox Developer Edition 77.0
czysteskarpety
czysteskarpety
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Piwnica
  • Postów:7697
0

Z wizualnych: buttony z gradientiem są niemodne od kilku lat.
Na mobile rozwijasz menu, wybierasz, przewija a menu trzeba zwinąć ręcznie, trochę lipa.
Dużo przewijania, jak używasz ajaxa to nie prościej rozbić na kilka ekranów?
Strona royalcode.eu używa ciasteczek. Czy zgadzasz się na to? nie potrzeba żadnej zgody (a co jak sie nie zgadzam?)
Trochę walidacja ssie, wpisuję jedną literę imienia, tematu, treści i przechodzi, to samo numer telefonu ;)


Krzysztof Król
> Trochę walidacja ssie, wpisuję jedną literę imienia, tematu, treści i przechodzi, to samo numer telefonu ;) Dostałem tego maila. ;P No wiesz, jak dla mnie nie musi być perfect. Nie będę poświęcał swoim rozwiązaniom tyle czasu, co klientowi z budżetem. U mnie formularz ma po prostu działać, a jeśli dostanę takie śmieszne maile, to usunę. Co do buttonów - dzięki, raczej je wyrzucę. Zrezygnuję też z tła video i zrobię jakąś zapętloną animację css. Nie rozumiem jednak rozbicia na kilka ekranów - co masz na myśli?
elwis
  • Rejestracja:ponad 18 lat
  • Ostatnio:8 dni
2

Bardzo dobra strona, wszystko wydaje się być na właściwym miejscu (na głównej). Gdybym potrzebował outsourcować takie rzeczy, byłbyś pewnie na pierwszym miejscu do sprawdzenia. Tylko nie wiem czy dobry UX dla mnie będzie tak samo podchodzić innym. Mi się podoba, że są ważne informacje, mało szumu, ładny, nowoczesny wygląd. Przy tym ładuje się bardzo szybko(459.79 KB / 1.15 KB transferred), duży plus. Jestem zwolennikiem minimalnego designu, ale twoja strona przechodzi, jest dobrze. Tylko jak kliknąłem na link do linkedina wychodzi 404.


Krzysztof Król
Dzięki, zrobię crawling strony i poprawię linki. :)
DevTomT
  • Rejestracja:prawie 8 lat
  • Ostatnio:ponad 4 lata
  • Postów:12
2

Jak dla mnie, kolorystycznie strona wygląda schludnie i spójnie.

To co może drażnić, to mnogość animacji. Wystarczy ruszyć scrollem i wszystko "tańczy" (szczególnie przeszkadza mi to na telefonie). Może warto przemyśleć czy nie odpalać animacji tylko raz, przy pierwszym przewijaniu strony.

Na starcie masz dwa bardzo podobne przyciski: Zatrudnij mnie i Zadzwoń - sugeruję bardziej wyróżnić jeden z nich (jako główny przycisk Call To Action).
Jeszcze w kwestii formularza - dużo pól (dużo danych do podania) może odstraszać potencjalnego klienta. Może ogranicz to do minimum.

Ogólnie, to są drobiazgi a strona jest ok.

edytowany 1x, ostatnio: DevTomT
Krzysztof Król
Przemyślę wymienione aspekty. Jestem bardzo wdzięczny za te słowa!
semicolon
  • Rejestracja:ponad 5 lat
  • Ostatnio:prawie 5 lat
  • Postów:114
1

Kolorystyka wymaga dopracowania. Czerwone na fioletowym ma zbyt mały kontrast, te barwy w niektórych miejscach na Twojej stronie są do bólu matowe.

Typografia w paru miejscach leży. Np. opis autora średnio wygląda, ciężko to się czyta. W pozostałych miejscach wielkość czcionek ma losowy charakter, chociaż samej treści nie ma nie wiadomo to taką rzecz rzecz najszybciej idzie odczuć.

Jeśli wszystko jest efektem to ostatecznie taki brak umiaru bardziej odpycha.

Krzysztof Król
Sprawdzę temat koloru i typografii. Na drugim nie znam się tym bardziej i nawet nie pomyślałem, że coś z nią nie tak. Tym bardziej jestem wdzięczny. Super dziękuję :)
M0
  • Rejestracja:prawie 5 lat
  • Ostatnio:prawie 5 lat
  • Postów:2
1

Nie jest źle, ale... ;)
Początkowy ekran zbyt chaotyczny. Tak, jakbyś chciał wyróżnić wszystkie elementy jednocześnie. Kolorowe buttony, kolorowy napis i migający napis to za dużo - nie wiadomo na co patrzeć. Po prawej stronie wystarczyłby sam napis "Zatrudnij mnie". Napis "zadzwoń" jest zbędny, skoro nr telefonu jest już na górze. Zrezygnowałabym z napisu "Zróbmy razem coś niesamowitego" - przynajmniej w tym miejscu. Może przenieś go na dół, obok zrealizowanych projektów i powtórz CTA "Zatrudnij mnie" - tylko nie na pomarańczowo!

Poza tym zastanawiam się (tak już pod względem biznesowym) czy Twoją strategią jest promocja marki własnej (imię i nazwisko), czy marki Royal Code. Dobrze byłoby skupić się na jednym.

Baaardzo mi brakuje elementu zaskoczenia. Pokaż, że dasz klientowi coś więcej, niż standardowy szablon, który może sobie kupić. Inspiracje znajdziesz m.in. na awwwards.com. Skoro zbudowałeś szablon sam od początku do końca, według swojego pomysłu, to niech będzie w nim coś, czego nie ma u innych. Coś charakterystycznego, dla Twojej estetyki.

Poza tym gratuluję wszechstronności :) i życzę powodzenia!

Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)