MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

Перво-наперво: планирование

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

Для начала, вам будет нужно ответить на следующие вопросы:

  1. О чем ваш веб-сайт? Вам нравятся собаки, Нью-Йорк или Pacman?
  2. Какую информацию вы предоставляете о предмете? Напишите заголовок и несколько абзацев, и подумайте над изображениями, которые вы хотите показать на своей странице.
  3. Как будет выглядеть ваш веб-сайт, в простых терминах высокого уровня. Какой цвет фона? Какой вид шрифта будет уместен: деловой, мультяшный, жирный и кричащий или тонкий?

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

Сделайте набросок вашего дизайна

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

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

Веб-команда часто включает в себя пару графических дизайнеров и дизайнера с опытом взаимодействия (user-experience (UX) designer). Графические дизайнеры, очевидно, работают вместе над визуализацией веб-сайта. UX дизайнеры играют более абстрактную роль, обращаясь к тому как пользователи будут пользоваться и взаимодействовать с веб-сайтом.

Выберите свои активы

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

Текст

У вас должен быть текст, разбитый на заголовки и параграфы. Придерживайтесь этого правила.

Цветовая схема

Чтобы выбрать цвет, перейдите в инструмент выбора цвета и выберите цвет, который вам нравится. Когда вы щёлкните по цвету, вы увидите странный код из шести цифр, например, #660066. Это называется шестнадцатеричный код (hex(adecimal) code) и он представляет ваш цвет. Скопируйте это код куда-нибудь прямо сейчас.

Изображения

Чтобы выбрать изображение, перейдите в Google Картинки и найдите что-нибудь подходящее.

  1. Когда вы найдете нужное изображение, которое хотели, щёлкните по изображению.
  2. Нажмите кнопку В полном размере (View image).
  3. На следующей странице, правым щелчком мыши на изображении (Ctrl + клик на Mac), выберите Сохранить изображение как... (Save Image As...), и укажите место для хранения вашего изображения. В качестве альтернативы, скопируйте адрес изображения из адресной строки браузера для последующего использования.

Примечание: Большинство изображений в Интернете, использованных в Google Картинках имеют авторские права. Для снижения вероятности нарушения авторских прав, используйте фильтр лицензии Google. Для этого: 1) кликните на Инструменты поиска (Search tools), затем на 2) Права на использование (Usage rights):

Шрифт

Чтобы выбрать шрифт:

  1. Перейдите на Google Fonts и прокрутите список вниз, пока не найдете тот шрифт, который вам понравится. Вы также можете использовать элементы управления слева для дальнейшей фильтрации результатов.
  2. Щёлкните по кнопке Add to collection рядом со шрифтом, который вы хотите выбрать.
  3. Щёлкните по кнопке Use на панели в нижней части страницы.
  4. На следующей странице прокрутите вниз к разделам 3 и 4 и скопируйте строки кода Google для последующего сохранения в вашем текстовом редакторе.

Метки документа и участники

 Внесли вклад в эту страницу: gitzizou, Egokorok, BychekRU, Evgeny_Kurkin, NOSOROG, Unregistered45, dm_glazunov
 Обновлялась последний раз: gitzizou,