10 nowych narzędzi do projektowania stron internetowych na kwiecień 2018 r

Zawartość

• 01. Repozytorium systemów projektowych
• 02. PixelSnap
• 03. Sketch.The.Ripper
• 04. Stackswell
• 05. Zmienne czcionki
• 06. Stripe Billing
• 07. CreativeGuild
• 08. Mobbin
• 09. HueSnap
• 10. Eggradients
• Zdobądź bilet do Generowania Nowego Jorku

Tematem naszego podsumowania w tym miesiącu jest szybkość i skuteczność: kilka z nich narzędzia do projektowania stron internetowych zrobi niesamowite rzeczy dla twojego przepływu pracy, usuwając żmudne, frustrujące zadania, które nie mają nic wspólnego z projektowaniem. Take Stackswell - automatyzuje wszystkie irytujące elementy projektowania responsywnego w Sketch. Kolejne z naszych narzędzi przyspiesza pracę, wyodrębniając i organizując wszystkie zasoby z pliku .sketch.

Do tego dochodzi nowy, fajny produkt do rozliczeń firmy Stripe, świetne narzędzie sieciowe dla twórców autorstwa Tiny Roth Eisenberg oraz fantastyczne narzędzie do mierzenia rzeczy na ekranie w pikselach.

01. Repozytorium systemów projektowych

Jeśli otrzymałeś zadanie pracy nad niektórymi składnikami systemu projektowania Twojej organizacji, a może nawet zbudowaniem lub skodyfikowaniem samego systemu, będziesz chciał zapoznać się z najnowszymi zasobami na ten temat.

W tym celu Design Systems Repo jest Twoim przyjacielem. Jest to zbiór książek, artykułów, wykładów, witryn internetowych, narzędzi, systemów projektowania, bibliotek wzorców i przewodników stylistycznych, z których możesz skorzystać, aby dowiedzieć się, jak robią to czołowe organizacje i czołowi myśliciele.

02. PixelSnap

PixelSnap to bardzo sprytna aplikacja, która sprawia, że ​​mierzenie rzeczy na ekranie jest znacznie mniej irytujące. Umieść kursor między dwoma elementami, takimi jak obraz i nagłówek, a automatycznie wskaże liczbę pikseli między nimi. Narysuj prostokąt wokół elementu, a on zatrzaskuje się wokół niego i wskaże ci jego wymiary. Tak. Możesz szybko mierzyć rzeczy.

Obejrzyj wideo na stronie głównej, aby zapoznać się z pomysłem. Aplikacja kosztuje 15 USD, a jedyną wadą jest to, że na razie jest dostępna tylko jako aplikacja na Maca. Ale jeśli jesteś użytkownikiem Maca, to świetna sprawa.

03. Sketch.The.Ripper

Eksportowanie i przygotowywanie zasobów ze Sketch do przekazania innemu zespołowi może być prawdziwym utrudnieniem, więc perspektywa narzędzia, które zrobi to za Ciebie za pomocą jednego kliknięcia, jest raczej ekscytująca. Sketch.The.Ripper wyodrębnia i organizuje ekrany, kopiuje i rastrowe obrazy ze wszystkich obszarów roboczych w pliku .sketch i prezentuje je w wygodny sposób. Możesz zobaczyć przykład danych wyjściowych ze zgranego pliku tutaj.

To narzędzie jest oparte na sieci Web, więc działa na każdym systemie operacyjnym, co może wyeliminować pewne tarcia z przepływu pracy, jeśli ludzie używają różnych systemów. Został stworzony przez Icons8 i możesz przeczytać o nim więcej tutaj.

04. Stackswell

Stackswell przyspiesza proces projektowania responsywnego, wprowadzając zapytania o media do programu Sketch i automatyzując proces aktualizacji stylów pisma i symboli dla każdego punktu przerwania. Zamiast wykonywać tę pracę ręcznie, po dostosowaniu szerokości obszaru roboczego style są automatycznie aktualizowane.

Stackswell oszczędza również pracy związanej z koniecznością sprawdzania odstępów w pionie dla każdego punktu przerwania, dzięki czemu uzyskujesz spójne odstępy przy minimalnym wysiłku. Więcej na ten temat przeczytasz w tym artykule.

05. Zmienne czcionki

Czcionki zmienne umożliwiają korzystanie z wielu różnych grubości i szerokości czcionek bez konieczności dołączania oddzielnego pliku dla każdego: dołączasz jeden plik, a następnie modyfikujesz czcionkę za pomocą CSS. To świetna sytuacja, ponieważ pozwala na optymalne wykorzystanie typografii w projektach bez konieczności zwiększania wagi strony.

Jednak nie wszystkie czcionki zmienne są równe; niektóre są bardziej elastyczne niż inne. To narzędzie umożliwia znajdowanie różnych czcionek i eksperymentowanie z nimi, aby sprawdzić, czy odpowiadają Twoim potrzebom. Aby uzyskać więcej informacji na temat czcionek zmiennych i zorientować się, co można osiągnąć, wypróbuj to demo.

06. Stripe Billing

Nowy produkt rozliczeniowy Stripe dla firm internetowych oferuje trzeci sposób dla firm rozważających dylemat, czy zbudować, czy kupić system rozliczeniowy (więcej na ten temat znajdziesz w naszym artykule na temat rozwiązań dla sklepów internetowych). Stripe Billing API łatwo integruje się z istniejącą witryną i umożliwia korzystanie z bloków konstrukcyjnych do tworzenia elastycznego systemu dostosowanego do Twoich potrzeb.

Po skonfigurowaniu systemu wszystko jest zarządzane z pulpitu nawigacyjnego, na którym można śledzić subskrypcje, faktury i raporty finansowe. Otrzymujesz również potężne funkcje, takie jak globalny system płatności Stripe, który obsługuje różne waluty i karty kredytowe, oraz elastyczne komponenty rozliczeniowe, które pozwalają eksperymentować z cenami.

07. CreativeGuild

CreativeGuild jest spin-offem CreativeMornings, bezpłatnej comiesięcznej serii wykładów założonej przez Tinę Roth Eisenberg na Brooklynie dziesięć lat temu. Pomysł okazał się hitem i obecnie istnieją rozdziały CreativeMornings w ponad 185 miastach na całym świecie, z których każdy ma własną, tętniącą życiem społeczność, która pielęgnuje i inspiruje swoich członków.

CreativeGuild ma na celu udostępnienie części społeczności online, tak aby była dostępna dla większej liczby osób. Możesz myśleć o tym jako trochę jak LinkedIn, ale dla kreatywnych. Istnieje katalog kreatywnych firm, osób i ofert pracy. Możesz wyszukiwać według lokalizacji, aby znaleźć możliwości w swoim mieście.

08. Mobbin

Mobbin to galeria projektów aplikacji mobilnych, z której możesz skorzystać, aby uzyskać pomysły na własne projekty - zamiast instalować wiele aplikacji, możesz przeglądać je w jednym miejscu, aby zobaczyć, jak inni rozwiązują problemy projektowe. Wyświetlanych jest sześć ekranów dla każdej aplikacji, dzięki czemu można uzyskać wyobrażenie o podróży użytkownika i wzorcu projektowym dla każdej z nich. Dostępny jest również pasek boczny z ofertami pracy.

09. HueSnap

Nigdy nie wiadomo, kiedy nadejdzie natchnienie; być może wystrój hotelu lub światło w parku będą odpowiadały kolorystyce odpowiedniej dla Twojej pracy. Jeśli tak się stanie, możesz zrobić zdjęcie i użyć HueSnap, aby wyodrębnić kolory z obrazu i przekształcić je w paletę.

Aplikacja jest przeznaczona do użytku mobilnego, więc działa najlepiej na telefonie, a Ty możesz zapisywać i udostępniać swoje palety innym osobom. Istnieją różne funkcje ułatwiające modyfikowanie palety, takie jak opcje wyboru kolorów uzupełniających i złożonych. Twoje palety mogą mieć do sześciu kolorów każda.

Aby uzyskać więcej informacji, zapoznaj się z naszym zestawieniem najlepszych narzędzi kolorystycznych dla projektantów stron internetowych.

10. Eggradients

Kto stworzył tę kolekcję pięknych gradientów, ma świetne wyczucie koloru i ciekawe poczucie humoru. Każdy gradient jest wyświetlany w pojemniku w kształcie jajka i otrzymuje nazwę, która może, ale nie musi, odnosić się do kolorów. Jeśli istnieje związek, nie byliśmy w stanie go rozszyfrować.

Przykładowe nazwy to „Udany imigrant” dla turkusowego gradientu, „Złamane serce Wozniaka” dla jasnoniebieskiego i „Miłosierny wróg” dla przejścia od żółtego do zielonego.

Zdobądź bilet do Generowania Nowego Jorku

Wiodące wydarzenie poświęcone projektowaniu stron internetowych Wygeneruj Nowy Jork wrócił. W dniach 25-27 kwietnia głównymi prelegentami są Dan Mall z SuperFriendly, konsultant ds. Animacji internetowych Val Head, pełnoprawny programista JavaScript Wes Bos i nie tylko. Jest też dzień warsztatów i najlepsze możliwości nawiązywania kontaktów - nie przegap tego. Zdobądź swój bilet Generuj teraz.