Mój pierwszy projekt w figmie

[ecotuo]

Hej, chciałbym uzyskać porady, tylko takie konkretne wypowiedzi na temat projektu, czego brakuje, na co zwrócić uwagę. Jest to mój pierwszy projekt w figmie, projekt jest luźny, nawet bardzo...

[viperovsky]

Cześć ? Jednym z głównych błędów, które popełniłeś, to na pewno brak staranności. Powtarzane copy, literówki, brak konsekwencji w odstępach i wielkościach fontów to rzeczy, które wyłapałem w przeciągu 5 sekund od pierwszego ujrzenia projektu. W sekcji z przykładowymi projektami nie pokazałeś kompletnie nic. Jeśli nie masz żadnych realizacji do pokazania w projekcie, możesz wrzucić tam cokolwiek innego, co mogłoby być swego rodzaju alternatywą. Pomijanie tak kluczowych elementów kolosalnie zmienia odbiór strony ? Jeśli chcesz robić postępy, musisz być konsekwentny w tym co robisz. Nie warto iść w ilość, kiedy jakość ma znacznie większe znaczenie. 

Kolejne co rzuciło mi się w oczy, to brak nawigacji górnej. Mimo że jest to krótki Landing Page, to i tak warto na samym początku poinformować użytkownikowi, co może znaleźć na Twojej stronie. Zastosowałeś w projekcie bardzo duże odstępy, które zdecydowanie utrudniają przeglądanie strony. Na Twoim miejscu zdecydowałbym się na większe marginesów bocznych ?

Hero to sekcja, od której sporo zależy. Chociażby to czy użytkownik zdecyduje się na dalsze eksplorowanie strony, czy jednak na wyjście i zamknięcie strony nie dając Ci szansy na przekonanie go do swojej oferty. Warto pokazać użytkownikowi coś więcej niż sam tekst i ikonę z poświatą w tle ?

Font, który dobrałeś, niestety nie wygląda zachęcająco. Warto poświęcić większą uwagę elementom, na których użytkownik będzie skupiać większą część uwagi, a treści na stronie zdecydowanie się do takowych zaliczają. Ważną kwestią jest również kontrast, który w Twoim projekcie niestety leży ? Teksty nie są czytelne przez zbyt mały kontrast, który powoduje, że teksty zlewają się z tłem. Staraj się unikać kursywy, ponieważ jest ona mniej czytelna i estetyczna. Poświęć dłuższą chwilę na research fontów. Myślę, że strona Google Fonts może być dla Ciebie przydatna. Znajdziesz tam sporo fontów, które zachęcą użytkownika do dalszego eksplorowania strony. Moje rekomendacje fontów z Google Fonts to Libre Franklin, Montserrat, Mulish, Poppins, Epilogue, Encode Sans i IBM Plex Sans. 

Podsumowując, uważam, że poświęciłeś na projekt zdecydowanie za mało czasu. Nie skupiłeś się na detalach, które kompletnie zmieniły odbiór Twojego projektu. Warto, abyś poznał obecne trendy w Designie. Zachęcam Cię więc do przeglądania projektów bardziej doświadczonych grafików na takich portalach jak na przykład Behance czy Dribbble, które pozwolą Ci na zweryfikowanie tego co jest modne, a co nie. W przyszłości, kiedy już wyczujesz obecne trendy, kto wie... Być może sam będziesz wyznacznikiem nowych trendów ?

[tanuki]

Hej.

Na samym wstępie chciałbym powiedzieć, że powinieneś liznąć trochę teorii (UX), zanim weźmiesz się za praktykę (UI). Nauczysz się jak mniej więcej poprawnie projektować strony internetowe i aplikacje. Chodzi o to jak się projektuje poszczególne elementy strony, np kolory, kontrast, typografię, przyciski, karty, nawigacje itp.

Nie polecam używania dribbble jak kolega wspominał, szczególnie do inspiracji podczas nauki, ponieważ to nie ma kompletnie sensu, dla czego? Ponieważ, większość projektów są nie użyteczne i tylko wyglądają super, czego zarzucić nie mogę, bo wiele projektów naprawdę fajnie wygląda. Zamiast takiego dribbble polecam przeglądać realne projekty, które zostały stworzone po przez badania ux, stronki typu (lapa ninja lub awwwards) gdzie masz masę stron internetowych, które można poklikać, sprawdzić co i jak działa i dla czego, a nie tylko sam obrazek. No i najważniejsze, jako nowy lub zielony, przeglądając projekty na dribbble nie nauczysz się jak i dla czego się stosuje daną rzecz, będziesz wiedział mniej więcej z domysłu co to jest, również będziesz miał problem z takimi rzeczami żeby wrzucić je do swoich projektów, bo nie wszystko z obrazka będzie pasować do twojej wizji.

Do nauki polecam ci jakieś ux'owe profile na instagramie, kanały na youtube lub czytanie artykułów na stronkach przeznaczonych do projektowania, przykładowo https://www.webdesignernews.com/ (jest to zbiór wyselekcjonowanych artykułów dla designerów i developerów ), https://www.smashingmagazine.com/.

Pierwsze rzeczy dość ważne i istotne, które rzuciły mi się w oko to:

• kontrast tekstu, nie powinno się NIGDY W ŻYCIU używać szarego na szarym, jest to kompletnie nie czytelne. (Do sprawdzania kontrastu  koloru tekstu i tła polecam WCAG 2.1 Contrast checker)
• brak menu, nawigacja jest kluczowym elementem na stronie, bez niej osoba przeglądająca nie jest w stanie znaleźć niczego, nawet na tak małej stronie jak landing page z 3-4 sekcjami.
• nierówne odstępy w kartach z treścią "budowlanka" (margines lewy i prawy, góra i dół) oraz wyrównanie tekstu do środka. Kontener z tekstem powinien mieć "white space" czyli przestrzeń, która otacza tekst, sprawiając, że można dobrze przeskanować tekst. Również tekst, który jest dłuższy niż 1 linijka nie powinien być formatowany wyrównaniem do środka, gdyż sprawia dla oka problem, z tego względu, że w naszym języku i kulturze czytamy od lewej do prawej tekst, oraz skanujemy w taki sposób do "wypatrzenia" ciekawych informacji, taki tekst nie pozwala na swobodne skanowanie, bo męczy oko.
• brak grida lub niepełny grid, jest dość ważny element każdej strony, są różne gridy (siatki), które pozwalają nam na ustawienie elementów na stronie w jakiś logiczny sposób, czyli marginesy od lewej i prawej strony, odstępy między elementami. Siatka jest ważna w przypadku projektowania responsywnego na urządzenia przenośne. W twoim projekcie margines lewy i prawy są nawet ok.

Inne ciekawe rzeczy warte uwagi:

• Tekst pochylony (kursywa) stosuje się do nagłówków, nazw, tytułów oraz jeśli coś cytujemy, nie powinno się używać takich zabiegów do tekstu body (główna treść strony).
• Hero to sekcja "before the fold", która się wyświetla pierwsza zanim użytkownik zjedzie w dół. Każdy przeglądający strone internetową zadecyduje w ciągu 3-5 sekund, czy warto przeglądać stronę dalej czy wyjść i nie wracać. Właśnie ta sekcja powinna zachęcać użytkownika do pozostania.
• Hierarchia wizualna tekstu zaczyna się od nagłówka, czyli odpowiednie poziomy H1, H2, H3 aż do H6. Jeśli chodzi o tekst body, czyli treść strony, powinno się bazować na rozmiarach zależnych od ekranu, czyli powiedzmy na komputerze bazowy rozmiar treści to 16px, a na telefonie między 12-14px. Również tekst body może być mniejszy, odpowiednio do celu, czyli opis zdjęcia, źródło tekstu lub zdjęcia itp. Można użyć takiej stronki https://type-scale.com/ aby ustawić sobie  skalowanie tekstu, żeby wszystko było czytelne i eleganckie.

Edytowane 25 Czerwca przez tanuki

[ecotuo]

Bardzo dziekuje za tak obszerne, szczegółowe i konkretne odpowiedzi co do mojego projektu, wezme sobie każde słowo do serducha, na pewno zajrzę na wszystkie wymienione stronki oraz wezme do siebie każdą radę. Fajnie, że są jeszcze ludzie którzy wypowiadając się o kogoś błędach są w stanie jeszcze bardziej zmotywować niż zdemotywować. Wrócę z nowym projektem na milion procent, bogatszym o poprawione błędy, super mega dziekuje!!!

[tanuki]

58 minut temu, ecotuo napisał:

Bardzo dziekuje za tak obszerne, szczegółowe i konkretne odpowiedzi co do mojego projektu, wezme sobie każde słowo do serducha, na pewno zajrzę na wszystkie wymienione stronki oraz wezme do siebie każdą radę. Fajnie, że są jeszcze ludzie którzy wypowiadając się o kogoś błędach są w stanie jeszcze bardziej zmotywować niż zdemotywować. Wrócę z nowym projektem na milion procent, bogatszym o poprawione błędy, super mega dziekuje!!!

W sumie mogłem jeszcze dać linka do różnych gridów (siatek), ale w tamtym momencie byłem po nocce.

Tutaj link do jednego artykułu, bardzo fajnego na temat siatki, który wyjaśnia co i jak: https://blog.prototypr.io/ui-grid-best-practices-efd6c4f9d16

 

[ecotuo]

51 minut temu, tanuki napisał:

W sumie mogłem jeszcze dać linka do różnych gridów (siatek), ale w tamtym momencie byłem po nocce.

Tutaj link do jednego artykułu, bardzo fajnego na temat siatki, który wyjaśnia co i jak: https://blog.prototypr.io/ui-grid-best-practices-efd6c4f9d16

 

Mógłbym się odezwać na pw, mam kilka pytanek? ?

[ecotuo]

Hej, żeby nie zaśmiecać forum innymi tematami zaktualizuje aktualny o nowy projekt:D

@tanuki @viperovsky Chciałbym najbardziej usłyszeć Wasze opinie, ze względu na to, że wypowiedzieliście się w mega fajny sposób, wziąłem sobie rady do serca i przeszlifowałem trochę poradników. 😄

[mikey.]

Czym zajmuję się technolab? Nie chce mi się rozdrabniać na poszczególne działy, ale jako potencjalny klient nie mam pojęcia czym jest technolab, fajnie by było coś z tym zrobić żebym miał pojęcie gdzie wszedłem i po co. 

[ecotuo]

28 minut temu, mikey. napisał:

Czym zajmuję się technolab? Nie chce mi się rozdrabniać na poszczególne działy, ale jako potencjalny klient nie mam pojęcia czym jest technolab, fajnie by było coś z tym zrobić żebym miał pojęcie gdzie wszedłem i po co. 

Heeej, bardziej chodzi o samo ułożenie, dopasowanie elemtnów, marginesy, kolorystyke i tak dalej, nie zagłębiając się aktualnie w treść strony, to projekt mocno luźny, w celu nauki:D

[mikey.]

Teraz, ecotuo napisał:

Heeej, bardziej chodzi o samo ułożenie, dopasowanie elemtnów, marginesy, kolorystyke i tak dalej, nie zagłębiając się aktualnie w treść strony, to projekt mocno luźny, w celu nauki:D

Heej, nie chodzi mi o treść a o stronę główną, czyli co widzę jak wchodzę na strone 😄 powodzonka w dalszych projektach.

[Damian]

Dokładnie tak jak napisał @mikey. - stworzyłeś projekt, ale nie wiesz o czym 😄 Żadne treści czy ilustracje nie wskazują jednoznacznie tematyki. Jestem ciekaw, co robi ten switch? Włącza / wyłącza stronę?

 

Generalnie nie wiadomo, na czym oka zawiesić w tym projekcie. Jest zdecydowanie za mało wypełniaczy strony. Warto sobie odpuścić efekty typu efekt "szkła" czy gradientowe bordery. W dzisiejszych czasach raczej takich technik się nie stosuje. 

Jest lepiej niż poprzedni projekt, ale nadal bardzo dużo pracy przed Tobą. W tym temacie jest kilka ciekawych linków do kursów UI/UX. Warto je przerobić 😉