Front-end « michno bloguje

9sie/082

Poradnik dla początkującego grafika – cz.2

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.

Wpis otagowany jako: poradnik 2 Komentarze

28lip/081

Poradnik dla początkującego grafika – cz.1

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ą.
$Typowy błąd przy tworzeniu layout\'u$

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 1024x768 (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.