Atomic Design: wysadzanie w powietrze tego, co myślisz, że wiesz o projektowaniu stron internetowych

Powszechnie uważa się, że elastyczność jest tym samym, co bycie nieskrępowanym, że aby być kreatywnym, trzeba też być nieokiełznanym. Aby ukończyć projekt, zwłaszcza tak skomplikowany, jak projektowanie stron internetowych, tworzenie struktury może w rzeczywistości zapewnić większą elastyczność. Potrzebujesz ram – to nie podlega negocjacjom. Napinanie artystycznych, kreatywnych mięśni, w których naprawdę masz swobodę, zaowocuje projektami, które są zarówno inspirowane, jak i funkcjonalne i realistyczne. Atomic design to sensowne, metodyczne podejście do projektowania stron internetowych, które wciąż daje możliwość eksperymentowania w ramach.

Systemy projektowe

Projektanci nie tworzą już po prostu stron internetowych; tworzą systemy projektowe. Systemy projektowania obejmują:

• Kolor
• Siatki
• Tekstura
• Typografia
• Itp.

Uwielbiam sposób, w jaki Jack Strachan z UX Planet opisuje systemy projektowe: „W skrócie, system projektowy to zbiór komponentów wielokrotnego użytku, kierujących się jasnymi standardami, które można zestawiać w celu stworzenia dowolnej liczby aplikacji. Systemy projektowe to metoda tłumaczenia spójnego doświadczenia i języka wizualnego na produkt podczas pracy nad różnymi punktami styku”.

Elementy projektu mogą być subiektywne i szybko stają się przytłaczające i chaotyczne. Aby je skategoryzować, należy spojrzeć na design w sposób bardziej metodyczny. To właśnie zrobił projektant stron internetowych Brad Frost.

Narodziny projektowania atomowego

Oto jak Brad wymyślił projekt atomowy: „Poszukując inspiracji i analogii, ciągle wracałem do chemii. Uważa się, że cała materia (stała, płynna, gazowa, prosta, złożona itd.) składa się z atomów. Te jednostki atomowe łączą się ze sobą, tworząc cząsteczki, które z kolei łączą się w bardziej złożone organizmy, aby ostatecznie stworzyć całą materię w naszym wszechświecie”.

Następnie wyjaśnia, że ​​interfejsy składają się z komponentów, które można podzielić na bloki konstrukcyjne. Oto kolejność od najmniejszej do największej:

• Atomy
• Cząsteczki
• Organizmy
• Szablony
• Strony

Źródło: BradFrost.com

Bloki konstrukcyjne projektowania atomowego

Główną zaletą projektowania atomowego jest to, że promuje spójność. Wiele z tworzonych elementów można łatwo powielić, ponownie wykorzystać lub skalować. Aby śledzić je wszystkie, projektanci mogą sami zbudować bibliotekę, w której mogą zobaczyć wszystkie swoje elementy i style w jednym miejscu. Jest też miejsce na dostosowanie, ale tylko wtedy, gdy bloki konstrukcyjne stają się bardziej złożone i mają większy zakres. Przejdźmy do pięciu bloków konstrukcyjnych:

1. Atomy

Ponieważ atomy mają znaczenie w naturalnym świecie, znaczniki HTML mają znaczenie dla interfejsów internetowych. Znaczenie: wszystkie interfejsy internetowe zaczynają się od znaczników HTML lub podstawowych elementów (animacje, przyciski, palety kolorów, czcionki, etykiety formularzy itp.). Chociaż te atomy same w sobie nie są korzystne dla projektowania stron internetowych, są one wymagane do zbudowania interfejsu sieciowego.

2. Cząsteczki

Cząsteczki są bardziej złożone niż atomy, ale ogólnie nie są złożone. Gdy zgrupujesz razem mniej przydatne atomy, otrzymasz bardziej przydatne cząsteczki: Etykieta formularza wyszukiwania + dane wejściowe + przycisk (atomy) = wypełniony formularz wyszukiwania (cząsteczka)

3. Organizmy

Kiedy grupujesz cząsteczki razem, otrzymujesz organizmy, które są bardziej złożone niż ich poprzednicy: Logo + Nawigacja + Formularz wyszukiwania + Ikony mediów społecznościowych (cząsteczki) = Ukończony masthead (organizm)

W idealnym przypadku będziesz w stanie ponownie wykorzystać organizmy w witrynie lub w różnych witrynach, zachowując ogólny układ i dostosowując go za pomocą innego tekstu i obrazów. Na przykład możesz użyć tego samego typu mastheadu we wszystkich projektowanych przez siebie witrynach lub możesz utworzyć organizm specyficzny dla produktu (zdjęcie + tytuł + cena), który powtarzasz na stronie produktu.

To wtedy interfejs sieciowy naprawdę zaczyna się kształtować w unikalny, spersonalizowany sposób. Do tej pory twój interfejs był tylko zbiorem prostych elementów. Na etapie organizmów strona internetowa staje się bardziej wizualna.

Jeśli miałbyś podzielić się swoim procesem z klientem, to jest ta część, w której powiedzieliby: „Och, rozumiem”. Nadszedł czas, aby zacząć tworzyć wireframe'y lub tworzyć makiety, aby klient mógł wyrazić swoją opinię, zanim przejdziesz dalej.

4. Szablony

Kiedy grupujesz razem organizmy, masz szablony. To wtedy dochodzi do zsumowania rzeczywistego układu strony. Podczas gdy cząsteczki i organizmy mają swoje własne, wewnętrzne układy, na etapie szablonów zaczynasz widzieć, jak się uzupełniają i oddziałują ze sobą; gdzie są umieszczone w stosunku do siebie; i jak płyną jako całość. Szablon daje kontekst cząsteczkom i organizmom. Pamiętaj, że szablony zawierają zawartość zastępczą, a nie zawartość niestandardową lub oryginalną.

Źródło: BradFrost.com

5. Strony

Strony przenoszą szablony na wyższy poziom, zastępując zawartość zastępczą rzeczywistą zawartością. Prawdopodobnie nie będzie to ostateczna treść, ale będzie bardziej reprezentatywna dla ostatecznego projektu i treści. Dodanie wysokiej jakości, stałych treści w tym momencie może być marnotrawstwem, ponieważ strona internetowa nadal musi być testowana, sprawdzana i poprawiana. Powiedział, że to jest możliwe, że można podłączyć do ukończonego treści - to zależy od tego, gdzie jesteś w tym procesie.

To jest etap, na którym witryna będzie poddawana największej kontroli. W zależności od recenzji i informacji zwrotnych, które otrzymasz, cząsteczki, organizmy i szablony mogą wymagać zmiany. To także dobry moment na przetestowanie wariantów projektu.

Końcowe przemyślenia

Rzecz w projektowaniu atomowym polega na tym, że nie jest nowy – słownictwo jest, ale teoria nie. Tak od dawna projektuje się strony internetowe. Mówienie w kategoriach projektowania atomowego nie sprawi, że automatycznie staniesz się świetnym projektantem lub programistą; nie zastępuje solidnej pracy.

Jedną z korzyści mówienia o tym w ten sposób, przy użyciu tego rodzaju terminologii do wyjaśnienia metodologii, jest to, że jest to łatwiejsze do zrozumienia dla osób niebędących programistami – możesz wyjaśnić swój proces klientom. A dla zorganizowanego dewelopera jest to sposób na podzielenie projektów. Będziesz mógł zagłębić się w jeden komponent lub małą grupę niedziałających elementów. Może pomóc ci zobaczyć las w poszukiwaniu drzew, zamiast mówić: „To wszystko jest wadliwe”.

Atomowy design pozwala na wykorzystanie kreatywności, nie gubiąc się w niej. Łączy podstawowe elementy i systemy projektowe w taki sposób, aby szybciej rozpocząć pracę nad projektem, dzięki czemu czas można spędzić tam, gdzie Twój kunszt i umiejętności są najbardziej potrzebne – na dokonywaniu skomplikowanych adaptacji, rozwiązywaniu problemów, zaspokajaniu potrzeb klientów i ostatecznie na tworzeniu odpowiedniej strony internetowej poza normą.

Utrzymaj tempo projektowania stron internetowych i zapoznaj się z 10 zasadami dobrego projektowania interfejsu użytkownika, które należy stosować w każdym projekcie projektowania stron internetowych.

Polecany obraz za pośrednictwem ShadeDesign / shutterstock.com