Jak dobrze budować strony www.



Podobne dokumenty
CZEGO UNIKAĆ. tworząc prezentację multimedialną. Andrzej Kozdęba

Stwórz baner na bloga

Grafika komputerowa. Spis treści

Imię i Nazwisko: Tytuł prezentacji: Główne punkty prezentacji: Slajd tytułowy tytuł, imię autora, szkoła Plan prezentacji (w punktach)

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2.

Tworzenie szablonów użytkownika

Wstępny raport użyteczności strony internetowej tel

Pokaz slajdów na stronie internetowej

JAK ZAPROJEKTOWAĆ WYGLĄD STRONY INTERNETOWEJ W KREATORZE CLICK WEB?

Zasady tworzenia dobrych prezentacji

Reklama na portalu Świata Przemysłu Farmaceutycznego specyfikacja techniczna

Dodawanie grafiki i obiektów

Jak stworzyć własny blog w kreatorze Click Web?

Profesjonalny efekt szybko i łatwo z darmowym oprogramowaniem Avery Design & Print

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Zasady tworzenia podstron

PROCES TWORZENIA DOKUMENTU

Jak przygotować poster naukowy

STRONA WWW A LANDING PAGE

Podstawy projektowania

Pierwsza strona internetowa

Komunikacja człowiek - komputer. Ćwiczenie 1. Temat: ocena funkcjonalności witryny internetowej. Wykonali:

Tworzenie infografik za pomocą narzędzia Canva

Personalizowanie wirtualnych pokojów

KREACJA DOOH Projektowanie kreacji na ekrany Digital Out Of Home rządzi się swoimi prawami. Przedstawiamy zbiór wskazówek i porad, które pomogą Ci

Projektowanie przy uz yciu motywo w częś c 1: informacje podśtawowe

e r T i H M r e n L T n

WORDPRESS INSTRUKCJA OBSŁUGI

W kolejnym odcinku zajmiemy się umieszczaniem w naszym projekcie zestawu ikon służących szybkiemu korzystaniu z opcji programu.

Strukturę naszego Biuletynu tworzą następujące elementy:

Konspekt lekcji redagowanie wiadomości w programie Outlook Express Cele lekcji:

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

Projekt współfinansowany przez Unię Europejską ze środków Europejskiego Funduszu Społecznego w ramach Programu Operacyjnego Kapitał Ludzki

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: Wersja: 1.

Tworzenie menu i authoring w programie DVDStyler

Przewodnik Szybki start

e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda

Instrukcja obsługi uczelnianego cmsa

Wikispaces materiały szkoleniowe

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

PRZYGOTOWANIE ŚRODKA PDF

TWORZENIE PREZENTACJI MS POWERPOINT

Formatowanie tekstu przy uz yciu stylo w

Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu:

DOKUMENTÓW W EDYTORACH

5.4. Efekty specjalne

Instrukcja tworzenia strony internetowej w serwisie twojobiekt.pl

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3

PORADNIK Zasady i zalecenia pracy z plikami oraz tekstem na stronach nowego portalu SGH (na platformie SharePoint)

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2018 CZĘŚĆ PRAKTYCZNA

O1.JAK ZAŁOŻYC QMAMA?

Aplikacje WWW - laboratorium

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

Spis treści. Rozdział 2. Graficzna oprawa witryny...z Stosowanie motywu...s...s.. 19

OPIS FORM REKLAMOWYCH

Zaprojektuj kalendarz z TKexe Kalender

2.5 Dzielenie się wiedzą

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

Komputery I (2) Panel sterowania:

Księgarnia internetowa Lubię to!» Nasza społeczność

DODAJEMY TREŚĆ DO STRONY

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Tworzenie prezentacji w MS PowerPoint

Instrukcja obsługi Kreatora Stron Internetowych dla Glazurników i Termoizolerów

Czcionki bezszeryfowe

Przedmiot: Komunikacja człowiek - komputer Ćwiczenie: 2 Temat ćwiczenia: Projektowanie funkcjonalne serwisów internetowych v.2.0

INSTRUKCJA DLA REDAKTORÓW QMAMA

Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt

2 Podstawy tworzenia stron internetowych

ZASADY TWORZENIA PREZENTACJI. Daria Pieńkowska

Rozdział 5: Style tekstu

Projektowanie Skinów w programie Taboret2

Formatowanie warunkowe

Nazwa firmy lub projektu: 1. Grafika

Dostępność w rozumieniu ustawy o języku migowym i innych środkach komunikowania się

WAŻNE! colour.me Google Fonts tutaj

Formatowanie komórek

Języki programowania wysokiego poziomu. CSS Wskazówki

Tworzenie stron internetowych w kodzie HTML Cz 5

Sztuka tworzenia prezentacji multimedialnej

I. Formatowanie tekstu i wygląd strony

SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE

Specyfikacja mikrobloga na portalu GoldenLine.pl

Optymalizacja logo strony. Krok po kroku... Spis treści

OpenOfficePL. Zestaw szablonów magazynowych. Instrukcja obsługi

LEGISLATOR. Data dokumentu:17 września 2012 Wersja: 1.3 Autor: Paweł Jankowski

Warunki techniczne prezentacji reklam

Przewodnik Szybki start

Podstawy tworzenie prezentacji multimedialnej w programie. MS Power Point

Witaj na zupełnie nowej i odświeżonej stronie mam.media.pl!

Specyfikacja dla strony internetowej Fundacji Śląskie Hospicjum dla Dzieci

Zajęcia komputerowe klasy I-III- wymagania

Założenia projektu: Projekt ma zadanie pokazać praktyczne zastosowanie App Inventor 2, poprzez stworzenie prostej aplikacji do nauki słówek.

EDYCJA TEKSTU MS WORDPAD

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2018 CZĘŚĆ PRAKTYCZNA

Kurs I PRZYGOTOWANIE PUBLICZNEJ PREZENTACJI ZDOLNOŚCI PERCEPCYJNE SŁUCHACZY, UWARUNKOWANIA TECHNICZNE I PRAWNE. Lekcja 1

Masz pomysł na lepszy wygląd?

Łukasz Fedorowicz. 5 zasad tworzenia skutecznej strony internetowej to nie budowa rakiet!

Reklama Banerowa. w największym polskim portalu gastronomicznym

Transkrypt:

Jak dobrze budować strony www. W procesie projektowania stron www, kierujemy się różnymi zasadami, wytycznymi, badaniami użytkowników, doświadczeniem, opiniami itp. Wszystko to tworzy pewien zestaw przykazań według których powinno się budować dobre strony www. Użyteczność, dostępność, dobra nawigacja - to niektóre z punktów dobrze zaprojektowanej strony www. Poniżej prezentujemy całą listę pomocnych wskazówek i porad, jakimi powinno się kierować przy projektowaniu stron internetowych. Grafika strony. Przy projektowaniu szablonu graficznego strony, należy zastanowić się jak będzie przemieszczał się wzrok użytkownika. Nie na darmo mówi się, że dobra grafika przyciąga wzrok użytkownika. Umieszczając na stronie wyróżnione elementy, możemy nakierować wzrok na te elementy na których najbardziej nam zależy. Mogą to być : logo firmy, box z reklamą produktu, przycisk Oferta itd. Badania jasno dowodzą, że pierwszym - a co za tym idzie najważniejszym - miejscem strony, na jakie napotyka wzrok ludzki jest lewy górny róg layoutu. Dlatego właśnie tam powinno znaleźć się logo firmy, lub inny wyróżniony element, który będzie zapamiętany i będzie identyfikował stronę. Przy projektowaniu wyglądu strony należy zwracać uwagę na : kolorystykę, kontrast, pozycję elementów, rozmiary.

Nawigacja. Częstą przyczyną zbyt szybkiego opuszczania strony przez użytkowników jest zła nawigacja. Badania dowiodły, że zdezorientowany użytkownik opuszcza witrynę po paru sekundach. Śmiało można zaryzykować tezę, że nawigacja jest najważniejszym i najbardziej wpływowym elementem strony na zadowolenie użytkownika. Planowanie na przyszłość. Nad wyglądem strony - także tym za jakiś czas - warto zastanowić się na etapie tworzenia grafiki w programie graficznym. Oczywiście istnieje możliwość lekkich modyfikacji wyglądu strony dzięki stylom (pliki *.css), lecz nie umożliwią one gruntowniejszych zmian. Dlatego warto wziąć pod uwagę następujące rzeczy : rozmiar strony (głównie szerokość) : należy dobrać z umiarem, adekwatnie do aktualnej najbardziej popularnej rozdzielczości stosowanej w komputerach użytkowników (pomocne są tutaj wszelkie badania dostępne w Internecie), odpowiedni krój czcionek : co z tego, że Twój grafik zaprojektuje menu z finezyjną czcionką, jeśli będzie ono musiało być w postaci graficznej, a Twój grafik będzie musiał dorabiać za każdym razem nowy przycisk, wraz z nową pozycją menu. zachowanie strony, jeśli ktoś zmieni rozmiar okna przeglądarki : co się stanie z tłem? Z boxami, kolumnami, menu, banerem itd. czy wszystko nadal będzie na swoim miejscu, czy na stronie zapanuje chaos? Jak wtedy będzie wyglądała strona?

Przestrzeń i lekkość strony - odpowiednia ilość miejsca między elementami strony powoduje, że grafika staje się atrakcyjniejsza i przejrzysta. Są trzy rodzaje wolnego miejsca: Odstęp pomiędzy liniami - odległość pomiędzy dwiema liniami tekstu decyduje o tym jak łatwo można go czytać. Mała ilość miejsca powoduje, że wzrok z łatwością przenosi się z końca jednej linii na początek drugiej. Zbyt duża ilość wolnego miejsca może powodować, że wzrok będzie miał trudności z odnalezieniem początku następnej linii. Musisz sam zdecydować jaka jest optymalna odległość. Zmiany należy dokonywać w CSS w line height Odległość pomiędzy tekstem i innymi elementami - tekst nie powinien nigdy dotykać innych elementów graficznych strony. Prostą zasadą jest, że zawsze powinna być odrobina wolnego miejsca. Dzięki temu stronę łatwiej się czyta i przegląda Biała przestrzeń - termin ten oznacza pustą przestrzeń na stronie (nie musi być ona wcale w białym kolorze). Jest ona stosowana po to, by nadać stronie odpowiednią równowagę, proporcje i kontrast. Dużo wolnej przestrzeni sprawia, że produkt sprzedawany na takiej stronie uchodzi za najwyższej klasy. Jeżeli chcesz nauczyć się jak odpowiednio stosować białą przestrzeń, to zobacz jak wyglądają reklamy znanych i cenionych marek samochodów czy zegarków w magazynach papierowych. Odpowiedni wygląd tekstu. Tekst jest najczęściej używanym elementem projektów graficznych, więc na jego temat pojawiło się już sporo przemyśleń. Należy pamiętać o następujących kwestiach : odpowiednia czcionka : różne rodzaje czcionki mówią różne rzeczy o wyglądzie strony. Niektóre wyglądają nowocześnie, a inne bardziej retro. Upewnij się, że używasz takiej, która odpowiada specyfice strony, rozmiar czcionek : kilka lat temu modne było stosowanie małego tekstu. Dzisiaj ludzie zdają sobie sprawę z tego, że tekst jest po to aby go

czytać, a nie tylko ładnie wyglądać. Upewnij się, że rozmiar czcionki dla powiązanych elementów jest taki sam, łatwy do przeczytania i odpowiednio proporcjonalny (tak aby nagłówki odpowiednio się prezentowały), odpowiednia ilość miejsca między wyrazami i liniami w tekście, odpowiednia długość linii - stosuj zasadę, że długie linie czyta się gorzej niż krótkie, kolumnowe teksty (obejrzyj pierwszą lepszą gazetę codzienną). kolor tekstu : powinien być odpowiednio dobrany do tła, musi być wyrazisty względem tła, zapewniać odpowiedni kontrast, wyrównanie tekstu : często spotykaną praktyką jest justowanie tekstu. Efekt ten prezentuje się ciekawie i na pewno zdobi stronę, lecz pod względem wygody użytkownika jest niepożądany. Oczy człowieka nie lubią zmian w wyglądzie tekstu, a justowanie powoduje, że odstępy miedzy wyrazami są bardzo zróżnicowane. Użyteczność strony. Projekt graficzny nie składa się tylko z ładnych obrazków. Przy takiej ilości informacji i interakcji jaka teraz pojawia się na stronach, zadaniem grafika jest tworzenie użytecznego projektu. Poza wcześniej wymienionymi : nawigacją, tekstem czy prowadzeniem wzroku użytkownika, kolejne elementy użytecznej strony www to między innymi : trzymanie się standardów oczekiwanych przez użytkowników. Ich niespełnienie może powodować konsternację (np. podkreślony wyraz nie jest linkiem, a taką konwencję się powszechnie stosuje), wyraziste wyrażenie misji jaką spełnia strona. Po pierwszym obejrzeniu witryny użytkownik powinien wiedzieć m.in. gdzie jest, o czym jest serwis, co może na nim zrobić, od czego może zacząć eksplorowanie serwisu,

umieszczenie w ogólnie dostępnym miejscu wyszukiwarki treści, Wyrównanie elementów strony. Elementy strony powinny być wyrównane (podobnie jak w publikacjach papierowych). Nie oznacza to jednak, że wszystkie elementy muszą zaczynać i kończyć się w tym samym miejscu. Stosuj wyrównanie, by strona wyglądała na bardziej uporządkowaną. Przejrzystość. Granice poszczególnych elementów powinny być widoczne, tekst powinien zawierać odpowiedni anti-aliasing. Konsystencja. Konsystencja oznacza, że wszystkie elementy grafiki do siebie pasują. Rozmiar nagłówków, wybór czcionki, kolory, odstępy i elementy powinny do siebie pasować. Sprawia to, że Twój projekt wygląda profesjonalnie. Najłatwiejszym sposobem na osiągnięcie konsystencji jest podjęcie ważnych decyzji odnośnie projektu na samym początku i konsekwentne ich przestrzeganie. W przypadku dużych projektów mogą się jednak pojawić zmiany już w trakcie pracy. Warto wtedy wrócić do poprzednio zaprojektowanych stron i dokonać zmian, tak aby były one zgodne z resztą projektu.. Za: http://www.contip.net/2008/05/31/jak-dobrze-budowac-strony-www.html