Товаров: 0 (0р.)

Основы веб дизайна: Основы веб дизайна для начинающих — 7 правил

Содержание

Основы веб дизайна для начинающих — 7 правил

В данной статье я расскажу вам про основы веб дизайна для начинающих, благодаря которым вы сможете избежать множества ошибок новичков и «взять» правильный вектор развития для своего профессионального роста. Вместо того, чтобы самостоятельно набивать себе кучу шишек я предлагаю вам ознакомиться с «выжимкой» самой основной теоретической базы, которую просто обязан знать любой уважающий себя дизайнер. И все это абсолютно бесплатно.

Содержание статьи:

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

ЗАГЛЯНУТЬ НА КАНАЛ

Статья представляет из себя некую мини-книгу для новичков, прочитав которую вы получите ценные знания и сможете прокачать свой уровень в дизайне. Итак, начнем.

Основы веб дизайна для начинающих — 7 главных правил

В любой сфере деятельности есть свои правила и это круто, потому что именно они (правила) помогают людям выполнять свою работу более качественно и профессионально. Дизайн не является исключением и здесь тоже есть свои правила, которые помогают разрабатывать дизайн «по-взрослому». По крайней мере, соблюдая их, у вас будет намного меньше шансов «запороть» дизайн.

Начнем мы с правила, которое нарушают 99% начинающих дизайнеров.

1 — Правило внутреннего и внешнего

Суть его в том, что внутренние отступы у блоков должны быть МЕНЬШЕ внешних отступов.

Согласитесь, правило достаточно элементарное, но парадокс в том, что именно его чаще всего нарушают новички. Обращайте на это внимание.

Для закрепления давайте рассмотрим один практический пример. Предположим, что у нас есть блок, в котором располагается 4 карточки товара с каким-то содержимым (с каким — не важно). Прежде чем смотреть картинку, попробуйте сами расположить карточки внутри блока так, чтобы соблюсти наше правило.

У вас должно получится следующее:

Наши 4 карточки должны иметь отступ между собой МЕНЬШЕ, чем отступ от карточек до края контейнера.

Надеюсь, понятно.

2 — Правило группировки

Элементы, логически связанные между собой, должны находится рядом друг с другом. Выделяют 3 вида группировки:

  • Близость
  • Общая зона
  • Связность

Для лучшего понимания давайте посмотрим примеры правильной и неправильной группировки:

В первом случае абзацы расположены близко друг к другу и из-за этого теряется логическая связь, 2 абзаца выглядят как 1 большой. Во втором случае — абзацы разделены отступом и внутри каждого абзаца заголовок и текст сгруппированы между собой по принципу близости.

В первом случае, логически связанные элементы (заголовки и картинки с текстом) разделены друг с другом прямой линией. Из-за этого нарушилась их логическая связь и они выглядят как 4 самостоятельных блока. Во втором случае — логически связанные элементы сгруппированы общей зоной и создают 2 больших блока.

Правило внутреннего/внешнего и правило группировки частенько работают в связке, поэтому предлагаю рассмотреть конкретный пример для закрепления.

Предположим, что у нас есть компонент «Карточка», в которой находится иконка, заголовок, текст с описанием и кнопка. И допустим наш компонент располагается в блоке со светло-серым бэкграундом. Выглядеть это будет примерно так:

Здесь все 4 элемента являются логически связанными, но наибольшую связь имеют заголовок и текст с описанием, поэтому они должны находиться максимально близко друг к другу, по сравнению с другими элементами (группировка по близости).

Также, весь компонент в целом еще сгруппирован по общей зоне (белый фон) и по правилу внутреннего/внешнего, внутренние отступы в компоненте МЕНЬШЕ внешних отступов.

Таким образом у нас получился логически связанный компонент, который отвечает правилам внутреннего/внешнего и группировки. Вся прелесть в том, что если следовать только лишь этим 2 правилам, то можно на уровень поднять качество своих работ. Ваш дизайн будет более структурирован. А структурированные данные нашему мозгу намного легче воспринимать, нежели, когда в дизайне царит полный хаос и непонятно какой элемент к какому относится.

Конечно, с ростом вашего профессионального уровня, вы можете где-то немного отступать от данных правил. С опытом у вас выработается так называемая «чуйка» и вы будете интуитивно понимать, что и как лучше всего сгруппировать и какие отступы поставить, чтобы было и эстетично, и понятно. Но пока вы новичок, я рекомендую вам строго соблюдать эти 2 правила.

3 — Правило Паретта

При наличии большого количества элементов лучше всего отобрать 20% наиболее важных, а остальные 80% скрыть в «Подробнее». В этом и есть суть данного правила.

Дело в том, что наш мозг не может адекватно воспринимать слишком большой объем информации. Ему (мозгу) гораздо легче и проще воспринимать маленький объем данных. Так мы лучше ориентируемся в информации и лучше ее усваиваем.

Чтобы продемонстрировать правило Паретта «в деле», достаточно взглянуть на такой элемент, как «Фильтр», который часто используется в интернет-магазинах. Возьмем, к примеру интернет-магазин по продаже мобильных телефонов и сделаем для него фильтр по моделям телефонов.

В начале мы проигнорируем правило Паретта и у нас получится вот такой фильтр:

Скажите, удобно будет вам искать из такого огромного списка нужную вам модель? Скорей всего нет, потому что для этого нужно будет напрягать глаза и вчитываться в каждую позицию из списка, чтобы не пропустить нужную.

А теперь мы воспользовались услугами опытного дизайнера интерфейсов, который «обновил» наш фильтр вот таким образом:

Ну как, теперь стало лучше? Определенно да! Теперь у нас в видимом списке представлено примерно 20% всех позиций, а остальные — скрыты. Но их можно по необходимости раскрыть, если нажать на кнопку «Еще». Таким образом мы улучшили юзабилити нашего фильтра и помогли потенциальным клиентам легче осуществлять выбор.

Но у многих может возникнуть вопрос, а как мы должны определить, какие именно позиции войдут в эти самые 20%? Ответ достаточно прост. Эту информацию должен знать непосредственно владелец бизнеса, для которого разрабатывается дизайн.

С правилом Паретта очень тесно граничит другое правило…

4— Правило 7±2 (закон Миллера)

Суть его в том, что в одном наборе элементов должно быть не более 7±2 штук. Это опять же обуславливается тем, что мозгу легче воспринимать маленькое количество данных. В примере выше (с фильтром) я как раз параллельно применил правило 7±2. Если вы посчитаете количество видимых позиций, то их окажется 9, что как раз соответствует данному правилу.

5 — Правило упрощения навигации

Это правило я вывел для себя сам и хотел бы поделиться им с вами. Суть его в том, чтобы максимально упрощать навигацию для пользователей (в разумных пределах конечно). Чем легче навигация, тем проще осуществляется поиск и взаимодействие с нужной информацией. А для этого, чаще всего, нужно избавлять пользователей от лишних действий.

То есть вы, как дизайнер, должны в первую очередь думать о том, как ОБЛЕГЧИТЬ взаимодействие с продуктом, а не как его усложнить.

Банальный пример, сейчас я все чаще замечаю, что на обычных лэндингах стали прятать навигацию в «Меню-бургер» (это иконка с тремя параллельным полосками, для тех, кто не знает). По нажатию на это меню у вас открывается навигация с ссылками.

В таком исполнении дизайн с одной стороны выглядит «чище», потому что на виду нет навигационных ссылок. Их заменяет всего лишь одна иконка. Но, с другой стороны, с точки зрения удобства использования, такой подход усложняет взаимодействие с сайтом. Меня, как посетителя, вынуждают совершать лишнее действие для того, чтобы просто посмотреть меню сайта.

Более того, огромный процент посетителей сайта даже не будут знать, что нужно нажать на эту иконку для того, чтобы открылось меню.

То, что очевидно для вас, совершенно не значит, что это очевидно и для других людей.

Поэтому, чтобы не усложнять навигацию, лучше всего сокращать количество действий для пользователя. Но опять же, все должно быть в разумных пределах. Могут быть и такие ситуации, когда вы будете вынуждены закладывать в дизайн больше действий для пользователя. Но это крайне редкие случаи.

Еще один яркий пример этого правила можно продемонстрировать на фильтрации таблиц с данными. Допустим у нас есть таблица из 3 колонок: модель, цвет и цена. И нам нужно добавить в эту таблицу фильтр по всем трем параметрам.

Можно сделать это вот так:

В таком исполнении все выглядит «красиво». Есть таблица и иконка фильтра (синяя), по нажатию на которую открывается сам фильтр.

А теперь сделаем другой вариант таблицы с фильтром:

Здесь у нас под каждым параметром располагается фильтр данного параметра. Выглядит уже не так «красиво», но зато данный вариант будет в разы удобней для пользователя.

Представьте, что такой таблицей вы будете вынуждены пользоваться каждый день и по многу. Будет ли вам удобно каждый раз раскрывать фильтр и выбирать там необходимые параметры? Или же вам будет удобней «не отходя от кассы» фильтровать данные и сразу видеть результат, как во второй таблице? Я думаю, ответ очевиден.

6 — Правило минимализма в дизайне

Суть его в том, чтобы вы стремились упрощать сущности, а не наоборот усложнять их. Последним кстати часто «грешат» начинающие веб-дизайнеры. Минимализм — это не новый тренд, но как по мне, это уже давно переросло понятия «тренд» и стало неким правилом дизайна. Лично для меня, так точно.

Я люблю минимализм, потому что он позволяет избавиться от лишнего визуального шума в дизайне и акцентировать внимание только на важных вещах. К тому же, чем меньше визуального шума, тем эстетичней выглядит сам дизайн (но это только мое субъективное мнение). Под визуальным шумом я подразумеваю элементы, без которых можно вполне обойтись и которые не несут какого-то логического смысла.

Вообще, про минимализм в дизайне я хочу написать целую статью, чтобы подробнее раскрыть эту тему, но пока давайте обойдемся одним примером. Представьте, что у нас есть интернет-магазин по продаже домашних цветов. И нам нужно сделать карточку товара для продукции.

Начинающий дизайнер сделает примерно вот такое:

Здесь прям виден «дизайн». Есть и тени, и градиенты, и обводки, и «декоративные» элементы в виде ветвей растений. Как же без них, у нас ведь интернет-магазин про растения 😊

Здесь нет ни капли минимализма, зато полно визуального шума. И так делать нельзя. Ваш «пестрый» дизайн будет наоборот отталкивать посетителей, нежели притягивать их внимание. Чтобы исправить эту ситуацию применим правило минимализма. У нас получится вот такой результат:

Мы убрали все лишние элементы в виде обводок, теней и градиентов и наша карточка стала более «чистой» и минималистичной. Теперь в ней нет ничего лишнего и за счет этого, она легче воспринимается (визуально). Внимание обращено только на суть, а не распыляется на разглядывание «дизайна».

7 — Правило «воздуха» в дизайне

Суть данного правила заключается в том, что нужно делать свой дизайн более «воздушным». Под воздухом подразумеваются отступы между блоками. Они должны быть не сильно мелкими, но и не сильно большими. Некая золотая середина.

Если брать в пример обычный лэндинг, то между смысловыми блоками лучше придерживаться отступов в диапазоне от 100px до 200px. Чтобы было понятней, вот вам пример с картинкой:

Данное правило также, как и правило внутреннего/внешнего, очень часто нарушается новичками (и я был не исключением). Почему-то интуитивно все начинают лепить блоки близко друг к другу. Тем самым дизайн превращается в одно сплошное полотно информации, которое трудно считывать.

А мы с вами уже знаем, что мозгу легче воспринимать структурированную информацию и поэтому, для логического разделения на блоки, нужно использовать больше «воздуха».

Более того, «воздушный» дизайн придает сайту легкость и эстетику. Находясь на таком сайте даже как-то дышится легче 😊

Я говорю «нужно», в контексте того, что в большинстве случаев подобный подход будет уместным. Бывают случае, когда «воздух» сложно куда-то впихнуть так, чтобы он был там уместен.

Чаще всего, данное правило распространяется на дизайн обычных сайтов и интернет-магазинов. В разработке сложных интерфейсов с ним немного посложнее, потому что там обычно используется много данных, которые нужно понятно и удобно скомпоновать друг с другом. В таких случаях чаще всего руководствуются правилами группировки и внутреннего/внешнего.

Поскольку вы новичок, то скорей всего сложные интерфейсы вы пока не разрабатываете, поэтому правило «воздуха» будет для вас весьма актуальным.

С основными правилами мы закончили и давайте теперь плавно перейдем к принципу иерархии в дизайне.

Принцип иерархии в дизайне

Как и везде, иерархия представляет из себя некую подчиненность низших звеньев к высшим, тем самым создавая структуру по типу «дерево».

В любом дизайне существуют элементы более высокого порядка (самые главные и важные) и менее высокого порядка, которые имеют меньшую значимость и меньший вес.

Иерархия в дизайне помогает упрощать восприятие информация и делать ее более понятной. Нам намного проще воспринимать вещи, которые четко организованы в иерархию, нежели наблюдать какой-то хаос. Это наша данность и это нужно учитывать в том числе и в дизайне.

Чаще всего, иерархия в дизайне ярко выражена в текстовых блоках, где есть заголовки и наборный текст. Если с текстом все более-менее ясно (заголовок — главный элемент, а текст под ним — второстепенный), то с иерархией различных элементов все немного сложнее.

Чтобы правильно составить иерархию, всегда задавайте себе вопрос: «Что в данной ситуации наиболее важно для пользователя?». Далее, то, что более важно ставьте на вершину иерархии, а то, что менее важно — вниз.

Казалось бы, все просто, но на самом деле это не так. Дело в том, что если вы выстроите неправильную логическую иерархию, то тем самым вы можете, наоборот, еще больше запутать пользователя. И в такой ситуации уж лучше, чтобы у вас вообще не было иерархии, чем была, но запутанная.

Чтобы не попасть в такую ситуацию, давайте разберемся с иерархией на наглядном примере. Для начала я нарисовал плохой пример:

Здесь иерархия отсутствует полностью и подобное объявление очень сложно воспринимать. Но все меняется, когда мы выстраиваем структуру и добавляем контрастов (об этом ниже).

Когда появилась иерархия, то все кардинальным образом изменилось и теперь объявление намного проще считывать. Что мы сделали? Во-первых, выделили главные элементы и разместили их вверху.

В нашем случае заголовок и дата являются самыми главными, потому что посетителям важно знать КУДА их зовут и КОГДА.

Далее идет картинка, как иллюстрация того, что будет на мероприятии. Под картинкой расположили краткое описание, чтобы посетитель мог ознакомиться с тем, что будет на мероприятии. И дальше у нас уже идет адрес и телефон.

Иерархия тесно перекликается с контрастом, поэтому давайте перейдем именно к нему.

Принципы контраста в дизайне

Контраст — это мощный инструмент в руках опытного дизайнера, поскольку с его помощью можно управлять вниманием пользователя и акцентировать его на нужных местах (или наоборот заглушать). Контраст может передаваться 4 способами:

  • Цветом
  • Размером
  • Толщиной линий
  • Формой

Чаще всего размер и толщина линий используются для передачи иерархии (то, о чем мы говорили выше), а цвет и форма — для расстановки акцентов. Контраст очень важен в дизайне, поскольку с его помощью вы как бы «разбавляете» дизайн и структурируете информацию, выделяя главное и «заглушая» второстепенное.

Пример хорошего контраста:

Пример плохого контраста:

Контрасты в дизайне должны быть сильными.

Порядок создания дизайн-макета

Очень часто новички берутся за создание дизайна с рисования макета. Это в корне неверно, потому что велик риск разработать дизайн, который не будет решать задачи бизнеса.

Первое, с чего начинается любой дизайн — это аналитика. На этом этапе вы «погружаетесь» в бизнес и изучаете его. Проводите бриф с заказчиком, анализируете конкурентов, выявляете их слабые и сильные стороны, смотрите чем они «цепляют» своих клиентов и какое у них УТП.

Далее, на основе анализа и брифа вы разрабатываете структуру своего дизайна. Другими словами, создаете скелет будущего сайта. То есть расписываете, где и какой блок у вас будет и что примерно в него будет входить.

После этого собираете контент по теме и начинаете «примерять» его на ваш скелет. Создаете первый прототип. В прототипе не должно быть картинок, вместо них рисуете обычные прямоугольники или квадраты. Выглядеть прототип должен примерно так:

После этого вы согласовываете прототип с заказчиком, вносите правки (если есть) и только после этого приступаете к финальному дизайну. В финальном дизайне все уже должно быть в цвете и с картинками. Как видите, большую часть всей работы занимает аналитика и структурирование информации, а не рисование макета. Но именно такой подход и является настоящим Дизайном с большой буквы 😊

Здесь я очень тезисно описал процесс создания дизайна, поскольку в зависимости от проекта может быть намного больше этапов. Но для общего понимания вам хватит и такой сжатой инструкции.

Заключение

В данной статье я рассказал вам про основы веб дизайна для начинающих, а именно мы разобрали с вами 7 основных правил в дизайне, поговорили об иерархии и контрасте, а также рассмотрели порядок создания дизайна. Надеюсь, моя статья оказалась для вас полезной, и вы подчерпнули для себя что-то новое. В знак благодарности можете поделиться статьей у себя в соцсетях 😊

Если остались вопросы, то пишите их в комментариях.

Автор: Георгий Тимофеев — дизайнер интерфейсов.

Веб дизайн — что это простыми словами

Веб дизайн — это одна из отраслей веб разработки, которая специализируется на создании дизайна сайтов (проектирование структуры и последующая визуализация). В этой статье мы с вами подробно поговорим про веб дизайн: что это, из каких элементом он состоит, что лучше веб дизайн или графический дизайн и как начать свою карьеру в веб дизайне.

Содержание статьи:

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

ЗАГЛЯНУТЬ НА КАНАЛ

Веб дизайн — что это простыми словами

В самом начале я дал вам общее определение веб дизайна, но если углубиться, то…

Веб дизайн — это процесс планирования, компоновки контента и последующая визуализация решений, в результате которого получается готовый макет сайта для последующей разработки и переноса его в Интернет.

Думаю, такое определение немного больше раскрывает всю суть веб дизайна. Под компоновкой подразумевается расположения элементов дизайна (картинки, тексты, формы и прочее) друг относительно друга, а под визуализацией — детальная проработка макета с добавлением цветов. Те специалисты, которые работают в сфере веб дизайна, называются веб дизайнерами.

Веб дизайнер — это специалист, который проектирует сайты и делает их эстетически привлекательными для пользователей.

Современный web дизайн уже давно вышел за рамки обычной эстетики (визуальной красоты). В зону ответственности этой сферы входит удобство использования сайтов и их функциональность. Это не прихоть представителей дизайна, а тенденции текущего рынка. Пользователи ориентированы на удобные интерфейсы, поэтому веб дизайнерам нужно подстраиваться под эти запросы и создавать эстетически привлекательные сайты с понятной и продуманной структурой.

Помимо веб дизайна есть еще одно направление под названием UX UI дизайн. Что это такое и в чем между ними разница я описал в соответствующей статье, рекомендую прочитать.

По теме:
UX UI дизайн — что это и в чем отличается от Веб дизайна

В двух словах скажу, что web design ориентирован исключительно на сайты и веб-приложения, а UX UI дизайн на все интерфейсы в целом (сайты, веб и мобильные приложения, сервисы и т. д.). Соответственно, в UX UI дизайна есть такая профессия, как дизайнер интерфейсов.

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

Визуальные элементы веб дизайна

Веб дизайн складывается из множества элементов, которые в совокупности создают макет сайта. Результатами работы веб дизайнеров (и веб разработчиков) мы ежедневно пользуемся в интернете, заходя на любой сайт.

Тексты

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

Достаточно сделать плохо читаемый текст (мало контрастный), то сразу же большинство пользователей будут уходить с ресурса к конкурентам. Умение работать с типографикой — это важный навык любого веб дизайнера.

Конечно, веб дизайнер не должен быть копирайтерам и сам писать тексты, но вот оформлять их и делать понятную верстку — да.

Цвета

Каждый сайт имеет свою палитру цветов. Более того, в каждой отдельной нише есть свои цветовые схемы, которые ассоциируются именно с этой сферой. Например, медицина ассоциируется с бирюзовым или синим цветом, а экология — с зеленым. Это называется мета-сообщением.

Если веб дизайнер неправильно передаст мета-сообщения тематики с помощью цвета, то у пользователя может возникнуть диссонанс. Согласитесь, будет странным видеть сайт об экологии в красных или желтых тонах.

Именно поэтому, умение работать с цветом и совмещать между собой оттенки также является ключевым навыком любого веб дизайнера.

Композиция

Любой сайт имеет структуру, согласно которой разрабатывается финальный дизайн проекта. Каждый элемент дизайна расположен в макете в определенном месте и в совокупности все элементы создают композицию сайта. Расположение элементов подчиняется так называемой сетке — это невидимые направляющие относительно которых и располагается весь контент.

Работа с сеткой и композицией является еще одним ключевым навыков веб дизайнера. Если в работе не придерживаться композиции, то конечный дизайн получится хаотичным и без прослеживаемой логики расположения объектов.

Шейпы

Шейпы — это примитивные геометрические фигуры: квадрат, круг, прямоугольник и так далее. Любой дизайн сайта состоит из подобных примитивов. Любая кнопка — это шейп, любое поле ввода — это шейп, любая картинка — это шейп и так далее.

Отступы

Отступы добавляют любому дизайну ощущение воздушности. Благодаря отступам можно формировать иерархию и группировать между собой логически связанные объекты. Одним словом, отступы — это мощный инструмент веб дизайнера, который помогает создавать эстетически привлекательные дизайны.

Картинки и иконки

Картинки служат для передачи эмоций в веб дизайне или для подробного объяснения действий. Иконки используются для простой навигации, чтобы пользователь мог легко считывать информацию, увидев определенную пиктограмму.

И тот и другой элемент является неотъемлемой частью любого дизайна и помогает пользователям «цепляться» взглядом за определенные куски информации.

Помимо визуальных элементов в веб дизайне присутствуют и функциональные элементы.

Функциональные элементы веб дизайна

Первым и самым главным функциональным элементом является навигация.

Навигация

Навигация помогает пользователям находить нужную информацию и быстро перемещаться по сайту. Грамотная навигация — это залог удобного в использовании сайта, плохая навигация — ненависть со стороны пользователей.

Именно поэтому каждый веб дизайнер, должен первым делом продумывать простую и понятную навигацию по сайту. Существует правило 3 кликов, которое говорит о том, что пользователь должен доходить до нужной информации в 3 клика. Если кликов будет больше, то такая навигация считается слабой и требует улучшений.

Анимация

Анимация служит для того, чтобы взаимодействие пользователя с интерфейсом было более интересным. Помимо этого, анимация помогает акцентировать внимание пользователей на определенной части дизайна или информации.

Здесь главное правило — анимация должна быть минимальной, чтобы не перегружать интерфейс и не забирать на себя излишнее внимание пользователей.

Это все что касается элементов веб дизайна. Помимо веб дизайна существует еще такое направление как графический дизайн. Давайте разберемся в чем между ними разница.

Что лучше веб дизайн или графический дизайн

Графический дизайн — это одна из разновидностей дизайна, которая ориентирована в большей степени на работу с типографикой и векторной графикой.

Графические дизайнеры, в основном, занимаются разработкой логотипов, иллюстраций и фирменного стиля для компаний. Чтобы ответить на вопрос что лучше, веб дизайн или графический дизайн, нужно в первую очередь задать себе 2 вопроса.

Во-первых, чем вам больше нравится заниматься: сайтами (веб дизайн) или логотипами и иллюстрациями (графический дизайн)? Во-вторых, важна ли для вас творческая составляющая?

Дело в том, что современный веб дизайн с натяжкой можно назвать творческой профессией. В разработке сайта существуют определенные рамки, которым нужно следовать. В графическом дизайне таких рамок поменьше и поэтому там больше места для творчества.

Если говорить, какое направление популярней, то, разумеется, веб дизайн, просто потому что на веб дизайн больше спрос. Но я бы не советовал определяться со сферой только по ее популярности. Намного важней ваш интерес.

В той и другой области можно стать первоклассным специалистом и получать хорошее вознаграждение за свой труд. Это вопрос времени, желания и стремления. Есть много графических дизайнеров, которые зарабатывают больше, чем веб дизайнеры.

Если вам нравится заниматься и сайтами, и логотипами, то никто не запрещает вам совмещать обе профессии в одной. Вы можете легко создавать дизайны сайтов и параллельно разрабатывать для них же логотипы, иллюстрации и прочие элементы графического дизайна.

Кому подходит веб дизайн

Ошибочное мнение, что сфера веб дизайна ориентирована исключительно на творческих людей. Мол если вы технарь, то в веб дизайн вам лучше не соваться. На самом деле, как я уже сказал выше, web design уже давно ушел от творчества в сторону функциональности.

Поэтому вам не обязательно быть творческой личностью. Достаточно иметь желание создавать крутые проекты, которыми будут пользоваться другие люди. Если вам нравится ощущение того, что в какой-то степени вы будете делать виртуальный мир чуточку удобней и привлекательней (путем создания дизайна), тогда это профессия вам подойдет.

Еще одним плюсом будет перфекционизм в разумных пределах. Внимание к мелочам — это важный аспект любого профессионального веб дизайнера, потому что именно из мельчайших деталей складывается общая картина.

Помимо этого, аналитический склад ума также добавит вам несколько баллов в копилку. Как я уже говорил, создание дизайна базируется в первую очередь на проектировании и определенных исследованиях.

Нужно ли высшее профильное образование? Нет. В этой сфере вам достаточно пройти курсы, и вы уже сможете претендовать на вакансии. Более того, профильных высших заведений с этим направлением очень мало, и они есть не в каждом городе.

По большому счету, веб дизайном может заняться абсолютно любой человек, было бы желание. Большое преимущество этой сферы заключается в том, что можно работать удаленно из любой точки планеты. Это открывает большие возможности в плане заработка и профессионального роста.

Как начать карьеру в веб дизайне

Для старта карьеры в веб дизайне у вас есть 2 пути:

  • Самостоятельное обучение
  • Прохождение специализированных курсов

И там и там есть свои плюсы и минусы. При самостоятельном обучении вам нужно запастись терпением, упорством и целеустремленностью, иначе будет очень сложно. Про то, как самостоятельно стать веб дизайнером я написал подробную статью.

По теме:
Как стать веб дизайнером с нуля самостоятельно — 5 шагов

Прохождение курсов значительно сэкономит вам время и даст возможность общаться с наставником и получать обратную связь по своим работам. К тому же, это отличный вариант для сильно ленивых людей, которым нужно постоянно давать пендаля. Но минус в том, что за это придется заплатить. В случае с самостоятельным обучением вы просто заплатите своим временем. Здесь уже каждый сам решает, что для него является более ценным ресурсом.

Где можно обучиться веб дизайну с нуля

Со своей стороны я могу порекомендовать вам вот этот курс, который затрагивает абсолютно все аспекты работы веб дизайнера.

Выбирая курсы, важно обращать внимание на то, кто их преподает и какие результаты демонстрируют ученики. Помимо этого, немало важным фактом является и продолжительность курса. Например, за 1 месяц очень сложно освоить все навыки дизайна и стать хорошим специалистом. А вот за 3-12 месяцев это сделать уже более реально.

Чем дольше продолжительность курса, тем насыщенней программа обучение и больше практических задач.

Заключение

В этой статье мы с вами подробно поговорили про веб дизайн: что это, из каких элементов он состоит, что лучше веб дизайн или графический дизайн и как начать карьеру в веб дизайне. Надеюсь, вы получили все ответы на свои вопросы, а если нет, то задавайте их в комментариях.

Автор: Георгий Тимофеев

Веб-дизайн. Полное руководство

В данном модуле мы будем создавать полноценный дизайн интернет-магазина. Мы хорошо поработаем с UX. Также создадим UI-кит с библиотекой цветов, шрифтов, сеток и компонентов.

Весь дизайн будет сделан по дизайн системе. В дизайне будет несколько страниц. Также мы все сделаем по системе Pixel Perfect. И по итогу сделаем интерактивный прототип.

Урок 1

Создаем фрейм и библиотеку сеток

04:01

В этом уроке мы создадим фрейм для десктоп-версии и создадим библиотеку сеток.

Урок 2

Проектируем прототип

15:39

В этом уроке мы спроектируем прототип будущего дизайна.

Урок 3

Меню

07:55

В этом уроке мы создадим меню.

Урок 4

Лого, поиск, избранное, корзина и категории

13:20

В этом уроке я покажу как уместить много информации в компактный блок.

Урок 5

Выгоды

04:05

В этом уроке мы поработаем с компонентами и сделаем блок с выгодами.

Урок 6

Популярные разделы

04:07

В этом уроке мы сделаем из одного компонента 18 карточек.

Урок 7

Спец. предложение

05:46

В этом уроке мы сделаем блок со спец.

предложением.

Урок 8

Бестселлер, новинки, популярное

09:26

В этом уроке я покажу как собирать большие блоки из компонентов, которые содержат в себе другие компоненты.

Урок 9

Пять карточек товара

08:54

В этом уроке мы проработаем и создадим адаптивный компонент, из которого сделаем 5 внешне отличимых карточки.

Урок 10

Популярная категория

05:18

В этом уроке мы снова на основе компонентов соберем блок с популярной категорией товаров в интернет-магазине.

Урок 11

Последние товары

08:43

В этом уроке мы создадим большую карточку с множеством скрытых элементов, используя компоненты.

Урок 12

Полезные статьи

04:40

В этом уроке мы сделаем шаблон из компонентов для блока со статьями.

Урок 13

Блок инстаграм

02:10

В этом блоке мы создадим шаблон блока для фотографий из инстаграма.

Урок 14

Три карточки

02:39

В этом уроке мы сделаем 3 шаблона карточек на основе компонентов.

Урок 15

Футер

08:11

В этом уроке я покажу как грамотно структурировать и располагать информацию в футере.

Урок 16

Подготавливаем фрейм для новых страниц

02:08

В этом уроке мы создадим компоненты из повторяющихся элементов на других страницах для более удобного дальнейшего редактирования.

Урок 17

Создаем страницу категории

07:52

В этом уроке мы добавим хлебные крошки, заголовок, количество товаров и на основе созданных ранее компонентов добавим блок с товарами.

Урок 18

Делаем попап

05:22

В этом уроке я покажу как сделать попап, который будет выезжать справа.

Урок 19

Страница товара

11:30

В этом уроке мы создадим новую страницу с подробным описанием товара.

Урок 20

Подготавливаем фрейм для страницы с корзиной

̆01:28

В этом уроке мы создадим свой фрейм для страницы с корзиной.

Урок 21

Карточка товара

07:53

В этом уроке мы создадим шаблон карточки товара для корзины.

Урок 22

Доделываем страницу корзины

08:23

В этом уроке мы создадим фиксированный блок со всей информацией о корзине пользователя.

Урок 23

Grid-система выравнивания

09:54

В этом уроке мы используем технологию Pixel Perfect и выровняем все элементы в дизайне.

Урок 24

Component Master Manager

01:29

В этом уроке мы воспользуемся очень полезным плагином, который в пару кликов создает отдельную страницу со всеми мастер компонентами.

Урок 25

Модульная сетка

01:27

В этом уроке мы воспользуемся очень полезным плагином, который в пару кликов создает отдельную страницу со всеми мастер компонентами.

Урок 25

Структурируем папки

04:20

В этом уроке мы структурируем все созданные слои по папкам для более удобной работы с макетом.

Урок 26

Плагин Similayer

02:37

В этом уроке мы воспользуемся плагином Similayer, который позволяет в пару кликов найти все похожие элементы и задать им определенные параметры.

Урок 27

Добавляем иконки по дизайн-системе

19:47

В этом уроке мы добавим все иконки в макет по дизайн системе.

Урок 28

Где взять качественную графику?

03:57

В этом уроке я расскажу, где можно взять качественную графику.

Урок 29

Добавляем графику. 1 вариант

05:04

В этом уроке я покажу вам первый вариант того, как можно добавлять графику.

Урок 30

Плагин Avtocrop

03:26

В этом уроке мы используем плагин Autocrop, который позволяет в один клик удалить лишний фон у png изображений.

Урок 31

Плагин Unsplash

03:03

В этом уроке мы используем плагин от фотостока Unsplash. который позволяет быстро добавлять качественные изображения в дизайн.

Урок 32

Подбираем цвета для сайта + плагин Uigradients

15:26

В этом уроке мы подберем все цвета для сайта и поработаем с плагином, который содержит в себе большую библиотеку градиентов.

Урок 33

Делаем более живой̆ сайт

01:13

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

Урок 34

Дорабатываем блок полезные статьи

03:19

В этом уроке мы доработаем блок с полезными статьями.

Урок 35

Сканер компонентов

02:12

В этом уроке мы используем сканер макета, который позволит найти все косяки и разбитые компоненты.

Урок 36

Делаем интерактивный̆ прототип

12:23

В этом уроке мы, исходя из всех созданных страниц, сделаем интерактивный прототип, который можно будет показать заказчику.

Урок 37

Плагин Delete Hidden Layers

01:13

В этом уроке мы поработаем с плагином, который позволяет в один клик удалять все ненужные слои, не трогая компоненты.

Урок 38

Интерактивные элементы

04:37

В этом уроке мы создадим все интерактивные элементы.

Веб-дизайн и программирование — связь понятий и их значимость для веб-дизайнера

Превращение веб-макета в полноценный функциональный сайт – довольно долгий, кропотливый процесс. Важнейшая роль в нем отведена коду, с помощью которого готовый дизайн переводится в рабочий проект. Но должен ли веб-дизайнер знать, как воплощаются в жизнь его творческие наработки? Это довольно спорный вопрос в IT-индустрии. Одни специалисты считают, что вовсе необязательно, другие – что просто необходимо. Какое из этих утверждений верно и как связаны веб-дизайн и кодинг, попробуем разобраться.

Жизненный цикл разработки веб-интерфейсов: от дизайна до верстки

Каждый, кто работает в сфере дизайна, понимает, что на создании веб-макета разработка сайта не заканчивается. Процесс состоит из множества этапов, на которых разные специалисты отвечают за конкретные задачи и в какой-то степени взаимодействуют между собой. В результате этого взаимодействия делаются такие веб-страницы, какими их видит рядовой пользователь: с определенной структурой, текстом, изображениями и другими графическими объектами. Чтобы более детально представлять общую картину и разобраться в том, что такое кодирование, вкратце пройдемся по этапам от дизайна до верстки.

Создание графического дизайн-макета

Все начинается с того, что дизайнер получает техническое задание, в котором расписаны требования к оформлению будущего сайта. На основании полученного запроса он определяет оптимальный стиль, продумывает цветовую схему и расположение блоков, рисует графические элементы. После завершения макет утверждается заказчиком и передается верстальщику.

Наступает этап frontend-разработки – той части программирования, где используются такие технологии, как HTML, CSS, JavaScript. И это то понятие, которое тесно переплетается с веб-дизайном. На данном этапе пишется код, необходимый для функционирования сайта, дизайн приводится в соответствие к макету.

HTML-кодирование

Первый шаг – написание основного HTML-кода. На базе HTML делается любой сайт. Впоследствии браузер считывает код и переводит его в то, что мы видим на экране.

При написании кода верстальщик выделяет общую логическую структуру, составляет план компонентов и создает страницы с помощью соответствующих обозначений. Все элементы преобразуются в html и выстраиваются в иерархической последовательности, определяющей порядок их загрузки и отображения.

Посредством специального мета-тега в разметке указывается тип кодировки текста. Чтобы понять, что это и зачем нужно, сделаем небольшое отступление. Кодировки – определенный набор символов, благодаря которому текстовая информация преобразовывается в биты данных и передается в сеть интернет. Он представляет собой некую таблицу, устанавливающую соответствия между буквами алфавита, цифрами, специальными знаками и машинными кодами.

Каждому символу в ней присваивается уникальный цифровой код. Для корректного отображения текстовой информации на веб-странице сервер и браузер должны использовать одну и ту же кодировку. С этой целью со стороны сервера устанавливается система, заранее отправляющая сообщение браузеру о кодировке посылаемой страницы. Иначе место текста могут занять непонятные иероглифы.

Основной параметр, отличающий разные виды кодировок – количество битов, передающих одно значение. К примеру, посредством одного бита можно закодировать два символа, двух – четыре, трех – восемь. Каждый добавленный бит удваивает количество доступных для кодирования символов. Существуют 8, 16 и 32-битовые кодировки. На данный момент самой распространенной системой кодирования является UTF-8.

Каскадные таблицы стилей CSS

HTML-код отвечает за основное содержание и семантику, формирует структуру, «скелет» веб-страницы. А вот визуальные компоненты, то есть большинство дизайн-информации, хранятся отдельно от содержания в CSS. Это еще один язык программирования, который используется разработчиками для стилизации элементов HTML, определения внешнего вида страницы.

Используя CSS, специалист создает стиль: описывает фон, шрифт, цвета, отступы. Стили прописываются прямо в разметке посредством тега style или же в отдельном файле, который интегрируется поверх HTML с помощью тега link с атрибутом rel=»stylesheet». Это позволяет избежать многократного описания внешнего вида отдельных элементов, сокращает код и экономит время.

Стоит отметить, что сайты, сделанные без CSS-части, выглядят совершенно голыми.

JavaScript

JavaScript – код, отвечающий за динамику, реализацию интерактивных элементов. Этот язык расширяет функционал сайта, буквально оживляя его. На нем основаны креативные анимированные меню, раскрывающиеся формы поиска, контактные формы с автоподбором слов, счетчики посещений, разнообразные эффекты. Для JavaScript доступны обширные библиотеки функций, API, плагины, позволяющие решать большинство веб-задач. Разработчики пишут или находят нужные скрипты и вставляют их в разметку с помощью тега <script>.

Таким образом, в процессе множества этапов кодирования реализовывается нарисованный дизайнером макет: ресурс становится динамичным, получает окончательную структуру.

Нужно ли веб-дизайнеру знать кодинг?

Теперь перейдем к вопросу о том, стоит ли веб-дизайнеру уметь кодить.

Каким бы качественным и детальным ни был отрисованный макет, он остается графическим изображением. По сути, это снимок сайта, так называемый «мертвый» макет. Многие говорят: пока дизайн не визуализируется в браузере, его не существует.

На деле, даже если в макете не используются динамические элементы, он может сильно отличаться от сверстанной конечной страницы. Зачастую это происходит в силу недопонимания между дизайнером и верстальщиком, абсолютного отсутствия общего представления о кодинге у первого.

Не зная HTML/CSS, web-дизайнер создает макеты практически вслепую, не до конца понимает, как будет выглядеть тот или иной объект и можно ли его реализовать с технической точки зрения. Часто это приводит к созданию проектов, не совсем применимых в действии.

Для получения полноценного сайта с отличной функциональностью графический дизайнер и верстальщик должны работать рука об руку. И хотя это разные специалисты, один из которых мыслит скорее графически, другой – тегами и классами, они должны слаженно взаимодействовать.

Основанная на стандартах кода кроссбраузерная поддержка, оптимизированный, не избыточный код, гибкая разметка, CSS-спрайты – все это не так просто. Желательно изучить хотя бы базовые основы HTML/CSS. Необязательно знать, как писать код самостоятельно, но, как минимум, нужно понимать принципы его работы, учитывать ограничения стандартов HTML. Крайне желательно ориентироваться на прямоугольность деталей, разбираться в механизмах отображения разных элементов в браузере, учитывать особенности перестроения блоков на разных устройствах и другие нюансы.

Эти знания позволят:

  • избежать лишних проблем и доработок;
  • повысить эффективность работы;
  • браться за более сложные, разнообразные задачи;
  • понимать свои возможности и границы развития.

Преимущества владения основами кодирования

Подводя итоги, выделим основные преимущества для web-дизайнера, смыслящего в написании кода:

  1. Большая ценность, как специалиста, соответствие требованиям рынка. Дизайнеры, знакомые с кодированием – редкость. Они относятся к ряду особо ценных кадров, им чаще предлагают хорошую, интересную работу в профессиональных веб-студиях. К тому же, в перечне требований к высокооплачиваемым вакансиям всегда присутствует пункт «знание HTML/CSS». И это отличное конкурентное качество на рынке.
  2. Эффективная коммуникация с разработчиками и заказчиками. Будучи осведомленным в нюансах базового кодирования, web-дизайнер умеет правильно расставлять приоритеты, рационально оценивать задание и возможность его реализации. Он понимает, какие элементы поддаются кодированию, а какие – нет, учитывает все ограничения и тонкости, логично задает стили. Это облегчает процесс взаимодействия с веб-разработчиками, позволяет сделать проект, в точности совпадающий с макетом.
  3. Экономия времени на разработку. Если дизайнер ориентируется в кодинге, стадии дизайна и верстки выполняются довольно быстро, одна за другой. Работа идет эффективнее и заканчивается в более короткие сроки.
  4. Создание логичного дизайна. Понимая логику верстки, специалист рисует дизайн-проект в соответствии с ней. При таком подходе сразу же делается оптимальный выбор стилей, расположения элементов относительно друг друга.
  5. Представление информации в доступной и четкой форме. Правильное кодирование помогает улучшить доступность: сделать простую навигацию, подать информацию в визуально привлекательном, ясном, сжатом виде. Знание кода дает понимание всех аспектов, которые нужно учесть для создания легкодоступного ресурса.
  6. Свобода анимации. Разбираясь в технологиях HTML, CSS, а уж, тем более, JavaScript, дизайнерам проще придумывать анимационные элементы для сайта.
  7. Разработка адаптивного дизайна. Зная устройство адаптивной верстки, web-дизайнер без проблем задает логику расположения элементов для экранов различных разрешений.

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

Заключение

Верстка или кодирование в контексте веб-дизайна – трансформация сайта, изображенного в графическом формате в форму HTML с подключением CSS. Подготовленный дизайн-проект разбирается на составные части, а затем собирается вновь с помощью HTML-кода и каскадных таблиц стилей.

Другими словами, дизайнер создает некое руководство по стилю, которое затем превращается в код, а из нескольких строчек кода делается целый сайт. И, чтобы реально оценивать сложность и выполнимость поставленной задачи, он должен знать, как все устроено. Знать – да, уметь кодить – необязательно. Но это непременно будет огромным преимуществом в работе.

Специалисты студии IDBI предоставляют широкий спектр услуг, в рамках которых выполняются сложные проекты под ключ. Все нюансы и принципы верстки учитываются на этапе создания дизайн-макета, поэтому с реализацией каких-либо элементов и с функциональностью готового сайта не возникает никаких проблем. Обращайтесь, мы занимаемся задачами разного уровня сложности. Оценить профессионализм наших сотрудников можно в разделе «Портфолио».

Основы хорошего дизайна | GeekBrains

Существует немало сайтов, которые смело можно назвать произведениями современного искусства.

https://d2xzmw6cctk25h.cloudfront.net/post/827/og_cover_image/81cf7fba804eb49a92be02d591716c51

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

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

Для начинающих веб-дизайнеров процесс работы над сайтом может оказаться чрезвычайно сложным. Ведь он требует учёта множества разноплановых деталей. На самом деле задача кажется непосильной только на первый взгляд.

Наверняка вы сталкивались с разными рекомендациями по созданию хорошего веб-дизайна. Особенно много советов «из личного опыта» могут дать продвинутые разработчики. И всё же, существует 5 основных принципов, которые реально помогут сделать грамотный сайт. Остальные «примочки», «фишки» и «плюшки» удастся освоить с опытом.

Акценты

Работая над дизайном, прежде всего нужно задаться вопросом, «как донести нужную информацию пользователю, учитывая его текущие потребности?». Для этого в вашем распоряжении есть множество инструментов, начиная от типографики и заканчивая сложными аудиовизуальными эффектами. В совокупности они правильно направляют внимание человека, концентрируя его на самом важном.

Отступы и свободное пространство

Актуальная дизайн-концепция сайта не перегружена визуальными объектами. Сайт, наполненный воздухом, легко воспринимается, свободное пространство позволяет легче изучать информацию. Немалое значение в формировании правильного впечатления о ресурсе играют отступы. При этом важно, чтобы они подчинялись определённой закономерности, были пропорциональны. Это позволяет создать гармоничный визуальный баланс, подключить интуицию, «читая» информацию подсознательно.

«Эффект пустого пространства» или роскошь из ничего

Грамотная навигация

Юзабилити сайта каждый пользователь оценивает уже первые 10 секунд пребывания на ресурсе. Зацепить его сторителлингом или визуальными эффектами – половина дела. Важно, чтобы посетитель остался, быстро сориентировался и нашел нужную информацию. Возможностей грамотно организовать навигацию существует бесконечное множество. Важно использовать простые и понятные приемы, которые могут строиться, только на изображениях или удачной типографике или объединять их. Навигация может быть горизонтальной или вертикальной, слайдерной. Главное, сделать её максимально удобной, интуитивной для пользователя.

Легко читаемый текст

Какой бы качественной ни была визуальная составляющая сайта, пользователь подсознательно будет искать текстовый контент, который поможет сформировать более полное представление о продукте. Важно не забывать о читабельности информации. Ведь это главная составляющая большинства веб-ресурсов. Продумывая текст, стоит учесть размер шрифта, пробелов и межстрочных интервалов, цвет букв, фона и многое другое.

Согласованность

Дизайн сайта должен складываться как пазл в единую концепцию. Помните, что работаете не просто над картинками, фото или текстом, а целостным проектом, который должен получиться гармоничным. Для этого важно учесть всё по максимуму, от размера и цвета заголовков до вида кнопок и формата картинок. Продумывая дизайн, не забывайте тестировать наброски. Начинайте с малого, постепенно обыгрывая идею, осторожно добавляя акценты и оптические якоря.

Красота — в глазах смотрящего. А эффективный веб-дизайн оценивается пользователями, а не владельцами сайта. Существует много факторов, которые влияют на юзабилити сайта. И речь не только о форме (насколько хорошо он выглядит), но и о функциональности (насколько легко его использовать).

Так что же делает веб-дизайн хорошим? Напишите свой ответ в комментариях.

 

Принципы и основы веб-дизайна / WAYUP

Успешность сайта и реализация его целей очень сильно зависят от стилистики, удобства и подачи. Все это относится к основам веб-дизайна и лежит на плечах специалиста. Не важно, каких масштабов и направления ресурс, даже одностраничный сайт должен делаться грамотно, ведь это компонент фирменного стиля предприятия, его визитная карточка, показатель уровня в глазах клиентов и конкурентов.

Основы web-дизайна учитывают очень многие направления, которые необходимо применять в работе. Конечно, эта отрасль гибкая и динамичная, ежедневно меняются тренды и появляются новые решения. Но есть ряд базовых основ коммерческого веб-дизайна, без которых проект может потерпеть неудачу. Рассмотрим каждый из них подробно.

Принцип акцентирования

Все функциональные и графические элементы играют свою роль, но есть среди них более важные и менее важные детали. Нужно правильно выделить основное, заранее продумать иерархию, чтобы внимание посетителя привлекалось нужными элементами в требуемом порядке. Основная цель – сделать так, чтобы человек быстрее нашел именно ту информацию, которую мы хотим ему показать. Это все кажется очевидным и понятным, но именно в данном вопросе новички делают больше всего ошибок, расставляя акценты случайно или выделяя сразу несколько элементов, разных по уровню значимости.

Принцип лаконичности

Когда разрабатывается дизайн веб-сайта, основа его должна иметь ограниченное число деталей, чтобы пользователь не потерялся в обилии элементов и эффектов. Визуальная составляющая очень важна, но нельзя работать над украшением в ущерб практичности. Главная цель – не запутать посетителя, не оказать на него слишком большое давление нагромождением деталей.

Часто это правило нарушается при желании показать все свои навыки и умения, что приводит к перегруженности эффектами. Изобилие различных смысловых, рекламных и графических блоков приводит к утомляемости и дальнейшей потере интереса со стороны пользователя.

Принцип сбалансированности

Основы композиции в веб-дизайне предполагают уравновешенность всех функциональных и визуальных элементов, которые расположены на странице. Они должны равномерно распределяться. Если в одной части нужно сделать целую группу деталей, то необходимо добавить примерно равные по весу элементы в противоположной части для баланса. Это один из самых тонких нюансов в разработке дизайна, так как многое в нем полагается на внутреннее чувство стиля и чутье специалиста. Ведь расстановка не всегда должна быть симметричной, но гармония в ней обязательна.

Принцип контраста

Для привлечения внимания потенциального клиента сайта одним из самых простых инструментов является выделение элементов по этому правилу. Каждая важная деталь должна контрастировать со стоящими рядом. При равномерной картинке можно получить эстетичный внешний вид страницы, но если детали сливаются, то на них никто не обратит внимание.

Принцип упорядочивания

Гармоничная расстановка элементов в рамках продуманных линий и границ позволяет дополнить предыдущее правило контраста – броские детали не будут раздражать, если грамотно их расставить. Тогда страница будет смотреться аккуратно и естественно, никакие мелочи не потеряются.

Принцип повторения

Для получения единого стиля важна унификация образов – очертаний, шрифтов, линий, цветовых решений, кнопок и прочих деталей, используемых при дизайне. Так внешний вид будет более согласованным, понятным и предсказуемым для посетителя, что облегчит работу на странице.

Удобство восприятия

Грамотная компоновка, некоторая стандартизация и традиционность важны для удобства пользователя. Если задача заключается в привлечении аудитории, то не стоит внедрять слишком вычурные решения, которые могут показаться оригинальными, но по факту будут раздражать и запутывать потенциального клиента. Нужно придерживаться правил простоты чтения, элементарной навигации, привычных методов просмотра – того, что называют интуитивно-понятным интерфейсом.

Курсы по основам коммерческого веб-дизайна

Всегда между основными принципами веб-дизайна имеется взаимосвязь – гармоничное сочетание этих элементарных приемов и правил позволит создать качественный продукт. Но это только база, которая не дает гарантий успеха, хотя и помогает максимально к ним приблизиться. Все равно нужно работать над более детальными улучшениями, углублять свои знания и постоянно следить за трендами. В этом помогут специализированные курсы WAYUP, которые рассчитаны не только на новичков, но и на опытных специалистов, желающих повысить свой уровень.

Уникальные курсы основ веб-дизайна для начинающих откроют секреты создания привлекательных сайтов – программа постоянно обновляется в соответствии с современными тенденциями отрасли, а непосредственно уроки основ веб-дизайна проводят практикующие специалисты.

Записывайтесь на обучение прямо сейчас и станьте востребованным профессионалом!

Основы веб-дизайна, 3-е издание

Основы веб-дизайна, третье издание

  • Глава 1. Интернет и основы работы в сети

    Это краткое введение охватывает термины и концепции, относящиеся к Интернету и сети, с которыми веб-разработчики должны быть знакомы. Для многих студентов часть этого будет обзором. Глава 1 представляет собой базу знаний, на которой построен весь учебник.
  • Глава 2. Основы HTML

    По мере внедрения HTML5 примеры и упражнения побуждают студентов создавать образцы страниц и приобретать полезный опыт.Студентам предлагается создавать образцы страниц по мере чтения текста.
  • Глава 3. Основы веб-дизайна

    В этой главе основное внимание уделяется рекомендуемым методам веб-дизайна. Представлены макет страницы, теория цвета, дизайн навигации и лучшие практики для текста, графики и мультимедиа.
  • Глава 4: Основы каскадных таблиц стилей

    Представлен метод использования каскадных таблиц стилей для настройки цвета и текста на веб-страницах.
  • Глава 5: Основы стиля графики и текста

    В этой главе рассказывается о настройке текста и графики на веб-страницах.Темы, включая размер текста, толщину и стиль шрифта, типы изображений, оптимизацию изображений, границы CSS, фоны изображений CSS, новые визуальные эффекты CSS3 и новые элементы HTML5. Студентам предлагается создавать веб-страницы по мере чтения текста.
  • Глава 6. Дополнительные основы CSS

    В этой главе продолжается изучение CSS и представлена ​​блочная модель и методы настройки полей, отступов и границ. Кроме того, также представлены свойства CSS3 для настройки закругленных углов, тени блока, тени текста, непрозрачности и градиентов.В этой главе также практикуется центрирование содержимого страницы с помощью CSS.
  • Глава 7. Основы макета страницы

    Эта глава продолжает изучение CSS и знакомит с методами позиционирования и плавающих элементов веб-страницы, включая макет страницы CSS с двумя столбцами. Также представлены новые семантические элементы HTML5.
  • Глава 8. Подробнее о ссылках, макете и мобильных устройствах

    В этой главе мы возвращаемся к предыдущим темам и вводим более сложные методы, связанные с гиперссылками, настройкой CSS для печати и проектированием страниц для мобильного Интернета.Медиа-запросы CSS вводятся по мере того, как студенты настраивают веб-страницу как для настольных, так и для мобильных устройств.
  • Глава 9: Основные сведения о таблицах

    В этой главе основное внимание уделяется элементам HTML, используемым для создания таблиц. Представлены методы настройки таблицы с помощью CSS.
  • Глава 10. Основы работы с формами

    В этой главе основное внимание уделяется элементам HTML, используемым для создания форм. Представлены методы настройки формы с помощью CSS. Представлены новые элементы управления формой HTML5 и значения атрибутов.
  • Глава 11. Основы мультимедиа и интерактивности

    В этой главе предлагается обзор тем, связанных с добавлением мультимедиа и интерактивности на веб-страницы. Эти темы включают новые видео и аудио HTML5, Flash, галерею изображений CSS, новые свойства преобразования и перехода CSS3, API HTML5, JavaScript и jQuery.
  • Глава 12. Основы веб-публикации

    В этой главе обсуждается, как зарегистрировать доменное имя, выбрать веб-хостинг и опубликовать в Интернете. Также представлены поисковые запросы, оптимизация поисковых систем, тестирование доступности и юзабилити.

Обзор учебника

Обеспечивает основу для навыков и концепций, которые необходимы веб-дизайнерам:

  • Обзор концепций Интернета и Интернета
  • Создание веб-страниц с HTML5
  • Настройка цвета и текста с помощью CSS
  • Настройка макета страницы с помощью CSS
  • Настройка изображений и мультимедиа
  • Изучите новые свойства CSS3
  • Применение передового опыта веб-дизайна
  • Создавайте доступные и удобные веб-страницы
  • Дизайн для поисковой оптимизации
  • Выберите доменное имя
  • Опубликовать в Интернете

Новые функции в 3-м издании

Основываясь на успешных первом и втором изданиях этого учебника, третье издание вводит структурные элементы HTML5 раньше (в главе 2) и уделяет больше внимания использованию цвета на веб-страницах (глава 5).

Также новое для третьего издания:

  • Дополнительные практические упражнения
  • Новые и обновленные тематические исследования
  • Расширенная обработка макета страницы
  • Расширенная обработка мобильного веб-дизайна
  • Расширенные разделы по методам адаптивного веб-дизайна

Инструкторские материалы

Для книги Основы веб-дизайна HTML5 и CSS3 доступны исчерпывающие инструкторские материалы.Преподаватели и преподаватели могут получить доступ к бесплатным загрузкам:

  • образец учебной программы
  • упражнений
  • практические примеры
  • Презентации PowerPoint
  • примерных вопросов теста

Свяжитесь с представителем Pearson Higher Ed Addison-Wesley или посетите Pearson Higher Ed Addison-Wesley Publishing, чтобы получить доступ к оценочной копии и получить дополнительную информацию об учебнике.

Скачать бесплатные студенческие файлы

Получите бесплатную загрузку 3-го издания Student Files!


Глава Обзор Игры

Обзор деятельности с флэш-картой доступен для каждой главы на этом веб-сайте.

Учащиеся могут использовать эти упражнения для ознакомления с концепциями и терминами. Некоторые инструкторы используют их как групповые занятия в классе. Они также могут быть доступны для самостоятельной самооценки учащихся.

Об авторе

Доктор Терри Энн Моррис обладает уникальным опытом, который сочетает в себе практический и академический опыт с многолетней работой в промышленности, а также многолетним преподаванием технических курсов. Отмеченный наградами инструктор, ее практический подход к обучению веб-дизайну позволяет студентам быстро стать продуктивными.Подробнее об авторе

HTML Базовый


В этой главе мы покажем несколько основных примеров HTML.

Не беспокойтесь, если мы будем использовать теги, о которых вы еще не узнали.


Документы HTML

Все документы HTML должны начинаться с объявления типа документа: .

Сам документ HTML начинается с и заканчивается .

Видимая часть HTML-документа находится между и .

Пример


Мой первый заголовок


Мой первый абзац.


Попробуй сам »

Декларация

Объявление представляет тип документа и помогает браузерам правильно отображать веб-страницы.

Он должен появляться только один раз вверху страницы (перед любыми HTML-тегами).

Объявление не чувствительно к регистру.

Объявление для HTML5:


Заголовки HTML

Заголовки

HTML определяются тегами от

до
.

определяет наиболее важный заголовок.
определяет наименее важные заголовок:

Пример

Это заголовок 1


Это заголовок 2


Это заголовок 3

Попробуй сам »

HTML абзацы

абзацы HTML определяются тегом

:


HTML-ссылки

HTML-ссылки определяются тегом :

Назначение ссылки указано в атрибуте href .

Атрибуты используются для предоставления дополнительной информации об элементах HTML.

Вы узнаете больше об атрибутах в следующей главе.


Изображения HTML

изображений HTML определяются тегом .

Исходный файл ( src ), альтернативный текст ( alt ), ширина и высота предоставляются как атрибуты:

Пример

 W3Schools.com

Попробуй сам »

Как просмотреть исходный код HTML?

Вы когда-нибудь видели веб-страницу и задавались вопросом: «Эй! Как они это сделали?»

Просмотреть исходный код HTML:

Щелкните правой кнопкой мыши страницу HTML и выберите «Просмотреть исходный код страницы» (в Chrome) или «Просмотр исходного кода» (в Edge) или аналогичное в других браузерах. Это откроет окно содержащий исходный HTML-код страницы.

Проверить элемент HTML:

Щелкните правой кнопкой мыши элемент (или пустую область) и выберите «Проверить» или «Осмотрите элемент», чтобы увидеть, из каких элементов состоят (вы увидите оба HTML и CSS).Вы также можете редактировать HTML или CSS на лету в Откроется панель «Элементы» или «Стили».



Основы HTML — Изучите веб-разработку

HTML ( H yper t ext M arkup L anguage) — это код, который используется для структурирования веб-страницы и ее содержимого. Например, контент может быть структурирован в рамках набора абзацев, списка отмеченных пунктов или с использованием изображений и таблиц данных. Как следует из названия, эта статья даст вам базовое понимание HTML и его функций.

Так что же такое HTML?

HTML не является языком программирования; это язык разметки , который определяет структуру вашего контента. HTML состоит из серии элементов , которые вы используете, чтобы заключить или обернуть различные части содержимого, чтобы оно выглядело определенным образом или действовало определенным образом. Включающие теги могут создавать гиперссылку слова или изображения на другое место, могут выделять слова курсивом, могут увеличивать или уменьшать шрифт и т. Д. Например, возьмите следующую строку содержимого:

 Моя кошка очень сварливая 

Если мы хотим, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключив его в теги абзацев:

 

Моя кошка очень сварливая

Анатомия элемента HTML

Давайте подробнее рассмотрим этот элемент абзаца.

Основные части нашего элемента следующие:

  1. Открывающий тег: Он состоит из имени элемента (в данном случае p), заключенного в открывающие и закрывающие угловые скобки . Это указывает, где элемент начинается или начинает действовать — в данном случае, где начинается абзац.
  2. Закрывающий тег: Это то же самое, что открывающий тег, за исключением того, что он включает косую черту перед именем элемента.Это указывает, где заканчивается элемент — в данном случае, где заканчивается абзац. Отсутствие закрывающего тега — одна из стандартных ошибок новичков, которая может привести к странным результатам.
  3. Содержимое: Это содержимое элемента, который в данном случае является просто текстом.
  4. Элемент: Открывающий тег, закрывающий тег и содержимое вместе составляют элемент.

Элементы также могут иметь следующие атрибуты:

Атрибуты содержат дополнительную информацию об элементе, который вы не хотите отображать в фактическом содержимом.Здесь class — это атрибут name , а editor-note — значение атрибута . Атрибут class позволяет вам дать элементу неуникальный идентификатор, который можно использовать для его таргетинга (и любых других элементов с тем же значением class ) с информацией о стиле и другими вещами.

Атрибут всегда должен иметь следующий вид:

  1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
  2. Имя атрибута, за которым следует знак равенства.
  3. Значение атрибута заключено в открывающие и закрывающие кавычки.

Примечание : простые значения атрибутов, которые не содержат пробелов ASCII (или любые символы " ' ` = < > ), могут оставаться без кавычек, но рекомендуется заключите все значения атрибутов в кавычки, так как это сделает код более последовательным и понятным.

Элементы раскроя

Вы также можете помещать элементы внутрь других элементов - это называется вложением . Если бы мы хотели заявить, что наша кошка очень сварливая , мы могли бы заключить слово «очень» в элемент , что означает, что слово должно быть сильно подчеркнуто:

 

Моя кошка очень сварливая.

Однако вам необходимо убедиться, что ваши элементы правильно вложены.В приведенном выше примере мы сначала открыли элемент

, затем элемент ; следовательно, мы должны сначала закрыть элемент , а затем элемент

. Следующее неверно:

 

Моя кошка очень сварливая

Элементы должны открываться и закрываться правильно, чтобы они четко находились внутри или снаружи друг друга. Если они накладываются друг на друга, как показано выше, ваш веб-браузер попытается максимально точно угадать то, что вы пытались сказать, что может привести к неожиданным результатам.Так что не делай этого!

Пустые элементы

Некоторые элементы не имеют содержимого и называются пустыми элементами . Возьмите элемент , который у нас уже есть на нашей HTML-странице:

 Мое тестовое изображение 

Он содержит два атрибута, но нет закрывающего тега и внутреннего содержимого. Это потому, что элемент изображения не оборачивает контент, чтобы повлиять на него. Его цель - вставить изображение на HTML-страницу в том месте, где оно появляется.

Анатомия HTML-документа

На этом завершаются основы отдельных элементов HTML, но сами по себе они бесполезны. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML-страницу. Давайте вернемся к коду, который мы поместили в наш пример index.html (который мы впервые встретили в статье Работа с файлами):

 

  
    
     Моя тестовая страница 
  
  
     Мое тестовое изображение 
  
 

Здесь имеем следующее:

  • - doctype. Это обязательная преамбула. В давние времена, когда HTML был молод (примерно в 1991/92 г.), типы документа должны были действовать как ссылки на набор правил, которым должна была следовать страница HTML, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни они мало что делают и в основном просто необходимы, чтобы убедиться, что ваш документ ведет себя правильно.Это все, что вам нужно знать на данный момент.
  • - элемент . Этот элемент охватывает весь контент на всей странице и иногда называется корневым элементом.
  • - элемент . Этот элемент действует как контейнер для всего, что вы хотите включить на HTML-страницу, что не контент, который вы показываете зрителям своей страницы. Это включает такие вещи, как ключевые слова и описание страницы, которые вы хотите отображать в результатах поиска, CSS для стилизации нашего контента, объявления набора символов и многое другое.
  • - этот элемент устанавливает набор символов, который должен использовать ваш документ, на UTF-8, который включает большинство символов из подавляющего большинства письменных языков. По сути, теперь он может обрабатывать любой текстовый контент, который вы можете добавить к нему. Нет причин не устанавливать это, и это может помочь избежать некоторых проблем в дальнейшем.
  • - элемент </code>. Это устанавливает заголовок вашей страницы, который отображается во вкладке браузера, в которую загружена страница.Он также используется для описания страницы, когда вы добавляете ее в закладки / добавляете в избранное.</li><li> <code><body></body> </code> - элемент <code><body> </code>. Он содержит <em> всего </em> контента, который вы хотите показывать веб-пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, воспроизводимые аудиодорожки или что-то еще.</li></ul><h3><span class="ez-toc-section" id="i-55"> Изображения </span></h3><p> Обратимся снова к элементу <code> <img> </code>:</p><pre> <noscript><img class="lazy lazy-hidden" src = "images / firefox-icon.png "alt =" Мое тестовое изображение "></noscript><img class="lazyload lazy lazy-hidden" src = "images / firefox-icon.png "alt =" Мое тестовое изображение "><noscript><img src = "images / firefox-icon.png "alt =" Мое тестовое изображение "></noscript> </pre><p> Как мы уже говорили, он вставляет изображение на нашу страницу в том месте, где оно появляется. Это делается с помощью атрибута <code> src </code> (source), который содержит путь к нашему файлу изображения.</p><p> Мы также включили атрибут <code> alt </code> (альтернативный). В этом атрибуте вы указываете описательный текст для пользователей, которые не могут видеть изображение, возможно, по следующим причинам:</p><ol><li> Слабовидящие. Пользователи со значительными нарушениями зрения часто используют инструменты, называемые программами чтения с экрана, чтобы читать им замещающий текст.</li><li> Произошла ошибка, из-за которой изображение не отображается. Например, попробуйте намеренно изменить путь в атрибуте <code> src </code>, чтобы сделать его неверным. Если вы сохраните и перезагрузите страницу, вы должны увидеть что-то вроде этого вместо изображения:</li></ol><p></p><p> Ключевые слова для замещающего текста - «описательный текст». Написанный вами альтернативный текст должен предоставить читателю достаточно информации, чтобы иметь хорошее представление о том, что передает изображение. В этом примере наш текущий текст «Мое тестовое изображение» совершенно не подходит.Намного лучшей альтернативой нашему логотипу Firefox был бы «Логотип Firefox: пылающая лиса, окружающая Землю».</p><p> Попробуйте придумать лучший замещающий текст для вашего изображения.</p><h3><span class="ez-toc-section" id="i-56"> Разметка текста </span></h3><p> В этом разделе рассматриваются некоторые важные элементы HTML, которые вы будете использовать для разметки текста.</p><h4><span class="ez-toc-section" id="i-57"> Заголовки </span></h4><p> Элементы заголовка позволяют указать, что определенные части вашего контента являются заголовками или подзаголовками. Точно так же, как у книги есть основной заголовок, заголовки глав и подзаголовки, документ HTML тоже может.HTML содержит 6 уровней заголовков, <code><h2><span class="ez-toc-section" id="-_3_4"> </code> - <code><h6> </code>, хотя обычно вы используете максимум от 3 до 4:</p><pre> <h2><span class="ez-toc-section" id="-_3_4"> Мое основное название </span></h2> <h3><span class="ez-toc-section" id="i-58"> Заголовок верхнего уровня </span></h3> <h4><span class="ez-toc-section" id="i-59"> Мой подзаголовок </span></h4> <h5><span class="ez-toc-section" id="i-60"> Мой подзаголовок </span></h5> </pre><p> Теперь попробуйте добавить подходящий заголовок на свою HTML-страницу чуть выше элемента <code> <img> </code>.</p><p> <strong> Примечание </strong>: вы увидите, что ваш заголовок уровня 1 имеет неявный стиль.Не используйте элементы заголовка, чтобы сделать текст больше или полужирным, потому что они используются для доступности и других целей, таких как SEO. Постарайтесь создать на своих страницах осмысленную последовательность заголовков, не пропуская уровни.</p><h4><span class="ez-toc-section" id="i-61"> Пункты </span></h4><p> Как объяснялось выше, <code><p> </code> элементов предназначены для содержания абзацев текста; вы часто будете использовать их при разметке обычного текстового содержимого:</p><pre> <p> Это один абзац </p> </pre><p> Добавьте образец текста (он должен быть из <em> Как должен выглядеть ваш веб-сайт? </em>) в один или несколько абзацев, помещенных непосредственно под элементом <code> <img> </code>.</p><h4><span class="ez-toc-section" id="i-62"> Списки </span></h4><p> Большая часть веб-контента - это списки, и в HTML есть для них специальные элементы. Списки разметки всегда состоят как минимум из двух элементов. Наиболее распространенные типы списков - это упорядоченные и неупорядоченные списки:</p><ol><li> <strong> Неупорядоченные списки </strong> предназначены для списков, в которых порядок элементов не имеет значения, например списка покупок. Они заключены в элемент <code><ul> </code>.</li><li> <strong> Упорядоченные списки </strong> предназначены для списков, в которых порядок элементов имеет значение, например рецепт.Они заключены в элемент <code><ol> </code>.</li></ol><p> Каждый элемент внутри списков помещается в элемент <code><li> </code> (элемент списка).</p><p> Например, если мы хотим превратить часть следующего фрагмента абзаца в список</p><pre> <p> В Mozilla мы - глобальное сообщество технологов, мыслителей и строителей, работающих вместе ... </p> </pre><p> Мы можем изменить разметку на эту</p><pre> <p> Mozilla - это глобальное сообщество </p> <ul> <li> технологи </li> <li> мыслители </li> <li> строители </li> </ul> <p> работаем вместе... </p> </pre><p> Попробуйте добавить упорядоченный или неупорядоченный список на страницу с примером.</p><h3><span class="ez-toc-section" id="i-63"> Ссылки </span></h3><p> Ссылки очень важны - они делают Интернет Интернетом! Чтобы добавить ссылку, нам нужно использовать простой элемент - <code> <a> </code> - «a» является сокращенной формой для «привязки». Чтобы преобразовать текст в абзаце в ссылку, выполните следующие действия:</p><ol><li> Выберите текст. Мы выбрали текст «Манифест Mozilla».</li><li> Оберните текст в элемент <code> <a> </code>, как показано ниже:<pre> <a> Манифест Mozilla </a> </pre></li><li> Присвойте элементу <code> <a> </code> атрибут <code> href </code>, как показано ниже:<pre> <a href=""> Манифест Mozilla </a> </pre></li><li> Введите в значение этого атрибута веб-адрес, на который должна быть ссылка:<pre> <a href = "https: // www.mozilla.org/en-US/about/manifesto/"> Манифест Mozilla </a> </pre></li></ol><p> Вы можете получить неожиданные результаты, если опустите часть <code> https: // </code> или <code> http: // </code>, называемую протоколом <em> </em>, в начале веб-адреса. После создания ссылки щелкните ее, чтобы убедиться, что она отправляет вам туда, куда вы хотели.</p><p> <code> href </code> на первый взгляд может показаться довольно неясным выбором имени атрибута. Если у вас возникли проблемы с его запоминанием, помните, что это означает <em> <strong> h </strong> ypertext <strong> ref </strong> erence </em>.</p><p> Добавьте ссылку на свою страницу, если вы еще этого не сделали.</p><h3><span class="ez-toc-section" id="i-64"> Заключение </span></h3><p> Если вы следовали всем инструкциям в этой статье, у вас должна получиться страница, похожая на приведенную ниже (вы также можете просмотреть ее здесь):</p><p></p><p> Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.</p><p> Здесь мы только прикоснулись к HTML. Чтобы узнать больше, перейдите в нашу тему «Изучение HTML».</p><h3><span class="ez-toc-section" id="i-65"> В этом модуле </span></h3><h2><span class="ez-toc-section" id="_Usabilitygov"> Основы проектирования пользовательского интерфейса | Usability.gov </span></h2><p> Дизайн пользовательского интерфейса (UI) фокусируется на предвидении того, что пользователям может потребоваться сделать, и на обеспечении того, чтобы в интерфейсе были элементы, которые легко получить, понять и использовать для облегчения этих действий. Пользовательский интерфейс объединяет концепции дизайна взаимодействия, визуального дизайна и информационной архитектуры.</p><h3><span class="ez-toc-section" id="i-66"> Выбор элементов интерфейса </span></h3><p> Пользователи познакомились с элементами интерфейса, действующими определенным образом, поэтому постарайтесь быть последовательными и предсказуемыми в своем выборе и их расположении.Это поможет выполнить задачу, повысить ее эффективность и получить удовлетворение.</p><p> Элементы интерфейса включают, но не ограничиваются:</p><ul><li> <strong> Элементы управления вводом </strong>: кнопки, текстовые поля, флажки, переключатели, раскрывающиеся списки, списки, переключатели, поле даты</li><li> <strong> Навигационные компоненты </strong>: навигационная цепочка, слайдер, поле поиска, разбивка на страницы, слайдер, теги, значки</li><li> <strong> Информационные компоненты </strong>: всплывающие подсказки, значки, индикатор выполнения, уведомления, окна сообщений, модальные окна</li><li> <strong> Контейнеры </strong>: гармошка</li></ul><p> Бывают случаи, когда для отображения содержимого может подходить несколько элементов.Когда это произойдет, важно подумать о компромиссах. Например, иногда элементы, которые могут помочь вам сэкономить место, создают дополнительную нагрузку на пользователя мысленно, заставляя его угадывать, что находится в раскрывающемся списке или что это за элемент.</p><h3><span class="ez-toc-section" id="i-67"> Лучшие практики для проектирования интерфейса </span></h3><p> Все зависит от знания ваших пользователей, включая понимание их целей, навыков, предпочтений и тенденций. Когда вы узнаете о своем пользователе, при разработке интерфейса обязательно учтите следующее:</p><ul><li> <strong> Сделайте интерфейс простым.</strong> Лучшие интерфейсы практически незаметны для пользователя. Они избегают ненужных элементов и ясно говорят на языке, который они используют на этикетках и в сообщениях.</li><li> <strong> Обеспечьте единообразие и используйте общие элементы пользовательского интерфейса. </strong> Используя общие элементы в пользовательском интерфейсе, пользователи чувствуют себя более комфортно и могут выполнять задачи быстрее. Также важно создавать шаблоны в языке, макете и дизайне на всем сайте, чтобы повысить эффективность. Когда пользователь узнает, как что-то делать, он сможет передать этот навык в другие части сайта.</li><li> <strong> Будьте целенаправленны в макете страницы. </strong> Учитывайте пространственные отношения между элементами на странице и структурируйте страницу в зависимости от важности. Тщательное размещение элементов может помочь привлечь внимание к наиболее важным частям информации, а также улучшить сканирование и удобочитаемость.</li><li> <strong> Стратегически используйте цвет и текстуру. </strong> Вы можете направить внимание или отвлечь внимание от предметов, используя цвет, свет, контраст и текстуру в ваших интересах.</li><li> <strong> Используйте типографику, чтобы создать иерархию и ясность.</strong> Внимательно подумайте о том, как вы используете шрифт. Различные размеры, шрифты и расположение текста для повышения удобства сканирования, разборчивости и читаемости.</li><li> <strong> Убедитесь, что система сообщает о происходящем. </strong> Всегда сообщайте своим пользователям о местоположении, действиях, изменениях состояния или ошибках. Использование различных элементов пользовательского интерфейса для сообщения статуса и, при необходимости, следующих шагов может уменьшить разочарование вашего пользователя.</li><li> <strong> Подумайте о значениях по умолчанию. </strong> Тщательно обдумывая и предвидя цели, которые люди ставят перед вашим сайтом, вы можете создать настройки по умолчанию, которые уменьшат нагрузку на пользователя.Это становится особенно важным, когда речь идет о дизайне форм, где у вас может быть возможность предварительно выбрать или заполнить некоторые поля.</li></ul><h3><span class="ez-toc-section" id="i-68"> Список литературы </span></h3><p></p><h2><span class="ez-toc-section" id="PPT_-_-_PowerPoint"> PPT - Основы веб-дизайна Презентация PowerPoint, скачать бесплатно </span></h2><li value="1"><p> <strong> Основы веб-дизайна </strong> Создание привлекательных веб-сайтов Основы веб-дизайна: HTML 5 и CSS3, Felke-Morris, Tc</p></li><li value="2"><p> <strong> Используйте цвета и изображения, которые нравятся вам целевая аудитория.</strong> • www.nasa.gov • www.bls.gov • Поддержка браузера • Тестирование в IE, Firefox, Chrome • Разрешение экрана • Старые мониторы и мобильные устройства Дизайн для целевой аудитории Основы веб-дизайна: HTML 5 и CSS3, Фельке-Моррис , T.</p></li><li value="3"><p> <strong> Иерархический </strong> • Слишком мелкий • Слишком глубокий • Линейный • Необходимость в последовательности • Случайный • Нечасто Организация веб-сайтов Основы веб-дизайна: HTML 5 и CSS3, Felke-Morris, T.</p></li><li value="4"><p> <strong> Повторение </strong> • Повторяйте визуальные элементы по всему дизайну.• Контрастность • Добавьте визуального возбуждения и привлечите внимание. • Близость • Группируйте связанные предметы. • Выравнивание • Выравнивание элементов для создания визуального единства. Принципы визуального дизайна Основы веб-дизайна: HTML 5 и CSS3, Felke-Morris, T.</p></li><li value="5"><p> <strong> Доступный дизайн может принести пользу списку поисковых систем. </strong> • Юридические требования • требуются правительством США для всех федеральных агентств. • W3C также активно участвует. Дизайн для обеспечения доступности Основы веб-дизайна: HTML 5 и CSS3, Фелке-Моррис, Т.</p></li><li value="6"><p> <strong> Используйте короткие предложения и фразы. </strong> • Будьте лаконичны. • Организуйте страницу с заголовками и подзаголовками. • Помните, что маркированные списки выделяются на странице и легко читаются. • Используйте обычные шрифты. • Гарнитура - Arial и Verdana. Использование текста. Основы веб-дизайна: HTML 5 и CSS3, Felke-Morris, T.</p></li><li value="7"><p> <strong> Проверьте толщину шрифта. </strong> • Будьте осторожны, чтобы не выделить все жирным шрифтом, это имеет тот же эффект, что и ничего. • Проверьте цвет шрифта на контраст.• Проверьте выравнивание. • Текст по центру труднее читать. • Тщательно выбирайте текст в гиперссылках. • Проверьте орфографию и грамматику. Использование текста Основы веб-дизайна: HTML 5 и CSS3, Felke-Morris, T.</p></li><li value="8"><p> <strong> Шестнадцатеричные значения цвета. </strong> • Попробуйте использовать безопасные для Интернета цвета • www.colorschemedesigner.com • www.colorjack.com • www.colorsontheweb.com/colorwizard.asp Цветовая палитра Интернета Основы веб-дизайна: HTML 5 и CSS3, Felke-Morris, T.</p></li><li value="9"><p> <strong> Для детей и подростков.</strong> • www.usmint.gov/kids • Привлекательность для молодежи. • www.underatedrock.com • Обращение ко всем. • www.nps.gov • Обращение к пожилым людям. • www.nihseniorhealth.gov Использование цвета Основы веб-дизайна: HTML 5 и CSS3, Felke-Morris, T.</p></li><li value="10"><p> <strong> Не полагайтесь на изображения для передачи смысла. </strong> • Убедитесь, что размер файла минимальный. • Используйте только необходимые мультимедиа. • Используйте анимацию, только если это делает страницу более эффектной. • Младшая аудитория находит анимацию более привлекательной, чем аудитория старшего возраста.Использование графики и мультимедиа Основы веб-дизайна: HTML 5 и CSS3, Felke-Morris, T.</p></li><li value="11"><p> <strong> Использование каскадных таблиц стилей (CSS) для макета страницы </strong> • Используйте согласованный логотип и цветовую схему.<div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></article></div><div class="author_box"><div class="row clearfix"><div class="col-md-3 col-sm-3 col-xs-12"><div class="author_thumb"> <img alt='' src="//pcvector.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='https://secure.gravatar.com/avatar/?s=300&d=mm&r=g' srcset="" data-srcset='https://secure.gravatar.com/avatar/?s=600&d=mm&r=g 2x' class='lazy lazy-hidden avatar avatar-300 photo avatar-default' height='300' width='300' fetchpriority='high' decoding='async'/><noscript><img alt='' src='https://secure.gravatar.com/avatar/?s=300&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=600&d=mm&r=g 2x' class='avatar avatar-300 photo avatar-default' height='300' width='300' fetchpriority='high' decoding='async'/></noscript></div></div><div class="col-md-9 col-sm-9 col-xs-12"><div class="author_details"><div class="author_name"><h3></h3></div><div class="author_desc"></div></div></div></div></div><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://pcvector.ru/raznoe/ta-samaya-instagram-ta-samaya-instagram-posts-picuki-com.html" rel="prev">Пред.</a></div><div class="nav-next"><a href="https://pcvector.ru/raznoe/oficzialnye-registratory-domenov-pokupka-i-prodazha-domenov-v-magazine-domennyh-imen.html" rel="next">След.</a></div></div></nav><section class="cm_related_post_container"><div class="section_inner"><div class="row clearfix"><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/dizajn" rel="category tag">Дизайн</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/dizajn/dizajn-sajtov-2020-trendy-trendy-veb-dizajna-preobladayushhie-v-2020-godu.html">Дизайн сайтов 2020 тренды: Тренды веб дизайна преобладающие в 2020 году</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author"></a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/dizajn/dizajn-sajtov-2020-trendy-trendy-veb-dizajna-preobladayushhie-v-2020-godu.html" rel="bookmark"><time class="entry-date published" datetime="2021-11-14T18:48:02+03:00">14.11.2021</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/dizajn/dizajn-sajtov-2020-trendy-trendy-veb-dizajna-preobladayushhie-v-2020-godu.html">0</a></li></ul></div></div></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/dizajn" rel="category tag">Дизайн</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/dizajn/veb-dizajn-samouchitel-uroki-veb-dizajna-s-nulya-osnovy-horoshego-dizajna-v-urokah-po-web-dizajnu.html">Веб дизайн самоучитель: Уроки веб-дизайна с нуля, основы хорошего дизайна в уроках по web-дизайну</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author"></a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/dizajn/veb-dizajn-samouchitel-uroki-veb-dizajna-s-nulya-osnovy-horoshego-dizajna-v-urokah-po-web-dizajnu.html" rel="bookmark"><time class="entry-date published" datetime="2021-11-04T18:48:02+03:00">04.11.2021</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/dizajn/veb-dizajn-samouchitel-uroki-veb-dizajna-s-nulya-osnovy-horoshego-dizajna-v-urokah-po-web-dizajnu.html">0</a></li></ul></div></div></div></div><div class="row clearfix visible-sm visible-md visible-lg"></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/dizajn" rel="category tag">Дизайн</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/dizajn/fotodizajner-kto-eto-dizajnery-kto-oni-uchebnyj-czentr-znanie.html">Фотодизайнер кто это: Дизайнеры кто они? | Учебный центр «Знание»</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author"></a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/dizajn/fotodizajner-kto-eto-dizajnery-kto-oni-uchebnyj-czentr-znanie.html" rel="bookmark"><time class="entry-date published" datetime="2021-11-02T19:17:46+03:00">02.11.2021</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/dizajn/fotodizajner-kto-eto-dizajnery-kto-oni-uchebnyj-czentr-znanie.html">0</a></li></ul></div></div></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/dizajn" rel="category tag">Дизайн</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/dizajn/na-dizajnera-vuzy-zaochnoe-obuchenie-v-vuzah-rossii-s-napravleniem-dizajn-54-03-01-na-2020-god.html">На дизайнера вузы: Заочное обучение в вузах России с направлением дизайн – 54.03.01 на 2020 год</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author"></a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/dizajn/na-dizajnera-vuzy-zaochnoe-obuchenie-v-vuzah-rossii-s-napravleniem-dizajn-54-03-01-na-2020-god.html" rel="bookmark"><time class="entry-date published" datetime="2021-10-25T19:48:02+03:00">25.10.2021</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/dizajn/na-dizajnera-vuzy-zaochnoe-obuchenie-v-vuzah-rossii-s-napravleniem-dizajn-54-03-01-na-2020-god.html">0</a></li></ul></div></div></div></div><div class="row clearfix visible-sm visible-md visible-lg"></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/dizajn" rel="category tag">Дизайн</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/dizajn/rejting-studij-veb-dizajna-rejting-veb-studij-2019.html">Рейтинг студий веб дизайна: Рейтинг веб-студий 2019</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author"></a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/dizajn/rejting-studij-veb-dizajna-rejting-veb-studij-2019.html" rel="bookmark"><time class="entry-date published" datetime="2021-10-18T19:48:02+03:00">18.10.2021</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/dizajn/rejting-studij-veb-dizajna-rejting-veb-studij-2019.html">0</a></li></ul></div></div></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/dizajn" rel="category tag">Дизайн</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/dizajn/ux-ui-dizajner-chto-eto-chto-takoe-ux-ui-dizajn-na-samom-dele-habr.html">Ux ui дизайнер что это: Что такое UX/UI дизайн на самом деле? / Хабр</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author"></a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/dizajn/ux-ui-dizajner-chto-eto-chto-takoe-ux-ui-dizajn-na-samom-dele-habr.html" rel="bookmark"><time class="entry-date published" datetime="2021-10-02T20:17:46+03:00">02.10.2021</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/dizajn/ux-ui-dizajner-chto-eto-chto-takoe-ux-ui-dizajn-na-samom-dele-habr.html">0</a></li></ul></div></div></div></div></div></div></section><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/dizajn/osnovy-veb-dizajna-osnovy-veb-dizajna-dlya-nachinayushhih-7-pravil.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://pcvector.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='4116' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></div><div class="col-md-4 col-sm-12 col-xs-12 sticky_portion"><aside id="secondary" class="sidebar-widget-area"><div id="search-2" class="widget widget_search"><form role="search" method="get" id="search-form" class="clearfix" action="https://pcvector.ru/"><input type="search" name="s" placeholder="Поиск..." value"" ><input type="submit" id="submit" value="Поиск"></form></div><div id="archives-3" class="widget widget_archive"><div class="widget-title"><h2>Архивы</h2></div><ul><li><a href='https://pcvector.ru/2021/11'>Ноябрь 2021</a></li><li><a href='https://pcvector.ru/2021/10'>Октябрь 2021</a></li><li><a href='https://pcvector.ru/2021/09'>Сентябрь 2021</a></li><li><a href='https://pcvector.ru/2021/08'>Август 2021</a></li><li><a href='https://pcvector.ru/2021/07'>Июль 2021</a></li><li><a href='https://pcvector.ru/2021/06'>Июнь 2021</a></li><li><a href='https://pcvector.ru/2021/05'>Май 2021</a></li><li><a href='https://pcvector.ru/2021/04'>Апрель 2021</a></li><li><a href='https://pcvector.ru/2021/03'>Март 2021</a></li><li><a href='https://pcvector.ru/2021/02'>Февраль 2021</a></li><li><a href='https://pcvector.ru/2021/01'>Январь 2021</a></li><li><a href='https://pcvector.ru/2020/12'>Декабрь 2020</a></li><li><a href='https://pcvector.ru/2020/11'>Ноябрь 2020</a></li><li><a href='https://pcvector.ru/2020/10'>Октябрь 2020</a></li><li><a href='https://pcvector.ru/2020/09'>Сентябрь 2020</a></li><li><a href='https://pcvector.ru/2020/08'>Август 2020</a></li><li><a href='https://pcvector.ru/2020/07'>Июль 2020</a></li><li><a href='https://pcvector.ru/2020/06'>Июнь 2020</a></li><li><a href='https://pcvector.ru/2020/05'>Май 2020</a></li><li><a href='https://pcvector.ru/2020/04'>Апрель 2020</a></li><li><a href='https://pcvector.ru/2020/03'>Март 2020</a></li><li><a href='https://pcvector.ru/2020/02'>Февраль 2020</a></li><li><a href='https://pcvector.ru/2020/01'>Январь 2020</a></li><li><a href='https://pcvector.ru/2019/12'>Декабрь 2019</a></li><li><a href='https://pcvector.ru/2019/11'>Ноябрь 2019</a></li><li><a href='https://pcvector.ru/2019/10'>Октябрь 2019</a></li><li><a href='https://pcvector.ru/2019/09'>Сентябрь 2019</a></li><li><a href='https://pcvector.ru/2019/08'>Август 2019</a></li><li><a href='https://pcvector.ru/2019/07'>Июль 2019</a></li><li><a href='https://pcvector.ru/2019/06'>Июнь 2019</a></li><li><a href='https://pcvector.ru/2019/05'>Май 2019</a></li><li><a href='https://pcvector.ru/2019/04'>Апрель 2019</a></li><li><a href='https://pcvector.ru/2019/03'>Март 2019</a></li><li><a href='https://pcvector.ru/2019/02'>Февраль 2019</a></li><li><a href='https://pcvector.ru/2019/01'>Январь 2019</a></li><li><a href='https://pcvector.ru/2018/12'>Декабрь 2018</a></li><li><a href='https://pcvector.ru/2018/11'>Ноябрь 2018</a></li><li><a href='https://pcvector.ru/2018/10'>Октябрь 2018</a></li><li><a href='https://pcvector.ru/2018/09'>Сентябрь 2018</a></li><li><a href='https://pcvector.ru/2018/08'>Август 2018</a></li><li><a href='https://pcvector.ru/2018/07'>Июль 2018</a></li><li><a href='https://pcvector.ru/2018/06'>Июнь 2018</a></li><li><a href='https://pcvector.ru/2018/05'>Май 2018</a></li><li><a href='https://pcvector.ru/2018/04'>Апрель 2018</a></li><li><a href='https://pcvector.ru/2018/03'>Март 2018</a></li><li><a href='https://pcvector.ru/2018/02'>Февраль 2018</a></li><li><a href='https://pcvector.ru/2018/01'>Январь 2018</a></li><li><a href='https://pcvector.ru/1988/02'>Февраль 1988</a></li><li><a href='https://pcvector.ru/1988/01'>Январь 1988</a></li><li><a href='https://pcvector.ru/1987/12'>Декабрь 1987</a></li><li><a href='https://pcvector.ru/1987/11'>Ноябрь 1987</a></li><li><a href='https://pcvector.ru/1987/10'>Октябрь 1987</a></li><li><a href='https://pcvector.ru/1987/09'>Сентябрь 1987</a></li><li><a href='https://pcvector.ru/1987/08'>Август 1987</a></li><li><a href='https://pcvector.ru/1987/07'>Июль 1987</a></li><li><a href='https://pcvector.ru/1987/06'>Июнь 1987</a></li><li><a href='https://pcvector.ru/1987/05'>Май 1987</a></li><li><a href='https://pcvector.ru/1987/04'>Апрель 1987</a></li><li><a href='https://pcvector.ru/1987/03'>Март 1987</a></li><li><a href='https://pcvector.ru/1987/02'>Февраль 1987</a></li><li><a href='https://pcvector.ru/1987/01'>Январь 1987</a></li><li><a href='https://pcvector.ru/1986/12'>Декабрь 1986</a></li><li><a href='https://pcvector.ru/1986/11'>Ноябрь 1986</a></li><li><a href='https://pcvector.ru/1986/10'>Октябрь 1986</a></li><li><a href='https://pcvector.ru/1986/09'>Сентябрь 1986</a></li><li><a href='https://pcvector.ru/1986/08'>Август 1986</a></li><li><a href='https://pcvector.ru/1986/07'>Июль 1986</a></li><li><a href='https://pcvector.ru/1986/06'>Июнь 1986</a></li><li><a href='https://pcvector.ru/1986/05'>Май 1986</a></li><li><a href='https://pcvector.ru/1986/04'>Апрель 1986</a></li><li><a href='https://pcvector.ru/1986/03'>Март 1986</a></li><li><a href='https://pcvector.ru/1986/02'>Февраль 1986</a></li><li><a href='https://pcvector.ru/1986/01'>Январь 1986</a></li><li><a href='https://pcvector.ru/1985/12'>Декабрь 1985</a></li><li><a href='https://pcvector.ru/1985/11'>Ноябрь 1985</a></li><li><a href='https://pcvector.ru/1985/10'>Октябрь 1985</a></li><li><a href='https://pcvector.ru/1985/09'>Сентябрь 1985</a></li><li><a href='https://pcvector.ru/1985/08'>Август 1985</a></li><li><a href='https://pcvector.ru/1985/07'>Июль 1985</a></li><li><a href='https://pcvector.ru/1985/06'>Июнь 1985</a></li><li><a href='https://pcvector.ru/1985/05'>Май 1985</a></li><li><a href='https://pcvector.ru/1985/04'>Апрель 1985</a></li><li><a href='https://pcvector.ru/1985/03'>Март 1985</a></li><li><a href='https://pcvector.ru/1985/02'>Февраль 1985</a></li><li><a href='https://pcvector.ru/1985/01'>Январь 1985</a></li><li><a href='https://pcvector.ru/1984/12'>Декабрь 1984</a></li><li><a href='https://pcvector.ru/1984/11'>Ноябрь 1984</a></li><li><a href='https://pcvector.ru/1984/10'>Октябрь 1984</a></li><li><a href='https://pcvector.ru/1984/09'>Сентябрь 1984</a></li><li><a href='https://pcvector.ru/1984/08'>Август 1984</a></li><li><a href='https://pcvector.ru/1984/07'>Июль 1984</a></li><li><a href='https://pcvector.ru/1984/06'>Июнь 1984</a></li><li><a href='https://pcvector.ru/1984/05'>Май 1984</a></li><li><a href='https://pcvector.ru/1984/04'>Апрель 1984</a></li><li><a href='https://pcvector.ru/1984/03'>Март 1984</a></li><li><a href='https://pcvector.ru/1982/06'>Июнь 1982</a></li><li><a href='https://pcvector.ru/1982/05'>Май 1982</a></li><li><a href='https://pcvector.ru/1982/04'>Апрель 1982</a></li><li><a href='https://pcvector.ru/1982/03'>Март 1982</a></li><li><a href='https://pcvector.ru/1982/02'>Февраль 1982</a></li><li><a href='https://pcvector.ru/1982/01'>Январь 1982</a></li><li><a href='https://pcvector.ru/1981/12'>Декабрь 1981</a></li><li><a href='https://pcvector.ru/1981/11'>Ноябрь 1981</a></li><li><a href='https://pcvector.ru/1981/10'>Октябрь 1981</a></li><li><a href='https://pcvector.ru/1981/09'>Сентябрь 1981</a></li><li><a href='https://pcvector.ru/1981/08'>Август 1981</a></li><li><a href='https://pcvector.ru/1981/07'>Июль 1981</a></li><li><a href='https://pcvector.ru/1981/06'>Июнь 1981</a></li><li><a href='https://pcvector.ru/1981/05'>Май 1981</a></li><li><a href='https://pcvector.ru/1981/04'>Апрель 1981</a></li><li><a href='https://pcvector.ru/1981/03'>Март 1981</a></li><li><a href='https://pcvector.ru/1981/02'>Февраль 1981</a></li><li><a href='https://pcvector.ru/1981/01'>Январь 1981</a></li><li><a href='https://pcvector.ru/1980/12'>Декабрь 1980</a></li><li><a href='https://pcvector.ru/1980/11'>Ноябрь 1980</a></li><li><a href='https://pcvector.ru/1980/10'>Октябрь 1980</a></li><li><a href='https://pcvector.ru/1980/09'>Сентябрь 1980</a></li><li><a href='https://pcvector.ru/1980/08'>Август 1980</a></li><li><a href='https://pcvector.ru/1980/07'>Июль 1980</a></li><li><a href='https://pcvector.ru/1980/06'>Июнь 1980</a></li><li><a href='https://pcvector.ru/1980/05'>Май 1980</a></li><li><a href='https://pcvector.ru/1980/04'>Апрель 1980</a></li><li><a href='https://pcvector.ru/1980/03'>Март 1980</a></li><li><a href='https://pcvector.ru/1980/02'>Февраль 1980</a></li><li><a href='https://pcvector.ru/1980/01'>Январь 1980</a></li><li><a href='https://pcvector.ru/1979/12'>Декабрь 1979</a></li><li><a href='https://pcvector.ru/1979/11'>Ноябрь 1979</a></li><li><a href='https://pcvector.ru/1979/10'>Октябрь 1979</a></li><li><a href='https://pcvector.ru/1979/09'>Сентябрь 1979</a></li><li><a href='https://pcvector.ru/1979/08'>Август 1979</a></li><li><a href='https://pcvector.ru/1979/07'>Июль 1979</a></li><li><a href='https://pcvector.ru/1979/06'>Июнь 1979</a></li><li><a href='https://pcvector.ru/1979/05'>Май 1979</a></li><li><a href='https://pcvector.ru/1979/04'>Апрель 1979</a></li><li><a href='https://pcvector.ru/1979/03'>Март 1979</a></li><li><a href='https://pcvector.ru/1979/02'>Февраль 1979</a></li><li><a href='https://pcvector.ru/1979/01'>Январь 1979</a></li><li><a href='https://pcvector.ru/1978/12'>Декабрь 1978</a></li><li><a href='https://pcvector.ru/1978/11'>Ноябрь 1978</a></li><li><a href='https://pcvector.ru/1978/10'>Октябрь 1978</a></li><li><a href='https://pcvector.ru/1978/09'>Сентябрь 1978</a></li><li><a href='https://pcvector.ru/1978/08'>Август 1978</a></li><li><a href='https://pcvector.ru/1978/07'>Июль 1978</a></li><li><a href='https://pcvector.ru/1978/06'>Июнь 1978</a></li><li><a href='https://pcvector.ru/1978/05'>Май 1978</a></li><li><a href='https://pcvector.ru/1978/04'>Апрель 1978</a></li><li><a href='https://pcvector.ru/1978/03'>Март 1978</a></li><li><a href='https://pcvector.ru/1978/02'>Февраль 1978</a></li><li><a href='https://pcvector.ru/1978/01'>Январь 1978</a></li><li><a href='https://pcvector.ru/1977/12'>Декабрь 1977</a></li><li><a href='https://pcvector.ru/1977/11'>Ноябрь 1977</a></li><li><a href='https://pcvector.ru/1977/10'>Октябрь 1977</a></li><li><a href='https://pcvector.ru/1977/09'>Сентябрь 1977</a></li><li><a href='https://pcvector.ru/1977/08'>Август 1977</a></li><li><a href='https://pcvector.ru/1977/07'>Июль 1977</a></li><li><a href='https://pcvector.ru/1977/06'>Июнь 1977</a></li><li><a href='https://pcvector.ru/1977/05'>Май 1977</a></li><li><a href='https://pcvector.ru/1977/04'>Апрель 1977</a></li><li><a href='https://pcvector.ru/1977/03'>Март 1977</a></li><li><a href='https://pcvector.ru/1977/02'>Февраль 1977</a></li><li><a href='https://pcvector.ru/1977/01'>Январь 1977</a></li><li><a href='https://pcvector.ru/1976/12'>Декабрь 1976</a></li><li><a href='https://pcvector.ru/1976/11'>Ноябрь 1976</a></li><li><a href='https://pcvector.ru/1976/10'>Октябрь 1976</a></li><li><a href='https://pcvector.ru/1976/09'>Сентябрь 1976</a></li><li><a href='https://pcvector.ru/1976/08'>Август 1976</a></li><li><a href='https://pcvector.ru/1976/07'>Июль 1976</a></li><li><a href='https://pcvector.ru/1976/06'>Июнь 1976</a></li><li><a href='https://pcvector.ru/1976/05'>Май 1976</a></li><li><a href='https://pcvector.ru/1976/04'>Апрель 1976</a></li><li><a href='https://pcvector.ru/1976/03'>Март 1976</a></li><li><a href='https://pcvector.ru/1976/02'>Февраль 1976</a></li><li><a href='https://pcvector.ru/1976/01'>Январь 1976</a></li><li><a href='https://pcvector.ru/1975/12'>Декабрь 1975</a></li><li><a href='https://pcvector.ru/1975/11'>Ноябрь 1975</a></li><li><a href='https://pcvector.ru/1975/10'>Октябрь 1975</a></li><li><a href='https://pcvector.ru/1975/09'>Сентябрь 1975</a></li><li><a href='https://pcvector.ru/1975/08'>Август 1975</a></li><li><a href='https://pcvector.ru/1975/07'>Июль 1975</a></li><li><a href='https://pcvector.ru/1975/06'>Июнь 1975</a></li><li><a href='https://pcvector.ru/1975/05'>Май 1975</a></li><li><a href='https://pcvector.ru/1975/04'>Апрель 1975</a></li><li><a href='https://pcvector.ru/1975/03'>Март 1975</a></li><li><a href='https://pcvector.ru/1975/02'>Февраль 1975</a></li><li><a href='https://pcvector.ru/1975/01'>Январь 1975</a></li><li><a href='https://pcvector.ru/1974/12'>Декабрь 1974</a></li><li><a href='https://pcvector.ru/1974/11'>Ноябрь 1974</a></li><li><a href='https://pcvector.ru/1974/10'>Октябрь 1974</a></li><li><a href='https://pcvector.ru/1974/09'>Сентябрь 1974</a></li><li><a href='https://pcvector.ru/1974/08'>Август 1974</a></li><li><a href='https://pcvector.ru/1974/07'>Июль 1974</a></li><li><a href='https://pcvector.ru/1974/06'>Июнь 1974</a></li><li><a href='https://pcvector.ru/1974/05'>Май 1974</a></li><li><a href='https://pcvector.ru/1974/04'>Апрель 1974</a></li><li><a href='https://pcvector.ru/1974/03'>Март 1974</a></li><li><a href='https://pcvector.ru/1974/02'>Февраль 1974</a></li><li><a href='https://pcvector.ru/1974/01'>Январь 1974</a></li><li><a href='https://pcvector.ru/1973/12'>Декабрь 1973</a></li><li><a href='https://pcvector.ru/1973/11'>Ноябрь 1973</a></li><li><a href='https://pcvector.ru/1973/10'>Октябрь 1973</a></li><li><a href='https://pcvector.ru/1973/09'>Сентябрь 1973</a></li><li><a href='https://pcvector.ru/1973/08'>Август 1973</a></li><li><a href='https://pcvector.ru/1973/07'>Июль 1973</a></li><li><a href='https://pcvector.ru/1973/06'>Июнь 1973</a></li><li><a href='https://pcvector.ru/1973/05'>Май 1973</a></li><li><a href='https://pcvector.ru/1973/04'>Апрель 1973</a></li><li><a href='https://pcvector.ru/1973/03'>Март 1973</a></li><li><a href='https://pcvector.ru/1973/02'>Февраль 1973</a></li><li><a href='https://pcvector.ru/1973/01'>Январь 1973</a></li><li><a href='https://pcvector.ru/1972/12'>Декабрь 1972</a></li><li><a href='https://pcvector.ru/1972/11'>Ноябрь 1972</a></li><li><a href='https://pcvector.ru/1972/10'>Октябрь 1972</a></li><li><a href='https://pcvector.ru/1972/09'>Сентябрь 1972</a></li><li><a href='https://pcvector.ru/1972/08'>Август 1972</a></li><li><a href='https://pcvector.ru/1972/07'>Июль 1972</a></li><li><a href='https://pcvector.ru/1972/06'>Июнь 1972</a></li><li><a href='https://pcvector.ru/1972/05'>Май 1972</a></li><li><a href='https://pcvector.ru/1972/04'>Апрель 1972</a></li><li><a href='https://pcvector.ru/1972/03'>Март 1972</a></li><li><a href='https://pcvector.ru/1972/02'>Февраль 1972</a></li><li><a href='https://pcvector.ru/1972/01'>Январь 1972</a></li><li><a href='https://pcvector.ru/1971/12'>Декабрь 1971</a></li><li><a href='https://pcvector.ru/1971/11'>Ноябрь 1971</a></li><li><a href='https://pcvector.ru/1971/10'>Октябрь 1971</a></li><li><a href='https://pcvector.ru/1971/09'>Сентябрь 1971</a></li><li><a href='https://pcvector.ru/1971/08'>Август 1971</a></li><li><a href='https://pcvector.ru/1971/07'>Июль 1971</a></li><li><a href='https://pcvector.ru/1971/06'>Июнь 1971</a></li><li><a href='https://pcvector.ru/1971/05'>Май 1971</a></li><li><a href='https://pcvector.ru/1971/04'>Апрель 1971</a></li><li><a href='https://pcvector.ru/1971/03'>Март 1971</a></li><li><a href='https://pcvector.ru/1971/02'>Февраль 1971</a></li><li><a href='https://pcvector.ru/1971/01'>Январь 1971</a></li><li><a href='https://pcvector.ru/1970/12'>Декабрь 1970</a></li><li><a href='https://pcvector.ru/1970/11'>Ноябрь 1970</a></li><li><a href='https://pcvector.ru/1970/10'>Октябрь 1970</a></li><li><a href='https://pcvector.ru/1970/09'>Сентябрь 1970</a></li><li><a href='https://pcvector.ru/1970/08'>Август 1970</a></li><li><a href='https://pcvector.ru/1970/07'>Июль 1970</a></li><li><a href='https://pcvector.ru/1970/06'>Июнь 1970</a></li><li><a href='https://pcvector.ru/1970/05'>Май 1970</a></li><li><a href='https://pcvector.ru/1970/04'>Апрель 1970</a></li><li><a href='https://pcvector.ru/1970/03'>Март 1970</a></li><li><a href='https://pcvector.ru/1970/02'>Февраль 1970</a></li><li><a href='https://pcvector.ru/1970/01'>Январь 1970</a></li></ul></div><div id="categories-3" class="widget widget_categories"><div class="widget-title"><h2>Рубрики</h2></div><ul><li class="cat-item cat-item-9"><a href="https://pcvector.ru/category/vdohnovenie">Вдохновение</a></li><li class="cat-item cat-item-3"><a href="https://pcvector.ru/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-6"><a href="https://pcvector.ru/category/illyustrator">Иллюстратор</a></li><li class="cat-item cat-item-8"><a href="https://pcvector.ru/category/plaginy">Плагины</a></li><li class="cat-item cat-item-5"><a href="https://pcvector.ru/category/raznoe">Разное</a></li><li class="cat-item cat-item-1"><a href="https://pcvector.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-7"><a href="https://pcvector.ru/category/uroki">Уроки</a></li><li class="cat-item cat-item-4"><a href="https://pcvector.ru/category/fotoshop">Фотошоп</a></li></ul></div></aside></div></div></div></div></main></div></div></div><footer class="footer"><div class="footer_inner"><div class="cm-container"><div class="row footer-widget-container"></div><div class="copyright_section"><div class="row"><div class="col-md-7 col-sm-6 col-xs-12"><div class="copyrights"><p>Primelens.ru © 2019</p></div></div><div class="col-md-5 col-sm-6 col-xs-12"><div class="footer_nav"></div></div></div></div></div></div></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://pcvector.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> </body></html>