Когда дело доходит до веб-дизайна, большая часть реальной работы по дизайну по-прежнему выполняется с помощью таких инструментов, как PhotoShop и Illustrator, и только позднее переводится в код.
Кажется, мы застряли во временном искажении, все еще используя инструменты графического дизайна для веб-дизайна.
Дизайн для сети — это совсем другая игра с мячом. Нюансы отличаются от общего графического дизайна. Разработка адаптивного макета, разработка для конвертации, разработка для удобства пользователей — все это часть игры.
И все же мы застряли, используя инструменты прошлого века (ну, почти) для современного веб-дизайна. Не пора ли нам перейти к более современным инструментам, которые на самом деле предназначались для веб-дизайна?
В прошлом Wix , Weebly и множество других разработчиков сайтов выходили на сцену, но оставляли желать лучшего с точки зрения истинной свободы дизайна и контроля. В совокупности они оставили такой дурной вкус, что многие веб-дизайнеры даже сегодня избегают использования любого инструмента для создания веб-сайтов.
Но мы знаем, что технологии улучшаются, а программное обеспечение улучшается. Возможно, пришло время вернуться к визуальным разработчикам сайтов?
За последние несколько лет появилось множество новых инструментов для создания веб-сайтов. Такие инструменты, как FROONT , Webflow , Macaw и Webydo , были созданы специально для веб-дизайна. Ли Хауэллс называет их « инструментами CoDesign » — инструментами, которые позволяют вам создавать веб-сайты и создавать веб-сайт (он же код) для вас при разработке.
Это радикальная мысль для некоторых. Мы настолько укоренились в наших собственных методах работы, что трудно понять альтернативный метод — с инструментами, которые позволяют вам создавать живые веб-сайты, а не просто макеты и генерировать код для вас по ходу работы.
В то время как я в восторге от перспективы сокращения циклов разработки и более быстрых изменений, давайте действительно оценим все плюсы и минусы использования этих инструментов CoDesign.
(В отдельной статье я сравню некоторые из этих инструментов, чтобы вы могли лучше решить для себя, стоит ли их пытаться. А пока вы можете получить хорошее резюме в SmashingMagazine и DavidWalsh )
Преимущества использования инструментов CoDesign
1. Вы работаете с реальным веб-потоком. Не просто создание фотографий сайтов. Хотя многие из этих инструментов имитируют пользовательский интерфейс PhotoShop, здесь вы не просто создаете статичные проекты. Вы должны на самом деле создавать элементы, элементы div и стилизовать их с помощью реального CSS — хотя вместо написания кода используйте интерфейс в стиле PhotoShop. Вы проектируете с точки зрения реальных элементов HTML.
Это заставляет задуматься о том, как будет развиваться макет, как будут размещаться контейнеры и какова общая сложность вашего дизайна. Больше не нужно придумывать сложные, искаженные конструкции, которые просто не переводятся в код. Все без написания строки кода. Это отлично подходит для дизайнеров, которые хотят больше узнать о своем ремесле и хотят заниматься настоящим веб-дизайном.
2. Больше не показывать макеты. Вы можете демо живые сайты! Вам больше не нужно отправлять клиентам несколько psd-файлов, а затем попытаться объяснить им, как все будет выглядеть немного иначе на реальном веб-сайте.
На самом деле, вам также не нужно отправлять кучу файлов psd туда и обратно разработчику. И больше не нужно просить и умолять о быстрой смене кода прямо перед демонстрацией.
Эти инструменты новой эры генерируют код для вас по мере продвижения. Это означает, что у вас есть реальный живой сайт с первого дня, который вы можете продемонстрировать клиентам, который вы можете настроить, как вы хотите, когда хотите. И изменения видны практически сразу.
3. Более быстрые и продуктивные циклы проектирования и разработки. Хотя это следует непосредственно из № 1 и № 2, это должно быть указано явно. Можете ли вы представить, сколько времени сэкономлено без нескольких итераций между дизайнерами и разработчиками?
Хотя эти инструменты генерируют код для вас, он может быть не полностью совместимым (Webflow — единственный инструмент, который генерирует совместимый код) и потребует некоторого объема редактирования — это означает, что вам все равно нужно работать с разработчиком, но циклы кодирования будет короче и быстрее, как и количество итераций между дизайнером и разработчиком.
4. Твой дизайн вернее твоему видению: помнишь время, когда твой разработчик сказал тебе, что удивительная функция, которую ты включил, не может быть написана? Или когда живой сайт оказался настолько далеко от вашего дизайна и заставил вас задуматься, что пошло не так при переводе с psd на код? Ну, все это теперь история. С этими инструментами кодирования вы фактически создаете живой сайт, код и все. Вы видите настоящий веб-сайт заранее — он ощутим с первого дня. Вы полностью контролируете свой дизайн и свой веб-сайт.
5. Отзывчивее просто проще: я оставил лучшее напоследок. Больше не нужно делать несколько макетов для устройств разных размеров. Больше не нужно возиться, когда вы пытаетесь объяснить переходы макета для разных устройств и размеров области просмотра для разработчика. И больше не нужно бороться с медиа-запросами. Каждый из этих инструментов позволяет легко создавать переходы макета в нужных точках останова, причем всего за несколько кликов. Разве я не говорил, что это была лучшая часть!
6. Не требуется кодирование. Разве я не упоминал, что эти инструменты генерируют код для вас?
Когда их избегать
Но это еще не все. Эти инструменты все еще находятся в процессе разработки, и им нужно еще кое-что сделать, прежде чем они перейдут на PhotoShop и WordPress. Если у вас есть какие-либо из перечисленных ниже потребностей или ограничений, лучше придерживаться текущих инструментов и рабочего процесса.
1. Совместимый, совместимый, оптимизированный код: как я уже упоминал ранее, Webflow — единственный, кто говорит о совместимом коде и кросс-браузерной совместимости. Код из других инструментов часто раздутый и оставляет желать лучшего. Если вам нужен совместимый, совместимый, чистый и быстрый код — вы можете нанять разработчика, который поможет вам работать с созданным кодом.
2. Полноценная CMS: Если вам нужен полнофункциональный блог или CMS, вам нужно подумать об этом. У Webydo есть своя собственная CMS, которая не так обширна, как, скажем, WordPress. Webflow позволяет вам экспортировать дизайн и интегрировать его с WordPress в качестве бэкэнда — но как только вы экспортируете его, вы больше не можете редактировать дизайн в Webflow.
3. Переключение между различными инструментами проектирования. Хотя большинство этих инструментов позволяют вам экспортировать код, функциональность для импорта кода или дизайна строго ограничена, а в некоторых случаях полностью отсутствует.
4. Ваш собственный хостинг. У большинства этих инструментов есть собственный выделенный сервер, на котором вы можете работать и размещать свои сайты. Это означает, что вы привязаны к их хостингу — и не всем это нравится. Конечно, вы можете экспортировать код, а затем разместить его в любом месте, но имейте в виду, что эти инструменты не имеют опции импорта. Поэтому, когда вы экспортируете код, вам, скорее всего, придется вносить в код любые дальнейшие изменения, которые вы хотите.
5. Другие расширенные функциональные возможности. Опять же, помните, что эти инструменты все еще довольно молоды и развиваются. Если вам нужен корпоративный веб-сайт уровня членства или полноценный магазин, вам, возможно, придется подумать дважды — или с помощью этих инструментов сгенерировать внешний интерфейс и найти способы интеграции с другими внутренними средами по мере необходимости.
Альтернатива: Сайт123
Для более простых сайтов Site123 — это конструктор сайтов с простой системой ценообразования, включающей тарифный план «навсегда» и план в размере 9,80 долл. США в месяц для тех, кому нужны настраиваемые домены, а также больше места для хранения и пропускной способности. Его выдающаяся особенность — это построитель веб-сайтов на боковой панели, который делает размещение страниц намного более эффективным, чем традиционные перетаскиваемые конструкторы, и он поставляется с рядом хорошо разработанных бесплатных шаблонов.
итоговый
Поэтому, хотя эти новые инструменты кодирования не совсем совершенны, я считаю, что они дают дизайнерам более новый и лучший способ создания веб-дизайнов — способ, который более информирован и созвучен тому, как веб-сайты представляют собой структуры, как работают макеты и как все работает на самом деле. в Интернете — и в то же время дает больше контроля и власти в руки дизайнеров. Я действительно с нетерпением жду возможности увидеть, как эти инструменты будут развиваться с течением времени и насколько широко будет распространено их применение.
Вы пробовали какой-либо из этих инструментов для создания кода? Каким был ваш опыт?
Если вы еще не попробовали их, отправляйтесь им в ответ и дайте нам знать, что вы думаете.