Как делать красивые сайты
Содержание
- Что делает хороший дизайн главной страницы сайта
- Вдохновляющий веб-дизайн: 16 лучших дизайнов главной страницы
- 1) FreshBooks
- 2) Airbnb
- 3) Mint
- 4) Dropbox(Consumer)
- 5) Dropbox(Business)
- 6) Whitehouse.gov
- 7) 4 Rivers Smokehouse
- 8) Cobb Pediatric Therapy Services
- 9) Jill Konrath
- 10) Evernote
- 11) Telerik by Progress
- 12) Boxbee
- 13) eWedding
- 14) Basecamp
- 15) charity: water
- 16) TechValidate
В интернете огромное количество сайтов и почти каждый из них по своему отличается, конечно бывают и просто коми дизайна, но как правило каждый вносит свою лепту в дизайн своего сайта, и часто люди допускают элементарные ошибки в веб дизайне не зная элементарных правил. Так вот в этой статья я дам 10 советов как сделать красивый сайт.
Любой человек, заходя на сайт в первую очередь видит его дизайн и естественно первое впечатление о сайте начинает формироваться на основе увиденного, чем сайт красивее, стильней и т.д. тем он более привлекателен для посетителей, но поверьте каким бы красивым не был ваш сайт без хорошего контента, он ни когда не будет популярен!, это главное и эта ошибка многих веб-мастеров, которые в погоне за дизайном забывают о контенте, юзабилити и т.д.
И так давайте немного разберемся и разложим по пунктам основные правила:
- Не стоит перегружать страницы графикой, всего должно быть в меру, бывают такие случаи что практически каждую ссылку на сайте пытаются сделать графической… это ни к чему хорошему не приводит, во первых повышается вес страницы и соответственно время её загрузки, а во вторых когда слишком много графики это не красиво, помните «все гениальное просто».
- Постарайтесь сделать на сайте как можно более удобную и понятную навигацию по разделам и страницам, это упростит изучение вашего сайта пользователям и будет большим плюсом, поскольку часто встречаются сайты в которых можно просто заблудиться и не найти нужной вам информации или какие либо графические ссылки которые вообще непонятно куда ведут.
- Не переборщите с цветами, ваш сайт должен быть исполнен в единой цветовой гамме, не надо хватать все цвета, которые вам понравятся, для этого существую специальные палитры цветов, в которых подобраны те цвета которые сочетаются.
- Если вы используете резиновую верстку сайта т.е. не фиксированные размеры в px, а в %, то не забудьте проверить как ваш сайт будет смотреться при разных разрешениях в разных браузерах, как правило дизайн оптимизируют под следующие разрешения: 1024×768, 1280×1024, 1440×900, 1650×1080, 1920×1080.
- Используйте на сайте 1 ну максимум 2 вида шрифтов, иначе ни к чему хорошему кроме раздражения и напряжения глаз посетителя это не приведет.
- Ссылочная структура сайта, должна быть максимально простой и удобной чтобы человек мог получить доступ к любой странице сайта не более чем трех щелчков мыши.
- Не увлекайтесь баннерной рекламой, допустимо 1-2 баннера разных размеров но не боле иначе ваш сайт будет мигать как новогодняя елка и тем самым раздражать глаза посетителя, да и на дизайне это положительно не скажется.
- Всегда задавайте в теге body, цвет страницы, поскольку в некоторый браузерах бывает стандартный цвет не белый, а черный, или сам пользователь настраивает фон по другому и ваш сайт тогда будет смотреться совсем не так как вы хотели.
- Если у вас большое количество материала на сайте или вы планируете в ближайшем будущем значительное расширение, то лучше сразу сделать поиск по сайту чтобы он гармонично вливался в дизайн.
- Старайтесь отказаться от использования FLASH на сайте, поскольку не всегда у ваших пользователей стоит FLASH-плеер и соответственно они могут просто не увидеть половину вашего сайта и к тому же если флэшь используется как навигация по сайту.
Конечно, это далеко не полный перечень советов, но благодаря этим 10 советам вы сможете не допустить тех ошибок, которые совершают многие, и сделать сайт красивым и понятным.
Дата публикации:2009-12-26
Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!
Дизайн и структура Вашего сайта, это одно из самых главных правил успеха. Чем креативнее дизайн тем больше запоминающимся будет Ваш сайт, а чем оригинальнее структура, тем легче пользователь ориентироваться на сайте. Таким образом появляется больше шансов, что человек купит товар или же воспользуется Вашими услугами.
Вот по этому сегодня я и хочу представить Вам подборку современных и оригинальных сайтов, с крутым дизайном и очень простой и понятной навигацией. Я думаю, что у этих мастеров, которые создавали это творение стоит многому поучиться. Так что учитесь и вдохновляйтесь.
Для любой компании главная страница сайта – виртуальная парадная дверь. Если посетителю не нравится то, что он видит, не сомневайтесь, он нажмет кнопку « Назад ».
Как сделать оформление сайта привлекательным? При этом он должен быть не просто красивым – он также должен работать. Вот почему самые лучшие домашние страницы в этом списке выигрывают не только в красоте, но и в гениальности.
Что делает хороший дизайн главной страницы сайта
1) Дизайн главной страницы четко отвечает на вопрос «Кто я?», «Что я предлагаю?» и/или «Что пользователь может сделать здесь?»
Если вы представляете хорошо известный бренд ( например, Coca-Cola ), вам может сойти с рук отсутствие описания того, кто вы и что вы делаете. Но большинство компаний должны отвечать на эти вопросы, так чтобы каждый посетитель знал, что он находится в « нужном месте ». Если пользователи в течение нескольких секунд не смогут понять, что вы делаете, долго они не задержаться.
2) Резонанс с целевой аудиторией
Главная страница должна говорить с целевой аудиторией на ее языке. Лучшие оформления сайтов примеры избегают « корпоративной абракадабры » и устраняют все лишнее и отвлекающее.
3) Сообщение о ценном предложении
Когда пользователь заглядывает на главную страницу, его нужно заставить остаться. Она является лучшим местом, чтобы выразить смысл своего товара или услуг в одном предложении так, чтобы пользователь решил остаться на вашем сайте и не ушел к конкурентам.
Все варианты дизайна, рассмотренные ниже, весьма удобны: на них легко ориентироваться, на них нет « кричащих » объектов. Например, флэш-баннеров, анимации, всплывающих окон или чрезмерно сложных и ненужных элементов. Многие из них также оптимизированы под мобильные устройства, что очень важно в современных условиях.
5) Включает в себя призыв к действию (СТА-элемент)
На каждой из рассмотренных ниже главной странице эффективно использованы первичный и вторичный призывы к действию, чтобы направить посетителей к следующему логическому шагу. Например, « Бесплатная пробная версия », « Купить сейчас » или « Подробнее ».
Помните, что цель главной страницы — удержать посетителей на сайте и провести их до конца воронки конверсии. СТА-элемент говорит им, что делать дальше чтобы, пользователи не испытали потрясение и не растерялись. Что еще более важно, СТА-элемент превращает главную страницу сайта в продающую или привлекающую потенциальных клиентов.
6) Постоянно изменяется
Лучшие главные страницы не всегда статичны. Некоторые из них, как WhiteHouse.gov , постоянно меняются с учетом потребностей, проблем и вопросов пользователей.
7) Использует отличный общий дизайн
Хорошо продуманное оформление сайтов — залог успеха в построении доверительных отношений пользователей с брендом, настройке связи с целевой аудиторией и продвижении в воронке конверсии. По сути, эти главные страницы эффективно используют размещение CTA-элементов , пробелы, цвета, шрифты и другие вспомогательные элементы.
Вдохновляющий веб-дизайн: 16 лучших дизайнов главной страницы
1) FreshBooks
Этот дизайн гениален, потому что:
- Прост в использовании. Возникает много споров о том, какие домашние страницы лучше — короткие или длинные. Если вы выберете последний вариант, то должны обеспечить легкое прокручивание и чтение. Эта страница выглядит практически как история;
- Удачно использовано сочетание цветов и позиционирование первичных СТА-элементов . Когда заходите на главную страницу сразу становится понятно, что компания хочет привлечь ваше внимание;
- Очень заманчивый текст на СТА-элементе : « Попробуйте бесплатно в течение 30 дней »;
- Эффектный подзаголовок: « Для более чем 5 миллионов людей, использующих FreshBooks , отправлять счета и следить за расходами теперь не проблема ». Это заявление привлекательно для целевой аудитории, потому что освоение бухгалтерского программного обеспечения, как правило, « мучительно сложно » для фрилансеров и владельцев малого бизнеса.
2) Airbnb
- Это оформление главной страницы сайта пример впечатляет: она встречает посетителей полноэкранным видео с красивыми кадрами, высокого разрешения. Она рассказывает о путешественниках, которые проводят время, как будто они местные жители: готовят пищу на кухне, покупают местные сыры. Выглядит очень естественно и достоверно;
- Прямо по центру главной страницы располагается форма поиска с местом назначения и датой прибытия/отбытия, которую ищет большинство посетителей, направляя пользователей к следующему логическому шагу;
- Форма поиска « умная «: она автоматически отобразит последний поиск пользователя, если тот авторизован;
- Основной призыв к действию (« Поиск «) контрастирует с фоном и выделяется, а вторичный призыв к действию виден в верней части.
3) Mint
- Это супер простой дизайн с сильным заголовком и подзаголовком без сленга;
- Домашняя страница обеспечивает безопасную, но спокойную атмосферу, что очень важно для продукта, который обрабатывает финансовую информацию;
- Он также содержит простой и убедительный призыв к действию: « Зарегистрируйтесь бесплатно «. Дизайн CTA также замечателен — иконка в виде замочка попадает точно в цель, сообщая о безопасности еще раз.
4) Dropbox(Consumer)
- Главная страница сайта Dropbox — пример предельной простоты. Ограничено использование рекламы и видеороликов, а также объединено все фоновое пространство;
- По статическому скриншоту выше трудно понять, но этот оформления сайтов вариант привлекает внимание тонким использованием причудливой анимации в графике;
- Подзаголовок — простой, но мощный: « Открывайте свои файлы где угодно и на любых устройствах, и без труда предоставляйте к ним доступ ». Не нужно расшифровывать какую-либо терминологию, чтобы понять, что делает Dropbox ;
- Акцент на одном первичном призыве к действию: « Зарегистрируйтесь бесплатно «.
5) Dropbox(Business)
- Это яркий пример обеспечения поддержки сайта для разной аудитории. Она отличается от главной страницы, которая изначально была создана для потребителя ( смотрите выше ). Бизнес-пользователи требуют больше информации, а также дополнительное подтверждение того, что Dropbox(Business) — безопасное и масштабируемое решение для компаний ( проблему восприятия Dropbox решает непосредственно на своей домашней странице );
- Dropbox по-прежнему продолжает применять простой дизайн и брендинг. Он включает в себя только то, что важно: большое изображение с поддержкой рекламы и кнопку « Попробуй бесплатную 30-дневную ознакомительную версию «, призывающую к действию.
6) Whitehouse.gov
- Создание сайта, который выступает за целую нацию — задача не из легких. Whitehouse.gov постоянно меняется, чтобы отразить главные проблемы и приоритеты. Тестирование и оптимизация — ключевой компонент блестящего дизайна домашней страницы;
- Что особенно замечательно в Whitehouse.gov так это отличие от большинства сайтов, связанных c правительством. Он имеет чистый дизайн и способствует развитию сообщества;
- Довольно легко найти то, что вы ищете, когда оказываетесь здесь. А если вы не можете сразу найти то, что нужно, есть удобное поле поиска.
7) 4 Rivers Smokehouse
- В сочетании с большой картинкой для оформления сайта заголовок « ГРУДИНКА. 18 лет мастерства. Для вашего удовольствия » звучит заманчиво;
- Прокрутка параллакса проведет для вас краткую презентацию услуг, меню и покажет людей, прекрасно проводящих время – прекрасное использование популярного дизайнерского тренда.
8) Cobb Pediatric Therapy Services
- Заголовок и подзаголовок обращаются к эмоциональной стороне посетителей: « Работайте с компанией. Это стоит того. Доверьтесь нам. Мы были там тоже. Мы найдем вам работу там, где вы сможете полностью проявить себя » Это предложение является уникальным и убедительным;
- Заголовок находится на вращающейся карусели, которая учитывает категорию посетителей, от соискателей до людей, ищущих психотерапевта для своих школ;
- Есть несколько путей для посетителей, по которым можно пройти на страницу. Но призы к действию расположены хорошо, сформулированы просто и контрастируют с остальной частью страницы.
9) Jill Konrath
- Дизайн простой и переходит прямо к делу. Из заголовка и подзаголовка сразу понятно, чем занимается Джилл Конрэт ( и как она может помочь вашему бизнесу );
- Также предоставляется легкий доступ к аналитическим материалам Джил , что важно для установления ее авторитета в качестве основного докладчика;
- Легко подписаться на рассылку новостей и установить контакт – два ее основных призыва к действию;
- Включает в себя логотипы новостных каналов и отзывы, как социальное признание – все правила оформления сайта соблюдены.
10) Evernote
- За эти годы Evernote превратился из простого приложения, сохраняющего записи в набор инструментов для бизнеса. Это не всегда легко передать на домашней странице, но Evernote проделал хорошую работу по компоновке возможных сообщений в несколько ключевых преимуществ;
- Эта домашняя страница использует сочетание насыщенных, приглушенных цветов в видео, а также подписи ярко-зеленого и белого цвета, чтобы выделить их на общем фоне;
- После простого заголовка (« Помни все »), взгляд останавливается на призыве к действию « Зарегистрируйтесь Бесплатно ».
11) Telerik by Progress
- « Скучное предприятие » — это не то чувство, которое возникнет, когда вы зайдете на сайт Telerik . Компания предлагает множество технологий и продуктов, использует смелые цвета, интересные дизайны и видеосъемку с энергетикой подобно Google . Одним из важных аспектов является создание обстановки, чтобы посетители чувствовали себя желанными и знали, что имеют дело с реальными людьми;
- Мне нравится простой, выполненный на высоком уровне обзор шести товарных предложений. Это абсолютно понятный способ сообщить о том, что делает компания;
- Реклама несерьезная и легко читается. Они говорят на языке своих клиентов.
12) Boxbee
- Заголовок представляет собой призыв к действию, направленный прямо на целевую аудиторию: предпринимателей, работающих в индустрии хранения данных;
- Оформление главной страницы сайта имеет чистый и простой дизайн. Он подчеркивает заголовок, а затем сразу же демонстрирует первичный призыв к действию;
- Этот первичный призыв к действию выделяется за счет контрастного цвета.
13) eWedding
- Для влюбленных, планирующих важный день, eWedding – прекрасное место для создания свадебного сайта. Домашняя страница не загромождена и включает в себя только необходимые элементы;
- Подзаголовок « Создано более чем 800,000 свадебных сайтов! » — это большое социальное доказательство;
- Включает в себя отличные видеоролики продукта, отличный заголовок и убедительный призыв к действию, который уменьшает сомнения благодаря тексту: « Создайте сайт ».
14) Basecamp
- В течение долгого времени страницы Basecamp были удивительными и здесь можно понять почему. У них всегда эффектные заголовки и умная анимация;
- Призыв к действию выделен жирным шрифтом и находится в верхней части страницы;
- В этом случае компания выбрала домашнюю страницу более похожую на блог, которая предоставляет намного больше информации о продукте.
15) charity: water
- Это не типичный некоммерческий сайт. Большое количество видеороликов, творческой рекламы и использование интерактивного веб-дизайна выделяют его;
- Анимированный заголовок в оформлении сайта — отличный способ собрать множество сообщений в одной строке;
- Правильное использование видео и фото, особенно в плане получения эмоций, которые вызывает действие.
16) TechValidate
- Эта домашняя страница красиво оформлена. Особенно нравится использование белого пространства и контрастных цветов, а также клиент ориентированный дизайн;
- Заголовок ясен и убедителен, как и призывы к действию;
- Также есть отличная информационная иерархия, которая позволяет легко сканировать и быстро понимать страницу.
Данная публикация представляет собой перевод статьи « 16 of the Best Website Homepage Design Examples » , подготовленной дружной командой проекта Интернет-технологии.ру