Są chwile, kiedy trzeba zaprojektować coś w pośpiechu – a projektantów nigdzie nie można znaleźć. W takich czasach nie możemy siedzieć i płakać – musimy zhakować design.

Oto kilka wygodnych wskazówek dotyczących projektowania WordPress, które stworzą każdego programistę do sukcesu, nawet jeśli w zasięgu wzroku jest naglący termin.

Mądrze Wybierz Konfigurację

Jeśli się spieszysz, znajdź motyw WordPress z wstępnie zaprojektowanym układem i stronami demonstracyjnymi. Użyj wizualnych kreatorów, takich jak Elementor lub Beaver Builder, aby szybko zorganizować i wystylizować układ oraz dodać wcześniej istniejące elementy. W ten sposób możesz uruchomić funkcjonalną witrynę w ciągu kilku godzin. Tak, może to wyglądać trochę ogólnie, jeśli nie jesteś ostrożny, ale działa. Rozważ dodanie niestandardowego projektu i animacji, aby uczynić go własnym.

Bądź subtelny

Jest to prawdopodobnie jedna z najważniejszych wskazówek, które każdy może Ci dać.

Projektanci, którzy mają oko do estetyki i designu, mogą zwariować od czasu do czasu. Jeśli jednak nie urodziłeś się z wrodzoną zdolnością nazwania 6 wersji koloru niebieskiego, bezpieczniej jest pozostać subtelnym. Spróbuj minimalistyczny design z odrobiną kolorowych akcentów i kilkoma subtelnymi animacjami tu lub tam.

Przykłady świetnego minimalistycznego designu

Aby minimalistyczny styl działał, powinieneś włożyć dodatkowy wysiłek w szczegóły. Na szczęście dla Ciebie, Szczegóły, o których mówię, mogą być stylizowane za pomocą czegoś, co jesteś najbardziej zaznajomiony – kodu.

Nie używaj Photoshopa lub Illustratora, jeśli wiesz, że nie jesteś w tym dobry

Używam Photoshopa aktywnie od ponad 10 lat i wciąż ledwo dostałem ” C ” W teście Upwork Photoshop. Wyobraź sobie moje zdziwienie, gdy dowiedziałem się, że aktywnie korzystam tylko z 30% funkcji Photoshopa. To samo dotyczy sztucznej inteligencji. Co chcę powiedzieć – jeśli jesteś dobry w kodzie i CSS-użyj CSS. Zaoszczędzi ci to dużo czasu.

Korzystaj z aplikacji i narzędzi, z którymi czujesz się komfortowo. To pomoże Ci projektować szybciej i wydajniej. Niektórzy uważają, że Canva jest naprawdę prostym i intuicyjnym rozwiązaniem.

Ucz się Sass lub mniej

Sass i Less to języki rozszerzeń CSS. Dodają dodatkowe przydatne funkcje i funkcjonalności do CSS, takie jak zmienne, funkcje, zagnieżdżanie, operacje arytmetyczne i mixiny. Sprawdź ich oficjalne strony internetowe, aby uzyskać szczegółowe informacje i dokumentację.

https://sass-lang.com/

http://lesscss.org/

Wiem, że nie zrobisz tego za kilka dni, ale warto rozważyć to na przyszłość. Gdy nauczysz się jednego z tych rozszerzeń językowych, drastycznie poprawisz i przyspieszysz przepływ pracy.

Dostosuj Kod innych osób do swoich potrzeb

Istnieje wiele niesamowitych ludzi, którzy dzielą się swoim kodem za darmo. Jeśli jesteś w kryzysie czasowym, dostosowanie istniejącego projektu może być odpowiedzią na twoje modlitwy. Moje miejsce to wzorce projektowe na Codepen. Znajdziesz wstępnie zakodowane przyciski, akordeony, suwaki, układy i wiele więcej.

W miarę możliwości używaj obrazów SVG

Obrazy SVG są skalowalną grafiką wektorową. Użyj ich do logo, ikon i innych obrazów graficznych na swojej stronie. Nie stracą jakości nawet przy powiększeniu.

Strzeż się pełnej mocy SVG:

  • Obrazy SVG można tworzyć i edytować za pomocą dowolnego edytora tekstu
  • Obrazy SVG można przeszukiwać, indeksować, tworzyć skrypty i kompresować
  • Obrazy SVG są skalowalne
  • Obrazy SVG mogą być drukowane w wysokiej jakości w dowolnej rozdzielczości
  • Obrazy SVG można powiększać
  • Grafika SVG nie traci żadnej jakości, jeśli jest powiększona lub zmieniona
  • SVG jest otwartym standardem
  • Pliki SVG to czysty XML

Użyj bibliotek i frameworków Javascript

Mam szczerą nadzieję, że nie jesteś jednym z tych programistów WordPress nadal używających wyłącznie PHP. JavaScript jest językiem programowania tej epoki i nie bez powodu.

Jednym z powodów, dla których JavaScript jest tak popularny, jest to, że ma dużą liczbę bibliotek, frameworków i rozszerzeń open source. Korzystanie z tych bezpłatnych zasobów sprawi, że będziesz pracować szybciej, lepiej i wydajniej.

Chcesz wiedzieć, jak dodać biblioteki do WordPressa we właściwy sposób? Na szczęście mamy coś dla Ciebie-tutorial, Jak zapytać JavaScript w WordPress.

Oto lista bibliotek js innych firm, które są już zawarte w WordPress. Możesz z nich korzystać od razu bez pytania.

  • Kręgosłup.js
  • CodeMirror
  • cropper
  • jQuery
  • jQuery.imageareaselect
  • jQuery.Jcrop
  • jQueryUI
  • swfupload (przestarzały)
  • ThickBox
  • TinyMCE

Wybierz 2 kolory

Wybierz kolor podstawowy i dodatkowy, które dobrze ze sobą współgrają. Użyj aplikacji, takich jak paleta materiałów i kalkulator kolorów, aby pomóc ci w tym zadaniu. Używaj kolorów podstawowych i drugorzędnych konsekwentnie na wszystkich elementach, które chcesz mieć plusk koloru.  W przypadku tła układu i tekstu Dodaj neutralne kolory do swojej palety. Nie dodawaj zbyt wielu kolorów do mieszanki. Minimalizuj to.

Wybierz 2 kroje pisma

Wybierz dwie komplementarne rodziny czcionek, których będziesz używać w swojej witrynie. Bezszeryfowe są lepsze dla nagłówków i nagłówków, podczas gdy czcionki serif są lepsze dla treści tekstowych. Więcej o wyborze kroju pisma i palecie kolorów pisałem w poprzednim poście.

Przepraszam, że ci to mówię, ale projektowanie logo nie jest czymś, co powinieneś robić sam. Logo to najważniejszy element wizualny każdej firmy. To identyfikacja wizualna Twojej firmy i chciałbyś, aby była wykonana prawidłowo. Powstrzymaj się od używania ogólnych twórców logo i zapłać projektantowi. Wynajmij freelancera, jeśli musisz. Jeśli chodzi o pieniądze, spróbuj znaleźć studenta, który jest pełen świeżych pomysłów, ale prawdopodobnie będzie pobierał znacznie mniej.

Wybierz dobrej jakości zdjęcia i filmy

Twój Klient nie dostarczył ci zdjęć do strony? A może tak, ale były nieostre, pikselowane i po prostu straszne, prawda?

Wszyscy przez to przechodziliśmy. Najprostszym rozwiązaniem jest użycie wysokiej jakości obrazów stockowych. Istnieje wiele darmowych i premium bibliotek do wyboru.

Moim ulubionym jest Unsplash dla darmowych zdjęć i Freepik dla wszelkiego rodzaju zasobów.

2 najpopularniejsze i prawdopodobnie największe darmowe biblioteki zdjęć stockowych to https://www.pexels.com / i https://stocksnap.io/

Wiele zdjęć stockowych na tych stronach jest używanych jako zawartość demonstracyjna w motywach WordPress. Unikaj używania zdjęć, które widziałeś, ponieważ Twoja witryna będzie wyglądać ogólnie. Jeśli szukasz czegoś konkretnego i mniej “zużytego” to polecam takie strony jak https://www.reshot.com / który własnoręcznie wybrał nie krępujące się zdjęcia. Inną opcją jest https://nos.twnsnd.co / który zawiera stare zdjęcia z archiwów publicznych i może być używany bez żadnych ograniczeń praw autorskich.

W przypadku zdjęć i filmów premium pierwsze kroki powinny być następujące: https://www.shutterstock.com / i https://www.gettyimages.com/

Ta niemiecka strona jest również warta sprawdzenia: https://www.photocase.com

Nie bądź tani, gdy szukasz nienagannych zapasów. Jeśli znajdziesz idealny obraz lub wideo premium – zapłać za to. Będzie warto.

Możesz użyć filtrów obrazów CSS, aby jeszcze bardziej poprawić swoje zdjęcia stockowe i witrynę WordPress.

Optymalizacja obrazów

Nie zapomnij zoptymalizować obrazów dla sieci. Po pobraniu zdjęcia stockowego przeskaluj je do rozmiaru, którego będziesz używać, przed przesłaniem do WordPress. Do dalszego smushingu i optymalizacji polecam wtyczkę Smush.

Jeśli używasz Photoshopa lub podobnych narzędzi do poprawiania zdjęć, upewnij się, że używasz Save for web opcja. Zapisz zdjęcia i obrazy z wieloma kolorami .pliki jpg i zapis grafiki w formacie png. Podczas zapisywania w Internecie masz możliwość wyboru jakości pliku jpg i png. Nie ma w tym żadnej prawdziwej Zasady – Użyj ekranu podglądu i upewnij się, że nie zniszczyłeś całkowicie jakości obrazu przed jego zapisaniem.

Mieć jasne CTA

Call to actions (CTA) to twój sposób na interakcję z użytkownikiem. W pewnym sensie, jeśli użytkownicy klikną na CTA, spełniają cel strony internetowej.

Dlatego musisz upewnić się, że przyciski CTA są wyraźnie widoczne, czytelne i czytelne. Bądź spójny ze stylizacją przycisków.

Gdzie umieścić CTA? Marketerzy mają do tego całą naukową metodę. Oczywiście zależy to od treści Twojej witryny, moją jedyną radą jest, aby się wyróżniała.

Nie zapomnij o swoich mobilnych użytkownikach. Te same zasady CTA nie dotyczą urządzeń mobilnych i komputerów stacjonarnych. Sprawdź najlepsze praktyki dotyczące mobilnego CTA.

Animacje są fajne, gdy są prawidłowo wykonane

Tworzenie prostych animacji CSS lub JavaScript może naprawdę podnieść twój projekt i sprawić, że będzie wyglądał dopracowany i profesjonalny. Sekret polega na tym, aby być subtelnym i nie przesadzać.

Dobre przykłady:

https://www.monogranofelicetti.it/en/

https://affinity.pt/en/about/

Przykład “najgorszej rzeczy, jaką możesz zrobić”:

https://www.lingscars.com/

Ikony-mali gracze z dużymi rolami

Ikony są niezwykle ważną częścią twojej witryny, zwłaszcza jeśli posłuchałeś mojej rady i wybrałeś minimalistyczny design. Eleganckie ikony mogą skutecznie podnieść cały projekt strony internetowej.

Jako programista powinieneś mieć świadomość, że tworzenie dobrych ikon jest dość trudne. Nawet nie myśl o zrobieniu tego od zera. Znajdź kilka darmowych ikon w bibliotekach ikon, takich jak https://www.flaticon.com / lub https://icons8.com/

Wolę flaticon, ponieważ można znaleźć pakiety ikon od tego samego autora. Znajdź jeden pakiet ikon pasujący do Twojego logo lub stylu witryny, a zaoszczędzisz mnóstwo kłopotów. Nigdy nie mieszaj ikon z różnych paczek – będzie to wyglądać nieprofesjonalnie.

Aby uzyskać dodatkowe punkty stylu, rozważ animowanie ikon SVG. Najlepszym sposobem na to jest Snap, biblioteka javascript stworzona do animowania grafiki SVG. Jeśli z jakiegoś powodu nie chcesz w ogóle kodować, możesz skorzystać z aplikacji SVGator. Jest to płatna aplikacja z miesięcznym bezpłatnym okresem próbnym i warto ją sprawdzić.

Diabeł tkwi w szczegółach:

Aby minimalistyczny styl dobrze wyglądał, musisz zakasać rękawy i włożyć dodatkową pracę w szczegóły, które mają znaczenie. Wszystko to można zrobić za pomocą kodu.

Nie wszystko jest czarno-białe

Unikaj czystego czarnego koloru # 000 lub czystego białego koloru # FFF. Są zbyt ostre dla oka. Użyj nieco bardziej miękkich wariantów, takich jak # EFEFEF dla białych i # 181818 zamiast czarnego.

Granice są oldskulowe

Spróbuj użyć właściwości CSS box-shadow zamiast obramowania elementu. Sprawi, że twój projekt będzie bardziej gładki i subtelny.

Solidne obramowania 1px lub 2px mogą wyglądać fajnie i retro na niektórych projektach. Jednak nigdy nie używaj przerywanych lub przerywanych granic.

Stylizuj swój < hr>

Dzielniki są zwykle nudnymi elementami, które mogą mieć realny pozytywny wpływ, jeśli dodasz do nich trochę kodu.

Elementor Page builder ma również bardzo fajną funkcję do dzielenia stylizacji.

 

Kwadraty są nudne. Nie bądź skrępowany.

Nieregularne kształtowniki przyciągają większą uwagę. Używaj ich z umiarem w przypadku wysokiej hierarchii CTA lub przycisków.

Wystylizuj swoje menu hamburgerowe

Hamburgerowe menu to obowiązkowa pozycja dla urządzeń mobilnych, ale mogą również wyglądać naprawdę fajnie na szerokich ekranach. Znalazłem zgrabną kolekcję hamburgerowych menu na CodePen, którymi chciałbym się z wami podzielić. Jeśli nie wiesz, jak zrobić menu hamburgerowe, przeczytaj samouczek w tym artykule.

Użyj gradientów

Zamiast używać jednokolorowego tła, dlaczego nie spróbować gradientów?  Możesz łatwo tworzyć własne gradienty za pomocą colorzilla gradient editor i po prostu skopiować kod CSS do swojej witryny WordPress.

Nie szalej z liczbą kolorów w gradiencie i uważaj, aby całkowicie nie zderzyć kolorów. Jeśli masz problem z stworzeniem własnej kombinacji kolorów lub nie wiesz, co działa dobrze, zawsze możesz skorzystać z bezpłatnych gotowych gradientów.

Gradienty mogą być również używane jako nakładka na zdjęcie tła, ikony, przyciski i inne elementy projektu. Jest to bardzo zgrabna sztuczka do tworzenia spójności. Jeśli chcesz nałożyć gradient na obrazek tła, użyj właściwości &:before (SASS), aby dodać gradient i po prostu obniżyć jego krycie do 60 – 70%. Oto jak to wygląda:

Podsumujmy

Zawsze lepiej jest zatrudnić profesjonalnego projektanta, ale w razie potrzeby musimy sobie poradzić!

Jeśli się spieszysz, mądrze wybierz konfigurację. Zainstaluj szybki minimalistyczny motyw i zaimportuj do niego zawartość demo. Wystylizuj szczegóły,aby twój projekt wyglądał bardziej profesjonalnie i mniej ogólnie. Wykorzystaj swoje mocne strony (kod) w jak największym stopniu. Zawsze wybieraj sprawdzone kombinacje kolorów oraz wysokiej jakości obrazy i materiały wideo. Pamiętaj, aby używać pakietów ikon tego samego autora i w tym samym ogólnym stylu co Twoja strona internetowa. Zapłać za logo. Co najważniejsze, nie zapomnij być konsekwentnym i subtelnym ze swoim projektem.

Happy code-projektowanie!

 

Mam nadzieję, że te wskazówki pomogą Ci w potrzebie. Czy masz jakieś dodatkowe wskazówki, którymi chciałbyś się podzielić? Może masz pytanie lub dwa? Sekcja komentarzy poniżej cię wzywa!

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…