Budowa dobrej strony internetowej to dość złożony i czasochłonny proces. Każdy taki projekt składa się z kilku etapów, podczas których przygotowywany jest między innymi schemat kolorystyczny, dobierane są zdjęcia i tworzony tekst. O to wszystko należy odpowiednio zadbać, a czas jest niezwykle cenny. Dlatego przedstawiam kilka narzędzi online, które moim zdaniem są niezwykle pomocne przy pracy nad stronami internetowymi i nie tylko.
Narzędzia pomagające w tworzeniu treści
Lorem Ipsum jest generatorem wypełniaczy tekstowych. To podstawa każdego projektu gdy nie mamy jeszcze dostępnego tekstu docelowego. Dzięki Lorem Ipsum możemy zaplanować ile tekstu potrzeba i gdzie go wstawić, pomaga również dobrać odpowiednie formatowanie. Tak przygotowany projekt można wysłać klientowi do wstępnej akceptacji, nie tracąc czasu, na oczekiwanie dostarczenia gotowych tekstów.
Google Fonts to zbiór 1462+ darmowych fontów działających na zasadach Open Source z licencją Open Font License. Do dyspozycji mamy możliwość wpisania własnego tekstu, nadania koloru i wielkości, dzięki czemu możemy sprawdzić font, zanim go pobierzemy.
Adobe Fonts może pochwalić się znacznie większym zbiorem, bo zawiera aż 3131+ fontów. Z tą różnicą, że do ich użycia potrzebna jest wykupiona subskrypcja przynajmniej na podstawowy pakiet. Do dyspozycji mamy podobnie jak na stronie Google Fonts możliwość wpisania własnego tekstu, nadania koloru i wielkości.
FontPair pomoże dobrać dodatkowy font do głównego. Tworząc strony internetowe, bardzo często sięgamy po dodatkowe zestawy, które urozmaicają treść, ale nie zawsze wybór jest prosty dlatego z FontPair możemy zrobić to łatwiej.
WhatTheFont będzie świetnym narzędziem w przypadku kiedy chcemy zidentyfikować font. Wystarczy zrobić screenschot fragmentu tekstu i wrzucić go do analizy na WhatTheFont. Po kilku krokach pomagających systemowi identyfikację otrzymamy dokładną nazwę danego fonta lub jego podobne alternatywy.
LanguageTool jest bardzo skutecznym narzędziem do korekty tekstu. Wyłapuje literówki i doskonale radzi sobie z interpunkcją oraz ortografią. Oczywiście podobną funkcjonalność ma niemal każdy edytor tekstu, jak na przykład Microsoft Word czy Google Docs, ale LanguageTool potrafi trochę więcej, no i jest niezwykle prosty w użyciu. Posiada również wtyczkę do wielu programów, w tym przeglądarek.
Convertio to świetne narzędzie wyciągające tekst z aż czternastu formatów. Jeśli Twój klient dostarczył Ci grafikę bądź zdjęcie z tekstem, nie musisz go przepisywać. Wystarczy wrzucić plik do Convertio i gotowe. Konwerter jest naprawdę bardzo skuteczny, kilkukrotnie oszczędził mi czasu i nerwów.
Narzędzia pomagające w tworzeniu palet kolorów
Coolors, mój ulubiony generator schematów kolorystycznych, w którym możemy tworzyć, przechowywać i eksportować do kilku formatów plików własne zestawy kolorystyczne. Jest też zbiór gotowych schematów stworzonych przez innych użytkowników. Coolors można zainstalować jako wtyczkę w programie Figma lub w przeglądarkach na silniku Chromium, czyli np. Chrome czy Opera, a także jako aplikację na iOS i Android.
Adobe Color to drugie po Coolors narzędzie, z którego korzystam przy budowaniu schematów kolorystycznych do swoich projektów. Przydatną funkcjonalnością jest wyciąganie kolorów z plików graficznych. Podobnie jak Coolors, również i tu znajdziemy obszerną bazę gotowych schematów.
ImageColorPicker jest narzędziem do identyfikacji kolorów na zdjęciach i innych grafikach. Świetnie sprawdzi się w połączeniu z WhatTheFont w identyfikacji logo, które nie posiada księgi znaku.
Narzędzia pomagające w tworzeniu grafiki
Remove doskonale sprawdzi się gdy musisz szybko pozbyć się tła z jakiegoś zdjęcia. Pozwala tego dokonać bez odpalania programu graficznego i manualnego separowania tła od pożądanego elementu. Należy jednak mieć na uwadze, że jest to narzędzie do wykorzystania tylko przy prostych zdjęciach, na których pierwszy plan jest wyraźny i niczym niezakłócony. Z bardziej skomplikowanymi grafikami będzie znacznie ciężej i efekty mogą być niezadowalające. Trzeba również odnotować, że zdjęcia po automatycznym szparowaniu niestety trochę tracą na jakości.
Easy-Resize pomoże, gdy musimy szybko zmniejszyć wagę czy rozdzielczość zdjęć. Kompresja o dziwo jest bardzo dobra a straty zwykle prawie niewidoczne. Oczywiście bardzo kolorowe i skomplikowane zdjęcia czy grafiki mogą po kompresji zawierać sporo brzydkich artefaktów.
Optimizilla podobnie jak Easy-Resize jest maksymalnie prostym narzędziem, z tą różnicą, że kompresja odbywa się „na żywo”, czyli z podglądem. Narzędzie działa, całkiem sprawnie, dając dobre wyniki kompresji.
Pomniejszacz pomoże natomiast, gdy potrzebujesz bardziej zaawansowanych rozwiązań. Oferuje trochę więcej funkcji od Easy-Resize i Optimizilla. Są to między innymi takie funkcjonalności jak obracanie zdjęcia, efekty (czarno-białe, sepia, rozmycie, negatyw) oraz tekstowy znak wodny. Dodatkowym atutem jest darmowe hostowanie zdjęć.
TinyPNG przyda się, gdy nie ma czasu lub możliwości na odpalanie programu graficznego. Za pomocą TinyPNG skompresujemy rozmiar plików w formatach WEBP, JPED i PNG. Maksymalnie możemy skompresować do 20 plików jednocześnie.
Narzędzia pomagające w kodu
CSS Compressor jest bardzo prostym narzędziem, które pomoże zadbać o wydajność Twojej strony, poprzez kompresję kodu CSS. Kompresja polega na usunięciu z kodu wszelkich odstępów i pojedynczych spacji, dzięki czemu oszczędzamy zasoby i zyskujemy na wydajności.
CSS Minifier podobnie jak wspomniany wcześniej CSS Compressor, ma za zadanie kompresję kodu CSS. Posiada jednak kilka dodatkowych możliwości jak np. pobranie skompresowanego kodu w formie pliku. Ponadto umożliwia również kompresję kodu JavaScript.
Codepen doskonale dopełnia powyższe narzędzia. Jest to edytor HTML, CSS i JS z podglądem efektów na żywo. Ponadto znajduje się tam duży zbiór gotowych elementów ułatwiających pracę z kodem. Po rejestracji otrzymujemy możliwość tworzenia zbiorów z pracami innych użytkowników oraz tworzenia i zapisywania własnych.
Mam nadzieję, że wymienione narzędzia pomogą także i Tobie w codziennej pracy, oszczędzając cenny czas. Chętnie poznam również Twoje ulubione narzędzia online, którymi możesz podzielić się w komentarzu.