20+ ресурсов и советов для начинающих веб дизайнеров

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

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

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

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

HTML и CSS

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

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

Здесь будет некоторый текс, состоящий из двух предложений. Это второе предложение.

CSS – это «каскадная таблица стилей». CSS применяется для того, чтобы добавлять стили и форматировать элементы веб-страницы. Если HTML – это каркас вашего дома (фундамент, балки, кирпичи), то CSS – это оформление (краска, фурнитура, декор). Концепция CSS заключается в добавлении специальных определений в HTML теги. Например, так:

p {
color: #0000ff;
font-size: 12px;
margin-bottom: 18px;
}

Код, написанный выше, назначает всем текстам параграфов синий цвет шрифта (цвет с кодом #0000FF), 12 размер шрифта и отступ 18 перед каждым параграфом.

Дополнительные источники:

• W3Schools – отличный сайт для изучения HTML и CSS
• W3C Validator – средство для проверки HTML и CSS кодов для того, чтобы убедиться, что они соответствуют стандартам программирования.
• A List Apart – прекрасный сайт с информацией о web-дизайне и особом упоре на web-стандарты
• Net Tuts – отличный источник учебных пособий для разработчиков
• Designing With Web Standards – одна из тех книг по web-дизайну, которую должен прочесть каждый. Ее автор – Джеффри Зельдман – считается отцом web-стандартов
• CSS Zen Garden – занимательный сайт о CSS. Здесь вы можете узнать о том, какие возможности открываются перед разработчиками CSS.

Photoshop and Fireworks

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

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

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

Специфика дизайна для интернета

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

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

Сеточный Дизайн — процесс выравнивания элементов страницы в невидимые выровнянные ячейки/таблицы, которые обеспечивают эстетический вид.

• TheGridSystem.org — отличный список ресурсов
• 960 Grid System — дизайн и разработка сайтов, базирующихся на 960 пиксельной сетке

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

• I Love Typography
• 6 способов улучшить свою веб типографию
• TypeKit — платная услуга для использования дизайнерских шрифтов

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

• UX Booth
• UX Magazine
• Usability Post

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

• Creattica
• Unmatched Style
• The Best Designs

Система управления контентом

После того как у вас появится четкое понимание основных принципов веб-дизайна, у вас могут появиться проекты, которые требуют «Систему управления контентом» (CMS). Эти системы обеспечивают возможность управлять веб-сайт контентом, используя админ-интерфейс, а не на редактирование програмного кода.

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

Лучшая рекомендация — сосредоточиться на 1-2 CMS:

• WordPress
• Drupal
• ExpressionEngine
• Magento
• Joomla

Для запуска каждого веб сайта следует протестировать свой сайт в разных интернет браузерах и исправить все баги. Один из исключительно полезных инструментов для нахождения и исправления багов структуры страницы — FireBug. FireBug позволяет проверить HTML и CSS любой веб-странице. Вы можете настроить код на лету и мгновенно определить области в коде, которые необходимо отредактировать.

Удачи Вам!