Нужно ли веб-дизайнерам уметь писать код?


31

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

Нужно ли веб-дизайнерам знать основные современные методы CSS и HTML? Почему или почему это не важно для разностороннего веб-дизайнера?

Некоторые общие мысли:

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

5
Вы описали графических дизайнеров, а не веб-дизайнеров.
Джин

Дизайнеры без среды - как композиторы без инструмента.
Адам

По моему опыту, «интерфейс» в любом веб-приложении или программном обеспечении означает пользовательский интерфейс, графический интерфейс или интерфейс. Вы это имели ввиду?
user179700

Ответы:


23

Нужно ли веб-дизайнерам знать основные современные методы CSS и HTML?

Да.

Почему или почему это не важно для разностороннего веб-дизайнера?

Я ответил «да», потому что вы использовали слово « основной» .

Абсолютно необходимо, чтобы веб-дизайнеры знали основные методы HTML и CSS, точно так же, как архитекторы должны знать кое-что о физике и материаловедении, дизайнеры печати должны знать кое-что о процессе печати CMYK, а дизайнеры моды должны знать кое-что о ткани.

Если вы не знаете ничего о CSS и HTML методов , которые Вы не можете называть себя «веб - дизайнер». Ты просто художник или что-то в этом роде.

Комментарии о ваших мыслях:

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

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

Веб-дизайнер должен знать ограничения в зависимости от аудитории и требований к производительности. Дизайнер, который знает CSS и HTML, знает, как настроить дизайн так, чтобы основной код мог быть сделан максимально гибким и эффективным.

Веб-дизайнеры должны понимать, как пользователи будут взаимодействовать с их дизайном.

Вы описали UX Design - совершенно другую дисциплину. Хотя дизайн пользовательского опыта включает в себя аспекты графического дизайна, на самом деле он имеет мало общего с CSS или HTML.

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

Дизайнерские магазины предпочли бы дизайн дизайнеров и предоставили разработчикам всю кодировку.

Это может быть частично верно, но не полностью. Одна популярная парадигма в системах управления контентом - это MVC (модель / представление / контроллер). Многие дизайнерские магазины хотят, чтобы дизайнеры имели некоторое представление о кодировании HTML / CSS, чтобы они могли сосредоточиться на представлении контента («представление»), а разработчики - на модели / контроллере.

Нельзя сказать, что некоторые магазины не нанимают художников-графиков, которые просто фокусируются на графических элементах и ​​перемещают пиксели вокруг, но, на мой взгляд, они не являются веб-дизайнерами. На большом веб-сайте могут работать художники-графики, веб-дизайнеры, дизайнеры UX, веб-разработчики и специалисты по базам данных, которые совместно работают над созданием готового веб-сайта. Фрилансер, который создает небольшие сайты, может заниматься всеми дисциплинами и называть себя веб-дизайнером / разработчиком.


17

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

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

Я думаю, что было бы благоразумно сказать «разработчик может написать что угодно», так же, как вы не можете сказать, что все, что может быть напечатано, может быть воспроизведено точно в Интернете с использованием HTML / CSS.


1
+1, особенно для "нужно знать о коде". Я работал с людьми, которые не могли написать строку кода, но имели представление о среде и были достаточно открыты, чтобы уважать то, что сказал разработчик. Это всегда работало очень хорошо.
Пекка поддерживает GoFundMonica

6

Лорен, Гоппе и Фаррей все говорят спокойно, поэтому я не буду перефразировать то, что они сказали. В целях практичности позвольте мне предложить еще один ответ на ваши явные и скрытые вопросы.

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

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

Кампания в блогах, на форумах, с клиентами и менеджерами проектов, с местными школами и группами пользователей и с любым дизайнером в пределах досягаемости: «Поговорите с вашим разработчиком, прежде чем начать разработку!»

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


В точку! Как разработчик, мне нравится иметь возможность предоставлять отзывы о возможностях и стоимости реализации конкретного проекта. Более подробное изложение того, почему какая-то часть дизайна является __in__feasible, помогает моим дизайнерам создавать лучшие (менее дорогие) проекты в будущем. Таким образом, даже если дизайнеры не могут написать код, они должны иметь возможность сообщить об этом, и они должны попытаться понять тонкости инфраструктуры / инструментов, доступных для разработчиков. (И чем лучше они могут, тем лучше я могу реализовать то, что они мне дают.)
EthanB

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

5

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

Например, всего несколько лет назад мы все еще были обременены IE6. У нас был абсолютно красивый дизайн для приложения корпоративной интрасети, но он сильно зависел от прозрачных наложений. IE6 может отображать PNG8, но не учитывает альфа-канал в PNG24, и для использования непрозрачности на основе CSS требовались фильтры ActiveX и другие проблемы. Обручи могут быть перепрыгнуты для достижения желаемого эффекта, но каждый обруч представляет более длинный цикл разработки, более высокий уровень ошибок, более сложное обслуживание и т. Д. В дополнение к прямым затратам в человеко-часах на разработку и поддержание этой (теперь проблемной) конструкции, была также альтернативная стоимость, связывающая часы разработки с исправлениями грязной кодовой базы вместо работы над версией N + 1.

В таких ситуациях стоимость / выгода каждого визуального эффекта в проекте должна быть измерена:

  • Насколько удивителен визуальный эффект?
    Может ли он быть заменен другим одинаково эффектным визуалом, который не требует столько строительных ресурсов?

  • Можно ли правильно воспроизвести эффект на цели? Если ваш первоначальный дизайн не может быть точно воссоздан целью, ваш дизайн должен быть заменен наиболее близким приближением, которое будет доступно. (К счастью, это становится все менее и менее серьезной проблемой для веб-дизайнеров.)

  • Сколько времени у вас есть в бюджете?
    Можете ли вы позволить себе больше человеко-часов в строительстве, чтобы достичь желаемого эффекта? Если нет, можете ли вы изменить дизайн этой функции за меньшее время?

  • Какая часть кодовой базы должна быть реорганизована, чтобы вместить ваш визуал?
    Если проектирование и конструирование выполняются одновременно или если вы перерисовываете унаследованное приложение, насколько сложно будет программистам внедрить ваш визуал? Не только часы, затраченные на переписывание, но и потенциальные часы отладки и обслуживания недавно измененного кода.

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

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


5

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

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

  • Использование шрифтов. Они используют шрифты, установленные в их PhotoShop, чего нет у обычного пользователя. Или они используют шрифты Mac, которых нет в Windows / Linux.
  • Отсутствие уважения к размеру экрана / браузера. Дизайн не предназначен для показа на небольших компьютерах. Поскольку ноутбуки / планшеты меньшего размера становятся все более популярными, необходимость учитывать меньшие размеры экрана становится все более важной.
  • Что должно произойти при изменении размера экрана браузера? Принял ли дизайнер во внимание, что должно происходить с дизайном при изменении размера браузера.
  • Как насчет полос прокрутки. Конструкция обычно поставляется с заполнителями «lorem ipsum». Что, если в этот заполнитель попадает много текста, и нам нужны полосы прокрутки, где мы должны их разместить.
  • Много картинок. Некоторые проекты требуют, чтобы вы вырезали много PNG. Это может привести к длительному времени отклика с веб-сервера, поскольку на начальной странице браузер должен загрузить все эти png-файлы.

Это проблемы, с которыми я столкнулся при работе с дизайнерами. Это не проблема, когда дизайнер ничего не знает о коде. Но проблемы в том, чтобы не думать о том, как дизайн используется.


Отличное замечание о шрифтах. Я заставил PSD работать там, где на моей машине даже не установлены используемые шрифты.
Chris_O

4

Более широкое понимание среды, в которой человек работает, всегда делает его лучшим художником и мастером в этой области.

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

Это все равно что нанять ландшафтного дизайнера, чтобы перестроить вашу ванную комнату. У них есть чувство дизайна, и они, вероятно, понимают некоторые из основных принципов, но скорее всего, они намного лучше в озеленении вашего газона, чем в облицовке вашего душа.

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

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

Нет, не все в команде должны иметь возможность писать плагины jQuery. Но команда должна, по крайней мере, знать, кем они являются, а команда UX / Web должна иметь людей, которые могут написать их, и, в конечном счете, все, что было разработано, должно быть построено.


4

Да. Художник должен понимать среду, в которой он работает, будь то художник с его маслом и холстом, скульптор с его мрамором и долотом или веб-дизайнер с его HTML и CSS.

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

Недавно я занимался веб-разработкой, где опыт дизайнера был полностью в печатных СМИ. Результатом были довольно красивые страницы, которые были бы фантастическими в печати, но работали как веб-сайт довольно плохо.


4

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

Для меня, когда кто-то называет себя веб-дизайнером, я ожидаю:

a) They can design a layout either in a image editing program, or in the browser
b) Can articulate their design choices, and have sensible reasons
c) Proficient (as opposed to basic knowledge) with HTML, CSS, and JavaScript.
d) Basic knowledge of server side programming

Для меня веб-дизайнер - это тот, кто может создать клиентскую часть сайта.

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

Когда кто-то говорит веб-разработчик, я ожидаю:

a) Proficient with at least one server side programming language
b) Basic knowledge of server configurations
c) Basic knowledge of client side technology (JavaScript and AJAX implementations)
d) Basic knowledge of backend architecture

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

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

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


3

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

Конечно, есть и другие, но это не помешает вашему бизнесу научиться программировать немного Javascript. (На самом деле времена меняются, и есть легионы парней с дизайнерскими навыками, которые могут javascript свой выход из своих DOM, но это совсем другая история)

Мои общие мысли:

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

  • Веб-дизайнеры, имея дело с такими напряженными людьми , постоянно рискуют своей жизнью . И следует серьезно подойти к рассмотрению некоторых из этих внешних вопросов, вместо того, чтобы бросать дизайн на их стол и убегать с криком в офис. «Я закончил, все готово, теперь это все вина разработчика! "

  • Дизайн магазинов должен гореть.


2

Зависит от того, где вы работаете.

Если вы работаете в большой компании, это могут быть отдельные роли:

  1. Специалист по UX или архитектуре - планирует информационную архитектуру / организацию сайта / создает каркасы

  2. Дизайнер - дизайн сайта с использованием фотошопа или другого инструмента

  3. Front End Developer - выполняет html / css / javascript / json / xml / и т. Д. и пишет шаблонный код, который объединяет интерфейс с задней

  4. Back End Developer - делает программирование, которое заставляет все на самом деле работать динамически

Большинство мест среднего уровня требуют, чтобы дизайнер также принимал решения UX. Но для небольших мест может понадобиться дизайнер, чтобы сделать все 3 вышеупомянутых вещи. Однако передний конец - сложная область, и в нем есть люди с разными навыками. Если вы дизайнер, которому нужно делать внешний интерфейс, от вас не следует ожидать, что вы будете знать гораздо больше, чем HTML / CSS, JQuery или какую-либо другую фреймворк. Ожидать, что дизайнер узнает более глубокие аспекты javascript и серверной интеграции, - это слишком много.

Конечно, если вы занимаетесь фрилансом, вам нужно все знать и делать самостоятельно;)


1
ОП не спрашивает, должен ли веб-дизайнер также быть опытным программистом, а скорее должен ли веб-дизайнер знать основы HTML и CSS. Даже если вы веб-дизайнер и вам никогда не нужно прикасаться к HTML или CSS-файлу, вы все равно должны знать достаточно, чтобы понять, возможен ли ваш дизайн (или, если на то пошло, возможно ) в качестве веб-сайта для вашей целевой аудитории.
Шона

2

Я думаю, что веб-дизайнеры должны знать HTML / CSS - даже если он ограничен только основами - чтобы иметь возможность создавать веб-дизайны и веб-интерфейсы, которые работают на среде.

Веб-дизайнеры могут решить не писать HTML / CSS сами, но знание того, как работает разметка и CSS, необходимо для веб-дизайнера. Веб-дизайнерам, возможно, не нужно быть ниндзя HTML / CSS, но им полезно знать (по крайней мере), как их веб-макеты преобразуются в веб-сайт.


1

Нужно ли веб-дизайнерам уметь писать код?

Да, веб-дизайнер должен иметь дело с программным обеспечением, таким как Adobe Photoshop, Illustrator и InDesign, чтобы создать дизайн для Интернета. Тогда этот дизайн имеет дело с кодированием, чтобы сделать это онлайн. И для этого очень важно, чтобы веб-дизайнер понимал компоненты этого дизайна для представления в виде кодирования. Для этого они должны обладать знаниями кодирования, не полностью понимая, но с основами.


0

Лично все зависит от ваших навыков и требований. Умение быстро учиться и понимать вещи. Требования к финансам. Чтобы чему-то научиться, нужно время, а это на время убьет вашу производительность.

Так что если у вас есть много времени, чтобы убить, идите вперед и научитесь кодировать.

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.