馃帹 #48: Jak implementowa膰 nawigacj臋, strona g艂贸wna Spotify, design tokeny
3 min czytania

馃帹 #48: Jak implementowa膰 nawigacj臋, strona g艂贸wna Spotify, design tokeny

Dzi艣 mam dla Ciebie trzy rzeczy:

  1. Jak powiniene艣 zaimplementowa膰 webow膮 nawigacj臋? (to聽nie聽takie proste...)
  2. Dlaczego Spotify na stronie g艂贸wnej ma player zamiast landing page'a i聽jak do tego doszli?
  3. Pog贸d藕 design z kodem z pomoc膮 Tokens Studio

Zapraszam 猬囷笍 猬囷笍 猬囷笍 猬囷笍 猬囷笍


Jak powiniene艣 zaimplementowa膰 webow膮 nawigacj臋? (to nie takie proste...)

Zdj臋cie g艂贸wne artyku艂u "Building the main navigation for a website"
殴r贸d艂o

Nawigacja to jeden z najwa偶niejszych element贸w na naszej stronie.

Ale jak zrobi膰 j膮 poprawnie?
Je艣li my艣lisz, 偶e wystarczy <ul> z list膮 link贸w, to niestety si臋 mylisz.

Napiszmy troszk臋 dobrego HTML i CSS i zr贸bmy porz膮dn膮 nawigacj臋.

Jak zrobi膰 porz膮dn膮 nawigacj臋?

Z artyku艂u dowiesz si臋 m.in.:

  • jak poprawnie oznacza膰 aktywny element (nie, to nie jest klasa is-active...聽馃槺)? - aria-current="page"
  • jak dostarczy膰 informacje o ilo艣ci element贸w w nawigacji dla czytnik贸w? - u偶y膰 <ul> z <li>
  • jak umo偶liwi膰 szybkie przej艣cie do nawigacji na czytnikach ekranu? - <navaria-label="Main">
  • jak ogarn膮c hamburger menu na ma艂ych ekranach z animacj膮? - u偶ycie m. in. aria-expanded="false/true", aria-label="Menu"aria-controls="mainnav", @media(prefers-reduced-motion: no-preference)
  • jak usprawni膰 stan focus? - zdefiniuj widoczne style dla :focus-visible zamiast dla :focus

Powy偶sze to tylko skr贸towce.

Je艣li nie wiesz o kt贸rym艣 z powy偶szych, to Building the main navigation for a聽website od ekipy web.dev jest 艣wietnym miejscem, 偶eby zdoby膰 t臋 wiedz臋.

A na koniec dostajemy info:

Congratulations! You've built a progressively enhanced, semantically rich, accessible, and mobile friendly main navigation.

Brzmi dumnie 馃槑

Link do pe艂nej tre艣ci artyku艂u:
web.dev/website-navigation


Dlaczego Spotify na stronie g艂贸wnej ma player zamiast landing page'a i聽jak do tego doszli?

Zmiana strony g艂贸wnej Spotify - zdj臋cie g艂贸wne artyku艂u "From Web Page to Web Player: How Spotify Designed a New Homepage Experience"
殴r贸d艂o

Ciekawy przypadek du偶ego gracza, jak zmienili swoj膮 stron臋 g艂贸wn膮 spotify.com.

Zamiast pisa膰 o produkcie, pokazali produkt.

Dlaczego to zrobili?
Jakich metod u偶yli?
Czego si臋 nauczyli?

Warto zobaczy膰 w artykule od teamu Spotify: 馃憞
https://spotify.design/article/from-web-page-to-web-player-how-spotify-designed-a-new-homepage-experience


Pog贸d藕 design z kodem z pomoc膮 Tokens Studio

Resources | 藕r贸d艂o
Zdj臋cie g艂贸wne Tokens Studio for Figma
Tokens Studio - plugin do Figmy.

Czy znasz przypadek, gdzie designy 偶yj膮 swoim 偶yciem, a kod swoim? Albo warto艣ci np. spacing贸w s膮 zupe艂nie przypadkowe, co chwil臋 si臋 zmieniaj膮 i nie ma w tym wszystkim 偶adnej sp贸jno艣ci? A na to wszystko zaraz ma wej艣膰 dark mode...聽馃槀

Wiele z tych problem贸w rozwi膮zuj膮 design tokeny.

A dzi臋ki Tokens Studio:

  1. W Figmie definiujemy tokeny dla np. spacingu, font贸w, kolor贸w itd. i聽ich u偶ywamy podczas tworzenia design贸w.
  2. W kodzie u偶ywamy wygenerowanego z pluginu JSONa i mamy dost臋pne wszystkie design tokeny. Podczas implementacji design贸w widzimy wszystkie tokeny u偶yte na danym elemencie.
  3. Mamy sp贸jno艣膰 i wdra偶anie design贸w jest bardziej p艂ynne.

Link do pluginu:
https://www.figma.com/community/plugin/843461159747178978/Tokens-Studio-for-Figma-(Figma-Tokens)


To wszystko na dzi艣!

Pozdrawiam i...
DOBREGO WEEKENDU! 馃コ 馃殌

Miko艂aj Wa艣kowski
uxowy.dev

鉂わ笍
Chcesz pom贸c swoim devowym ziomkom?
Je艣li podoba Ci si臋 to, co wysy艂amy w uxowym, to jest du偶a szansa, 偶e im te偶 si臋 spodoba 馃槈. Zapodaj tam link do ostatnich wysy艂ek i niech ogarniaj膮 ten UX/UI dla developera razem z Tob膮!

Poprzednie wydania:

Je艣li jeszcze nie ma Ci臋 na li艣cie 馃

Wysy艂amy jeden email tygodniowo, w ka偶dy pi膮tek, o godz. 12:00.
Warto艣ciowa wiedza o UI/UX dla developera mo偶e wyl膮dowa膰 do Twojej skrzynki.