Projekt atomowy. Konwertuj na kod

Okazało się, że w wielu dziedzinach działalności, takich jak wzornictwo przemysłowe i architektura, elastyczne systemy modułowe znalazły zastosowanie do produkcji bardzo skomplikowanych obiektów: samolotów, statków i drapaczy chmur. Jednak w swoich badaniach ciągle wracałam do świata przyrody... I przypomniało mi to, jak siedziałam przy chwiejnym biurku na lekcjach chemii w szkole.

Korzystanie ze wskazówek z chemii

Chemii w mojej szkole uczył surowy nauczyciel, weteran wojny w Wietnamie z niezwykle luksusowym wąsem. Zajęcia pana Raya cieszyły się opinią jednych z najtrudniejszych w szkole ze względu na zadania domowe wymagające rozwiązania setek równań chemicznych.

Być może potrzebujesz (podobnie jak ja) przypomnienia, jak wygląda równanie chemiczne. Oto ona:

Przykład równania chemicznego, w którym atomy wodoru łączą się z tlenem, tworząc cząsteczki wody.

Równania chemiczne przedstawiają reakcje chemiczne. Często ta reakcja polega na łączeniu atomów pierwiastków w celu utworzenia cząsteczek. W powyższym przykładzie widzimy, jak wodór i tlen łączą się, tworząc cząsteczki wody.

W naturze atomy łączą się, tworząc cząsteczki. Cząsteczki mogą później łączyć się, tworząc stosunkowo złożone organizmy. Przyjrzyjmy się temu bardziej szczegółowo:

Atomy – jest to główny materiał budowlany, z którego zbudowane są wszystkie substancje istniejące w przyrodzie. Do każdego pierwiastek chemiczny mają swój własny zestaw cech i nie można ich podzielić na mniejsze cząstki bez naruszenia tego zestawu. (Tak, atomy w rzeczywistości składają się z jeszcze mniejszych cząstek: protonów, elektronów i neutronów, ale atomy są najmniejsze funkcjonalny jednostka).
Cząsteczki - są to grupy dwóch lub więcej atomów połączonych wiązaniami chemicznymi. Cząsteczki atomów mają swoje unikalne właściwości i są już bardziej namacalne i funkcjonalne w porównaniu do atomów.
Organizmy – jest to zbiór cząsteczek funkcjonujących jako jedna całość. To względne złożone struktury, które mogą obejmować organizmy jednokomórkowe, niezwykle złożone organizmy, aż do ludzi.

Oczywiście znacznie upraszczam niewyobrażalnie bogatą strukturę Wszechświata. Znaczenie jest jednak takie: atomy łączą się i tworzą cząsteczki, które z kolei łączą się i tworzą organizmy. Teoria atomowa stwierdza, że ​​całą materię w znanym wszechświecie można rozłożyć na skończony zbiór pierwiastków atomowych:

Układ okresowy pierwiastków chemicznych.

Najwyraźniej plan pana Raya, aby uczniowie łamali równania chemiczne niczym orzechy, w końcu zadziałał: wracam do tego po tych wszystkich latach w poszukiwaniu inspiracji do projektowania interfejsu.

Metodologia projektowania atomowego

Być może zastanawiasz się, dlaczego nagle zaczęliśmy mówić o teorii atomowej. A może nawet jesteś na mnie trochę zły, że przypominam ci o lekcjach chemii w szkole średniej. Ale teraz wszystko wyjaśnię, obiecuję.

Zdecydowaliśmy się na fakt, że całą materię we Wszechświecie można rozłożyć na skończony zbiór elementów. Interfejsy można przeanalizować do podobnego zestawu końcowego jednostki minimalne. Josh Duck stworzył układ okresowy elementów HTML, który pokazuje, że wszystkie strony internetowe, aplikacje, intranety i inne wodotryski składają się z tych samych elementów.

Układ okresowy pierwiastków HTML autorstwa Josha Ducka.

A ponieważ zaczynamy od podobnie ograniczonego zestawu komponentów budowlanych, możemy wykorzystać te same procesy, które zachodzą w chemii do projektowania i opracowywania interfejsów użytkownika.

Niech żyje projekt atomowy!

Projektowanie atomowe to metodologia składająca się z pięciu niezależnych etapów, których celem jest stworzenie inteligentniejszych i bardziej spójnych systemów projektowania interfejsów. Oto pięć etapów projektowania atomowego:

  1. Atomy
  2. Cząsteczki
  3. Organizmy
  4. Szablony
  5. Strony

Projekt atomowy składa się z atomów, cząsteczek, organizmów, wzorów i stron, które razem tworzą skuteczne systemy projektowania interfejsów.

Projektowanie atomowe jest procesem nieliniowym. To jak model mentalny, który pomaga nam myśleć o interfejsach użytkownika jako całości, jednocześnie pamiętając o szczegółach. Gra każdy z pięciu etapów ważna rola w hierarchii systemów projektowania interfejsów. Przyjrzyjmy się im bliżej.

Atomy

Jeśli atomy w chemii są podstawowymi cegiełkami materii, to tak atomy interfejsu służą jako fundament, na którym opierają się wszystkie interfejsy użytkownika. Atomy interfejsu obejmują formularze internetowe, pola wejściowe, przyciski i inne podstawowe elementy HTML, których nie można podzielić na mniejsze części bez utraty ich funkcjonalności.

Atomy interfejsu obejmują formularze internetowe, pola wejściowe i przyciski.

W naturze każdy atom ma swoje unikalne właściwości. Atom wodoru zawiera jeden elektron, a atom helu dwa. Nieodłączne właściwości chemiczne atomów mają ogromny wpływ na sposób ich wykorzystania ( Eksplozja Hindenburga była tak potężna, ponieważ jej przedziały wypełniono niezwykle łatwopalnym wodorem, a nie bardziej obojętnym helem.).

W ten sam sposób każdy atom interfejsu ma swoje unikalne właściwości, takie jak rozmiar głównego obrazu lub rozmiar czcionki nagłówka. Właściwości te wpływają na sposób wykorzystania każdego atomu zintegrowany system interfejs użytkownika.

Twoja biblioteka wzorców powinna zawierać wszystkie atomy, które demonstrują Twój podstawowe style. Wtedy nią zostanie przydatne źródło, do których warto się zwrócić podczas rozwoju i wsparcia własny system projekt.

Jednak, podobnie jak atomy w przyrodzie, atomy powierzchni styku nie istnieją w próżni i wprawiają się w ruch dopiero po zastosowaniu.

Cząsteczki

W chemii cząsteczki to grupy atomów połączonych ze sobą i uzyskujących w ten sposób określone właściwości. Cząsteczki wody i cząsteczki nadtlenku wodoru składają się z tych samych atomów: wodoru i tlenu. Mają jednak inne właściwości i inaczej się zachowują.

W obszarze interfejsów cząsteczki są stosunkowo proste grupy elementy, które funkcjonują razem jako całość. Na przykład pole wyszukiwania, wiersz wprowadzania i przycisk można połączyć, aby utworzyć cząsteczkę formularza wyszukiwania dla witryny.

Cząsteczka formularza wyszukiwania składa się z pola wyszukiwania, formularza wejściowego i przycisku Szukaj.

Po połączeniu atomy nagle zyskują cel. Atom pola wyszukiwania definiuje teraz znaczenie wejściowego atomu ciągu. Kliknięcie przycisku atom powoduje przesłanie formularza i rozpoczęcie wyszukiwania. W rezultacie mamy prosty i wszechstronny komponent, którego możemy użyć wszędzie tam, gdzie potrzebujemy funkcji wyszukiwania.

Składanie elementów w proste grupy funkcjonalne to już to, co robiliśmy podczas tworzenia interfejsów. Jednak zwracając uwagę na ten etap metodologii projektowania atomowego, wpadliśmy na kilka kluczowych pomysłów.

Tworzenie takich prostych komponentów pomaga projektantom i programistom interfejsów użytkownika przestrzegać zasady pojedynczej odpowiedzialności — ustalonej koncepcji w informatyce, która zachęca do stosowania filozofii „robienia jednej rzeczy i robienia tego dobrze”. Obciążenie jednego szablonu niepotrzebną złożonością eliminuje oprogramowanie elastyczność. Jednak tworzenie prostych cząsteczek interfejsu użytkownika ułatwia testowanie, ułatwia ponowne użycie komponentów i promuje ogólną spójność interfejsu.

Teraz, gdy mamy proste, funkcjonalne i nadające się do wielokrotnego użytku komponenty, z których możemy systematycznie korzystać, poznajmy organizmy!

Organizmy

Organizmy to stosunkowo złożone elementy interfejsu użytkownika, które składają się z grup cząsteczek i/lub atomów i/lub innych organizmów. Tworzą się organizmy oddzielne obszary interfejs.

Przyjrzyjmy się jeszcze raz cząsteczce formularza wyszukiwania. Formularz ten często znajduje się na górze strony w większości witryn internetowych, dlatego umieśćmy go w treści nagłówka witryny.

Organizm nagłówkowy składa się z cząsteczki formularza wyszukiwania, atomu logo i cząsteczki nawigacyjnej.

Nagłówek stanowi niezależny komponent interfejsu, choć sam składa się z kilku mniejszych elementów posiadających własne, unikalne właściwości i funkcje.

Organizmy mogą składać się z tego samego lub różne rodzaje Cząsteczki. Treść nagłówka składa się z heterogenicznych elementów: logo, podstawowej nawigacji i formularza wyszukiwania. Tego typu organizmy widzimy niemal na każdej stronie internetowej.

Organizmy takie jak nagłówki stron internetowych składają się z mniejszych cząsteczek: nawigacji, formularzy wyszukiwania, logo i innych.

Niektóre organizmy składają się z różnych cząsteczek, inne składają się z tej samej cząsteczki powtarzającej się w kółko. Przejdź do strony katalogowej dowolnego sklepu internetowego, a zobaczysz listę produktów prezentowaną w siatce.

Siatka produktów sklepu internetowego Gap składa się z tej samej powtarzającej się cząsteczki.

Możliwość projektowania od cząsteczek po bardziej złożone organizmy zapewnia projektantom ważny wgląd w kontekst.

Organizmy wykazują mniejsze i proste komponenty w działaniu i same służą jako niezależne komponenty, które można ponownie wykorzystać. Organizm siatki produktów można wykorzystać wszędzie tam, gdzie trzeba pokazać grupę produktów: od menu wyboru kategorii katalogowej po wyświetlenie wyników wyszukiwania odpowiednich produktów.

Teraz, gdy ustaliliśmy miejsce organizmów w naszym systemie projektowania, możemy wyjść poza metaforę chemiczną i wykorzystać wszystkie te elementy do tworzenia stron internetowych.

Szablony

Teraz, przyjaciele, czas pożegnać się z chemią. Metafory atomów, cząsteczek i organizmów zapewniają użyteczną hierarchię, która pomogła nam zacząć świadomie korzystać ze składników systemów projektowych. Nadszedł czas, aby przejść na język, który lepiej pasuje do naszych produktów końcowych i ma więcej sensu dla klientów, szefów i współpracowników. Próba sztucznego dalszego używania metafor chemicznych może zmylić innych i sprawić, że pomyślą, że oszalałeś. Więc po prostu mi zaufaj.

Szablony to obiekty na poziomie strony, które łączą komponenty w układ i formularz podstawowa struktura projektowanie treści. Weźmy nasz poprzedni przykład nagłówka i użyjmy go z szablonem strona główna.

Szablon strony głównej składa się z cząsteczek i organizmów umieszczonych w układzie.

Ten szablon zawiera wszystko niezbędne komponenty którzy pracują razem. W rezultacie stosunkowo abstrakcyjnym cząsteczkom i organizmom nadano kontekst. Podczas tworzenia efektywnego systemu projektu ważne jest, aby pokazać, jak komponenty wyglądają i współpracują ze sobą w kontekście. Utwórz układ i upewnij się, że wszystkie części dodają wartość do już funkcjonującej całości (powrócimy do tego później).

Inny ważna cecha szablony polega na tym, że one skoncentruj się na podstawowej strukturze projektu strony, a nie na jego ostateczną treść. Systemy projektowe muszą uwzględniać możliwość zmiany treści, dlatego niezwykle przydatne jest ustalenie podstawowych cech komponentów: rozmiarów obrazów, długości nagłówków, objętości tekstu itp.

Mark Boulton o znaczeniu opracowania podstawowej struktury treści strony:

Możesz stworzyć dobre doświadczenie użytkownika, nie wiedząc, jakiego rodzaju treści będą znajdować się w witrynie. Jedyne, czego nie możesz zrobić, to tworzyć dobre doświadczenie nie znając struktury tej treści. Z czego się składa, a nie czym będzie w efekcie końcowym. ~Marek Boulton

Kiedy już zrozumiemy szkielet strony, możemy stworzyć system, który uwzględnia różne rodzaje treści i wyznacza niezbędne granice. Szablon strony głównej Time Inc demonstruje kilka kluczowych elementów w działaniu i pokazuje strukturę treści w odniesieniu do rozmiarów obrazu i długości tekstu: Etap strony jest najczęściej stosowanym i najczęściej stosowanym ważny etap projekt atomowy i istnieje na to oczywiste wyjaśnienie. W końcu to strony są tym, z czym użytkownicy będą wchodzić w interakcję, gdy otworzą Twoją witrynę lub aplikację. To właśnie podpisze Twój klient lub szef. A oto, co zobaczysz, gdy złożysz wszystkie komponenty w całość — piękny i funkcjonalny interfejs użytkownika. Niesamowity!

Ale strony są potrzebne nie tylko do demonstracji wersja ostateczna interfejs, tak jak będą go widzieć użytkownicy. Strony wymagane do przetestowania skuteczności system podstawowy projekt. To właśnie na etapie strony możemy zobaczyć, jak działają wszystkie szablony, gdy pojawia się prawdziwa treść. Czy wszystko wygląda świetnie i działa zgodnie z oczekiwaniami? Jeśli nie, możemy cofnąć się o krok i zmienić cząsteczki, organizmy i wzorce, aby lepiej spełniać wymagania dotyczące treści.

Wypełniając układ strony głównej Time Inc. prawdziwą treść, widzimy, że wszystkie podstawowe szablony działają skutecznie.

Dodając rzeczywistą treść, możemy sprawdzić, czy komponenty interfejsu użytkownika poprawnie ją prezentują.

Możesz tworzyć różne warianty szablony stron, co jest również ważne przy tworzeniu funkcjonalnych i niezawodnych systemów projektowych. Oto kilka przykładów opcji szablonów:

  • Użytkownik Misha dodał do koszyka jeden produkt, a Petya dziesięć.
  • Panel administracyjny aplikacji internetowej zwykle pokazuje ostatnią aktywność, ale dla użytkowników, którzy korzystają z niej po raz pierwszy, dane te nie są jeszcze dostępne.
  • Tytuł jednego artykułu zawiera 40 znaków, a drugiego 340.
  • Użytkownicy z uprawnieniami administratora, w przeciwieństwie do zwykłych użytkowników, mogą widzieć dodatkowe przyciski i opcje panelu sterowania.

We wszystkich tych przykładach podstawowe szablony są takie same, ale interfejs użytkownika zmienia się, aby odzwierciedlić dynamikę treści. Różnice te bezpośrednio wpływają na sposób postępowania z podstawowymi cząsteczkami, organizmami i szablonami. Tworzenie stron uwzględniających zmienność pomaga tworzyć bardziej odporne systemy projektowe.

Na tym polega projektowanie atomowe. Pięć odrębnych kroków, które wspólnie tworzą skuteczny system projektowania interfejsu użytkownika. Krótkie podsumowanie projekt atomowy:

  • Atomy to minimalne cząstki interfejsu użytkownika, które służą jako podstawowe elementy składowe interfejsu.
  • Cząsteczki to zbiory atomów tworzące stosunkowo proste elementy interfejsu użytkownika.
  • Organizmy są stosunkowo złożonymi komponentami, które tworzą niezależne obszary styku.
  • Szablony — to układy zawierające wszystkie komponenty demonstrujące podstawową strukturę treści.
  • Strony to szablony połączone z prawdziwą treścią. Ponadto na tym etapie tworzone są strony z wariantami, aby zademonstrować ostateczny interfejs i przetestować solidność systemu projektowego.

Oferuję czytelnikom Habrakhabr tłumaczenie artykułu Brada Frosta „Atomic Web Design”.

Nie projektujemy stron, projektujemy systemy składowe. – Stephen Hay

W miarę ewolucji rzemiosła projektowania stron internetowych, coraz bardziej odczuwamy potrzebę przemyślanego, rozwój systemów, w przeciwieństwie do tworzenia prostych zestawów stron internetowych.

O tworzeniu systemów projektowych powiedziano wiele, a największy nacisk kładzie się głównie na ustalanie kolorów, typografii, siatek, tekstur itp. Ten rodzaj myślenia jest z pewnością ważny, ale trochę mniej interesują mnie te aspekty projektowania, ponieważ, ogólnie rzecz biorąc, są one zawsze subiektywne. W Ostatnio Bardziej zastanawia mnie pytanie, z czego zbudowane są nasze interfejsy i jak możemy je projektować w sposób bardziej systematyczny.

W poszukiwaniu inspiracji wróciłam do chemii. Wszystkie substancje (czy to ciała stałe, ciecze, gazy, proste, złożone itp.) składają się z atomy. Atomy łączą się ze sobą i tworzą Cząsteczki, które z kolei łączą się i tworzą organizmy. Ostatecznie w ten sposób powstaje cała materia w naszym wszechświecie.

Podobnie interfejsy składają się z mniejszych komponentów. Oznacza to, że możemy podziel interfejsy na podstawowe bloki i połącz je, stopniowo zwiększając złożoność. To jest esencja atomowego projektowania stron internetowych.


Okresowy system elementów HTML.

Co to jest projekt atomowy

Projektowanie atomowe to metodologia tworzenia systemów projektowych. W projekt atomowy Istnieje pięć różnych poziomów:

  1. Atomy
  2. Cząsteczki
  3. Organizmy
  4. Szablony
  5. Strony

Atomy

Atomy w przyrodzie są podstawowymi cegiełkami budującymi materię. W kontekście interfejsów internetowych atomy to znaczniki HTML, takie jak formularz, pole wejściowe lub przycisk.


Atomy mogą zawierać jeszcze bardziej abstrakcyjne elementy, takie jak palety kolorów, czcionki, czy nawet bardziej ukryte aspekty interfejsu, takie jak animacje.

Podobnie jak atomy w naturze, są one dość abstrakcyjne i często same w sobie są bezużyteczne. Jednak zaleta ich konstrukcji polega na zadaniu jeden wspólny styl interfejs.

Cząsteczki

Wszystko staje się ciekawsze i bardziej namacalne, gdy zaczynamy łączyć atomy. Cząsteczki to zbiory połączonych ze sobą atomów. Mają swoje własne właściwości i stanowią szkielet naszego systemu projektowania.

Na przykład etykieta, pole wejściowe i przycisk nie są zbyt przydatne same w sobie, ale mogą być naprawdę przydatne, jeśli zostaną połączone.


Budowanie cząsteczek z atomów poprawia zdrowie psychiczne „zrób jedną rzecz, ale rób to dobrze”. Chociaż cząsteczki mogą być dość złożone, najczęściej tak jest prosta kombinacja atomy, zbudowane do ponownego użycia.

Organizmy

Cząsteczki dają nam pewne elementy konstrukcyjne, z którymi możemy pracować. Teraz możemy je połączyć, tworząc organizmy. Organizmy to stowarzyszenia cząsteczek, które tworzą raczej złożone, oddzielne sekcje interfejsu.


Poruszamy się coraz szybciej do specyfika. Klient może nie być bardzo zainteresowany cząsteczkami układu projektowego, ale wraz z pojawieniem się organizmów można zaobserwować początek powstawania produktu końcowego. Dan Moll (z którym współpracuję przy kilku projektach) wykorzystuje kolaże elementów, które pokazują kluczowe pomysły i wskazówki dotyczące interfejsu bez konieczności projektowania całej witryny.

Organizmy mogą składać się z podobnych lub różnych typów cząsteczek. Na przykład tytuł strony może składać się z różne komponenty- logo, menu główne, formularz wyszukiwania i lista kanałów medialnych. Ale organizm wyświetlający siatkę produktów może zawierać pojedynczą cząsteczkę (obraz produktu, nazwę i cenę), która powtarza się wiele razy.

Przejście od cząsteczek do organizmów ułatwia tworzenie niezależnych komponentów gotowych do ponownego użycia.

Szablony

Na tym etapie przestaniemy sięgać po analogie z chemią, aby komunikować się językiem bardziej zrozumiałym dla naszych klientów. Szablony składają się najczęściej z grup organizmów połączonych ze sobą w celu utworzenia stron. Na tym etapie widoczny staje się szerszy obraz sytuacji.


Szablony są bardzo specyficzne i zapewniają kontekst wszystkim raczej abstrakcyjnym cząsteczkom i organizmom. Jest to szablon, który pozwala zobaczyć ostateczny projekt. Z mojego doświadczenia z tą metodologią wynika, że ​​szablony zaczynają się od szkieletów HTML, ale z biegiem czasu stają się coraz bardziej precyzyjne. Ostatecznie stają się produktami końcowymi. Bearded Studio w Pittsburghu ma podobny proces, w którym projekty zaczynają się od czerni i bieli, bez znaczników, ale stopniowo zdobywając konkrety i szczegóły, aż staną się dziełem finalnym.

Strony

Strony są konkretnymi instancjami szablonów. Aby dokładnie przekazać to, co zobaczy użytkownik, treść „stubowa” zostaje zastąpiona treścią prawdziwą.


Strony są najwyższy poziom konkrety i dlatego są najbardziej namacalne. To właśnie tam większość zaangażowanych osób spędza większość czasu i tam pisze się większość recenzji.

Etap stronicowy jest niezbędny, bo to na nim sprawdzana jest efektywność całego systemu projektowego. Widząc wszystko w kontekście, możemy cofnąć się o krok i zmienić nasze cząsteczki, organizmy i wzorce, aby lepiej pasowały do ​​rzeczywistego kontekstu projektu.

Jest to również etap testowania zmian w szablonach. Na przykład musisz upewnić się, że nagłówek o długości 40 znaków wygląda spójnie z nagłówkiem o długości 340 znaków. Lub sprawdź, jak zamiast koszyka z jednym artykułem wygląda jak koszyk z 10 artykułami i rabatem za pomocą kodu promocyjnego. Sytuacje te wpływają na sposób, w jaki budujemy nasz system.

Dlaczego projekt atomowy

Pod wieloma względami w ten sposób tworzyliśmy strony internetowe, nawet jeśli nie myśleliśmy o tym świadomie.

Projektowanie atomowe zapewnia jasną metodologię tworzenia systemów projektowych. Klienci i członkowie zespołu mogą oceniać pomysły na konkretny system projektowy, obserwując etapy jego rozwoju.

Projekt atomowy daje nam możliwość przejścia od abstrakcji do konkretu. Dzięki temu możemy tworzyć systemy, które są skalowalne i mają spójny, spójny styl, a jednocześnie pokazują ostateczny całościowy obraz. Zamiast tego przeprowadź proces destrukturyzacja przemienia się w montaż- tworzymy konstrukcję od samego początku, zamiast później starannie dobierać odpowiednie szablony.

Laboratorium Wzorów

Aby zastosować tę metodologię w mojej pracy, (z pomocą Dave'a Oslena) opracowałem narzędzie o nazwie Pattern Lab do tworzenia systemów projektowania atomowego. O Laboratorium wzorców opowiem bardziej szczegółowo później, ale nie wahaj się sprawdzić źródła na Githubie

Optymalizując pracę projektową nie można przesadzić. Możesz podejść do problemu globalnie i zastosować metodologię projektowania atomowego lub ograniczyć się do UI-kit. Dowiemy się, do czego służą narzędzia, jak ich nie pomylić i uzyskać dokładnie to, czego potrzebujesz do swojego projektu.

Projekt atomowy

Główną właściwością projektowania atomowego jest to, że nie jest to technologia, ale metodologia. Za pomocą projektowania atomowego możesz stworzyć kompletny system projektowania, niezależnie od programu, w którym jesteś przyzwyczajony do pracy. System ten zawiera informacje o elementach interfejsu i umożliwia szybkie przejście od poziomu abstrakcji do poziomu konkretu.

W 2013 roku metodologia ta została zaproponowana przez Brada Frosta i opisana w książce Atomic Design. Dokonał analogii między interfejsami a chemią: tak jak cała materia we wszechświecie składa się z atomów, tak wszystkie interfejsy składają się ze składników. Elementy te można podzielić na 5 poziomów.

  1. Atomy to najmniejsze elementy: formularz, pole wejściowe, ale także elementy bardziej abstrakcyjne, takie jak animacje. Atomy wyznaczają ujednolicony styl interfejsu i stają się budulcem strony.
  2. Cząsteczki to połączenie atomów, które są bardziej przydatne razem niż indywidualnie. Na przykład kombinacja tytułu, linku i obrazu.
  3. Organizmy to duże części interfejsu: logo, nagłówek ze wszystkimi przyciskami, pole wyszukiwania, lista sieci społecznościowych.
  4. Szablony – elementy z kilku organizmów, ramka strony, jej prototyp.
  5. Strony są ostatni etap z odpowiednią treścią, która sprawdza efektywność całego systemu projektowego.

Po utworzeniu atomów można z nich złożyć nowe strony. Podejście atomowe jest wygodne w użyciu w przypadku dużych i szybko rozwijających się projektów. Jeśli użytkownicy potrzebują małej witryny, za miesiąc zyska nowe sekcje i obciążenie wzrośnie. Jeśli projektant ma gotowy system, tworząc nowe strony nie będzie pytań o kolorystykę czy ilość wcięć.

Zestaw interfejsu użytkownika

UI-kit to zestaw elementów interfejsu: nawigacja, przyciski, zakładki, zakładki, banery. Najważniejsze jest to, że zestaw interfejsu użytkownika określa wszystkie style, rozmiary, ich zachowanie i stany interakcji.

Jeśli nie ma potrzeby zaczynać za każdym razem od zera wymagany element przechowywane w zestawie UI.



Jest to ważne narzędzie do dostosowywania projektu w oparciu o odbiorców, aktualizowania projektu i tworzenia jednolity styl kilka produktów. Bez zestawu UI podczas tworzenia nowych stron możliwe jest zachowanie kolorów i czcionek określonych w przewodniku, ale przyciski i pola mogą różnić się rozmiarem.

Dla maksymalna prędkość działa, gotowy zestaw interfejsu użytkownika musi zostać przetłumaczony na kod, do którego projektant układu będzie miał dostęp.

Dlaczego te pojęcia są mylone?

System projektowania, w tym tworzony przy użyciu metodologii projektowania atomowego, to kombinacja zasad tworzenia produktu, a nie tylko biblioteka komponentów. Oznacza to bardziej globalne podejście i zrozumienie elementów na innym poziomie – od mniejszych do większych.

Szczegółowy system projektowania integruje zarówno tę metodologię, jak i zestaw interfejsu użytkownika. Ale metodologię, według której projekt zostanie zaprojektowany, wybiera się przed rozpoczęciem pracy. Następnie z gotowych atomów i modeli powstaje projekt. Na koniec zestaw interfejsu użytkownika składa się z gotowych elementów, które można wykorzystać do tworzenia witryny internetowej i ułatwienia układu.

Zestaw interfejsu użytkownika nie będzie tak kompletny, jak system zbudowany przy użyciu metodologii projektowania atomowego. A jeśli kierujesz się tylko Ui-kitem, na stronie może pojawić się szablon, który będzie nieco inny i nie będzie pasował.

Jeśli nie rozumiesz tego do końca i pomylisz pojęcia, ryzykujesz otrzymaniem jedynie UI-kit - dużego kodu źródłowego z zestawem cząsteczek, oczekującego rozbudowanego systemu. Ale cokolwiek wybierzesz na końcu projektu, zarówno zestaw interfejsu użytkownika, jak i system projektowania atomowego przyspieszą dalsza praca nad projektem.

W agencji „NEXT” tworzą zestaw interfejsu użytkownika pod koniec prac nad projektem, gdy witryna zaczyna zawierać więcej niż określoną liczbę unikalnych szablonów, na przykład projekty takie jak „Porozmawiajmy z Sbierbanku”, „Kucyk Ekspres”. W projekcie Alfa-Travel specjaliści agencji wykorzystali gotowy system projektowy Alfa-Bank, dzięki czemu strona internetowa nowego produktu okazała się całkowicie w stylu marki, a co najważniejsze, z mechaniką działania znaną użytkownikom.

Projektowanie atomowe zakłada bardziej globalne podejście i zrozumienie elementów na innym poziomie – od małych do dużych. Zacznij od atomów i zakończ stroną ze zgromadzoną treścią. Jeśli wynik jest nieharmonijny, zacznij od nowa na poziomie atomowym.

Zatem kluczowe różnice między projektem atomowym a zestawem interfejsu użytkownika:

  • Zestaw interfejsu użytkownika jest montowany po ukończeniu projektu;
  • W metodologii projektowania atomowego istnieje strona o najwyższym poziomie szczegółowości, w UI-kicie takiego poziomu nigdy nie ma;
  • Projektowanie atomowe jest akceptowane jako metodologia od samego początku prac projektowych;
  • Atomic design to rozszerzony system projektowania, którego częścią jest zestaw interfejsu użytkownika.

W kontakcie z

Koledzy z klasy

Inne posty

Jak znaleźć skarby na zdjęciach stockowych

Nawet duże marki popełniają błędy przy wyborze zdjęć ilustrujących swoje usługi. Zastanówmy się, jak znaleźć obrazy do witryny internetowej, które...

Sztuka dialogu: nawiązanie komunikacji z klientem

Wiele wysiłku wkłada się w tworzenie strategie marketingowe, tworząc odpowiedni zespół, wybierając narzędzia techniczne, ale standardy komunikacji...

Strona 404: jak pomóc użytkownikowi, jeśli...

Każdy z nas spotkał się ze stroną 404. Ten błąd oznacza, że ​​strona nie została znaleziona. Podzielmy się naszymi doświadczeniami, jak tego uniknąć i nie tylko...

5 Przydatnych narzędzi dla menedżerów i...

Pojawiło się tak wiele programów organizujących proces, że wybór tego właściwego nie jest już łatwy. Każdy ma swoją aplikację na smartfon i chmurę, a...

Jak współpracować z inną agencją i ulepszyć projekt

Często w przypadku złożonego i zakrojonego na dużą skalę projektu zaangażowanie kilku agencji jest nieuniknione. Zastanówmy się, jakie są plusy i minusy tej sytuacji...

Kiedy jest premiera? Oceniamy skuteczność zespołu...

W zespole programistów MegaFon stale pracujemy nad kontrolą jakości kodu. W tym celu mamy praktyczny przegląd kodu, autotesty i różne...

Must have w projektowaniu stron internetowych

Na tej liście nie znajdziesz prognoz dotyczących popularności treści wideo, interfejsy głosowe I wersja adaptacyjna strona, bo o to w tym wszystkim chodzi...

„Jak Tinkov”: jakie decyzje jesteśmy zobowiązani…

Rosyjskie banki były jednymi z pierwszych w RuNet, które zaczęły przekształcać swoje strony internetowe w usługi. Złożyło się na to kilka czynników. Po pierwsze,...

Magiczny przycisk. Lista kontrolna promocji...

Skuteczność promocyjnego serwisu internetowego nie zależy od projektu, praw autorskich i zalet oferty. Sukces leży w tym, jak wszystko ze sobą współpracuje, tworząc...

Trendy w marketingu cyfrowym w 2019 roku

O tym, że blockchain i VR zmieniają nasze życie w sieci, słyszymy już od dawna, ale na razie wciąż przypominają technologie z serialu Black Mirror. Porozmawiajmy...

Top 5 materiałów 2018 roku

Przez cały rok rozmawialiśmy o naszych osiągnięciach, było ciekawie kampanie reklamowe, podzielili się swoimi doświadczeniami i poglądami na temat wykorzystania nowych technologii w...

Tradycje noworoczne w Next. Spoiler: to nie jest...

W grudniu wszyscy martwią się nie tylko raportami i wydarzeniami, ale także tym, jak pogratulować klientom. W Next istnieje świąteczna tradycja, która...

Jak zatrudnić robota zamiast kierownika projektu

Czas na eksperymenty. 10 kart A/B...

Opowiemy Ci o metodzie, która pomoże poprawić użyteczność strony, zwiększyć ruch i co najważniejsze, zwiększyć konwersję.

Nie każ mi myśleć: jak obniżyć poziom...

Technologie i standardy się zmieniają, a projektowanie stron internetowych musi być z nimi zgodne. Ale nawet jeśli nowy design estetycznie i funkcjonalnie bez zarzutu...

Poszukuję Dream Teamu do stworzenia strony internetowej

Znalezienie świetnego zespołu do realizacji projektu jest wyzwaniem dla menedżera. Możesz organizować swoją pracę na różne sposoby: zbierz zespół ze swoich pracowników,...

Zwolnienie czy życie? Halloween w wersji cyfrowej

W najstraszniejszą noc w roku specjaliści naszej agencji cyfrowej bardziej przerażają nie siły nadprzyrodzone, ale terminy, a najstraszniejsze...

Jak dane i emocje zmieniają projekt

Jasne podejście przy tworzeniu nowej strony internetowej lub jej przeprojektowaniu pomoże usystematyzować pracę: nie musisz podejmować decyzji na chybił trafił i myśleć, że to zadziała…

Ciemna strona designu

Apple ustawiło ciemny motyw jako domyślny nowy Mac iOS i YouTube rozpoczęły testy ciemne tło rok temu. Ciemne motywy w interfejsach...

Dlaczego potrzebujesz testowania witryny?

Przed testami strona zachowuje się jak kot Schrödingera. Nie wiesz, czy wszystko działa zgodnie z założeniami. Testy przed uruchomieniem lub aktualizacją serwisu...

Wielki Brat: jak i dlaczego korzystać z...

Dziś strona internetowa potrafi dopasowywać się do użytkownika w czasie rzeczywistym, co pomaga wzmacniać relacje z marką i spełniać wysokie...

Projekt portalu B2B: znajdź różnice

Istnieje opinia, że ​​firmy świadczące usługi dla B2C i B2B wymagają innego podejścia do opracowania projektu swojej strony internetowej, ponieważ...

Jeszcze raz o wydajności: lista kontrolna przed...

Aby zabrać w podróż wszystko, czego potrzebujesz, zorganizuj porządek w domu, zacznij prowadzić zdrowy wizerunekżyciu, możesz korzystać z list kontrolnych. Jest taki sam...

Typografia w projektowaniu stron internetowych

Typografia na stronie internetowej to nie tylko wybór czcionki, ale zbiór zasad projektowania tekstu. Opierają się na tym, jak użytkownik postrzega tekst na...

Jak marka może opowiedzieć swoją historię?

Psychologowie ewolucyjni wykazali, że atrakcyjność opowieści wynika ze struktury naszego mózgu. Jak podaje portal Brainrules, usłyszane informacje...

Usługi finansowe w wersji cyfrowej: przyszłość już jest...

Wygoda naszego życia w dużej mierze zależy od tempa rozwoju sektora finansowego w technologii cyfrowej. Wiele osób jest już przyzwyczajonych do płacenia narzędzia Online...

Analityk UX i inne zawody z przedrostkiem UX

Projekt UX określa, jakie będzie doświadczenie użytkownika z produktem. Podczas procesu projektowania doświadczenie użytkownika cztery biorą udział...

Korzyści z używania responsywnego projektowania stron internetowych

Jak dostosować projekt do różne urządzenia aby był przyjazny dla użytkownika? Razem z producentem treści InVision Willem…

Najlepsze kampanie digitalowe na Mistrzostwa Świata 2018

Mistrzostwa rozpoczęły się 14 czerwca, a ostra rywalizacja między markami rozpoczęła się dużo wcześniej. Na najważniejszym wydarzeniu sportowym na świecie zobaczymy...

Jak stworzyć skuteczny plan treści

Maksymalna skuteczność kampanii zależy od treści. Co jest lepsze, tradycyjne podejście polegające na przygotowaniu całej zawartości z miesięcznym wyprzedzeniem czy eksperymentowanie z...

Zasada Hemingwaya: jako agencja i klient...

Z oceną jakości koncepcji kreatywnej wiążą się dwa problemy. Po pierwsze, jak to ocenić przez agencję, w zespole, co dalej pominąć, a co…

Przegląd najpopularniejszych systemów sterowania...

System zarządzania projektami może znacząco wpłynąć na produktywność firmy. Trudno zdecydować się na system pracy z klientami, a jednak…

Youtube dla siebie: 5 kroków do treści wirusowych

Nad filmem dla firmy lepiej pracować wspólnie z agencją produkcyjną. Przeglądasz portfolio agencji i wybierasz tę, która odpowiada Twojemu stylowi i cenie. Co...

Jak agencje przedstawiają swoje sprawy

Kiedy klient kontaktuje się z agencją, potrzebuje nie tylko strony internetowej czy akcji promocyjnej, ale gwarancji i rozwiązania problemu. A przypadki pokazują, jak...

Po prostu o kompleksie: zwinny rozwój

Początkowo Agile było domeną programistów. Tak nazwali metody tworzenia oprogramowania, które zasadniczo różniły się od tradycyjnych. Ale okazało się, że...

Czym jest reklama natywna i jak działa?

Od kilku lat wszyscy mówią o reklamie natywnej. Business Insider podał niedawno, że do 2021 roku przychody z tego tytułu wzrosną do 74% całkowitego...

Opracowanie ujednoliconego systemu projektowania dla Grupy VTB

Własne systemy projektowe – co to jest? Trend modowy czy narzędzie pracy służące do promocji marki wysokiej jakości? Porozmawiajmy o naszym doświadczeniu.

Czym różni się projektant produktu od zwykłego...

Zebraliśmy pięć charakterystycznych cech projektanta produktu od projektanta pracującego nad „strumieniem” – aby w końcu zrozumieć problem i…

Szybciej, wyżej, mocniej: jak korzystać z wideo...

Dlaczego treści wideo jest coraz więcej, gdzie warto publikować swoje filmy i jak ulepszyć je.

Mikroinfluencerzy są przyszłością influencer marketingu

Jednym z trendów w influencer marketingu stał się „powrót mikroinfluencerów” – blogerów z niewielkim, ale aktywna publiczność. Marki płacą mniej...

Marketing messengerowy jako nowoczesny sposób...

Postanowiliśmy sprawdzić jak najwięcej popularne komunikatory i dowiedz się, jak marki mogą je wykorzystać do komunikacji z klientami.

Formy płatności za prace związane z rozwojem witryny

Przeanalizujemy szczegółowo, jakie są formy wyceny za stworzenie projektu internetowego.