Каким должен быть хороший сайт

Ошибки в составлении текста о компании

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

Шаблонность: общие фразы

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

Тест на сайте компании, занимающейся установкой пола

Голословность: нет фактов

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

Тест на сайте компании по установке окон

Тест о компании на сайте магазина одежды

Ненужные факты: не в мире клиента

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

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

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

Счетчик в разделе «О нас» веб-студии

Найдите референсы

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

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

Подборку референсов вы можете смело показать заказчику. Так вы вместе выберете подходящий стиль, что избавит от ненужных правок в дальнейшем. Найти множество хороших примеров можно на Behance, Awwwards и Pinterest.

Подборка простых и удобных сайтов

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

В этой подборке представлены 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

Пример #3 — ИТ

Objective: Успешно запустить новую версию нашего основного продукта

• Key Result 1: Получить более 10 тыс. новых регистраций
• Key Result 2: Получить опубликованные обзоры продукта более чем в 15 изданиях
• Key Result 3: Достигнуть отношения подписки к пробной версии более 25%
• Key Result 4: Добиться соотношения платной версии к пробной свыше 50%

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

Как правильно оформить главную страницу сайта услуг

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

• Баннер с оффером, акцией и CTA в первом экране.
• Перечисление всех услуг со ссылкой на отдельные страницы (если услуга одна, то она раскрывается максимально детально).
• Основные преимущества компании.
• Прайс.
• Портфолио, фотографии офиса/салона, видеопрезентация.
• Контактные данные.

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

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

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

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

Чего не должно быть на главной

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

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

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

Главную страницу нужно постоянно совершенствовать: добавлять актуальную информацию, адаптировать под современные требования SEO и юзабилити

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

Гранж

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

• Природные цвета – черный, коричневый, песчаный.
• Фон в виде потертых текстур, кирпичной кладки, каменной стены, бумаги
• Искусственная состаренность
• Шрифты причудливые, гротескные (не переусердствуйте в их выборе! Лучше остановиться на замысловатых вариантах для заголовков, а для остального текста выбрать читаемые рубленные шрифты)

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

Simply Chocolate

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

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

Плиточные концепты

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

Но есть и хорошая новость, в интернете есть платные и бесплатные готовые шаблоны таких дизайнов, но они всё еще для использования в Photoshop.

Instagrid — приложение, которое упрощает работу по этим направлениям.

Коллаж

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

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

Минусы:

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

Паззл или мозайка

Более простой вариант плиточного дизайна. Разрежьте одну фотографию на 9 или 12 частей, используя instagrid, фотошоп или любой подходящий фото-редактор.

Итог может быть информационным, цельным или комбинацией.

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

@imperia_sumok делает достаточно качественные встройки комбинаций концепта в общее ведение.
Сложность: 10 из 10

Преимущества уникального дизайна

Отличайся!

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

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

Удобство и функционал!

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

Подробнее о важности юзабилити читайте здесь ⇒

Впечатление!

Дизайн сайта формирует у посетителя впечатление

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

То готовы ли вы будете рискнуть и купить там что-то? Уверена что нет.

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

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

В итоге, человек оставляет только 1-3 сайта, для более детального ознакомления с услугами, ценами и пр.

Надеюсь вам не надо объяснять, на сколько важно остаться в этой «тройке»

Статус!

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

Реклама!

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

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

Естественное продвижение!

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

Давайте теперь подведем итог…

Уникальный сайт	Сайт на основе шаблона
Плюсы: Узнаваемость бренда Положительное первое впечатление на потенциального клиента/партнера Сайт полностью соответствует ожиданиям Сайт выполняет поставленные задачи Дорогой сайт позволяет повышать цены на товары Конверсия сайта выше Стоимость заявки ниже Естественное продвижение быстрее Минусы: Долго Дорого	Минусы: Поиск подходящего шаблона Кропотливая настройка шаблона Самостоятельный подбор графических элементов Не соответствие ожиданиям Не справляется в полной мере с поставленными задачами Серьезные ограничения по функционалу Конверсия сайта ниже Стоимость заявки выше Естественное продвижение медленнее Плюсы: Дешево Быстро

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

Шаблон и уникальный дизайн просто разные и создаются для разных целей.

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

Значит вам лучше делать сайт на основе шаблона.

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

У меня все.

Дизайн главной страницы сайта

ОþÃÂüûõýøõ óûðòýþù ÃÂÃÂÃÂðýøÃÂàÃÂðùÃÂð ôþûöýþ þÃÂòõÃÂðÃÂàõóþ ÃÂõüðÃÂøúõ, ÃÂÃÂøÃÂÃÂòðÃÂàÃÂõûõòÃÂàðÃÂôøÃÂþÃÂøàø þñÃÂõôøýÃÂÃÂàòÃÂõ ÃÂþÃÂÃÂðòûÃÂÃÂÃÂøõ ò õôøýþõ ÃÂõûþõ. ÃÂðôðÃÂð ôø÷ðùýð â ÃÂþÃÂüøÃÂþòðÃÂàÃÂõûþÃÂÃÂýþõ òþÃÂÿÃÂøÃÂÃÂøõ ÃÂðùÃÂð. ÃÂý ýõ ôþûöõý þÃÂòûõúðÃÂàøûø ÃÂð÷ôÃÂðöðÃÂàÿþÃÂõÃÂøÃÂõûÃÂ. ÃÂþÃÂüþÃÂÃÂøü ýð ýõúþÃÂþÃÂÃÂõ òðöýÃÂõ ðÃÂÿõúÃÂàþÃÂþÃÂüûõýøÃÂ.

æòõÃÂþòþõ ÃÂõÃÂõýøõ

ÃÂÃÂðòøûÃÂýþõ þÃÂþÃÂüûõýøõ ÃÂðùÃÂð ýðÃÂøýðõÃÂÃÂààóðÃÂüþýøÃÂýþ ÿþôþñÃÂðýýÃÂàÃÂòõÃÂþò ø õôøýÃÂÃÂòð ÃÂÃÂøûÃÂ. áÃÂÃÂðýøÃÂàôþûöýàñÃÂÃÂàò þôýþü ÃÂÃÂøûõ, àþôýøü ýðñþÃÂþü ÃÂòõÃÂþò. ÃÂÃÂûø ôûàúðöôþù ÃÂÃÂÃÂðýøÃÂàÿÃÂøôÃÂüÃÂòðÃÂàþÃÂôõûÃÂýÃÂù ôø÷ðùý, üþöõàÃÂûþöøÃÂÃÂÃÂàòÿõÃÂðÃÂûõýøõ, ÃÂÃÂþ ÃÂþôøÃÂàÿþ ÃÂð÷ýÃÂü ÃÂðùÃÂðü. ÃÂÃÂÿþûÃÂ÷ÃÂùÃÂõ ýõ ñþûõõ ÿÃÂÃÂø þÃÂÃÂõýúþò, øýðÃÂõ ÃÂÃÂÃÂðýøÃÂð ñÃÂôõàÿõÃÂÃÂÃÂþù ø üþöõàÃÂð÷ôÃÂðöðÃÂàÿþÃÂõÃÂøÃÂõûÃÂ.

ÃÂôýð üÃÂÃÂûàýð þôýþü ÃÂúÃÂðýõ

ÃÂðöôÃÂù ñûþú øýÃÂþÃÂüðÃÂøø ôþûöõý ÿþüõÃÂðÃÂÃÂÃÂàýð þôøý ÃÂúÃÂðý. ÃÂÃÂôÃÂü ÃÂôþñýõõ ÃÂòøôõÃÂàÃÂõûÃÂýþõ ÃÂþþñÃÂõýøõ ÿõÃÂõô óûð÷ðüø, ÃÂõü ÃÂúÃÂþûûøÃÂàôûàÿÃÂþôþûöõýøÃÂ. ÃÂþôõûøÃÂõ ÃÂÃÂÃÂðýøÃÂàýð ñûþúø ø óûðòýÃÂù ÿþÃÂÃÂû ôûàÃÂõûõòþù ðÃÂôøÃÂþÃÂøø ÿþüõÃÂÃÂøÃÂõ òòõÃÂÃÂàÃÂúÃÂðýð.

tesla.com

ÃÂÃÂûø øýÃÂþÃÂüðÃÂøø üýþóþ, ø ýð þôøý ÃÂúÃÂðý þýð ýõ òûð÷øÃÂ, ÿþôÃÂüðùÃÂõ, üþöýþ ûø õõ ÃÂþúÃÂðÃÂøÃÂÃÂ. ÃÂÃÂûø ýõþñÃÂþôøü òõÃÂàÃÂõúÃÂÃÂ, øÃÂÿþûÃÂ÷ÃÂùÃÂõ úþýÃÂõýÃÂ-ÃÂûðùôààñþúþòþù ÿÃÂþúÃÂÃÂÃÂúþù.

ÃÂýÃÂþÃÂüðÃÂøþýýþõ õôøýÃÂÃÂòþ

àð÷üõÃÂðùÃÂõ þôýþÃÂøÿýÃÂàøýÃÂþÃÂüðÃÂøàò þôýþü üõÃÂÃÂõ. ÃÂõ ÃÂð÷ñøòðùÃÂõ, ýðÿÃÂøüõÃÂ, úþýÃÂðúÃÂÃÂ, ÿþüõÃÂðàøàò ÃÂð÷ýÃÂàÃÂðÃÂÃÂÃÂàÃÂÃÂÃÂðýøÃÂÃÂ. ÃÂÃÂûø ÃÂðÃÂÃÂúð÷ÃÂòðõÃÂõ þ ÃÂþÃÂÃÂÃÂôýøúðÃÂ, ÿÃÂÃÂÃÂàòõÃÂàÃÂðÃÂÃÂúð÷ ñÃÂôõàò þôýþü ñûþúõ. áþñûÃÂôðùÃÂõ ÃÂõüðÃÂøÃÂõÃÂúþõ õôøýÃÂÃÂòþ ø óÃÂÃÂÿÿøÃÂÃÂùÃÂõ øýÃÂþÃÂüðÃÂøÃÂ.

doctor.kharkov.ua

Flat дизайн

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

• Двумерная графика.
• Интуитивно-понятный интерфейс
• Акцент на типографике
• Сочные, сочетающиеся цвета.

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

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

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

1. Быстрота загрузки такого приложения или сайта (векторная графика весит меньше, чем качественный растр)
2. Экономия на разработке, так как не нужно сохранять изображения под расширения разных устройств. Достаточно сохранить их в формате SVG.

«Keep it simple, stupid» — принцип проектирования KISS, утверждает, что большинство систем работают лучше всего, если они остаются простыми, а не усложняются. Был впервые сформулирован специалистами ВМС США, но получил свое распространение в анимационных фильмах и дизайне.