Layout, mockup, modal… ale co to znaczy? - słownik projektowania graficznego

Zdajemy sobie sprawę z tego, że wyrażenia i pojęcia, których my używamy na co dzień, mogą nie być zrozumiałe dla osób, które nie pracują z projektowaniem czy kodowaniem stron internetowych. Dlatego właśnie dziś wychodzimy z pomocną dłonią! Przygotowaliśmy dla was słownik projektowy, w którym znajdziecie wszystkie pojęcia, z których aktywnie korzystamy. Wierzymy, że pomoże on zrozumieć wiele maili, propozycji i pytań!

Z tego wpisu dowiesz się:

  • czym różni się layout, mockup i wireframe?
  • czym jest UX, a czym UI?
  • co to oznacza, że strona jest responsywna?

Layout / prototyp

Layout

Layout / prototyp - Te dwa określenia w dużej mierze się pokrywają. Layout to najprościej ujmując: projekt układu graficznego. Może on prezentować stronę internetową, ulotkę, nadruk na koszulkach czy jakikolwiek inny element graficzny, w którym w przemyślany sposób zostały rozmieszczone elementy graficzne. Co istotne, layout jest statycznym projektem graficznym i często może być prezentowany choćby w formie grafiki JPG czy PNG. Jeśli natomiast rozbudujemy nasz layout bardziej, dodamy animowane elementy, hovery czy przejścia pomiędzy widokami, mówimy wtedy o prototypie. Prototyp jest to layout lub wiele layoutów, do których dodane zostały elementy interaktywne i/lub animowane.

Przykład:

Jeśli chcesz, abyśmy stworzyli dla Ciebie dobrze skomponowany, przemyślany, estetyczny i przede wszystkim działający layout skontaktuj się z nami!

Wireframe

Wireframe

Wireframe - jest to bardzo wczesna forma layoutu, która nie przykłada niemal żadnej wagi do aspektów wizualnych. Celem wireframe’ów jest stworzenie zarysu struktury projektowanego elementu, rozplanowanie miejsc dla poszczególnych elementów projektu. Jest to w skrócie szybki szkic projektu z pominięciem aspektów graficznych.

Przykład:

Mockup

Mockup

Mockup - Jest to wizualizacja gotowego produktu przed jego faktycznym wdrożeniem. Mockupy najczęściej tworzone są po to, aby zwizualizować projekty przeznaczone do druku, zanim zostaną one wydrukowane. Pozwala to na lepsze zweryfikowanie projektu i wprowadzenie ewentualnych zmian, zanim projekt zostanie wysłany do drukarni, dzięki czemu możemy uniknąć znacznych kosztów druku.

Przykład:

Mockup przykład

Container

Container

Container (kontener) - Wyrażenie bardzo często stosowane w kontekście projektowania i kodowania stron internetowych. Container to maksymalna powierzchnia na stronie internetowej, na której muszą znaleźć się wszelkie treści, zdjęcia czy teksty, aby nie zostały ucięte na urządzeniach o mniejszych ekranach. Kontenery zaś niemal zawsze podzielone są na kolumny, według których projektowane są treści na stronie. Układ według kolumn może się wielu osobom słusznie kojarzyć ze składem gazet i czasopism.

Przykład:

Container - przykład

Zakładka

Zakładka

Zakładka - inaczej podstrona, jest to nic innego jak strona internetowa, która w strukturze sieciowej jest tuż pod jej stroną główną. Przykładowo, naszą stroną główną jest: www.rekinysukcesu.pl natomiast wszystkie pozycje w menu to nowe zakładki z własną treścią, jak np. www.rekinysukcesu.pl/serwisy-www/strony-internetowe.

Przykład:

Zakładki

Sekcja

Sekcja

Sekcja - jest to jeden z głównych elementów, z których składają się strony internetowe, jest to w pewnym sensie “rozdział” strony internetowej, ponieważ każda sekcja składa się z nagłówka i treści. W treści sekcji może być niemal wszystko, począwszy od samego tekstu, zdjęć, przełączników, przycisków, tabel itp. Przykładem sekcji może być np. sekcja z opiniami, sekcja z aktualnościami czy choćby sekcja ze zdjęciem i tekstem.

Przykład:

Sekcja - przykład

Rozdzielacz

Rozdzielacz

Rozdzielacz (zakładka rozdzielająca) - jest to pozycja w menu, która nie ma swojej zakładki, a jedynie przekierowuje do innych, tematycznych zakładek. Jest to w skrócie nadana kategoria do zakładek, do których można z niej przejść. Jedyną treścią, jaką ewentualnie zakładka rozdzielająca może mieć, są przyciski kierujące do dalszych zakładek.

Przykład:

Rozdzielacz - przykład

Logo

Logo

Logo - jest to unikalna i charakterystyczna dla danej marki forma graficzna, która może składać się z sygnetu, logotypu i tagline’a. Więcej na temat budowy logo pisaliśmy w naszym wcześniejszym wpisie - System identyfikacji Wizualnej - czym jest i dlaczego warto o niego zadbać? Logo to jeden z podstawowych elementów systemy identyfikacji wizualnej marki, o czym więcej piszemy tutaj: Identyfikacja wizualna firmy.

Przykład:

Logo - przykład

Konwersja

Konwersja

Konwersja - W kontekście ogólnym oznacza przemianę, natomiast w marketingu, konwersja oznacza wykonanie przez odbiorcę oczekiwanego przez nas działania, np. skontaktowanie się z nami za sprawą prowadzonej przez nas kampanii marketingowej. Można więc skojarzyć konwersję marketingową jako przemianę potencjalnego klienta w realnego odbiorcę.

SEO

SEO

SEO (Search Engine Optimization) - Jest to sposób na optymalne przygotowanie strony pod kątem pozycjonowania w najpopularniejszej wyszukiwarce, jaką jest Google. SEO jest niezwykle istotne, ponieważ to właśnie dzięki odpowiedniej optymalizacji, będziemy w stanie wyświetlać się wysoko w wynikach wyszukiwania, z których na co dzień korzystają miliony ludzi.

SXO

SXO

SXO - (Search Experience Optimization) - To połączenie dwóch kluczowych aspektów funkcjonowania stron internetowych: SEO i UX. SXO to połączenie optymalizacji pod kątem wyszukiwarki Google z podjętymi działaniami UX’owymi bezpośrednio na stronie. Zadbanie o SXO zapewni znaczną poprawę współczynnika konwersji na naszej stronie internetowej.

Powiadomienie PUSH

Powiadomienie PUSH

Powiadomienie PUSH - Jest to technologia, którą znamy już od dawna, a jednak warto przypomnieć jej definicję. Powiadomienia PUSH to systemowe powiadomienia, wywoływane przez daną stronę internetową lub aplikację. Inaczej wyglądają na komputerze z systemem Windows, inaczej na urządzeniach z Androidem, iOS’em czy na Linuxie.

Przykład:

Powiadomienie PUSH - przykład

Modal

Modal

Modal - To element strony internetowej, który wyświetla się na pierwszym planie całej strony internetowej. Aby powrócić do głównej treści, użytkownik musi nawiązać kontakt z modalem, wykonując akcję lub zamykając go. Modale są często używane do kierowania uwagi użytkowników na ważne działanie, do formularzy kontaktowych lub aby poinformować o istotnej promocji.

Przykład:

Modal - przykład

Popup

Popup

Popup - Jest to funkcjonalność bardzo zbliżona do modala, jednak popup charakteryzuje się tym, że wymaga od odbiorcy znacznie mniejszej uwagi, nie wyłącza możliwości interakcji z resztą strony jak w przypadku modala, a użytkownik po wyświetleniu popupa może bez problemu kontynuować przeglądanie strony.

Przykład:

Popup - przykład

Dialog

Dialog

Dialog - Niech nie zwiedzie nas definicja “dialogu” w konteście rozmowy, dyskusji, ponieważ w świecie programistycznym, dialog oznacza element podobny do popupa. Jest to również element pojawiający się nad całą treścią strony, jednak wyróżnia go jego treść, dialog jest bardziej rozbudowany od popupa, ponieważ może zawierać takie elementy jak inputy, przyciski czy pola wyboru.

Przykład:

Dialog - przykład

Input

Input

Input - Jest to element, z którym na co dzień spotykamy się bardzo często, przeglądając strony internetowe. Input to z angielskiego “wkład”, “dane wejściowe” i na stronach www oznacza pole tekstowe, czyli właśnie miejsce, do którego wprowadzamy dane (tekstowe).

Przykład:

Input - przykład

Select

Select

Select - To element często wizualnie podobny do inputa, jednak różni się tym, że zamiast możliwości wprowadzenia dowolnego tekstu, select daje nam możliwość wybrania jednej z dostępnych opcji.

Przykład:

Select - przykład

Slider

Slider

Slider - Jest to komponent strony (najczęściej cała sekcja), którego treść jest zmieniana co kilka sekund. Slidery bardzo często są umieszczane już na pierwszym widoku po wejściu na daną stronę i to za ich sprawą bez żadnej ingerencji użytkownika co kilka sekund mogą zmieniać się wyświetlane zdjęcia, teksty czy przyciski. Jest to dobre rozwiązanie jeśli chcemy przekazać wiele treści na niewielkiej powierzchni lub jeśli chcemy przedstawić wiele kategorii danego tematu. Należy jednak wziąć pod uwagę, że slidery są dość “ciężkimi” elementami i mogą spowalniać stronę.

Przykład:

Slider - przykład

Responsywność

Responsywność

Responsywność - Słowo to wywodzi się z angielskiego słowa “Respond”, czyli “odpowiadać” , “reagować” i oznacza umiejętność do odpowiadania na zadane warunki danego oprogramowania czy strony internetowej. Z perspektywy stron internetowych, bardzo wiele czynników może mieć wpływ na wyświetlanie strony, takich jak oprogramowanie, na którym strona jest wyświetlana, przeglądarka czy rodzaj urządzenia, dlatego strony muszą potrafić się dostosować do każdych warunków, aby zawsze poprawnie wyświetlać treść.

RWD

RWD

RWD (Responsive Web Design) - Jest to projektowanie stron internetowych z uwzględnieniem właśnie responsywności. RWD dziś to absolutna podstawa, aby nasza strona internetowa odpowiednio wyświetlała się zarówno na komputerach stacjonarnych, tabletach i urządzeniach mobilnych. Aby projektować z myślą o responsywności, należy wziąć pod uwagę desktop, tablet oraz wersję mobilną strony.

Mobile

Mobilny

Mobile / Mobilny - Jest to nic więcej jak smartfon (urządzenie przenośne, czyli mobilne), w kontekście stron internetowych - wersja mobilna to po prostu sposób, w jaki dana strona będzie się wyświetlała na smartfonach. Wraz z layoutem desktopowym to dwa najbardziej fundamentalne aspekty projektowe stron WWW.

Desktop

Desktop

Desktop - Urządzenie stacjonarne, komputer PC, laptop. Layouty desktopowe to projekty stron internetowych dopasowane do wyświetlania na urządzeniach stacjonarnych. Wraz z layoutem mobilnym to dwa najbardziej fundamentalne aspekty projektowe stron WWW.

UX

UX

UX (User Experience) - Z angielskiego oznacza “doświadczenia użytkownika”, a samo projektowanie User Experience Design oznacza projektowanie doświadczeń użytkownika, czyli postawienie na pierwszym miejscu aspektów funkcjonalnych projektowanej strony internetowej, ponad aspektem wizualnym. Więcej o UX piszemy w osobnym artykule - User Experience (UX) a User Intefrace (UI) - o co w tym właściwie chodzi? O znaczeniu projektowania stron WWW

UI

UI

UI (User Interface) - Z angielskiego “interfejs użytkownika”, oznacza wszelkie elementy wizualne, za pomocą których poruszamy się po stronie. Elementami UI będą np. przyciski, menu, galerie czy formularze. Więcej o UI piszemy w osobnym artykule - User Experience (UX) a User Intefrace (UI) - o co w tym właściwie chodzi? O znaczeniu projektowania stron WWW

Hover

Hover

Hover - Animowany efekt pojawiający się po najechaniu kursorem na wybrany element.

Przykład:

Hover - przykład

Feedback

Feedback

Feedback - Jest to po prostu informacja zwrotna, odpowiedź na poruszony temat. Feedbackiem może być zarówno akceptacja przesłanej propozycji, jak i wskazanie elementów, które chcemy poddać dyskusji lub zmienić.

Research

Research

Research - Oznacza po prostu “badanie”, polega najczęściej na pozyskaniu większej ilości informacji na dany temat. Często research wiąże się również z analizą danego tematu i wyciągnięciem wniosków.

Wersja testowa

Wersja testowa

Wersja testowa - to wersja demo strony internetowej do pokazu dla klienta. Służy do demonstracji kluczowych funkcji i designu przed finalnym uruchomieniem. Jej zadaniem jest pokazanie projektu i zebranie feedbacku od klienta.

Wersja produkcyjna

Wersja produkcyjna

Wersja produkcyjna - finalna wersja strony internetowej, która została już oficjalnie uruchomiona i znajduje się na docelowej domenie. Zawiera wszystkie treści, funkcję i elementy projektu, które zostały przetestowane i zaakceptowane przez Klienta.

Tetsy RWD

Testy RWD

Testy RWD - Po zaprojektowanej i zakodowanej stronie internetowej poświęcamy sporo czasu na testowanie jej pod względem responsywności. Polega to na sprawdzeniu, czy strona wyświetla się poprawnie na przeróżnych rozdzielczościach, począwszy od małego smartfona, przez tablet, na ekranach 4K kończąc.

Tetsy funkcjonalne

Testy funkcjonalne

Testy funkcjonalne - Sprawne funkcjonalności na stronie internetowej to podstawa do jej prawidłowego funkcjonowania i konwertowania, dlatego przeprowadzamy również rozległe testy funkcjonalne, w których sprawdzamy, czy wszystkie funkcje, takie jak formularz kontaktowy, newsletter, wyszukiwarka czy livechat działają, jak należy.

Brief

Brief

Brief - Jest to formularz przeznaczony dla Klienta, w którym pytamy od podstawowe aspekty planowanego projektu. Jest to niezwykle ważny dokument, ponieważ w dużej mierze to na jego podstawie określamy cały charakter wizualny projektu. Brief jest niezbędny, abyśmy mogli dokładnie poznać oczekiwania Klienta czy to w kwestii projektowania logo, strony internetowej czy kampanii marketingowej.

Przykład:

Brief - przykład

Debriefing

Debriefing

Debriefing - Jest to proces przeprowadzany wewnętrznie w naszym zespole i polega na głębokiej analizie otrzymanego od Klienta briefu i wyciągnięciu z niego wniosków, którymi w większym lub mniejszym stopniu będziemy kierowali projekty.

Oczywiście pojęć, których używamy podczas projektowania i kodowania stron internetowych, jest znacznie więcej, jednak nie chcemy tutaj rozpisywać wszelkich technikaliów, ponieważ w większości przypadków byłaby to po prostu “wiedza bezużyteczna” dla was 🙂

Po takim szkoleniu sami się boimy, że nas zagniecie terminologią! Zapraszamy do kontaktu!

Szukasz efektywnej agencji interaktywnej?

Na naszą efektywność składa się ponad 10-letnie doświadczenie, stale rozwijająca się kadra specjalistów i rzetelne oraz uczciwe podejście do Klienta. Wiemy jak osiągnąć założone cele w błękitnym i czerwonym oceanie marketingu online.

Agencja marketingowa RekinySukcesu.pl to ponad 350 zadowolonych Klientów, ponad 2 000 przeszkolonych osób, ponad 500 tys. zł obsługiwanego w roku budżetu w kampaniach PPC. Sumując wszystkie dane, użytkownicy spędzili już łącznie ponad 90 lat na wyprodukowanych przez nas stronach internetowych. A nam ciągle mało. Nie uznajemy kompromisów. Dlatego warto kliknąć jeden z przycisków poniżej i umówić się na wizytę we Wrocławiu, Kłodzku lub na spotkanie online.

Zobacz inne:

close
keyboard_arrow_up