Genialne pomysły i trendy dla widocznych widżetów „Post Post”

Prowadzenie udanego magazynu internetowego wymaga solidnej publiczności i wielu wysokiej jakości pism. Ale układ magazynu odgrywa również kluczową rolę w zaangażowaniu odwiedzających. Jedną z technik jest stworzenie widżet polecanych postów na górze strony głównej. To prezentuje najnowsze popularne artykuły, aby idealnie przenieść czytelników na stronę.

W tym poście chciałbym omówić techniki projektowania, które można wykorzystać do utworzenia skutecznego widżetu polecanego postu. Chociaż ten widżet często działa najlepiej w układzie w stylu magazynu, można go również zastosować do mniejszych blogów lub dynamicznych witryn z treścią.

Kontrast typograficzny

Większość polecanych postów opiera się na miniaturach, aby zwrócić na siebie uwagę. Często ma to formę obrazu tła związanego z każdym nagłówkiem artykułu.

Ta technika wygląda fantastycznie, ale tak jest trudno zbudować zauważalny kontrast między typografią a dynamicznymi obrazami tła. Studiując inne czasopisma, możesz wybrać subtelne techniki, które pomogą poprawić czytelność.

The Next Web to duży magazyn internetowy z widocznym widżetem postów na stronie głównej. Każda miniaturka ma różny rozmiar, ale wszystkie są używane ciemne gradienty dla lepszego kontrastu.

Nagłówki artykułów są umieszczone na dole bloków miniatur na górze ciemnych gradientów. The lekki tekst można łatwo konsumować na ciemnym tle, jeszcze nie obejmuje całego obrazu.

Nowoczesne osiągnięcia w CSS3 pozwalają programistom na łatwe odtworzenie tych efektów. Naprawione gradienty są idealne, jeśli możesz je uzyskać płynąć naturalnie na każdej miniaturze i nadal pokaż wystarczająco dużo obrazu przyciągnąć uwagę.

Nieco inna technika jest używana na stronie głównej Digital Trends. Ten widżet posta używa jednolite tło o wysokim kontraście za tekstem, aby każdy nagłówek był wyraźny i żywy.

Różnica polega na tym, że każdy kolor tła jest w 100% stały. Nie możesz zobaczyć całego zdjęcia miniatur małe porcje są tracone z widoku. Ale tekst jest czytelny, co może być równie atrakcyjne dla odwiedzających pierwsze miejsce na stronie głównej Digital Trends.

Znalezienie odpowiedniej ilości kontrastu jest trudne. Niektóre strony internetowe, takie jak TechCrunch, próbują umieścić tekst obok miniatury, aby całkowicie usunąć ten problem.

Ale jeśli podoba Ci się styl projektowania tekstu nagłówka na górze miniatury, którą chcesz zastanów się, jak czynniki kontrastu wpływają na równanie.

Sporadyczne rozmiary obrazu

Wartość widżetu polecanego posta to treść funkcji na górze strony. Asymetria to świetny sposób na zwrócenie uwagi na coś, a w tym przypadku asymetryczne rozmiary miniatur działają świetnie.

Weźmy na przykład stronę główną ZDNet. W ich polecanym widgecie największy artykuł po lewej stronie wykorzystuje najszerszy obraz miniatury, aby zająć więcej miejsca i, miejmy nadzieję, przyciągnie więcej uwagi. Inne wyróżnione miniatury należą do mniejszych rozmiarów z mniejszymi nagłówkami.

Zwróć uwagę, jak ta struktura siatki naturalnie prowadzi oko wokół strony. Spojrzenie każdego gościa ma tendencję do opadania w jednym określonym obszarze, a następnie przemieszcza się między każdą miniaturą, aż coś wyskoczy.

Również ZDNet umieszcza ciemny gradient na szczycie każdej miniatury do budować kontrast typograficzny dla bardziej czytelnego tekstu. Zasadniczo jest to jeden z najlepszych projektów widżetów postowych, jakie kiedykolwiek widziałem.

Bardzo podobny styl projektowania można znaleźć na stronie głównej CNET. Największa miniatura zajmuje miejsce po lewej stronie, ponieważ większość odwiedzających czyta od lewej do prawej.

Podczas projektowania własnego widżetu z polecanymi postami nie czuj się zobowiązany do stosowania tej samej techniki. Możesz przejść z dowolnym rozmiarem miniatur, o ile pasują do siebie spójnie i tworzą jednolity układ siatki.

Niestandardowe style miniatur

Wybór projektu różni się znacznie w zależności od układu, więc nie ma jednego doskonałego rozwiązania. Wybrane widgety pocztowe są zdecydowanie bardziej skomplikowane w projektowaniu, więc wymagają opracowania i cierpliwości, aby dopasować je do niestandardowego układu.

Styl każdej miniatury wpływa na wygląd całego widżetu dla odbiorców. Weźmy na przykład opisywany styl widżetu znaleziony na The Verge.

Każda miniatura ma kolorowy gradient na górze zdjęcia. Zwiększa to kontrast i poprawia czytelność, ale także dodaje pewnej elegancji stronie.

Niektórzy ludzie nie lubią tego stylu, ponieważ uważają go za krzykliwy lub nieatrakcyjny. Ale jest też dość popularny wśród czytelników Verge, a inni projektanci naśladują ten styl.

Ale kolory i wymyślne techniki nie są jedynym czynnikiem do rozważenia. Siatki i rozmiary miniatur również muszą być starannie wybierane, ponieważ pomagają zdefiniować ogólny styl widżetu polecanych postów.

Być może jednym z najlepszych przykładów jest projekt Mashable, który przez wiele lat przeszedł wiele etapów. Obecnie uznawany za główne źródło wiadomości, Mashable działa, aby wcisnąć dużą liczbę postów na stronę główną, aby ułatwić przeglądanie.

Niektóre posty używają małych kwadratowych miniatur, podczas gdy ich główna tablica liderów umieszcza duży, miniaturowy baner miniatur w artykule. Musi to wymagać dodatkowej pracy od edytora, aby upewnić się, że wszystkie posty mają odpowiednie zdjęcia w odpowiednich rozmiarach.

Ale zaraz po wylądowaniu na stronie zauważysz, że to daje poczucie wiarygodności. Ten styl jest bardzo popularny i może być używany przez prawie każdy rodzaj magazynu internetowego, aby budować zaufanie dzięki czytnikowi. Jedynym problemem jest napisanie wystarczającej ilości treści, aby wypełnić stronę!

Widgety wielostronicowe

Niektóre polecane widgety pocztowe wyświetlają artykuły w siatka statyczna. Często jest to najpopularniejszy wybór, ponieważ może być wykonane responsywnie i ładnie się łączą w dowolny układ.

Inne widżety polegają na dynamicznych interakcjach, takich jak pokaz slajdów. Weźmy na przykład stronę główną Vanity Fair wraz z opisanym blokiem postów na górze strony. Jednocześnie wyświetlany jest tylko jeden post, ale nowe artykuły są wyświetlane po najechaniu kursorem na określony nagłówek.

Zarówno automatyczna aktualizacja miniatur, jak i tytułu z prostą interakcją najechania. Należy zauważyć, że może to być bardzo mylące dla użytkowników Internetu, którzy nie są zaznajomieni z tą dynamiczną techniką hover.

Ale z pozytywnej strony ta technika będzie oszczędzaj miejsce na stronie, ukrywając nadmiar treści.

Staraj się nie myśleć o polecanych widżetach pocztowych jako czarno-białych. Są to tylko sekcje strony używane do wyświetlania najciekawszych lub popularnych artykułów. Techniki, za pomocą których wykonujesz to zadanie, mogą być zawsze otwarte na debatę.

Magazyn złożony korzysta z pełnego pokazu slajdów dla ich polecanego widżetu. Każdy post ma wyróżnioną miniaturę wraz z dolnym gradientem dla kontrastu typograficznego.

Ale zamiast umieszczać każdą miniaturę obok siebie, artykuły strumień dynamicznie przez okno pokazu slajdów. Nawigację można ustawić automatycznie lub kontrolować za pomocą strzałek. Ten projekt pozwala zaoszczędzić dużo miejsca i sprawia, że ​​użytkownik chętniej wchodzi w interakcję ze stroną.

Zakończyć

Nie ma dobrego lub złego projektu, jeśli chodzi o prezentowane postów. Wszystkie mają wiele podobnych cech, ale każdy magazyn używa własnego stylu do organizowania polecanych treści.

Mam nadzieję, że ten post oferuje praktyczne wskazówki do wykorzystania podczas projektowania własnego widżetu polecanych postów. Jeśli kiedykolwiek poczujesz, że utknąłeś, poszukaj inspiracji w innych magazynach. Znajdź cechy, które ci się podobają i dowiedz się, jak je powielić, aby wtopić się we własny projekt magazynu.