Sekret projektowania kreatywnych witryn internetowych

(Aline Kesting) (2 września 2020 r.)

Wiele rzeczy wymaga projektowania witryn internetowych, ale jest jedna rzecz, która naszym zdaniem jest szczególnie ważna, jeśli chodzi o witryny kreatywne: ścisła współpraca między projektantami a programistami.

Po uruchomieniu zupełnie nowego 14islands.com kilka tygodni temu zapytano nas, jak utworzyliśmy faliste animacje najechania na kursor. Chociaż magia kodu stojąca za tymi interakcjami, miejmy nadzieję, pojawi się w przyszłym poście na blogu (bądźcie czujni!), Chcę się skupić na tym, jak faktycznie zaprojektowaliśmy te animacje. Możesz być zaskoczony.

Odwróć swój proces do góry nogami

Rozpoczynając nowy projekt, łatwo jest wpaść w pewien rodzaj kaskadowego procesu. Przechodzisz od badań użytkowników do projektowania i uzyskujesz prototypy, które można kliknąć. Po drodze masz zespołowe punkty kontrolne, ale współpraca w zakresie projektowania i rozwoju zwykle rozpoczyna się dopiero po wykonaniu prototypów. Chociaż ten proces działa w przypadku niektórych typów projektów, szczególnie tych o większej strategii, nie jest to najbardziej kreatywny.

Kiedy rozpoczęliśmy nasz nowy proces projektowania witryny, zdecydowaliśmy się podejść do niego w ten sam sposób ( zbliżamy się do naszych kreatywnych piątków), w których eksperymenty często czerpią inspirację z ekscytujących nowych technologii. Oznacza to, że kreatywni programiści mogą być tymi, którzy mają pomysł, a projektanci wskakują na pokład, aby pomóc zbudować wokół niego koncepcję. W ten sposób projektujemy i kodujemy razem od początku, przez cały czas. 🚀

Projektuj koncepcje ruchu w kodzie

Korzyści z tego wspólnego procesu projektowania są dość proste. Często my, projektanci, wyobrażamy sobie projekt idealny do piksela i pozwalamy programistom dowiedzieć się, jak najlepiej naśladować ten projekt za pomocą kodu. Ale zwłaszcza w przypadku kreatywnych witryn internetowych to, co sobie wyobrażamy, może nie zawsze być wykonalne, może nie wyglądać tak samo lub może po prostu przerodzić się w doświadczenie wymagające dużej wydajności. Po spędzeniu dużej ilości czasu na dopracowywaniu minimalistycznych projektów kończy się czas i wybierasz najlepsze rozwiązanie.

Gdybyśmy tylko mogli zrozumieć wszystkie możliwości WebGL, Three.js i CSS animacje zamiast dostrzegać ich ograniczenia, mogliśmy przekraczać granice i rozwijać nasze koncepcje projektowe zgodnie z technologią. Dokładnie tak się dzieje, gdy twórcy są częścią procesu projektowania. Rzucają wyzwanie naszemu sposobowi myślenia i wprowadzają wyjątkowe rozwiązania, o których sami nigdy byśmy nie pomyśleli. Dopasowanie tej wiedzy do silnej koncepcji prowadzi do magii. ✨

Jeśli chodzi o naszą witrynę internetową, tygodniami badaliśmy, odrzucaliśmy pomysły i zaczynaliśmy od zera. Z biegiem czasu wspólnie określaliśmy, dokąd chcemy się udać, i zakończyliśmy interakcją, która nam się podobała. Kiedy już mieliśmy koncepcję ruchu, wszystko inne ułożyło się na swoim miejscu.

Oto niektóre z naszych wczesnych odkryć:

Ruch w kodzie

Jak to zrobiliśmy

Nic dziwnego, nasza ostateczna koncepcja ruchu została zainspirowana wyspami. To, co definiuje wyspę, to nieustannie zmieniający się krajobraz wody, który kształtuje ląd. Kiedy o tym pomyślisz, witryna nie jest kształtowana przez wodę, ale nieustannie reaguje na przewijanie, kliknięcia, najechanie kursorem i inne niewłaściwe traktowanie.

Badaliśmy koncepcję zniekształcania wody przy każdej interakcji użytkownika, ale chcieliśmy, aby tak było aby pozostać bardzo minimalistycznym, bez niepotrzebnych efektów, które odwracają uwagę od rzeczywistej treści.

Koncepcja ruchu wygląda następująco: spójrz na miejsce, a otrzymasz spokój tropikalnych wysp z krystalicznie czystą wodą. Ale zacznij przewijać i wchodzić w interakcje – właśnie tam pojawiają się fale. 🌊.

Ostateczny ruch witryny na 14islands.com

Jako projektant nie miałem pojęcia, że ​​można uzyskać takie płynna zmiana kształtu krawędzi miniatur, więc jak mogłem wymyślić taką koncepcję projektu? Rozpoczęliśmy ten proces razem, razem pracowaliśmy nad koncepcją i współpracowaliśmy każdego dnia aż do premiery. Będąc częścią całego procesu, nasz zespół programistów odegrał kluczową rolę w projektowaniu ostatecznej wersji.

Oczywiście projektowanie w kodzie nie oznacza, że ​​należy zatrzymywać jakiekolwiek projektowanie ruchu w trakcie procesu. Istnieją fantastyczne narzędzia do prototypowania, takie jak Figma i Flinto, które świetnie nadają się do testowania przepływów i mikro-interakcji. Jeśli chodzi o czystą kreatywność, After Effects działa najlepiej, ponieważ daje dużo swobody.Nawet jeśli nie jesteś ekspertem w dziedzinie ruchu, warto zostawić plik projektu na chwilę i zbadać w ruchu pomysły na wysokim poziomie. Uzyskasz bardziej namacalne wyniki, aby zwolnić lub posunąć się naprzód i dać zespołowi programistów podstawę do rozpoczęcia iteracji.

Wszystko, czego projektanci mogą nauczyć się od technologii

Gotowe : Zaangażuj kreatywnego programistę na pełny etat w proces projektowania. Rzuć sobie wyzwanie, badaj ruch równolegle i pchaj interakcje dalej, aż dojdziesz do koncepcji ruchu. Dopiero gdy to zrobisz, skup się na szczegółowym projekcie witryny. Ta koncepcja nie tylko zainspiruje wiele przyszłych decyzji projektowych, ale także pomoże budować bardziej konsekwentne wrażenia, powtarzając ruch.

W 14islands mamy szczęście, że mamy bardzo zgrany zespół projektantów i programistów. razem każdego dnia i stale ulepszamy nasze sposoby współpracy. Do tej pory opłaciło się i wniosło dużo kreatywności do naszego procesu projektowania. Zachowanie ciekawości, jak budowane są rzeczy i rzucanie sobie wyzwań zarówno w zakresie projektowania, jak i kodu, pomaga nam tworzyć doświadczenia użytkowników, które są funkcjonalne i minimalistyczne, ale mają też dodatkową osobowość.

Mam nadzieję, że ta lektura była pomocna, daj nam znać, jeśli masz jakieś pytania lub sugestie. Do następnego razu ✌️