Jak tworzyć strony internetowe bardziej efektywnie

Nasz główny programista dzieli się wskazówkami, jak przygotować się do efektywnego zbudowania strony internetowej i uniknięcia rozrostu projektu.

Jak w każdym projekcie, przygotowanie jest Twoim kluczem do sukcesu. Tutaj dzielę się niektórymi z kluczowych procesów, których używamy, aby zapewnić pomyślną realizację projektu.

Rozpoczęcie rozwoju

Zanim zagłębisz się w kodowanie jakiejkolwiek nowej strony internetowej, dobrym pomysłem jest odczekanie 30 do 60 minut z zespołem programistów, aby ułożyć plan. Idealnie, właściciel produktu powinien być na spotkaniu, aby odpowiedzieć na wszelkie pytania. Prawdopodobnie byli oni na wszystkich spotkaniach z klientami i będą mieli większą niż ktokolwiek inną wiedzę na temat tego, co strona powinna osiągnąć pod względem podróży użytkowników i funkcjonalności.

Mam nadzieję, że wcześniej widziałeś projekty. Dobrym pomysłem jest wykorzystanie tej sesji do zidentyfikowania wszelkich napotkanych problemów i przedyskutowania z zespołem sposobu ich rozwiązania. Jeśli na przykład projektant od ostatniej iteracji wybrał menu wysuwane poza płótnem, możesz omówić sposób jego zbudowania. Może się okazać, że ktoś w zespole zbudował już taki, aby mógł podjąć pracę.

Wydrukuj projekty

Ten rodzaj idzie w parze z rozpoczęciem rozwoju, ale ten etap powinien tak naprawdę angażować tylko zespół programistów front-end.

Myślę, że jest to dobry krok przed rozpoczęciem budowy witryny, ponieważ wydruki można rozłożyć, aby uzyskać wyraźniejszy obraz większego obrazu. Nie da się tego łatwo zrobić za pomocą aplikacji takich jak Sketch, Photoshop czy Invision. Aby zobaczyć wszystkie projekty, musiałbyś albo oddalić się do tej pory, albo możesz zobaczyć tylko jeden szablon strony na okno przeglądarki.

Oglądanie strony internetowej w formie dotykowej może również dać ci inną perspektywę i pomóc w doskonaleniu elementów, które w innym przypadku możesz przegapić. Pomocna jest również umiejętność tworzenia adnotacji.

Tutaj, w Hallam, zwykle opatrujemy nasze wydruki adnotacjami, a następnie używamy ich do podziału obciążenia pracą i przyklejania ich na tablicy. Odwołujemy się do nich podczas kolejnych spotkań w całym procesie budowania. Po zbudowaniu i podpisaniu szablonu jest on usuwany z tablicy, co daje nam jasny obraz tego, co pozostało do zbudowania.

Oczywiście wszyscy powinniśmy zminimalizować ilość wykonywanych przez nas wydruków, więc pamiętaj, aby użyć kosza do recyklingu, gdy skończysz z projektami!

Zidentyfikuj wspólne elementy

Jedną z zasad, które przyjęliśmy tutaj w Hallam, jest to, że każdy projekt, który tworzymy, nie powinien składać się z całkowicie niestandardowych szablonów. Zamiast tego powinni mieć wspólne elementy projektu, które można zbudować osobno, a następnie wstawić do szablonów tam, gdzie są potrzebne.

Nie mówię, że szablony stron nie powinny zawierać niestandardowych elementów, ale powinno to mieć miejsce tylko wtedy, gdy jest to konieczne. Na przykład witryna internetowa ze stroną szkolenia na temat wywiadu radiowego i strona szkolenia na temat wywiadu telewizyjnego nie wymaga dwóch szablonów, ponieważ są one zasadniczo „szablonami szkolenia”.

Wspólne elementy zapewniają również lepsze wrażenia użytkownika, ponieważ ludzie nie są bombardowani nowymi rzeczami do odkrycia na każdym kroku.

Po opracowaniu wszystkich głównych elementów witryny możesz zapisać je na tablicy, zrobić bilety i przypisać je do różnych członków zespołu. Następnie, gdy dojdziesz do składania stron, możesz po prostu „włożyć” różne części do szablonów i tworzyć je znacznie szybciej.

Buduj najpierw czy stylizuj i buduj razem?

To jest coś, z czym eksperymentowaliśmy w przeszłości, a obecnie budujemy i stylizujemy szablony w tym samym czasie.

W przeszłości budowaliśmy wszystkie struktury i elementy szablonów strony bez użycia żadnego css (z wyjątkiem stylów układu związanych z Bootstrapem lub Foundation). Następnie po zbudowaniu całej witryny przeglądaliśmy i stylizowaliśmy wszystkie szablony i elementy. Ta metoda z pewnością ma sens z punktu widzenia linii produkcyjnej. Nie pomalowałbyś karoserii samochodu przed zamontowaniem go na podwoziu, włożeniem silnika i zamontowaniem wszystkich osprzętu. Dzięki tej metodzie oddzielasz funkcję od stylu. W początkowej fazie budowania jesteś zainteresowany upewnieniem się, że witryna działa z funkcjonalnego punktu widzenia, zanim zastanowisz się, jak wygląda.

Zamiast tego przeszliśmy na obóz „projektuj i buduj”, aby móc stworzyć produkt do wysyłki. Innymi słowy, możemy przejść na żywo na każdym etapie, ponieważ strona działa i dobrze wygląda. W efekcie metodą „zaprojektuj i zbuduj” nadal budujesz szablon bez stylizacji, ale jak tylko skończysz układać, przechodzisz i stylizujesz go. Nie parkujesz go z boku i nie budujesz kolejnego szablonu.

Podstawowy zlew kuchenny

Oto coś, co pasowałoby do metody „zaprojektuj i zbuduj”. Obejmuje to stylizację niektórych elementów, takich jak typografia, dodanie kolorów marki witryny i być może dodanie stylów przycisków do głównego pliku settings.scss. To niesamowite, jak stylizacja tych elementów może zrobić z witryną od razu. Od razu masz stronę internetową, która nie wygląda już jak zwykła strona Foundation i masz prawdziwe poczucie postępu, po prostu poświęcając około 30 minut na napisanie kilku reguł CSS.

Opraw witrynę!

Osobiście preferuję stylizację nagłówka i stopki na wczesnym etapie, ponieważ pomaga to oprawić witrynę i stworzyć płótno, aby kontynuować stylizację i budowanie witryny. Sprawia, że ​​strona wygląda bardziej jak gotowy produkt. Jednak witryna do wysłania może nadal mieć niestylowaną, ale działającą nawigację i stopkę.

Wniosek

Wszyscy mamy własne pomysły na to, jak przenieść projekt strony internetowej z Photoshopa do procesu tworzenia, a powyższe jest po prostu sposobem, w jaki lubimy to robić.

Jedna rzecz, w którą naprawdę wierzę, jest kluczowa, to sporządzenie planu przed otwarciem środowiska programistycznego. Niezależnie od tego, czy jesteś freelancerem pracującym samotnie, czy częścią dużego zespołu programistycznego, tworzenie planu jest niezawodnym sposobem na bardziej efektywną i szybszą pracę.

Jeśli potrzebujesz pomocy przy tworzeniu stron internetowych, nie wahaj się z nami skontaktować.