10 elementów konstrukcyjnych, których nie należy przeoczyć
Jeśli chodzi o projektowanie i tworzenie stron internetowych, nigdy nie wydaje się, że dzieje się to wystarczająco szybko.
Biorąc pod uwagę to szybkie tempo, wiele drobnych szczegółów, które są ostatecznie wymagane do zbudowania strony internetowej, często jest pomijanych w procesie projektowania. Chociaż te szczegóły mogą być niewielkie, to właśnie one sprawiają, że witryna jest przyjemna i naprawdę niesamowita.
Szczegóły te często są łatwe do przeoczenia, ponieważ nie wpływają na ogólny wygląd witryny. Problem polega na tym, że ponieważ zespół programistów pracuje nad projektem, i tak będzie musiał zaprojektować i stworzyć te elementy.
Można dostosować cykl produkcyjny, aby programiści mieli czas na zwrócenie tych zasobów, ale dlaczego nie wystarczy, aby wszystko zostało wykonane z góry, aby proces był o wiele czystszy?
Co gorsza, zespół programistów może zdecydować się na posunięcie naprzód i po prostu tworzyć aktywa w miarę ich działania.
Podczas gdy wielu programistów ma oko na projekt, twórcą, który jest odpowiedzialny za projektowanie strony internetowej, powinien być ostatecznie ten, kto planuje te elementy. Planowanie najsubtelniejszych niuansów może mieć ogromny wpływ na jakość końcowego produktu.
Każdy element omawiany w tym artykule wynika z pytania, które deweloper zapytałby projektanta, gdyby w projekcie brakowało elementu.
Przeanalizujmy 10 kluczowych elementów, o których warto pamiętać podczas szlifowania witryny.
1. Linki
Chociaż stylizacja różnych stanów łącza jest rzeczywiście dość podstawowa, możesz być zaskoczony tym, jak często pomijane są wszystkie dodatkowe szczegóły. Uwzględnij następujące stany dla wszystkich linków na stronie:
- Normalna
Jest to domyślny stan łącza; tj. taki, który nie jest zawieszony ani nie jest klikany lub nie wskazuje adresu URL, który użytkownik już odwiedził. Jest to format linku, który zawsze obejmuje większość projektantów. - Odwiedzone
To jest łącze, które nie jest zawieszone lub kliknięte, ale którego cel został odwiedzony przez użytkownika. - Aktywny
Aktywny link to taki, który jest aktualnie klikany przez użytkownika. Większość programistów zreplikuje stan "najeżdżania" tutaj, jeśli styl nie zostanie im udostępniony. - Wahać się
Na koniec stan myszy wyświetlany jest po kliknięciu myszki. Ten i normalne stany są tymi, na które większość projektantów się przygotowuje.
Jednym z często pomijanych szczegółów jest to, że te różne państwa muszą być planowane dla wszystkich regionów strony internetowej. Na przykład wiele witryn ma ciemną kopię na jasnym tle, ale kontrast w stopce jest odwrócony. Musisz zaplanować wszystkie konteksty linków znalezionych na stronie.
Na Full Moon BBQ na przykład widzimy podstawowe czerwone linki wewnątrz regionu treści i podstawowe białe linki w stopce poniżej. Ponownie, drobny szczegół, ale ważne.
2. Formularze
Dla wielu projektantów konfiguracja formularzy jest krytyczna i nie można jej przeoczyć. Jednak dla wielu innych wydaje się to być odległym spostrzeżeniem.
Problem z tym ostatnim podejściem polega na tym, że formularze często stanowią jedyny prawdziwy sposób na przekształcenie użytkowników w klientów. Bez odpowiedniego planowania i projektowania użyteczność tych formularzy może ulec pogorszeniu, stanowiąc jedyny punkt konwersji na stronie internetowej. Przygotowanie do tych elementów ma zasadnicze znaczenie, nawet jeśli wydają się one mniej pilne dla klientów niż kolorystyka, branding i obrazy.
Dwa z najważniejszych względów podczas tworzenia formularza to:
- Etykieta formularza
Formularze zazwyczaj zbierają dane osobowe, których użytkownicy niechętnie podają. Jako takie, właściwe informowanie użytkowników o dokładnym celu formularza jest mądre. - Wprowadź pola i etykiety
Po drugie, plan, w jaki sposób pola wejściowe formularza zostaną ułożone na stronie i jak etykiety dla tych pól będą stylizowane i zorientowane względem pól.
Po pozostawieniu ich wartości domyślnych formularze mogą wyglądać niezręcznie. Jednak przy odpowiednim przygotowaniu strona internetowa będzie wyglądać płynnie i będzie o wiele bardziej efektywna. Spójrzmy na świetny przykład, który musiał rozpocząć się od dobrego planowania:
Ta krytyczna dla biznesu forma na Niesamowite był wyraźnie przemyślany. Cała misja i cel strony został dokładnie przemyślany. Od tytułu i wprowadzenia do układu każdego zestawu pól, z ich etykietami i stylami sterowania, ta forma jest modelem planowania.
Planowanie formularzy prowadzi nas do kilku innych kwestii ...
3. Zachowanie przycisku
Guziki mogą być używane na różnych stronach internetowych, ale często są zaniedbane, podobnie jak różne stany przycisku. Cztery stany przycisku to:
- Domyślna
Jest to domyślny stan przycisku, oczekujący na kliknięcie. Większość projektantów obejmuje tę, ale tęskni za innymi. - Wahać się
Stan zawisu widoczny jest, gdy użytkownik naciska przycisk myszy. Ten stan jest pomocny, aby wskazać użytkownikowi, że przycisk jest elementem nadającym się do wykonania. - Kliknij
Po kliknięciu przycisku ten stan wizualnie wskazuje im, że go kliknęli. Zapewnienie tej wizualnej wskazówki może pomóc zminimalizować frustrację użytkowników. - Niepełnosprawny
Nieprawidłowy stan przycisku jest prawdopodobnie najmniej wykorzystywany, ale może być bardzo pomocny dla programistów. Rzadko jest to planowany stan, chyba że projektant przygotował proces sprawdzania poprawności formularza (patrz następna sekcja).
Podobnie jak różne stany linków, należy wziąć pod uwagę różne stany przycisków używanych w całej witrynie. Od wyskakujących formularzy logowania do pól wyszukiwania po formularze rejestracji biuletynu - wszystkie te przyciski będą wymagać odpowiednich stylów.
4. Zatwierdzenie formularza
Ważnym szczegółowym zagadnieniem jest walidacja formularza. Jest to krytyczny punkt, w którym strona komunikuje wymagania użytkownika i błędy w formularzu. Istnieją trzy podstawowe kwestie do rozważenia:
- Wymagane pola
Wszystkie wymagane pola powinny być wskazane. Najczęściej jest to robione gwiazdką, jak widać na Rozpocznij od początku :
- Sprawdzanie w czasie rzeczywistym
Niektóre sprawdzanie poprawności można wykonać w czasie rzeczywistym, gdy użytkownik wypełnia formularz. Ten rodzaj sprawdzania informuje użytkownika tak szybko jak to możliwe o problemach z danymi, które wprowadził. Można to bardzo dobrze z tym zrobić wtyczka sprawdzania poprawności jQuery :
- Sprawdzanie po wycofaniu
Ten rodzaj sprawdzania poprawności ma miejsce po przesłaniu formularza przez użytkownika. Styl używany do sprawdzania w czasie rzeczywistym jest często tutaj powtarzany, ale inną opcją jest grupowanie wszystkich błędów w jedną wiadomość, jak widać na Muczeć :
5. Komunikaty o stanie: błędy, ostrzeżenia, potwierdzenia itp.
Po wykonaniu czynności w witrynie użytkownicy zwykle potrzebują jakiejś opinii. Najbardziej prawdopodobnym scenariuszem jest po przesłaniu formularza, ale może również wystąpić wiele innych zdarzeń. Uważnie zastanów się nad swoją witryną i działaniami, które mogą podjąć użytkownicy, i zaplanuj wiadomości, które będą potrzebne do komunikacji.
Na Życie dzisiaj widzimy komunikat sprawdzania poprawności, który może łatwo służyć jako globalny styl komunikatów o błędach. I z niewielką zmianą kolorów i ikon, może być również używany do subtelniejszych ostrzeżeń, a nawet wiadomości potwierdzających:
6. Rozszerzanie tła na większych ekranach
W zależności od stylu strony elementy tła mogą stanowić problem dla programistów. Większość tła jest prosta i nie wymaga dużego przygotowania, ale niektóre są skomplikowane pod względem gradientów, wzorów i obrazów.
Biorąc pod uwagę, że duże monitory stają się coraz bardziej powszechne, a większość projektów planuje się na poziomie bazowym o szerokości 960 pikseli, wiele ekranów nieruchomości pozostaje otwartych. Jeśli twoje tło zawiera coś, co jest zdumiewająco skomplikowane, musisz zaplanować, jak rozszerzy się, by wypełnić większe ekrany.
W przykładzie, który zbudowałem poniżej, musiałem dostosować się do tekstury drewna, która rozciągała się we wszystkich kierunkach. Nie jest to coś, co chcesz, żeby ciężko pracujący deweloper sobie radził.
7. Podstawowe elementy HTML
W przypadku ciężkich stron internetowych projektowanie i stylizacja podstawowych elementów HTML ma podstawowe znaczenie i nie należy ich przeoczyć. Jednak w wielu witrynach zorientowanych na marketing, które mają zajętą szatę graficzną i wyraźny styl wizualny, podstawowe elementy są zapomniane. Oczywiście deweloper nigdy nie za bardzo zajmie się tworzeniem strony internetowej, zanim będzie musiał stworzyć standardowy szablon strony.
Oto podstawowe elementy, które zawsze planujesz: akapity, nagłówki od 1 do 6, listy nieuporządkowane i uporządkowane, dane tabelaryczne, pola formularzy, obrazy oraz pogrubiony i pochylony tekst.
Na wielu stronach, nad którymi pracuję, przygotowałem przewodnik po programach pomocnych dla programistów, coś takiego:
8. E-maile na stronie internetowej
Jedną z rzeczy, których nie widzę w planowaniu, jest e-mail generowany przez witrynę. Taki podstawowy element jest łatwy do przeoczenia, ponieważ zazwyczaj nie jest głównym celem witryny. Mimo to e-mail to potężne narzędzie, które może promować i rozszerzać usługę.
Moją sugestią jest uważne przejrzenie zawartości strony na etapie planowania w celu wyszukania wiadomości e-mail, które mogą zostać wysłane. Niektóre z najczęstszych to:
- Potwierdzenie rejestracji listy mailingowej,
- Potwierdzenie Rejestracji,
- Potwierdzenie wypełnienia formularza (np. Formularz kontaktowy),
- Zamów weryfikację po zakupie.
Jeśli naprawdę chcesz wysadzić w powietrze umysły swoich klientów i deweloperów, przygotuj szablon e-mail marketingu dla tej strony. Zapewnisz użytkownikom płynne przejście z witryny internetowej do skrzynki odbiorczej, a będziesz utrzymywać staranną kontrolę nad marką w różnych jej formach.
9. Rozciąganie strony
Kwestia tego, jak projekt będzie rozciągany w celu dostosowania do zmieniających się treści, jest również rzadko rozwiązywany, ale może być krytyczny, w zależności od stylu witryny. Spójrzmy na przykład, gdzie mogło to być pomieszane:
Full Moon BBQ ma ciasną stronę główną. Ten projekt nie pozwala na duży ruch lub zmianę treści. Wszystko ma określony rozmiar i umiejscowienie. Co się stanie, jeśli właściciele zdecydują się wydłużyć wiadomość powitalną lub dodać zdjęcie? Na szczęście zaplanowali to. Jak widać w tym makiecie, zredagowałem stronę, aby dołączyć podwójny tekst. Strona rozciąga się idealnie i mieści się w niej:
Przygotowanie alternatywnych wersji układu z dużo większą zawartością może być niezwykle pomocne w demonstrowaniu, jak zaplanować taki scenariusz.
10. Animacje: wyskakujące okienka, podpowiedzi, przejścia itp.
Na standardowej stronie HTML i CSS (tj. Bez Flasha) animacje i przejścia są tak łatwe do przeoczenia. A kiedy je przeoczymy, często nie będą nawet w ogóle przyjmowane. Jeśli więc animacje są krytyczne, najlepiej jest dostarczyć programiście próbę działania, aby produkt działał tak, jak powinien.
Niektóre z najczęstszych miejsc animacji pojawiają się w:
- Etykietki narzędzi
Te małe pop-upy, gdy użytkownicy myszkują nad elementami. - Rotatory obrazu
Pokazy slajdów na stronie głównej to wściekłość, a dla przejść i stylów dostępna jest szeroka gama opcji. - Lightbox
Możesz stylować nie tylko samą lightbox, ale także przejść do niego.
Każdy z tych animowanych elementów ma odrębny styl wizualny, który musi być indywidualnie dostosowany.
Czemu miało by mi zależeć?
Wiele zaprezentowanych tu elementów wydaje się bardziej pomocnym dla twórców niż projektantów. Prawdę mówiąc, jest to częściowo prawdą: jeśli przygotujesz wszystkie te elementy z wyprzedzeniem, twórcy pokochają Cię. Są to rzeczy, o które programiści zmęczyli się, prosząc o samodzielne rozwiązywanie problemów.
Mimo to, wykonując całą tę pracę z wyprzedzeniem, uniemożliwiasz programistom zgadywanie, a tym samym kontrolujesz projekt. A dzięki zachowaniu kontroli nad projektem masz znacznie większą szansę na dodanie tego rodzaju polerowania, które zmienia zwykłą stronę w wyjątkową. Niektórzy projektanci nazywają to sekretnym sosem, który sprawia, że ich projekty śpiewają.
A jeśli to nie jest wystarczająca motywacja, rozważ to. Projektanci, którzy planują to dobrze i dostarczą kompletny pakiet, są po prostu bardziej wartościowi. Nie tylko tworzą produkt wyższej jakości, ale także zmniejszają koszty produkcji. Oznacza to, że jest więcej miejsca na zysk, co oczywiście sprawia, że wszyscy są szczęśliwi.
Pamiętaj więc o wszystkich tych drobniejszych szczegółach i baw się dobrze, planując swoją stronę. Szczerze mówiąc, te szczegóły stanowią połowiczną zabawę w projektowaniu internetu, stale zmieniającego się medium, które umożliwia interakcję z użytkownikiem i zmianę treści.
Patrick McNeil jest niezależnym pisarzem, programistą i projektantem. W szczególności uwielbia pisać o projektowaniu stron internetowych, szkolić ludzi w tworzeniu stron internetowych i budować strony internetowe. Najnowszy projekt Patricka to Podręcznik projektanta WWW ; zawiera wiele dodatkowych tematów podobnych do tego artykułu. Możesz dowiedzieć się więcej na ten temat TheWebDesignersIdeaBook.com . Śledź Patricka na Twitterze @designmeltdown .
Co projektujesz, aby wszyscy inni zapomnieli? Czy kiedykolwiek oferowałeś swoim klientom dodatki takie jak te? Jakie rzeczy uważasz, że programiści zawsze proszą o dodanie do projektu?