Zawartość

• Do kroku
• Metoda 1 z 2: 3 podstawowe zasady
• Metoda 2 z 2: Wytyczne
• Porady
• Ostrzeżenia

Zaprojektowanie świetnej witryny internetowej może wydawać się trudnym zadaniem, ale jeśli będziesz pamiętać o podstawach, proces będzie interesujący i przyjemny. To coś więcej niż tylko dobry wygląd! Pokażemy Ci podstawy i kilka ogólnych wskazówek, które pomogą Ci zaprojektować strony internetowe, które ludzie będą odwiedzać wielokrotnie.

Do kroku

Metoda 1 z 2: 3 podstawowe zasady

1. Zasada nr 1:Posłuchaj swojego klienta. Być może projektujesz „najwspanialszą witrynę internetową na świecie w historii wszechświata i nie tylko”, z bogatą czernią, wyrafinowanymi czcionkami i jasnymi, artystycznymi kolorami dla witryny, która krzyczy „odkryj mnie teraz!” Niestety, Twój klient chciał mieć pomarańczowy pasek menu z jasnoróżowymi i pomarańczowymi literami. Zostałeś zwolniony, a Twoja najlepsza witryna internetowa - do której klient ma prawa - znajduje się na dysku kopii zapasowej i nikt jej nigdy więcej nie zobaczy.
   • Przestudiuj tożsamość korporacyjną swojego klienta. Niech klient pokaże Ci kilka ulubionych witryn. Daje to nie tylko wyobrażenie o tym, co im się podoba, ale także daje kilka pomysłów na projekt, o których być może nie pomyślałeś.
   • Jeśli myślisz, że żartowaliśmy z pomarańczowo-różowej witryny, rozważ tę fajną, wyrafinowaną witrynę:
2. Zasada nr 2:Poznaj swoich odbiorców i ich poszukiwania i odpowiednio dostosuj swój projekt. Ludzie mają strony internetowe, ponieważ chcą, aby inni je widzieli. Może mieć charakter informacyjny, komercyjny lub zabawiać określoną grupę docelową. Twoim zadaniem jako projektanta jest wiedzieć, dla kogo projektujesz, i trzymać go na stronie, gdy tam wylądują.
   • Możesz pomyśleć: „Jeśli będzie dobrze wyglądać, zostaną”. Ale niekoniecznie musi tak być. Weźmy na przykład nieruchomości. Oto witryna o przejrzystym, zabawnym wyglądzie. Ma dużo białej przestrzeni, która daje otwarty wygląd, jasne kolory i nowoczesny format panoramiczny z linkami w widocznym miejscu:
   • Przyjrzyjmy się teraz temu podejściu do sprzedaży nieruchomości na tym samym obszarze: zagraconych i bardzo ruchliwych, matowych kolorach i pokrytych reklamami.
   • Zgadnij, który z nich działa lepiej dla osób szukających domu? Racja, ten, w którym domy! Kiedy ludzie wyszukują „domy na sprzedaż w Santa Monica”, nie obchodzi ich, jak wygląda strona. Nie chcą czytać o agencie nieruchomości ani oglądać ładnych zdjęć miasta. Chcą zobaczyć domy.
3. Zasada nr 3:Posłuchaj siebie. Rozumiesz, czego chce klient i wiesz, czego szuka Twój rynek. Teraz nadszedł czas, aby zwrócić uwagę na Ciebie, projektanta!
   • Zbuduj szablon w wybranym oprogramowaniu graficznym. Ułóż elementy swojej strony na różnych warstwach (abyś mógł później modyfikować elementy bez niszczenia całego szablonu). Tymi elementami mogą być:
     • nagłówek. To element, który jest taki sam na każdej stronie Twojej witryny. Nagłówek składa się z tytułu i logo witryny, a także linków do innych części witryny (np. Informacje, Kontakt itp.). Wizualnie i praktycznie to wszystko połączy. Dobrą praktyką jest łączenie pierwszego przycisku na pasku menu z powrotem do strony głównej.
     • Na przykład spójrzmy na Apple:
     • Podobnie jak w przypadku większości rzeczy Apple, ich strona główna ma bardzo przejrzysty, prosty wygląd. Zwróć uwagę na pasek menu u góry z logicznymi tematami dla każdego przycisku oraz polem wyszukiwania - zawsze dobry pomysł, jeśli Twoja witryna to obsługuje. Spójrzmy teraz na stronę docelową jednego z przycisków, iPada, aby zobaczyć kilka elementów:
     • Pasek menu zmienia się tylko po przyciemnieniu przycisku iPada.
     • Temat strony docelowej jest wyświetlany dużymi czarnymi literami.
     • Pojawi się nowe podmenu, dzięki któremu możesz dowiedzieć się więcej o produkcie. Jeśli klikniesz na jeden z tych przycisków, zobaczysz, że każda strona oferuje nową zawartość w zależności od tematu, ale będzie identyczna pod względem układu i projektu.
     • Często każdy główny temat na pasku menu będzie miał różne podtytuły do ​​wypełnienia. Zamiast tworzyć drugi pasek menu, możesz użyć wyskakujących menu, takich jak ten przykład z Musicians Friend:
     • Pasek boczny. Będzie się to pojawiać na wielu stronach Twojej witryny, ale niekoniecznie na wszystkich - decyduje kontekst. Jest to jednak bardzo ważny element i musi być starannie zaprojektowany, aby był intuicyjny i niezbyt zagracony. W przeciwieństwie do paska menu zawartość paska bocznego może być bardzo dynamiczna. Sprawdź te dwa paski boczne od marketera nieruchomości Trulia Pierwszy jest przeznaczony dla kupujących:
       
       

Metoda 2 z 2: Wytyczne

1. Zaprojektuj dobry interfejs użytkownika. Umieść różne elementy witryny, takie jak tytuł, paski boczne, logo, obrazy i tekst w tym samym miejscu na każdej stronie, aby nawigacja po witrynie była intuicyjna.
   • Zachowaj ten sam nagłówek u góry każdej strony. Niezależnie od tego, czy zawartość Twojej witryny pozwala na wiele powtarzających się elementów, upewnij się, że góra każdej strony jest taka sama.
   • Użyj logiki w swoim projekcie. Elementy na jednej stronie powinny być logicznie uporządkowane według ważności lub tematu; różne strony w witrynie też powinny być.
2. Stwórz spójny styl. Tam, gdzie układ powinien nadać witrynie spójność strukturalną, styl powinien zapewniać harmonię tematyczną.
   • Trzymaj się dwóch lub trzech głównych kolorów i upewnij się, że dobrze do siebie pasują.
   • Unikaj używania zbyt wielu stylów lub rozmiarów czcionek; jeśli chcesz zamienić kilka na przemian, użyj ich w ten sam sposób na każdej stronie.
   • Użyj kaskadowych arkuszy stylów (CSS), aby zachować jednolity styl i ułatwić zmianę elementów w całej witrynie bez konieczności przechodzenia do każdej strony osobno.
3. Maksymalizuj czytelność. Aby ułatwić czytanie tekstu, możesz podzielić go na mniejsze części.
   • Użyj napisów i odpowiednich odstępów, aby oddzielić każdą z części.
   • Użyj pogrubionych liter lub różnych rozmiarów, aby pokazać hierarchię i znaczenie tematów.
   • Zwróć uwagę na to, jak traktujesz tekst. Nie zmniejszaj czcionki i zwiększ odstępy między wierszami, aby ułatwić czytanie dużych fragmentów tekstu. Duże fragmenty tekstu są trudniejsze do odczytania; podziel go na mniejsze akapity.
4. Spraw, aby Twoja witryna była powszechnie czytelna. Używaj standardowego kodu HTML i unikaj tagów, funkcji i wtyczek, które są dostępne tylko dla jednej marki lub wersji przeglądarki.
   • Podczas gdy większość nowoczesnych przeglądarek i komputerów może obsługiwać złożone obrazy, wszystko będzie wyglądać lepiej, jeśli zmniejszysz i zoptymalizujesz obrazy pod kątem Internetu. Porównaj znaczenie jakości ze znaczeniem szybkości.
5. Przetestuj swoją witrynę. Upewnić się, że każdy link działa jak można się spodziewać, a obrazy wyglądają prawidłowo.
   • Możesz zorganizować testy użytkowników, zlecając członkom grupy docelowej sprawdzenie przejrzystości i łatwości użytkowania projektu oraz przekazanie opinii na temat Twojej witryny.
6. Opublikuj swoją witrynę. Kup nazwę domeny, jeśli jeszcze tego nie zrobiłeś. Okresowo sprawdzaj, czy linki nadal działają i słuchaj sugestii przesyłanych przez odwiedzających pocztą e-mail.

Porady

• Chociaż możesz zaprojektować układ w oparciu o własną wizję lub rzeczy, które widziałeś w innych witrynach, łatwiej będzie kupić gotowy projekt.
• Nie bombarduj gościa uroczymi, specjalnymi zdjęciami. Animacje Flash, jasne kolory, wzorzyste tła i muzyka odtwarzana automatycznie podczas ładowania strony były zabawnymi eksperymentami w latach 90., ale teraz odstraszają użytkowników. Trzymaj się prostego tła, które kontrastuje z kolorem tekstu, aby zapewnić maksymalną czytelność.
• Zawsze możesz użyć CSS, aby zoptymalizować odstępy między akapitami.
• Odwiedzającym z upośledzeniem słuchu lub wzroku można napisać do filmów, transkrybować dźwięk i dodać wiadomość o dostępności. Chociaż tabele mogą być skutecznym sposobem porządkowania informacji, osoby niedowidzące korzystające z oprogramowania czytnika ekranu mogą nie słyszeć materiału we właściwej kolejności.
• Pozwól odwiedzającym oszczędzać atrament: używaj osobnego arkusza stylów do drukowania stron.
  • Wyłącz obrazy tła podczas ustawiania parametrów drukowania.
  • Użyj czarnego tekstu na białym tle.
  • Usuń pasek menu i niepotrzebne obrazy.

Ostrzeżenia

• Unikaj plagiatu i przestrzegaj wszystkich praw autorskich. Nie dołączaj przypadkowych obrazów znalezionych w Internecie ani nawet elementów strukturalnych bez zgody. Wszystko, czego używasz w swojej witrynie, musi być zgodne z prawem i etyczne.