Веб-дизайн существует уже давно, и он не теряет времени зря на разработку сложного языка, наполненного жаргоном. Как только вы сделаете хоть малейший шаг в мир веб-дизайна, вы начнете слышать: «Какую CMS вы хотите использовать?», «Вы хотите, чтобы это было выше или ниже сгиба?», «Вы хотите фиксированный макет? »,« Какой веб-хостинг вы хотите использовать? » и вы задаетесь вопросом, что все это значит. Мы знаем, что попытка выяснить все ключевые определения и термины веб-дизайна может быть довольно сложной, особенно если это все новое.
Веб-дизайн охватывает большой объем работы: от веб-разработчиков, которые пишут код, до дизайнеров пользовательского интерфейса и пользовательского интерфейса, которые работают над интерфейсами, до веб-дизайнеров, которые заботятся о внешнем виде вашего сайта. Веб-дизайном занимается много людей.
Содержание статьи
- 1 Определения веб-дизайна —
- 1.1 Доступность
- 1.2 Ниже сгиба (и выше сгиба)
- 1.3 Упругий (макет)
- 1.4 Пример
- 1.5 Фиксированная ширина (макет)
- 1.6 Шестнадцатеричный
- 1.7 Бесконечная прокрутка
- 1.8 Прокрутка с параллаксом
- 1.9 Резолюция
- 1.10 Адаптивный / удобный для мобильных устройств / оптимизированный для мобильных устройств
- 1.11 Удобство использования
- 1.12 UX (исследования пользователей) / UI (пользовательский интерфейс)
- 2 Анатомия внешнего веб-сайта —
- 3 Анатомия внутреннего веб-сайта —
- 4 Технические условия для Интернета и Интернета —
- 5 Терминология веб-разработки —
- 6 Последнее слово —
Определения веб-дизайна
—
Доступность
Доступность в настоящее время имеет большое значение в веб-дизайне. По сути, это означает, насколько ваш веб-сайт доступен для людей, в том числе для людей с нарушениями слуха или видимости. Об этом важно помнить до и во время создания веб-сайта. Если вы не знаете, с чего начать, ознакомьтесь с этими шестью шагами, чтобы сделать ваш веб-дизайн доступным.
Ниже сгиба (и выше сгиба)
Внизу и вверху расположены два термина, берущие свое начало в газетах. «Сгиб» — это место сгиба газеты. Вверху и внизу описывается, отображается ли информация в верхней или нижней половине сгиба. Для веб-страниц «сгиб» обычно определяется как точка, с которой вы должны начать прокрутку, но принцип тот же — информация, которая находится в верхней части страницы (ATF), более доступна и видна, чем информация в нижней части страницы (BTF). .
Упругий (макет)
Эластичный макет — это подход к проектированию веб-страниц, который описывает отношения между элементами и их положением на странице в процентах, а не специально разработанные расстояния и размеры. Это означает, что веб-страницы становятся более адаптируемыми — как для предпочтений, установленных вашими посетителями с точки зрения размера шрифта и расстояния между ними, так и в том, что касается оптимизации страницы для просмотра на смартфоне или планшете.
В настоящее время эластичные макеты являются ключевой частью подходов к адаптивному дизайну, но до того, как появилась идея адаптивного дизайна, эластичные макеты обеспечивали простой способ сделать веб-сайты адаптируемыми.
Пример
Ex — это единица измерения, в которой в качестве стандартной меры используется строчная буква «x» в шрифте.
Фиксированная ширина (макет)
Макет с фиксированной шириной — это метод разработки веб-страниц, при котором дизайнер указывает, насколько велика веб-страница и где именно на ней будут отображаться элементы. Это дает дизайнерам гораздо больший контроль над дизайном веб-страницы, чем эластичный макет, но делает страницы менее адаптивными к разным размерам экрана.
Шестнадцатеричный
Шестнадцатеричные числа, также известные как «шестнадцатеричные» числа, представляют собой систему счисления с основанием 16, что означает, что они используют 16 символов для определения цвета. В шестнадцатеричных числах используются числа от 0 до 9 и буквы от A до F. Каждый цвет определяется тремя парами шестнадцатеричных чисел. Первая пара цифр или букв относится к красному оттенку, вторая пара — к зеленому оттенку, а третья пара — к синему оттенку.
Бесконечная прокрутка
Бесконечная прокрутка — это когда новое содержимое загружается по мере продолжения прокрутки. Это создает «бесконечный», нескончаемый свиток. Некоторые популярные примеры этого — хроники Facebook, Pinterest или Twitter.
Прокрутка с параллаксом
Этот метод прокрутки создает ощущение глубины в дизайне сайта. Когда пользователь прокручивает, элементы на веб-сайте будут находиться на разных расстояниях и перемещаться с разной скоростью по мере того, как пользователь прокручивает. Это создает иллюзию глубины и расстояний на плоском веб-сайте.
Резолюция
Разрешение — это количество пикселей, отображаемых на экране. Это стандартный метод, используемый в веб-дизайне для определения размера изображений. Качество изображения обычно описывается в пикселях на дюйм, при этом большее количество пикселей приводит к более качественному изображению.
Адаптивный / удобный для мобильных устройств / оптимизированный для мобильных устройств
По состоянию на 2020 год более половины веб-трафика приходится на смартфоны. Это означает, что для веб-сайта становится все более важным выглядеть лучше на мобильных устройствах, а также на компьютерах. Сделать веб-сайты адаптивными / мобильными / оптимизированными для мобильных устройств — значит спроектировать и разработать веб-сайт, который будет адаптироваться к устройству или экрану, на котором они просматриваются.
Удобство использования
Юзабилити — это концепция веб-дизайна, которая описывает, насколько удобен ваш сайт для посетителей, для которых он был разработан. В идеале посетитель сможет легко использовать ваш сайт, когда он впервые столкнется с ним, с минимальными препятствиями, разочарованиями и необходимостью просить о помощи. Понимание принципов юзабилити — ключевой шаг в создании отличного веб-сайта.
UX (исследования пользователей) / UI (пользовательский интерфейс)
UX и UI-дизайн — это работа, которая улучшает опыт пользователя. Важно знать различия UX и UI, чтобы понимать, как они работают вместе.
UX, исследование пользователей, включает в себя все аспекты взаимодействия пользователя с веб-сайтом от начала до конца. Цель состоит в том, чтобы улучшить качество взаимодействия между пользователем и веб-сайтом.
UI, пользовательский интерфейс, ориентирован на визуальные и интерактивные элементы веб-сайта, такие как кнопки, значки, типографика. Цель состоит в том, чтобы улучшить внешний вид и функциональность веб-сайта.
Анатомия внешнего веб-сайта
—
Breadcrumb
Когда веб-страницы показывают пользователям, как они перемещались по веб-странице и как вернуться на главную страницу, это часто делается с помощью цепочки навигации. Обычно это отображается в виде ряда вложенных категорий, например «Главная»> «Категория»> «Год»> «Месяц»> «Сообщение».
Favicon
Значок — это крошечный значок, который отображается на панели вкладок вашего браузера. Обычно они имеют размер 16 × 16 пикселей (что на самом деле очень мало) и сохраняются как изображения .ico, .gif или.png. Вы можете использовать практически любое изображение в качестве значка, если оно правильного размера и сохранено в правильном формате.
Координатор
Фокус на веб-странице — это часть страницы, к которой обращен ваш взор. Дизайнеры потратят много времени на то, чтобы создать фокус, который действительно привлекает внимание зрителя, а затем разместят самое важное на странице в фокусе. Это гарантирует, что его увидит как можно больше людей.
Передняя часть
Это все элементы, такие как изображения, текст, страницы, которые люди увидят при первом посещении вашего сайта. По сути, это то, с чем люди будут взаимодействовать и взаимодействовать на веб-сайте.
Значок гамбургера
Значок гамбургера относится к значку меню, который обычно встречается в более поздних программах. Он имеет три горизонтальные полосы (отсюда «гамбургер») и скрывает традиционное меню навигации за одним значком.
Целевая страница
Это самая первая страница, которую увидят посетители вашего сайта. На многих веб-сайтах специальная целевая страница используется для того, чтобы узнать что-то от посетителя (например, поделиться своим адресом электронной почты или страницей, специализированной для продукта). Целевая страница — одна из самых важных страниц вашего веб-сайта, и вам следует потратить много времени на ее оптимизацию.
Навигация — это система, которая используется для перемещения между элементами вашей веб-страницы и является одним из наиболее важных элементов любой веб-страницы. Вот почему так важно знать основные принципы навигации по сайту. Самым ярким примером навигации являются меню, которые появляются на большинстве веб-страниц. Но также обратите пристальное внимание на то, как организованы страницы и на связи между ними. Они также могут значительно упростить навигацию по веб-странице для посетителей.
Анатомия внутреннего веб-сайта
—
Back end
Это часть вашей системы, которая эффективно управляет вашим сайтом, но скрыта от посетителей. Доступно множество различных серверных частей, но все они обычно содержат одни и те же вещи — приложения, информационную структуру и вашу CMS.
CMS
Система управления контентом — это внутренний инструмент для управления содержанием вашего сайта, добавления пользователей, управления комментариями и, возможно, многого другого. Если вы когда-либо использовали WordPress для создания веб-сайта, вы использовали CMS. CMS значительно упрощает проектирование и создание веб-страниц, поскольку скрывает большую часть необработанного кода, на котором работает веб-сайт.
Электронная торговля
Электронная коммерция означает «электронная коммерция». точно так же, как «электронная почта» означает «электронная почта». Обычно вы добавляете на свой веб-сайт интернет-магазин, который будет обрабатывать описания продуктов, покупки и продажи, а также данные о клиентах.
HTTP / HTTPS
Это система, которая обеспечивает обмен данными между браузерами, серверами и веб-приложениями. Он определяет, как данные должны быть упакованы и отправлены.
HTTPS — это расширение HTTP, которое может устанавливать соединения через SSL (Secure Socket Layer). Это гораздо более безопасный способ обмена данными в Интернете. Многие современные веб-браузеры предупредят вас, если веб-сайт использует стандартный HTTP, а не HTTPS.
Как владелец веб-сайта, вы можете приобретать сертификаты SSL, необходимые для использования HTTPS, у различных поставщиков. После добавления это сделает ваш сайт более безопасным и укрепит доверие ваших клиентов.
Подключаемый модуль
Небольшая программа, которая устанавливается поверх вашего основного сайта для обеспечения дополнительных функций безопасности. Плагины доступны для большинства популярных платформ CMS и могут использоваться для множества различных функций, от автоматизации сообщений в блогах до управления потенциальными клиентами.
Шаблон
Шаблоны используются в веб-дизайне почти так же, как они используются для документов и изображений — для обеспечения единообразия дизайна на многих разных страницах. Большинство платформ CMS предоставляют вам набор шаблонов для вашего веб-сайта, которые помогут обеспечить единообразие ваших страниц и дизайна на них.
Технические условия для Интернета и Интернета
—
] Якорный текст
Якорный текст — это фраза или несколько слов, содержащие гиперссылку. Как этот: Объяснение якорного текста. Использование правильного якорного текста может существенно повлиять на рейтинг вашей страницы в поисковых системах.
Обратная ссылка
Это ссылки на ваш сайт с других сайтов. Когда другой сайт ссылается на ваш, например, чтобы направить своих читателей на ресурс, вы получили обратную ссылку. Обратные ссылки очень важны, когда речь идет о повышении вашего рейтинга в поиске, потому что несколько обратных ссылок с надежных сайтов улучшат видимость вашего сайта.
Пропускная способность
Пропускная способность — это термин, используемый во многих различных контекстах, но по сути он означает объем данных, отправленных или полученных за определенный период. Его можно использовать, например, для описания скорости вашего интернета, где она обычно указывается в килобитах в секунду (кбит / с). Однако иногда он используется для описания того, сколько данных вы можете использовать в месяц как часть вашего пакета веб-хостинга.
Кэш
Кэш — это набор данных, который сохраняется в веб-браузере. Это означает, что в следующий раз, когда пользователь зайдет на сайт, страница будет загружаться быстрее, поскольку она загружается из локальной памяти.
DNS
DNS означает «Служба доменных имен». Это система, с помощью которой ваш веб-браузер находит веб-страницы. Когда вы набираете 99designs.com, ваш браузер просматривает «таблицу DNS», которая преобразует этот удобный для человека адрес в удобный для компьютера адрес (т. Е. Состоящий из чисел). Система DNS отслеживает, где находятся все веб-страницы в мире, чтобы ваш браузер мог их найти.
Домен
Это название вашего веб-сайта. Вы можете приобрести домены у многих компаний. Они могут содержать не более 63 символов. Например, 99designs.com — это наше доменное имя.
FTP
FTP означает «протокол передачи файлов» и представляет собой систему для передачи файлов и данных из локального хранилища (скажем, на вашем компьютере) на ваш веб-сервер. Чтобы использовать FTP, вам необходимо загрузить небольшую программу, называемую FTP-клиентом.
Постоянная ссылка
Постоянная ссылка, которая позволяет вам указать адрес, который всегда будет указывать на конкретное сообщение или страницу в блоге, независимо от того, как вы меняете структуру своего сайта вокруг него. Это очень полезно, если вы используете сообщения в блогах для увеличения посещаемости своего сайта, потому что вам не нужно вручную изменять десятки (или сотни) ссылок, если вы решите изменить дизайн своего сайта или изменить свое доменное имя.
URL
Адрес, указывающий, где можно найти определенную страницу или другой ресурс.
Веб-хостинг
Веб-хостинг — это компания, которая управляет серверами, на которых хранится ваш веб-сайт. Как мы объясняем в нашей статье о веб-хостинге, веб-хосты могут сильно различаться по уровню услуг, которые они предлагают. Хороший веб-хостинг сможет заверить вас, что ваш сайт будет доступен 99,9% времени, а также предоставит вам инструменты для обеспечения его безопасности и эффективности.
Веб-сервер
Веб-сервер — это компьютер, на котором фактически хранится ваша веб-страница. Скорее всего, он находится на сервере, принадлежащем вашему веб-хосту, хотя также можно запускать свои собственные серверы.
Терминология веб-разработки
—
CSS
CSS означает каскадные таблицы стилей, и наряду с HTML эти таблицы являются наиболее фундаментальной частью любой веб-страницы. Десять лет назад форматирование веб-страницы, например, размер заголовков или наличие границ у изображений, определялось в самом HTML-коде. Это означало, что изменение форматирования было трудоемким процессом, заключающимся в просмотре каждого элемента страницы и изменении кода.
С CSS все намного проще. Стиль страницы содержится в одном (или нескольких) файлах CSS, которые определяют, как выглядят заголовки, как отображаются изображения и многие другие элементы. Они сообщают браузеру, как отображать веб-сайт. Таким образом, формат целых веб-сайтов может быть изменен путем переключения всего лишь одного фрагмента кода.
DHTML
DHTML означает динамический язык разметки гипертекста. Это термин для языка, который объединяет несколько языков веб-дизайна — HTML, JavaScript и CSS — в один суперязык для веб-разработки. Обычно это то, что современные веб-разработчики используют для создания веб-сайта для вас.
Doctype
В HTML тип документа — это описание того, какой тип HTML и какая версия используется на веб-странице. Он используется браузерами для проверки целостности страницы и может вызывать ошибки безопасности, если он неправильный.
EM
Em используется для описания размера шрифта по отношению к «родительскому» шрифту, используемому на странице. 1Em означает, что шрифт (или иногда другие элементы) того же размера, что и их родительский элемент, 2em означает, что они в два раза больше и т. Д.
Встроенный стиль
Хотя CSS (см. Выше) можно использовать для описания формата целых страниц сразу, иногда вам нужно изменить стиль только на одной странице. Это когда используется встроенный стиль. Встроенный стиль — это фрагмент кода CSS, записанный в заголовок веб-страницы, который влияет только на элементы на этой странице, а не на весь ваш веб-сайт.
Семейство шрифтов / стиль / вес
Веб-дизайнеры и разработчики часто не работают с определенными шрифтами, потому что разные браузеры не всегда используют одни и те же шрифты. Вот почему в документе CSS вы увидите, что используемый шрифт определяется как семейство шрифтов — группа шрифтов, которые можно использовать, а не один в отдельности. Наряду с этим определением, документ CSS также будет определять стиль шрифта (курсив, подчеркнутый и т. Д.) И вес (полужирный, светлый и т. Д.).
HTML
Язык гипертекстовой разметки — это основа Интернета. Все веб-страницы написаны, по крайней мере, в некоторой степени, на HTML, который был разработан таким образом, чтобы его было максимально легко писать. На самом деле, может быть очень полезно попробовать Учебное пособие по HTML-коду, чтобы узнать, легко ли его писать — вы будете удивлены тем, чего вы можете достичь за несколько часов!
Метаданные
Метаданные — это данные, содержащиеся в заголовке веб-страниц. Эти данные доступны вашему браузеру, но не отображаются как часть просматриваемой веб-страницы — вам нужно будет просмотреть исходный код, чтобы получить к ним доступ.
Открытый исходный код
Программное обеспечение с открытым исходным кодом поддерживается пользователями, его можно свободно использовать и изменять. Это контрастирует с проприетарным программным обеспечением, которое принадлежит и поддерживается определенной компанией. Большинство веб-разработчиков будут использовать программное обеспечение с открытым исходным кодом, по крайней мере, иногда, потому что оно не только дешевле, но и может быть более безопасным. В настоящее время большинство веб-разработчиков минимизируют нарушения безопасности, используя контейнеры, написанные на языках с открытым исходным кодом.
Постановка
Создание веб-сайта — это процесс создания почти окончательной копии ее с последующим ее тестированием перед развертыванием действующей версии сайта. Большинство веб-разработчиков «инсценируют» веб-сайт перед его выпуском, чтобы убедиться, что все работает правильно. И часто серьезные изменения на веб-сайте происходят на промежуточном, а не на действующем сайте.
Действительно
В веб-дизайне допустимые веб-страницы — это те, которые не содержат ошибок. На практике это означает веб-страницы, соответствующие стандартам, изложенным в спецификациях HTML, опубликованных W3C, сообществом, которое устанавливает стандарты для веб-разработки.
XML
XML расшифровывается как Extensible Markup Language. XML является фундаментальной частью веб-дизайна, потому что он действует как «метаязык», переводящий элементы одного языка на другой. Это означает, что веб-страницы можно создавать с использованием множества разных языков, каждый из которых использует XML.
Последнее слово
—
Конечно, не обязательно знать все эти определения и термины веб-дизайна, чтобы приступить к разработке веб-сайта — самостоятельно или с помощью. В конечном итоге веб-дизайн — это процесс обучения, а лучший дизайн — это повторяющиеся произведения искусства, которые постоянно улучшаются по мере того, как вы изучаете новое.
Тем не менее, может быть очень полезно иметь руководство по иногда сложному миру веб-дизайна, особенно когда вы только начинаете. Наши профессиональные веб-дизайнеры помогут вам начать работу в захватывающем мире веб-дизайна.
Загрузка...
