{"id":235921,"date":"2021-12-02T15:50:00","date_gmt":"2021-12-02T12:50:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=235921"},"modified":"2022-05-16T12:22:41","modified_gmt":"2022-05-16T09:22:41","slug":"9-prostych-zasad-projektowania-dzieki-ktorym-twoja-witryna-bedzie-piekniejsza","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/9-prostych-zasad-projektowania-dzieki-ktorym-twoja-witryna-bedzie-piekniejsza\/","title":{"rendered":"9 prostych zasad projektowania, dzi\u0119ki kt\u00f3rym Twoja witryna b\u0119dzie pi\u0119kniejsza"},"content":{"rendered":"

\u201eJestem do kitu w projektowaniu”.<\/p>\n

S\u0142ysza\u0142em to ju\u017c wiele razy.<\/p>\n

Znam wielu ludzi, kt\u00f3rzy prowadz\u0105 strony internetowe i tworz\u0105 \u015bwietne tre\u015bci, ale upieraj\u0105 si\u0119, \u017ce nie maj\u0105 gustu w projektowaniu.<\/p>\n

Nonsens!<\/p>\n

My\u015bl\u0119, \u017ce ka\u017cdy mo\u017ce wyostrzy\u0107 swoje oko do projektowania, ale je\u015bli przyda\u0142aby Ci si\u0119 pomoc, ten post jest dla Ciebie.<\/p>\n

W tym samouczku znajdziesz 9 podstawowych zasad projektowania, kt\u00f3re mo\u017cesz zastosowa\u0107 do wszystkiego, co robisz.<\/p>\n

Napisa\u0142em te wskaz\u00f3wki, aby by\u0142y jak najbardziej przydatne i \u0142atwe do wdro\u017cenia w Twojej witrynie.<\/p>\n

Sprawd\u017a t\u0119 list\u0119, gdy chcesz dokona\u0107 wyboru projektu, a obiecuj\u0119, \u017ce wynik b\u0119dzie nieco pi\u0119kniejszy.<\/p>\n

Zacznijmy\u2026<\/p>\n

1 Nigdy nie u\u017cywaj kolorowego tekstu<\/h2>\n

Je\u015bli nie wiesz, co robisz, kolorowy tekst jest brzydki i trudny do odczytania.<\/p>\n

Zasadniczo zawsze ustawiaj tekst w kolorze czarnym lub bia\u0142ym<\/strong>.<\/p>\n

Je\u015bli masz kolorowy tekst na swojej stronie, powiniene\u015b zamiast tego wybra\u0107 kolor w pobli\u017cu.<\/p>\n

Oto co mam na my\u015bli.<\/p>\n

Przyk\u0142ad 1<\/h3>\n

Ten przycisk ma niebieski tekst i jasnoszare t\u0142o. Wygl\u0105da troch\u0119 p\u0142asko, a tekst przyt\u0142acza kszta\u0142t przycisku:<\/p>\n

Je\u015bli odwr\u00f3c\u0119 kolory, u\u017cywaj\u0105c niebieskiego jako t\u0142a i jasnego tekstu, wygl\u0105da to znacznie lepiej:<\/p>\n

A kiedy m\u00f3wimy o przyciskach\u2026<\/p>\n

Je\u015bli przycisk ma kolorowe t\u0142o, prawie zawsze b\u0119dzie wygl\u0105da\u0142 najlepiej z bia\u0142ym tekstem.<\/p>\n

Czarny tekst wydaje si\u0119 wygl\u0105da\u0107 okropnie na wierzchu koloru, chyba \u017ce ten kolor jest naprawd\u0119 blady lub po prostu ja\u015bniejszy szary:<\/p>\n

Je\u015bli cz\u0119sto u\u017cywasz kolorowego tekstu w swoich postach, docenisz pomys\u0142y z nast\u0119pnego przyk\u0142adu.<\/p>\n

Przyk\u0142ad #2<\/h3>\n

Jako kolejny przyk\u0142ad mo\u017cesz mie\u0107 kolorowy tekst w po\u015bcie, poniewa\u017c chcesz, aby si\u0119 wyr\u00f3\u017cnia\u0142, na przyk\u0142ad:<\/p>\n

Ten tekst nie wygl\u0105da \u015bwietnie, bo jest niebieski!<\/p>\n

Istniej\u0105 bardziej estetyczne sposoby na przyci\u0105gni\u0119cie uwagi kolorem. Nie wspominaj\u0105c o tym, \u017ce niekt\u00f3re kolory (takie jak niebieski) sprawiaj\u0105, \u017ce zwyk\u0142y tekst wygl\u0105da jak link.<\/p>\n

Innym sposobem na przyci\u0105gni\u0119cie uwagi kolorem jest ustawienie bia\u0142ego tekstu i niebieskiego t\u0142a:<\/p>\n

To du\u017co koloru, wi\u0119c u\u017cywaj oszcz\u0119dnie!<\/p>\n

Mo\u017cesz te\u017c zmniejszy\u0107 nasycenie, aby t\u0142o by\u0142o bardzo blade, a nast\u0119pnie zmieni\u0107 tekst na czarny, aby uzyska\u0107 bardziej subtelny wygl\u0105d:<\/p>\n

Czarny tekst \u0142adnie wygl\u0105da na jasnym tle.<\/p>\n

Mo\u017cesz te\u017c pozostawi\u0107 tekst czarny i doda\u0107 odrobin\u0119 koloru jako obramowanie wok\u00f3\u0142 tekstu:<\/p>\n

To prostszy wygl\u0105d, kt\u00f3ry wci\u0105\u017c przyci\u0105ga uwag\u0119.<\/p>\n

Mo\u017cesz te\u017c po\u0142\u0105czy\u0107 t\u0142o i obramowanie:<\/p>\n

To kolejny atrakcyjny spos\u00f3b na wykorzystanie koloru.<\/p>\n

Podsumowuj\u0105c zasady dotycz\u0105ce kolorowego tekstu:<\/p>\n

Zamiast zmienia\u0107 kolor tekstu, nale\u017cy u\u017cy\u0107 kolorowego t\u0142a lub kolorowej ramki wok\u00f3\u0142 tekstu. Dodatkowo biel zawsze lepiej wygl\u0105da na kolorowym tle, chyba \u017ce kolor jest bardzo blady.<\/p>\n

Teraz wybierzmy kolory, kt\u00f3rych b\u0119dziesz u\u017cywa\u0107.<\/p>\n

Aby\u015b wiedzia\u0142, musia\u0142em napisa\u0107 troch\u0119 CSS, aby doda\u0107 obramowania do powy\u017cszych akapit\u00f3w. Gutenberg nie ma jeszcze opcji granicznej. Mo\u017cesz doda\u0107 ramki ju\u017c za pomoc\u0105 wid\u017cet\u00f3w Elementor<\/a>.<\/p>\n

2 U\u017cyj palety kolor\u00f3w<\/h2>\n

Wybieranie kolor\u00f3w w locie to du\u017cy b\u0142\u0105d nowicjusza.<\/p>\n

Za ka\u017cdym razem, gdy stosujesz kolor do swojej witryny, zawsze wybieraj kolor z palety<\/strong>.<\/p>\n

Korzystaj\u0105c z palety, mo\u017cesz po prostu wybra\u0107 spo\u015br\u00f3d istniej\u0105cych kolor\u00f3w i wiesz, \u017ce efekt b\u0119dzie wygl\u0105da\u0142 \u0142adnie i \u201ena mark\u0119” bez \u017cadnego wysi\u0142ku.<\/p>\n

A oto rzecz\u2026<\/p>\n

Od lat zajmuj\u0119 si\u0119 projektowaniem stron internetowych i wci\u0105\u017c zmagam si\u0119 z tworzeniem \u0142adnych palet kolor\u00f3w.<\/p>\n

I dlatego oszukuj\u0119 \ud83d\ude09<\/p>\n

Nigdy nie tworz\u0119 w\u0142asnych palet kolor\u00f3w. Zamiast tego znajduj\u0119 wspania\u0142\u0105 palet\u0119 kolor\u00f3w, kt\u00f3ra zosta\u0142a ju\u017c stworzona, a nast\u0119pnie dostosowuj\u0119 j\u0105 do moich potrzeb projektowych.<\/p>\n

Moim tajnym zasobem do znajdowania palet kolor\u00f3w jest Color Hunt<\/a>.<\/p>\n

\"9<\/a><\/p>\n

Ta niesamowita witryna internetowa ma spo\u0142eczno\u015b\u0107 cz\u0142onk\u00f3w, kt\u00f3rzy tworz\u0105 i udost\u0119pniaj\u0105 zaprojektowane przez siebie palety kolor\u00f3w.<\/p>\n

Przegl\u0105daj\u0105c stron\u0119 g\u0142\u00f3wn\u0105, znajdziesz niesko\u0144czon\u0105 list\u0119 pi\u0119knych palet do wyboru. Klikni\u0119cie dowolnej palety spowoduje przej\u015bcie do jej strony, na kt\u00f3rej poni\u017cej wymienione s\u0105 powi\u0105zane palety.<\/p>\n

\"9<\/a><\/p>\n

Szczerze m\u00f3wi\u0105c, przegl\u0105danie palet i zdobywanie pomys\u0142\u00f3w i inspiracji dla Twojej witryny to \u015bwietna zabawa.<\/p>\n

Je\u015bli masz ju\u017c na my\u015bli odcie\u0144, mo\u017cesz wybra\u0107 kolor na pocz\u0105tek za pomoc\u0105 paska wyszukiwania.<\/p>\n

\"9<\/a><\/p>\n

Dost\u0119pne s\u0105 r\u00f3wnie\u017c predefiniowane s\u0142owa kluczowe, takie jak \u201eciep\u0142o” i \u201ezimno”, s\u0142u\u017c\u0105ce do wyszukiwania odpowiednich palet.<\/p>\n

Po wybraniu palety, kt\u00f3r\u0105 lubisz i zaimplementowaniu kolor\u00f3w na swojej stronie, b\u0119dziesz zdumiony, jak wielk\u0105 to robi r\u00f3\u017cnic\u0119.<\/p>\n

Te dwie pierwsze wskaz\u00f3wki powinny sk\u0142oni\u0107 odwiedzaj\u0105cych do przekonania, \u017ce \u200b\u200bjeste\u015b mistrzem projektowania operuj\u0105cym kolorami.<\/p>\n

Porozmawiajmy teraz o czcionkach!<\/p>\n

3 U\u017cywaj tylko 1 lub 2 czcionek<\/h2>\n

Kolory nale\u017cy wybra\u0107 ze swojej palety. Czcionki s\u0105 podobne.<\/p>\n

Powiniene\u015b wybra\u0107 jedn\u0105 lub dwie czcionki, a nast\u0119pnie u\u017cy\u0107 ich ponownie do wszystkiego.<\/p>\n

Cz\u0119sto, gdy u\u017cytkownicy WordPressa dowiaduj\u0105 si\u0119, jak zmienia\u0107 czcionki w swojej witrynie, nagle chc\u0105 ich wszystkich u\u017cy\u0107!<\/p>\n

Na przyk\u0142ad widzia\u0142em, jak ludzie zmieniali czcionk\u0119 jednego akapitu, aby wyr\u00f3\u017cnia\u0142 si\u0119 w po\u015bcie. To z\u0142y pomys\u0142. Je\u015bli potrzebujesz tekstu, aby wyr\u00f3\u017cni\u0107 si\u0119 w po\u015bcie, mo\u017cesz:<\/p>\n