Układy siatki w witrynach WordPress z portfolio: porady projektowe i przykłady

Najpopularniejszą strukturą dowolnej witryny z portfolio WordPress jest siatka. Pokazuje garść prac naraz, dzięki czemu widz może szybko zeskanować i wybrać wszystko, co przyciągnie jego wzrok.

Ale co składa się na mocny układ siatki dla portfela? A co należy wziąć pod uwagę, uruchamiając własną witrynę z portfolio?

W tym poście podzielę się kilkoma wskazówkami i poradami na temat najlepszych projektów układu siatki dla portfeli WordPress.

Projekty ciasnej siatki

Kiedy używasz siatki, dobrze jest, aby projekt był ciasny. W ten sposób elementy są blisko siebie, aby szybko przeglądać i zachęcać użytkowników do interakcji z treścią.

Struktura siatki zwykle różni się w zależności od rodzaju zawartości portfela. Może być konieczne zwiększenie lub zmniejszenie dopełnienia w zależności od zdjęć i układu. Na przykład grafika może wydawać się rozmyta, gdy znajduje się blisko siebie, więc cyfrowe portfolio sztuki korzysta z dodatkowej przestrzeni.

Ale projektant może trzymać się blisko siebie, ponieważ zrzuty ekranu są nadal łatwe do odczytania, nawet z dużej odległości. Możesz zobaczyć ładny przykład w motywie Ink dla WordPress.

Nie używa to absolutnie żadnego dopełnienia między dowolnymi elementami siatki. Te kwadratowe bloki przylegają ściśle do siebie, dzięki czemu użytkownik widzi wszystko naraz.

Wykorzystuje również mniejsze miniatury, dzięki czemu szybko przyciągają uwagę. Bardzo lubię ten styl i jest to mój osobisty faworyt, ponieważ pozostawia tak silne wrażenie. Zwróć uwagę, jak każde zdjęcie jest wyraźnie widoczne w zestawieniu ze wszystkimi innymi.

Jeśli masz pracę, która może skorzystać z tego stylu, spójrz na motyw Ink. To łatwy sposób na tworzenie tego typu siatek portfela bez kodowania od zera.

Ale jedną fajną alternatywą jest Bramble, która ma trochę więcej miejsca między każdym kawałkiem.

Ten motyw WordPress zawiera wiele układów portfolio, dzięki czemu możesz wybrać styl, który najbardziej Ci się podoba. Niektóre układy portfolio mają miniatury bliżej siebie, inne mają dużo dopełnienia między elementami w siatce.

Ale najważniejszą rzeczą do rozważenia jest paraliż analityczny. Dzieje się tak, gdy przedstawionych jest zbyt wiele wyborów, które mogą sprawić, że ktoś nie będzie w stanie wybrać żadnego z nich.

Dopóki Twoje wpisy w portfolio są wyjątkowe i mają wystarczająco dużo miejsca (lub brak miejsca), aby stać samodzielnie, uzyskasz mnóstwo kliknięć. I czy nie o to chodzi w portfolio?

Ruszty murowane

Niewiele osób wie o siatkach murowanych, ale istnieją już od dawna.

Zazwyczaj używają one JavaScript do układania elementów w siatkę w oparciu o różne wysokości w pionie. Zamiast więc dodawać miniatury z doskonałymi pikselami w tym samym rozmiarze, możesz dodać różne elementy portfolio o różnych rozmiarach i nadal je dopasować.

Motyw Weston WordPress ma tę funkcję na swojej minimalistycznej stronie portfolio fotografii. Jest to naturalnie skierowane do fotografów, którzy chcą umieścić swoją pracę w Internecie, a siatka murowana jest odpowiednią opcją do fotografii o zmiennej wysokości.

Każde zdjęcie w naturalny sposób trafia do siatki, zajmując odpowiednią ilość miejsca. Zwykle możesz dostosować dokładną liczbę kolumn i ich wysokość, ale pamiętaj, że będą one różnić się w zależności od rozmiaru urządzenia.

Jeśli lubisz układy pełnoekranowe, rzuć okiem na motyw Notio. Wykorzystuje projekt siatki murowanej z ciasnymi miniaturami i niestandardowymi efektami animacji.

Zwróć uwagę, że siatki z tych dwóch tematów również różnią się ciasnością. Jeden ma dodatkowe odstępy między obrazami, a drugi ma miniatury wyrównane ciasno względem siebie.

Układy siatki są zgodne z kilkoma trendami i możesz wybrać te, które najbardziej Ci się podobają.

Hover Szczegóły: tak czy nie?

Wiele portfeli zawiera szczegóły najechania kursorem, które pojawiają się nad miniaturą po najechaniu kursorem. Ten efekt zwykle nie przenosi się na urządzenia mobilne, ale jest to zdecydowanie powszechny trend w przypadku witryn z portfolio na komputery z dużymi miniaturami.

Każda miniatura powinna zawierać link do wewnętrznej strony elementu portfolio lub przynajmniej otwierać galerię obrazów związanych z tym elementem. Miniatury nie powinny stanowić całego portfolio.

Jednak dodanie szczegółów może zachęcić do większej liczby kliknięć i zachęcić ludzi do dalszego zagłębiania się w witrynę. Motyw Utwórz WordPress wykorzystuje niestandardowy efekt animacji podczas najeżdżania kursorem, aby zwrócić uwagę na szczegóły najechania kursorem.

Gdy kursor najedzie na dowolny element portfolio, znajdziesz dwie ważne ciekawostki:

• Nazwa/tytuł pozycji portfela
• Kategoria przedmiotu

Czasami te drobne szczegóły mogą radykalnie poprawić wrażenia użytkownika. Jeśli ktoś przegląda określone prace graficzne, może przeglądać je według kategorii i sprawdzać tytuły przed kliknięciem.

Ale innym razem te szczegóły mogą być niepotrzebnie gadatliwe i mogą zajmować zbyt dużo miejsca. Dlatego niektórzy projektanci pomijają te szczegóły, takie jak to, co znajdziesz w motywie WordPress Gather.

Po prostu zwykłe miniatury z prostymi efektami najechania. Przyjazne dla oczu, a wszystkie szczegóły znajdują się pod miniaturami, dzięki czemu nie zasłaniają obrazu.

Ten trend nie ma jasnej „poprawnej” odpowiedzi. Szczegóły najeżdżania działają świetnie dla niektórych, ale dla innych ta funkcja może być źródłem drobnej irytacji.

Znajdź to, co wygląda najlepiej w Twojej witrynie i oceń na podstawie własnego gustu. Ale niezależnie od tego, czy szczegóły pojawiają się po najechaniu na miniaturę, czy pod miniaturą, spróbuj dodać je gdzieś na stronie.

Uchwyć oczy dzięki fascynującym zdjęciom

Każdy układ siatki wykorzystuje miniatury, aby przyciągnąć uwagę. Te miniatury zazwyczaj sprzedają część Twojej pracy, zachęcając ludzi do klikania i czytania więcej.

Twoja praca może być sztuką cyfrową, projektowaniem stron internetowych, projektowaniem ikon, architekturą UX lub cokolwiek innego, co ma atrakcyjność wizualną. Ale chodzi o to, że do sprzedaży absolutnie potrzebujesz atrakcyjności wizualnej. A to wynika z przekonujących zdjęć.

Minimalistyczny motyw Mellow WordPress wykorzystuje różnorodne zdjęcia, z których każdy ma inny styl. To nie są „prawdziwe” zdjęcia projektu, ponieważ są to w większości symbole zastępcze. Ale dają jasny przykład sprzedaży odwiedzającego od pierwszego załadowania strony.

Proponuję przejrzeć inne strony z portfolio, aby zobaczyć, czego inni projektanci używają do swoich zdjęć w galerii.

Zobacz, co możesz wykorzystać na własnej stronie i jakie prace mogą przyciągnąć uwagę. Co najlepiej prezentuje Twoje umiejętności? Jaka część każdego projektu jest najbardziej atrakcyjna wizualnie lub pomaga sprzedać Twoją pracę innym?

Ponownie jest to bardzo otwarte pytanie, ale będziesz chciał wypróbować wiele różnych strategii. Zwykle uważam, że zbliżenia przykuwają dużo uwagi, zwłaszcza w formie miniatur. Możesz zobaczyć mieszankę tych przykładów z motywem Becketta na stronie portfolio.

W układzie siatki masz tylko tyle miejsca na każdy projekt. Niech ta przestrzeń się liczy!

Jeśli dokładnie wiesz, jak duże powinny być Twoje miniatury, masz już ogromną przewagę. Dzięki temu możesz przyciąć wiele różnych miniatur w Photoshopie, aby zobaczyć, które kompozycje najbardziej Ci odpowiadają dla elementów portfolio.

Posuwając się do przodu

Projekty siatek są dość proste i domyślnie towarzyszy im wiele motywów WordPress. Ale układ siatki nie da wiele bez spektakularnych prac projektowych do zaprezentowania.

Mam nadzieję, że ten post zawiera cenne wskazówki dla projektantów i twórców uruchamiających własne portfolio. Projekty siatek są najczęściej spotykane w portfolio, więc odwiedzający będą ich oczekiwać. Stosując te trendy (lub korzystając z tych motywów), możesz przyciągnąć więcej uwagi i z czasem przyciągnąć więcej pracy klienta.