Правила дизайна сайта: 10 правил для дизайна сайтов

10 правил для дизайна сайтов

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

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

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

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

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

«Мне нравится» — это не повод впихивать все полюбившиеся вам элементы на страничку или ставить то, что не слишком вписывается в общую концепцию.

Чем проще, тем лучше. Простота конструкции – удобство для посетителя и увеличение влияния на него. Ведь куда проще, когда колонка одна и не нужно переходить на миллионы дополнительных страниц.

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

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

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

Сайт должен быть удобным для пользователей.

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

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

Via

13 основных правил веб-дизайна — что должен знать заказчик сайта

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

Проверьте, соответствует ли им ваш сайт!

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

Основные правила веб-дизайна

Правило 1. Хорошая скорость загрузки страницы

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

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

Правило 2. Юзабилити, или удобство использования сайта

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

Если действий предполагается больше — юзабилити хромает, надо исправлять) — замечательно.

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

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

Правило 3. Читаемые шрифты

Давно миновала эпоха, когда чем заковыристее были шрифты — тем круче считалось.

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

Еще лучше разработать фирменный стиль, в который будут входить определенный набор корпоративных шрифтов. Как правило,

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

Правило 4. Умеренная цветовая палитра

Тут тоже действует правило: не более 3 цветов на странице. Допускаются оттенки и полутона, но не более. Черный, красный, желтый и зеленый — это уже перебор: пожалейте бедного посетителя. За буйством красок он просто не заметит полезную информацию или будет продираться сквозь ваши светофоры с лупой в руках. И снова будем советовать фирменный стиль: помимо шрифтов, вам подберут еще и корпоративные цвета, которые в дальнейшем вы будете использовать для любых промо-материалов, в том числе и оформлении сайта, паблика в соцсетях, ютуб-канала и других.

Правило 5. Современный фон

Еще один привет из девяностых: сложносочиненный фон, или подложка, для сайта. До сих пор используется в среде начинающих веб-дизайнеров, на бюджетных сайтах доменов второго и третьего уровня, очень активно — в “Живом журнале”.

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

Правило 6. Единый стиль

Шрифты — строгие, цвета — веселенькие, а картинки надерганы из разных стоков по принципу “пусть будет, да побольше”? Одна форма заказа горизонтальная, другая — вертикальная, и в каждой разные шрифты? Стоп, так не пойдет: продающий дизайн предполагает единство стиля. Как сказал классик, “в одну телегу впрячь не можно коня и трепетную лань!”

Правило 7. Золотое сечение

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

Если не заморачиваться с формулой, пропорции золотого сечения отдельных элементов составляют 3/2, или 5/3, и так далее. По этому принципу делаются основные элементы сайта. Например, когда при разработке лендинга нужно разместить на странице несколько блоков, золотое сечение приходит на помощь. Идеальная пропорция ширины каждого блока выглядит примерно так:

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

Правило 8. Правило третей

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

Следовательно, рядом с этими точками нужно размещать самую важную информацию — чтобы наверняка увидели. Это может быть кнопка с call to action — призывом к действию, или форма заказа. Считается, что самая “активная” точка — левый верхний угол. Присмотритесь: именно там на сайтах по традиции располагается логотип. Совпадение? Не думаю!

Правило 9. Знание эффекта “баннерной слепоты”

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

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

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

• размещать рекламу чем выше — тем лучше. Огромный баннер на главной с информацией о скидках точно не пройдет незамеченным;
• играть на контрасте: выделять рекламу ярким цветом, делать контрастные кнопки призыва к действию. Главное — чтобы глаз зацепился;
• придумывать креативные (но не желтые!) заголовки, привлекающие внимание;
• использовать фото человека, который смотрит в направлении рекламного баннера. Это работает!

Правило 10. Кнопка “вверх”

Казалось бы, такая мелочь, а как важно! Представьте, что у вас интернет-магазин с огромным каталогом товаров или крупный новостной портал — чтобы пролистать сайт вниз, нужно достаточно долго скроллить (крутить колесиком мыши) вниз. А как потом вернуться назад? Многие веб-дизайнеры забывают об этом, заставляя посетителей отматывать страницы вверх. А ведь достаточно всего прикрутить кнопку “Вверх” или графическое изображение ^ — и все сразу понятно. Так вы экономите время пользователя и делаете сайт более удобным.

Правило 11. Новая ссылка — та же вкладка

Любая внутренняя ссылка с вашего сайта (баннер на главной, ведущий на страницу распродаж, статья в блоге, которая отсылает посетителя в карточку товара, видео на “Ютубе”, иконка соцсетей, в которых представлен ваш ресурс — что угодно) должна открываться в том же окне. Много копий сломалось на эту тему: пользователям удобнее, когда ссылка открывается в новом окне, особенно когда ссылок много. Но в этом случае они могут не нажать кнопку “назад” и не вернуться на самую первую страницу, а то и забыть, о чем там вообще говорилось. А это значит, что они могут покинуть ваш сайт, не досмотрев важную информацию. Поэтому мы советуем внутренние ссылки открывать во внутренних же окнах, а внешние — в новых. Например, если ссылки ведут на дружественный сайт — пожалуйста, пусть открывается в новом. Если направляют на свой же паблик в соцсети — тоже без проблем.

Правило 12. Больше визуализации!

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

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

Правило 13. Адаптивная верстка

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

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

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

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

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

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

Правило 1: Юзабилити

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

Также для этой задачи пригодится анализ топовых конкурентов. Изучите те решения, которые приняли они, и продолжайте работать исходя из полученных данных. Не стоит тупо копировать идеи. Возьмите интересные моменты «на карандаш» и на их базе придумайте что-нибудь оригинальное.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Правило 2: Скорость загрузки страницы

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

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

Правило 3: Навигация

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

Правило 4: Единый стиль

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

Правило 5: Шрифты

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

Правило 6: Цветовая схема

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

Правило 7: Визуализация

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

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

Правило 8: Фон

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

Правило 9: Мультибраузерное отображение

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

Следовательно, один и тот же элемент может отображаться в Google Chrome и Internet Explorer по-разному. Не забывайте проверять предварительный шаблон на идентичность во всех браузерах, иначе это будет напрямую свидетельствовать о вашем непрофессионализме.

Правило 10: Забудьте все, чему вас учили в школе

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

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

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

На сегодня все, подписывайтесь на блог и делитесь ссылкой с друзьями. Всем короткого домена над головой!

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн.

Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Правила и запреты веб-дизайна / Блог компании Логомашина / Хабр

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

Правила

1. Дизайн должен быть единым, независимо от платформы

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

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

2. Простая и понятная навигация

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

• Простой — у каждого сайта должна быть простейшая из возможных структура;
• Понятной — навигация должна быть очевидной;
• Преемственной — навигация первой и последней страницы должна быть одинакова.

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

3. Цвет ссылок

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

Понимание того, где пользователь уже был, освобождает его от блуждания по одним и тем же страницам.

4. Простой поиск по страницам

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

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

Z-образный паттерн на сайте Basecamp

5. Проверяйте ссылки!

Пользователь теряет доверие к сайту каждый раз, когда по ссылке вылетает ошибка 404 (несуществующая страница). Кликая по ссылке, пользователь ждет решения проблемы, а не сообщение об ошибке.

Страница не найдена

6. Кликабельные элементы

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

Menagerie Climb: оранжевый бокс — это кнопка? Нет. Хотя форма и вид говорит об обратном

Запреты

1. Заставлять посетителя ждать загрузки страницы

Запас терпения и способность концентрировать внимание пользователя очень малы. Об этом говорится в исследовании NNGroup:

Предельное время концентрации пользователя на задаче — 10 секунд

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

Изображение: Ramotion

2. Открывать ссылку в новой вкладке

Такой способ грубо отключает сценарий использования кнопки «назад» для возврата на предыдущую страницу.

3. Позволять рекламе закрывать контент

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

4. Похищать прокрутку

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

На странице Mac Pro ужасная прокрутка: точки под картинкой ведут каждая на свою секцию страницы

5. Автовоспроизведение видео со звуком

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

Видео на Facebook включаются автоматически, но без звука, до тех пор, пока пользователь не подтвердит, что смотрит видео (кликнув по нему)

6. Жертвовать удобством ради красоты

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

Неконтрастные шрифты — это всегда плохая идея

7. Использовать мигающий текст и рекламу

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

Избегайте мигающего текста!

5 основных правил веб-дизайна

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

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

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

1. Следуйте правилам… почти всегда

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

Вот пример страницы, созданной в Edge Reflow CC. Попробуйте выделить отдельные элементы и поэкспериментировать с ними, немного нарушая правила.

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

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

3. Цвет как элемент дизайна, но не декора

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

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

4. Выбирайте шрифты, подходящие контенту

Существуют тысячи шрифтов, из которых вам приходится выбирать.

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

5. Просите помощи

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

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

Источник: dejurka.ru

Ключевые правила веб-дизайна — Artjoker

Есть толковая пословица: «Пользователи замечают дизайн только если он плох». Так оно и бывает: на юзер-френдли веб-ресурсе у вас просто не будет времени задумываться над тем, удобно ли располагается эта кнопка или сочетаются ли цвета landing page? Искусный веб-дизайн ведет за собой, «отзывается» на любое ваше требование и нравится, он чертовски нравится! В чем секрет? Раскроем карты прямо сейчас.

3 главных принципа веб-дизайна

Если вы профессиональный графический дизайнер, то книга «100 главных принципов дизайна» Сьюзан Уэйншенк уже давно прочитана от корки до корки. Для тех, кто только начинает свой путь либо или постигает основы веб дизайна для оценки чужой работы, предлагаю главные 3 принципа веб-дизайна. Проверяйте и исправляйте.

1

Просто

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

2

Оригинально

Не забывайте о деталях — благодаря им даже самый скучный сайт может выделяться. Корзина покупок, поле для комментариев, pop-up окно — удивляйте своим ресурсом, ведь креативный дизайн веб-сайта останется в памяти.

3

Понятно

Где просто, там и очевидно. Хоть «интуитивно понятный интерфейс» звучит вычурно, но истина в этом выражении есть. Если я могу предугадать развитие событий своего поведения на сайте, то возникает уверенность и доверие. Тут и до лояльности недалеко.

Современные тенденции веб-дизайна

1

Моноэкран/ Одностраничник

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

Как сделали мы:

2

Parallax-эффект и split-экран

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

Как сделали мы:

3

Мультимедиа

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

Как сделали мы:

4

Минимализм

Правило KISS («Keep It Simple, Stupid» или «Keep It Short and Simple») прочно обосновалось в современном дизайне. Для фона используется одно большое изображение, шрифт без засечек более 14 пунктов, по бокам ненавзчиво появляются самые необходимые кнопки. Благодаря тренду на минимализм по-настоящему раскрылся флэт-дизайн (плоский) и блочная система подачи информации. Кстати, с ней можно экспериментировать, заменяя квадраты на прямоугольные либо круглые формы. 

Как сделали мы:

Резюме

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

Основные правила веб-дизайна. Готовим дизайн для верстальщика

С чего начинается разработка сайта? Правильно, с внешнего оформления или дизайна. Дизайн – это то, что в первую очередь видит посетитель, когда заходит на сайт. Поэтому дизайну при его разработке следует уделить особое внимание.

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

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

Структура статьи

Правила дизайна сайта

Техническое задание (ТЗ)

Прежде, чем приступить к работе обязательно внимательно ознакомьтесь с техническим заданием (ТЗ). Вы должны детально его изучить, вникнуть в каждый элемент, понять в чем суть его интерактивности. Если вы в чем то сомневаетесь, то обязательно проконсультируетесь с руководителем проекта или с самим клиентом. Поверьте, впустую потраченное время, на не правильную прорисовку логотипа или какого либо центрального элемента сайта вам никто не возместит. Вы всегда должны знать возможности вашего верстальщика. Часто случались такие ситуации, когда дизайнер нарисовал, к примеру, видеоплеер с возможностью переключения качества видеопотока, да еще и с превью видеороликов, выстроенных строго под блоком самого плеера. Нет, реализовать конечно можно, но не в той пропорции бюджета и времени, что были озвучены изначально.

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

Макет

Уважаемый дизайнер! Если у вас стоит тридцатидюймовый дорогущий монитор, то это вовсе не означает, что вы должны рисовать макет в 3000 px по ширине. Вы должны понимать – вы пока в меньшинстве. У львиной доли посетителей, пришедших на сайт, разрешение экрана будет 1024 – 1920px. Правда сегодня рынок девайсов пользователей интернета завоевывают мобильные устройства, их уже перевалило за 50%. Здесь существуют некоторые правила и стандарты.

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

Определяемся  с шириной макета основного блока (контейнера) сайта. Обычно ширину макета подстраивают под самое распространенное разрешение экрана. В последнее время я прошу дизайнера, чтобы он рисовал дизайн по модульной сетке фреймворка twitter bootstrap, шириной 1170px.  Когда дизайн нарисован строго по сетке это значительно упрощает верстку.

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

Если сайт будет фиксированным, то обязательно указываем ширину холста чуть шире ширины основного блока (контейнера) сайта и задаем фон – в качестве фона может быть изображение, или просто градиент, или однотонная заливка. Впрочем, о фоне мы еще поговорим.

Слои

Все слои в макете должны быть тщательно сгруппированы и подписаны адекватными именами. Помните такое правило: «Если один элемент в макете имеет более двух слоев, то его обязательно следует заключить в общую группу». Вот, к примеру, на сайте есть различные модуля. У каждого модуля присутствует заголовок. Так вот, заголовок в макете имеет два слоя: сам текст названия и задний фон. Таким образом, мы эти два слоя объединяем в общую группу и называем, например, «Заголовок» или «Title». Данная группа также может лежать в родительской группе с названием модуля, т.е. в группе модуля «Новости» лежит подгруппа «Заголовок новости». Исходя из выше сказанного, должна быть некая иерархия групп слоев. Такая группировка очень упрощает жизнь верстальщику. Также не забываем подписывать сами слои, чтобы не было там никаких «Layer1» или «Layer2″…

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

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

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

Задний фон сайта

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

Если вы рисуете картинку на заднем фоне и располагаете ее по центру, то она ни в коем случае не должна иметь обрезанные края. И еще, на заднем фоне всегда должен быть какой то фрагмент однородного фона, который верстальщик может пустить на повторение. Данный фрагмент может быть как однородной заливкой, так и градиентом. Края картинки должны плавно переходить на «нет». Здесь имеется ввиду переход на какой-то однородный фон.

Если в качестве заднего фона используется текстура, то обязательно сохраните один повторяющийся фрагмент для верстальщика отдельным файлом в формате jpg, png или gif.

Текст

Веб-дизайнер при подборе шрифтов для сайта должен учитывать следующее: существуют стандартные шрифты и нестандартные шрифты. Что значит стандартные и нестандартные?

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

Нестандартные шрифты — это шрифты, которые не установлены в операционной системе. Обычно нестандартные шрифты подгружаются в шаблоне сайте посредством правила font-face. Следует иметь ввиду, что использование нескольких нестандартных шрифтов — нежелательно, т.к. нестандартные шрифты увеличивают время загрузки веб-страницы (документа). Весить они могут намного тяжелее стандартных шрифтов. Здесь еще зависит от того, какие начертания шрифтов использует дизайнер — чем больше начертаний, тем тяжелее шрифт. Желательно не использовать платные шрифты, т.к. потом возникают проблемы с их преобразованием для WEB. Для поиска шрифта вполне можно обойтись бесплатными Гугл шрифтами.

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

Размеры шрифта (кегль) обязательно указываем целыми числами, размеры типа 19,82 px и тому подобное не допустимы. Без необходимости не используйте всякие трансформации и издевательства над шрифтами. Добавите немного головной боли верстальщику.

Желательно не заливать цвет шрифта градиентом. Можно, но только без фанатизма. Лучше все же указать однотонным цветом.

И последнее, что касается шрифтов – никогда не РАСТРИРУЙТЕ текстовые блоки. За данное деяние вам точно оторвут голову, не в буквальном смысле конечно.

О цветовой гамме

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

Активные элементы

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

Резюмируем все выше сказанное

• Тщательно изучите тех. задание;
• Ширина основного контейнера сайта минимум 1000 px. Не важно сайт резиновый или фиксированный. Сегодня большую популярность получила модульная сетка Twitter Bootstrap — 1170px, используйте ее в своем дизайне;
• Фиксированному сайту не забываем указать задний фон;
• Все слои в макете должны быть сгруппированы;
• Не ленитесь отрисовывать каждый элемент, будь то форма авторизации или форма поиска;
• Желательно использовать только стандартные шрифты. Нестандартные в умеренных масштабах;
• Качественно пройдитесь по макету и доработайте все недостающие элементы. Если это сделает верстальщик, то скорее всего сломает весь макет;
• Дизайнер должен тщательно организовать свою работу, не забывая о том, что после него будут работать другие люди;
• Подготовить макет для сдачи верстальщику – сохранить макет в формате PSD и скриншот в формате JPEG. Также, следует нарисовать иконку сайта favicon и watermark для фото;
• Не отключать и не удалять направляющие, т.к. с ними будет работать еще верстальщик;
• Все блоки на сайте должны быть выравнены строго по пикселям, т.е. полпикселя недопустимо;
• Чем качественнее нарисован макет, тем качественнее он будет сверстан верстальщиком;
• Помните, что на ряду с красотой макет должен быть легким, т.е. сверстанный сайт должен быстро загружаться

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

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

До встречи в следующих постах. Удачи!!!

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

Создание макета веб-страниц — это первый навык, которым веб-дизайнеры должны овладеть, и, хотя дизайн веб-сайта постоянно меняется, есть несколько основных принципов, которых должен придерживаться каждый дизайнер. к.

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

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

Вот что вам нужно знать:

Основы макета страницы

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

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

Проще говоря, хороший макет страницы дает пользователю подсказки:

• Важность каждого элемента страницы
• Взаимосвязь между элементами

Основная цель создания хороших макетов дизайна веб-сайта — передать сообщение четко и эффективно, не отвлекая пользователя.

Задайте целевую аудиторию

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

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

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

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

8 правил верстки веб-сайтов

Теперь, когда вы знаете основы дизайна макета, ознакомьтесь с этими 8 правилами, которые гарантируют, что ваши макеты попадут в цель:

Правило третей

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

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

Сетки

То же самое и с сетками.И начинающие, и опытные дизайнеры-верстальщики работают с сетками, чтобы собрать воедино свои проекты — если не настоящие, то воображаемые. Использование сетки означает разделение холста на небольшие квадраты, чтобы помочь вам разместить элементы равномерно.

Сетки

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

Визуальная иерархия

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

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

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

Весы

Без баланса не может быть эстетического результата. Дизайн макета (как и другие виды дизайна) основан на балансе и гармонии. Представьте, что на макете страницы лежит набор шкал. Если вы заполните одну часть большим количеством элементов, чем другую, шкала опрокинется.

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

Внимание пользователя

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

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

Белое пространство

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

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

Расход

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

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

Согласованность

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

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

Завершение мыслей по дизайну макета

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

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

Надеемся, вам понравилась эта статья о дизайне макета, созданная командой Amelia (лучшая система бронирования WordPress).

Вам также стоит ознакомиться с этим о современном веб-дизайне.

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

8 правил дизайна домашней страницы, которые нельзя нарушать

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

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

Что должно включать в себя отличная домашняя страница?

Домашняя страница не только удобна для пользователя, но и должна включать эти элементы.

Это самый важный элемент на домашней странице, так как он поможет вам увеличить продажи.Так что разместите свой призыв к действию стратегически, чтобы привлечь внимание пользователей. Например, «зарезервируйте место», «купите сейчас», «посмотрите больше», «начните» и т. Д.

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

• Элементы фирменного стиля и другие вспомогательные элементы:

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

• Будущие цели сайта:

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

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

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

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

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

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

Использовать визуальную иерархию:

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

Не добавляйте слишком много текста:

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

Не проявляйте особого творчества:

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

Поймите свою аудиторию:

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

Сохраняйте дизайн простым и понятным:

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

Используйте отрицательное пространство (или пробел):

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

Короткое время загрузки:

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

Взять под контроль:

Это очень важно, особенно для крупных организаций.Рекламные компании всегда ищут домашние страницы отличных веб-сайтов для продвижения своих брендов. Поэтому вам нужно иметь контроль и власть над тем, что происходит на вашей домашней странице. Вы должны знать, когда сказать «нет». Каждый элемент на главной странице должен иметь цель и служить тому, чего хочет аудитория. Вам также следует избегать разработки домашней страницы в соответствии с рекомендациями комитета, потому что, если вы попытаетесь удовлетворить всех, вы получите некачественный веб-сайт, который не будет работать хорошо. Ваш дизайн не будет определяться пользователем.В случае сомнений вы можете найти сайт конкурента и почерпнуть на нем вдохновение. Вы даже можете проверить отзывы об их веб-сайте, чтобы лучше понять. Вам следует искать объективную критику и фильтровать личное мнение. Например, «вы должны использовать желтый цвет в качестве фона, так как он будет сочетаться с цветовой схемой и сделает элементы вашего веб-сайта более яркими», более ценно, чем «Я ненавижу цвет фона».

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

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

5 основных правил верстки и дизайна веб-страниц

Было время в древней истории веб-дизайна (около пяти лет назад), когда лишь немногие избранные, называемые веб-мастерами, могли создавать веб-сайты.

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

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

Самые успешные маркетинговые веб-сайты, в том числе те, которые вы можете спроектировать и создать для себя и для клиентов, просты.Эти веб-сайты следуют тем же принципам дизайна, которые вы изучаете в программе Graphic Design Success Program. И, как дополнительный бонус, их легко и недорого создать.

(Мы обсудим лучшие инструменты для создания веб-сайтов в будущем выпуске Inside Freelance Design .)

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

1. Веб-сайт должен быть легко читаемым.

   Это самое важное правило в веб-дизайне. Тщательно выбирайте цвет текста и фона.

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

   Не устанавливайте размер текста слишком маленьким (его трудно читать) или слишком большим (кажется, что посетители вашего сайта кричат).ВСЕ ЗАГЛАВНЫЕ тексты также создают впечатление крика.

   Сохраняйте выравнивание основного текста по левому краю, а не по центру. Текст с выравниванием по центру лучше всего использовать в заголовках.

2. Возьмите под свой контроль свои шрифты.

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

   Используйте наиболее распространенные шрифты, уже установленные на компьютерах: шрифты с засечками Times и Times New Roman и шрифты без засечек Arial, Helvetica и Verdana.

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

3. Сайт должен быть удобным для навигации.

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

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

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

   Практическое правило: посетители сайта должны иметь возможность найти то, что они ищут, за три клика.

4. Дизайн веб-страницы должен быть единообразным по всему сайту.

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

   Например, если вы используете определенный синий цвет для подзаголовков, вы должны последовательно использовать один и тот же синий цвет на всем сайте. Гарнитуры, выравнивание основного текста и заголовков, фоновые эффекты и специальные эффекты для графики должны остаться прежними.

5. Веб-сайт должен загружаться быстро.

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

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

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

И последнее, но не менее важное: будь проще! Как и в случае с дизайном DM, лучше меньше, да лучше.Ваша единственная цель — продать … а не показать, насколько вы умны.

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

http://www.saltinstitute.org/

http://www.wetestit.com/

http://www.sphere.bc.ca/test/sruniverse.html

http://www.globalaigs.org/

Союз профессиональных писателей

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

Нажмите, чтобы оценить:

Среднее значение: 4,0

Опубликовано: 23 августа 2007 г.

8 принципов хорошего веб-дизайна

Краткое описание:

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

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

Итак, как создать хороший веб-сайт?

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

Вот список 8 хороших принципов дизайна, которые сделают ваш сайт эстетичным, удобным, эффективным и интересным:

1. Простое — лучшее

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

2. Последовательность

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

3. Типографика и удобочитаемость

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

4. Мобильная совместимость

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

5. Цветовая палитра и изображения

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

6. Простая загрузка

Никому не нравится веб-сайт, загрузка которого занимает слишком много времени. Так что позаботьтесь об этом, оптимизируя размеры изображений, объединяя код в центральный файл CSS или JavaScript, поскольку это уменьшает количество HTTP-запросов. Кроме того, сжимайте HTML, JavaScript и CSS для повышения скорости загрузки.

7.Простая навигация

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

8. Связь

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

Завершить

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

Это гостевая статья, предоставленная Элис Джексон.

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

Свяжитесь с ней в Twitter: @ jackson_alice1 🙂

13 правил дизайна, о которых должен знать каждый дизайнер веб-сайтов

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

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

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

Правило 1 Устранение раздражающих функций

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

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

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

Правило 2 Запретить плохую навигацию

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

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

И ни при каких обстоятельствах вы не должны отключать кнопку браузера «Назад» в Microsoft Internet Explorer (или аналогичную кнопку в других браузерах) таким образом, чтобы люди не могли вернуться на сайт, который они ранее посещали.

Правило 3 Выбирайте правильные цвета

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

Если вы не знаете, как выбрать правильные цветовые комбинации для веб-сайта, обратитесь за профессиональной помощью или хотя бы прочтите одну из многих книг по дизайну веб-сайтов, объясняющих выбор цвета. Отличная книга — «Создание веб-сайтов убийц», и вы найдете ее сопутствующий веб-сайт по адресу http://www.killersites.com. На домашней странице щелкните ссылку «советы по дизайну», чтобы прочитать о «Цветном кубе» как а также другие советы по цвету.

Правило 4 Избегайте загроможденного вида

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

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

Правило 5 Свяжитесь с нами одним щелчком мыши

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

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

Правило 6 Будьте последовательны

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

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

Правило 7 Дайте посетителям повод вернуться

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

Правило 8 Это должно быть очевидно

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

Правило 9 Не пишите романов

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

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

Правило 10 Короткое время загрузки

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

Правило 11 Управляйте сайтом с помощью базы данных

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

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

Правило 12 Не используйте технологии только потому, что они есть

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

Правило 13 Протестируйте, проверьте, а затем проверьте еще раз

Никто не любит тестировать функциональность веб-сайта.

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

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

Наслаждайтесь!

Тони Стивенсон — автор двух бестселлеров в Интернете: «Австралийский путеводитель по Интернету» (www.mkdsoftware.com.au) и «Австралийский путеводитель по онлайн-бизнесу» (www.mkdsoftware.com.au). /онлайн).

Его компания также издает два бесплатных информационных бюллетеня по электронной почте: «Internet Update» и «Sites of the Day».Эти информационные бюллетени распространяются среди читателей более чем в десятке стран.

11 Лучшие практики дизайна и разработки веб-сайтов на 2018 год

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

thinkwithgoogle.com

Forbes • Webfia • LinkedIn

Рекомендации по дизайну и разработке веб-сайтов на 2018 год

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

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

Клиенты

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

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

По правде говоря, магия веб-сайтов работает не так.

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

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

Разработчики

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

Не круто, разработчики. Не круто.

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

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

2018 Контрольный список функций веб-сайта

Готовы разработать действенный план по пересмотру новой нормы для сайтов 2018 года? Вот девять не подлежащих обсуждению стандартов (и два дополнительных совета) для внедрения на вашем сайте:

1. Быстрая загрузка — Никто не хочет ждать (и ждать и ждать) загрузки вашего сайта.Создавайте сайты с быстрой загрузкой для всех пользователей на всех устройствах (даже с медленным подключением к Интернету). Вы можете использовать Pingdom или Pagespeed Insights от Google, чтобы проверить скорость своего сайта и посмотреть, что можно улучшить.

2. Mobile Ready — Практически каждый ежедневно использует интеллектуальные устройства. Создайте привлекательный, удобный для мобильных устройств дизайн, к которому ваша аудитория сможет получить доступ в любое время и в любом месте.

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

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

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

6. Оптимизация конверсии — У вас есть клиент, ориентированный на конверсию? Внедрите инструменты для создания целевых страниц кампании в свой дизайн. Эти специальные страницы могут держать ваших читателей в движении по вашему сайту и направлять их, чтобы назначить встречу, запросить демонстрацию продукта и даже совершить покупку.

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

8. Социальные сети — Никогда не упускайте возможности использовать возможности социальных сетей. Интегрируйте в свой дизайн все соответствующие платформы социальных сетей. Предоставление пользователям возможности быстрого доступа к страницам социальных сетей с веб-сайта мгновенно расширяет охват бренда и помогает повысить узнаваемость и посещаемость.

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

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

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

11. Машинное обучение и искусственный интеллект — Да, действительно. Искусственный интеллект больше не является футуристическим, высокотехнологичным термином и успешно вошел в нашу повседневную повседневную жизнь и в сети. Не верите мне? Вы когда-нибудь задавали вопрос Siri или Alexa? Я считаю так.Adobe Sensei предоставляет инструменты ИИ для различных платформ веб-дизайна по всему миру, что делает их более доступными и доступными ресурсами.

Соответствует ли веб-сайт вашего бренда стандартам 2018 года?

Если нет, то пришло время немедленного обновления в Интернете. Помните, речь не идет о грандиозных жестах и ​​переосмыслении. Скорее, 2018 год будет сосредоточен на переходе к простому, функциональному и футуристическому дизайну. Внедрение этих (относительно безболезненных) стандартов в качестве основы проектирования, не подлежащей обсуждению, может существенно повлиять на то, как мы ведем бизнес и взаимодействуем с потенциальными клиентами в Интернете для оптимальной рентабельности инвестиций при каждом взаимодействии с пользователем.

___

Денис Пинский работал директором по цифровому маркетингу и аналитике в Forbes (2010-2019). Денис имеет 17-летний опыт работы в электронной коммерции, маркетинге технического роста, разработке продуктов, бизнес-аналитике, науке о данных, оптимизации производительности веб-сайтов. В настоящее время он создает и развивает торговую площадку SavvyHerb CBD. SavvyHerb (savvyherb.com) систематизирует важную информацию о CBD и сближает сообщество.

Давайте подключимся в социальных сетях — Facebook, LinkedIn, Twitter, Instagram.

Подробнее о Forbes

Первоисточник: 9 стандартов дизайна веб-сайтов на 2017 год

8 умных советов по выбору выигрышного доменного имени

7 советов по поисковой оптимизации на странице для создателей нетехнического контента

10 вещей, которые нужно сделать, прежде чем вы нажмете кнопку «Опубликовать»

Forbes • Webfia • LinkedIn

10 эффективных принципов веб-дизайна, которые должен знать каждый дизайнер

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

10 принципов хорошего веб-дизайна

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

1. Цель закладывает основу

Latinxs Who Design имеет очевидную миссию.

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

Дизайн сайта — это не то, что вы должны придумывать по ходу дела. Цель даст вам четкий план и направит дизайн и создание контента. Крыло — это не практическая философия дизайна.

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

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

2. Содержимое придает смысл

Purple Mattress просто и оптимистично рассказывает о преимуществах своего бренда.

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

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

—Якоб Нильсен, «10 эвристик юзабилити для дизайна пользовательского интерфейса»

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

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

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

3. Визуальные эффекты привлекают внимание людей

Finsweet использует необычные изображения и анимацию, чтобы привлечь ваше внимание — например, неоново-розово-зеленый лев.

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

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

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

4. Гармония заставляет дизайн петь.

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

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

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

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

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

5.Типографика формирует восприятие.

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

Самое главное в печати — это то, что она передает мысли, идеи, образы от одного разума к другому.

— Беатрис Вард, «Хрустальный кубок»

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

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

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

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

6. Организация унифицирует упорядоченный дизайн сайта

Blue Apron, позволяющий легко и увлекательно читать о подписках на продуктовые наборы.

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

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

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

7. Цвет задает тон

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

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

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

8. Белое пространство создает баланс

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

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

9. Визуальная иерархия упрощает навигацию

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

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

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

10. Подлинность способствует укреплению доверия.

С самого начала до приобретения крупной корпорацией Ben & Jerry’s сохраняла верность своим ценностям.

«Хороший дизайн — это честно. Это не делает продукт более инновационным, мощным или ценным, чем он есть на самом деле.Он не пытается манипулировать потребителем невыполнимыми обещаниями ». — Из книги Витсо «Сила хорошего дизайна».

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

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

No related posts.