Trochę tego jest. W tym momencie kiedy znalazłem ten link jest trochę późno i nie mam czasu nawet na pokrótkie objaśnianie, aczkolwiek jak znajdziecie coś co wam się przyda to dajcie znać przetłumaczymy i oczywiście sprawdzimy jak to działa.

Okazuje się, że „złota zasada” podziału 1:1.62 świetnie się sprawdza w tym przypadku. Zachowanie określonych proporcji w projekcie jest jednym z najistotniejszych czyniników decydującym o całokształcie projektu. Głupi uczy się na błedach własnych, a mądry na cudzych tak więc przyjżyjmy się najczęściej odwiedzanym portalom w Polsce (… na podstawie www.alexa.com), żeby się czegoś nowego nauczyć.

Przykładowy tekst  z onet’u, który przy przeanalizowaniu CSS’ów w FireBug’u ujawnia, że nie ma nigdzie nic na temat wysokości lini -  wygląda tak:

Film realizuje telewizja NHK, jedyny publiczny nadawca w Japonii. Pierwszą część dokumentu o polskiej emigracji Japończycy nakręcili w 2007 roku. Film pokazujący przygotowania Polaków do wyjazdu na Wyspy oraz oczekującą na nich rzeczywistość okazał się hitem w Kraju Kwitnącej Wiśni. W samym Tokio obejrzało go ponad 3 miliony widzów, a producentom od razu zamarzyła się kontynuacja projektu. „To był dokument, który miał pokazać przeciętnemu Japończykowi, dlaczego Polacy decydują się opuścić swój kraj i często bez znajomości języka wyjechać za granicę” – opowiada Kucaj. „Dla Japończyków sama idea emigracji jest egzotyczna. Chcieli zrozumieć, jak po rozszerzeniu Unii Europejskiej zmienił się kontynent oraz w jaki sposób ludzie zaczęli się przemieszczać, zostawiając za sobą rodziny i przyjaciół”.

A teraz ten sam tekst, w którym odstęp pomiędzy liniami jest uzależniony od wielkości użytej (w tym wypadku 12px) czcionki – czyli pomnożony razy 1.62. Liczyłem na wszelkie dostępne pod ręką sposoby no i coż …

zawsze wychodziło mi 19.44 – zaokrąglając daje nam line-heigt: 19

Tak więc, zwróćcie uwagę, że ten sam tekst czyta się łatwiej i dochodząc wzrokiem do końa linii nie musimy rozpoczynając nową szukać jej początku:

Film realizuje telewizja NHK, jedyny publiczny nadawca w Japonii. Pierwszą część dokumentu o polskiej emigracji Japończycy nakręcili w 2007 roku. Film pokazujący przygotowania Polaków do wyjazdu na Wyspy oraz oczekującą na nich rzeczywistość okazał się hitem w Kraju Kwitnącej Wiśni. W samym Tokio obejrzało go ponad 3 miliony widzów, a producentom od razu zamarzyła się kontynuacja projektu. „To był dokument, który miał pokazać przeciętnemu Japończykowi, dlaczego Polacy decydują się opuścić swój kraj i często bez znajomości języka wyjechać za granicę” – opowiada Kucaj. „Dla Japończyków sama idea emigracji jest egzotyczna. Chcieli zrozumieć, jak po rozszerzeniu Unii Europejskiej zmienił się kontynent oraz w jaki sposób ludzie zaczęli się przemieszczać, zostawiając za sobą rodziny i przyjaciół”.

Oczywiście możecie powiedzieć, że czepiam się jakiegoś tam szczegółu, ale jeżeli czytujecie całe artykuły w ilościach powiedzmy … 90% pojawiających się danego dnia, to nie sposób nie zauważyć, że coś jest nie tak. A tymbardziej, jeżeli jedna linika kodu może coś poprawić to dlaczego tego nie zrobić. Zrzuty w 4′ech kolorach przed i po:

Podobnie ma się sprawa z Wirtualną Polską … aczkolwiek informacje tam zamieszczane są tak krótkie, że zanim się zorientujemy, że można trochę poprawić odstępy między liniami artykuł się kończy. No cóż.

W przypadku Gazety i Interii doszukałem się tego (oczywiście w CSS’ach),  że chłopaki sprwujący pieczę nad wyglądem strony coś w tej sprawie zrobili. W Interii szybkie przestawienie z 17px na 19px w przypadku odstępu między liniami ORAZ odstępów między paragrafami na 19px (z 9′ciu … nie wiem z kąd wytrzasnęli taki numer …) znacznie poprawia „czytalność”. Proszę:

Pomijam (chwilowo) kwestię użytych fontów w nagłówkach – przydały by się jednak jakieś sans-serif, ale jest to oddzielny temat.

Reasumując tą pobieżną analizę – trzymajcie się zasady:

Odstęp między liniami = wielkość czcionki tekstu * 1.62

a napewno artykuły na waszych stronach / blogach będzie się łatwiej czytało. Pamiętając oczywiście o tym, żeby treść była wartościowa.

Krótkie spostrzeżenie na temat jednego z moich ulubionych blogów – antyweb – wartościowy merytorycznie i pisany w ciekawy sposób – aczkolwiek: Grzesiek – zmień odstępy między liniami na większy  – jeżeli oczywiście chcesz się trzymać tej trochę przywielgaśnej czcionki 15px  – na 24px. Od razu przyjemniej.

Wracając do tematu. Liczba 1.62 nie wzięła się w sumie z nikąd. Zapoznajcie się z tym.  Większość z Was powinna to pamiętać jeszcze ze szkoły, ale mogę się założyć, że nauczycielka „wciskając” wam tę wiedzę nie wspomniała czegoś w stylu: uczcie się tego dzieciaki, bo przyda się kiedyś przy projektowaniu stron internetowych. Znajdźcie chwilę czasu, żeby poklikać też w tą. Nawet bez znajomości angielskiego zorientujecie się w czym rzecz.

Następnym razem zajmiemy się wykorzystaniem 1.62 przy projektowaniu „layoutów” do stron / blogów. Zobaczycie jak się sprawdza. Dla niecierpliwych znających angielski polecam artykuł ze smashingmagazine.

Zapraszam do komentarzy.

Ale my nie o tym.

Czym jest w web designie logo nie trzeba nikomu specjalnie tłumaczyć. Ma przyciągać uwagę, wyróżniać się i oczywiście nawiązywać do tematu czy też marki w szerszym pojęciu. Wydawało by się, że nic prostrzego … może i prawda, jeżeli logo jest proste, tanie i czasami nawet darmowe. Ale zakładam, że chcemy być coraz lepsi, tak więc warto podkarmić mózgi jakimiś przykładami „mistrzów”.

Nie udało mi się za pierwszym podejściem znaleźć jakiś galerii zawierających fajne projekty logo w polskim internecie dlatetgo też uciekam się do angielsko języcznych. Może warto postawić coś jak logo.galeria.csselite.pl  ? Dajcie znać co o tym sądzicie.

Tak więc – z pięknej i słonecznej (sarkazm) Anglii  – cssdesignyorkshire.

W sumie nie jest to galeria stricte tylko logo. Jest to bardziej galeria stron. Loga mają swoją osobną kategorię, chociaż nie przytłacza ilością. Chłopaki przyjmują zgłoszenia do galerii na strony i projekty logo.

Jak można się dowiedzieć z górnego menu chłopaki zbierają już materiały od 2006 roku, czyli ładny kawał historii internetu. Niektóre stare zgłoszenia / projekty prowadzą jednak do nieistniejących już stron. Co ciekawe (rzadko spotykane w „polskim” internecie) można znaleźć tam również mocno rozbudowaną listę stron z podobnymi galeriami.

Następną ciekawą pozycją, która może być ciekawym źródłem inspiracji jest faveup.

Jedyną wadą tej strony / galerii jest jak na ironię losu layout i design. Troszke wszystko jest nieproporcjonalne. Jak dla mnie. Trzeba się nieźle nakręcić kółkiem w myszy, żeby coś obejżeć. A jest co. W kategorii logo są naprawdę ładne pozycje.

Mało tego – jak Ci się zdarzy projektować wizytówkę (business card), to jest i galeria tego typu rzeczy. Podobnie jak i flash’owe strony. Jest też „normalna” galeria – strony internetowe.

Lo8os (czytaj: logos)

W tej galerii, puki co, znajdziemy więcej kategorii na jakie zostały podzielone logotypy niż ich samych . Gratka dla tych, którzy szukają jakichś konkretnych i określonych cech, np. rodzaju fontów czy figur geometrychnych.

Ciekawą podstroną są źródła (resources). Linki do ciekawych artykułów związanych ze wszystkim co ma coś wspólnego z web designem. Fakt, że po angielsku, ale wierzę, że większość z was zna ten prosty i popularny język.

Mój faworyt – LogoPond

W przypadku tej galerii znajdujemy tego czego szukamy za pierwszym podejściem: loga. W sumie nie wymaga ona komentarza, bo jak dla mnie jest perfekcyjna. Jeżeli ktoś ma inne zdanie zapraszam do komentarzy.

Nie są to z pewnością wszystkie galerie tego typu (z logami) w internecie – jeżeli znacie, to dajcie znać. Uzupełnimy listę.

Kilka porad za webdesignerdepot.com

W telegraficznym skrócie:

1. Wielu początkujących projektantów zarówno logotypów jak i stron, pierwsze co robi to siada do komputera. Błąd. Kartka papieru (nawet nie musi być czysta) i ołówek. Najpierw porysuj. A nawet narysuj gotowy projekt.
2. Korzystaj z grafiki wektorowej. Illustartor, Freehand i  CorelDraw nadają się świetnie do tego celu. Tak naprawdę nigdy nie wiesz na jakim medium to logo się znajdzie, a jedynym uniwersalnym formatem jest właśnie wektorowy.
3. Kolory. Muszą być dobrane do tematu. Jak byś widział logo firmy zajmującej się funduszami inwestyjnymi wysokiego stopnia ryzyka finansowego w kolorach różowo – fioletowych ? Ta strona pomoże Ci w tym temacie.
4. Brak kolorów. Sprawdź czy logo też „działa” bez kolorów. Kłaniają się jeszcze raz różne nośniki, na których może pojawić się nasze logo.
5. Typografia (fonty). Tak samo ważna jak reszta projektu.

Temat logotypów jest niewyczerpalny. Jak szybko pojawiają się nowe trendy i techniki w designie tak zawsze będzie coś nowego. Zaglądajcie na polecane w artykule strony i mam nadzieję, że wpłyną na waszą kreatywność na tym polu.

Następnym razem postaram się znaleźć trochę ciekawych i darmowych fontów.

Dla operujących słabiej językiem angielskim streszczę główne zagadnienia:

Na początku dowiadujemy się czego NIE robić – pułapki:

1. Ściemnianie
2. Zapychanie informacjami
3. Przesycanie
4. Udziwniona nawigacja
5. Bałagan wizualny

No i oczywiście co powinno się robić kreując własne portfolio:

1. Zdefiniować na wstępie cel
2. Rozważyć stworzenie kilku portfolii
3. Ukierunkować się na konkretny rynek/pracodawcę
4. Portfolio musi być przystosowane do wielokrotnego użycia
5. Wybierz właściwą technologię
6. Zaprojektuj je tak jak zlecenie dla klienta
7. Skoncentruj się na najlepszych pracach
8. Nie zapomnij o danych kontaktowych
9. ….

Jeżeli ten post spotka się z jakimś odzewem w postaci komentarzy to obiecuję, że przetłumaczę cały artykuł. link.

Bardzo ładna i przyjemna strona … jedyna wada jak dla mnie to to, że jest w egzotycznym dla mnie języku – hiszpańskim chyba. Jakkolwiek … http://dibusoft.com/