Спасибо!Ваше сообщение успешно отправлено
и будет рассмотрено в ближайшее время

РУ
  • веб дизайн
  • интерфейсы
  • логотипы
  • фирстиль
  • иллюстрации
  • инфографика

Статьи

  • Накипело

    24.08.2017

    Я помню первые 3 года фриланса как благодать, когда я понимала, что счастлива...

  • Заказчик всегда прав - вопрос или утверждение?

    08.04.2017

    Не всё в успешном завершении проекта зависит только от дизайнера. ТЗ является...

  • Лекция третья. Адаптивный дизайн

    04.04.2017

    Я вынесла этот вопрос отдельной лекцией так как речь здесь пойдёт не об истор...

  • Лекция вторая. С чего начинается разработка сайта?

    01.04.2017

    Пусть вас не пугает такой долгий путь. Я давно всего этого уже не делаю так к...

  • Лекции по web-дизайну

    27.03.2017

    Мне показалось, что всё прошло хорошо и аудитория приняла меня. Я была в вост...

  • О вкусах не спорят

    26.09.2016

    Мне часто приходится слышать от коллег такую самоуничижительную критику в сво...

  • Консультирую бесплатно и с удовольствием

    25.09.2016

    Работа дизайнера-фрилансера лишь на 50, а то и на 48% состоит из выполнения с...

  • Дизайн по фигуре

    25.03.2016

    О произведениях искусства чётко сказано: «Автор произведения изобразительног...

  • Landing page

    11.03.2016

    Landing page появился на рынке веб-дизайна сравнительно недавно. Буквально па...

  • Есть ли классика в веб-дизайне?

    09.03.2016

    А есть ли классика в веб-дизайне? Давно замечено, что как только что-то в ве...

Лекция третья. Адаптивный дизайн

В начале урока проверка домашнего задания.

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

Итак мы выяснили про сайт всё что нас интересовало, утвердили ТЗ у заказчика, остаётся последний вопрос - нужно ли предусмотреть на сайте адаптивность?

3-4 года назад, этот вопрос совсем не был риторическим. Адаптивные сайты стали входить в нашу жизнь вместе с мобильным интернетом, но начиналось всё с мобильных версий, с так называемых вап-сайтов.

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

Мобильная версия - это такая урезанная версия сайта, которая хорошо смотрится ТОЛЬКО на телефоне. И мы платим за разработку дизайна этой мобильной версии, потом за вёрстку и программирование. Через год мы узнаём, что наша целевая аудитория перешла на планшеты, тогда мы заказываем версию ещё и для вертикальной ориентации планшетов - это ещё + отдельный дизайн, вёрстка и программирование. То же самое происходит, когда на рынок выходит новый размер гаджета или появляется новое разрешение монитора. Сколько размеров - столько и мобильных версий. Если популярных размеров 8 то и разработку нашего сайта мы умножаем на 8.
Накладно - не правда ли?

Адаптивный дизайн

Адаптивная вёрстка - это, когда мы делаем (выполняем или заказываем) только 1 сайт (1 дизайн, 1 вёрстку и 1 программирование), но этот сайт умеет подстраиваться под размер любого монитора в пределах от 370 до 1200 пикселей. Есть мониторы и по 5000 пикселей в ширину, но на таком размере неудобно читать текст и его фиксируют в формате учебника. Адаптивной бывает именно вёрстка, а дизайн должен быть под неё подстроен. Web-дизайн не может существовать как чистое искусство именно потому, что в нём всегда завязан на функциональности. В нём должны быть заложены удобства для пользователя, возможности для разработчика и при всём при этом необходимо удержать стилистику. Да, оказывается, что дизайн сайта вторичен. Первична функциональность. Но профессионализм дизайнер именно в том и заключается, чтобы свести все эти точки воедино и создать такой продукт, который и удобен и функционален и красив.

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

Резиновая вёрстка - это вот: https://dribbble.com/
она заполняет собой весь монитор и сжимается в самый минимальный размер.
Она удобна для каталогов, сайтов-портфолио, новостных и мультимедийных сайтов.
Для сайтов, содержащих много текста она не выгодна потому, что трудно читать очень растянутые строки.

Наиболее приемлемый стиль для адаптивного дизайна - это flat

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

Плоская заливка, с точки зрения загрузки, весит меньше чем градиентная.

плоский дизайн

Чёрный цвет весит больше чем белый.

flat

Тёмная картинка весит больше чем светлая ...

флет

... но светлая весит больше чем заливка одним цветом.

флэт

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

Таким картинкам как здесь https://web-design.gretthen.com/web-design/trustgalaxi.html (всем этим прошивкам, металлическим изгибам, деревянным кнопкам со скруглёнными углами) на экране телефона придётся просто исчезнуть, их нельзя системно корректно сжать, их можно только перерисовать под разные размеры, а это, как мы говорили выше, стоимость сайта умноженная на 8.

Шапке этого сайта https://web-design.gretthen.com/web-design/basartov.html тоже нельзя задать уменьшение или системно перестроить, можно только перерисовать под разные версии мониторов.

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

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

Кстати, у меня вопрос к залу:
Я беру на себя смелость утверждать, что слева адаптивная версия, а справа НЕ адаптивная.
Почему?

Адаптивный сайт

Адаптивность - важнейшая способность, приобретённая сайтами за время их "привыкания" к мобильным устройствам. Изображения для адаптивных сайтов должны обладать способностью менять размер, пропорции и масштаб в зависимости от размера монитора, на котором они будут открыты, без потери качества. Разумеется, реалистичная картинка не обладает всеми этими возможностями. Максимум на что она способна в масштабировании - это пропорционально уменьшиться в размере. Если окажется, что на ней был расположен текст (картинкой) то он либо станет не читабельным либо (если он выполнен в текстовом редакторе) сползёт вниз. За то обычный прямоугольник, залитый ярким цветом и под монитор подстроится без потерь и текст не упустит.

И, казалось бы, решение найдено. Есть мобильный интернет и есть адаптивный дизайн. Он удобен не только в плане отображения, но и в плане разработки дизайна. Его легко нарисовать. Создать инфографику в стиле flat гораздо быстрее, удобнее и понятнее, чем городить огород из реалистичных картинок. Я не отвергаю реалистичные и псевдообъёмные изображения, но работать с ними гораздо дольше и кропотливей.

В чём проблема плоского дизайна?
Он не нравится нашему человеку )) как это не парадоксально.
Часто бывали случаи, когда мне заказывали дизайн сайта, приводили референсы дизайна в стиле flat, а делала всё о чём меня просили, но в ответ слышала: "Я не ожидал. У вас такое красивое портфолио. Может быть оно не ваше?" А у меня на тот момент флэта и правда не было в портфолио, этот стиль только начинал входить в моду, но человек выбирал именно моё портфолио в надежде получить подобное, а в качестве примеров приводил модные сайты.
Этот период длился года 2. За это время я уже стала недолюбливать плоский стиль потому, что столько разногласий с заказчиками у меня не было даже на заре моей дизайнерской карьеры.
Я долгое время пыталась понять где тут собака порылась и нашла этому объяснение, которое изложила в своей статье "О вкусах не спорят".

Сейчас люди уже признали, не взирая на моду, что отличаться от конкурентов только фотографиями им не хочется и слово флэт всё меньше звучит в употреблении.
Есть этому и практическое объяснение - фотографии. Шедевры плоского дизайна изобилуют красивыми фотографиями.
Хорошо если вы делаете дизайн сайта для крупной фешн компании. Качественные фото - это их конёк. Хорошо, если заказчик готов заказать фото сессию специально для сайта. Владелец завода "Коммунар" (входные двери, Харьков) перед тем как заказать дизайн сайта, заказал всем работникам фирменную одежду с логотипом фирмы, фото сессию и уже с этим пришёл к исполнителю. Да, такое бывает, но ооочень редко. Но что же делать, если к Вам пришёл заказчик у которого хороший вкус, который подобрал прекрасные референсы, составил хорошее ТЗ, внёс предоплату, но сделать ему нужно сайт какой ни будь провинциальной плотины и хороших фотографий нет, а за авторские рисунки он платить не намерен??

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

Вот пример сайта в стиле флет http://demo.aggressivemotions.com/barcelona/
с прекрасными фотографиями.

Адаптивная вёрстка

Вот пример того же сайта, но без фотографий. Наверно, так выглядел его прототип (я просто закрыла картинки). Тут мы видим, что он не имеет собственного оформления.

Адаптив

А здесь картинки не отображены вообще:

Адаптивный дизайн сайта

А вот пример сайта, который имеет оформление http://taurussoft.ru/ и он адаптивный. Кто-то может сказать о том, что наука не стоит на месте, мобильный интернет становится всё более мобильным, но это сайт 2012 года.

1398.jpg - Лекция третья. Адаптивный дизайн

Я не хочу навязывать оценки и говорить, что хорошо, а что плохо. Моя задача, хотя бы немного осветить спектр задач, которые могут возникнуть и подсказать их решения.




« Вернуться к списку