Это тема с лучшей практикой.Можно ли начать компоновку веб-сайта с помощью макета фотошопа?
Я видел это как предпочтительный метод для некоторых веб-разработчиков. Вместо того, чтобы делать макет CSS с нуля, они сначала запускают макет фотошопа, а затем декодируют его в CSS.
Что вы думаете об этом подходе?
Лучший для всех,
Быстро. Вот почему я всегда использую этот метод. Вы не хотите тратить время на создание кросс-браузера CSS, пока вы на самом деле не настроитесь на макет.
Agile methodology предложит что-то легко модифицированное в консультации с клиентом. Дейв Томас в Agile Web Development with Rails предлагает наброски на бумаге. Но что-то должно быть лучше, чем чистить прямо на ручной CSS, если вы действительно не знаете, чего хотите.
Я думал о высказывании «писанину, возможно, не режет его для официальной презентации», но огромная толпа SO бить меня в комментариях ...
Если вы продуктивную таким образом, почему не? Не всем удается прекрасно представить свой веб-сайт, поскольку они печатают кучу угловых скобок.
Более серьезно поставлено: это ваша работа, поэтому ваша обязанность заключается в том, чтобы сделать это таким образом, чтобы вы могли эффективно выполнять это.
Макеты великолепны, но я не знаю, действительно ли Photoshop - это самое первое, что вы хотели бы попробовать для этой цели - в самом начале, когда вы просто пытаетесь получить логическую схему для различные страницы сайта (до его переработки с точки зрения внешнего вида & c), доска с маркерами сухого стирания и надписями для заметок обеспечивает очень быстрые повторные макеты для раннего мозгового штурма. Когда есть разумное согласие по одному (или очень немногим) возможным вариантам информации, , то визуально более точные инструменты входят в игру.
BTW, просто не забудьте сфотографировать доску перед ее заменой (любой достойный сотовый телефон будет делать, вы не пытаетесь получить высокое качество здесь ;-) всякий раз, когда есть идеи или предложения, которые вы можете захотеть пересмотреть или задумайтесь в будущем!
Ahh, старая 3,2-мегапиксельная версия Git. –
Это отличное предложение! – JasonWyatt
@ Джейсон, рад, что тебе понравилось! –
При прототипировании важно правильно выбрать верность. This article from BoxesAndArrows обеспечивает хорошее введение в различные варианты и их использование.
мне особенно нравится эта строка за Bill Buxton которой статью цитирует:
Там нет такого понятия, как высокая или низкой точности, неподходящая верность.
В this TechTalk by the Facebook Design Team, они упоминают о том, как они используют Photoshop в процессе их проектирования (IIRC это где-то на полпути через, но я не могу передать через видео).
Большинство веб-дизайнеров работают так.
Многие программисты просто считают это пустой тратой времени.
У этого есть преимущества и недостатки.
Преимущества:
Многие художники-графики фотошоп/обращал внимания иллюстратор больше, чем они делают Dreamweaver.
Клиент получает Предварительный просмотр конечного продукта, который работает везде: mac, pc, firefox, т.е. сафари, что угодно. Отправка предварительного просмотра html на ранних этапах разработки с использованием разработчиков firefox и клиентов с использованием MSIE всегда вызывает проблемы.
И не думайте, чтобы быть на умной стороне, нацарапанный MSI-движок html. Начиная с нестандартного html и преобразования в стандарт, это более болезненно, чем для других.
Есть еще один улов: Многие клиенты веб-сайта имеют Mac и используют Safari. Веб-комиссары, как правило, имеют более сильный вкус к графике, чем средний, поэтому шанс столкнуться с маньяками Mac выше в этом секторе, чем в других.
Дополнительные альтернативы проекта могут быть подготовлены, тратя меньше времени на каждый из них. Это может быть драматическим преимуществом при работе с мрачными облаками руководителей, не имеющих назначенных лиц, принимающих решения на стороне клиента. Альтернативные макеты будут проходить рука об руку, пока не будет достигнут общий консенсус по одному проекту или другому.
Недостатки:
«Резка» графический дизайн в HTML становится дополнительная работа, и это не ясно, кто собирается платить за это дополнительное время.
Относится к графическим и жестким рабочим процессам проектирования. Клиенты заранее согласны с предварительным просмотром, и это то, что они получают по контракту. Каждая графическая модификация означает, что деньги, поведение и программирование вместо этого имеют тенденцию не быть четко определенными или худшими, плохо определены макетом.
Квест для пиксель идеальный кросс-браузерный привязчик к макету может свести вас с ума. Если вы согласились на конкретный жесткий дизайн с клиентом, это может стать серьезной проблемой для продолжения.
Dirty CSS tricks shoes в в ваш дизайн. Используя макет HTML, клиент одобрил бы дизайн, управляемый кодом с меньшими трюками.
Во всяком случае, я не хотел бы предложить фотошоп для макета, но Inkscape. (или иллюстратор, если вы поклоняетесь адебу, сжигая груды денег в магические круги в полночь)
Сценарий написания тоже хорош, обсуждая договор с клиентом.
Я предпочитаю, чтобы карандаш и бумага были на ощупь, а я веб-камера снимаю идеи для архивирования и пересылки электронной почты. Когда дело доходит до наброска, кто-то делает , что кажется более естественным.
Не делайте и не полагайтесь на примеры примеров сайтов, и скриншоты для графической ссылки всегда являются опцией.
Я согласен с этим сообщением, сохраняю одно очко. Inkscape просто не заменит Illustrator. Мне больно, что нет достойной альтернативы иллюстратору с открытым исходным кодом. – SingleNegationElimination
Согласен, что иллюстратор делает больше, чем inkscape. Перспективы и цвета Pantone ™, чтобы сказать о первых двух отличиях, которые приходят на ум. Но для веб-прототипов он, вероятно, имеет все необходимые инструменты. – ZJR
Лично, и в каждой фирме webdev, над которой я работал, я всегда издевался над фотошопом. Прыжки прямо в CSS и разметка - это скорее подход снизу вверх и имеет смысл для многих программистов, но в веб-разработке вы должны иметь в виду, что есть эстетика для рассмотрения и творческое руководство. Недостаточно того, что ваш продукт функциональный, ему нужен вход профессионального креатив-директора/графического дизайнера, чтобы сделать продукт приятным для просмотра и использования.
По моему опыту, проблема всегда заключалась в борьбе с негибкостью членов команды. Графические дизайнеры, которые эстетически ориентированы и отказываются компрометировать свою целостность дизайна; что иногда приводит к невозможным или чрезвычайно сложным и не-семантическим макетам. Разработчики, которые категорически отказываются компрометировать целостность своего кода, где есть работоспособное решение, которое может быть немного менее изящным. Ключ состоит в том, чтобы создать творческую команду, которая хорошо знакома с CSS, а также то, что невозможно, и инженерную команду, которая ценит важность дизайна и эстетики.
В моей внештатной жизни (имея возможность работать в обоих лагерях), мне гораздо легче сделать макет в Photoshop, потому что я знаю, что могу и чего не могу. И макеты фотошопов намного легче изменить на обратной связи с клиентом, чем CSS и разметки. Кроме того, если вы можете показать своему клиенту макет, они чувствуют себя более безопасными, потому что знают, что их деньги идут в хорошо спланированный проект с определенным направлением.
Надеюсь, это поможет!
Я программист, который хорошо знает html и css. Я могу использовать графическую программу для ее основных функций, но создание полноценного графического веб-сайта - это не мое дело.
Я предлагаю графическому дизайнеру использовать графическую программу для создания красивого макета, а не код сайта вручную в html и css.
Это работает для меня и дает моим клиентам дизайн, который им нравится (так как графический дизайнер всегда будет выглядеть намного красивее, чем большинство веб-программистов).
Бумажная строчка отлично подходит для мозгового штурма, но клиент обычно хочет увидеть что-то немного более полированное. –
Да ... «сеть полна анекдотов о том, как величайшие веб-проекты были сделаны на спине салфеток в какой-то жирной ложке. –