Projektowanie graficzne a projektowanie stron internetowych

Grafika i projektowanie stron internetowych to dwie dziedziny, które często są ze sobą mylone. W końcu oboje skupiają się na “projektowaniu” i często pracują nad tymi samymi projektami.

nie oznacza to jednak, że są one takie same, a znajomość różnic jest niezbędna, aby wiedzieć, do kogo zwrócić się w danym momencie projektu. W tym celu przedstawiamy szczegółowy podział każdej z ról i ich kluczowe różnice.

oczywiście, podczas gdy indywidualne umiejętności mogą się różnić w zależności od danej osoby lub zespołu, istnieje kilka podstawowych podstaw projektowania graficznego a projektowania stron internetowych, które rzadko się zmieniają – to są te, które określają role i na których chcemy się skupić!

czym jest projektowanie graficzne?

projekt graficzny odnosi się do kreowania walorów wizualnych, komunikacyjnych dla strony produktów skierowanej do użytkownika. Może to obejmować ilustracje i ikony (co większość ludzi prawdopodobnie uważa za “grafikę”), a także typografię, fotografię, a nawet szablony. Projektant graficzny lub zespół użyje wszystkich tych mediów do stworzenia niezbędnych zasobów lub kompozycji dla projektu.

największą różnicą jest to, że grafik nie posiada wiedzy technicznej. Zamiast tego uzupełniają swoje umiejętności wizualne o zrozumienie zachowań użytkowników i umiejętność badania problemów. Dlatego graficy mogą również pomóc np. przy układach stron-rozumieją, jak zachowują się użytkownicy i odpowiednio projektują frontend.

ponadto projektowanie graficzne wymaga znacznie więcej niż umiejętność rysowania lub ilustrowania. Wymaga znajomości teorii koloru (jak kolory oddziałują ze sobą), psychologii (jak wizualizacje wpływają na zachowanie użytkownika) i bardziej zaawansowanych przedmiotów, takich jak wizualne hierarchie (jak wizualizować ważniejsze opcje niż te drugorzędne). Podczas gdy projektowanie graficzne jest dziedziną, w której brakuje wiedzy technicznej potrzebnej w projektach cyfrowych, ich zrozumienie wizualizacji, użytkowników i relacji między nimi są równie ważne.

przykłady projektów graficznych

projektowanie graficzne dzieje się wokół nas – w czasopismach, billboardach, ulotkach i innych materiałach drukowanych, o których myślisz. To powiedziawszy, oto kilka przykładów projektowania graficznego w odniesieniu do mediów cyfrowych-w tym, jak nakłada się i współpracuje ze stronami internetowymi.

  • LinkedIn. Chociaż nie uznalibyśmy żadnej sieci społecznościowej za “ciężką graficznie”, wszystkie jednak używają projektowania graficznego jako niezbędnych skrótów wizualnych. Na przykładzie LinkedIn górny pasek jest zredukowany do niewielkiej liczby łatwych do interpretacji ikon, co zapewnia łatwą nawigację po ekranach. Co więcej, pomaga to dobrze przetłumaczyć na telefony komórkowe i tablety, dzięki czemu, podczas gdy układ wizualny może zostać zmieniony, ikony zapewniają spójność i znajomość.

  • McDonald ‘ s. jest to marka z logo znanym na całym świecie, więc nic dziwnego, że strona internetowa i materiały drukowane w jak największym stopniu wykorzystują elementy graficzne. Wszystko pojawia się w świetle tekstu i przekazuje branding poprzez logo, kolor i fotografię. W rzeczywistości dotyczy to prawie wszystkich najlepszych usług związanych z jedzeniem, takich jak restauracje i aplikacje do dostarczania: show don ‘ t tell is the way to go.

  • IKEA. Wszystkie operacje e-commerce lub handlu detalicznego wymagają silnych efektów wizualnych, ale IKEA umocniła się brandingiem i stylem. Firma wykorzystuje grafikę w jak największym stopniu, od żywych niebieskich i żółtych kolorów, aby pokazać swoje produkty w środowisku domowym. Są to wybory graficzne, które zdefiniowały firmę prawie tak samo, jak konwencje nazewnictwa.

czym jest projektowanie stron internetowych?

projektowanie stron internetowych odnosi się do umiejętności i metod stosowanych zarówno w produkcji, jak i utrzymaniu strony internetowej. Obejmuje to zarówno umiejętności techniczne, takie jak kodowanie i optymalizacja pod kątem wyszukiwarek (na które duży wpływ mają wybory technologiczne), jak i umiejętności związane z projektowaniem, takie jak interfejsy i wrażenia użytkownika.

niezależnie od tego, czy jest to indywidualny projektant stron internetowych, czy zespół, który obejmuje odpowiednie umiejętności, projektowanie stron internetowych jest procesem aktywnym na samym początku. W rzeczywistości możemy powiedzieć, że jest to zasadniczo projekt produktu dla stron internetowych. Polega na zrozumieniu celu witryny, sposobu interakcji użytkowników z nią, dokonywania odpowiednich wyborów technologicznych i planowania ścieżki naprzód.

wspomnieliśmy jednak, że projektowanie stron internetowych może zawierać pewne elementy graficzne. Z tego powodu nierzadko zdarza się, że niektóre graficzne zestawy umiejętności w zespołach projektantów stron internetowych-co prawdopodobnie jest przyczyną początkowego zamieszania – ale to projektanci stron internetowych tworzą również całą infrastrukturę zaplecza.

warto również zauważyć, że projektowanie stron internetowych jest często uważane za własny zestaw umiejętności. Chociaż istnieje wiele elementów wizualnych wspólnych z innym oprogramowaniem, takich jak przyciski i nawigacja, strony internetowe często mają własne opcje technologiczne. Biorąc to pod uwagę, wraz z rozwojem progresywnych aplikacji internetowych, granice między stronami internetowymi a aplikacjami stają się coraz bardziej rozmyte.

nie traktujemy już stron internetowych jako całkowicie odrębnych podmiotów od aplikacji i innego oprogramowania w domenie biznesowej. Podobnie widzimy również umiejętności projektowania stron internetowych potrzebne w szerszych obszarach.

przykłady projektowania stron internetowych

każda dobra strona internetowa wykorzystuje projektowanie stron internetowych w swojej koncepcji, więc istnieje wiele fantastycznych przykładów. Oto kilka z nich, na które chcielibyśmy zwrócić uwagę:

  • Dropbox. Chociaż ta strona może wydawać się bardzo minimalistyczna, o to właśnie chodzi. Witryna Dropbox została zaprojektowana tak, aby obsługiwać jej usługę biznesową (przesyłanie plików), więc nawigacja jest przejrzysta i prosta. Podobnie, wiele wyborów projektowych poszło w stworzenie samego procesu udostępniania plików w taki sposób, aby pracować z nowoczesnymi przeglądarkami i urządzeniami. W ten sposób Dropbox zapewnia intuicyjny i płynny proces.

  • Luz. Jako produkt, który istnieje zarówno w przeglądarce, jak i jako samodzielna opcja do pobrania, Slack jest fantastycznym przykładem tego, gdzie strony internetowe i bardziej dedykowane oprogramowanie zaczynają się rozmywać. Platforma wykorzystuje przejrzystą nawigację, pomimo rosnącej listy funkcji i użyteczności, dlatego nadal jest ulubionym użytkownikiem w swojej konkurencyjnej niszy.

  • Wikipedia. Jest to przykład strony internetowej, która jest zasadniczo tak daleko od wpływów graficznych, jak to możliwe. To powiedziawszy, ma wiele wyborów, które są dokonywane z jakiegoś powodu. Wikipedia musi jasno i łatwo wyświetlać duże ilości informacji na jednym ekranie, a także tworzyć architekturę internetową, aby wspierać jej szersze zadania edycyjne i administracyjne. Może to wydawać się łatwe, ale jeśli spojrzysz na oryginalne projekty Wikipedii, zobaczysz, że wiele pracy włożyło się w uczynienie go tak intuicyjnym i użytecznym, jak to tylko możliwe.

różnice w grafice i projektowaniu stron internetowych

dynamiczny vs statyczny

projektowanie graficzne istnieje znacznie dłużej niż projektowanie stron internetowych, ale większość jego zaangażowania leży w mediach fizycznych, takich jak czasopisma i media drukowane. Z drugiej strony, projektowanie stron internetowych koncentruje się wyłącznie na mediach cyfrowych, a tutaj leży kluczowa różnica.

w magazynie lub książce treść jest ułożona w określonej kolejności, a projekt często bierze to za pewnik. Kolejność jest nieco statyczna. Jednak na stronie internetowej różni użytkownicy mają swoje własne ścieżki, a projektanci nie mogą polegać na ustalonym wzorze.

oznacza to, że projektowanie stron internetowych musi zapewnić użytkownikom narzędzia do łatwej nawigacji, a także zapewnić, że każda strona widoku działa jako samodzielny ekran dla swoich celów.

co więcej, w dobie personalizacji i dynamicznego ładowania treści projektanci stron internetowych muszą być coraz bardziej kreatywni. Dobrym tego przykładem jest e-commerce. W sklepie cyfrowym sklep może ustalać priorytety produktów na podstawie Twoich preferencji, przedstawiać rekomendacje na podstawie danych historycznych i trendów oraz inne dostosowania. Nic z tego nie dzieje się w katalogu-technologii tam nie ma. To zupełnie nowy obszar, który projektanci stron internetowych muszą coraz częściej brać pod uwagę w swojej pracy.

kreatywność

jak każdy produkt, strona internetowa musi być zarówno użyteczna, jak i wyróżniać się na tle konkurencji. Prosta strona internetowa z czarno-białym tekstem nie zaprowadzi cię daleko. Dzisiejsi użytkownicy oczekują silnego wysiłku wizualnego – do tego potrzebujesz ludzi kreatywnych.

projekt graficzny jest tu, gdzie to przychodzi. Projektanci wykorzystują swoją wiedzę na temat docelowych użytkowników, aby tworzyć wizualizacje, które działają. W tym przypadku niektóre z większych aspektów brandingu również wchodzą w grę. Strona internetowa musi pasować do wszystkiego, co robi firma, na przykład do fizycznych sklepów lub materiałów drukowanych. Lojalni zwolennicy marki powinni być w stanie łatwo identyfikować się ze stroną internetową.

Rozmiar Pliku & wydajność

na stronie internetowej większe rozmiary plików powodują wolniejsze ładowanie i inne problemy z wydajnością, które są złe zarówno dla optymalizacji pod kątem wyszukiwarek, jak i dla użytkownika końcowego. Powszechnie wiadomo, że ludzie nie mogą znieść powolnych stron internetowych i klikać, jeśli odpowiedź nie jest wystarczająco szybka.

co więcej, podczas gdy ludzie cieszą się pięknymi stronami internetowymi pełnymi grafiki i animacji, są to niektóre z głównych sprawców dużych rozmiarów plików i niskiej wydajności.

projektanci stron internetowych patrzą na wydajność jako całość. Oprócz współpracy z projektantami graficznymi w celu zapewnienia możliwie lekkości obrazów, będą również sprawdzać, w jaki sposób ładowana jest zawartość, jakie inne działania działają za kulisami i inne obszary, które mogą mieć wpływ na wydajność.

Skala & stosunek

w tradycyjnych mediach drukowanych rozmiar strony rzadko się zmienia. Ułatwia to projektantom graficznym dostarczanie materiałów o idealnym rozmiarze za każdym razem. Ale w cyfrowym świecie wszyscy posiadamy ekrany o różnych rozmiarach.

w rezultacie projektanci stron internetowych muszą rozważyć projekty, które mogą być obsługiwane na dużych monitorach komputerowych, tabletach lub małych smartfonach. Istnieje wiele sposobów na to-dziś wolimy dynamicznie ładować treści w oparciu o urządzenie, a nie mieć wtórny wariant mobilny naszych stron internetowych-ale jest to czynnik, który wpływa na każdy wybór.

projektanci stron internetowych muszą tworzyć struktury, które dynamicznie dostosowują się do skali. Z kolei oznacza to, że muszą planować z aktywami, które również się dostosowują. Obraz, który pojawia się na pulpicie, może wymagać przeskalowania w dół, ale może również wymagać dostosowania do tekstu.

wpływa to również na typografię i inne obszary, tworząc nakładanie się zagadnień związanych z grafiką i projektowaniem stron internetowych. Zespół projektantów graficznych może wybrać na przykład najpiękniejsze czcionki, ale zespół internetowy musi sprawdzić, czy można je wyraźnie odczytać na mniejszym ekranie.

teoria wizualna

wcześniej wspominaliśmy zarówno o teorii koloru, jak i hierarchii wizualnej. To ta szersza teoria wizualna jest niezbędna dla stron internetowych. Kiedy użytkownik ląduje na stronie internetowej, to wizualna prezentacja na frontendzie wskazuje, gdzie się znajduje. Im szybciej zrozumieją, gdzie się przenieść, gdzie kliknąć i jak znaleźć to, czego potrzebują, tym bardziej skuteczna jest strona internetowa w rozwiązywaniu ich początkowych problemów.

w tym celu graficy rozumieją, jakich kolorów użyć, jak układać strony, Jak nadać przestrzeni i wizualnej “wagi” najważniejszym aspektom i jak wszystkie te wybory wpływają na ostateczne doświadczenie.

bieżące wsparcie

kiedy zasoby wizualne są gotowe , to wszystko-to koniec. Jednak strona internetowa stale się dostosowuje i ewoluuje. Dodawane są nowe strony lub sekcje lub zespół projektantów stron internetowych musi wybrać nowe technologie, aby uczynić je jeszcze bardziej wydajnymi. Z kolei te wybory oznaczają planowanie nowej sekcji lub nawet przeprojektowanie istniejącej konstrukcji.

wraz z rozwojem internetu strony internetowe stały się bardziej elastyczne i wydajne. Aby nadążyć, projektanci stron internetowych musieli nadążać za tym tempem. Na przykład rozwój smartfonów sprawił, że witryny mobilne stały się coraz bardziej istotne, podczas gdy nawet komputery stacjonarne mają nowe przeglądarki i inne technologie, które należy uwzględnić.

jednak większość z nich rzadko dotyczy projektowania graficznego, ponieważ koncentruje się wyłącznie na frontendzie. Kiedy wybór technologii wpływa na efekty wizualne, często angażuje się projektowanie graficzne, ale do tego czasu to zespół projektantów stron internetowych utrzymuje i ulepsza istniejące strony internetowe.

analityka

ustaliliśmy już, że projektowanie stron internetowych jest procesem ciągłym – jak myślisz, kto analizuje aktualną wydajność i dane witryny? Projektanci stron internetowych wykorzystują te informacje do pomiaru sukcesu swojej witryny i planowania kolejnych ulepszeń.

na przykład typowa strona internetowa może skupiać się na tym, które strony są przeglądane (a które nie), ile osób szybko opuszcza witrynę (współczynnik odrzuceń) i jak szybko witryna jako całość działa dla użytkowników. Może również skupić się na SEO, na przykład na tym, które słowa kluczowe przyciągają ludzi, które strony są wysoko oceniane i jakie są najczęstsze źródła ruchu. Wiele z nich może następnie prowadzić do nowych decyzji dotyczących projektowania stron internetowych.

jednak w przypadku bardziej konkretnych stron internetowych nie kończy się to na tym. Sklepy e-commerce, a także inne portale, często muszą jeszcze bardziej uwzględniać aktywność użytkowników. Czy użytkownicy mogą znaleźć wszystkie potrzebne przedmioty? Czy proces płatności przebiega sprawnie? Czy ludzie kupują częściej czy rzadziej? Wszystko to może wskazywać, kiedy coś idzie nie tak i wymaga poprawy.

rola z programistami

chociaż jasne jest, że projektanci stron internetowych nie są programistami (chociaż obaj często są zaliczani do branży “Web dev”), jasne jest, że nadal mają silną wiedzę techniczną. To sprawia, że są idealnym wyborem do pracy ramię w ramię z programistami nad dowolnym projektem.

projektanci muszą dokonywać wyborów technologicznych, które pokrywają się z programistami, więc ma sens, że rola projektowa ściśle współdziała z tymi ostatnimi. Podczas gdy rola projektowania stron internetowych uwzględnia rozmiary plików i problemy z wydajnością, to ostatecznie programiści muszą przekonwertować wszystko na funkcjonalny kod. Dotyczy to również późniejszych ulepszeń lub dostosowań. W rezultacie komunikacja między tymi dwoma zespołami jest niezbędna.

z drugiej strony grafika rzadko się Pokrywa, jeśli w ogóle. Gdy witryna potrzebuje zasobów wizualnych, to zespół projektantów internetowych zazwyczaj przekazuje je programistom w ramach całego projektu.

TL; DR-projektowanie graficzne a projektowanie stron www

jeśli pracujesz nad stroną internetową, potrzebujesz zarówno projektowania stron internetowych, jak i projektowania graficznego. Ta pierwsza jest aktywna w całym projekcie, od początkowych wyborów po pomoc programistom w prawidłowym wdrożeniu wszystkiego. Oprócz tego, projekt graficzny przynosi wiedzę na temat zachowań użytkowników i teorii wizualnej, aby stworzyć zasoby, aby zapewnić, że frontend jest tak przyjazny dla użytkownika i inspirujący, jak to możliwe.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.