Dobre praktyki powszechne oraz przy współpracy - w zakresie przygotowania projektu graficznego PSD

Dobre praktyki - powszechne

Typografia:

  1. Projekt strony www nie powinen zawierać więcej niż 2 style czcionek, łącznie w maksymalnie 6-8 krojach (wliczając kroje nagłówków bloków/stron oraz różne kolory czczionek).
  2. Dozwolone jest używanie czczionek o pełnej gamie grubości (w nawiasie podany rozmiar w css):
    - Extra Light / Ultra Light (100)
    - Light / Thin (200)
    - Book / Demi (300)
    - Normal / Regular (400, normal)
    - Medium (500)
    - Semibold / Demibold (600)
    - Bold (700, bold)
    - Black/ Extra Bold / Heavy (800)
    - Extra Black / Fat / Poster / Ultra Black (900)
  3. Jedyne akceptowalne modyfikacje czczionek to: pochylenie, podkreślenie, odstęp interlinii, odstęp między literami (twardy w pikselach, nie światła). Zmiany interlinii powinno ograniczyć się do minimum - idealnie gdyby wysokość interlinii była stała w całym dokumencie (wyrażona proporcjonalnie do wysokości znaku). Niewskazane jest używanie ręcznego pogrubiania czcionek, spłaszczania/wydłużania znaków, zmiany wyliczania odstępu między znakami na optyczne, zmiany położenia indeksu górnego/dolnego.
  4. Metoda anti-aliasingu czczionek najbardziej imitująca działanie przeglądarek to Crisp.
  5. Wsparcie do automatycznego dzielenia i przenoszenia wyrazów nie jest poprawnie wspierane na wszystkich przeglądarkach i systemach operacyjnych (Apple). Należy unikać w layoutach dzielenia wyrazów (justowanie jest OK).
     

Techniczne aspekty plików PSD:

  1. Warto umieścić warstwę prowadnic równomiernego podziału i przyklejać wszelkie krawędzie do tej warstwy. Przykład grid.psd. Pozwoli to na zachowanie szerokości kolumn/bloków pomiędzy poszczególnymi layoutami.
  2. PSD powinien być przygotowany w gęstości dla www, czyli 72px/cal - aczkolwiek nie jest to istotne, gdyż tylko symuluje wygląd strony w dokumencie, gdyż wszystkie elementy graficzne dla potrzeb www są wymiarowane w pikselach.
  3. PSD powinien być przygotowany w docelowej rozdzielczości, bez skalowania (popularne x2) dla wyświetlaczy o transponowanym rozmiarze plamki (retina).

Rozdzielczość:

  1. Najpopularniejsza rozdzielczość wyświetlaczy internautów to 1366x768 [por http://ranking.gemius.com/pl/ranking/resolutions/]
  2. Zasięg rozdzielczości to od 320x240 (starsze smartfony) do 3840x2160 (4k)  [por jw.]

Efekty. Dobrą praktyką jest stosowanie tylko tych efektów, które są możliwe do odtworzenia w czystym języku stylów CSS, oraz wspierane są przez wszystkie popularne przeglądarki. Przykłady efektów:

  1. Zaokrąglone rogi w blokach
  2. Cienie bloków / czczionek (kolor, położenie, rozmycie).
  3. Półprzeźroczystości.
  4. Transformacje (http://www.w3schools.com/css/css3_2dtransforms.asp)
  5. Animacje wszystkich powyższych

Symbole / Logo / Ikonki CTA:

  1. Wszędzie gdzie jest to możliwe - należy osadzać grafikę wektorową (SVG). Obecnie zasięg wsparcia dla przeglądarek wynosi >99%, a pomaga podnieść walory estetyczne na wyświetlaczach typu retina.

Organizacja treści / SEO / Szczególne praktyki dla CMS Drupal:

  1. Każda strona powinna zawierać wyświetlany tytuł (technicznie nagłówek <h1>).


Mocno zalecamy stosowanie zasad opisanych w https://goodui.org/
 

 

Dodatkowe dobre praktyki w zakresie współpracy z ninjasoft.pl

Typografia:

  1. Jeżeli czczionki pochodzą spoza katalogu czczionek google [https://www.google.com/fonts] - należy do projektu załączyć wszystkie wykorzystywane czczionki we wsyzstkich wykorzystywanych grubościach w formacie TTF. Pliki czczionek powinny być możliwe do instalacji w systemie operacyjnym (częstą praktyką webfontów jest celowe uszkadzanie plików czczionek by działały tylko jako osadzone w przeglądarkach).

Dodatkowe prace:

  1. Projekt graficzny strony www obejmuje ikonkę favicon.ico o rozdzielczośći 64x64px, 32-bitowe kolory, z transparentnością.

Symbole / Logo / Ikonki CTA:

  1. Powinny być załączone jako osobne pliki svg do projektu lub jako osadzone (smart object) obiekty Adobe Illustratora. Należy przy tym pamiętać, by odsunąć grafikę od krawędzi pliku tak, by nie dotykała obszaru roboczego - jest to podyktowane różnymi algorytmami skalowania na przeglądarkach które potrafią obcinać po 1px  z każdej strony takich plików.

Techniczne aspekty plików PSD:

  1. Jeden główny plik PSD desktopowy  - umieszczenie wszystkich widoków podstron/layoutów w jednym pliku PSD na poszczególnych grupach warstw. Bloki powtarzające się (nagłówek, stopka) powinny być wydzielone do grupy głównej.
  2. Po jednym pliku PSD na każdy tryb RWD - przy czym rozdzielczość layoutów powinna być dobrana do gónej granicy od której ma być aktywna. W pliku mogą znaleźć się tylko te elementy, któe zmieniają swój wygląd/położenie.
  3. Plik powinien być podzielony na pogrupowane warstwy, według widoczności bloków na stronie. W miarę możliwości powinno unikać się powielania warstw/grup i wynieść je do wyższej grupy.
  4. Zmiany wyglądów po najechaniu kursorem, aktywne elementy menu, kroki animacji - powinny być opisane w nazwie warstwy (hover, active, animated), warstwa powinna być w tej samej grupie co oryginalny element, oraz domyślnie ukryta w PSD.

    Rewizja dokumentu: wersja 4 z 28.08.2017
    Dokument podlega częstym zmianom, zachęcamy do okresowego odwiedzania.