Projektowanie w przeglądarce używane do straszenia mnie. Nie dlatego, że wydawało się to trudne, ale dlatego, że pomyślałem, że skończę z projektem złożonym z wielu małych pudełek, czegoś, co było tak ogólne i nijakie, że mogłem przerobić je w Photoshopie.
Ten strach okazał się całkowicie nieuzasadniony. Nie tylko moje projekty stały się bardziej skoncentrowane, ale także szybciej je wykonałem i zaangażowałem klientów wcześniej w toku poprzez interakcję i dyskusję.
Design to projekt. Nie ma znaczenia, czy odbywa się to w programie, czy jest napisane w kodzie. Projektowanie w przeglądarce nie jest trudniejsze niż projektowanie w Photoshopie. Jak każde narzędzie, musisz go użyć, aby go poznać i ostatecznie opanować.
Projektowanie jest procesem iteracyjnym, trudniejszym w pracy dla klientów. Czasem trudno klientom dokładnie opisać to, co opisujesz; projektowanie w przeglądarce może ich zaangażować w cały proces, a nie tylko w fazę projektowania.
Zasadniczo fazy projektowania i rozwoju łączą się, a jeśli jesteś oczywiście dobry w dziedzinie projektowania i rozwoju front-endów, to zajmiesz się zaprojektowaniem w przeglądarce jak kaczka do wody.
Jedną z głównych zalet projektowania w przeglądarce jest to, że możemy projektować w oparciu o realistyczne oczekiwania. Czasami projektowanie w oprogramowaniu może powodować nieprzewidziane problemy w rozwoju front-end. Elementy interfejsu użytkownika mogą być zaprojektowane jako niewiarygodne lub może po prostu nie mają sensu, trudno wytłumaczyć klientowi, dlaczego coś zmieniłeś, nie dlatego, że nie zrozumieją, ale dlatego, że już go zaprojektowałeś i miałeś zatwierdzony. Projektowanie w przeglądarce nadaje się do idei prostoty.
Zanim nawet pomyślę o projektowaniu, potrzebuję planu. To, że używam innego narzędzia, nie oznacza zmiany mojego procesu. Przed rozpoczęciem projektowania chcę mieć całkiem niezły plan i muszę wiedzieć, co projektuję, dlaczego projektuję, kogo projektuję, tło klienta i wszelkie informacje o usługach lub produktach, które muszę ustawić na.
Po ustaleniu tych rzeczy będę miał lepsze wyobrażenie o tym, czym jest produkt lub co robi klient, jak długo to robią, co odróżnia ich od konkurencji, kim są ich użytkownicy i jakie są główne i drugorzędne cele strony internetowej będą.
Osobiście lubię mieć dokumentację wszystkiego. Zazwyczaj mam dokumentację dotyczącą mapy witryny, treści, wezwań do działania i architektury witryny. Zanim zacznę projektować, powinienem mieć jasną strategię projektowania i wszystkie treści powinny zostać zebrane.
Szkicowanie jest kluczowe, jeśli zamierzam zaprojektować coś w przeglądarce. Mogę zgrubiać obszary zawartości za pomocą ołówka i papieru, uzyskać informacje zwrotne i szybko wykonać iteracje w oparciu o mój projekt.
Szkicuję w oparciu o plan, który opisałem powyżej i upewniam się, że mam wszystkie obszary treści i wezwania do działania określone. Szkicowanie powinno być szybkie, nie poświęcaj dużo czasu na doskonalenie czegokolwiek. Powinien być wystarczająco solidny, aby pokazać klientowi, ale niechlujnie, że można je uzyskać w niecałą godzinę.
Następnie lubię prototypować witrynę z moich szkiców w HTML i CSS. Prototyp to dużo szarych pudełek z tekstem i obrazami dla elementów zastępczych. Szare pola działają jak kontenery dla treści, kiedy faktycznie zacznę projektować. Największą korzyścią z prototypowania kodu jest to, że klient może wchodzić w interakcję z prototypem i zobaczyć, jak działa architektura witryny, w ten sposób, jeśli cokolwiek jest nieaktualne lub wymaga udoskonalenia, możemy sobie z nim teraz poradzić, a nie w dniu uruchomienia.
Zanim zaczniemy projektować, potrzebujemy jakiegoś stylu, na którym opieramy nasz projekt. Musimy określić kolory i czcionki, których użyjemy z potencjalnymi teksturami i wzorami. To tutaj pojawiają się płytki stylów.
Płytki stylowe zostały stworzone przez Samanthę Warren i używam ich od jakiegoś czasu. Pomagają klientom zobaczyć wczesny i bardzo prosty przewodnik po stylu, z którego możemy zacząć projektować. Lubię tworzyć kilka z nich, aby zobaczyć, który klient woli w ten sposób, i ograniczyć go do jednego. Uważam, że są one również bardzo ważne w procesie zatwierdzania i pomagają zapobiegać całkowitemu odrzuceniu.
Teraz jesteśmy gotowi do rozpoczęcia projektowania. Jeśli jesteś przyzwyczajony do projektowania w programie takim jak Photoshop lub Sketch, nie jest to zbytnio różne. Korzystając z naszego prototypowego pliku, zaczynamy dodawać fałszywe treści do naszych znaczników. W tym momencie dokładnie wiemy, co dzieje się w każdej sekcji treści w znacznikach, a siatka została już zdefiniowana, więc nie powinno to zająć dużo czasu.
Teraz zacznę nakładać style na moje treści. Zamierzam dodać style bazowe dla koloru, typografii i układu. Gdy style bazowe zostaną zakończone, odejdę i spojrzę na nie. Lubię ekranować niektóre części projektu, aby później się z nimi zapoznać.
Gdy jestem zadowolony z warstwy bazowej, lubię robić notatki na temat tego, co należy poprawić. Na podstawie tych notatek najprawdopodobniej skorzystam Photoshop lub Naszkicować aby dodać teksturę lub cokolwiek z namacalnym odczuciem. Photoshop i Sketch są świetnymi narzędziami do szybkiego ulepszania złożonych elementów interfejsu użytkownika, więc zapisuję wszystko, co może być bólem, aby zakodować więcej niż raz
Powodem, dla którego to robię, jest to, że chcę, aby mój kod był chudy i czysty, a im bardziej kodujesz, komentujesz i usuwałeś, tym bardziej niechlujny i nadęty staje się twój kod.
Jeśli za każdym razem projektowałeś w przeglądarce od początku, może się wydawać, że trwa to wiecznie, ale jeśli zaczynasz od niestandardowej bazy, architektury, możesz wyeliminować wszelkie powtarzające się czynności. Na początek mam niestandardową wersję Initializr używam go z niestandardową siatką responsywną wbudowaną w Sass (http://sass-lang.com/). Używanie niestandardowej architektury daje mi przewagę w tworzeniu prototypów i projektowania.
Posiadanie biblioteki powszechnych wzorców UI to także świetny sposób na zbudowanie szybkiego prototypu i sprawia, że projektowanie w przeglądarce jest bardziej wydajne. używam Wysublimowany tekst kodować, a jedną rzeczą, którą nauczyłem się wykorzystywać, są niestandardowe fragmenty, które możesz utworzyć. Dodałem kilka wariantów nawigacji, list, pasków bocznych i innych popularnych elementów do mojej listy fragmentów, dzięki czemu mogę szybko umieścić je w moim znaczniku za pomocą prostego działania. Używam również kont na Codepen i JSFiddle aby zapisać wzory. Dan Cederholm stworzył świetny motyw WordPress do przechowywania popularnych wzorców tzw Gruszki . Używa postów do przechowywania kodu, który można edytować na żywo w interfejsie użytkownika, aby przetestować i wyświetlić podgląd zmian.
Praktyka i praktyczne zastosowanie sprawią, że będziesz lepiej projektować w przeglądarce. Szanse są, jeśli robisz coś w stylu front-end, na którym masz już podstawową architekturę i masz już pewne wspólne wzorce do użycia.
Teraz wszystko, co musisz zrobić, to zacząć projektowanie w przeglądarce, a ostatecznie pojawi się przepływ pracy, który jest wydajny i działa w ramach procesu. Z praktyką będziesz tylko szybciej.