Почему простой дизайн сайта лучше с научной точки зрения / Habr
Исследование, проведенное Google, имело два ключевых вывода:- Пользователю нужно всего 1/50 до 1/20 секунды, чтобы оценить, красивый сайт или нет.
- «Визуально сложные» сайты оцениваются как менее красивые, чем их простые аналоги.
Другими словами, исследование показало — чем проще дизайн, тем лучше.
Но почему?
В этой статье мы на примерах рассмотрим роль когнитивной беглости и теории обработки визуальной информации, которые играют важную роль в упрощении вашего веб-дизайна и помогут увеличить конверсию.
Приступим!
Что же такое «прототип» сайта?
Если я скажу «мебель», какой образ появится у вас в голове?
Если вы похожи на 95% людей, вы подумаете о стуле.
Если я спрашиваю, какой цвет ассоциируется с «мальчик», вы думаете «синий» (а девочка — «розовый» и т.д.)
Прототип — это основной ментальный образ, который ваш мозг создает для классификации всего, с чем вы взаимодействуете. От мебели до сайтов у вашего мозга есть шаблон того, как все должно выглядеть и чувствовать.
В сети прототипы распадаются на более мелкие категории. У вас есть разные, но конкретные психологические образы для социальных сетей, сайтов, электронной коммерции и блогов. Если на каком-либо из этих сайтов что-то отсутствует в вашем ментальном образе, вы закрываете сайт на сознательном и подсознательном уровнях.
Если бы я сказал «сайт модной женской одежды», вы могли бы представить что-то вроде этого:
А теперь посмотрим на прототип сайтов «интернет-магазина одежды», заметили, что они все очень похожи и имеют схожую структуру сайта? (даже если этот сайт из другой страны).
Сходство совсем не означает, что сайтам не хватает оригинальности или что они «украли» друг у друга. Такой структурой они оправдывают ваши ожидания относительно того, как должен выглядеть сайт электронной коммерции.
Что такое когнитивная беглость?
Основная идея, лежащая в основе когнитивной беглости, заключается в том, что мозг предпочитает думать о вещах, о которых легко думать. Вот почему вы предпочитаете посещать сайты, дизайн и структура которых вам инстинктивно понятны. Когнитивная беглость проистекает из другой области поведения, известной как «Эффект простого воздействия», которая гласит, что люди предпочитают знакомые им вещи.
Это правило действует и онлайн. Мы привыкли, что подписка на сайте размещена в правом углу сайта, а логотип компании в верхнем левом углу.
Если ваши посетители обусловлены определенным дизайном сайтов в вашей категории, отклонение от них может подсознательно поставить вас в категорию «менее красивых».
Это вовсе не означает, что вы должны просто «делать то, что делают все остальные». Вы должны знать, какие варианты дизайна сайта являются прототипами для вашей категории. Обязательно проверьте и найдите доказательства, что именно этот дизайн является прототипом в вашей категории.
Не проводя исследования, многие дизайнеры делают плохой выбор. Например, многие сайты электронной коммерции используют автоматический слайдер прокрутки изображений продуктов, но исследование за исследованием показывает, что автоматический слайдер губит конверсию.
Что происходит, когда вы оправдываете ожидания?
Сайт с высоким уровнем беглости будет чувствовать себя достаточно знакомым, так что посетителям не нужно тратить умственные усилия на поиск нужного продукта или кнопки, и вместо этого они могут сосредоточиться на том, зачем пришли на ваш сайт.
Однако, когда уровень беглости низкий, вы сразу это почувствуете. Возьмите онлайн-магазин галстуков Skinny Ties, который до редизайна не выглядел как сайт электронной коммерции:
До:
После:
Несколько ключевых изменений привели к огромным результатам:
- Простой и понятный дизайн и структура сайта;
- Гораздо более «открытый» дизайн с грамотным использованием пробелов;
- Изображения содержат один продукт с высоким разрешением и контрастными цветами.
Давайте ознакомимся со статистикой этого редизайна.
Всего через две с половиной недели результаты были ошеломляющими:
Сам по себе редизайн, хотя и симпатичный, не является революционным. Сайт точно соответствует ожиданиям того, каким должен быть современный интернет-магазин одежды. Он «открытый», отзывчивый и имеет единую стилистику на всех страницах.
Визуальная обработка информации и сложность сайта
В этом совместном исследовании Гарвардского университета, Университета Мэриленда и Университета Колорадо, исследователи обнаружили сильную корреляцию «эстетически привлекательных» сайтов среди различных демографических групп.
Например, участникам с докторской степенью не понравились очень красочные веб-сайты.
В результате исследования не было разработано никаких конкретных универсальных принципов проектирования. Единственное, что было универсальным — это визуально сложный веб-сайт имел меньшую визуальную привлекательность.
Почему простой дизайн с научной точки зрения легче обрабатывать
Причина, по которой «визуально лёгкие» веб-сайты считаются более красивыми, отчасти объясняется тем, что при низкой сложности не требуется, чтобы наши глаза и мозг работали так же усердно, чтобы декодировать, хранить и обрабатывать информацию.
По сути, ваша сетчатка преобразует визуальную информацию из реального мира в электрические импульсы. Затем эти импульсы направляются через соответствующие фоторецепторные клетки для передачи информации о цвете и свете в мозг.
Чем больше цветовых и световых вариаций на странице (т. е. чем больше визуальная сложность), тем больше работы приходится выполнять глазу для передачи информации в мозг.
Каждый элемент передает тонкую информацию
При разработке сайта знайте, что каждый элемент — текст, логотип и выбор цвета — передает тонкую информацию о бренде.
Когда эти элементы не выполняют свою работу, веб-мастер часто компенсирует это добавлением ненужных элементов или изображений, что увеличивает визуальную сложность веб-сайта и ломает общую эстетику.
Оптимизация страницы для обработки визуальной информации, в частности, упрощение прохождения информации от глаза к мозгу, — это передача как можно большего количества информации минимальным количеством элементов.
Рассмотрим на примере редизайн логотипа MailChimp.
Когда они хотели, чтобы бренд «вырос», они не добавили обычное «Мы работаем с электронной почтой с 2001 года! Три миллиона человек доверяют нам! Вот почему мы классные! Бла бла бла…»
Было:
Стало:
Вместо этого они упростили написание, упростили веб-сайт (верхний заголовок просто читается как «Отправьте лучший E-mail») и добавили еще более простую анимацию для основного продукта.
Mailchimp прошел еще один редизайн логотипа в 2018 году:
Каковы были руководящие принципы для второго крупного редизайна?
Значок Фредди уже давно является основной маркой нашего бренда.
Мы немного упростили его, внесли изменения в его форму и проработали мелкие детали, чтобы он выглядел великолепно при любом размере.В процессе итерации и уточнения мы разработали шрифт, который гармонирует со значком Фредди.
«Рабочая память» и Святой Грааль обращения
Согласно исследованию психолога из Принстона Джорджа А. Миллера, мозг взрослого человека способен хранить от пяти до девяти «кусочков» информации в своей краткосрочной или «рабочей» памяти.
Рабочая память — это часть вашего мозга, которая временно хранит и обрабатывает информацию в течение нескольких секунд. Это то, что позволяет вам сосредоточить внимание, противостоять отвлекающим факторам и, самое главное, направлять процесс принятия решений.
На «веб-сайте с низкой сложностью и прототипами» пять-девять «кусочков» рабочей памяти могут обрабатывать такие вещи, как гарантии, описания продуктов, цены или предложения, вместо того, чтобы тратить время на выяснение, куда нажать.
Когда вы отклоняетесь от ожиданий — цена оказалась выше, чем ожидалось, негорманичная цветовая схема и нет симметрии, сайт загружался долго, фотографии были плохого качества — рабочая память обрабатывает эти ненужные «куски» вместо того, чтобы заниматься важными вещами.
Это потому, что рабочая память вызывает долговременную память, чтобы использовать то, что она уже знает, для выполнения задачи. Когда долговременная память не может помочь в обработке информации, поток прерывается, а рабочая память отключается и движется дальше.
Вот почему очень важно знать ваших посетителей, если вы хотите «взломать» их рабочую память с помощью дизайна.
Блоги, которые они читают, сайты, на которых они делают покупки, их браузер, возраст, пол и физическое местоположение — все это поможет вам сделать дизайн «знакомым» и создать правильное первое впечатление.
7 способов создать простой сайт
- Исследуйте свою аудиторию и сайты, которые они посещают больше всего.
Посмотрите тематические исследования об изменениях дизайна в вашей категории. - Создайте коллаж для своего сайта со всеми «рабочими» компонентами, которые вы обнаружите.
- Соблюдайте правила когнитивной беглости.
Расположите элементы там, где посетители ожидают их найти. - Не добавляйте лишние элементы, если они не сообщают о том, что волнует вашего посетителя.
- Меньше значит больше. Одно большое изображение обычно лучше, чем несколько маленьких; один столбец вместо трех; больше пробелов вместо большего количества «элементов».
- Убедитесь, что ваш сайт соответствует ожиданиям по ценам, эстетике, скорости и т. д.
- Сохраняйте оригинальность. «Прототип» сайта не означает, что каждый аспект вашего сайта должен соответствовать этой форме.
Не думайте о своем сайте, как об уникальном произведении искусства.
Сделайте его простым и знакомы для пользователей.
Заключение
Если посетитель при взаимодействии с вашим сайтом не может полагаться на свой предыдущий опыт, он не задумывается, насколько инновационным является ваш сайт. Он просто задается вопросом, почему вещи не там, где они «должны быть».
Создавая дизайн с когнитивной беглостью, вы позволяете посетителям обрабатывать более важные вещи своей рабочей памятью, чтобы им было легче сказать «да».
Больше подобных статей можно читать на моём телеграм-канале (proroas). Пишу о маркетинге и web-аналитике.
Высоких вам конверсий!
Простота в хорошем веб-дизайне / Habr
Простота в дизайне сайта не обязательно должно означать минималистическую эстетику. В простых сайтах просто убираются все ненужные элементы из дизайна, содержимого и кода. В то время как минималистические сайты в основном соответствуют этим критериям, существуют много сайтов, которые никак нельзя отнести к минималистическим, но они все же являются простыми.Данная статья содержит список нескольких преимуществ простого дизайна сайта, также некоторые легкие методы для упрощения процесса дизайна.
1. Более легкая навигация
Простые сайты не содержат ненужную информацию. Это делает навигацию по сайту более легкой по двум причинам: в основном сайты будут иметь меньше страниц и разделов, дизайн сайта более легкий для восприятия, что делает легким нахождение навигационных элементов.
Простой дизайн сайта может быть хорошим решением проблемы юзабилити навигационных элементов. Несколько методов создания простого дизайна для сайта:
- Используйте только одно навигационное меню,
- Убедитесь в том, что навигационное меню отображается на всех страницах сайта,
- Используйте подраздельные меню навигации, чтобы основное меню не было слишком громоздким,
- Не используйте выпадающие меню для навигации. Вместо этого внедрите элементы навигации в сам дизайн. В основном это сделает навигацию по сайту более легкой.
2. Простой дизайн загружается быстрее
Создание простого дизайна в основном приводит к небольшим размерам файлов. А небольшие файлы следовательно загружаются быстрее. Также, если вы будете придерживаться простого кода сайта, то не будете включать несколько списков стилей, вызывать несколько JavaScript файлов или же большое количество любого другого контента, который увеличит количество HTTP запросов. Быстро загружаемые и быстро работающие сайты будут лучше приняты пользователями.
3. Контент более легкий для восприятия
Когда ваш дизайн не содержит много трудных для восприятия декоративных элементов, содержимое сайта занимает главное место.
Одно исследование показало, что 79% пользователей прошлось по страницам сайта, но лишь 16% пользователей прочло все от начала до конца. Лучше всего работать с этими пользователями, которые просто прошлись по сайту, чем пытаться бороться с ними. Ставя контент на первом плане и в центре страницы, сделает его более легким для восприятия пользователей. Эти пользователи посчитают ваш сайт более удобным для пользователя и вероятнее всего посетят и в будущем.
4. Простые сайты легче создавать
Если дизайн вашего сайта простой, то и код соответственно будет таким же. Создание дизайна с простым макетом, с одним или двумя страницами шаблона и простой типографикой будет намного быстрее, чем создание сайта с 8 разделами (каждый с разным шаблоном страницы), трудной типографикой и фоном, который требует трудного макетирования и программирования.
Просто будьте осторожны с созданием сайта, который выглядит простым, но на самом деле является довольно сложным. Стремитесь сделать код как можно легким. Иногда просто делая мелкие изменения элементов можно достичь упрощения кода сайта без заметного изменения дизайна.
5. Простой код легче отладить
Если ваш код упрощен, в нем легче найти ошибки. Если у вас есть список стилей с 300 разными свойствами, будет намного труднее определить в чем именно проблема чем если бы у вас было всего 30 свойств.
Ищите пути для упрощения кода с самого начала. Комбинирование CSS свойств и определений может сделать код намного короче. Комбинирование списков стилей и JavaScript файлов тоже весьма упростит весь код сайта. Прежде чем загружать файлы на сервер, воспользуйтесь преимуществом специальных программ, которые будут удалять ненужный контент из ваших списков стилей, скриптов и других файлов (после очистки просто убедитесь, что все работает как надо).
6. Чем меньше размеры файлов, тем меньше места они займут на сервере
Уже упоминалось, что простые сайты будут иметь небольшие размеры файлов по сравнению со сложными. Это означает, что ваши сайты будут занимать меньше места на сервере и сайт не будет использовать много трафика. В то время, как это не проблема для маленьких сайтов, которые имеют не более чем 1000 посетителей в месяц, для сайтов с большим количеством посещений это может быть хорошим способом для экономии. Некоторые минималистические сайты с несколькими изображениями будут иметь размер меньше 100кб, в то время как более сложные сайты могут достичь до 1мб. Это значит, что ваш легкий сайт будет использовать в 10 раз меньше трафика, чем сложный и тяжелый. Если у вас есть много содержимого или посетителей, то будет лучше упростить сайт и этим уменьшить размер файлов.
Удалите ненужные декоративные элементы
Многие дизайны сайтов имеют большое количество декоративных элементов, которые на самом деле не служат никакой цели. В то время как необязательно убрать абсолютно все декоративные элементы из дизайна, стоит убрать хотя бы некоторые из них. Часто это способствует тому, что ваш сайт становится более легким для восприятия и более элегантным.
Элементами, которые могут быть удалены или упрощены, могут быть границы изображений, тени, дополнительные изображения в шапке и в футере сайта и дополнительные изображения на отдельных страницах (в большинстве случаев достаточно пары изображений).
Спросите у себя – этот элемент действительно такой важный?
Это главный вопрос при создании простых сайтов. Вы должны задавать себе этот вопрос насчет каждого элемента дизайна, кода или содержимого.
Посмотрите, какие элементы на вашем сайте могут быть скомбинированы. Есть ли страницы, которые могут быть скомбинированы в одну страницу? Можете ли вы комбинировать стили для упрощения списков стилей? В вашем дизайне или коде наверняка есть элементы, которые могут быть скомбинированы.
Убедитесь в том, что ваш код настолько же прост как и дизайн
Очень многие дизайнеры фокусируются на дизайне и не обращают должного внимания на код шаблона. Код шаблона некоторых простых сайтов абсолютно беспорядочен. Убедитесь в том, чтобы разметка вашей страницы была настолько простой насколько вы сможете сделать. Это может быть уменьшение количества стилей в вашем списке стилей или количество эффектов JavaScript, которые вы используете. Это также означает, что надо писать хороший, соответствующий стандартам код.
Также это означает, что вы должны выбрать соответствующий CMS для своего сайта. Некоторые CMS весьма сложные и, в то время как некоторые сайты пользуются этой сложностью, те же CMS могут быть губительны для очень многих сайтов. Выберите CMS, который имеет только те функции, которые вам требуются или же в котором есть возможность включать или отключать функции при надобности.
Ниже следуют несколько примеров превосходных простых дизайнов сайтов, которые дадут вам идеи для упрощения дизайнов ваших сайтов.
Подборка простых и удобных сайтов
Конечно же, всем без исключения нравятся красивые и впечатляющие дизайны. Но основным элементом его, все же, является контент, и каждый дизайнер должен относиться к этому с ответственностью. И тут появляются вопросы: где необходимо расположить контент, как облегчить к нему доступ, добиться четкой структуры и юзабельности в навигации, какие использовать цвета и шрифты. И сделать это надо так, чтобы все гармонировало и дополняло дизайн.
В этой подборке представлены 63 примера уже созданных элегантных, простых, удобных и юзабельных сайтов.
Эти сайты сочетают в себе гармонию цветов и шрифтов, обладают четкой структурой, доступны и легки в навигации для посетителя.
1. 31Three
2. North x East
3. Youtilize.com
4. Oaktree Creative
5. CodeIgniter
6. WebRevolutionary
7. Pop Labs
8. nPanorama.ru
9. Creative Binge
10. Designwise Studios
11. Mike McFarlane Landscape Photography
12. Pearsonified
13. BlogMinistry
14. html life
15. Infected-FX
16. Devlounge
17. Putput Comunicacions
18. Savana webhosting
19. Infekta
20. Stoodeo
21. Microsoft Corporation
22. Koder
23. Tappity: Mobile Homepage
24. WorkOne Central
25. Rifidi | Software Defined RFID
26. Pixel House
27. ~ VEDA ~ Healthy Indian Takeout & Eatery
28. Gaby Lopez
29. Versions — Mac Subversion Client
30. Ted Lermontov
31. Pozycjonowanie INHEAD Krakow
32. WorkHabit.org
33. Sonze
34. Corporate Image
35. Frazier Media
36. KellerAdv
37. Made by Cocoon
38. elan3.com
39. Erratic Wisdom
40. Design View / Andy Rutledge
41. Systima Technology
42. Eden Creative Communities
43. Pownce
44. Waggener Edstrom Worldwide
45. WallCandyArt
46. EMS | Matthew Soriano
47. Blues Sklep
48. plasq.com
49. sr28 Web Design
50. Warpspire
51. MacZone
52. The 5th Avenue Theatre
53. The Knowledge Well
54. Palm, Inc.
55. Dion.nu Design
56. FreeSwell Studios
57. Knoxville Life Church
58. Startup Search
59. Footnote
60. troovy
61. FF Maria Raisenmarkt
62. JoshLockhart.com
63. Made by Mark Dearman
Автор – smashingmagazine
Комментарии
Оставить ответ
Похожие статьи
Случайные статьи
Как сделать дизайн сайта простым и удобным. / Habr
Создание простого дизайна сайтов очень сложная задача. Но у такого подхода есть неоспоримые преимущества.
Конечно, главным из них является скорость их загрузки. Пользователю будет проще пользоваться этим сайтом. Простота – это не всегда минимализм. В современном интернете много сайтов, которые явно перегружены не только информацией, но и графикой. Да, в вопросе оформления они уникальны, но они не всегда удобны в использовании.
Сейчас, условно все сайты в интернете можно разделить на несколько категорий. К первой из них относятся сайты, сделанные по шаблонам и использующие распространённые cms. Такие сайты просто перегружены информацией. Их юзабилити крайне низкий.
Ко второй можно отнести сайты сделанные самостоятельно, либо фрилансерами. Пользователь сам создающий сайт часто допускает ошибки, которые сводят всю работу к нулю. При заказе работы у фрилансеров велика вероятность получения шаблона, пусть и переделанного.
К третьей категории относятся сайты сделанные дизайн студиями. Но здесь уже не всё так просто. Часто бывает трудно убедить заказчика, что простой дизайн ориентирован в первую очередь на посетителя. Ведь сделать сайт, наполненный, по максимуму, графическим материалом может каждый, а подобрать правильное сочетание намного сложнее. И если у заказчика будет стоять выбор между красивым сайтом и сайтом простым, но удобным, побеждает первый вариант.
Возвращаясь к созданию простого дизайна сайтов, перечислим преимущества, которые получают пользователи, заказчик и разработчик. Для пользователей это быстрая загрузка, соответственно приходиться меньше ждать. Такие сайты становится легче читать, не приходиться искать среди большого количества изображений нужную информацию. Главным преимуществом становится простота пользования. Для заказчика это быстрая разработка, внедрение, поддержка. Проще осуществить редизайн. Для разработчика больше времени продумать мелкие детали, больше остаётся времени на творческую работу.
Автор этой статьи никого не призывает к созданию сайтов, у которых кроме колонки с информацией в центре страницы и логотипа вверху ничего нет. Всему должна быть мера. Создание простого дизайна требует определённой смелости от разработчика. Не все в состоянии это понять. Все элементы, находящиеся на странице должны выполнять какую-то свою задачу и не должны просто занимать место. Существует золотое правило дизайна, которое не все знают, а кто знает, часто забывает, либо не придерживаются его. Всё, что пользователь видит на вашем сайте должно ему помогать найти то, что он ищет. И кроме того должно способствовать достижению целей самого сайта.
Оригинал http://studiomaximum.net
Дизайн сайта – просто о важном
Говоря совсем простым языком, дизайн сайта – это его внешний вид плюс средство навигации. А еще проще: «лицо» и кнопки.
При этом, разработка дизайна сайта – занятие кропотливое и ответственное, требующее специальных знаний и навыков, (например, языков HTML и CSS, графических редакторов). Без творческого подхода и пространственного мышления создание дизайна сайта также невозможно.
На вопрос, «как создать дизайн сайта?», ответов тоже несколько:
- Заказать веб-дизайн в студии. Этот вариант подходит, прежде всего, занятым и обеспеченным веб-мастерам. Он требует достаточно солидных финансовых вложений, но позволяет задействовать в работе над создаваемым сайтом полноценную бригаду специалистов. Опытных мастеров, которые способны взять на себя ответственность за все виды работ, начиная от анализа целевой аудитории и разработки концепции и заканчивая адаптацией и продвижением ресурса;
- При помощи конструктора сайтов. В сети доступно большое количество программ и инструментов, с помощью которых сайт можно сделать вручную и самостоятельно, не обладая специальными знаниями и умениями. Стоит лишь выбрать красивый и оригинальный шаблон из предложенных. Однако при таком способе создания сайта может пострадать его концепция и оригинальность;
- При помощи системы управления контентом (CMS). Система управления сайтом (CMS) устанавливается на сервер (хостинг). С ней можно работать так же, как с конструктором, только CMS обладает гораздо большим выбором инструментов, эффектов, шаблонов и дополнений;
- Создание сайта «с нуля». Для этого нужно изучить хотя бы один язык веб-программирования, работу с базами данных, графическими редакторами и т.д. Процесс трудоемкий, но основательный.
Современный дизайн сайта бывает трех видов:
• Жесткий. Все «блоки» — элементы сайта, обладают фиксированным размером, который заранее задается в пикселях или картинкой и объектом, который поместили в блок:
• Резиновый или адаптивный. Размер блоков задается в процентах от ширины экрана. Это позволяет изображению на экране адаптироваться под просмотр на разных устройствах – от компьютерного монитора до экрана мобильного телефона или планшета:
Жесткий дизайн более приемлем для веб-мастеров, потому что его, грубо говоря, легче делать. Но он не слишком приятен интернет-пользователям, потому что на всех экранах, не подходящих под заданный размер, они будут видеть искаженную картинку – растянутую или сплющенную.
Адаптивный дизайн удобен для пользователей, но создавать его труднее и дольше.
По внешнему виду, а не техническим характеристикам, дизайн сайта делится на два основных направления:
• Скевоморфизм. Стремится к использованию натуральных и реалистичных изображений, текстур, теней, бликов и т.д.:
• Плоский дизайн сайта. Его принципы – это отсутствие излишних эффектов, простота линий и заливки, использование 2D графики:
Однако, веб-мастера нередко позволяют себе комбинировать оба стиля, например, размещая плоские объекты на объемном фоне:
Макет сайта или отдельные его элементы можно легко и быстро создать в графическом редакторе Adobe Photoshop, без которого в последнее время не обходится ни один проект веб-дизайна. В Photoshop можно идеально расчертить макет, создавать фоны, скины, подбирать цветовую гамму, редактировать фотографии, делать фотомонтаж и многое-многое другое.
Дизайн сайта в фотошопе трудно упрекнуть в каких-либо недостатках. Возможно, трудности может составить лишь сложность программы (как дань за ее многофункциональность), и как следствие: временные затраты для ее изучения и применение усилий для практики.
Какой дизайн для сайта лучший? В «Ководстве» Артемия Лебедева этой теме посвящена целая глава, которая состоит всего лишь из одного предложения: «Дизайн должен быть простым». Чтобы посетитель в нем не запутался.
Выводы делать только Вам…
Простой хороший веб-дизайн
Словосочетание «простой дизайн» поначалу у многих вызывает нервный тик. А как же иначе, ведь воображение услужливо начинает рисовать сайты, оформление которых выполнено в лучших традициях минимализма. Хотя если дизайн ресурса называют простым, то это еще не означает, что его внешний вид будет нагонять уныние. Когда создают простой сайт, стараются исключить все лишнее элементы из кода, содержимого и дизайна. Другими словами, любой сайт, качество которого не внушает опасений, можно смело назвать простым.
Почему же упрощение сайта является такой важной задачей? Давайте разберемся.
Преимущества простого веб-дизайна
1. Упрощается навигация;
В простых сайтах отсутствует ненужная информация. Дело в том, что сайты такого рода имеют меньше страниц и разделов. Кроме того, сам дизайн намного лучше воспринимается пользователем. А это помогает быстрее находить необходимые навигационные элементы. За счет этого навигация становится более легкой.
2. Дизайн загружается молниеносно;
Чем проще создаваемый дизайн, тем меньше размеры используемых файлов. Как известно, файлы небольших размеров быстро загружаются.
Помимо этого стоит проследить за тем, чтобы код сайта был не особо сложным. Это позволит избежать включения нескольких списков стилей, вызова нескольких Javascript файлов или же большого количества иного контента, повышающего количество HTTP запросов. В итоге весь сайт начинает работать на удивление быстро. И если медленные ресурсы только раздражают пользователей, то «летающие» сайты всегда воспринимаются положительно.
3. На контент начинают обращать внимание;
Это происходит, как только исчезают лишние элементы декора. Тогда содержимое сайта снова становится востребованным.
Недавно было проведено исследование, результаты которого показали, что 79% пользователей пролистывают страницы сайта, но лишь 16% пользователей читают все от начала до конца. Бороться с теми, кто просто просмотрел сайт, бесполезно. С такими пользователями нужно работать, это принесет больше пользы.
К примеру, основной контент можно разместить в центре страницы, это привлечет к нему дополнительное внимание. К тому же, когда дизайн не мешает знакомиться с содержимым, сайт запоминается как легкочитаемый и удобный, а это ли не достоинство.
4. Меньше проблем с созданием;
Чем проще дизайн, тем проще код. Логично предположить, что создание дизайна с простым макетом, с одной или двумя страницами шаблона и упрощенной типографикой не займет много времени. В отличие от создания сайта с 8 разделами, каждый из которых имеет специфический шаблон страницы, сложной типографикой и фоном, требующем трудного макетирования и программирования.
Если вы хотите сделать сайт, который будет только выглядеть простым, а на деле окажется достаточно сложным, то осторожность не помешает. Нужно будет следить за тем, чтобы код все равно оставался максимально легким. Иногда даже мелкие изменения элементов могут помочь упростить код сайта без заметных поправок дизайна.
5. Код отлаживается «на ура»;
В простом коде найти возможные ошибки гораздо проще. Ведь если есть список стилей с 300 разными свойствами, то намного труднее определить, где именно проблема. А если бы свойств было всего 30, то ситуация упростилась бы в разы.
Стремиться к упрощению кода нужно изначально. Комбинирование CSS свойств и определений может сделать код значительно короче. А комбинирование списков стилей и Javascript файлов еще больше поможет в этом благородном деле. Прежде чем загружать файлы на сервер, имеет смысл воспользоваться преимуществом специальных программ, которые будут удалять ненужный контент из списков стилей, скриптов и других файлов. Главное, после очистки не забыть убедиться в том, что все работает идеально.
6. «Легкий» сайт использует меньше трафика.
Ранее мы упоминали о том, что простым сайтам не понадобятся файлы больших размеров. А это приведет к тому, что такие ресурсы будут занимать меньше места на сервере. Кроме того, им не потребуется много трафика. По приблизительным подсчетам, такой «облегченный» сайт будет использовать в 10 раз меньше трафика, чем сложный его аналог. Для тех сайтов, которые посещают не более 1000 человек в течение месяца, это не проблема. А вот для более популярных ресурсов такой подход будет отличным шагом в сторону экономии.
Как сделать сайт проще?
Все достаточно просто, стоит лишь запомнить несколько основных истин.
1. Не все декоративные элементы одинаково полезны;
Многие сайты могут похвастаться оформлением, богатым эффектными, но чаще всего бесполезными декоративными элементами. Когда подобных «украшений» слишком много, сайт не только выглядит не гармонично, но и теряет свою функциональность. Поэтому стоит окинуть критическим взглядом свою работу и подумать над тем, действительно ли каждый присутствующий элемент является необходимым. Вероятно, некоторые из них все же придется удалить. Но чаще всего такие перемены приводят к отличнейшим результатам. Ведь не всегда еще одна картинка в «шапке» сайта придает ресурсу оригинальность и шарм. Нередко она даже портит общее впечатление о странице. То же касается теней, границ изображений, дополнительных картинок и т.д.
2. Главный вопрос: «Этот элемент действительно настолько важен?»;
И задавать его во время создания сайта придется не один раз. Причем это касается абсолютно любого элемента дизайна, кода или содержимого. Если ответить на такой вопрос становится все сложнее, то стоит вспомнить о возможности комбинации. Вероятно, какие-то страницы вполне можно объединить в одну. А может, подобную процедуру стоит проделать со стилями, дабы упростить их списки? Вариантов масса.
3. Там где простой дизайн, там и простой код;
Иногда чрезмерно увлекшись дизайном люди напрочь забывают о коде шаблона. В итоге в нем поселяется тотальный хаос. А кому это нужно? Разметка страницы должна быть настолько простой, насколько это возможно. Чтобы добиться этого, можно уменьшить количество стилей в списке или число используемых эффектов Javascript. Естественно, код должен быть хорошим, полностью соответствующим стандартам.
Хотя многое зависит и от выбранной CMS, ведь некоторые из них достаточно сложные. Оптимальный выбор — CMS, максимально соответствующая планируемым функциям сайта. Отличным вариантом будет также CMS, в которой большую часть функций можно включать или выключать.
4. Залог успеха — простая навигация.
Сделать это совсем несложно. Достаточно будет начать использовать одно навигационное окно и проследить за тем, чтобы оно отображалось на всех страницах сайта. Подраздельные меню навигации также могут помочь. Они сделают основное меню менее громоздким. А вот «выпадающие» навигационные меню — не лучший выбор. Практичней будет сам дизайн оснастить навигационными элементами.
Отличные примеры
Знакомство с некоторыми примерами простых сайтов будет не лишним.
via noupe.com
Красивый дизайн сайта: правила и ошибки создания
Ко мне недавно обратился друг и попросил помочь ему, сделать красивый дизайн молодому сайту. Предложение было заманчивое, так как с дизайном сайта я раньше не работал, но попробовать стоило, так начинать же когда-то надо.
Сперва посмотрите мою новую подборку под названием «Самые красивые сайты интернета», где я для вас подготовил лучшие сайты со всего мира в плане графики.
Просмотрев много красивых сайтов с довольно таки неплохим дизайном я пришел к выводу, что работа мне предстоит нелегкая.
Когда на сайт приходит посетитель, он первым делом обращает свое внимание на дизайн данного сайта, чем красивее дизайн и привлекательней, тем лучше.
Однако не стоит друзья забывать и о самом главном — это о контенте, так как ради него человек и приходит к вам на страницу.
Если вы будете гнаться только за созданием красивого дизайна и забудете про написание полезного контента, тогда такой сайт будет неактуальным.
Приведу пару пунктов, на которые надо обращать внимание при создании красивого сайта:
1) Создайте сайт легким по весу картинок и всей графики. Зачем, чтобы страницы сайта очень долго грузились, а то посетитель не захочет долго ждать и уйдет от вас.
2) Сделайте сайт простым в использовании, никаких замудреных меню быть не должно.
3) Подберите красивое сочетание цветов на сайте, постарайтесь добиться максимального баланса.
4) Задумайтесь о том, что посетители будут приходить к вам с различных браузеров, даже с мобильных телефонов, поэтому не поленитесь посмотреть на сколько красиво он там отображается.
5) По возможности я вам советую отдать предпочтение только одному шрифту.
6) Не перегружайте страницы сайта большим количеством баннерной рекламы, это вызовет захламленность сайта. Ставьте примерно 1 или 2 баннера, но не больше.
7) К примеру у меня на компьютере раньше не было установлено флеш-плеера, поэтому сайты где было сделано много флеш-анимации вызывали только мое раздражение. Поэтому подумайте и о таких людях.
8) Ни в коем случае не ставьте звуковых эффектов на сайт, оно реально мешает и приедается.
Ошибки в дизайне сайтов
Вы должны понимать, что создавать сайты это не простое дело, а тем более красивые. Большинство дизайнеров допускает ряд непозволительных ошибок, которые могут отпугнуть посетителя.
Запомните главные ошибки, которые допускают начинающие веб-дизайнеры:
1. Яркий фон, отвлекающий от содержимого сайта.
2. Несочетаемые цвета в оформлении страницы.
3. Фреймы, так как они порождают массу неудобств для пользователя. К примеру, такую страницу нельзя добавить в закладки.
4. Фиксированная ширина страницы.
5. Наличие горизонтальной прокрутки страницы.
6. Открытые пустые страницы или страницы, находящиеся в стадии разработки.
7. Flash-Анимация, которая не только отвлекает от основного содержимого, но и мешает при ознакомлении с сайтом.
8. Выпадающее меню, в котором приходится долго искать нужный раздел сайта.
9. Открытие ссылок и разделов меню в новом окне.
10. Обилие баннеров и рекламных блоков. Они должны использоваться в меру.
11. Внезапно всплывающие окна с рекламой или любой другой информацией.
12. Автоматически проигрываемые медиафайлы, особенно, если пользователь не имеет возможности остановить проигрывание файла.
13. Наличие на странице пустого, незаполненного пространства. Это касается верхней части сайта, пустых боковых колонок.
14. Отсутствие каких-либо картинок. В частности, в шапке сайте.
15. Наличие анимационных изображений.
16. Обилие картинок и фотографий на сайте.
17. Слишком «тяжелые» изображения, которые долго загружаются.
18. Наличие большого количества визуальных элементов – кнопок, картинок, шрифтов или так называемый визуальный шум. Всего на странице должно быть не больше 9 отличных друг от друга элементов.
19. Отсутствие поиска по сайту.
20. Отсутствие контактной информации, формы связи с владельцами или администраторами сайта.
21. Неправильно оформленная страница ошибки.
22. Расположение элементов сайта в необычных местах. К примеру, форма для регистрации на сайте всегда располагается в верхней части страницы.
23. Ошибки в меню, контактной информации.
24. Отсутствие кнопок «Назад», «На главную» на страницах сайта.
25. Сложный для прочтения шрифт на кнопках или в меню сайта.
26. Использование нестандартных шрифтов, которые отображаются не на всех компьютерах.
27. Разнообразные типы, размеры и цвета шрифтов, используемые в оформлении страницы. В дизайне следует использовать не более 5 вариантов шрифта.
Ну а если хотите узнать, как я сделал красивый дизайн и выручил своего друга, следите за обновлениями моего блога.