Kontynuując mój mały poradnik dla osób, które zaczynają zabawę w tworzenie layoutów. Poprzednia część tutaj.

4. PAMIĘTAJ TEŻ O TYM, CZEGO NIE WIDAĆ

Niestety, ale częsty błąd robiony przez nowych grafików. To, że zaprojektujesz stronę główną serwisu to połowa sukcesu. Internauci nie będą podziwiać tylko głównej strony serwisu, ale też i jego podstrony. Często bywa tak, że musimy dodatkowo projektować i wymyślać wygląd tych właśnie podstron np. rozwinięcie newsa, komentarze, FAQ - przez co odbiorca się niecierpliwi, gdyż jego zakodowany layout nie jest gotowy na czas. Dla Ciebie zrobienie jeszcze jednego pliku PSD z wyglądem podstrony nie zajmie długo, a my nie będziemy musieli się dopytywać co i jak.

5. JAK MA WYGLĄDAĆ TEN LINK?

Jedno z częstszych pytań zadawanych przez front-endowców. Gdy otrzymujemy layout, musimy się domyśleć, jak mają wyglądać elementy aktywne na stronie - czy po najechaniu na link w menu ma on zmienić kolor? Czy po kliknięciu w ten obrazek ma wyskoczyć pop-up (sic!) ? Zaznaczaj takie informacje chociażby w nazwie warstwy, dzięki temu nie będziemy psuć Twojego pomysłu. Czasami zminimalizuj Photoshopa/GIMPa/Corela, odpal najprostszy Notatnik i napisz nam takie dodatkowe informacje. My zamieniamy Twoje myśli na sprawny kod HTML/CSS.

6. GRAFIKA TO NIE WSZYSTKO

Duża liczba grafiki często znacznie spowalnia wczytywanie stron. Musisz wiedzieć, że piękny layout nie musi być naszpikowany filtrami, cieniami i tym podobnymi efektami. Jest dużo ładnych, prostych stron, gdzie nie ma więcej niż kilka plików graficznych. Przykład? Chociażby jogger.pl ma prosty, schludny design bez zbędnej grafiki.

Podsumowanie:

Przede wszystkim dwa słowa — dokumentuj i przewiduj. Dzięki temu, współpraca między człowiekiem od front-endu a grafikiem będzie wręcz idealna.
Chociaż i tak będą jakieś niedoróbki, bo przecież nie wszystkiego da się zakodować…

Do następnego.

Tytuł może was trochę zmylić — wszak głównie zajmuję się front-end’em, ale postanowiłem napisać kilka porad dla początkujących grafików, którzy zaczynają swoją zabawę w tworzenie layoutów. Żeby współpraca na drodze grafik <-> klient <-> front-end przebiegała bez przeszkód. No i przy okazji zaoszczędzić trochę czasu.

1. EJ, TEŻ CHCĘ WSZYSTKO WIDZIEĆ!

Ten przypadek zdarza się już coraz rzadziej, ale muszę go przytoczyć. Bywa tak, że po dogadaniu się z osobą, której mam oddać pocięty design, otrzymuję od niej jeden plik .JPG/.PNG z przyszłym layoutem. W takich wypadkach proszę o wysłanie pliku w .PSD. Niektórym może wydać się to dziwne, ale też potrzebuję mieć dokładniejszy wgląd do grafiki — chociażby aby dokonać drobnych poprawek w postaci wyrównania jakiś buttonów czy większych bloków gdzie będzie znajdować się tekst. Co prawda mógłbym poinformować twórcę tego layoutu żeby poprawił to i to, ale przez takie wymienianie plikami traci się tylko czas, który jest przewidziany na kodowanie.

2. UTRZYMUJ PORZĄDEK W SWOIM WARSZTACIE

Wskazówka
Aby łatwo można było połapać się w warstwach, stosuj takie wyrazy jak: top/header (góra); news/content/text (dla obszarów z tekstem); menu/sidebar (dla bocznych menu); footer/bottom (dla stopki);

Jeden z większych błędów początkujących grafików — tworzenie warstw “na oślep”. Gdy po otworzeniu pliku .PSD zastaje się dosłowny chaos — ponad 60 nieopisanych warstw tylko Layer 1, Layer 2, Layer 3… — “poruszanie” się po czymś takim jest koszmarem. Dlaczego? Ponieważ jak wspomniałem wyżej, gdy potrzebuje wprowadzić drobne poprawki muszę przeszukiwać X warstw, aby trafić na tę właściwą.

3. KŁOPOTY Z OPTYMALNĄ ROZDZIELCZOŚCIĄ

Podczas tworzenia layoutu nie wszystkim zdarza się myśleć o wszystkich rozdzielczościach ekranu. Jeszcze sporą część rynku mają monitory o rozdzielczości 1024×768 (XGA), ale powoli już zaczynają je zastępować monitory o dość panoramicznych rozdzielczościach — a co za tym idzie strony muszą być analogicznie szersze. I wtedy powstaje problem, co z robić z użytkownikami mniejszych rozdziałek? Dla mnie rozwiązanie problemu powinno być następujące: strony powinny mieć maksymalną szerokość do 1000px, ale tło (background) powinno bezproblemowo móc się powtarzać. Dzięki temu użytkownicy mniejszych rozdziałek nie powinni mieć problemu z wyglądem strony, a osoby które posiadają panoramiczne ekrany będą mogły w miarę komfortowo przeglądać serwis.
Ewentualnym rozwiązaniem są strony z dynamiczną szerokością, ale o nich napiszę kiedy indziej.

Ciąg dalszy poradnika za kilka dni ;]

Do następnego.

Czyli nareszcie upragnione wakacje. Koniec ze wstawaniem o 6:00 i tłuczeniem się w porannych autobusach. Co najmniej do 1 września.

Zdałem do drugiej klasy, i to się liczy.

Opinia o szkole

10 miesięcy temu pisałem o początkach mojego życia w nowej szkole — już nie jako technicznego (chociaż wszystko na to wskazuje, że będę musiał objąć ten zaszczyt ponownie) a szarego ucznia typowej placówki oświatowej. Osoby, do których we wrześniu miałem pewien dystans, okazały się ludźmi na poziomie. Mówią, że liczy się pierwsze wrażenie, ale w niektórych przypadkach ta reguła się nie sprawdza. Każdy jest trochę szalony na swój sposób i dzięki temu na swój sposób są ‘orginalni’ — mam nadzieję, że uda mi się z nimi wytrać do matury ;]
A o samej nauce? Hmm… dla gimnazjalisty może to być trochę szok materiałowy — przyswojenie sobie tylu nowych rzeczy w tak krótkim czasie, no i nauczyciele ich zasady. Osoby, które w gimnazjum miały piątki i szóstki, to w liceum mają dwójki i trójki — no, w porywach czwórki. Tak więc tutaj zaczyna się prawdziwe kucie, nie to co w gimnazjach ;]

Plany na wakacje?

Python, Python i jeszcze raz Python. Przez ostatnie tygodnie nie było czasu (zaliczanie ostatnich sprawdzianów), a teraz będę miał go sporo na ponowne przyswojenie tego języka. Popracuję jeszcze nad blogiem, no i może dorwę jakieś zlecenie. Mam tylko nadzieję, że nie ogranie mnie prokrastynacja ;]

Do następnego.

Relacji na blipie nie będzie, bo SMSy za drogie, a PC nie zmieścił mi się do torby.

Do następnego.