Wskazówki, jak ulepszyć przekazywanie projektu witryny

W procesie tworzenia strony internetowej odbywa się kilka etapów. Gdybyśmy mieli to uprościć i spojrzeć na standardową stronę internetową, etapy wyglądałyby tak:

1. Potrzeba - ktoś potrzebuje strony internetowej z jakiegoś powodu.
2. Burza mózgów - decydowanie o ogólnej strukturze, celach i nie tylko.
3. Propozycja - klient znajduje freelancera lub agencję, aby zbudować witrynę.
4. Treść - artykuły, obrazy itp., Wszystko, co można znaleźć na stronach docelowych, mapach witryn itp.
5. Projekt - osoba / zespół pracuje nad projektem i układem na podstawie treści.
6. Rozwój - osoba / zespół opracowuje funkcjonalną część serwisu na podstawie projektu.

W większości przypadków możesz to tutaj wymieszać. Możesz zmienić kolejność wykonywanych czynności, a zespół nadal może przynosić świetne rezultaty. Jednak może to być trudne, gdy ludzie z różnych agencji pracują nad tym samym projektem, co jest głównym powodem wyboru wszechstronnej agencji, która może zająć się wszystkim.

W tym artykule przechodzimy od kroku 5, projektowania do kroku 6, tworzenia. To jest sytuacja, w której sprawy mogą pójść nie tak, spowalniając rozwój i psując to, co zostało wcześniej ustalone w procesie planowania.

Rzeczy, które projektant powinien wziąć pod uwagę

„Czy projektanci powinni umieć kodować?” to częste i bardzo rozsądne pytanie. Jeśli projektant rozumie kod, który się za nim kryje i najlepiej jest, gdy jest w stanie go wyprodukować (do pewnego stopnia), może pomóc całemu zespołowi w dążeniu do szybszego ukończenia projektu.

Oto kilka powodów, dla których tak się dzieje:

1 - W końcu wszystko trafia do przeglądarki.

Wszelkie projekty utworzone w Figma, Adobe itp. Pojawią się w przeglądarce. Wszystkie przeglądarki wykorzystują język programowania znany jako HTML / CSS do renderowania strony. Jeśli używany jest JavaScript, możesz sprawić, że projekty staną się interaktywne.

Należy z tego wywnioskować, że każdy projekt powinien być możliwy do wykonania w HTML / CSS. Wielu utalentowanych programistów front-end może zaimplementować prawie wszystko, o ile pozwala na to technologia. Ale pamiętaj - nie zawsze chodzi o „Czy potrafisz to zrobić?”, Chodzi o „Czy potrafisz to zrobić dobrze i sprawić, by było to możliwe do utrzymania”.

2 - Spójność

Łatwość utrzymania to sekret udanego projektu. Nie chcesz spędzać godzin na modyfikowaniu istniejących elementów witryny i dodawaniu nowych, ponieważ baza kodu to bałagan. Czasami niezwykle złożone projekty zawierające niewiele lub żadnych elementów wielokrotnego użytku kończą się bałaganem.

Kilka wskazówek dla projektantów stron internetowych:

• Projektuj z myślą o komponentach. Większość narzędzi udostępnia teraz tę funkcjonalność (Figma, Adobe XD, Sketch). Zmuszaj się do częstszego korzystania z nich, dopóki nie będzie to już denerwujące.
• Dobrze wyrównaj elementy. Podobne sekcje powinny mieć taką samą odległość między sobą. Na przykład 80px to dobra separacja do utrzymania. Nie ustawiaj losowo sekcji, używając 80 tutaj, 86 tam, 92 na trzeciej i 78 na drugiej. Utrzymuj porządek i porządek.
• Użyj siatki! Wszystkie narzędzia zapewniają system siatki. Najlepiej postaw na siatkę słupów 12.
• Zaprezentuj swój projekt na szerokich ekranach (1920 pikseli lub więcej). Pomaga to twórcom zrozumieć, jak działają poszczególne sekcje i ich tło.

3 - Waga witryny

Wszyscy chcemy mieć szybką stronę internetową, prawda? Cóż, projektant też jest tego częścią. Rozważ to: strona internetowa z 8 ogromnymi obrazami w wysokiej rozdzielczości, czterema filmami i elementami animowanymi. . Powodzenia w terminowej optymalizacji. Jest to wykonalne, ale leniwe ładowanie obrazów i filmów, optymalizacja multimediów podczas przesyłania, obsługa lepszych formatów plików obrazów i dodawanie inteligentnych metod animacji zapewniających wysoką wydajność zajmie dodatkowy czas i zastosowanie technik animacji.

Jeśli programiści nie są bardzo doświadczeni lub nie martwią się o szybkość, Twoja witryna może być bardzo opóźniona na smartfonach i laptopach niskiego i średniego poziomu.

Jak pomóc programistom?

Jako projektant, jednym z celów, o których musisz pamiętać, jest ułatwienie i przyspieszenie tworzenia przy jednoczesnym zachowaniu wyglądu i sposobu działania witryny.

Zastanów się, co można łatwo zrobić w sieci.

• Pudełka - to wszystko pudełka. Możesz zaokrąglić niektóre rogi, tak, możesz tworzyć elipsy (które są zdefiniowane w ramce) i nie tylko. Jednak gdy korzystasz z bardziej złożonych kształtów, które współdziałają z układem, sytuacja staje się trudna.
• Animowanie dokładnej pozycji jest trudne - wyobraź sobie, że chcesz kliknąć obraz, a następnie przenieść go na drugą stronę tekstu? Brzmi „łatwo”, ale tak nie jest. Pozycja, do której przesunie się obraz, musi pozostać w stosunku do kontenera witryny, który zmienia się w zależności od widocznego obszaru i nie tylko. A co się stanie, jeśli obraz będzie większy?
• Animowanie wymiarów pudełka wpływa na układ. Odnosi się to do każdej zmiany kolejności elementów podczas animacji. Może to być bardzo ciężkie dla przeglądarki i często powoduje ogromne opóźnienie.

Rozważ inną treść!

Jak wyglądałby projekt z dwukrotnym tekstem? Lub jako obraz portretowy zamiast obrazu poziomego? Nigdy nie wiadomo, co zamieści zespół redakcyjny. Czy powinny istnieć ograniczenia, takie jak współczynnik proporcji lub nawet krawędzie obrazów? Jeśli możesz, pokaż to w projekcie.

Dostarczaj swoje projekty w narzędziach takich jak Zeplin

Większość narzędzi projektowych, takich jak Figma czy Adobe XD, umożliwia „udostępnianie” projektów programistom. Stamtąd zespół front-end może sprawdzić kolory, ustawienia typografii, odstępy i inne właściwości wizualne warstw, co pozwoliłoby im bardzo ściśle przylegać do projektów.

Udostępnij inne zasoby, takie jak czcionki lub filmy

Jeśli użyłeś określonej czcionki na stronie, przekaż ją programistom. Jeśli jest licencjonowany i dostępny za pośrednictwem określonych adresów URL, pamiętaj, aby to również udostępnić. Dla programisty ważne jest, aby od pierwszego dnia pracował z poprawnymi czcionkami. Jeśli są filmy - pamiętaj, aby je również udostępnić! Czy filmy będą na YouTube, Vimeo czy na własnym serwerze?

Nie wybieraj „doskonałości pikseli”

Idea utrzymywania ostatecznego wyglądu witryny idealnie takiego samego jak projekt jest łatwym sposobem, aby zespół programistów Cię nienawidził i może zniweczyć każdą szansę na pojawienie się na czas. W prawie każdym przypadku projekt NIE będzie doskonały. Nie można mieć stuprocentowej pewności, że przed każdym przyciskiem masz dokładnie 18px odstępów? A nie 19px? Albo że każdy tytuł ma 38 pikseli, a nie 37 pikseli? A może każda ramka ma #ddd i że nie ma takiej, która jest czarna, ale ma 15% krycia?

Deweloperzy tu i ówdzie zbierają drobne błędy, aby zachować spójność w całej witrynie. Budują komponenty, które podlegają tym samym zasadom. Dopóki w konkretnym przypadku nie ma oczywiście zamierzonej zmiany, nie powinno być powodu, dla którego element nie może być taki sam we wszystkich obszarach.

Ostatecznie zakodowana witryna powinna być zgodna z ogólnym wyglądem i stylem projektu.

Zostaw komentarze w projekcie

Jeśli chcesz, aby jakiś element był interaktywny, taki jak tabulatory, harmonijki, suwaki itp., Poświęć kilka sekund, aby zapisać, jak powinien działać na komputerze stacjonarnym, telefonie komórkowym i co jest klikalne, należy zamienić.

Myśl jak użytkownik

Kiedy skończysz, zatrzymaj się na chwilę i wyobraź sobie, że korzystasz z witryny. Czytaj w dół od góry, przewiń w dół, kliknij gdzieś, aby zobaczyć więcej. Czy jest coś, czego może brakować w przepływie pracy? Czy istnieje widok jakiegoś elementu, który zmienia się pod wpływem interakcji użytkownika? Jeśli to prawda i nie ma projektu, pozostawiasz programistom, aby to rozgryźli, co zwiększa stres w pracy. Jeśli terminy są napięte, możesz udostępnić ogólne pliki swojemu zespołowi i powiadomić ich, że nadchodzi kilka „stanowych” widoków (nie zapomnij wspomnieć, które to są).

Responsywne widoki

Zaprojektowanie 15 stron na komputerze, a następnie wykonanie wersji mobilnej jest zniechęcające. Jeszcze bardziej irytujące jest zrobienie nieco innej wersji tabletu. Dlatego niektórzy projektanci ignorują dodawanie go. Jednak oznacza to, że programiści będą musieli to zrobić w kodzie. I podejmuj decyzje z tego powodu. Jeśli widzisz skomplikowane elementy, najlepiej zaprezentuj ich widoki na tablecie, nawet jeśli nie robisz całej witryny.

W podsumowaniu

Projektant może sprawić, że życie dewelopera stanie się koszmarem lub bardzo dobrym doświadczeniem. Kluczem do osiągnięcia tego drugiego jest lepsze zrozumienie stosowanej technologii, HTMl / CSS, które elementy interaktywne są możliwe itp.

Jeśli masz szczęście przebywać w pobliżu deweloperów i martwisz się o pewne elementy, zadzwoń do nich, aby przyjrzeć się wszystkim. Na pewno dadzą ci wskazówki, co jest trudne, a co łatwe.