Позднее Ctrl + ↑

Что такое — создание сайта?

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

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

Если заказчик затрудняется с формированием ТЗ, а от количества непонятных слов в брифе у него волосы на руках встают дыбом, то нужно ему помочь. И прежде, чем помочь — надо понимать самим, как и из чего состоит процесс создания сайта.
Я разделил процесс создания сайта на несколько простых этапов:
 
Нулевой этап: цель
Это основа основ. Это фундамент. Всегда нужно определяться, для чего необходимо разработать сайт.
Заказчик может сколько угодного говорить «ну, у всех есть сайт, вот и мне надо» в течение недели, а затем выдать «ну, ещё каталог товаров надо, а ещё неплохо бы было электронную оплату прикрутить». И вся работа, проделанная в течение недели, окажется пустой тратой времени.
Поэтому нужно задать как можно больше точных и понятных вопросов, чтобы заказчик раскололся (или подумал) и рассказал, для чего ему нужен сайт на самом деле.
 
Первый этап: структура
Перед созданием структуры сайта настоятельно рекомендую изучить продукты заказчика, его целевую аудиторию в интернете и ближайших конкурентов (сайты, приложения).
Любой заказчик хоть немного, но представляет внешний вид своего сайта — страницы, пункты, блоки. Поэтому стоить уделить час-два времени на то, чтобы обсудить и прописать с заказчиком в любом удобном текстовом документе (MS Word/Excel, Google Таблицы, etc) структуру сайта. Каждую страницу. Зачастую уникальных страниц получается около 5-7 остальные являются однотипными, т. е. по структуре они полностью идентичны, различен лишь смысл контента (например, на автосайтах это страницы с кредитованием и страхованием).
Готовую структуру передаём на растерзание интернет-маркетологу, который пропишет основные пользовательские сценарии и расставит формы захвата (если они необходимы).
 
Второй этап: прототипирование
На данном этапе дизайнер, исходя из структуры, накидывает небольшой прототип сайта при помощи Adobe XD или Adobe Muse (либо таких сервисов, как https://gomockingbird.com/ ). Параллельно с этим определяемся со стилистикой будущего сайта.
Готовый прототип согласовывается с заказчиком.

Второй этап может занимать и день, и два, и три. Но это — лучший способ сократить время создания макета. Нет необходимости пытаться что-то придумать, нажимая пальцем в небо. Кроме того, вы экономите время заказчика и дизайнера, а значит — экономите и деньги.
 
Третий этап: UI
Когда на руках есть структура и прототип  — можно смело приступать к разработке визуальных макетов.
Процесс кропотливый и монотонный, с подбором цветов из брендбука заказчика для тех или иных форм, с отрисовкой уникальных тематических иконок, подбор web-шрифтов и многое другое, чтобы может входить в процесс создания макетов.
После получения от дизайнера готовых макетов — идём на согласование к заказчику. Если всё хорошо, то готовим UI-kit для верстальщиков.

UI-kit — это графическое изображение всех элементов интерфейса, с которыми так или иначе взаимодействует пользователь. В такой комплект, как правило, входят:
элементы навигации — табы, вкладки, кнопки prev/next, индикаторы, флажки,
элементы взаимодействия — кнопки, текстовые поля, слайдеры, чаты.
UI-kit помогает верстальщикам видеть, как те или иные элементы должны отображаться при включении/выключении или правильном/неправильном действии (например, при неправильном заполнении, поле для ввода email должно приобретать бордер красного цвета размером 2 пикселя).

 
Четвёртый этап: вёрстка
Это один из самых магических этапов для заказчика — неделю назад он видел макеты в картинках, а сейчас они ожили! Можно нажимать на кнопки, заполнять формы или просто показывать всем своим знакомым.
 
Пятый этап: логика
Логика. Бэк. Back-end. Этап, когда верстальщики передали всё в руки программистов. Здесь кнопки начинают работать по замыслу, а данные с форм приходить на почту/в CRM. Заказчик не понимает, почему этот процесс занял столь длительное время, ведь сайт (под ним понимает «вёрстку») уже был готов!
 
На этом этапы создания сайта заканчиваются и готовый продукт переезжает на хостинг заказчика.

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

Пятмуз.

Mooncake — российский оркестр, исполняющий art/space/post-rock. Состав коллектива довольно часто меняется, что сказывается на музыкальном стиле, но, как мне кажется, ребята меняются только в лучшую сторону. Кроме того, Mooncake довольно часто проводят концерты в планетарии. А слушать space-rock и post-rock под звёздами — самый настоящий кайф.

Очередное усилие над собой

На прошлой неделе попросил прекрасную Марину Дмитриеву преподать мне небольшой урок по обработке фотографий в Adobe Lightroom. И был приятно удивлён количеству открывшейся мне информации. Например, волшебной функции «Удаление пятен». Теперь все мелкие косяки в виде бутылок на песке или палок в траве легко удалить.
Наверное, я бы узнал эту ценную информацию видео-уроков по Лайтруму на YouTube через год или два, потому как они настолько скучные и монотонные, что дальше второй минуты мне никак не хочется смотреть.
Также узнал, что повышенные настройки чёткости и резкости до добра не доводят, а перебор с тенями вообще грех. А мне казалось наоборот :)

Оригинал/до урока/после урока:

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

2017   photo   Toyota   жизнь

Немного про «Лестницу в небо»

На просторах Всемирной увидел небольшое интервью, где Джимми Пейдж (гитарист Led Zeppelin) рассказывает о том, как писали Stairway to Heaven.
Ценителям советую.

2017   музыка

Как не надо делать

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

1. Минималистичный борд, где на 9 слов использовано целых 3 шрифта.
«Женский» — видимо, хотели немного леттеринга, но поленились и использовали обычный рукописный шрифт, в котором буква «К» очень похожа на латинскую «R». Далее, наверное, поняли: «как-то лакшери получается, надо сделать менее броско... может используем шрифт с засечками из стандартных виндовых?». Сказано — сделано.
А дескриптор можно и обычным гротеском написать, почему бы и нет?

 

 
 

2. Изначально большинство шрифтов проектируются таким образом, чтобы расстояние между буквами было равным, даже если первая буква слова прописная, а остальные строчные (из расчёта написания имён, фамилий, городов, рек и т. д.). Поэтому всё, что набрано ПРОПИСНЫМИ буквами, требует дополнительной разрядки (кёрнинга). Если этого не сделать, то получится не очень читаемый набор символов. А при соответствующей подсветке — яркое пятно, неразличимое на расстоянии.

 

 
 

3. В любом рекламном макете должно быть понятно, что рекламодатель хочет рассказать о себе. Если вспомнить про правила «трёх секунд» (по статистикам многочисленных исследований было выявлено, что человек смотреть на рекламный макет не более трёх секунд) и «одноразовость контакты» (огромное количество людей видит макет только один раз, например, проезжая мимо), то становится понятно, что макет должен быть доступен для быстрого считывания и понимания.
Отличный светящий борд находится на пересечение улиц Ленина и Плеханова. Симпатичная девушка лучезарно улыбается в солнечных очках...
Правда, как оказалось после минуты изучения макета, очки-то совсем не солнечные!

 

 
 

Из приятного: наконец-то обнаружил нормальную крупную вывеску с названием улицы, номером дома и (!) направлением нумерации домов!

Redmine

До сих пор не нашёл удобный трекер для постановки задач на работе. Пробовали и Trello (не распишешь задачи), и Битрикс24 (много неиспользуемых функций и тяжесть загрузки страниц), и много всякой всячины.
Посовещавшись с командой пришли к выводу, что пока будем жить на старом добром Redmine. Допотопный интерфейс делает загрузку страниц моментальной, а возможность прямо в нём составлять ёмкие ТЗ и указывать потраченное количество времени на работу  — отрада как для менеджера проекта, так и для дизайнеров.

Redmine был поднят из готового образа VDS у ребят из NetAngels, так что никаких танцев с Ruby плясать не пришлось.

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

Теперь хаотичные задачи из Битрикс24, Trello, Redbooth и даже Google-таблиц нашли своё пристанище в Redmine.

Немного про бас.

На YouTube есть крутой канал про бас — CoverSolutions.
Парень играет бас-партии известных композиций (тут и Kansas, и The Who, и Bon Jovi) в точности, как показано на табулатуре в верху каждого видео.
Это отличное видео-пособие для тех, кто хочет научиться хоть как-то держать в руках бас-гитару и извлекать из неё ноты. :-)

Пятмуз.

Первый пятничный вечер лета заканчивается очень атмосферным видео 2015 года.
Да, это мужики в кожаных куртках, которые знают своё дело — Lynyrd Skynyrd.

2017   пятмуз

UX в авто

Как-то я писал об удобстве использования подстаканников в Volkswagen Polo. Вроде бы ничего особенного, дело-то житейское, но оказалось, что UX в автомобилях посвящён целый сайт — http://car-ux.com
На нём можно посмотреть, как выглядит тот или иной салон автомобиля премиального сегмента со стороны водителя. Но почувствовать, к сожалению, нельзя.

Ранее Ctrl + ↓