Обзываю всех веб дизайнеров :)
Я начинаю делать сайт для малого бизнеса в моем родном городе, и это будет мой первый правильный проект. Я сделал сайты в прошлом, что я сделал для отдыха. Я свободно владею HTML и CSS. У меня есть требования клиентов и то, что он хочет на веб-сайте и т. Д. Я застрял на том, какие шаги я должен следовать после завершения требований. Я искал в Интернете и не смог найти ничего подходящего для моих вопросов, потому что информация устарела.
Мои вопросы:
Что такое рабочий процесс веб-дизайнеров в 2014 году? (Потому что все меняется так быстро) Я создаю каркасы сайта, а затем разрабатываю их в фотошопе, а затем кодирую дизайн?
Я просто хочу знать, как работают процессы «дизайна», например, какие шаги мне нужно предпринять, чтобы создать сайт.
Заранее спасибо.
источник
Ответы:
Открытие и Область
Сядьте с клиентом, чтобы определить, цели, задачи и потребности. Вы должны были составить цитату из предназначенного сайта, а также обсудить время оборота. Убедитесь, что написали все, что не можете предоставить. Вам необходимо выяснить, как сайт будет структурирован. Такие как адаптивный, только для планшета и телефона, только для настольного компьютера, только для настольного компьютера и планшета. Вам необходимо выяснить, является ли проект многофазным объектом проектирования, например, клиент захочет выпустить версию для настольного компьютера и позже захочет создать полноценное мобильное приложение.
Отображение контента
Надеюсь, вам был предоставлен весь контент, который требуется для сайта. Вы должны наметить сайт и его функциональность. Решите, как масштабируемость для будущих модификаций, решите, как код может быть структурирован, если это для CMS или приложения.
Пример:
Макет
После того, как ваше «дерево» или «карта» будет заполнено с одобрения клиента, я буду работать с ручным эскизом или макетом. По этой теме возникает большое количество вопросов, если вы выполните поиск в правом верхнем углу
Пример:
Стиль Плитка
Разработка в Photoshop для веб-дизайна побеждает цель сегодняшнего возраста. Я не знаю многих людей, которые все еще используют Photoshop, потому что за то время, которое у вас ушло на создание красивой кнопки, вы могли бы потратить столько же времени и закодировать в браузере. Если мне нужно использовать приложение по специальному запросу, я разверну его в Illustrator или InDesign. Я бы посоветовал перейти к разработке стиля плитки, таких как:
С целью плитки вы не даете клиенту дизайн и не ставите себя в угол «это не похоже на дизайн, который вы мне дали». Кроме того, если вы планируете сайт, нет смысла тратить время на его адаптацию в Photoshop, потому что вы потратите много времени на разработку определенных устройств и т. Д. И т. Д. Если вы ДОЛЖНЫ создать полный сайт, я бы Рассмотрите Illustrator, как указано выше, его SVG и возможность экспортировать элементы для вашего сайта по сравнению с Photoshop. В некоторой степени вы могли бы даже использовать InDesign для форматирования контента, но я бы использовал Photoshop только для манипулирования изображениями, и если я собираюсь это сделать, я, вероятно, сверну с ImageMagick. Я беру стиль плитки дальше, чем другие, и кодирую его на одной странице, поэтому я выполнил предварительное задание своего мастера
.cssфайл.Каркасный
Я предпочитаю размещать дизайн в браузере, если вы не заметили. Сейчас я могу использовать Illustrator для эскиза сайта или макета сайта, но обычно я развертываю
.cssфайл шаблона по умолчанию, содержащий не более 6 цветов в оттенках серого, и я все кодирую для структуры сайта, так как большинство людей не могут получить понимание дизайна и хотите что-то играть. Иногда я иду вперед и делаю это на PHP, так как его легче развернуть для CMS. Затем я разработаю простой субдомен с ПОКАЗАННЫМИ шрифтами клиента черно-белым способом, чтобы была доступна вся функциональность сайта, и они могли его пройти. Поскольку я не потратил время на добавление всего содержимого или цветов (потому что я использую фиктивную ссылку на текст: «Альтернатива Lorem Ipsum (фиктивный текст) для веб-сайтов»") Я могу легко изменить любые изменения, которые присутствуют, если им не нравится определенный элемент, основанный на устройстве.Раскрасить и содержание
Как только клиент подтвердит структуру сайта и его функциональность, я напишу остальную часть CSS и добавлю запрошенную анимацию или особенности JavaScript. Так как у меня есть утвержденный тайл стиля, и если я его правильно разработал, я могу просто скопировать CSS и установить его.
Отладка, Debug, Debug
Последний шаг перед выходом клиента - отладка и убедитесь, что мой код работает без ошибок. Если все правильно, у меня должно быть плавное освобождение. Этот шаг также включает тестирование обслуживания и нагрузочное тестирование, если это то, что вы оценили и предложили. Лично я твердо верю, что любой дизайнер должен знать о том, что они разрабатывают, точно так же, как вы, надеюсь, будете делать, когда дело доходит до полиграфического дизайна. Если клиент не может позволить себе настоящего хостинг-провайдера, он может ограничить производительность сайта, и все они скажут, что это ваша вина, и вы сделали что-то не так.
Подготовка
Обычно я участвую в брифинге / цитате на сайтах CMS. Некоторые пользователи не имеют ни малейшего представления о том, что они делают, поэтому я сделаю ставку на полдня с дополнительными часами для ответов на вопросы, чтобы убедиться, что все решено или что они используют мой дизайн с максимальной отдачей.
Некоторые другие темы, которые могут помочь, поскольку вы задаете основной вопрос:
источник
Я также веб-дизайнер, который только начал работать в этой области. Я уже сделал несколько проектов. Для меня мой рабочий процесс выглядит так:
Это когда я собираю всю необходимую информацию, включая ожидаемую дату завершения, составляю список необходимых вещей от моего клиента и т. Д.
В настоящее время я нахожу дизайн или два или три, которые подходят для моего клиента, и делаю макеты в Photoshop, используя их брендинг, цвета, стили и т. Д. Я отправляю их и обсуждаю, что следует изменить / оставить на каждом из них. Позвольте клиенту решить, какой дизайн ему больше нравится.
ПРИМЕЧАНИЕ. Если вы используете WordPress, вы можете перейти на сайт http://themeforest.com.и проверить тонны тем. Оттуда вы можете делать скриншоты и делать макеты, затем вы также можете предоставить живое демо (без настроек клиента, очевидно). Если вашему клиенту нравится один из этих макетов, вы приобретаете тему и можете изменять ее по своему усмотрению. Это то, что я склонен делать. Я никогда не использую тему (или что-либо еще в этом отношении) без надлежащего кредита / оплаты / и т.д. первоначальному создателю. :)
Затем я наконец приступаю к разработке сайта в среде разработки (НЕ живого веб-сайта клиента, а субдомена, если это возможно - IE dev.clienturl.com). Я отправляю обновления своему клиенту каждый раз, когда чувствую, что страница приближается чтобы завершить, таким образом, если есть проблемы, мы можем исправить их сразу.
Даже после того, как веб-сайт вашего клиента заработал, и он, кажется, доволен и не попросил дальнейших изменений, обязательно продолжайте. Просто убедитесь, что все работает так, как должно, согласно их ожиданиям. Я также рекомендую написать небольшой опрос для каждого клиента, чтобы завершить его после того, как веб-сайт начнет работать в течение недели. Вы можете использовать комментарии здесь как отзывы на вашем сайте.
Если вам нужна помощь с чем-либо, свяжитесь со мной через мой сайт. У меня есть тонны ресурсов, которыми я могу поделиться с вами такими вещами, как контракты, пост-продакшн-опросы, первоначальные анкеты и т. Д. Http://anchorsawaydesigns.com/
источник
постарайтесь с самого начала получить как можно больше информации, затем используйте поэтапный подход, аналогичный приведенному ниже. Старайтесь как можно больше информировать своего клиента, так как вы не захотите разрабатывать что-то изолированно, а потом узнаете, что это не соответствует их ожиданиям. Если вы инвестируете в хороший инструмент для создания каркасов (я использую balsamiq), то половина работы для вас сделана.
Удачи.
источник
Привет, чувак, приятно, что ты начинаешь новый проект.
Шаги для вашей потребности:
Сначала вы решаете, какую технологию вы хотите использовать в своем проекте, я имею в виду прокрутку одной страницы, нескольких страниц и т. д.
Затем соответственно подготовьте эскиз для вашего макета и рабочего процесса.
Теперь начните разрабатывать макет с помощью инструмента, который вы любите делать с фотошопом, но вы можете использовать его по своему вкусу.
После этого хорошо, что вы показываете свой макет клиенту для любых изменений, т.е. цвет, шрифты и т. д., чтобы вы могли это не сделать головную боль во время HTML.
Теперь, после подтверждения клиентов. Пришло время начать кодирование с Html и Css.
После этого пришло время передать его разработчику для дальнейшего кодирования базового языка, т.е. PHP, .Net и т. Д.
Наслаждаться............
источник
В веб-индустрии для оптимизации процесса разработки выполняется проектирование, и перед тем, как окончательный дизайн будет представлен для дальнейшей разработки или тестирования, необходимо выполнить несколько других промежуточных этапов:
Шаг 1: Вдохновение:
Если вы постоянно наблюдаете за тем, что другие дизайнеры или сайты делают для своих каркасов, вы постепенно поймете, как каркас помогает организовать информацию для экрана.
и для этого вы можете использовать инструмент "Wirify" для создания каркасов, просто добавьте большую ссылку к своей закладке и перейдите на любой нужный сайт, нажмите на закладку, и вы увидите, что сайт превращается в каркас.
Шаг 2: Разработка вашего процесса:
Разные дизайнеры по-разному подходят к каркасному дизайну и его переводу в визуальные элементы или код,
Здесь не просто дизайнер выбирает путь, по которому следует идти, иногда клиенты предпочитают делать макеты напрямую, а некоторые предпочитают более систематические,
Эскиз => Каркас => Макет => Код
Шаг 3: Эскиз:
Теперь, когда у вас есть вдохновение, есть некоторые грубые идеи и планирование подхода, всегда хорошо начинать с эскизов, не важно, насколько хорошо вы управляете мышью / стилусом или чем-то еще, они не могут побить бумагу, карандаш простота.
Ручная зарисовка на бумаге - всегда хорошая отправная точка для любого дизайнера. Это обеспечивает быстрый и простой способ сосредоточиться и организовать. Если вы очень аккуратно работаете с эскизами, вы можете использовать это в качестве окончательного каркаса.
Шаг 4: Создание каркаса:
Создание каркаса является одним из первых шагов, которые вы должны сделать перед проектированием.
Каркас помогает вам упорядочить и упростить элементы и контент на веб-сайте и является важным инструментом в процессе разработки.
Каркас - это, по сути, визуальное представление макета контента в дизайне .
Как и фундамент здания, оно должно быть прочным, прежде чем вы решите, стоит ли наносить ему дорогой слой краски.
Что нужно учитывать при создании каркаса:Выбрать инструменты
Вот список из 10 бесплатных инструментов каркаса для дизайнеров.
Настройка сетки
Сетки очень необходимы для достижения симметричной и параллельной конструкции.
всякий раз, когда вы смотрите на хорошо спроектированный веб-сайт, вы обнаруживаете, что его содержание начинается с определенной точки тела и заканчивается в одной точке, управление ими осуществляется с помощью гридов.
Определить расположение с коробками
Определить информационную иерархию с типографикой
Чего следует избегать при создании каркаса:
- Слишком много всего происходит на странице.
- Акцент на цвет и дизайн
- Слишком много деталей
Преимущества каркасного моделирования:Создание каркаса дает клиенту, разработчику и дизайнеру возможность критически взглянуть на структуру веб-сайта и позволяет им легко вносить изменения на ранних этапах процесса.
Wireframing приносит следующие ключевые преимущества:
Шаг 5: Макеты / Визуальные:
Теперь окончательный каркас может быть преобразован в окончательный макет или визуальный:
Некоторыми распространенными инструментами для Mockuos являются Adobe Photoshop, Corel Draw и очень новый, но уже популярный Sketch и т. Д.
Что нужно учитывать при конвертации в макет:Информационная Иерархия
Возможно, вам придется подумать о том, что следует выделить, а что - к дополнительной информации, и цветовое решение, перестановка и типографика решаются так.
Типография
Выберите визуально привлекательную и читаемую типографику для веб-сайта с правильной комбинацией альтернатив. Размер шрифта, вес и цвета играют решающую роль в удобочитаемости.
Цветовые схемы
Цветовая схема, представляющая идентичность бренда и психологические цвета: красный для опасности, зеленый для успеха и т. Д.
Шаг 6: Прототипы :
Прототип является ранним образец, модель или выпуск продукта , построенного для проверки концепции или процесса или действовать как вещь , чтобы быть воспроизведены или извлеченные из.
Каркасные структуры обрабатывают структуру, макеты обрабатывают визуальные эффекты, а прототипы управляют удобством использования (в веб-приложениях).
Изготовлен прототип продукта, а затем он протестирован и POC (Prof of concept) готов. Теперь мы можем перейти к реальному продукту (очевидно, если не требуется никаких изменений)
Ссылка на оригинальную статью с изображениями и другие ссылки
источник