Содержание

• Шагать
• Метод 1 из 2: 3 основных правила
• Метод 2 из 2: рекомендации
• Советы
• Предупреждения

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

Шагать

Метод 1 из 2: 3 основных правила

1. Правило 1:Слушай своего клиента. Возможно, вы разрабатываете «величайший веб-сайт в мире в истории Вселенной и за ее пределами» с насыщенным черным цветом, изысканными шрифтами и яркими художественными цветами для сайта, который кричит «исследуйте меня сейчас!» К сожалению, вашему клиенту нужна была оранжевая строка меню с ярко-розовыми и оранжевыми буквами. Вы уволены, и ваш лучший веб-сайт, на который клиент имеет права, находится где-то на их резервном диске, и никто его больше никогда не увидит.
   • Изучите фирменный стиль вашего клиента. Попросите клиента показать вам несколько любимых веб-сайтов. Это не только даст вам представление о том, что им нравится, но и подскажет несколько дизайнерских идей, о которых вы, возможно, даже не догадывались.
   • Если вы думали, что мы шутим насчет оранжевого и розового веб-сайта, подумайте об этом крутом и сложном сайте:
2. Правило №2:Знайте свою аудиторию и то, что они ищут, и соответствующим образом адаптируйте свой дизайн. Причина, по которой у людей есть веб-сайты, заключается в том, что они хотят, чтобы их видели другие люди. Он может быть информативным, коммерческим или развлекательным для определенной целевой аудитории. Ваша задача как дизайнера - знать, для кого вы разрабатываете, и держать их на странице, когда они попадают туда.
   • Вы можете подумать: «Если это хорошо выглядит, они останутся». Но это не обязательно так. Возьмем, к примеру, недвижимость. Вот сайт с чистым забавным дизайном. В нем много белого пространства, что придает открытость, яркие цвета и современный широкоформатный формат со ссылками на видном месте:
   • Теперь взгляните на этот подход к продаже недвижимости в том же районе: загроможденный и очень загруженный, тусклые цвета и покрытый рекламой.
   • Угадайте, какой из них лучше подходит для тех, кто ищет дом? Правильно, тот, где дома! Когда люди ищут «дома на продажу в Санта-Монике», им все равно, как выглядит сайт. Они не хотят читать об агентстве по недвижимости или видеть красивые фотографии города. Они хотят видеть дома.
3. Правило № 3:Прислушайся к себе. Вы понимаете, чего хочет клиент, и знаете, что ищет ваш рынок. Теперь, наконец, пора обратить внимание на вас, дизайнер!
   • Создайте шаблон в графическом программном обеспечении по вашему выбору. Разместите элементы своей страницы на разных слоях (чтобы потом можно было настраивать вещи, не разрушая весь шаблон). Этими элементами могут быть:
     • Заголовок. Это элемент, который одинаков на всех страницах вашего сайта. Заголовок состоит из заголовка и логотипа сайта, а также ссылок на другие части сайта (например, «О нас», «Контакты» и т. Д.). Визуально и практически все это свяжет воедино. Рекомендуется связать первую кнопку в строке меню с домашней страницей.
     • Например, давайте посмотрим на Apple:
     • Как и у большинства вещей Apple, их домашняя страница имеет очень простой и понятный дизайн. Обратите внимание на строку меню вверху, с логическими темами для каждой кнопки, а также с полем поиска - всегда полезно, если ваш сайт поддерживает это. Теперь давайте посмотрим на целевую страницу для одной из кнопок, iPad, чтобы увидеть несколько элементов:
     • Строка меню изменяется только за счет затемнения кнопки iPad.
     • Тема целевой страницы отображается большими черными буквами.
     • Появится новое подменю, чтобы вы могли больше узнать о продукте. Если вы нажмете одну из этих кнопок, вы увидите, что каждая страница предлагает новый контент в зависимости от темы, но будет идентичен по макету и дизайну.
     • Часто у каждой основной темы в строке меню есть разные подзаголовки, которые вы должны заполнить. Вместо того, чтобы создавать вторую строку меню, вы можете использовать всплывающие меню, как в этом примере из Musicians Friend:
     • Боковая панель. Это будет отображаться на многих страницах вашего сайта, но не обязательно на всех - определяет контекст. Однако это очень важный элемент, и он должен быть тщательно продуман, чтобы быть интуитивно понятным и не слишком загроможденным. В отличие от строки меню, содержимое боковой панели может быть очень динамичным. Ознакомьтесь с двумя боковыми панелями от продавца недвижимости Трулии. Первая предназначена для покупателей:
       
       

Метод 2 из 2: рекомендации

1. Создайте хороший пользовательский интерфейс. Разместите различные элементы веб-сайта, такие как заголовок, боковые панели, логотипы, изображения и текст, в одном и том же месте на каждой странице, чтобы сделать ваш сайт удобным для навигации и интуитивно понятным.
   • Сохраняйте одинаковый заголовок вверху каждой страницы. Независимо от того, допускает ли контент вашего сайта много повторяющихся элементов, убедитесь, что верх каждой страницы одинаков.
   • Используйте логику в своем дизайне. Элементы на одной странице должны быть логически упорядочены по важности или тематике; разные страницы на сайте тоже должны быть.
2. Создайте единый стиль. Если макет должен придавать вашему сайту структурную целостность, стиль должен обеспечивать тематическую гармонию.
   • Придерживайтесь двух или трех основных цветов и убедитесь, что они хорошо сочетаются друг с другом.
   • Избегайте использования слишком большого количества стилей и размеров шрифтов; если вы хотите чередовать несколько, используйте их одинаково на каждой странице.
   • Используйте каскадные таблицы стилей (CSS), чтобы поддерживать единый стиль и упростить изменение элементов на всем веб-сайте без необходимости переходить на каждую страницу отдельно.
3. Повышайте удобочитаемость. Чтобы текст было легче читать, вы можете разделить его на более мелкие части.
   • Используйте субтитры и правильный интервал для разделения каждой части.
   • Используйте жирные буквы или разные размеры, чтобы показать иерархию и важность тем.
   • Обратите внимание на то, как вы относитесь к тексту. Не делайте шрифт слишком мелким и увеличивайте межстрочный интервал, чтобы было легче читать большие фрагменты текста. Большие участки текста труднее читать; разбейте его на более мелкие абзацы.
4. Сделайте свой сайт универсальным для чтения. Используйте стандартный HTML и избегайте тегов, функций и подключаемых модулей, которые доступны только для одной марки или версии браузера.
   • Хотя большинство современных браузеров и компьютеров могут обрабатывать сложные изображения, все будет выглядеть лучше, если вы уменьшите и оптимизируете свои изображения для Интернета. Оцените важность качества и важности скорости.
5. Протестируйте свой сайт. Убедись в том, что каждая ссылка работает как и следовало ожидать, и изображения отображаются правильно.
   • Вы можете организовать пользовательское тестирование, попросив членов вашей целевой аудитории протестировать ясность и простоту использования вашего дизайна и предоставить отзывы о вашем веб-сайте.
6. Опубликуйте свой сайт. Купите доменное имя, если вы еще этого не сделали. Периодически проверяйте, работают ли все еще ссылки, и прислушивайтесь к предложениям, которые посетители отправляют вам по электронной почте.

Советы

• Хотя вы можете создать макет на основе своего личного видения или вещей, которые вы видели на других сайтах, может быть проще купить готовый дизайн.
• Не засыпайте посетителя милыми, особенными картинками. Флэш-анимация, яркие цвета, узорчатый фон и музыка, которая автоматически воспроизводится при загрузке страницы, были забавными экспериментами в 90-х годах, но теперь они отпугивают пользователей. Для максимальной разборчивости используйте простой фон, контрастирующий с цветом текста.
• Вы всегда можете использовать CSS для оптимизации интервала между абзацами.
• Посетители с нарушениями слуха или зрения могут добавлять субтитры к видео, расшифровывать аудио и добавлять сообщения о специальных возможностях. Таблицы могут быть эффективным способом систематизации информации, однако посетители с ослабленным зрением, использующие программы чтения с экрана, могут не слышать материал в правильном порядке.
• Позвольте вашим посетителям экономить чернила: используйте отдельную таблицу стилей для печати страниц.
  • Отключите фоновые изображения при настройке параметров печати.
  • Используйте черный текст на белом фоне.
  • Уберите строку меню и ненужные изображения.

Предупреждения

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