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

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

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

Знакомство
Я занимаюсь веб-дизайном с 2007 года. Мой первый опыт был удалённый. Затем я сменила 3 веб-студии и закончила свою офисную карьеру на должности Арт-директора. В настоящее время я работаю как фрилансер, общаюсь с клиентами напрямую, выполняю работу начиная с помощи в составлении технического задания и заканчивая авторским надзором над разработкой своего дизайна.

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

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

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

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

Немного об истории веб-дизайна
Веб-дизайн появился на просторах бывшего СНГ в 1995 году стараниями всем известного Артемия Лебедева. Тогда ещё ни кто не знал о том что такое сайт (мало кто вообще знал об интернете) и ему приходилось делать сайты несуществующим компаниям, чтобы сколотить себе портфолио и уже с ним предлагать себя реальным клиентам. С 1995 года по 2007 прошло не более 12 лет - это младенческий срок для какого бы то ни было направления в науке или искусстве (называйте веб-дизайн как хотите, он включает в себя и то и другое). Как нам было учиться? Точно так же как и другим изобразительным ремёслам - подражать. В течении многих веков, художники осваивали ремесло, копируя предшественников. Это не упрёк. Иногда, другого пути нет. Либо учишься у других, черпая их опыт, либо изобретаешь что-то сам и становишься законодателем мод, но это невозможно сделать на пустом месте. Всегда что-то предшествует чему-то.

На сегодняшний день web-дизайну 22 года. Для человека это совершеннолетие, а для направления - всё тот же младенческий возраст. Однако уже за это время в веб-дизайне сменилось несколько трендов

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

Интернет нужно было приручить, сделать понятным для пользователя. Возьмём, для примера слово "кнопка". Что это? Какая разница между кнопкой и гиперссылкой?

Вопрос обращённый к аудитории
Ссылка - это профессиональный термин. Мы знаем, что клик по ссылке куда-то ведёт, но как объяснить это пользователю? Как сообщить ему, что сюда надо нажимать, чтобы попасть туда, куда ему нужно?
Кто ответит?

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

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

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

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

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

Вот, например, магазин антикварных подарков "Лидерподарок"
http://www.liderpodarok.ru/



Сам стиль сайта, как бы соткан из атрибутов антиквариата, кожи и золота.

или чехлы для планшетов и смартфонов
http://brandapple.ru/



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

Ещё примеры:

https://web-design.gretthen.com/web-design/favoritti.html

https://web-design.gretthen.com/web-design/vip-handmadecomua/

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

Но сайт на 100% зависит от функциональности. Его удобство, как правило, продиктовано техническими требованиями. Если сайт красив, но долго грузится то это плохой сайт, пользователь с него уйдёт каким бы красивым он не был. Я помню, как сидела на работе, когда все уже ушли и 40 минут ждала пока загрузится видео на лебедевском сайте Эплмун (2009). На тот момент это был шедевр, передаваемый из скайпа в скайп )) со словами: "Ты это видел?!"
Однако, в это время уже стало понятно, что не всякая, даже самая красивая картинка способна сделать сайт популярным. Если она долго грузится то от неё следует избавиться. Тогда стартовала новая мода на интро страницы. Это когда сайт открывается красивой картинкой (как обложка книги), а внутренние страницы выполнены максимально минималистично. Эплмун - это магазин молодёжной одежды. Супер-пупер 3D анимированное видео располагалось на первой странице, а сами каталожные страницы магазина были максимально просты. Это был второй тренд.

Примеры интро страниц

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

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

Что бы вы выбрали?

Ответ не так очевиден как кажется.
Есть неудобные сайты, которыми всё равно все пользуются и будут пользоваться и впредь потому, что они монополисты.
Есть фирмы, которые и так се знают...
Вы знаете Мерседес? А на сайт заходили?
Для Мерседес имеет значение сколько будет грузиться их промо сайт?
А если речь идёт о Харьковском ателье индивидуального пошива одежды?
Её станут заказывать из Киева ((я намекаю на примерки)? Нужна ли им раскрутка на другие города?
А если мы представим, что этот салон всем известен? Так ли важен для них сайт?
Могут они себе позволить какой ни будь феерический дизайн с 3D анимацией, который будет долго грузиться, но за то полностью удовлетворит их имиджевые требования?

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

И вот, что я сделала "Леди НО" (2012).
http://lady-no.ru/



А в качестве понравившегося примера они выбрали вот этот сайт San Marco (2011), который раскручивать тоже ни кто не планировал.
https://web-design.gretthen.com/web-design/sanmarko.html



Результатом остались очень довольны.

В это же самое время появляется стиль веб.2.0. Этот термин больше относился к разработке чем к дизайну, но дизайн не мог не отреагировать. Пример веб.2.0 - youtube.com. Это способность контента добавляться третьими лицами (пользователями) без помощи админов. Разумеется, контент не должен страдать эстетически от таких изменений. Отсюда новые требования: все элементы дизайна должны одинаково хорошо сочетаться друг с другом в какой бы последовательности они бы не были раскиданы. Это можно сравнить с калейдоскопом. Как не крути, всё равно красивый узор. В это время появились эпловские стеклянные кнопки. Вот их как ни раскидывай - всё равно блестят ))
Не могу сказать, что этот тренд что-то на что-то сменил. Он развивался наряду с предыдущим стилем. У заказчика можно было спросить: "Вы хотите сделать так или так?" Скорее, можно сказать, что он что-то дополнил и обогатил. На нём построены социальные сети, но не всем владельцам сайтов нужна именно социальная сеть. Может быть нужен корпоративный сайт или лендинг. Поэтому здесь смены тренда не произошло.

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


https://mybeautytea.com/cart/




http://www.minon.com.tr/en/who-is-she/

http://www.frenchcuisse.com/

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

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

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

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

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