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

1. Оптимизация веб-графики для увеличения времени загрузки страницы

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

Вот общее практическое правило для выбора правильного формата файла: изображения со сплошными цветами лучше всего сохранять в формате PNG и GIF, а изображения со сплошными цветами (например, фотографии) лучше всего сохранять в формате JPG. В вашем распоряжении есть множество инструментов, которые помогут вам дополнительно оптимизировать ваши изображения и уменьшить размер их файлов, ознакомьтесь с этим списком инструментов для оптимизации ваших изображений. Ограничив количество используемых изображений до минимума, разумно используя изображения и максимально уменьшив размер файлов, вы значительно сократите время отклика веб-страницы и повысите ее производительность.

2. Соблюдайте чистоту и простоту

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

Убедитесь, что у каждого элемента страницы есть цель, и задайте себе следующие вопросы:

• Действительно ли дизайн нужен этому?
• Что делает этот элемент и как он помогает пользователю?
• Если я удалю этот элемент внезапно, захотят ли большинство людей вернуть его ?
• Как этот элемент связан с целью , сообщением и целью сайта?

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

3. Навигация — это самое важное, что вы разработаете

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

Это здравый смысл, но все же удивительно, как много веб-дизайнеров воспринимают навигацию по сайту как должное. Размещение, стиль, технология (будет ли он использовать JavaScript или только CSS?), удобство использования и доступность в Интернете — это всего лишь из вещей, которые вам необходимо учитывать при создании дизайна навигации. Ваш дизайн навигации должен работать без CSS из-за текстовых браузеров.

Высмеивайте текстовые браузеры сколько угодно, но они по-прежнему широко распространены на многих мобильных устройствах. Возможно, что более важно, навигация, которая работает с отключенным CSS, доступна (99,99% времени) через программы чтения с экрана. Навигация должна быть доступной и пригодной для использования без необходимости использования клиентских технологий, таких как JavaScript или Flash, которые пользователи могут не включать или не устанавливать по разным причинам, таким как безопасность или политика компании.

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

Пользователи должны никогда не задумываться, даже на долю секунды: « Где находится навигация по сайту?» Для сайтов, организованных иерархическим многоуровневым образом, убедитесь, что на них легко перемещаться между родительскими и дочерними веб-страницами. Кроме того, должно быть легко получить доступ к страницам верхнего уровня (например, главной странице сайта) с любой веб-страницы. Основная цель навигации по вашему сайту состоит в том, чтобы позволить пользователям добраться до желаемого контента с минимальными действиями и минимальными усилиями от их имени.

4. Используйте шрифты с умом и методично

Несмотря на то, что существуют тысячи шрифтов, на самом деле вы можете использовать только несколько (по крайней мере, до тех пор, пока CSS3 не будет полностью поддерживаться основными браузерами). Придерживайтесь веб-безопасных шрифтов. Если вам не нравятся веб-безопасные шрифты, подумайте о прогрессивно улучшенном веб-дизайне, использующем sIFR или Cufon.

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

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

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

5. Доступность цветов

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

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

Важно не только получить удачное сочетание цветов, но и применить его к нужным элементам на странице.

6. Вы должны знать, как писать код самостоятельно

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

Знание того, как использовать WYSIWYG или IDE с визуальным предварительным просмотром, не освобождает вас от изучения HTML и CSS. Вы должны знать, что происходит, чтобы создавать эффективные, семантические и высокооптимизированные веб-дизайны.

7. Не забывайте про поисковую оптимизацию

Хороший дизайнер всегда должен помнить об основах SEO при разработке сайта. Например, структурирование веб-контента таким образом, чтобы важный текст был представлен в виде заголовков (т. е. заголовка страницы и логотипа).

Вот здесь-то и пригодится умение правильно программировать. Зная правильный, семантический и основанный на стандартах HTML/CSS — вы быстро поймете, что div лучше таблиц для веб-макетов не только для точного представления контента сайта, но и для ранжирования в поисковых системах; вы также знаете, что замена фонового текста с помощью CSS — хорошая идея.

8. Поймите, что люди нетерпеливы

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

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

9. Узнайте о особенностях браузера (и помните о них)

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

10. Сделайте дизайн гибким и удобным в сопровождении

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

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

Ваши советы по веб-дизайну?

Если у вас есть еще советы начинающим веб-дизайнерам — поделитесь ими в комментариях.

Связанный контент

• Как создать дизайн для вашего худшего клиента: вас.
• Как оставаться на шаг впереди дизайнера
• Связанные категории : Веб-дизайн

21 Необходимые навыки для веб-дизайнеров

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

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

Вы хотите нанять веб-дизайнера для проекта? Мы составили этот список, выделив 21 необходимый навык, которым должны обладать веб-дизайнеры.

Технические навыки

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

1. HTML

Язык гипертекстовой разметки служит основой почти для всех веб-сайтов и остается наиболее важным навыком для веб-дизайна. Даже если вы используете систему управления контентом или редактор WYSIWYG (что видите, то и получаете), понимание HTML позволяет вам контролировать рабочий процесс и при необходимости работать вне этих редакторов.

2. CSS

В то время как HTML обрабатывает структуру бизнес-сайта, Каскадные таблицы стилей, которые работают вместе с ним, определяют внешний вид.

3. JavaScript

JavaScript — это расширенный язык программирования, который обрабатывает интерактивные компоненты веб-сайта. Он хорошо дополняет HTML, добавляя видео, панели поиска и другие элементы.

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

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

5. Другие приложения для дизайна

В зависимости от потребностей клиента вам может понадобиться опыт работы с программами обработки изображений, такими как Photoshop, Adobe After Effects и Adobe Illustrator. Существует также интерактивный инструмент для создания каркасов под названием Mockplus, который может помочь в создании прототипов страниц.

6. Управление веб-сервером

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

7. Онлайн-маркетинг

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

Поисковая оптимизация (SEO) ведет к этому навыку. Само собой разумеется, что веб-дизайн и SEO тесно связаны. Чтобы привлечь новых потенциальных клиентов в огромном океане результатов поиска Google, веб-дизайнеру, возможно, придется использовать ключевые слова, повысить скорость загрузки страниц, повысить доверие к домену и регулярно обновлять страницы для повышения рейтинга сайта.

8. Адаптивный дизайн

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

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

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

9. Пользовательский опыт (UX)

Пользовательский опыт — это все сегодня. По данным Forrester, каждый доллар, вложенный в UX, может принести 100 долларов ROI.

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

10. Пользовательский интерфейс (UI)

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

Вместе они образуют единообразный интерфейс и понятный интерфейс. Не забудьте добавить подсказку и очевидный призыв к действию.

11. Графический дизайн

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

Если вы никогда раньше не использовали Adobe Lightroom, это может изменить правила игры. Почему? Потому что он может использовать тысячи предустановок, чтобы мгновенно улучшить любую фотографию. Самый простой способ начать работу — загрузить пакет пресетов Lightroom и следовать нескольким основным рекомендациям, чтобы применить их к своим фотографиям.

12. Теория цвета

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

Навыки межличностного общения

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

13. Создание проектов

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

14. Коммуникативные навыки

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

15. Навыки межличностного общения

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

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

16. Навыки критического мышления

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

17. Управление проектами

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

18. Минимизация отвлекающих факторов

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

19. Терпение

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

20. Получение отзывов

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

21. Получение рекомендаций

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

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

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

И самое главное, установите четкие ожидания и не останавливайтесь на «достаточно хорошем».