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.pl/pl/rankings/screen-resolutions.html]
  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 obejmuję 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. 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.2016
    Dokument podlega częstym zmianom, zachęcamy do okresowego odwiedzania.