Каким должен быть ваш веб-сайт? обсудите план и дизайн веб-сайта, прежде чем приступить к написанию кода, в том числе "Какую информацию будет содержать мой веб-сайт?" "Какие шрифты и цвета я хочу использовать?" "Что будет делать мой сайт?"
Перво-наперво: планирование
Перед тем как делать что-то, вам нужны идеи. Что ваш веб-сайт должен фактически делать? По существу, ваш веб-сайт может делать все, что угодно, но для вашей первой попытки, вы должны придерживаться простых вещей. Мы начнем с создания простой веб-страницы, содержащую заголовок, изображение и несколько параграфов.
Для начала, вам будет нужно ответить на следующие вопросы:
- О чем ваш веб-сайт? Вам нравятся собаки, Нью-Йорк или Pacman?
- Какую информацию вы предоставляете о предмете? Напишите заголовок и несколько параграфов, и подумайте над изображениями, которые вы хотите показать на своей странице.
- Как будет выглядеть ваш веб-сайт, в простых терминах высокого уровня. Какой цвет фона? Какой вид шрифта будет уместен: деловой, мультяшный, жирный и кричащий или тонкий?
Примечание: Комплексные проекты нуждаются в детализированных руководствах, которые включают все детали цветов, шрифтов, расстояния между элементами на странице, соответствующий стиль письма и так далее. Их иногда называют руководствами по проектированию или бренд-бук, вы можете увидеть пример в Руководство Firefox OS.
Сделайте набросок вашего дизайна
Затем, возьмите ручку и бумагу и сделайте примерный набросок того, как вы хотите, чтобы выглядел ваш сайт. Для вашей первой веб-страницы должен получиться небольшой набросок, и вы должны взять это в привычку. Это действительно помогает, и вам не нужно быть Ван Гогом!
Примечание: Даже в реальных, сложных веб-сайтах, команда разработчиков обычно начинает с наброска на бумаге и потом строит цифровые макеты используя графические редакторы или веб-технологии.
Веб-команда часто включает в себя пару графических дизайнеров и дизайнера с опытом взаимодействия (user-experience (UX) designer). Графические дизайнеры, очевидно, работают вместе над визуализацией веб-сайта. UX дизайнеры играют более абстрактную роль, обращаясь к тому как пользователи будут пользоваться и взаимодействовать с веб-сайтом.
Выберите свои активы
На данном этапе, неплохо начать собирать весь контент воедино, который в конечном итоге будет располагаться на вашей веб-странице.
Текст
У вас должен быть текст, разбитый на заголовки и параграфы. Придерживайтесь этого правила.
Цветовая схема
Чтобы выбрать цвет, перейдите в инструмент выбора цвета и выберите цвет, который вам нравится. Когда вы щёлкните по цвету, вы увидите странный код из шести цифр, например, #660066. Это называется шестнадцатеричный код (hex(adecimal) code) и он представляет ваш цвет. Скопируйте это код куда-нибудь прямо сейчас.
Изображения
Чтобы выбрать изображение, перейдите в Google Картинки и найдите что-нибудь подходящее.
- Когда вы найдете нужное изображение, которое хотели, щёлкните по изображению.
- Нажмите кнопку В полном размере (View image).
- На следующей странице, правым щелчком мыши на изображении (Ctrl + клик на Mac), выберите Сохранить изображение как... (Save Image As...), и укажите место для хранения вашего изображения. В качестве альтернативы, скопируйте адрес изображения из адресной строки браузера для последующего использования.
Примечание: Большинство изображений в Интернете, использованных в Google Картинках имеют авторские права. Для снижения вероятности нарушения авторских прав, используйте фильтр лицензии Google. Для этого: 1) кликните на Инструменты поиска (Search tools), затем на 2) Права на использование (Usage rights):
Шрифт
Чтобы выбрать шрифт:
- Перейдите на Google Fonts и прокрутите список вниз, пока не найдете тот шрифт, который вам понравится. Вы так же можете использовать элементы управления слева для дальнейшей фильтрации результатов.
- Щёлкните по кнопке Add to collection рядом со шрифтом, который вы хотите выбрать.
- Щёлкните по кнопке Use на панели в нижней части страницы.
- На следующей странице прокрутите вниз к разделам 3 и 4, и скопируйте строки кода Google для последующего сохранения в вашем текстовом редакторе.
