Отличные приемы веб-дизайна, подсмотренные на cайтах Wix
Работа над сайтом — процесс творческий, проверенного способа сделать шедевр не знает никто. Но именно этим веб-дизайн и интересен, в этом и заключается его сходство с другими видами настоящего искусства. Имея под рукой широкий выбор инструментов, дизайнер может экспериментировать и раз за разом придумывать что-нибудь необычное и красивое.
Мы в Wix ежедневно просматриваем десятки сайтов и не перестаем удивляться способностям наших пользователей — многие работы хочется разглядывать бесконечно. Решив показать их вам, мы подумали, что лучше не просто смотреть, но и понимать, с помощью каких функций редактора они сделаны. Поэтому встречайте специальную подборку — с примерами отличных сайтов и идеями, которые вы сможете реализовать самостоятельно.
Классные картинки и бодрые тексты
Если тексты и фотографии одинаково хороши, то это всегда большой плюс. Посмотрите на сайт Butcher & Sons, и вы поймете, о чем речь. Здесь даже не сразу обращаешь внимание на то, что язык — испанский, а просто с интересом все разглядываешь. Мы уверены, что надписи и аппетитные фотографии бургеров понравятся даже вегетарианцам.
Как это сделать: используйте блоки с картинками и текстами, размещайте их в произвольном порядке, смотрите, что получается. За основу можно взять вот этот шаблон — он близок по стилю к Butcher & Sons, и с его помощью вы легко сделаете красивый и не перегруженный макет.
Фиксированный хедер
О, это вечная проблема. Вы хотите сделать модную страницу с длинной прокруткой, но при этом хотите, чтобы пользователям было удобно перемещаться по сайту. Как быть? Добавьте фиксированный хедер, который всегда находится в верхней части экрана. Посмотрите на сайт организации Dare To Wonder: здесь главные четыре раздела вынесены наверх и всегда на виду. Поскольку кнопок всего четыре, и расположены они на прозрачном фоне — они ничего не заслоняют и гармонично вписываются в остальной дизайн сайта.
Как это сделать: к работе над фиксированным хедером нужно отнестись серьезно. Помните, что это элемент, который виден всем и всегда, поэтому он должен быть красивым и удобным. Прежде чем взяться за дело, прочитайте нашу статью, в ней все подробно описано.
GIF-анимация (но только уместная)
Хорошие гифки нравятся всем. Они оживляют статичные страницы и развлекают пользователей. Впрочем, если добавлять их бездумно, то наоборот — раздражают. На сайте музыканта по имени Jaxx все сделано как надо. Анимированная пластинка привлекает внимание пользователей к трекам и вызывает у них нужное ощущение: если нажать на кнопку, то заиграет музыка.
Как это сделать: в редакторе Wix анимированные изображения добавляются так же просто, как фотографии. Нажмите кнопку «Добавить» в левой панели, затем перейдите в подраздел «Фото», выберите из своих фотографий файл с расширением .gif или загрузите его, нажав кнопку «Загрузить».
Красивый hover-эффект
Вы знаете, что кнопки и картинки могут меняться и двигаться в тот момент, когда пользователь наводит на них курсор мышки? Это называется hover-эффект. Мы недавно о нем рассказывали и приводили в качестве примера сайт дизайнера Наоми Кижнер, где фотографии из черно-белых превращаются в цветные. Там все настолько красиво и продуманно, что просто нет слов. Сходите по ссылке и убедитесь сами: на каждое изображение хочется навестись и посмотреть, что с ним происходит. В питерском магазине значков waf-waf тоже нашли оригинальный способ применения этого эффекта.
Как это сделать: зайдите в редактор и последовательно нажмите «Добавить» –> «Кнопки и Меню» — > «Кнопка с Фото». Кликните по появившейся кнопке дважды и загрузите две разные фотографии в панели настроек: для вида по умолчанию и вида при наведении.
Правильный лендинг
У лендинговых страниц вполне конкретная цель — сообщить пользователям нужную информацию и сделать так, чтобы они перешли по предложенной ссылке. Именно поэтому они должны быть понятными, простыми и привлекательными. Для вдохновения можете посмотреть на лендинг, посвященный историческому концерту группы Rolling Stones. Страница информирует о выходе нового альбома, и предлагает посетителям приобрести его на Amazon, все в доступном и приветливом формате. Rolling Stones знают свое дело!
Как это сделать: в редакторе Wix все очень просто, и лендинги — не исключение. Прочитайте вот эту статью, в ней мы объясняем, как сделать по-настоящему эффективный лендинг.
Простота, оригинальность, профессионализм
Если сомневаетесь, надо ли добавлять какой-то элемент или нет, включайте чувство меры. Кто-то скажет, что минимализм в веб-дизайне — сиюминутное увлечение, но пока что это сиюминутное увлечение не собирается сдавать своих позиций. Ресурсы с длинными текстами, кучей баннеров и картинок быстро утомляют, а лаконичность и простота — нет, да и работает это гораздо лучше. Посмотрите на сайт магазина Fitness Mix: он простой, симпатичный и убедительный. Счетчик внизу сайта подсказывает, что подборки музыки для фитнеса пользуются немалой популярностью.
Как это сделать: подумайте, без какой информации на сайте вам никак не обойтись. Начните с самого важного, старайтесь не углубляться в детали и не заниматься украшательствами. Добавить раздел или элемент никогда не поздно, и вы всегда сможете это сделать, если поймете, что в этом правда есть необходимость.
Готовы применить знания на деле? Зайдите в свой аккаунт и начинайте творить! Если у вас еще нет своего сайта на Wix, никогда не поздно начать. Откройте один из наших бесплатных шаблонов в редакторе, и создайте сайт своей мечты.
