Podchodzenie do procesu projektowania strony internetowej z poziomu przeglądarki

„Oto za zwariowanych, odmieńców, buntowników, awanturników, okrągłe kołki w kwadratowych dziurach… tych, którzy widzą rzeczy inaczej – nie lubią zasad… Możesz ich cytować, nie zgadzać się z nimi, gloryfikować lub oczerniać ich, ale jedyne, czego nie możesz zrobić, to ich ignorować, ponieważ zmieniają rzeczy…” — kampania Apple Think Different , Steve Jobs, 1997.

Przez większość czasu projektanci nadal tworzą statyczne makiety ekranów przy użyciu tradycyjnych narzędzi projektowych podczas procesu projektowania stron internetowych. Ale niektórzy projektanci robią wielki krok i omijają je, przechodząc od razu do kodu, budując i dostosowując projekty w przeglądarce oraz testując swoje projekty tak, aby wyglądały na ludzi w czasie rzeczywistym. Czy to szaleni, odmieńcy, buntownicy?

Zazwyczaj tradycyjny proces tworzenia witryn internetowych obejmuje wiele etapów, w tym planowanie, strategię treści, projektowanie, tworzenie szkieletów, prototypowanie, testowanie, opracowywanie, publikowanie i tak dalej. Ale czy w fazie projektowania może istnieć inny sposób na stworzenie responsywnych projektów witryn „doskonałych w pikselach” i całkowite ominięcie narzędzi projektowych?

Wraz z rozwojem responsywnego projektowania i różnorodnością używanych urządzeń (telefony komórkowe, tablety, laptopy, komputery stacjonarne, zegarki) znacznie trudniej jest zachować spójność — a biorąc pod uwagę więcej ruchomych części, podejście do projektowania stron internetowych i interfejsów Zmienia się.

Chociaż projektant nie musi zostać ekspertem w zakresie kodowania, jednym z rozwiązań jest dla projektantów rozpoczęcie bezpośredniej pracy z kodem, który steruje witryną internetową. Projektanci, którzy potrafią zmagać się z kodem za pomocą odrobiny HTML i CSS, będą stanowić wielki atut każdego zespołu i ogólnie będą mieli ogromną przewagę.

Czemu? Angażując projekt responsywnego projektu strony internetowej ze wszystkimi jego złożonościami, projektanci zazwyczaj nie mają czasu na stworzenie statycznego projektu jednego komponentu (powiedzmy nagłówka lub stopki) w 10 różnych rozdzielczościach i rzutniach. Nawet jeśli projektują tylko dla najpopularniejszych urządzeń, nadal będą musieli wziąć pod uwagę 4-5 ekranów o różnych proporcjach, gęstości ekranu i wymiarach ekranu. Co najmniej niemałe zadanie.

Rozwiązywanie problemów związanych z projektowaniem stron internetowych za pomocą najpierw pióra i papieru

Przyjrzyjmy się innym podejściu do projektowania stron internetowych i procesowi planowania.

Pierwsza faza rozpoczyna się od kwestionariusza klienta zawierającego pytania o ogólne cele projektu z perspektywy biznesowej, odbiorców docelowych, strategie konwersji, różne oczekiwania dotyczące wydajności i tak dalej. Odbywa się to przed rozpoczęciem faktycznej fazy projektowania, aby lepiej zrozumieć potrzeby klienta i ogólnie projekt oraz aby być bardziej wydajnym na całej linii.

Następnym krokiem jest napisanie zarysu projektu, aby potwierdzić, że brief został zrozumiany. Jest to pomocne podczas pracy nad projektami w niszy, w której możesz nie mieć dużego doświadczenia lub wiedzy. Nazwijmy to specyfikacją funkcjonalną, ale mniej techniczną.

Pomaga to w definiowaniu terminologii, słów kluczowych i procesów. W zależności od złożoności projektu, dobrym pomysłem jest wykonanie kilku scenariuszy i przepływów użytkowników — zazwyczaj jest to wprowadzanie, wyszukiwanie i nawigacja w witrynie lub „dodaj do koszyka” i przepływ kasy, jeśli jest to witryna eCommerce.

Szkielet i prototypowanie

Prototypowanie to kolejny etap w procesie projektowania stron internetowych. Dobrym początkiem jest zbudowanie szybkich makiety, aby porozmawiać o układzie strony, funkcjach i tym, jak strony witryny będą wyglądać na różnych urządzeniach. Zbudowanie dziesiątek makiet różnych szablonów i komponentów nie zajmuje dużo czasu. Z nich można stworzyć prosty prototyp strony internetowej, a w zależności od złożoności projektu można użyć narzędzi do prototypowania, takich jak InVision, Adobe XD, Balsamiq, Moqups lub Axure.

Tablice nastroju i inwentarz interfejsów

Następnym krokiem jest stworzenie moodboardu: zbiór rzeczy, które projektant, klient i inni interesariusze mogą polubić na innych stronach internetowych — układy, wygląd, kolory lub czcionki, ikony, obrazy i tak dalej. Pomoże to zdefiniować ogólny wygląd witryny. Jeśli klient ma przewodnik po stylu brandingu, należy go wziąć pod uwagę i włączyć do nowego projektu witryny.

Po zatwierdzeniu różnych artefaktów — makiety, prototypy, makiety, moodboardy itp. — dobrym pomysłem jest wykonanie inwentaryzacji interfejsów.

Inwentarz interfejsu to obszerny zbiór elementów, z których składa się Twój interfejs.

Brad Mróz

Jeśli robisz responsywne projektowanie stron internetowych od podstaw, zacznij od spisania wszystkich komponentów i elementów, z których projekt zostanie zbudowany. Lista nieuporządkowana wystarczy i jest zdecydowanie lepsza niż nic. Na przykład tabele, przyciski, obrazy, typografia, media, formularze, nawigacja, komponenty itp.

Projektowanie w przeglądarce

„Projektowanie w przeglądarce” to termin, który stał się popularny wraz z rozwojem responsywnego projektowania stron internetowych. Aby zminimalizować godziny spędzone w programach do projektowania, takich jak Sketch, projektanci zostali wezwani do przeniesienia fazy projektowania do przeglądarki i wykorzystania CSS do układu i stylizacji. Takie podejście do projektowania stron internetowych okazuje się bardziej wydajne, ponieważ eliminuje wiele kroków.

Skupiając się na makiecie HTML i testując pomysły projektowe „w przeglądarce” za pomocą CSS, można zaoszczędzić czas zwykle spędzany na tworzeniu statycznych makiet stron w innych narzędziach projektowych, takich jak Sketch. Dobrym pomysłem dla projektantów jest zaopatrzenie się w dobry edytor kodu i wymyślenie dobrej metody odświeżania przeglądarki, aby mogli zobaczyć zmiany w czasie rzeczywistym. Na przykład Sublime Text i Codekit to świetne połączenie.

HTML i CSS, ustrukturyzowane tak, jak są, zmuszają Cię do myślenia o wzorcach i trzymają Cię w ryzach. Łatwiej jest myśleć o modułowości podczas tworzenia komponentów HTML, które można łatwo kopiować, duplikować i wypełniać dynamicznymi danymi przy zachowaniu tej samej struktury. Jeśli chcesz stworzyć konkretną modyfikację, musisz wyraźnie wskazać ten element lub dodać inną klasę CSS.

Jeśli stylizujesz nagłówki, o ile nie zostaną one zastąpione, będą one spójne w całej witrynie. To samo dotyczy innych elementów. Ten rodzaj myślenia zmusza Cię do standaryzacji, grupowania wspólnych elementów, ponownego wykorzystywania już stylizowanych elementów w jak największym stopniu, a co najważniejsze, zachowania modułowości.

Za pomocą jednej deklaracji CSS możesz zmienić dopełnienie przycisków, aby uzyskać lepsze cele dotykowe i testować bezpośrednio na telefonie komórkowym, tablecie i komputerze. Nie jest to łatwe w Photoshopie lub Sketchu, ponieważ inne elementy nie są świadome siebie nawzajem w układzie i musisz reorganizować obiekty za każdym razem, gdy coś zmieniasz.

Chcesz wypróbować inny schemat kolorów nagłówka? Dzięki pracy z zaledwie kilkoma wierszami kodu CSS zmiany są widoczne we wszystkich szablonach HTML natychmiast, na wszystkich urządzeniach i ekranach. Tego rodzaju elastyczności nie da się łatwo naśladować, gdy masz 20 statycznych makiet. To prawda, że ​​możesz użyć „symboli” w Sketch lub Adobe XD dla komponentów wielokrotnego użytku, ale nie są one tak wszechstronne jak CSS.

W tej fazie trzeba będzie podjąć kilka decyzji technicznych. Pytania, na które trzeba będzie odpowiedzieć, to:

• Czy użyjesz preprocesora CSS? (Zalecana)
• Jakiego rodzaju responsywnej siatki użyjesz do układu?
• Czy czcionki, których chcesz użyć, są dostępne w sprzedaży? Czy klient ma budżet na czcionki internetowe premium, czy powrócisz do korzystania z dostępnych darmowych czcionek internetowych?
• Czy będziesz używać wielokolorowych czy jednokolorowych ikon? Czy rozmiar będzie się różnić w całej witrynie? Czy dalej polegasz na niestandardowych ikonach, czy na już istniejącym pakiecie ikon? Jakie rozmiary będą musiały pomieścić Twoje ikony?

Problemy z czcionkami i responsywnym projektowaniem stron internetowych

Wybór czcionek do responsywnego projektu internetowego może być wyzwaniem. Istnieje wiele możliwości i tyle samo pułapek. Ponieważ projekt będzie używany w przeglądarce, jest to najlepsze miejsce do ich wypróbowania. Czytelność czcionek może się różnić w zależności od rozmiaru, wagi, kolorów i renderowania, więc wypróbowując czcionki bezpośrednio w przeglądarce, projektanci mogą upewnić się, że wszystko wygląda dobrze, a pożądane oczekiwania są spełnione.

Istnieje wiele narzędzi online do wybierania i testowania czcionek oraz wypróbowywania kombinacji krojów. Na Typetester i Typecast można znaleźć i przetestować różne czcionki z różnych serwisów i odlewni. Podczas pracy z określoną usługą subskrypcji czcionek, taką jak Typekit lub Fonts.com, projektanci mogą generować czcionki i testować bezpośrednio na swoich szablonach stron. Generowanie pakietu Typekit z nowymi czcionkami jest proste i szybkie, a ponadto można łatwo sprawdzić, jak poszczególne czcionki wpłyną na działanie stron internetowych.

Ikony pasujące do stylu marki

W przypadku rysowania ikon niestandardowych należy określić rozmiar, siatkę i styl. Pracując w programie Illustrator, każdy obszar roboczy reprezentowałby na przykład jedną ikonę. Ikony można łatwo wyeksportować z programu Illustrator jako SVG lub PNG, które później można przekształcić w czcionkę ikon za pomocą usług takich jak Icomoon. Zaleca się używanie ikon wektorowych (SVG), ponieważ wektory są niezależne od rozdzielczości, więc nie ma obaw o to, jak są wyświetlane na ekranach o wysokiej rozdzielczości (Retina).

Przewodnik po stylach i CSS, aby utrzymać proces projektowania witryny pod kontrolą

Nawet jeśli projektujemy w przeglądarce, z dziesiątkami szablonów i komponentów możemy potencjalnie stracić orientację, gdzie coś jest używane i w jaki sposób. Dobrym pomysłem jest zbudowanie przewodnika po stylach wszystkich komponentów jako centralnego repozytorium. Konkretne szablony stron zostaną zbudowane na podstawie tego przewodnika po stylu, łącząc komponenty i elementy interfejsu użytkownika w strony internetowe.

Komponentami interfejsu użytkownika mogą być takie elementy, jak paginacja, lista produktów, galeria obrazów, okna modalne, elementy formularzy itp. i są używane jako bloki konstrukcyjne dla szablonów. Trzymanie wszystkiego w jednym miejscu jest naprawdę przydatne, gdy nadchodzi czas na testowanie konkretnego komponentu UI.

W przypadku CSS najlepszą praktyką jest rozdzielenie stylów komponentów na osobne pliki. Na przykład stylizacja paginacji będzie w _pagination.scss , elementy formularzy w _form.scss , a wszystkie te pliki zostaną zawarte w jednym pliku SCSS z innymi plikami (zmienne, mixin itp.).

Chociaż style.scss może składać się z dziesiątek „małych plików”, gdy kilka osób pracuje nad tym samym projektem, łatwiej jest śledzić zmiany (bez względu na to, czy używasz kontroli źródła, czy nie), jeśli wszystko jest podzielone na mniejsze porcje. Ważne jest, aby nadal utrzymywać przewodnik po stylu po uruchomieniu projektu projektowania witryny, ponieważ zespół będzie musiał śledzić każdy element witryny.

Korzystanie z arkuszy stylów – modułowy CSS

Z punktu widzenia programisty istnieje wiele podejść do pisania modularnego CSS. Najbardziej znane to SMACSS (Scalable and Modular Architecture for CSS), BEM (Block, Element, Modifier) ​​i OOCSS (Object Oriented CSS ). Jest sporo do nauczenia, nawet jeśli w końcu opracujesz własne podejście. W tym momencie powinieneś mieć ładną kolekcję komponentów UI i stron internetowych, które pozwolą Ci łatwo budować nowe strony internetowe. Możesz kopiować i wklejać elementy z przewodnika stylów, a także zmieniać ich kolejność w razie potrzeby.

Ponieważ wszystko jest modułowe, nie musisz martwić się o spójność projektu i kodu; ale nie zapominaj, że jeśli dostosujesz komponent UI w całym systemie, będziesz musiał zaktualizować przewodnik stylu o zmiany (lub dodać nowy składnik). Aby wszystko było uporządkowane, najlepiej jest użyć pewnego rodzaju podejścia opartego na szablonach/automatyzacji do pracy na stronach internetowych, takich jak Gulp lub Grunt.

Co dalej? Projektowanie w przeglądarce

Teraz masz centralne repozytorium komponentów interfejsu użytkownika, każdy udokumentowany element i strony internetowe zbudowane z tych komponentów. Od tego momentu jest więcej niż prawdopodobne, że projektanci nie będą już musieli otwierać swoich ulubionych narzędzi projektowych, ponieważ większość „projektu” będzie wykonywana bezpośrednio w kodzie i przeglądana w przeglądarce.

Nie jesteś pewien, jak konkretna zmiana wpłynie na projekt? Teraz możesz wyświetlić podgląd swojego projektu na różnych urządzeniach i przeglądarkach jednocześnie, aby zobaczyć, jak zmieniona czcionka w nagłówku lub zmiana rozmiaru i koloru przycisku wpłynie na projekt.

W jaki sposób dodanie większej grubości czcionki w przypadku korzystania z niestandardowych czcionek internetowych wpłynie na wydajność ładowania strony? Możemy testować wydajność strony w toku za pomocą usług takich jak WebPageTest i podejmować świadome decyzje na podstawie rzeczywistych wyników. Zdecydowanie nie możemy tego zrobić w Photoshopie czy Sketchu.

Praca z HTML i CSS oraz praca w przeglądarce może nie być dla każdego projektanta podczas procesu projektowania strony internetowej. Ale jeśli projektantom naprawdę zależy na tym, jak ich praca wygląda na różnych urządzeniach i rozmiarach ekranów, muszą zadbać o to, aby za każdym razem było idealnie. Coś, co wygląda niesamowicie jako statyczna makieta projektu, może wyglądać mniej niż pożądanie, gdy jest oglądane w przeglądarce internetowej na urządzeniu mobilnym. Przydałoby się doświadczonym projektantom tworzenie i testowanie projektów internetowych w środowisku, w którym każdy będzie je widział… w przeglądarce.

Dalsza lektura na blogu Toptal Design:

• Projektowanie responsywne — najlepsze praktyki i uwagi
• Jak zaprojektować skuteczną stronę docelową
• Kompletny przewodnik po projektowaniu witryn eCommerce
• Podstawy przeprojektowania strony internetowej – studium przypadku
• Siły napędowe projektowania — studium przypadku przeprojektowania strony internetowej