Wstążki i znaczniki w projektowaniu stron internetowych
Tendencje mogą rodzić się tak cicho i subtelnie, że rzadko je zauważamy.
A kiedy przeglądasz setki stron internetowych, często widzisz wzorce, które inaczej byś przegapił. Jednym z takich wzorów jest częste używanie tagów i wstążek.
Te małe rozkwit stają się coraz bardziej popularne. W tym artykule omówiono dwa elementy, ponieważ są one często używane razem.
Chociaż wstążki są oczywiste, przez znaczniki mam na myśli fałszywe etykiety zwisające z górnej części ekranu, takie jak metka na koszulce.
Strony internetowe, które korzystają z tych elementów, są naprawdę wyjątkowe pod względem jakości. Zestawienie tej wspaniałej witryny okazało się niezwykle łatwe. Nieliczne trendy są takie: zwykle trzeba przebrnąć przez wiele ubogich przykładów, aby znaleźć te smaczne.
Po co używać tych wstążek i tagów?
Tagi są użyteczne, ponieważ przyciągają uwagę użytkownika, tworząc iluzję głębi. Przesyłają swoje treści do użytkownika. Tagi są również często stylizowane za pomocą dziurkacza, bez względu na to, czy są to efekty trójwymiarowe czy odważne, kontrastujące kolory.
Czynniki te sprawiają, że tag jest doskonałą lokalizacją dla ważnych informacji: logo, nawigacja, wezwania do działania. Widzimy to w poniższej prezentacji. Oczywiście, jak zawsze, oceń swoje potrzeby przed wdrożeniem tego elementu na własnej stronie internetowej.
Wstążka ma te same cechy, co w rzeczywistości jest powodem, dla którego ją znajdujemy, i tagu razem tak często: przyciąga uwagę i jest doskonałym miejscem na ważne informacje. Kształt wstążki odróżnia ją od tagu; dwie strzałki na jej końcach wydają się wskazywać na treść wewnątrz, delikatnie kierując uwagę użytkownika.
Rodzina stylów
Innym powodem, dla którego te dwa elementy są często spotykane na stronach internetowych, jest to, że są one zarówno cyfrowymi reprezentacjami tkanin. Nic dziwnego, że wiele z poniższych stron internetowych zawiera inne elementy związane z tkaniną, w tym subtelne szwy, faktury i inne elementy organiczne.
Wstążki
List Learner
Wstążka ładnie oprawia nazwę List Learner tutaj. Ponadto strona jest określona jako pojedyncza kolumna; wstęgowy tytuł zachęca użytkownika do rozpoczęcia podróży u góry i spływania stamtąd.
Ribot
Ribot Wstążka jest dość subtelna. Rozkwit ożywia stronę, a jednocześnie skupia uwagę firmy na dwuznakowym sloganie. Idealny sposób na ustawienie oczekiwań, ponieważ nazwa firmy nie mówi nam, co robi.
Alex Pierce
Z tak ogromnym tekstem na stronie głównej Alex Pierce Portfel ten wymagałby dość odważnego elementu, aby go zrównoważyć. W tym przypadku wstążka wykonuje dobrą robotę, ustawiając nagłówek. Uwielbiam też, jak złożona warstwa pośrodku wstążki podkreśla nazwę projektanta.
Rockaholic!
Na dość niezwykłe Rockaholic! wstążka kieruje uwagę użytkownika, ładnie grając w pionowy zwój strony i pomagając użytkownikowi zagłębiać się w treść.
Paris Jones
Pyszna czerwień wstążki tworzy nazwę zespołu Paris Jones wyskoczyć tutaj. Mimo że obróbka tekstu jest dość subtelna, pogrubiony wzór zapewnia, że je zauważysz.
Blog en Bois
Na Blog en Bois , efekt strzałki na wstążce jest szczególnie silny, głównie ze względu na kontrastującą ciemność za żółtym. Znów jestem przywiązany do logo. Jest to z pewnością potężny sposób na umocnienie marki w umyśle użytkownika.
Kaseta do płyty HTML5
Popularna strona internetowa Kaseta do płyty HTML5 używa wstążek, aby zwrócić uwagę na najważniejsze elementy akcji na stronie. Uwielbiam to, że wstążki wykonują swoją pracę bez konieczności mówienia "Pobierz tutaj." Połączenie wstążek i etykiet mówi nam, że jest to miejsce pobierania zasobów.
Ryby z frytkami i chipsami
Cel wstążki nie jest tak jednoznaczny Ryby z frytkami i chipsami . Szczegóły dotyczące "Otwarcia 7 dni w tygodniu" wydają się stosunkowo niewielkie, ale przypuszczalnie jest to ważne wyróżnienie dla tej restauracji.
Wells Riley
Wells Riley jest doskonałym przykładem wstążek w służbie estetyki. Wstążki świetnie tutaj wyglądają i stają się przedmiotem zainteresowania strony.
Dhiraj Singh Karki
Zawsze uwielbiam projekty, które odbiegają od konwencji. Portfolio projektanta interfejsu użytkownika Dhiraj Singh Karki to po prostu taka strona internetowa. Tutaj wstążka jest używana sprytnie i nie ma prawie takiego samego efektu wizualnego jak na innych stronach internetowych. Łączy się bezpośrednio z grafiką strony, a mimo to ma wystarczająco stylu, aby projekt wyglądał zbyt prosto.
Chipmunk
Chipmunk to doskonały przykład tego, jak dobrze wstążka może działać z elementami ekologicznymi. Wstążka wokół podstawowej nawigacji idealnie pasuje do bogatych ilustracji poniżej. Utrzymuje także nawigację przed zagubieniem się wśród potężnych dzieł sztuki.
Ryan M. Stryker
Po raz kolejny widzimy siłę wstążki, która skupia uwagę. Jego centralne położenie i odważny kontrast sprawiają, że nie można tego przegapić Ryan M. Stryker Imię.
Tagi
Ennea
Jeśli się uwzględni Ennea jest marką odzieżową, nic dziwnego, że tutaj tag zawiera logo i markę. Czasami najlepsze podejście działa najlepiej.
Philip Meissner Design
Tag zawiera główną nawigację Philip Meissner Design . Zwykle byłbym zniechęcony tą nietypową konfiguracją linków, ale aranżacja i kolory sprawiają, że linki są bardzo łatwe do znalezienia.
Tinkering Monkey
Co może być ważniejsze w witrynie e-commerce, a następnie zachęcić użytkowników do wypróbowania? Tinkering Monkey ma ładny, pogrubiony tag, który pomaga użytkownikom w sfinalizowaniu zakupu.
Parkbud
Dzięki wszystkim aplikacjom na smartfony, te dobre muszą komunikować swoje kluczowe wyróżniki. Parkbud jest bezpłatny, a pogrubiony czerwony znacznik zapewnia, że go znasz. Tag jest ładnie schowany na uboczu, ale zawsze widoczny z kącika oka, przypominając, że ta smaczna aplikacja jest darmowa.
Lense
Lense to doskonały przykład tagów połączonych z teksturami tkanin. Zauważ najpierw teksturowane denimowe tło; również wyprofilowana granica pod główną nawigacją jest bardzo zorientowana na tekstylia.
Coreymade
Chociaż jest to drobny szczegół, bardzo podoba mi się sposób, w jaki czcionka skryptu tworzy tag Coreymade czuję się bardziej jak tag na koszulce niż zwykłe logo strony. Efekt pseudo-3D sprawia, że znacznik naprawdę pojawia się w przeglądarce.
Netastica
Tag włączony Netastica jest głównie tam, aby wyglądać ładnie, chociaż nadal zawiera ważne informacje i linki odwiedzających do strony głównej.
Ryan Havoc Taylor
Tag znajduje się w tak widocznej lokalizacji Ryan Havoc Taylor Na stronie internetowej, która nie wymaga dużego kontrastu, aby się wyróżnić. Działa dobrze z przepływem strony internetowej i wykonuje swoją rolę bez wysiłku.
Wstążki i znaczniki
W końcowej części tej prezentacji przyjrzymy się witrynom wykorzystującym zarówno wstążki, jak i tagi.
ClearSpan Media
Wstążki i tagi ładnie się ze sobą układają, jak pokazano ClearSpan Media . Tutaj znajdziesz również tkaniny z wzorami, szwami i subtelnymi zmianami kolorów. Dwa znaczniki u góry i wstążka poniżej funkcjonują jako rodzaj kręgu zainteresowania użytkownika.
Krichevtsova Alexandra
Podczas Krichevtsova Alexandra Strona internetowa jest raczej bezbłędna w treści, tag i wstążka dodają życia kluczowym elementom. Możesz cieszyć się tą stroną internetową, nawet nie wiedząc, co ta osoba robi.
Wes Bos
Większość stron w tej kolekcji ma dość duże wstążki. Nie tak z Wes Bos . Jego są znacznie mniejsze, to dobry przypomnienie, że nie muszą dominować w projekcie, aby spełniać swoją funkcję.
Wniosek
Biorąc pod uwagę jakość stron internetowych w tej kolekcji, żaden z tych projektantów nie postanowił zbudować czegoś "modnego". Zamiast tego mieli do czynienia z zestawem potrzeb, a od tych potrzeb powstało skuteczne urządzenie wizualne do skupiania uwagi, przekazywania najważniejszych informacji. i podkreślając ważne działania.
Jeśli chcesz mieć ładne wstążki oparte na CSS dla twojej własnej strony internetowej, opartej na sieci Generator wstęg 3-D to poręczne narzędzie do pracy.