65 Warunki projektowania stron internetowych, które powinieneś znać

Język projektowania stron internetowych zawiera wiele terminów związanych z projektowaniem stron internetowych, które powinieneś znać. Niezależnie od tego, czy tworzysz własny blog lub stronę internetową, współpracujesz z projektantem stron internetowych lub programistą stron internetowych, czy też chcesz ogólnie dowiedzieć się więcej o projektowaniu stron internetowych, ten post zawiera najważniejsze terminy używane w projektowaniu stron internetowych. Zagłębimy się również w szczegóły procesu projektowania stron internetowych, w tym metody rozwiązywania problemów i przepływ pracy.

Podczas ostatniego seminarium internetowego z ekspertem od projektowania stron internetowych Michelle Schulp, zdobyliśmy wgląd w terminy związane z projektowaniem stron internetowych i dowiedzieliśmy się, jak prowadzić lepszą rozmowę na temat projektowania stron internetowych.

Terminy projektowania stron internetowych: słownictwo dotyczące projektowania stron internetowych

Znajomość języka projektowania stron internetowych pomoże Ci zadawać lepsze pytania, skuteczniej komunikować się i tworzyć lepszy produkt końcowy. Możesz również zauważyć, w jaki sposób te terminy są wdrażane w wielu różnych witrynach (na lepsze lub gorsze). Ponieważ projektowanie stron internetowych jest procesem całościowym, projektanci stron internetowych są szkoleni, aby widzieć szerszy obraz, a także szczegóły.

Warunki marki

Branding to komunikacja przekazu, wartości i doświadczenia organizacji. Wszystko, począwszy od logo firmy i możliwych do zidentyfikowania elementów projektu, a skończywszy na „przeczuciu”, jakie ludzie mają na temat organizacji, wyjaśnia dlaczego stoi za witryną internetową. Jeśli chodzi o projektowanie stron internetowych, masz możliwość tworzenia doświadczeń, które wzmacniają markę firmy.

• 1. Tożsamość : Cała wizualna reprezentacja Twojej marki może obejmować logo, kolor, typografię, obrazy, głos itp. Nie tylko logo.
• 2. Lettermark/Wordmark/Logotype : rodzaj logo wykonanego ze stylizowanych liter (IBM) lub słów (Coca-Cola)
• 3. Znak marki : rodzaj logo wykonanego z przedstawieniem graficznym (jabłko, cel)
• 4. Ikona : uproszczone renderowanie obiektu lub koncepcji. Logo i ikona to nie to samo.
• 5. System projektowania : repozytorium komponentów cyfrowych wielokrotnego użytku, które łączą się w stronę internetową.
• 6. Przewodnik po marce: wizualne i filozoficzne odniesienie do koloru, osobowości i głosu marki.

Warunki doświadczenia użytkownika

Doświadczenie użytkownika obejmuje sposób, w jaki ludzie wchodzą w interakcję i angażują się w witrynę internetową. Doświadczenie użytkownika wpływa na sposób, w jaki kierujemy użytkowników przez stronę i prowadzimy ich do określonych celów końcowych. Obejmuje wiele elementów projektowania i rozwoju, w tym sposób, w jaki coś wygląda i działa. Podejmuj decyzje dotyczące funkcjonalności z myślą o użytkowniku końcowym, a nie o własnych preferencjach lub narzędziach, z których korzystasz.

• 7. Persona : fikcyjna postać, która reprezentuje głównego użytkownika Twojej witryny/produktu. Zazwyczaj persony są bardzo dobrze rozwinięte, ponieważ powinny reprezentować prawdziwych ludzi z prawdziwą motywacją.
• 8. Model szkieletowy : układ witryny o niskiej wierności, reprezentacja ogólnej zawartości na poziomie bloków i elementy interaktywne.
• 9. Makieta : układ witryny o wysokiej wierności, reprezentacja ostatecznego koloru, typografia, obrazy itp.
• 10. Prototyp : Interaktywna wersja strony, nie może być zbudowana z ostatecznym kodem.
• 11. CTA : Wezwanie do działania, zwykle w połączeniu z przyciskiem.
• 12. Konwersja : gdy użytkownik podejmuje określone pożądane działanie.
• 13. Strona docelowa : pojedyncza strona zoptymalizowana pod kątem określonej grupy odbiorców lub wyniku wyszukiwania.
• 14. Użyteczność : sposób, w jaki prawdziwi użytkownicy faktycznie wchodzą w interakcję z Twoją witryną, zwykle testowany przez obserwację serii zadań z przewodnikiem.

Warunki interfejsu użytkownika

Interfejs użytkownika (UX, UI) zawiera elementy na stronie, z którymi użytkownik wchodzi w interakcję. Twój interfejs użytkownika ma wpływ na wrażenia użytkownika, chociaż to nie to samo. Nie zmuszaj swoich użytkowników do myślenia; Zaprojektuj intuicyjny interfejs wykorzystujący nowoczesne wzory.

• 15. Breadcrumb : Hierarchiczne linki do treści.
• 16. Menu : Główny obszar nawigacji, czasami z listą rozwijaną lub wysuwaną elementów podmenu.
• 17. Filtr : Predefiniowane elementy, które pozwalają zawęzić widoczne treści według różnych taksonomii (taksonomie to fantazyjny sposób na określenie kategorii).
• 18. Wyszukiwanie : Otwarte wejście, które przeszukuje zawartość i zwraca listę wyników.
• 19. Suwak : Modny, animowany sposób wyświetlania informacji, których prawdopodobnie nie powinieneś używać.

Warunki dotyczące kompozycji

Kompozycja odnosi się do tego, jak współgrają ze sobą treść i estetyka witryny. Każdy element na stronie powinien czuć się tak, jakby należał do układu strony, a nie był dodawany po namyśle.

• 20. Równowaga : Używanie podobnych lub uzupełniających się elementów projektu, aby kompozycja wydawała się równa.
• 21. Powtarzanie : Używanie powtarzających się elementów w celu wzmocnienia wzorów lub służenia jako znane wizualne wskazówki.
• 22. Whitespace : Ile „przestrzeni oddechowej” ma każdy element?
• 23. Siatka : Struktura bazowa projektu, która określa, jak wszystko się układa.
• 24. Zasada trójpodziału : koncepcja wizualna, w której najprzyjemniejsze punkty centralne znajdują się na przecięciu trzech rzędów i kolumn.

Warunki hierarchii

Hierarchia obejmuje relatywne znaczenie widoczności fragmentów informacji. Hierarchia wizualna to zazwyczaj zbiór drobnych szczegółów, takich jak typografia, kolor, bliskość i równowaga. Dobra hierarchia pomaga w skanowaniu informacji i pomaga użytkownikom ustalać priorytety informacji na stronie według ważności. Hierarchia pomaga również kierować użytkowników przez stronę internetową. Decyzje dotyczące stylizacji i rozmieszczenia elementów mają ogromny wpływ na wrażenia z korzystania z serwisu.

• 25. Skala : Jak duże lub małe są względem siebie elementy na stronie?
• 26. Bliskość/wyrównanie : które elementy na stronie są ze sobą powiązane?
• 27. Punkt kontaktowy : Miejsce na stronie, na które kierujemy uwagę użytkownika
• 28. Znaczniki semantyczne : Poprawne używanie elementów HTML, aby zasugerować hierarchię i użycie w treści.

Warunki typograficzne

Typografia to estetyczne decyzje dotyczące układu kroju pisma. Rozmiar, odstępy, wyrównanie, rozmiar kolumny i względny rozmiar tekstu mają duży wpływ na wrażenia użytkownika, a także na estetykę. Typograficzne wybory powinny być przemyślane, zarówno wzmacniać systemy dużego obrazu, jak i być estetycznie atrakcyjne i łatwe do odczytania/zrozumienia.

• 29. czcionka (krój pisma) : kolekcja liter i glifów/symboli
• 30. font-family : Jakiego kroju czcionki używasz?
• 31. font-size : Jaka jest duża/mała?
• 32. font-weight : Jak ciężki/lekki jest?
• 33. styl czcionki : kursywa, podkreślenie, przekreślenie
• 34. wysokość linii (leading) : Ile odstępu między liniami?
• 35. Odstępy między literami (śledzenie) : Regulacja odstępów między grupami liter/bloków tekstu.
• 36. kerning : Odstępy między poszczególnymi literami.
• 37. text-decoration : Czy tekst jest podkreślony, czy ma dodatkową stylizację?
• 38. serif/sans serif : Czcionki szeryfowe mają dodatkową ozdobną kreskę lub linię na końcu liter, podczas gdy czcionka bezszeryfowa jest bez.

Warunki kolorystyczne

Kolor obejmuje decyzje estetyczne dotyczące użycia koloru w kompozycji. Kolor może być używany do wywoływania emocji, podkreślania, dzielenia lub grupowania elementów; kolor może tworzyć wizualną jedność i równowagę. Kolor jest zwykle związany z brandingiem. Dobór kolorów powinien być przemyślany i konsekwentnie stosowany w całej witrynie.

• 39. HEX : Na stronach internetowych kolor szesnastkowy, sześciocyfrowa liczba używana do reprezentowania koloru w HTML/CSS.
• 40. RGB : Addytywny model kolorów używany dla ekranów, wartości światła czerwonego/zielonego/niebieskiego łączą się w kolory.
• 41. CMYK : Do drukowania, subtraktywny model kolorów używany do łączenia atramentu cyjan/magenta/żółty/czarny w celu utworzenia kolorów.
• 42. Kolor Pantone/spot : Specyficzne niestandardowe atramenty określonego koloru. Duże marki zwykle mają swój własny, niestandardowy kolor Pantone.
• 43. Hue : Gdzie to jest w spektrum kolorów?
• 44. Nasycenie : Jak żywy lub matowy jest kolor?
• 45. Kontrast : Jak bardzo się wyróżnia?
• 46. Krycie: stałe czy przezroczyste?

Warunki dotyczące obrazów

Terminy dotyczące obrazów obejmują elementy wizualne i graficzne strony internetowej. Zdjęcia są ważne dla przekazywania wiadomości i nawiązywania kontaktu z odbiorcami. Jednak niewłaściwe użycie zdjęć może zwiększyć czas ładowania witryny, nie wpływając na komfort użytkowników. Użyj obrazów, aby wspierać swoje wiadomości; Użyj odpowiedniego formatu obrazu dla treści.

• 47. Wektor : Obrazy wykonane z matematyki (SVG, EPS).
• 48. Raster : Obrazy wykonane z pikseli (JPG, TIFF, PNG, GIF).
• 49. Rozdzielczość : Ile pikseli ma obraz rastrowy (np. 800×600 lub 2400×1200). Wyższa rozdzielczość będzie zazwyczaj oznaczać większy rozmiar, ale większą szczegółowość.
• 50. Kompresja : Optymalizacja (duży/mały rozmiar pliku).
• 51. JPG/JPEG : Najlepsze do fotografii i szczegółowych obrazów.
• 52. PNG : Najlepsze do grafiki, prostych kolorów i obrazów z przezroczystością.
• 53. GIF : Najlepsze do grafiki lub animacji o niskiej szczegółowości.
• 54. TIFF : Najlepsza dla jakości druku, nie nadaje się do wyświetlania na ekranie.
• 55. SVG : Format obrazu wektorowego odpowiedni do wyświetlania w Internecie, najlepszy do grafiki i logo.

Terminologia internetowa

Terminologia internetowa obejmuje ogólne słownictwo podczas projektowania stron internetowych. Projektanci stron internetowych nie tylko znają się na projektowaniu, ale także rozumieją technologię, dla której projektują.

• 56. Nagłówek : Tytuły i podtytuły pisane semantycznie ze znacznikami h1 – h6. Przydatne do organizowania informacji w hierarchię i są wykorzystywane przez wyszukiwarki i czytniki ekranu.
• 57. Body Copy/Body Text : Główna treść pisana, zwykle akapity, listy, cytaty itp.
• 58. Bohater : główny obraz/grafika na stronie głównej lub stronie docelowej, zwykle z głównym wezwaniem do działania.
• 59. Single-Scroll : Witryna, w której większość treści znajduje się na jednej stronie
• 60. Projekt responsywny : projekt, który nie jest stały, ale dostosowuje się do rozmiaru ekranu i/lub urządzenia użytkownika.
• 61. Punkt przerwania : Określony punkt (np. szerokość), w którym treść/układ strony zmieni się, aby dopasować ją do innego interfejsu.
• 62. Dostępność : możliwość korzystania ze strony internetowej przez wszystkich odbiorców, w tym osoby z zaburzeniami wzroku, słuchu lub funkcji motorycznych, dzięki technologii wspomagającej lub standardowej nawigacji.
• 63. Front-End : Ogólnie rzecz biorąc, zajmuje się kodem, który działa w przeglądarce i kontroluje to, co jest widziane i wchodzi w interakcje.
• 64. Back-End : Ogólnie rzecz biorąc, zajmuje się kodem, który działa na serwerze i kontroluje zawartość i logikę.
• 65. CMS : System zarządzania treścią (jak WordPress).

Więcej zasobów dotyczących warunków projektowania stron internetowych

Aby uzyskać więcej informacji na temat terminów projektowania stron internetowych, zapoznaj się z 4 kluczowymi zasadami projektowania stron internetowych i 99 opisowymi słowami projektowymi, które powinieneś znać.

Obejrzyj powtórkę z webinaru: Jak mówić jednorożcem – zrozumieć język projektowania

Michelle Schulp z Marktime Media jest niezależnym projektantem graficznym i programistą frontendowym w Minneapolis. Przed rozpoczęciem kariery studiowała komunikację wizualną z nieletnimi z psychologii i socjologii. W miarę postępów w pracy, rozwijała się również w zakresie rozwoju front-endu i projektowania doświadczeń użytkownika, aby uzupełnić swoje umiejętności. To połączenie dyscyplin doprowadziło ją do przyjęcia strategicznego podejścia do projektowania, skoncentrowanego na rozwiązywaniu namacalnych problemów i osiąganiu rzeczywistych celów w oparciu o to, jak ludzie myślą. Dowiedz się więcej o projektowaniu stron internetowych z Michelle podczas Web Design Bootcamp.

Kristen Wright

Kristen pisze samouczki, które pomagają użytkownikom WordPressa od 2011 roku. Zwykle można ją znaleźć, gdy pracuje nad nowymi artykułami na blogu iThemes lub opracowuje zasoby dla #WPprosper. Poza pracą Kristen lubi prowadzić dzienniki (napisała dwie książki!), wędrować i biwakować, gotować i codzienne przygody z rodziną, mając nadzieję na bardziej obecne życie.