Какие шаги в разработке веб-сайта?

Обзываю всех веб дизайнеров :)

Я начинаю делать сайт для малого бизнеса в моем родном городе, и это будет мой первый правильный проект. Я сделал сайты в прошлом, что я сделал для отдыха. Я свободно владею 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. Некоторые пользователи не имеют ни малейшего представления о том, что они делают, поэтому я сделаю ставку на полдня с дополнительными часами для ответов на вопросы, чтобы убедиться, что все решено или что они используют мой дизайн с максимальной отдачей.

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

• В чем разница между каркасами и макетами?
• Как подарить клиенту макеты веб-дизайна?
• Каковы некоторые хорошие практики «макетирования» в веб-дизайне?

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

1. Начальная встреча по проектированию и разработке.
   Это когда я собираю всю необходимую информацию, включая ожидаемую дату завершения, составляю список необходимых вещей от моего клиента и т. Д.
   
2. Макеты PhotoShop
   В настоящее время я нахожу дизайн или два или три, которые подходят для моего клиента, и делаю макеты в Photoshop, используя их брендинг, цвета, стили и т. Д. Я отправляю их и обсуждаю, что следует изменить / оставить на каждом из них. Позвольте клиенту решить, какой дизайн ему больше нравится.
   ПРИМЕЧАНИЕ. Если вы используете WordPress, вы можете перейти на сайт http://themeforest.com.и проверить тонны тем. Оттуда вы можете делать скриншоты и делать макеты, затем вы также можете предоставить живое демо (без настроек клиента, очевидно). Если вашему клиенту нравится один из этих макетов, вы приобретаете тему и можете изменять ее по своему усмотрению. Это то, что я склонен делать. Я никогда не использую тему (или что-либо еще в этом отношении) без надлежащего кредита / оплаты / и т.д. первоначальному создателю. :)
   
3. Разработка
   Затем я наконец приступаю к разработке сайта в среде разработки (НЕ живого веб-сайта клиента, а субдомена, если это возможно - IE dev.clienturl.com). Я отправляю обновления своему клиенту каждый раз, когда чувствую, что страница приближается чтобы завершить, таким образом, если есть проблемы, мы можем исправить их сразу.
4. ВСЕГДА СЛЕДУЙТЕ ЗА ВЕРХОМ
   Даже после того, как веб-сайт вашего клиента заработал, и он, кажется, доволен и не попросил дальнейших изменений, обязательно продолжайте. Просто убедитесь, что все работает так, как должно, согласно их ожиданиям. Я также рекомендую написать небольшой опрос для каждого клиента, чтобы завершить его после того, как веб-сайт начнет работать в течение недели. Вы можете использовать комментарии здесь как отзывы на вашем сайте.

Если вам нужна помощь с чем-либо, свяжитесь со мной через мой сайт. У меня есть тонны ресурсов, которыми я могу поделиться с вами такими вещами, как контракты, пост-продакшн-опросы, первоначальные анкеты и т. Д. Http://anchorsawaydesigns.com/

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

1. Сбор требований
2. Wireframing
3. Дизайнерские макеты
4. Дизайн доработан
5. развитие
6. Хостинг

Удачи.

Привет, чувак, приятно, что ты начинаешь новый проект.

Шаги для вашей потребности:

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

2. Затем соответственно подготовьте эскиз для вашего макета и рабочего процесса.

3. Теперь начните разрабатывать макет с помощью инструмента, который вы любите делать с фотошопом, но вы можете использовать его по своему вкусу.

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

5. Теперь, после подтверждения клиентов. Пришло время начать кодирование с Html и Css.

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

Наслаждаться............

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

Шаг 1: Вдохновение:

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

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

Шаг 2: Разработка вашего процесса:

Разные дизайнеры по-разному подходят к каркасному дизайну и его переводу в визуальные элементы или код,

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

Эскиз => Каркас => Макет => Код

Шаг 3: Эскиз:

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

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

Шаг 4: Создание каркаса:

Создание каркаса является одним из первых шагов, которые вы должны сделать перед проектированием.

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

Каркас - это, по сути, визуальное представление макета контента в дизайне .

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

Выбрать инструменты

Вот список из 10 бесплатных инструментов каркаса для дизайнеров.

Настройка сетки

Сетки очень необходимы для достижения симметричной и параллельной конструкции.

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

Определить расположение с коробками

Определить информационную иерархию с типографикой

Чего следует избегать при создании каркаса:

• Слишком много всего происходит на странице.
• Акцент на цвет и дизайн
• Слишком много деталей

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

Wireframing приносит следующие ключевые преимущества:

Шаг 5: Макеты / Визуальные:

Теперь окончательный каркас может быть преобразован в окончательный макет или визуальный:

Некоторыми распространенными инструментами для Mockuos являются Adobe Photoshop, Corel Draw и очень новый, но уже популярный Sketch и т. Д.

Информационная Иерархия

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

Типография

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

Цветовые схемы

Цветовая схема, представляющая идентичность бренда и психологические цвета: красный для опасности, зеленый для успеха и т. Д.

Шаг 6: Прототипы :

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

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

Изготовлен прототип продукта, а затем он протестирован и POC (Prof of concept) готов. Теперь мы можем перейти к реальному продукту (очевидно, если не требуется никаких изменений)

Ссылка на оригинальную статью с изображениями и другие ссылки