\n Nie ma idealnego uk\u0142adu, aby to zrobi\u0107, poniewa\u017c zwykle r\u00f3\u017cni\u0105 si\u0119 one w zale\u017cno\u015bci od wymaga\u0144 biznesowych. Istniej\u0105 jednak pewne hacki, kt\u00f3re mog\u0105 pom\u00f3c Ci zdecydowa\u0107, co jest najlepsze dla Twojej firmy.\n<\/p>\n
\n Skorzystaj z tych hack\u00f3w, a nigdy nie zabraknie Ci pomys\u0142\u00f3w.\n<\/p>\n
\n 1 U\u017cywaj czcionek, kt\u00f3re si\u0119 uzupe\u0142niaj\u0105
\n<\/h5>\n
\n Jak dos\u0142ownie! Czcionki, kt\u00f3re s\u0105 anty-z natury, mog\u0105 przechyli\u0107 szal\u0119 zwyci\u0119stwa na twoj\u0105 korzy\u015b\u0107.\n<\/p>\n \n Takie pary s\u0105 og\u00f3lnie klasyfikowane w kategorii Serif<\/strong> i Sans Serif<\/strong>, np. Caslon i Myriad, Liberation Serif i Liberation Sans itp.\n<\/p>\n \n Jednak nie jest konieczne \u0142\u0105czenie ze sob\u0105 tylko uzupe\u0142niaj\u0105cych si\u0119 czcionek, poniewa\u017c mo\u017cna r\u00f3wnie\u017c \u0142\u0105czy\u0107 ze sob\u0105 kontrastuj\u0105ce czcionki. Zobacz na przyk\u0142ad ten obraz:\n<\/p>\n \n Czcionka Sifonn<\/strong> zosta\u0142a u\u017cyta dla s\u0142owa Hawaje i Arvo<\/strong> dla reszty. I uzupe\u0142niaj\u0105 si\u0119 w \u201emi\u0142y” spos\u00f3b.\n<\/p>\n \n U\u017cywaj tak\u017ce czcionek odpowiednich do sytuacji, w przeciwnym razie wynik mo\u017ce by\u0107 nast\u0119puj\u0105cy.\n<\/p>\n \n Po podj\u0119ciu tej decyzji mo\u017cesz zastanawia\u0107 si\u0119 nad rozmiarem czcionki, prawda? C\u00f3\u017c, prawdopodobnie u\u017cyjesz 2,5-krotno\u015bci rozmiaru czcionki w nag\u0142\u00f3wku. Ponadto dla wszystkich tekst\u00f3w podstawowych zalecana jest wysoko\u015b\u0107 linii 1,6. Je\u015bli masz dokument CSS, mo\u017cesz to zrobi\u0107, dodaj\u0105c go do wszystkich element\u00f3w p, w przeciwnym razie, w przypadku papieru drukowanego, pomn\u00f3\u017c rozmiar czcionki cia\u0142a przez 1,6, aby uzyska\u0107 \u017c\u0105dan\u0105 wysoko\u015b\u0107 linii.\n<\/p>\n \n Wi\u0119kszo\u015b\u0107 ludzi zatrzymuje si\u0119 tutaj po tych wszystkich wysi\u0142kach, ale od tego momentu zaczyna si\u0119 prawdziwa podr\u00f3\u017c, czyli u\u0142o\u017cenie ich. Mo\u017cesz umie\u015bci\u0107 je na \u015brodku lub wyr\u00f3wna\u0107 do lewej lub do prawej. To zale\u017cy wy\u0142\u0105cznie od Ciebie i tego, czego wymagaj\u0105 Twoje tre\u015bci. Na pocz\u0105tek mo\u017cesz zacz\u0105\u0107 od ich wyr\u00f3wnania i przesun\u0105\u0107 te obrazy na drugi koniec, a podczas korzystania z obraz\u00f3w t\u0142a przej\u015b\u0107 do wyr\u00f3wnania do \u015brodka, np.\n<\/p>\n \n Kolory u\u017cywane do czcionek i uchwyt\u00f3w tekstu powinny by\u0107 zsynchronizowane z obrazem t\u0142a.\n<\/p>\n \n Og\u00f3lnie rzecz bior\u0105c, typografia stanowi 90% ca\u0142ego projektu, wi\u0119c wyb\u00f3r optymalnego koloru czcionki jest zdecydowanie kwesti\u0105 niepokoju.\n<\/p>\n \n Na pocz\u0105tku mo\u017cesz zacz\u0105\u0107 od dw\u00f3ch kolor\u00f3w, np. u\u017cywaj\u0105c pomara\u0144czowego dla wszystkich element\u00f3w marki i niebieskiego dla wszystkich wezwa\u0144 do dzia\u0142ania, kt\u00f3re z pewno\u015bci\u0105 wygl\u0105daj\u0105 obiecuj\u0105co. Poza rozmiarem czcionki i kolorami, u\u017cycie maksymalnie 58 znak\u00f3w w linii sprawia, \u017ce \u200b\u200btekst jest bardziej czytelny, co jest Twoim ostatecznym celem, prawda?\n<\/p>\n \n Je\u015bli szukasz wyr\u00f3\u017cniaj\u0105cych si\u0119 element\u00f3w separacji lub tre\u015bci, najlepiej u\u017cy\u0107 podkre\u015ble\u0144. To tak, jakby\u015bmy przenie\u015bli si\u0119 z powrotem do czas\u00f3w dzieci\u0144stwa, kiedy nauczyciele stosowali surowe zasady konfrontacji, aby pogrubi\u0107, podkre\u015bli\u0107 i podkre\u015bli\u0107 wa\u017cne punkty. Decyduj\u0105c o dobrym pi\u015bmie odr\u0119cznym, odst\u0119py mia\u0142y ogromne znaczenie, a wyb\u00f3r idealnego rozmiaru by\u0142 kiedy\u015b bardzo k\u0142opotliwy. Podobnie, bia\u0142e przestrzenie, kt\u00f3rych u\u017cywamy w naszym projekcie, powinny by\u0107 wykorzystywane w subtelny spos\u00f3b i nigdy nie nale\u017cy traktowa\u0107 ich jako pustych przestrzeni. Pami\u0119tasz strza\u0142k\u0119 w logo FedEx? W ten spos\u00f3b zamieniasz te bia\u0142e w negatywy.\n<\/p>\n \n Tyle negatywno\u015bci, m\u00f3wi\u0119 wam!\n<\/p>\n \n dosta\u0142e\u015b? Przejrzysto\u015b\u0107 to nowy styl, a u\u017cycie przezroczystych ikon mo\u017ce sprawi\u0107, \u017ce Twoja witryna stanie si\u0119 o wiele bardziej interesuj\u0105ca. Te ikony mog\u0105 ci\u0119 uratowa\u0107 w twoich tragicznych potrzebach.\n<\/p>\n \n W powy\u017cszym przyk\u0142adzie li\u015b\u0107 zosta\u0142 nieco bardziej przezroczysty przy jednoczesnym przyciemnieniu t\u0142a, dzi\u0119ki czemu wygl\u0105da nieco ciekawiej.\n<\/p>\n \n Ale przywi\u0105zuj\u0105c zbyt du\u017c\u0105 wag\u0119 do tego, aby by\u0142y przezroczyste, zwr\u00f3\u0107 tak\u017ce troch\u0119 uwagi na ich typografi\u0119. Mam na my\u015bli zmuszanie ich do m\u00f3wienia rzeczy, kt\u00f3re powinni, a kt\u00f3rych nie. Do ich zaprojektowania mo\u017cesz u\u017cy\u0107 przewodnik\u00f3w po stylach. np\n<\/p>\n \n W mi\u0119dzyczasie postaraj si\u0119 by\u0107 troch\u0119 por\u0119czny ze szkicownikiem, zamiast strzela\u0107 wszystkimi kreatywnymi strza\u0142ami do niewinnego Photoshopa. Projektuj\u0105c ikony, musisz mie\u0107 jasny umys\u0142, poniewa\u017c s\u0105 to ma\u0142e graficzne rzeczy, kt\u00f3re przyci\u0105gaj\u0105 pierwsze spojrzenie widza.\n<\/p>\n \n W razie w\u0105tpliwo\u015bci po prostu przejd\u017a do stanu \u015bwiadomo\u015bci i zrelaksuj si\u0119. A teraz spr\u00f3buj jeszcze raz, jestem pewien, \u017ce ci si\u0119 uda. Nie b\u00f3j si\u0119 pora\u017cek, ale bardzo b\u00f3j si\u0119 w\u0105tpliwo\u015bci, poniewa\u017c w\u0105tpliwo\u015bci zabi\u0142y wi\u0119cej marze\u0144 ni\u017c pora\u017cka kiedykolwiek.\n<\/p>\n \n Nie nie nie! Nie o prokrastynacj\u0119 mi chodzi\u0142o! To dok\u0142adnie tak, jak z demokracj\u0105, z kt\u00f3rej \u201ecieszymy si\u0119” teraz, tj. wolno\u015bci\u0105 wyboru najg\u0142upszego bytu, jaki przychodzi nam do g\u0142owy.\n<\/p>\n \n Nie oszcz\u0119dzaj na naturalnych elementach zdj\u0119cia, ale popraw jego kolory, aby wygl\u0105da\u0142o to troch\u0119 jak praca grafika.\n<\/p>\n \n Zobacz, jak ludzie na Pintere\u015bcie patrz\u0105 na obrazy, mog\u0105 zamieni\u0107 dos\u0142ownie wszystko w infografiki. Te zdj\u0119cia wygl\u0105daj\u0105 dobrze, nie naruszaj\u0105c istoty grafiki. I jeszcze jedno: je\u015bli znajdziesz dobre uk\u0142ady projekt\u00f3w na Pintere\u015bcie lub gdziekolwiek indziej, dodaj je do zak\u0142adek, poniewa\u017c mog\u0105 ci si\u0119 p\u00f3\u017aniej przyda\u0107.\n<\/p>\n \n Wi\u0119c wracaj\u0105c do tego, wprowad\u017a te cholerne zmiany w obrazach, aby wygl\u0105da\u0142y na \u017cywe i nasycone. Ponadto, gdy szukasz obrazu t\u0142a, upewnij si\u0119, \u017ce wykorzeni\u0142e\u015b ten, kt\u00f3ry ma du\u017co nieu\u017cywanego lub kopiowanego miejsca. T\u0119 przestrze\u0144 mo\u017cna wykorzysta\u0107 do napisania tekstu zgodnego z ide\u0105 Twojej marki.\n<\/p>\n \n Mo\u017cesz przyci\u0105\u0107 obrazy zamiast zapisywa\u0107 obrzydliwe pliki JPEG w ich pe\u0142nym rozkwicie, poniewa\u017c powoduj\u0105 niepotrzebne obci\u0105\u017cenie procesora, kt\u00f3rego mo\u017cna \u0142atwo unikn\u0105\u0107, korzystaj\u0105c z r\u00f3\u017cnych bezp\u0142atnych program\u00f3w online, aby zapisa\u0107 go jako zoptymalizowany plik PNG, jeden z przyk\u0142ad\u00f3w takiego oprogramowania mo\u017ce by\u0107 Tinypng.\n<\/p>\n \n Te programy nie id\u0105 na kompromis w kwestii jako\u015bci, mo\u017cesz by\u0107 tego pewien!\n<\/p>\n \n W obrazowym sensie stwierdzenia oczywisto\u015bci! Np. zbli\u017cenie r\u00f3\u017cnych egzotycznych mebli w tle Twojej witryny, je\u015bli zajmujesz si\u0119 sprzeda\u017c\u0105 produkt\u00f3w typu \u201ezmie\u0144 sw\u00f3j dom w dom”.\n<\/p>\n \n Ludzie kochaj\u0105 takie rzeczy. Nigdzie z tym nie idziesz? Kradnij wspania\u0142e projekty swojej niszy!\n<\/p>\n \n Nie martw si\u0119! Kradnij tyle, ile chcesz, pomy\u015bl\u0105, \u017ce twoja gra w imitacj\u0119 jest na miejscu. Kto mia\u0142by co\u015b przeciwko kradzie\u017cy wizerunku wie\u017cy Eiffla, kiedy jeste\u015b agentem biura podr\u00f3\u017cy?\n<\/p>\n \n Widzie\u0107? Nikt tego nie robi! R\u00f3wnie\u017c Pablo Picasso<\/strong> powiedzia\u0142, \u017ce dobrzy arty\u015bci kopiuj\u0105, a wielcy kradn\u0105. Wi\u0119c po co si\u0119 m\u0119czy\u0107? Je\u015bli powiedzia\u0142 to jeden wielki cz\u0142owiek, to musi mie\u0107 racj\u0119, prawda?\n<\/p>\n \n Projektuj\u0105c swoje biuro, pami\u0119taj o umieszczeniu plakat\u00f3w z niekt\u00f3rymi pracami lub przypadkowymi cytatami motywacyjnymi.\n<\/p>\n \n Mog\u0105 zainspirowa\u0107 Ci\u0119 do lepszej pracy lub Twoich klient\u00f3w do kupowania od Ciebie; w\u015br\u00f3d nich obu ta ostatnia jest o wiele bardziej podnosz\u0105ca na duchu my\u015bl.\n<\/p>\n \n Liczby wygl\u0105daj\u0105 bardziej atrakcyjnie dla u\u017cytkownik\u00f3w, bez wzgl\u0119du na to, jak bardzo nienawidzi\u0142e\u015b matematyki w szkole \u015bredniej. Och, kocha\u0142e\u015b to? Mo\u017ce to by\u0107 inny rodzaj \u201ematematyki”. Ludzie s\u0105 zdumieni zaufaniem, jakie daje ich marce, u\u017cywaj\u0105c tylko niekt\u00f3rych warto\u015bci procentowych w formacie obrazkowym.\n<\/p>\n \n Zobacz w przyk\u0142adzie poni\u017cej.\n<\/p>\n \n Kiedy by\u0142em na ich stronie internetowej, liczby te pojawiaj\u0105 si\u0119 w formacie licz\u0105cym od zera. Zaufaj mi, cierpliwie czeka\u0142em na zatrzymanie liczenia i uwaga, nikt mnie do tego nie zmusza\u0142.\n<\/p>\n \n Na pewno widzia\u0142e\u015b te\u017c organizacje chwal\u0105ce si\u0119 sukcesem swoich klient\u00f3w, np. pomogli\u015bmy firmie XYZ zwi\u0119kszy\u0107 sprzeda\u017c o 200%. To po prostu m\u00f3wi, \u017ce podwoili sprzeda\u017c i to te\u017c bez wspominania o okresie, ale jakie to ma znaczenie? Dla mnie wygl\u0105da obiecuj\u0105co. Gdyby u\u017cyli \u201epodw\u00f3jnego” zamiast procentu, by\u0142oby to mniej szkodliwe dla moich pieni\u0119dzy.\n<\/p>\n \n Kr\u00f3tko m\u00f3wi\u0105c, kszta\u0142ty, warto\u015bci procentowe i wykresy ko\u0142owe to jedne z najlepszych sposob\u00f3w na udowodnienie swojego metalu w prezentacji firmy, poniewa\u017c wygl\u0105daj\u0105 jednocze\u015bnie informacyjnie i interesuj\u0105co.\n<\/p>\n \n Siatki to najlepszy spos\u00f3b tworzenia uk\u0142adu obraz\u00f3w. Ponadto upraszcza proces edycji od mocnego do zabawnego i igraszki.\n<\/p>\n \n Dost\u0119pnych jest wiele siatek, ale siatka 1170 jest uwa\u017cana za najlepsz\u0105, je\u015bli chodzi o projektowanie responsywne, zw\u0142aszcza dla Bootstrap Framework. Siatka 1140 by\u0142a pierwszym wprowadzeniem, kt\u00f3re p\u00f3\u017aniej zosta\u0142o przeprojektowane, aby przej\u015b\u0107 do siatki 1170. Podczas projektowania zalecane s\u0105 siatki o wi\u0119kszym rozmiarze, poniewa\u017c mo\u017cna je wygodnie dostosowa\u0107 do ni\u017cszych rozdzielczo\u015bci. Wi\u0119kszo\u015b\u0107 pocz\u0105tkuj\u0105cych projektant\u00f3w uwa\u017ca, \u017ce \u200b\u200bsiatki ograniczaj\u0105 ich wyobra\u017ani\u0119 i pr\u00f3buje si\u0119 od nich \u201euwolni\u0107”, ale kiedy wizualnie napotykaj\u0105 ich zalety, zwykle zadowalaj\u0105 si\u0119 punktami przerwania.\n<\/p>\n \n Siatki s\u0105 r\u00f3wnie\u017c czynnikiem definiuj\u0105cym, gdy m\u00f3wimy o typografii. Np. Nigdy nie zaczynaj pisania tre\u015bci od pustej przestrzeni, znanej r\u00f3wnie\u017c jako bia\u0142a przestrze\u0144. Bia\u0142e przestrzenie musz\u0105 by\u0107 wykorzystywane w lepszy spos\u00f3b, aby wydoby\u0107 z nich to, co najlepsze.\n<\/p>\n \n Siatka 1170 ma uk\u0142ad 12 kolumn z szeroko\u015bci\u0105 68 pikseli i rynn\u0105 30 pikseli. Pocz\u0105tkowy punkt przerwania dla urz\u0105dze\u0144 mobilnych to 768 pikseli.\n<\/p>\n \n Kto nie kopiuje? Szekspir skopiowa\u0142 Romeo Juli\u0119 z innej sztuki zatytu\u0142owanej \u201eTragiczna opowie\u015b\u0107 o Romeu i Julii”, a ty my\u015bla\u0142e\u015b, \u017ce kopiowanie to z\u0142a rzecz! Brak brata.\n<\/p>\n \n Kopiowanie jest dobre, o ile nikt si\u0119 o tym nie dowie; na wypadek, gdyby kto\u015b si\u0119 dowiedzia\u0142, zawsze mo\u017cemy u\u017cy\u0107 poprawnego politycznie terminu \u201einspiracja”, aby brzmia\u0142o to \u0142adnie. Mo\u017cesz kra\u015b\u0107 projekty z innych stron internetowych, na przyk\u0142ad wybierz nag\u0142\u00f3wek z jednej i stopk\u0119 z drugiej! Nie, nie, nie jestem sceptyczny co do smaku twoich kreatywnych sok\u00f3w, ale skoro mo\u017cna z tym wiele zrobi\u0107, to po co marnowa\u0107 je na jakie\u015b g\u0142upie rzeczy?\n<\/p>\n \n My, ludzie, musimy inspirowa\u0107 si\u0119 nawzajem poprzez wsp\u00f3\u0142prac\u0119 pomys\u0142\u00f3w, jednego dnia zainspirujesz si\u0119 od kogo\u015b, innego dnia kto\u015b inny zainspiruje si\u0119 od ciebie i \u0142a\u0144cuch trwa. Tak to idzie. Na Pintere\u015bcie dost\u0119pnych jest kilka zdumiewaj\u0105cych przyk\u0142ad\u00f3w darmowych szablon\u00f3w, kt\u00f3re mog\u0105 przyspieszy\u0107 proces projektowania. Sam zobacz:\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-288163-6382d27a19d38.webp\")
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n\n 2 Harmoniczny zestaw my\u015bli
\n<\/h5>\n<\/a><\/p>\n<\/a><\/p>\n\n 3 U\u017cyj \u201eIkonicznej przezroczysto\u015bci”
\n<\/h5>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n\n 4 Popraw kolory swoich obraz\u00f3w
\n<\/h5>\n<\/a><\/p>\n<\/a><\/p>\n\n 5 B\u0105d\u017a troch\u0119 frajerem
\n<\/h5>\n<\/a><\/p>\n<\/a><\/p>\n\n 6 Ukszta\u0142tuj je w procentach
\n<\/h5>\n<\/a><\/p>\n<\/a><\/p>\n\n 7 U\u017cyj siatek dla obraz\u00f3w
\n<\/h5>\n<\/a><\/p>\n<\/a><\/p>\n\n 8 Kradnij jak artysta
\n<\/h5>\n