Zaczęło się od prośby o projekt systemu. Nasz zespół projektowy został poproszony o dodanie opcji większego rozmiaru do naszego istniejącego komponentu przycisku. Po przyjrzeniu się innym rozmiarom mogliśmy ekstrapolować inny rozmiar, ale zaciekawiło mnie… „Jak wszystkie rozmiary komponentów wypadają w porównaniu do naszego systemu projektowego? Czy istnieją uniwersalne zasady, których powinniśmy przestrzegać przy doborze rozmiaru?”

Niestety, odpowiedź brzmiała: nie. Niektóre wartości były wspólne, ale nic nie było spójne. Nie obowiązywały żadne reguły, które pomagałyby zapewnić spójność rozmiaru, odstępów i skali w całym naszym systemie.

Powrót do podstaw

Świetny projekt jest zwykle zakorzeniony w uzyskaniu właściwych podstaw. Dla wielu projektantów (takich jak ja) typografia jest najważniejszym i fundamentalnym elementem projektowania. Przyjrzeliśmy się naszej skali czcionek, aby zobaczyć, jak możemy tworzyć proporcjonalne projekty skalowane w oparciu o wspólne proporcje i metody.

Przedstawiamy proporcję

Proportio to aplikacja internetowa przeznaczona dla projektantów do tworzenia podstaw proporcjonalnego systemu projektowania. Możesz zapoznać się ze skalami typograficznymi i sposobami ich zastosowania do ikon, rozmiaru, odstępów i kompozycji komponentu. Dzięki proporcjonalnemu systemowi projektowania rozmiary i gęstości komponentów są dziecinnie proste.

Tworzenie podstawowych systemów

Zaczynasz od zdefiniowania skali typu, która będzie używana przez większość reszty twojego systemu. Stosowany jest podstawowy rozmiar czcionki wraz ze współczynnikiem skali, takim jak tercja mała (1:1,125). Każdy inny rozmiar czcionki jest oparty na tym współczynniku.

Rozmiar ikon jest automatycznie dopasowywany na podstawie skali czcionek, ponieważ typografia i parowanie ikon jest powszechnym i ważnym elementem w systemach projektowych.

Odstępy między tekstem a ikoną są również proporcjonalne, w oparciu o skalę pisma. Dzięki temu odstęp między nimi jest względny i zrównoważony. Podobnie można tworzyć proporcjonalne skale rozmiarów, skale promienia, a nawet skale wysokości (cienia).

System komponentów

Tutaj sprawy stają się naprawdę interesujące.

Gdy masz już nasze podstawowe systemy, możesz użyć naszej skali typu lub skali odstępów, aby określić rozmiar wypełnienia i wysokości komponentów. Komponent o rozmiarze podstawowym (domyślnym) używa rozmiaru typu podstawowego (domyślnie 16 pikseli).

Możesz dodawać mniejsze i większe rozmiary, które są generowane w interfejsie użytkownika na podstawie przyrostów wybranych skal.

Możesz także dodać mniej lub bardziej gęste opcje. Gęstość jest podobna do rozmiaru, chociaż wpływa tylko na wypełnienie i wysokość komponentu — rozmiary tekstu i ikon pozostają takie same. Są one również generowane na podstawie twoich skal i możesz modyfikować tempo, w jakim twoje gęstości rosną lub maleją.

Możesz przełączać widok komponentu, aby zobaczyć, jak wygląda komponent, gdy jest tylko tekst, tylko ikona lub jedno i drugie. Możesz także przełączać widok, aby wyświetlić specyfikacje komponentu.

System pojemników

Podobnie jak system komponentów, Proportio umożliwia tworzenie proporcjonalnie skalowanych pojemników.

Na przykład popover może być małym pojemnikiem (mały promień narożnika i wypełnienie). Większe pojemniki, takie jak karty, mogą mieć większy promień narożnika i wypełnienie. Modalne okna dialogowe mogą być uważane za jeszcze większe kontenery i wymagają największego wypełnienia i największego promienia narożnika, aby wyglądały odpowiednio w systemie interfejsu.

Korzystając z tych samych systemów proporcjonalnych, możesz tworzyć pojemniki ze skalowanym wypełnieniem, skalowanym promieniem, a nawet wysokością (jeśli potrzebujesz).

Eksportowanie wartości

Po utworzeniu systemu, którego chcesz używać, można je wyeksportować jako tokeny projektowe (format roboczy W3C) lub jako zmienne CSS. Ułatwia to przekazanie systemu inżynierom.

Obecnie nie ma możliwości wciągnięcia tych wartości bezpośrednio do Figmy . Tak więc w obecnym stanie jest bardziej użyteczny jako prototyp do definiowania tego, czego chcesz użyć w swoim systemie, niż jako prawdziwe „narzędzie do projektowania”. Ale powiedziawszy to, tę funkcję można dodać, jeśli masz na to ochotę, ponieważ Proportio jest narzędziem typu open source.

Otwarte źródło

Proportio to projekt typu open source . Jestem wielkim zwolennikiem wspierania społeczności projektowania systemów, aby pomóc dzielić się lub prowokować nowe pomysły, abyśmy wszyscy mogli się razem rozwijać.

Narzędzie jest wciąż w powijakach, ale trwają prace nad dodatkowymi funkcjami, które pomogą Ci jak najlepiej wykorzystać Proportio do projektowania i rozwoju.