Jak jeden inżynier ds. front-endu może zastąpić zespół dwóch osób?

Myślenie dwoma umysłami

Zapotrzebowanie na scenie projektowania stron internetowych zmieniło się w ciągu ostatnich kilku lat: projektanci z umiejętnościami front-end i programiści front-end z umiejętnościami projektowania są coraz bardziej poszukiwani. Tak, możesz argumentować, że te prace są zupełnie inne – a może po prostu nie lubisz jednej z nich – ale prawdę mówiąc, w ciągu moich sześciu lat jako niezależny programista stron internetowych i dwunastu lat jako projektant, dowiedziałem się, że o wiele trudniej jest pracować jako projektant stron internetowych lub po prostu programista front-end niż jako inżynier front-end, który zna obie role.

Noszenie obu czapek ma wiele zalet: tylko z profesjonalnego punktu widzenia można łatwiej znaleźć pracę i pobierać wyższą stawkę, ponieważ przynosisz więcej do stołu.

Ale praca jako hybrydowy inżynier front-end ma również kilka wad, o których musisz wiedzieć — i jak je obejść. Jako kreatywny projektant będziesz używać swojej „prawej mózgu”, w połowie odpowiedzialnej za informacje wizualne, przestrzenne i percepcyjne – innymi słowy, wszystko, co ładne w projektowaniu stron internetowych. Jako techniczny programista front-end będziesz używać swojej „lewej mózgu”, logicznego i analitycznego partnera twojego szalonego artysty po prawej stronie.

A ponieważ jesteś tylko jedną osobą, oznacza to, że wykonujesz dwie zupełnie różne prace w tym samym czasie, z tym samym mózgiem – co może być dla twojego mózgu wręcz mylące. Jeśli nie poradzisz sobie z tym, nie wykonasz wysokiej jakości pracy ani nie osiągniesz pełnego potencjału. A jeśli jesteś freelancerem starającym się sprostać opisowi stanowiska hybrydowego inżyniera front-end, prawdopodobnie rywalizujesz z zespołem dwóch osób (programistą i projektantem), więc będziesz musiał pracować w tym samym czasie, podczas gdy zachowanie jakości. (Oczywiście możesz też zarabiać tak, jakbyś był dwuosobową drużyną!)

Wiedza, której części mózgu użyć i kiedy jej użyć, jest kluczem do usprawnienia procesów i uzyskania najlepszych wyników bez frustracji i dużej ilości czasu na dotrzymanie terminu. Niezależnie od tego, gdzie Ci brakuje, po lewej czy po prawej, ten post pomoże Ci zrozumieć, jakich umiejętności potrzebujesz i jak możesz je zdobyć.

Stojak na jedną noc z Twoim projektem

OK gotowy? Świetnie! Załóżmy, że poproszono Cię o zaprojektowanie witryny dla miniCloud, początkującego startupu oferującego niestandardowe rozwiązania VPS. Od czego zaczynasz?

Zanim zacznę jakąkolwiek „prawdziwą” pracę nad projektem, lubię iść z nim do łóżka. Oznacza to dokładne rozeznanie produktu, usług, konkurencji itp. Twojego klienta. Krótko mówiąc, Google do diabła z tym. Po tym pomyśl o projekcie przez cały dzień: Jak będzie wyglądał, kiedy już z nim skończysz? Zabierz go na kolację i zasypiaj z myślą o swoim nowym, seksownym designie. Na tym etapie zawsze miej przy sobie ołówek (lub telefon komórkowy) do zapisywania pomysłów, które do Ciebie przyjdą. Ten rodzaj pracy umysłowej zwykle pomaga zdefiniować kluczowe aspekty twojego procesu.

Niech Twoje kreatywne soki płyną: proces projektowania

Teraz, gdy masz już kilka pomysłów do zrealizowania, nadszedł czas, aby rozpocząć prawdziwy proces projektowania. Składa się z trzech kroków: 1) szkic, 2) model szkieletowy i 3) grafika. To jest część, w której pozwalasz artystycznej połowie mózgu robić swoje i wariować ołówkiem, papierem i Photoshopem.

Na tym etapie projektowania ważne jest, abyś pozwolił swojej stronie „deweloperskiej” trzymać Cię w ryzach, aby nie zwariować z niektórymi aspektami witryny, których szybkie odtworzenie za pomocą HTML, CSS i jQuery będzie prawie niemożliwe. Jeśli spróbujesz wymyślić przeglądarkę na nowo, Twój programista front-end Cię za to znienawidzi. A twoim front-end developerem jesteś ty — pamiętasz?

Dlatego kieruj się najlepszymi praktykami projektowania stron internetowych (i zdrowym rozsądkiem), ponieważ jest wysoce nieprawdopodobne, że wkroczysz na nowy grunt, przeprojektowując witrynę z sukniami ślubnymi swojego przyjaciela. Nie oznacza to, że nie powinieneś dążyć do stworzenia fantastycznego i imponującego projektu. Ale raczej wymyśl coś, o czym wiesz, że jest wykonalne. Projekty, które na nowo odkrywają sieć, są zwykle wykonywane w wolnym czasie, bez terminów wiszących nad głową.

1. Szkic : Zaczynam od notatnika w kratkę i kilku ołówków. Papier w kratkę jest szczególnie dobry, ponieważ można go używać do projektów opartych na siatce. Nie będziesz miał problemu później, gdy przetłumaczysz swój szkic na modele szkieletowe, a na samym końcu na witrynę internetową opartą na siatce. W przypadku miniCloud nasz szkic może wyglądać mniej więcej tak:

Zwróć uwagę, że dodatkowe szczegóły na szkicu, takie jak śnieg, ptaki i chmury, są wynikiem mojej prokrastynacji i nie są obowiązkowe w żadnej części procesu projektowania, ale wyglądają ładnie.

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. Wireframe : Teraz, gdy mamy już podstawowe pojęcie o tym, jak będzie wyglądać nasza strona, nadszedł czas, aby stworzyć szkielety, które będziemy mogli pokazać klientowi. Można to zrobić na wiele sposobów. W niektórych przypadkach możesz całkowicie pominąć ten krok, jeśli uważasz, że nie ma takiej potrzeby. Osobiście używam Photoshopa do opisania mojego pomysłu, ponieważ jest to narzędzie, które najbardziej znam. W plikach .EPS lub .PSD dostępnych jest wiele darmowych zestawów szkieletów, z których można zacząć w kilka sekund, więc nie ma potrzeby tworzenia i rysowania wszystkich elementów od zera. Jest też kilka rozwiązań online, jeśli chcesz uniknąć Photoshopa, ale ja jestem bardziej typem faceta offline. W każdym razie, rozwijając nasz szkic, moglibyśmy stworzyć szkielet naszej witryny w następujący sposób:

1. Grafika : To moja ulubiona część: przekształcenie naszego szkieletu w piękną stronę internetową. Ale nie wszyscy to ja. Jeśli jesteś przede wszystkim programistą i nie masz talentu do projektowania, kolorów, typografii itp., sugerowałbym rozpoczęcie od innych stron internetowych w celu uzyskania inspiracji projektowych. Jest ich wiele i są pokryte świetnymi pomysłami — kto wie, może jest w tobie projektant, który tylko czeka, by wyjść? Uważam, że pomocne jest utrzymywanie folderu zakładek ze stronami internetowymi, które uważam za szczególnie dobrze wyglądające lub dobrze zaprojektowane. Picasso (?) powiedział: „Dobrzy artyści kopiują, ale wielcy artyści kradną” – nie oznacza to, że bierzesz projekt kogoś innego i umieszczasz na nim swoją naklejkę. Zamiast tego zainspiruj się czyjąś pracą i dodaj do niej własne podejście.

Całość projektuję w Photoshopie. Idealnie, Twój klient dostarczy Ci surowce do pracy, takie jak zdjęcia i kopie tekstu, których możesz użyć zamiast symboli zastępczych. Wygląda znacznie lepiej, gdy wyślesz go do poprawek.

 So, for step three, we take our wireframe and bring it to life: 

Przy okazji: jeśli w końcu użyjesz Photoshopa, istnieje wiele fajnych zasobów, które znacznie przyspieszą Twój proces, takich jak wtyczki i style. Sama mogłabym napisać o nich cały post, więc wskażę tylko kilka, z których często korzystam.

1. CSS3Ps : bezpłatna wtyczka Photoshopa oparta na chmurze, która konwertuje Twoje warstwy do CSS3.
2. Divine Elemente : Tworzy motywy WordPress bezpośrednio z plików PSD. Świetnie nadaje się do szybkiego rozpoczęcia projektu WordPress. Chociaż mówią „Nie są wymagane umiejętności HTML”, w rzeczywistości będziesz ich potrzebować, jeśli chcesz uzyskać niesamowite wyniki.
3. Subtelne wzory : kolekcja bezpłatnych wzorów do wykorzystania w projektach, zwykle jako tła. Takie szczegóły mają znaczenie, gdy chcesz zmienić swoje projekty z dobrych w niesamowite.

„Slice It Up”: proces front-end

Po zakończeniu etapu projektowania i otrzymaniu potwierdzenia od szczęśliwego klienta, jestem gotowy do przekształcenia moich statycznych obrazów w działające strony internetowe. Pamiętaj, że w tym momencie nasz projekt jest nadal tylko tym: projektem. Mamy wiele sposobów, aby przejść, zanim będzie gotowy do publikacji w sieci.

Na tym etapie nadszedł czas, aby użyć lewej, bardziej analitycznej połowy mózgu.

W świecie projektowania stron internetowych nazywamy ten proces „slicingiem”. Chociaż określenie to było bardziej trafne jakiś czas temu, zanim CSS stał się głównym wizualnym budulcem sieci i trzeba było pociąć każdy mały kawałek PSD lub PNG i umieścić go w przerażających małych tabliczkach, utknął.

Jeśli jesteś projektantem stron internetowych i nie wiesz jeszcze, jak 'front-end', masz szczęście — ponieważ kodowania można się nauczyć (w przeciwieństwie do posiadania naturalnego talentu do projektowania). Polecam zainwestować w kilka samouczków wideo online, takich jak Lynda.com, i zapoznać się z podstawami programowania front-end. (Bardziej dokładną listę zasobów można znaleźć tutaj.) W ciągu kilku godzin przejdziesz od zera do przeczytania kodu. A za kilka dni sam to napiszesz. A za kilka miesięcy staniesz się mistrzem HTML i CSS — wtedy nic Cię nie powstrzyma, jeśli chodzi o prace inżynierskie front-end.

Teraz, jeśli utworzyłeś kilka świetnych makiet (w poprzednim etapie) zgodnie z jakąś siatką, z którą czujesz się komfortowo, będziesz dokładnie wiedział, jak chcesz, aby Twoja witryna była zakodowana. Najszybszym sposobem byłoby użycie jakiegoś front-endowego frameworka, takiego jak Bootstrap.

Kiedy już opanujesz projekt oparty na siatce, zaczniesz widzieć każdą część swojej witryny jako zbiór wierszy i kolumn. Pierwszą rzeczą, którą robię, kiedy ustawiam swoją strukturę HTML, zanim dodam jakąkolwiek rzeczywistą treść lub CSS, jest pisanie w wierszach, następnie w kolumnach, potem podstawowe rzeczy, takie jak nawigacja, a następnie tekst i symbole zastępcze obrazów. Pozwala to najpierw uzyskać podstawową strukturę i budować stamtąd. Patrząc na ten szkielet, widzimy sześć rzędów:

1. Logo / Nawigacja
2. Suwak obrazu
3. Tekst wstępu
4. Obrazy kategorii
5. Najnowsze wiadomości / oferty
6. Stopka

Po dopasowaniu ich do struktury HTML Bootstrap otrzymalibyśmy coś takiego:

Wiele podstawowych stron internetowych używa tego samego (lub podobnego) kodu, a gdy będziesz pracować nad coraz większą liczbą projektów, zobaczysz, że tworzenie stron internetowych jest w dużej mierze procesem iteracyjnym i nie ma sensu pisać tego samego kodu w każdej iteracji . Właśnie dlatego frameworki są przydatne! Niezależnie od tego, czy stworzyłeś własny, czy zdecydowałeś się na użycie Bootstrap lub Foundation — nie ma to znaczenia. Liczy się to, że możesz go później utrzymać i rozbudować, jeśli zajdzie taka potrzeba.

Prawie wszystko, czego potrzebujesz do projektu, zostało wcześniej wykonane, a następnie kilka razy przerobione. Tak więc w przypadku każdego większego zadania rozejrzyj się i zapytaj innych, czy mają sugestie, zanim przejdziesz głową przez ścianę. Większość dużych frameworków ma bardzo aktywne społeczności, które tworzą dodatkowy kod i wtyczki ułatwiające pracę. Pracuj więc mądrze, a nie ciężko — i ucz się każdego dnia. A jeśli potrzebujesz czegoś, czego nikt wcześniej nie zbudował, cóż, wkraczasz na nowy grunt! Napisz o tym i podziel się nim ze społecznością — pomoże ci to rozwijać się jako projektant i programista.

Wybór CMS

W przypadku niektórych front-endowych projektów inżynierskich zakończy się to, gdy projekt pojawi się na działającej stronie internetowej. Są to zazwyczaj mniejsze witryny (np. dla małych firm, prawników, dentystów itp.). Ale często Ty lub Twój klient będziecie chcieli mieć kontrolę nad zawartością witryny. W takim przypadku potrzebujesz systemu zarządzania treścią (CMS). Celem CMS jest umożliwienie edycji i publikowania treści na stronie internetowej bez konieczności ręcznego kodowania każdego nowego szczegółu, a nawet kodowania w ogóle.

Spośród wszystkich dużych CMS-ów nazwałbym siebie ewangelistą WordPressa: zachwycam się nim dla innych programistów, zwłaszcza początkujących, ze względu na jego wszechstronność, łatwość obsługi, obszerną dokumentację do rozwoju, dużą społeczność, dużą liczbę darmowych wtyczek, i tak dalej i tak dalej…

Jeśli ktoś powie Ci, że Joomla! jest lepszy, zwłaszcza w przypadku mniejszych projektów — wtedy nie wiedzą, o czym mówią. W każdym razie nie wierz mi na słowo: pobierz WordPress i Joomla! motywy startowe, spójrz na każdy folder, a następnie zadaj sobie pytanie – co chcesz zbadać w swojej nowej roli front-endowej?

Potrzebowałbym całego artykułu, aby napisać na ten temat, ale zaufaj mi w tym, tak jak zaufałbyś Bazowi Luhrmannowi w kwestii ochrony przeciwsłonecznej.

Jeśli Twój projekt jest wyjątkowo mały i potrzebujesz prostego CMS-a, który można wdrożyć bez umiejętności kodowania, polecam skorzystanie z CouchCMS. Wystarczy kilka znaczników XHTML, aby uruchomić go w ciągu kilku minut, a nawet twoja babcia będzie wiedziała, jak z niego korzystać.

Utrzymanie Twojej strony internetowej

Po dostarczeniu witryny i kolejnym zadowolonym kliencie pozostaje Ci tylko utrzymanie witryny. Jeśli stworzyłeś prostą witrynę HTML, która nie będzie zawierała nowej zawartości, prawdopodobnie to już koniec.

Jeśli korzystałeś z CMS, musisz upewnić się, że technologia jest zawsze aktualna, aby uniknąć naruszeń bezpieczeństwa. Obejmuje to sam CMS i wszelkie używane wtyczki. Jeśli posłuchałeś mojej rady i skorzystałeś z WordPressa, otrzymasz powiadomienie e-mailem o każdej dostępnej aktualizacji.

To jest pole manewru mojego procesu. To prawda, że ​​to nie zadziała dla wszystkich iz pewnością nie będzie miało zastosowania do każdego projektu. Mam jednak nadzieję, że pomoże to wam projektantom zdobyć umiejętności potrzebne do zostania świetnymi inżynierami front-end i vice versa, abyśmy mogli nadal rozwijać nasze talenty jako programiści front-end.

Mogę tylko pokazać ci drzwi. To ty musisz przez to przejść. - Morfeusz, Matryca

PS: Możesz znaleźć PSD powyższego szablonu i inne fajne projekty w moim portfolio dryblingu.