Блог о дизайнеВидео6 шагов в генеральном процессе изготовления сайта

6 шагов в генеральном процессе изготовления сайта

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

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

 

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

 

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

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

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

Что говорит о том, что давайте начнем!

1. Учиться

Как вы думаете, это самый важный шаг процесса веб-дизайна? Планирование? Проектирование? Кодирование?

Угадайте, еще раз.

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

Почему? Это просто.Чем больше вы знаете о том, что вам нужно выполнить, тем лучше Ваши шансы создания успешного сайта.

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

Буллсай

Так как же оценка Буллсай в качестве веб-дизайнера? Перед тем, как идти дальше, нужно определить, какие удары Буллсай в проект средств.

Как веб-дизайнер, попав Буллсай дает вашим клиентам, что они хотят - это то, что они платят за.

Что клиенты хотят варьируется от случая к случаю.Так как вы aren'ta внимание читателя (нет, вы не), вы должны активно выяснить, чего они хотят.

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

Краткие Creative

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

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

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

Какие вопросы вы должны спросить в Вашей творческой кратко?Как минимум, нужно выяснить:

  • целевой аудитории клиента
  • Их основных и второстепенных целей для сайта
  • Текущий брендинг характеристики
  • Бюджет
  • Сроки, необходимые для удовлетворения

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

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

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

2. План

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

Ваша конструкция стратегии для каждого сайта вы должны быть ручной работы, чтобы соответствовать клиента видения (если вы разрабатываете сайт для себя, то вы бы квалифицировать в качестве клиента ).

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

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

Научных исследований и заметок

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

Смотрите, кто приходит первым в поиске Google и попытаться выяснить, почему. В течение 10 минут, вы должны быть в состоянии начать склеивания начала Вашего проекта плана.

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

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

Эскиз и макет

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

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

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

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

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

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

3. Дизайн

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

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

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

Стадии проектирования себя очень просто. Просто откройте Photoshop (или создания графики инструмент по выбору) и начните привлекать вашего оригинал-макет для жизни. Пот деталей. Сделать Pixel Perfect. Даже если вы чувствуете, как проект, который вы работаете более скучным, что глядя на стену за 24 часов подряд, поместите все в нее. Ваши клиенты заметят, и вы будете гордиться работой вы сделали.

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

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

4. Код

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

Начнем с базового шаблона

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

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

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

Выложить Основные разделы и содержание

Начало дележе вашей HTML / CSS, включив основных разделов (ваш главный <div> ) для своего колонтитулов и содержимое области.

Затем начать добавлять текст и изображения содержания. Цель состоит в том, чтобы сохранить разметку как семантические возможности, чтобы каждый элемент имеет смысл.

Избегайте divitis - акт об использовании слишком много DIV-ов. Например, вам не нужно Div просто содержать логотип. Попробуйте использовать <h1> или <p> вместо этого - она может быть стиле точно таким же образом (например, делая их в блок элементов, используя display собственности CSS).

Проверка и испытания

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

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

Использование Firebug и YSlow для отладки вашего сайта и убедитесь, что ваша работа работает на оптимальной скорости .

И последнее: не забывайте выполнять Google Analytics или ваш любимый аналитики альтернативных поэтому вы не пропустите отслеживания статистики в большой запуска .

5. Запуск

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

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

При разработке нового сайта в песочнице или местных условий развития , то "будет жить" означает FTP'ing файлы на сервере.

6. Поддерживать

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

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