Zasady graficznego projektowania, cz. 1

Po angielsku tak zgrabnie sie to nazywa: Principles of graphic design. Co to w ogóle jest ten graphic design? W różnych źródłach są inne definicje. Ale ważny jest trzon - jest to sposób wizualnej komunikacji z użytkownikiem. Przydatne zarówno przy web design jak i wszelkiego innego rodzaju projektowaniu wyglądu czegoś :) O tym chciałabym dziś kilka słów powiedzieć.

Więcej...

Graphic design jest

a) celowe. Z tym chyba każdy się zgodzi. Zanim coś się zrobi lepiej zazwyczaj to jednek przemyśleć - w ostateczności okazuje się, że wtedy mniej pracy (i nerwów byc może) będzie nas to kosztowało. Projekt może być bardzo pomocny przy odpowiadaniu na pytanie: "jak". Za jego pomocą można pokazać nawigację strony, jak przesyłać informację i inne. Ponadto wiąże koncepcje, pomysły, funkcje dla specjalnych grup (np. wiekowych).

b) informacyjne. Może udzielać odpowiedzi na pewne pytania informacyjne (np. za pomocą wykresów)

c) wykorzystuje wizualny język posługując się np.:

• litery "puste" i pełne w środku (tzw. negative/positive)
• spadające i wznoszące się (tzw. falling/rising) gdy litera jest wyżej lub niżej niż poprzednia
• stabile i niestabilne (stable/unstable) w zalezności czy litera stoi prosto czy jest przekrzywiona.
• przód i tył (front/back). Gdzie back oznacza w lustrze a front "normalnie"
• grube i cienkie (thick/thin) czyli jakby bold i bez
• małe i duże (small/large)
• równe i nierówne (smooth/rough), gdzie nierówne to takie jak często można spotkać na ścianach budynku - z różnymi ozdobnikami grafiti.
• matowe i przezroczyste (opaque/transparent), typ transparent to np. znakoi wodne na dokumentach
• wchodzące i wychodzące(coming/going) - gdy widać tylko część litery.

d) no i oczywiście jest procesem, który na podstawie pewnych infromacji wgłębia się coraz bardziej w szczegóły.


To tyle tak pokrótce odnośnie części pierwszej. Część druga będzie o teorii koloru.

Google był pierwszy

Nie ma to jak odkryć koła na nowo. Satysfakcji mnóstwo, radość nie do opisania - aż do momentu zauważenia, że wynalazek wcale rewolucyjny nie jest. Ot, na przykład

Web usability od strony wizualizacji. Część techniczna.

Bez części technicznej nie istaniałaby strona tak jak nie istnieje samochód, ktróy nie jeździ (no dobra, istnieją, ale to są albo wraki samochodów albo zabytki - ani jedne ani drugie nie spełniają swojego głównego przeznaczenia.

Na naszych stronach Web za część techniczną uważa się:
- otrzymywanie strony natychmiastowo (względnie szybko)
- właściwości zgodne ze standardami stron Web
- linki
- połączenia stron
- dostępność.

Więcej...

1. Aby szybko strony się wyświetlały należy jak najbardziej zmniejszyć ich rozmiar. A oto kilka rad jak tego dokonać:
- zoptymalizuj kod strony.
- Używaj kilkukrotnie tego samego obrazka. Będzie się ściągał tylko raz a potem będzie w cachu przeglądarki.
- Używaj występujące style arkuszy. One także będą ściągały się tylko raz.
- tak samo w przypadku skryptów.
- optymalizuj obrazki. Używaj formatów jpg oraz gif
- zredukuj fizyczną wielkość obrazków. To także może znacznie zmniejszyć wielkość strony

Dla użytkownika także dużo przyjemniej się czeka gdy zanim załaduje się strona pokazuje się jakaś animowana ikonka z napisem że strona zaraz się otworzy. Im zabawniejsza, ciekawsza ikonka tym lepiej (lecz nalezy pamiętać, by rozmiar nie był zbyt duży. lepiej bowiem bez ikonki poczekać 30 sekund krócej niż razem z nią 5 minuty dłużej).
Warto także czasem zminimalizować ilość interakcji z użytkownikiem, aby strona nie ładowała(a raczej przeładowywała) się zbyt często.
Należy jednocześnie jednak pamiętać o kontakcie z użytkownikiem: przekazaniu informacji o tym np, dlaczego wyszukiwarka nic nie znalazła i co uzytkownik ma teraz zrobić.

2. Standardy - po prostu staraj się używać to, do czego użytkownicy Internetu są przyzwyczajeni. Staraj się być niestandardowy, ale tak żeby to robić lepiej (i bez przesady).

3. Mamy różnego rodzaju linki:
-external (prowadzą do innych stron www)
-internal (wewnątrz jednej strony)
-download (do ściągania plików)
-interakcji z użytkownikiem
-inline (inaczej kotwice)

Ważnym jest, aby opisywać co w tych linkach użytkownik znajdzie. Dobrym akcentem jest też umieszczanie w nawiasie rozmiaru (ikonki) pliku do ściągnięcia.