Co robić i czego nie robić w przypadku świetnego projektowania stron internetowych

Jeśli zastosujesz się do tego przewodnika, okaże się on całkiem cennym źródłem informacji na temat projektowania stron internetowych, szczególnie jeśli planujesz z niego korzystać oprogramowanie do tworzenia stron internetowych w przyszłości. Od niedoświadczonych po doświadczonych, w tym przewodniku każdy znajdzie coś dla siebie.

Proces świetnego projektowania stron internetowych Aby upewnić się, że wszyscy jesteśmy na tej samej stronie, zacznijmy od podstawowej definicji „projektowania stron internetowych”. Według Wikipedii projektowanie stron internetowych to:

„proces konceptualizacji, planowania, modelowania i realizacji dostarczania mediów elektronicznych za pośrednictwem Internetu w postaci języka znaczników nadającego się do interpretacji przez przeglądarkę internetową i wyświetlania jako graficzny interfejs użytkownika” .

Proces projektowania stron internetowych można porównać do procesu pisania pracy naukowej. Na etapie konceptualizacji/planowania tworzone są schematy blokowe (konspekt), które ilustrują strukturę nawigacyjną Twojej witryny. Na etapie modelowania tworzone są statyczne modele szkieletowe (wstępne szkice), które ilustrują układ szkieletowy każdej sekcji witryny. Po utworzeniu szkieletów grafika, kolory i tekst są wykorzystywane do stworzenia projektu stron internetowych w oparciu o układ szkieletów. Na etapie realizacji Twój projekt jest konwertowany do formatu obsługiwanego przez przeglądarki internetowe, dodawany jest tekst i treść, a na koniec Twoja witryna internetowa jest publikowana na żywo w Internecie, aby świat mógł ją zobaczyć (ostateczna wersja robocza).

Wszystkie trzy etapy procesu projektowania są równie ważne. Wielu projektantów stron internetowych pomija ten etap, aby zaoszczędzić czas lub ponieważ uważają, że nie jest to konieczne. Jednakże wszystkie trzy etapy są konieczne, jeśli Twoim celem jest stworzenie udanego projektu i szanowanej strony internetowej. Nawet jeśli zastosuje się te trzy etapy, projektanci stron internetowych mogą popełnić wiele błędów, które doprowadzą do powstania stron internetowych o niskiej jakości i nieprzyjaznych dla użytkownika. Nadszedł czas, aby oczyścić szafkę ze złych praktyk projektowania stron internetowych i uzupełnić ją dobrymi.

Etap 1: Konceptualizacja i planowanie
Ten etap jest pomijany częściej niż pozostałe dwa etapy. Większość autorów nie lubi tworzyć konspektów artykułów naukowych, a większość projektantów stron internetowych również nie lubi tworzyć schematów blokowych. Nie bądź leniwy. Jeśli włożysz wysiłek i zaplanujesz swoją witrynę internetową, przekonasz się, że proces projektowania strony internetowej przebiegnie sprawnie i przy mniejszej liczbie błędów popełnianych po drodze.

Aby skutecznie opracować koncepcję i zaplanować witrynę internetową, będziesz potrzebować kilku rzeczy:

• mózg
• długopis i papier
• (opcjonalnie) oprogramowanie schematu blokowego
• ogólne pojęcie o różnych sekcjach Twojej witryny

Aby rozpocząć, weź długopis i papier lub uruchom swój ulubiony program do tworzenia schematów blokowych. Używamy oprogramowania OmniGraffle Professiona dla systemu Mac OS X, które kosztuje 150 USD za licencję, ale jest tego warte, jeśli regularnie tworzysz strony internetowe. Jeśli korzystasz z komputera, SmartDraw to świetny, DARMOWY program do tworzenia schematów blokowych, z którego możesz korzystać. Jednak długopis i papier sprawdzają się świetnie.

Istnieje wiele metod tworzenia schematów blokowych. Ze względu na czas i długość tego artykułu pokażemy Ci najbardziej podstawowy sposób. Jeśli chcesz dowiedzieć się więcej o schematach blokowych, wyszukaj schematy blokowe w Google lub Yahoo.

Zobacz schemat blokowy, który stworzyliśmy podczas opracowywania koncepcji witryn chromatycznych. (1) Na górze schematu blokowego podajemy nazwę naszej strony internetowej. (2) Następnie uwzględniamy każdą główną sekcję naszej witryny internetowej: Strona główna, Informacje i Usługi. Sekcje te stanowią główną nawigację w Twojej witrynie. To, jakie będą nazwy poszczególnych sekcji, zależy całkowicie od zawartości Twojej witryny. Staraj się używać jak najmniejszej liczby sekcji, aby odwiedzający nie byli przytłoczeni poruszaniem się po Twojej witrynie.

(3) Następnie dodaj wszystkie strony dodatkowe (podsekcje), które będą wymienione na każdej stronie głównej. W przypadku strony głównej uwzględniliśmy profesjonalne projektowanie stron internetowych, tworzenie stron internetowych i optymalizację dla wyszukiwarek. Nawigacja dodatkowa musi być bardziej opisowa niż nawigacja podstawowa. Im głębsza jest hierarchia nawigacyjna Twojej witryny, tym bardziej opisowa powinna być każda etykieta.

Dos

• Mniej znaczy więcej; ogranicz liczbę sekcji głównych do minimum. Na naszej stronie internetowej używamy 6 sekcji, co w zupełności wystarczy
• Niezależnie od tego, czy używasz pióra i papieru, czy oprogramowania do tworzenia schematów blokowych, utrzymuj wszystko tak czyste i zorganizowane, jak to tylko możliwe. Chociaż Ty (i każda osoba z Tobą współpracująca) będziecie jedynymi osobami, które będą korzystać ze schematu blokowego, nadal musi on mieć sens – w głównych sekcjach należy używać szerszych terminów, natomiast terminy drugorzędne i trzeciorzędne powinny być bardziej opisowe

Nie wolno
Tworzenie schematu blokowego jest dość proste; jednakże istnieje kilka błędów, które można łatwo popełnić:

• Nie używaj bardzo opisowych terminów w swojej głównej nawigacji, chyba że cała witryna skupia się na jednym wąskim temacie. Nie próbuj wrzucać wielu tematów do jednego worka. Utwórz sekcję ogólną dla tych tematów i na jej podstawie utwórz podsekcje. Dzięki temu strony podsekcji (opisowe) będą miały większe szanse na lepsze rankingi w wyszukiwarkach (Google, Yahoo, MSN, Ask). Po utworzeniu zwięzłego i opisowego schematu blokowego możesz przejść do drugiego etapu procesu projektowania stron internetowych:

Etap 2: Modelowanie
Na etapie modelowania powstają statyczne makiety typu „szkielet”. Każda makieta ilustruje szkielet układu każdej ze stron internetowych, które będą zawarte w Twojej witrynie. Ten etap jest ważny, ponieważ daje nam wyobrażenie o tym, gdzie w naszym projekcie zostaną umieszczone różne elementy. Niektóre z tych elementów to:

• logo
• menu nawigacyjne
• zawartość
• obrazy, filmy

Aby utworzyć te makiety, możesz użyć pióra i papieru lub preferowanego oprogramowania do tworzenia makiet. W przeszłości korzystaliśmy z Photoshopa, ale ostatnio używamy OmniGraffle Professional. OmniGraffle nie wymaga tak dużej ilości zasobów jak Photoshop i pozwala nam znacznie szybciej montować nasze makiety szkieletowe.

Ponadto upewnij się, że masz w pobliżu utworzone schematy blokowe, ponieważ będziesz musiał od czasu do czasu się do nich odwołać, aby upewnić się, że kpisz wszystkie strony, które pojawią się w Twojej witrynie.

Oto nasz przykład tego, jak powinna wyglądać makieta szkieletowa. Jak widać, nie ma tu żadnych kolorów ani grafiki. Dokładnie tak powinna wyglądać makieta szkieletowa – układ szkieletowy Twojego projektu. Celem jest uzyskanie ogólnego poglądu na to, gdzie zostanie umieszczony każdy element strony internetowej.

Zwykle zaczynamy od lewego górnego rogu i kierujemy się w dół. Nie ma określonego sposobu, w jaki powinien wyglądać model szkieletowy. Użyj swojej wyobraźni. Pamiętaj jednak, aby podczas tworzenia makiet nie zapomnieć o uwzględnieniu najważniejszych elementów strony internetowej (logo, menu nawigacyjne, rozmieszczenie treści, rozmieszczenie zdjęć/wideo).

Jeśli niektóre strony będą miały ten sam układ, nie ma potrzeby wyśmiewania wszystkich tych stron (chociaż z pewnością możesz). Pamiętaj tylko, aby wykonać makietę dowolnego unikalnego układu Twojej witryny. Podziękujesz sobie później.

Do

• makieta wszystkich unikalnych stron
• załącz ważne elementy (logo, nawigacja, rozmieszczenie treści, rozmieszczenie obrazów/wideo) -zacznij od góry i idź w dół -odwołaj się do schematu blokowego utworzonego w etapie 1, aby nie zapomnieć o makiecie żadnej strony -zapisz, zapisz, zapisz – jak w przypadku wszystkiego na komputerze, zapisuj swoje makiety co około 10 minut
• skup się na przejrzystych, przyjaznych dla użytkownika układach - oznacz swoje elementy, aby nie zapomnieć, czym są, kiedy będziesz do nich odnosić się do nich na etapie 3, wykonanie - wykorzystaj inne strony internetowe jako inspirację; nie ma nic złego w pobieraniu elementów z innych witryn i tworzeniu własnych (patrz „nie”)

Dont's

• nie dołączaj grafiki ani kolorów (to już na kolejnym etapie) - nie sprawiaj, że Twoje makiety będą zbyt „zajęte”; skup się na czystym, dobrze zorganizowanym i przyjaznym dla użytkownika układzie - nie pomijaj tego etapu; jest to tak samo ważne jak pierwsze i ostatnie - jeśli czerpiesz elementy z innych stron, uważaj, aby nie popełnić plagiatu; istnieje różnica pomiędzy inspirowaniem się inną stroną internetową w celu stworzenia pewnych elementów swojego projektu a rażącym zdzieraniem jej układu i kolorów

Etap 3: Wykonanie
W trzecim i ostatnim etapie, realizacji, planowanie z etapów 1 i 2 jest łączone, aby pomóc w stworzeniu działającej, interaktywnej strony internetowej.
Trzeci etap jest zdecydowanie najbardziej czasochłonny, ponieważ będziesz 1) tworzył grafikę, 2) tworzył treść i na koniec 3) konwertował projekty internetowe z obrazów na kod używany przez przeglądarki internetowe do prezentowania Twojej witryny światu.

Zanim dojdziesz do trzeciego etapu, powinieneś mieć jasny obraz:

• jak odwiedzający będą przemieszczać się z jednego miejsca do drugiego (etap 1, schemat blokowy) - jak będą rozmieszczone Twoje strony internetowe (etap 2, makiety szkieletowe)

Jeśli nie masz jasnego pojęcia o tych dwóch rzeczach, wróć do pierwszego i drugiego etapu i kontynuuj je rozwijaj. Przekonasz się, że trzeci etap jest najłatwiejszy, gdy zbudujesz jasny, zwięzły plan bitwy dotyczący zaprojektowania swojej witryny internetowej.

Porzuć długopis i papier
Na etapie 3 musisz używać Photoshopa lub innego programu do edycji obrazów, ponieważ do stworzenia układu swojej witryny internetowej będziesz używać kolorów i grafiki.

Zwykle najpierw zaczynamy od tworzenia strony „głównej” (indeksu). Użyj szkieletów utworzonych na etapie 2 jako szablonu dla każdej tworzonej strony. Zamiast jednak używać pełnych ramek, użyj zamiast tego grafiki, kolorów i tekstu. Każda strona musi wyglądać dokładnie tak, jak chcesz, aby wyglądała w Internecie, ponieważ jest to ostatni etap procesu projektowania.

Pamiętaj, aby uwzględnić tło nawigacji (ale nie dodawaj tekstu do obrazu). W przypadku konwersji przy użyciu CSS (kaskadowe arkusze stylów) nawigacja powinna mieć formę tekstu, a nie obrazów. Obrazy nie są indeksowane przez wyszukiwarki (słowa kluczowe użyte w nawigacji nie będą indeksowane na stronach wyników wyszukiwania, co oznacza, że ​​mniej osób będzie mogło znaleźć Twoją witrynę).

Kiedy jesteś zadowolony ze swoich projektów i czujesz, że są gotowe do umieszczenia w Internecie, nadszedł czas, aby rozdzielić projekty i stworzyć układ oparty na CSS. Aby uzyskać więcej informacji na temat konwertowania układów do CSS lub oznaczania swojej witryny w CSS, odwiedź w3schools.com. Po przeszukaniu Internetu nie znaleźliśmy przyzwoitego samouczka dotyczącego konwersji obrazu do CSS — spodziewaj się więc takiego w nadchodzących tygodniach. Konwersja projektów do formatu CSS jest niezwykle ważna, ponieważ układy tabel należą już do przeszłości.

Oto przykład prawie ukończonej strony internetowej o układzie, który zaprojektowaliśmy w etapie 2. Zostało to pobrane bezpośrednio z naszej przeglądarki internetowej i jak widać, jest już logo, kolory, ładny system nawigacji, stopka, i co najważniejsze, czysty, zorganizowany układ.
Dzięki planowaniu w etapach 1 i 2 nasz układ jest dobrze zorganizowany i łatwy w obsłudze.

Dos

• odwołaj się do szablonów utworzonych na etapie 2; chociaż odejście od oryginalnego układu jest w porządku, nie jest to konieczne
• przeprowadź badania przed utworzeniem rzeczywistego projektu; zdobywaj pomysły z innych stron i twórz własne (bez plagiatu)
• dołącz kolor i grafikę, aby stworzyć ostateczny wygląd swoich stron internetowych - użyj CSS (kaskadowych arkuszy stylów), aby przekonwertować swoje projekty z obrazów na znaczniki zrozumiałe dla przeglądarek internetowych - odwołuj się do schematu blokowego z etapu 1 podczas kodowania stron za pomocą hiperłączy; lepiej skorzystać z rozwijanego menu, które na każdej stronie zawiera wszystkie (lub większość) linków znajdujących się w Twojej witrynie; umożliwi to łatwiejszą nawigację, a także ułatwi indeksowanie stron, gdy zatrzymają się pająki wyszukiwarek; doskonałym miejscem na rozwijanie menu CSS jest DynamicDrive.com - sfinalizuj swój projekt podczas pracy w Photoshopie lub innym programie do edycji obrazów, którego używasz; wprowadzanie zmian w projekcie po jego przekształceniu w znaczniki (kod) może być uciążliwe

Nie wolno

• nie dołączaj tekstu do menu nawigacyjnych podczas konwersji do CSS; zamiast używać tekstu obrazkowego, użyj zwykłego tekstu czytelnego dla robotów wyszukiwarek
• nie używaj tabel podczas konwersji; nawet jeśli będziesz musiał kupić książkę o CSS, będzie warto; stoły są martwe
• nie pomijaj pierwszych dwóch etapów, żeby zaoszczędzić czas; Twoja witryna BĘDZIE lepsza, jeśli zaczniesz od początku procesu projektowania strony internetowej (a nie od końca)
• nie zapomnij skompresować obrazów po podzieleniu na potrzeby CSS; nie ma nic gorszego niż wolno ładująca się strona internetowa z powodu dużych plików graficznych; Photoshop ma opcję „Zapisz zoptymalizowany dla Internetu” (CS3 – „Zapisz dla Internetu i urządzeń”)

Proces czyni mistrza
Postępując zgodnie z procesem projektowania stron internetowych, takim jak ten przedstawiony w tym artykule, zwiększasz szanse na utworzenie witryny internetowej, która będzie dobrze zorganizowana, łatwa w nawigacji i bardzo przyjazna dla użytkownika. Spójrzmy prawdzie w oczy – jeśli odwiedzający zgubią się lub będą zdezorientowani podczas surfowania po Twojej witrynie, mogą nacisnąć przycisk Wstecz i poszukać bardziej przyjaznej dla użytkownika witryny. Ludzie nie lubią myśleć, jeśli chodzi o poruszanie się po stronach internetowych. Nie każ im myśleć. Ty o tym myślisz, planując swoją witrynę od etapu 1 do etapu 3, a przekonasz się, że więcej osób będzie zadowolonych z odwiedzania Twojej witryny.