Погрузимся в Web-Design (W-D) и поймем из чего он состоит и как работать в этом направлении без навыков программирования.
W-D бывает абсолютно разным, например, программирование и сборка сайта в блокноте с помощью кода, или верстка с помощью конструкторов. Моё повествование будет именно про второе. Это легче и проще для начинающего дизайнера, а так же для тех, кто не хочет сидеть и учить языки программирования (это я). Разберем некоторые нюансы конструкторов:
+ НЕ НУЖЕН КОД (если хотите красивый, модный, работоспособный сайт, то немножко все-таки нужен);
+ Есть готовые шаблоны, на которые можно опираться и добавлять свои идеи;
+ Бесплатное обучение, подсказки, тех. поддержка на платформе конструктора;
- Многие гениальные идеи сложно или не возможно реализовать, из-за отсутствия у конструктора каких-то возможностей.
- Если на платформе сбой, то на сайте тоже будет что-то работать не корректно;
- Сам дизайн следует разрабатывать учитывая возможности каждого конструктора, иначе после согласования дизайна могут возникнуть проблемы с версткой.
Самые популярные конструкторы Tilda и Wix, WordPress. Приведу маленькое сравнение двух платформ, основываясь на своём опыте работе с ними:
- Стоимость тарифа на 1 месяц/1 год
У тильды довольно дорогая подписка на 1 сайт, но если учитывать расширенные возможности и бонусы от платформы, то оно того стоит. Ели же стоит задача собрать обычный лендинг, простой сайт с 2-3 страничками без особых выкрутасов, то есть и бесплатная возможность размещения сайта. В тариф на 1 год для 1 сайта входит: Полная коллекция блоков, подключение своего домена, бесплатный SSL-сертификат, обучающие книги и курсы по дизайну, полный список функций.
С Wix все гораздо проще. Есть разные варианты, я выбрала оптимальный. Он в себя включает: Персональный домен, бесплатный домен Wix на 1 год, сайт без рекламы Wix, бесплатный SSL-сертификат, производительность безлимитная (вот тут вообще не согласна), пространство для хранения 10 ГБ, видеоархив 1 час. Стоит очень даже приемлемо для разработки красивого и рабочего сайта, от VIP тарифа отличается всего лишь 3 позициями: Профессиональный логотип, файлы логотипа для соцсетей, служба поддержки.
- Возможности конструктора
Отдаю предпочтение Tilda, так как есть варианты дизайна разработанных блоков для конкретного контента. Это значительно упрощает жизнь, а также когда рождаются гениальные идеи, круто когда есть подсказка от интерфейса, чего не скажешь о Wix. Дизайн готовых блоков скудноват, настройки этих блоков ограничены, и приходится довольно долго разбираться в этих настройках. К обеим платформам можно интегрировать сторонние сервисы. Но Tilda шагнула далеко вперед, и уже многие идеи интеграций реализовала у себя на платформе. Например, из недавних обновлений - трансляция YouTube с чатом. Такого на Wix сделать нереально.
- Креативные идеи и возможности их реализации
Tilda поддерживает всех Дизов у кого есть возможность думать головой и разрабатывать креативные идеи. Есть несколько блоков для этого: Zero-Block - блок, где можно "с чистого листа" собрать контент, а так же HTML-блок - блок, где ты пишешь с помощью кода нужные тебе функции. С помощью этих блоков рождаются крутые сайты. Но есть и множество ограничений с данными блоками - Tilda не всегда верно обрабатывает твои решения и приходится долго "бороться" с этим. Wix можно назвать одним большим Zero-Block, то есть собираешь с 0 из отдельных элементов контента страничку, но все же функционал намного меньше, чем у Tilda.
- Скорость загрузки страницы
Очень важный пункт для конструктора, так как именно на платформе находится ваш сайт. У каждой из этих платформ есть свои сервера, которые и грузят ваши страницы. К сожалению, у Tilda наблюдается очень часто долгая загрузка страницы, если на ней есть крупные и тяжелые изображения, видео и сложная анимация. С этим нужно только смириться. У Wix такой проблемы не замечала, но при этом платформа долго соображает при верстке страницы непосредственно в самом конструкторе. Приходится ждать и молиться, чтобы ничего не зависло, если ты не успел сохранить изменения.
- Интерфейс
Tilda довольна удобна в этом плане, так как настройки блоков, страницы и сайта распределены по конкретным разделам, имеют горячие клавиши. У Wix разработчик "чихнул " на интерфейс, и получилась каша. Приходится много раз возвращаться на предыдущий шаг, чтобы понять, где находится то, что тебе нужно.
- Стрессоустойчивость при работе на платформе
При работе с данными платформами есть один небольшой нюанс - нужно быть максимально терпеливым и научиться ждать. Tilda довольно быстро справляется со скоростью работы Диза, но вот Wix - полный кошмар. Я не могу понять, почему платформа настолько медленно работает. Мои нервные клетки вышли из чата, при работе на данной платформе. Поэтому и всё впечатление о Wix - негативное.
Из этих двух конструкторов, по-моему, мнению лидирует Tilda. У данной платформы тоже не все меня устраивает, но при сравнении двух популярных конструкторов, победа достается Tilda. Поэтому все полезную информацию для верстки сайта я буду повествовать именно для этой платформы.
У каждой платформы есть свой ассортимент готовых страниц для вашего сайта, а так же есть продуманные блоки для конкретного контента. Но всегда хочется разнообразить сайт своими идеями, придумать что-то новое или вовсе сделать все с 0. Поэтому разберём парочку очень нужных программ для W-D:
- Sketch - Векторный графический редактор разработанный для Mac, является стандартом среди UX/UI дизайнеров;
- Adobe XD - Векторный графический редактор для создания прототипов и дизайна интерфейсов;
- Adobe Photoshop - Стандарт для большинства сфер по обработке растровых изображений;
- Gimp - Бесплатный аналог Photoshop, который менее распространён, но все-таки пользуется спросом;
- Affiniti - Мощная программа для работы с векторными и растровыми изображениями.
- Но #Мой_рекомендасьон - это Figma. Данная программа имеет не такой обширный спектр возможностей как Photoshop, но Figma имеет огромное количество расширений и дополнений для W-D. Данная программа не требует платной подписки (в отличие от остальных программ), поддерживается на ОС Windows, iOS или может работать через браузер вашего компьютера.
Скачать Figma можно здесь.
В следующих статьях я подробно расскажу про интерфейс данной программы, и расскажу про фитчи, собранные с разных курсов по Figma.
Небольшой бонус от меня - Исходник Figma с сеткой. Эта сетка сделана в размерах 1440 px, 768 px, 320 px для удобного создания адаптивных сайтов. Модульная сетка - это инструмент, который помогает Дизу организовывать пространство экрана. Её следует использовать во всех проектах, так как она является основой композиции и помогает выстраивать элементы дизайна, подчиняя их единому порядку, а так же
способствует соблюдению ряда принципов дизайна.
Если статья оказалась полезной, то не забудьте поделиться ею, поставить лайк и подписаться, мне будет приятно, а вы будете получать интересные обучающие статьи по W-D и работе с Tilda.
Пока-пока!