Каковы этапы разработки веб-сайта?

Открытие и масштаб

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

Отображение контента

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

Пример:

Макет

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

Пример:

Плитка стиля

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

С целью плитки вы не передаете клиенту дизайн и ставите себя в угол «это не похоже на дизайн, который вы мне дали». Кроме того, если вы планируете сайт, нет причин тратить время на его макетирование в Photoshop для адаптивности, потому что вы потратите много времени на проектирование для определенных устройств и т. д. и т. д. Если вам НУЖНО разработать полный сайт, я бы рассмотрите Illustrator, как уже говорилось, за его SVG и возможность экспортировать элементы для вашего сайта по сравнению с Photoshop. В какой-то степени вы даже можете использовать InDesign для форматирования контента, но я бы использовал Photoshop только для обработки изображений, и если я собираюсь это сделать, я, вероятно, выберу ImageMagick. Я поднимаю плитку стиля на уровень дальше, чем другие, и кодирую ее на одной странице, поэтому я выбил предварительное задание своего мастера..cssфайл.

Каркас

Я предпочитаю развертывать проектирование в браузере, если вы не заметили. В настоящее время я могу использовать Illustrator для эскиза сайта или макета сайта, но я обычно развертываю файл шаблона по умолчанию .cssс не более чем 6 цветами в оттенках серого, и я кодирую все для структуры сайта, поскольку большинство людей не могут получить представление о дизайне и захотеть поиграть с чем-нибудь. Иногда я делаю это на PHP, так как его проще развернуть для CMS. Затем я разработаю простой поддомен с ПРЕДОСТАВЛЯЕМЫМИ клиентом шрифтами в черно-белом виде, чтобы присутствовала вся функциональность сайта, и они могли ее использовать. Поскольку я не тратил время на добавление всего содержимого или цветов (поскольку я использую фиктивную текстовую ссылку: «Альтернатива Lorem Ipsum (фиктивный текст) для веб-сайтов") Я могу легко модифицировать любые имеющиеся изменения, если им не нравится определенный элемент на основе устройства.

Раскрась и наполни

Как только клиент утвердит структуру сайта и функциональность, я напишу остальную часть CSS и добавлю запрошенную анимацию или особенности JavaScript. Поскольку у меня есть одобренная плитка стиля, и если я правильно ее разработал, я могу просто скопировать CSS и установить.

Отладка, отладка, отладка

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

Подготовка

Обычно я делаю ставки в своем кратком/котировочном обучении на сайтах CMS. Некоторые пользователи понятия не имеют, что они делают, поэтому я ставлю ставку на полдень с часовым дополнением для дополнительных вопросов, чтобы убедиться, что они что-то рассмотрели, или убедиться, что они используют мой дизайн с максимальной отдачей.

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

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

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

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

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

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

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

Удачи.

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

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

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

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

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

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

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

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

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

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

Шаг 1: Получение вдохновения:

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

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

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

Разные дизайнеры по-разному подходят к вайрфреймам и их преобразованию в визуальные эффекты или код.

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

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

Шаг 3: Набросок:

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

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

Шаг 4: Каркас:

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

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

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

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

Выберите свои инструменты

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

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

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

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

Определите макет с помощью блоков

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

Чего следует избегать при вайрфрейминге:

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

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

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