10 термина за уеб дизайн, които всеки трябва да знае

Подобно на всяка индустрия, която работи в техническа сфера, уеб дизайнът е болен от шумни думи и фрази и дори ако сте опитен професионалист, може да е трудно да следите какво е това.

Обратно кога уеб дизайн беше в зародиш, той вече страдаше от проблема с твърде много съкращения и технически език, тъй като под цялата хипербола са някои доста ясни технологии и идеи. Днешната среда е сто пъти по-сложна, тъй като инструментите и рамките, езиците и библиотеките, които използваме в мрежата, се развиват и напредват.

Дизайнерите - дори професионални уеб дизайнери - могат да се борят да запазят отгоре всички различни модни думи и технологии, така че тук сме събрали 10 от най-важните термини за уеб дизайн, от които всеки трябва да има поне разбиране. Вижте списъка ни по-долу и ни уведомете дали сме пропуснали нещо, което смятате, че трябва да се появи в коментарите по-долу.



01. HTML, CSS и JavaScript

термини за уеб дизайн: HTML5

HTML означава HyperText Markup Language, а HTML5 е най-новата версия

Нека извадим този още в началото!

HTML

HTML означава HyperText Markup Language и е езикът на мрежата.

Казано по-просто, HTML предоставя начин на уеб дизайнера да каже на вашия уеб браузър как да се отнася към определено съдържание. HTML съдържа редица различни маркери, които позволяват на дизайнера да маркира съдържанието им със семантично значение, така че параграфите да се идентифицират като текстово копие, докато изображенията се импортират като изображения и т.н.

CSS

HTML обаче не е достатъчен сам по себе си, за да създава красиви уеб страници. Каскадните таблици със стилове (CSS) предоставят метод на дизайнерите за създаване на визуален набор от правила, които определят как различните елементи в дадена уеб страница ще бъдат изобразени на екрана от браузъра.

CSS позволява да се задават неща като цвета на текста, фона, размера, формата и позицията на всички различни части на страницата.

JavaScript

И накрая, JavaScript е (както се подразбира от името) скриптов език, който позволява на дизайнерите да създават взаимодействия на уеб страница.

В исторически план JavaScript се използваше предимно за проверка на формуляра и предоставяше онези досадни предупредителни полета, които изскачаха, когато сте забравили да въведете телефонния си номер в телефонното поле. Днес има много по-жизнеспособни приложения за JavaScript, включително специални визуални ефекти или възможност за зареждане на ново съдържание, без да се налага да презареждате цялата страница.

Едно важно нещо, което трябва да се отбележи е, че въпреки името си, JavaScript няма никаква връзка с езика за програмиране Java.

Прочетете също:

02. Отзивчив дизайн

термини за уеб дизайн: Отзивчив уеб дизайн

Отзивчивият уеб дизайн бързо се превръща в стандартен подход към всички уеб дизайни

Не може да не сте пропуснали да сте чували за концепцията за реагиращ дизайн. През последните няколко години това беше истинска шумна дума в мрежата и не показва признаци на отказ. Клиентите дори започнаха да изискват отзивчиви уебсайтове от своите дизайнери, често без да разбират напълно какво искат!

С прости думи, реагиращият дизайн е този, който се адаптира към устройството на потребителя и в идеалния свят към контекста на потребителя, така че да показва съдържанието, което се изисква, по най-подходящия и достъпен начин, независимо от това какъв тип свързано в мрежа устройство е се използва за гледане. На практика това означава, че уеб страницата ще се препагинира, когато размерът на екрана намалява или се увеличава, показвайки се в множество колони, когато се гледа на настолен компютър, но само в една колона, когато се гледа на смартфон.

Имайте предвид, че концепцията за реагиращ дизайн е много повече от просто преформатиране на съдържание. Прочетете следните статии за отзивчив дизайн, за да научите повече:

03. Семантична маркировка

термини за уеб дизайн: Семантична маркировка

Семантичната маркировка е свързана със свързването на съответните метаданни към съдържанието

Семантичната маркировка е подход за кодиране на HTML, където маркерите за маркиране, използвани за описване на съдържание, също предоставят подходящи метаданни за самото съдържание. Например част от информацията, която има отношение към основното съдържание на страницата, но не е директно темата на страницата, може да бъде маркирана като.

Въпреки че може да звучи като очевидна методология за най-добри практики и мрежата със сигурност е проектирана с оглед на семантиката, използването на този подход не винаги е било просто ...

Ранни дни

В ранните дни на мрежата броят на наличните HTML тагове беше ограничен. Много от съществуващите тагове са били чисто семантични по своя характер:

маркер, например, се използва за маркиране на съдържанието на абзаца.

С течение на времето дизайнерите искаха да разширят границите на възможното, за да създадат по-сложни оформления, отколкото езикът позволява, когато се използва в най-чистата си форма, така че харесванията на

и
таговете, предназначени за маркиране на таблични данни, бяха преназначени, за да осигурят надеждно решение за създаване на колонови оформления.

В същото време дизайнерите започнаха да разчитат на визуалните характеристики по подразбиране на даден маркер, за да определят кой маркер използват за съдържание, вместо да рестайлизират семантично подходящия маркер, за да отговарят на дизайна. В резултат на това големият удебелен текст често се изобразява като заглавие (

,

,

и т.н.), а не или - за акцент - таг.

Изгубено поколение

В резултат на това голяма част от семантичната природа на HTML е загубена за едно поколение. Недостатъкът на несемантичната мрежа е, че става изключително трудно да се поддържа или разбира основния код на уебсайт, а търсачките не са в състояние да дефинират програмно най-важните елементи на дадена страница.

За щастие, с появата на CSS и последната версия на езика HTML, възможността за маркиране с по-пуристичен семантичен подход се върна. CSS улеснява по-сложни оформления, отколкото беше възможно с

, а езикът HTML е разширен, за да включва нови семантично ориентирани маркери като, и.



04. SaaS

термини за уеб дизайн: SaSS

SaaS (Софтуер като услуга) описва всичко - от Google Docs до Photoshop Express

Да не се бърка с SASS , SaaS е съкращение от Софтуер като услуга. С прости думи това означава всяка услуга, която предоставя софтуерна платформа, доставена от или чрез облака.

Популярните примери за SaaS в действие включват най-новите версии на Microsoft Office онлайн, Google Docs и Photoshop Express.

Всяка от тези услуги предоставя на потребителя подобно на настолно изживяване, но се доставя директно от мрежата, без да е необходимо да инсталирате допълнителен софтуер на компютъра на потребителя.

05. A / B тестване

A / B тестването ви позволява да изпробвате различни версии на уеб страница

A / B тестването ви позволява да изпробвате различни версии на уеб страница

A / B тестването е методология за изпробване на различни начини за постигане на един и същ краен резултат, с цел да се установи чрез експериментиране кое решение е най-ефективно.

Обикновено A / B тестването се използва за тестване на различни оформления на уеб страници, проследявайки колко потребители конвертират в плащащи клиенти, използвайки алтернативните оформления.

Продължавайки итеративен процес на прототипиране, оценяване и адаптиране, A / B тестването може да осигури значително увеличение на степента на конверсия на отделните страници. Това е полезен инструмент за използване: по-добрата конверсия означава по-добър баланс!

Прочетете също:

  • Как да използвам AB тестване, проследяване на очите и оптимизатор на уебсайтове
  • Пет умения, от които се нуждаете, за да накарате AB тестването да работи
  • Пътят към успеха на уеб приложението: прототипи и потребителски тестове

06. ВЪЗДУХ

термини за уеб дизайн: ARIA

ARIA (Accessible Rich Internet Application) описва технологии, които спомагат за достъпността на мрежата

ARIA е съкращение от Accessible Rich Internet Application и се отнася до идеята, че уеб приложенията се използват от редица хора, с различни нужди от помощни технологии и оформление.

ARIA обикновено се използва като термин, който помага да се опишат използваните технологии за преодоляване на разликата между нуждите на потребителя и уебсайт или уеб приложение.

В резултат на това може да се отнася до софтуер за четене на екрана, подходи за структурно оформление и методологии за проектиране, като фокусиран върху потребителя дизайн на интерфейса, с цел увеличаване на достъпността на съдържанието и функционалността. W3C спонсорира голяма част от работата, завършена в тази област, и можете да научите повече на Сайт за Инициатива за уеб достъпност ARIA .

Прочетете също:

07. Информационна архитектура (IA)

термини за уеб дизайн: IA

Информационната архитектура (IA) се върти около това как е организиран уебсайт

Информационната архитектура (IA) е родов термин, използван за описание на семантичното оформление на съдържанието и информацията на уебсайт. Той се отнася до организацията на информацията, справяне с това кои страници отиват къде в структурата на уеб сайта, какво съдържание се съдържа на всяка страница и как всяка от тях взаимодейства с други страници в сайта.

Като поле IA се занимава с това да улесни максимално потребителите да намерят търсената информация с цел увеличаване на конверсията, приходите и / или удовлетвореността на потребителите.

  • Прочетете също: Защо планирането на уебсайт е като изграждането на къща

08. Скриптове от страна на сървъра

термини за уеб дизайн: PHP

Скриптове от страна на сървъра - използвайки език като PHP - означава, че манипулирането на данни се извършва на сървъра

Има два различни начина за предоставяне на функционалност на приложението на уебсайт: от страна на клиента, където цялата логика и обработката на данни се обработва от уеб браузъра с помощта на JavaScript и от страна на сървъра, където манипулирането на данните се извършва на сървъра. Повечето уеб приложения комбинират двете, така че от гледна точка на потребителя всичко се обработва в браузъра, но задкулисните данни се изпращат обратно към сървъра, за да се съхраняват, манипулират или генерират.

Скриптове от страна на сървъра е общ термин, описващ езиците, използвани за програмиране на тази манипулация на данни от страна на сървъра. Езиците за скриптове като PHP и ASP.NET осигуряват ясен начин за уеб разработчиците да създават сложна бизнес логика, която може да взаимодейства с база данни, да извършва сложни операции с данни и да предоставя информация обратно на браузъра.

Тъй като обработката се извършва на сървъра, уеб браузърът на потребителя не трябва да работи толкова усилено, подобрявайки видимата производителност, поне от гледна точка на потребителя.

09. Визуална йерархия

термини за уеб дизайн: Визуална йерархия

Визуалната йерархия означава подреждане на дизайнерските елементи, така че да се подчертаят някои пред други

Това не се ограничава само до уеб дизайн, но се използва все по-често, когато се позовава на дизайна и оформлението на уеб страница, така че е включен в нашия списък с най-добрите термини. Казано по-просто, визуалната йерархия се отнася до подреждането на дизайнерските елементи на страница, така че изглежда, че най-важните елементи имат по-голямо ударение.

Този акцент обикновено се постига чрез използване на размер, цвят, шрифт и специални ефекти като падащи сенки. Визуалната йерархия често е съзнателно решение в резултат на процес на информационна архитектура.

10. Безкрайно / паралакс превъртане

Безкрайното превъртане и паралаксното превъртане са две свързани техники, които стават все по-популярни

Безкрайното превъртане и паралаксното превъртане са две свързани техники, които стават все по-популярни

Безкрайното превъртане и паралаксът са две отделни неща, но често се виждат заедно, така че сме ги събрали заедно тук.

Понастоящем безкрайното превъртане е модерен начин за представяне на даден сайт, така че вместо да зарежда отделни страници за преглед на съдържанието, цялото съдържание на страницата се зарежда в една страница, която се превърта, за да покаже различни области на съдържанието.

Предпоставката е, че докато потребителят превърта страницата надолу към края на съдържанието, ново съдържание се зарежда и добавя в долната част на страницата, създавайки „безкраен“ свитък. Популярните примери включват изглед на времевата линия на Facebook, Pinterest и Tumblr.

Паралаксът е ефектът, който се наблюдава, когато елементите, намиращи се по-близо до вашата гледна точка, изглежда се движат по-бързо, отколкото предметите по-далеч. Това се вижда най-добре от движеща се кола или влак, където оградите и дърветата в близост до превозното средство изглежда бързо се придвижват, докато планините в далечината изглежда се движат по-бавно.

В мрежата същият този ефект се използва за създаване на усещане за дълбочина на дизайна на сайта, като често осигурява движение в отговор на превъртането на потребителя.

Прочетете също:

Думи: Сам Хамптън-Смит