10 zasad projektowania stron internetowych, które możesz złamać
Ponieważ projektowanie stron internetowych i projektowanie ogólnie uległy zmianie, ustanowiono zasady w celu zapewnienia spójnych i użytecznych projektów.
Niektóre z tych zasad zostały stworzone po prostu dlatego, że twórcy witryn nadużyli pewnych zasad bez względu na swoich użytkowników.
Ale te zasady nie są egzekwowane przez nikogo i powinny być łamane w razie potrzeby, szczególnie gdy ich łamanie doprowadziłoby do oszałamiającego projektu.
W tym artykule przedstawiamy 10 reguł, które możesz złamać, jeśli odpowiadają Twoim potrzebom projektowym.
Zasada nr 1: Nie wyświetlaj poziomego paska przewijania
Znaczna liczba myszy nie ma poziomego kółka myszy. Sprawia to, że przewijanie w lewo lub w prawo powoduje, że zawartość strony internetowej rozciąga się poza boki przeglądarki.
Może być denerwujące, że musisz przesunąć kursor myszy w dół do dolnej części okna i przeciągnąć pasek przewijania, aby zobaczyć słowo lub dwa, które leży poza widocznym obszarem strony. To powiedziawszy, oto kilka dobrze zaprojektowanych witryn, dzięki którym pasek przewijania działa w efektywny sposób.
Benek
Benek używa JavaScript do zmiany kierunku przewijania kółka myszy z pionowego na poziomy. Każda pozycja w portfelu Benka jest podzielona na osobną kolumnę. Strona ma zaskakująco świeże wrażenie i płynnie przepływa.
Guru butów
Guru butów ucieka z przewijaniem w poziomie, ponieważ wykorzystuje sposób, w jaki ludzie patrzą na buty. Ludzie patrzą na większość produktów od góry do dołu, ale buty są inne. Oczy ludzi zwykle poruszają się po całej długości buta. Wykorzystując ten nawyk na swoją korzyść, Shoe Guru sprawia, że projekt strony internetowej przepływa w tym samym kierunku, dzięki czemu ruch wydaje się naturalny.
Stephane Tartelin
Stephane Tartelin używa poziomego paska przewijania, aby jego grafika wyglądała jak w galerii sztuki. Chociaż pionowe kółko myszy nie działa tak, jak w powyższych przykładach, efekt działa zaskakująco dobrze. Można nawet argumentować, że efekt byłby mniejszy, gdyby kółko myszki zostało ponownie zakodowane w celu przewijania w poziomie.
Terapia graficzna
Podczas Terapia graficzna nie wyświetla poziomego paska przewijania na swojej stronie, nadal umożliwia przewijanie w poziomie, klikając i przeciągając po ekranie. Teoria graficzna używa nawigacji poziomej, ponieważ wszystkie jej obrazy mają tę samą wysokość, ale nie tę samą szerokość. Pozioma nawigacja ułatwia płynny przepływ witryny.
Horyzontalny sposób
Horyzontalny sposób jest wizytówką stron internetowych, które korzystają z przewijania w poziomie. Grungy grafiki są piękne, a ta strona jest wyjątkowa, jeśli chodzi o galerie CSS.
Zasada # 2: Użyj minimalnej liczby twarzy czcionki
Zbyt wiele czcionek zwykle kłóci się ze sobą i przytłacza widza. Każda czcionka ma osobowość, a zbyt wiele osobowości może wywołać zaburzenie.
Aby efektywnie używać więcej niż tylko kilku czcionek, projekt musi być bardzo tekstowy, a reszta projektu musi być stosunkowo cicha. Oto kilka przykładów witryn, które wykorzystują to poczucie konfliktu i zaburzenia, aby zaangażować użytkownika.
Linki LA
Linki LA używa wielu czcionek w nieliniowym układzie, aby stworzyć poczucie energii. Strona jest trudna do szybkiego odczytania, ale przyciąga użytkownika. Warto również zauważyć, że żadna z czcionek nie jest zbyt dekoracyjna; każde słowo jest czytelne, dzięki czemu projekt jest wyraźny i czysty.
Geo Elements Design Studio
Używanie różnych czcionek zwykle wywołuje poczucie energii i chaosu, ale Geo Elements Design Studio Strona internetowa jest bardzo otwarta i czysta. Każda czcionka ma swoją własną przestrzeń, dzięki czemu przeglądarka nie kojarzy jej z inną czcionką. Obraz nieba w tle pomaga wzmocnić poczucie otwartości.
Richard Stelmach
W przeciwieństwie do ostatniego przykładu, Richard Stelmach popycha jego różne czcionki blisko siebie. Projekt działa, ponieważ tylko jedna czcionka nie wygląda ręcznie, a dwie pozostałe dobrze pasują do ilustracji. Czcionki rysowane ręcznie zwykle działają dobrze razem, nawet jeśli istnieje wiele różnych czcionek.
Satsu
Satsu Wydaje się, że ma wiele różnych czcionek, ale w rzeczywistości ma tylko trzy (nie licząc portfela Sports Council). Starannie rozdzielając wszystko, Satsu łączy ze sobą pewne wiersze tekstu, nawet jeśli tekst może być w różnych czcionkach.
Tytuł logo znajduje się w jednej czcionce, a każda z dwóch podtytułów ma własną czcionkę, ale przeglądarka w naturalny sposób grupuje te trzy elementy tekstowe. Satsu potrafi tworzyć energię bez przytłaczania strony osobowościami.
Zasada # 3: Nie używaj zbyt wielu kolorów
Strach przed pójściem za daleko z projektem jest tym, co odróżnia profesjonalistów od nowicjuszy i rekrutów od niepamiętnych. Nieświadome próby uczynienia ich projektów tak ekstremalnymi, jak tylko to możliwe, z płonącymi słowami, migającym tekstem i jak największymi kolorami.
Rookies chcą, aby ich projekty były subtelne i łatwe dla oka, ale w końcu ich projekty mogą czasami wyglądać na bez życia. Poniższe przyjemne dla oka projekty są autorstwa prawdziwych profesjonalistów, którzy przekraczają granice.
Matt Mullenweg
Matt Mullenweg's pięknie kolorowy wzór wygląda jak akwarela (strona została zaktualizowana od czasu napisania tego artykułu). Wszystkie kolory w tle przyciągałyby uwagę każdego.
Generalnie, dobre projekty z toną kolorów będą miały te kolory w tle, z prostszą paletą z przodu. Czytanie tekstu jest bardzo trudne, gdy dzieje się zbyt wiele rzeczy.
Travic Isaacs
Travis Isaacs projekt ma kolorowy pionowy gradient w tle, który sprawia, że projekt wydaje się kolorowy w całym tekście. Ta strona ma jasny różowy kolor połączenia, który jest doskonałym wyborem dla projektantów, którzy chcą stworzyć kolorowy efekt.
James De Angelis
James De Angelis strona internetowa pokazuje, że tekst może być kolorowy, bez patrzenia jak na początkującego. Projekt jest bardzo oszczędny, a slogan z pewnością znajduje się w centrum uwagi.
Zasada nr 4: Spraw, by cel Twojej witryny był oczywisty
Coś, co naprawdę wkurza młodych projektantów, polega na tym, że projekt powinien natychmiast powiedzieć widzom, na co patrzą, zanim przeczytają dowolny tekst.
Rozpoznawanie marki jest ważne dla dużych korporacji, ale czasami mniejsi faceci muszą być nieco bardziej sprytni, aby przyciągnąć uwagę widza. Zatrzymywanie informacji może zaintrygować widza i "podrażnić" ludzi pragnących dowiedzieć się więcej.
Zastosowanie tej techniki do projektowania stron internetowych może znacznie wydłużyć czas pozostawania użytkowników w witrynie.
Cetrotrees
W większości portfolio freelancer lub firma zazwyczaj przedstawia się i tłumaczy swoją pracę. Cerotreees zamiast tego umieszcza trochę niejasno oznakowanych linków po lewej stronie i przykłady jego pracy po prawej, ale nic nie wyjaśnia idei ani osoby stojącej za nią.
Atmosfera tajemnicy otaczająca witrynę zachęca użytkownika do pozostania.
Ostatnia mixtape
Ostatnia mixtape to kolejne portfolio, które pokazuje swoją pracę i nic więcej. Takie projekty emanują poczuciem niezwykłej pewności siebie. Nigdy nie próbują się sprzedać; oni po prostu oczekują, że użytkownik zostanie zdmuchnięty i żebrze o kontrakt.
Peter Pearson
Używanie ekranu powitalnego to dobry sposób na spowolnienie procesu myślowego użytkownika i zainspirowanie go do głębszego kopania. Celem strony powitalnej jest zazwyczaj szybkie wyjaśnienie strony zdjęciami lub krótkim tekstem.
Ale w Piotra Pearsona przypadku, jego celem jest wywołanie uczucia. Wielkie niebo i efekt splattered text świetnie sobie radzą z przywołaniem ciekawości, ponieważ te rzeczy zwykle nie pojawiają się razem. Witryna ta świetnie sprawdza się również w kontynuowaniu emocji tworzonych przez stronę powitalną w rzeczywistej treści.
Ruch po bocznym przewijaniu i animowane linie, które podążają za użytkownikiem, są naprawdę skuteczne.
Piepmatzel
Doskonałym sposobem na obejście bariery językowej jest niewykorzystywanie żadnych słów. Piepmatzel jest galerią CSS, a osoby, które wcześniej widziały galerię CSS, prawdopodobnie rozpoznają ją jako jedną od razu.
Ci, którzy tego nie zrobili, mogą być zaintrygowani, aby dać kilka miniaturek kliknięciem w nadziei na ustalenie wzoru. Niewielka ilość tekstu na dole strony pomaga w sortowaniu i jest zbędna.
Zasada # 5: Nawigacja powinna być łatwa do wymyślenia
Nawigacja nie powinna być wąskim gardłem witryny. Użytkownicy powinni być w stanie szybko znaleźć to, czego chcą. Czasami jednak nieintuicyjna, ale angażująca nawigacja może pomóc użytkownikowi poczuć się połączonym z witryną i jej promocją.
Alvin Tang
Jak wspomniano w poprzedniej sekcji, pewność siebie jest przekazywana, gdy portfel się nie wyraża. Tak jest w przypadku Alvin Tang portfolio fotograficzne. Przy pierwszym wejściu na stronę użytkownik nie od razu rozpoznaje słowa, które widzą jako łącza.
Ta niepewność powinna skłonić ich do trochę tratowania. Przesuwanie wskaźnika myszy nad danym słowem wskazuje, że rzeczywiście jest to łącze, a po kliknięciu ładuje się wspaniałe zdjęcie. Zdjęcie zachęci użytkowników do kontynuowania przeglądania.
Aby zobaczyć więcej zdjęć, użytkownicy muszą kliknąć przycisk "Wstecz" w przeglądarce (co większość ludzi rozumie), a następnie kliknąć inny link. W projekcie nie ma ręki i działa ona bardzo dobrze. Nie jest to konwencjonalnie "wspaniały projekt", ale zapewnia dokładnie to, czego potrzebuje.
Kasulo
Kasulo „s Nawigacja nie jest trudna do wykrycia, ale przeciętny użytkownik może nie wiedzieć dokładnie, co zrobić po przybyciu na stronę. Jednak po pierwszym kliknięciu wszystko staje się oczywiste.
Użytkownik porusza się po elementach portfolio w trójwymiarowym stylu, a najnowsze elementy pojawiają się najbliżej początku. Korzystanie z kółka myszy jest jeszcze przyjemniejsze.
Marcio Kogan
Marcio Kogana strona jest kolejnym przykładem świetnej nawigacji, która nie jest od razu oczywista. Polecenie "Przeciągnij mnie" jest trudne do oparcia się, a gdy użytkownik to zrobi, są już w drodze do przeglądania przedmiotów portfolio. Podgląd na myszy to mały detal, ale naprawdę imponujący.
Ceranco
Gdyby klient poprosił projektanta o stworzenie swojej strony w 3D, tak jak w przypadku gry wideo z perspektywy pierwszej osoby, większość projektantów śmiałaby się do siebie, wzięła głęboki oddech, a następnie powoli wyjaśniła, dlaczego to byłby zły pomysł. .
Podczas gdy strona internetowa dla Ceranco nie jest to właściwie strzelanka 3D, można ją łatwo pomylić z jakąś niezależną grą komputerową. Witryny takie jak ta są świetne w angażowaniu użytkowników. Podczas gdy długi czas ładowania i słaba optymalizacja pod kątem wyszukiwarek sprawiają, że jest to mniej niż idealne rozwiązanie dla większości projektów, zdecydowanie warto się zastanowić.
Zasada # 6: Używaj różnych kolorów dla tekstu i tła
Ta reguła prawdopodobnie nie jest napisana w każdym miejscu, ale wielu początkujących tak bardzo obawia się, że tekst będzie nieczytelny, ponieważ nie będą używać tego samego podstawowego koloru zarówno dla tła, jak i samej czcionki. Możesz zastosować kilka prostych technik, aby podobne kolory działały.
Linksys
The Linksys Witryna jest schludna ze względu na to, jak ma jeden niebieski dla wszystkich swoich linków, mimo że kolor tła ma różne odcienie niebieskiego. Chociaż ryzyko, a może i nie największa decyzja w kwestii koloru, działa.
Brad Colbow
Brad Colbow Projekt jest podobny do Linksysa z powodu niebieskiego tekstu na niebieskim tle. Niebieski na niebieskim jest trudny do ściągnięcia, szczególnie przy tak wielu różnych kolorach w całym serwisie.
Zestaw zasilający
Jak dotąd w tej sekcji widzieliśmy tylko niebieskie strony internetowe, ponieważ niebieski tekst jest najtrudniejszy dla ludzkiego oka, a czytelny niebieski typ zawsze robi wrażenie. Jeśli efekt tekstowy działa na niebiesko, najprawdopodobniej zadziała w dowolnym kolorze.
Zestaw zasilający używa czcionki typograficznej dla swojej czcionki, aby utworzyć efekt trójwymiarowy, który skutecznie oddziela tekst od tła.
Artist In Design
Artist In Design nie tylko ma zielony tekst na zielonym tle i żółty / beżowy tekst na żółtym tle, ale ma tekst bezpośrednio na górze zdjęcia.
Chociaż niektóre pojedyncze litery mogą być trudne do odczytania, słowa jako całość pozostają czytelne. Ten rodzaj efektu powinien prawie zawsze być centralnym etapem projektu.
Horacio Bella
Horacio Bella używa innego efektu trójwymiarowego w swoim portfolio. W tym przypadku litery wydają się wyskakiwać, a nie być wgrywane do środka. Bez tego efektu czytelność zostałaby znacznie zmniejszona. Innym dobrym efektem jest tu ścisłe kerning liter, co dodatkowo poprawia czytelność.
Zasada # 7: Nie umieszczaj animacji na swojej treści
Poważnie, nie wyświetlaj małych reklam Flash dokładnie tam, gdzie czyta użytkownik. To samo dotyczy tych pól ankiet, które pojawiają się, gdy użytkownik znajduje się w środku zdania. Użytkownicy nie lubią rozpraszać się, gdy są w połowie zdania. Chyba że…
Naprawdę trudno nie być zachwyconym przez małego pająka ABA strona. Projekt jest czysty i chociaż pająk jest rozproszony, jest w porządku. Do tej pory ta witryna jest chyba jedynym wyjątkiem od reguły.
Zasada nr 8: Trzymaj się bezpiecznych czcionek internetowych
Chociaż techniki wymiany twarzy czcionek są wciąż młode, już teraz robią wielki plusk. sIFR był pierwszy i niedawno Cufón i Typefasce.js pojawiły się.
Diseñorama
Na Diseñorama stronę internetową, można wybrać czerwony tekst "Recientemente". Jedną wadą jest to, że jeśli witryna nie zostanie załadowana natychmiast, użytkownik zobaczy krótko oryginalną zwykłą czcionkę.
Kolejną wadą jest to, że jeśli użytkownik ma wyłączoną obsługę JavaScript lub Flash, zobaczyłby tylko oryginalną czcionkę. Biorąc wszystko pod uwagę, wciąż jest całkiem fajnie. Mam nadzieję, że jest to zapowiedź tego, co ma nadejść w ciągu najbliższych kilku lat.
Cactuslab
Cactuslab używa również sIFR dla niebieskich pod-nagłówków (takich jak "Praca zimowa"). Chociaż sIFR jest najbardziej skomplikowaną techniką wymiany czcionek, tekst można kopiować i wklejać, co daje mu dużą przewagę nad dwiema innymi technikami.
Zasada # 9: Nie ma strony powitania / lądowania
Wielu projektantów rozmawiało ze swoimi klientami o tym, dlaczego strona powitalna nie jest dobrym pomysłem. Google ma tendencję do pozycjonowania takich stron na niższym poziomie i spowalnia to, że użytkownik nie otrzymuje żądanej zawartości. Ale mogą być niezwykle piękne i inspirujące, jeśli zrobi się to dobrze.
Postprodukcja połysku
Cel próbki portfela, która pojawia się na stronie powitalnej Postprodukcja połysku Strona internetowa ma wywołać emocjonalną reakcję ze strony użytkownika.
Przy każdej wizycie ładowane jest losowe zdjęcie z portfolio. Kliknięcie zdjęcia powoduje jego skalowanie i umieszczenie go na miejscu wśród innych elementów portfolio na stronie. Efekt skalowania i ruchu zapewnia kontynuację i pomaga przenieść emocje użytkownika do reszty pracy firmy.
Issa London
Gdy witryna jest całkowicie wykonana we Flashu, pasek ładowania może służyć jako strona powitalna. Gdy użytkownik zobaczy pasek ładowania, zamknie stronę i pójdzie gdzieś indziej lub przełączy się na inną kartę i przejrzy w innym miejscu, gdy będą czekać.
Po załadowaniu strony najlepiej poczekać na powrót użytkownika przed uruchomieniem. W Issa London W tym przypadku bramka jest idealną metaforą mówiącą, że strona jest gotowa i użytkownik może wejść.
Kiedy użytkownik kliknie na bramę, brama otwiera się i pojawiają się różne ilustrowane modele. Korzystanie z bramy na stronie powitalnej jest świetnym pomysłem na projekt, ponieważ po wejściu użytkownik czuje się zaangażowany.
Zasada # 10: Nie używaj tabel
Każdy projektant stron internetowych, który używa tabel w swoich projektach, natychmiast zostanie nazwany debiutantem przez doświadczonych projektantów. Tabele nie wyświetlają się we wszystkich przeglądarkach i mogą sprawić, że kod źródłowy będzie wyglądał nieładnie, ale przynajmniej będziesz wiedział, co robisz z nimi. Oto kilka przykładów projektów, które zawierają tabele.
Ten stolik jest nieco trudny do zobaczenia, ale jest schowany między dwoma krzesłami. Jest to miły mały stolik boczny, ale niestety nie przyczynia się zbytnio do projektu tej witryny.
Tabele są w tle tego projektu włączone Pracuj w Play , ale trzymają laptopy pracowników i inne przedmioty w zasięgu ręki. Bez tych tabel pokój byłby bardziej pusty, a tło nie miałoby takiego samego efektu.
Chociaż ten projekt obejmuje głównie krzesła, w prawym górnym rogu miniatury pojawia się ładny mały stolik. Wygląda na to, że siedzi na nim garnek.
Jeśli chodzi o projekty z tabelami, jest to jeden z najlepszych. Dzięki dwóm tabelom opisanym w tej animacji Flash, projekt daje im dużo uwagi. Ta strona powinna znajdować się na liście najlepszych projektów projektantów korzystających z tabel.
Łamać zasady!
Łamanie reguł jest w porządku, gdy projekt tego wymaga. Wiele spośród opisanych tutaj rozwiązań konstrukcyjnych nie byłoby uwzględnionych przez przeciętnego projektanta. To właśnie wyróżnia wielkich projektantów od przeciętnych.
Ci, którzy odważnie walczą z tym, czego ich nauczono, zawsze się wyróżniają.
Napisany wyłącznie dla WDD bt Eli Penner. Prowadzi własną stronę internetową pod adresem SleepyHero.com
Czy łamiesz jakieś zasady w swoich projektach internetowych? Dlaczego lub dlaczego nie? Podziel się z nami swoimi opiniami ...