Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 395 сообщений
Cообщения с меткой

дизайн сайтов - Самое интересное в блогах

Следующие 30  »
rss_rss_hh_new

Конфликт мнений. Или классический web-дизайн. Нужно прекращать?

Вторник, 07 Марта 2017 г. 17:05 (ссылка)

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



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











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



Выбрав 1 наиболее интересный, мы опубликуем его чуть ниже.



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







Далее пойдет повествования от первого лица одного из наших пользователей:



«Эта статья о том, как я спас свою карьеру web-дизайнера.



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







Я стал пробовать редакторы сайтов — Tilda, потом перешел на более профессиональный Muse, они мне позволили приобрести 2 навыка:




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

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





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



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







Я больше не ограничен отрисовкой «мертвых» макетов в программах-редакторах





Я не web-разработчик, не обладаю ни первоклассными навыками верстки и ни тем более навыками программирования. Я web-дизайнер и работаю для того сегмента, где необходимы сайты-визитки, небольшие корпоративные сайты/каталоги и одностраничники. Поэтому, для подавляющего большинства проектов, над которыми я работал и работаю, меня Pixli устраивает на 200%.



Да, для ряда задач (отрисовка сложных порталов, личных кабинетов…), пока необходимо использование Photoshop и Sketch и дальнейшая ручная верстка, но, для обычных сайтов, не нужно усложнять себе жизнь!



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







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



Подобные платформы не дают полной свободы дизайнерам, кодерам и самим клиентам. Мой ответ – не согласен!





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




  • Разумеется, универсальная визуальная верстка на Pixli уступает верстке ручной. Но, заметьте что верстальщик верстальщику рознь, горький опыт у многих, если не у всех, есть от работы с некоторыми. Те, кто сверстает лучше дизайн, чем на платформе Pixli, а точнее, идеально, и возьмет немало, и времени потратится больше, опять-таки, на классический веб-дизайн и перенос макета в код.



    В итоге, на привычное создание уникального web-ресурса, потрачено:




    1. Больше времени на прототипирование.

    2. Больше времени на отрисовку дизайна в графическом редакторе.

    3. Время на написание ТЗ верстальщику или объяснение ему вживую, если вам повезло работать рядом.

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

    5. Правки по верстке, куда без них.





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

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




  • Отношения сайтов на Pixli c поисковиками. Здесь буду краток, не особо навыками по продвижению обладаю, но, сеошник, с которым работаю, не жалуется, все индексируется и продвигается как нужно, даже лучше. Созданные сайты полностью адаптивны, быстрые при загрузке (следим за оптимизацией картинок), уникальный копирайт написать остается, что еще нужно, грубо говоря. Да не закидают меня камнями SEO-гуру!




  • Хостить сайты можно только на Pixli? Сервис подсаживает пользователя на себя? Нет. Есть 2 варианта:




    1. Привязка своих доменов к аккаунту и включенный в тариф хостинг.

    2. Экспорт кода сайта наружу и установка на свой хостинг и домен, ведь, это полноценный архив с сайтом.




    Я использую оба варианта, в зависимости от ситуации.




  • Еще мнение, с которым столкнулся «зачем нужен, если есть Wix и подобные». Wix, Ucoz, Tilda и другие, это блоковые конструкторы сайтов. Но, Pixli нельзя назвать конструктором, это инструмент для визуального web-дизайна качественных сайтов, на котором будет не стыдно работать уважающим себя веб-дизайнерам.




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



    Как оказалось, pixli-made сайты, выгрузив, можно поставить на практически любую CMS и фреймворк, проверено мной, созданные сайты ставились на WordPress, MODx, Joomla, из фреймворков есть опыт на CodeIgniter.




  • Что получают мои клиенты (и я, в их числе), когда заказывают сайты на Pixli.




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

    2. До 2 раз быстрее срок разработки и последующей доработки сайтов. Как следствие нет срыва сроков и потраченных нервов и репутации.

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




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



Да, это не идеальная платформа, есть свои недостатки.



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



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







В заключение — «Если бы я спрашивал людей, что им нужно, они бы попросили лошадь побыстрее». (Генри Форд)





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



Выше я описал положительный опыт использования и достоинства выбранной мной платформы для создания сайтов.



Как будет время и желание, зайдите, попробуйте сами.



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

Спасибо, надеюсь было интересно».
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/323432/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод] Крэш-курс по UI-дизайну

Понедельник, 13 Февраля 2017 г. 20:19 (ссылка)





Мы всегда в поисках хороших статей о дизайне, чтобы потом использовать их в работе над сайтом «Я люблю ИП». Сегодня мы перевели ещё одну статью, которая рассказывает, чем отличается UI-дизайн от UX-дизайна и на каких основных принципах строится дизайн интерфейсов.



UI vs. UX



Если вы хоть немного интересовались дизайном приложений, то наверняка слышали термины «UI» и «UX». Но чем же они отличаются?



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



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





1. Стратегия



Цели сайта и потребности пользователей







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




  1. Какую проблему вы пытаетесь решить?

  2. Что нужно пользователям?

  3. Как ваш продукт вписывается в контекст вашего бизнеса (каковы его цели)?



2. Набор возможностей



Функциональные спецификации и требования к контенту







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




  1. Как вы будете решать данную проблему? Какие функции вы хотите реализовать и в каком порядке?



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



3. Структура



Информационная архитектура и проектирование взаимодействия







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



4. Компоновка



Дизайн интерфейса и информационный дизайн







На данном этапе вещи становятся все менее абстрактными и более конкретными.



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



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



И наконец:



5. Поверхность



Визуальный дизайн и чувственное восприятие







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



Именно здесь вы найдёте UI-дизайнеров, делающих большую часть своей работы, используя такие инструменты как Sketch, Photoshop, Adobe Experience Design, Illustrator или Figma.



Теперь давайте перейдём к основным принципам хорошего UI-дизайна.



Принцип № 1. Простота превыше всего



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



Почему это здесь? Какой в этом смысл? Как ещё это можно сделать?



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



Принцип № 2. Давайте ясную, информативную обратную связь



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



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







Отличный пример — это индикатор загрузки постов в ленте Facebook. Пока идёт загрузка контента, индикатор загрузки (в форме контента) информирует пользователей о том, что контент загружается.



Принцип № 3. Постоянство имеет значение



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















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



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







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



Принцип № 4. Если сомневаетесь, используйте известные дизайн-паттерны



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



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







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



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







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











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



Принцип № 5. Используйте визуальную иерархию



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







То, как мы воспринимаем информацию, зависит от нескольких факторов. Давайте посмотрим на основы визуальной иерархии.



1) Типографика



Из чего состоит хорошая типографика? Два основных фактора — это чёткость и удобство чтения.



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



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







Заметили, как шрифт вверху воспринимается хуже, чем внизу? Если нет, то…







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







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







2) Белое (или негативное) пространство



У вас когда-нибудь было такое, что вы смотрите на меню/ сайт/ интерфейс и думаете: «Мне нравится, как это выглядит, но я не знаю почему»? Теперь вы знаете. Всё дело в белом пространстве. Белое пространство чрезвычайно помогает в восприятии. Исследование 2004 года показало, что подходящее использование белого пространства между абзацами и для полей справа и слева улучшает восприятие почти на 20 %. Пользователям легче сфокусироваться и переработать такой контент.





Собака или кошка?





Многие считают, что белое пространство — это дело вкуса. Я думаю, это гораздо более объективно. Мы можем умело использовать белое пространство для того, чтобы усилить визуальную иерархию. Давайте посмотрим на сайт Helen Tran.







Прекрасное портфолио! Теперь посмотрим ещё раз более внимательно.







Вы заметили, как контент разбит на четыре чётких блока? Давайте пойдём ещё дальше.







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



3) Цвет



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







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







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



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







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







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


Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/321728/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод] Рекомендации по применению Hero Images

Вторник, 31 Января 2017 г. 18:05 (ссылка)

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



Из статьи вы узнаете:


  • почему визуальная составляющая играет решающую роль в привлечении пользователей;

  • какие функции выполняют изображения на сайтах;

  • что следует учитывать при отборе картинок.







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



Hero Image — это не просто красивая картинка. Это мощный инструмент коммуникации.


В этой статье я дам вам несколько советов, как правильно использовать технику Hero Image.



Выбирайте удачные изображения



Будьте придирчивы при выборе фотографий

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





Пример неудачно выбранной картинки



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





Пример правильно подобранного изображения



Сделайте картинку композиционным центром



Hero Images идеально подходят, чтобы сжато передать самую важную информацию

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





Apple — профессионал в создании Hero Image.



Совет: это вовсе не означает, что картинка должна передавать всю информацию целиком. С помощью Hero Image можно, скорее, уместным образом визуально подчеркнуть ключевые моменты.



Ищите изображения, вызывающие эмоции



Внедряйте эмоции в дизайн

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





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



Используйте качественные снимки



Изображения не должны быть размытыми и нечеткими

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





Размытая картинка и снимок подходящего размера



Акцентируйте внимание на кнопках призыва к действию



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

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





Кнопки должны гармонировать с большими изображениями



Выдерживайте контраст в дизайне



Убедитесь, что текст, который вы располагаете поверх фото, легко читается

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







В качестве альтернативы вы можете применить scrim:



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


О применении других эффектов вы можете узнать в статье "Хитрости дизайна: Текст на фото"



Учитывайте разные размеры экранов



Картинка должна выглядеть пропорционально на всех устройствах

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

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





Автор фото: themeforest



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



Используйте иллюстрации



Добавьте индивидуальности

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





Dropbox показывает процесс обмена сообщениями и объясняет сложные идеи посредством легко понятных рисунков



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



Заключение



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



Спасибо за внимание!
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/320862/

Комментарии (0)КомментироватьВ цитатник или сообщество
scutivslum

Робот

Понедельник, 16 Января 2017 г. 05:48 (ссылка)

bigimg (197x700, 84Kb)
lo9ICGypMB12epGrWu1mVxwoezrBOYGi6UvAvjyGWcq8X

Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Landing Page как замена всего сайта

Пятница, 16 Декабря 2016 г. 12:30 (ссылка)



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



Landing page (Целевая, посадочная страница) — это возможность для продавца или сервиса за несколько секунд рассказать о своих товарах и услугах самое главное, а для потенциального клиента — убедиться в том, что он попал «точно в цель». Одна из задач создания целевых страниц — формирование положительного восприятия рекламы и замена «стандартного» трюка, основанного на различных импликациях, полноценным информационным блоком.



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



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



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



Процесс разработки



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



Итак, после утверждения дизайна решили думать, какой стек будет использоваться в разработке. Для стилизации сайта было решено использовать самописные стили, так как дизайн индивидуален и фреймворки не подходили. Чтобы оживить сайт, была выбрана библиотека jQuery, потому что с её помощью можно довольно легко манипулировать элементами на странице, создавать анимации. Самый главный инструмент, который помог нам в разработке, — fullPage.js. Данный плагин помог осуществить главную задумку и создать скроллинг полноэкранных секций.



Написание стилей



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



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



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



Рисунок 1





Рисунок 2





Посмотрим на код:

.animation-box-2 {
position: absolute;
bottom: 0px;
left: 0px;
height: 24%;
font-size: 36px;
}
@media (max-width: 1200px)
.animation-box-2 {
font-size: 22px;
}
@media (max-width: 1400px)
.animation-box-2 {
font-size: 26px;
}
@media (max-width: 1500px)
.animation-box-2 {
font-size: 30px;
}


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



Плагин fullPage.js



Теперь хотелось бы рассказать о самой основной концепции, которая использовалась в данном проекте. Это jQuery plugin Fullpage.js.



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


  1. Легкая настройка

  2. Очень гибкий и разнообразный функционал

  3. Кроссбраузерность (вплоть до ie8)

  4. Отличная документация по продукту

  5. Обновления

  6. Респонсив



Ниже будет приведен код, в котором будет показано насколько он прост в использовании:






Some Content


Some Content


Some Content


Some Content


Some Content


Some Content


Some Content


Some Content


Some Content



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

$(document).ready(function() {
$('.js-allscreens').fullpage(); // Вызов плагина по классу .js-allscreens
});


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


  • anchors — идентификаторы ссылок на секции (в виде массива); позволяют быстро переместиться к нужной секции;

  • menu — идентификатор меню; необходим, чтобы отмечать ссылки соответствующие выбранной секции;

  • scrollbar — если данной настройке передать значение TRUE, будет показа вертикальная полоса прокрутки браузера;

  • scrollOverflow — необходима для отображения скролла внутри секции, в том случае если контент выходит за ее границы;

  • navigation — если данной настройке передать значение TRUE, будет отображена навигационная панель по секциям;

  • navigationTooltips — массив всплывающих подсказок; для каждого элемента навигационной панели;

  • slidesNavigation — если данной настройке передать значение TRUE, в секции слайдов будет отображена навигация по слайдам;

  • navigationPosition — позиция навигации по секциям (поддерживаемые значения: left и right);

  • slidesNavPosition — позиция навигации по слайдам (поддерживаемые значения: bottom и top);

  • loopTop — если данной настройке передать значение TRUE, перемещение по секциям будет бесконечным (но только в направлении вверх — к первому слайду). Если на первом слайде вращать колесо мыши вперед, будет выполнено перемещение к последнему слайду.

  • loopBottom — аналогично предыдущей настройке, только направление вниз.

  • loopHorizontal — аналогично предыдущим настройкам, только работает для слайдов.





Вывод



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



Спасибо за внимание!



Материал подготовлен: greebn9k (Сергей Грибняк), V1pBoy (Виталий Калашников), silmarilion (Андрей Хахарев)
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/317708/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Дизайн сайта, который генерирует большие продажи

Вторник, 29 Ноября 2016 г. 13:47 (ссылка)

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



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



Шаг №1. Анализ конкурентов, изучение деятельности компании и ее целевая аудитория



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




  1. Географическое положение (Европа, США, постсоветские страны и т.д.). Этот пункт важен для структуры сайта, например во многих европейских странах и США телефоны в шапке сайта размещаются реже, чем в постсоветских странах. Это связанно с тем что, в США и Европе доверие к интернету намного выше. Другие все же предпочитают личный контакт, поэтому наличие телефона в быстром доступе актуально. Такого рода особенности продиктует географическое положение, их довольно много в дизайне.

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

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

  4. Целевая аудитория (ЦА). Это очень важный пункт. Изучив аудиторию, поняв её вкусы и предпочтения, узнав больше про её стиль жизни, нам станет понятно, какое впечатление нужно формировать у посетителя.

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



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



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



Шаг №2. Структура



На этом шаге становится понятно, какая структура нужна вашему проекту. Какую модульную сетку использовать, для эффективного решения поставленных задач. Где лучше расположить меню, сверху или слева. Спрятать его под иконку или сделать развернутым. Расположить одну большую фотографию в фоне или блочно расположить несколько. Разделить поле контента на две части, на три или на четыре….



Вот некоторые примеры структуры сайта:























Шаг №3. Соответствие дизайна запросу целевой аудитории сайта



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



Цель можно обозначить таким образом:




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

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

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



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



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



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



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















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











По такой логике и стоит выстраивать работу над проектом.



Шаг №4. Основные приемы или тренды.



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



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



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



4.1 Продукт на первой странице


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







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



















4.2 Атмосферная фотография или видео


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







clinkle.com







riad11.net







christchurch-harbour-hotel.co.uk







luneteyewear.com







dangblast.com



4.3 Фото конкретных лиц. «Личное знакомство»


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















4.4 Инфографика


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



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



















4.5 Иллюстрация.


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



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























4.6 Типографика


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























Шаг №5. Волшебная рука дизайнера


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



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



Подведем итог:



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



Важно оставить положительное впечатления после посещения сайта, соответствующее целям и задачам поставленным перед дизайнером и разработчиками в целом. Дизайн — это не просто красивая картинка, — это решение задач и именно в этом ключевое различие хорошего и плохого дизайна.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/316410/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
bo4kov

Видеокурс - HTML5 и CSS3 с Нуля до Гуру | Михаил Русаков | Web-программирование, Дизайн сайтов

Вторник, 22 Ноября 2016 г. 16:47 (ссылка)
https://info-kurs.net/produ...a-do-guru/


cover (668x614, 457Kb)

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Из песочницы] Как спроектировать супер-быстрый сайт

Вторник, 04 Октября 2016 г. 15:28 (ссылка)

Предлагаю вам перевод статьи How to Design Your Site to Make it Super-fast с сайта Awwwards, в которой говорится, как малыми средствами добиться большого результата в деле увеличения скорости работы вашего сайта. Данная статья скорее обращается к тем, кто не забывает про дизайн после утверждением макета, а продолжает работать над проектом вместе с разработчиками или сам является разработчиком.



Супер-быстрый сайт



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



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



Мы провели несколько исследований и вот что они показали:




  1. 47% пользователей не хотят ждать загрузки сайта больше двух секунд;

  2. Посетители интернет-магазинов тоже не хотят ждать больше двух секунд, но Google намерен добиться уменьшения этого времени до половины секунды;

  3. 57% пользователей уйдут с сайта, если на телефоне он будет загружаться дольше трех секунд.



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



Проектируйте минималистичный дизайн



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



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



Вот несколько примеров минималистичного подхода:




  1. Гамбургер меню вместо стандартного раскрытого;

  2. Больше белого или отрицательного пространства (выворотки);

  3. Короткие формы отправки;

  4. Легкие изображения;

  5. Всего один шрифт вместо кучи разных шрифтов на одном сайте.



Википедия – отличный пример такого минималистичного подхода в дизайне.

image



Проверим скорость сайта и со страницы wikipedia.org поищем статью по слову «tiger». Проходит меньше секунды, прежде чем мы попадаем на страницу статьи, описывающей тигра.



image



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



image


Важно то, как воспринимается производительность вашего сайта



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



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



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



Воспользуйтесь помощью Google



Google хочет, чтобы ваш сайт работал быстро. Это соответствует глобальной миссии компании – сделать интернет быстрее. Google объявил о ней в прошлом году во время релиза нового алгоритма сжатия Brotli. Так почему бы не использовать потрясающие инструменты, который Google предлагает нам, как веб-дизайнерам?



Лучше всего начать с инструмента Google Developer, который называется Make the Web Faster. Здесь вы найдете широкий ассортимент инструментов и информацию о том, как ускорить работу вашего сайта.



Один из лучших инструментов, которые может предложить Google – это PageSpeed Insights, с помощью которого вы можете получить детальную информацию о том, почему ваш сайт работает медленно. Интересно здесь то, что вы можете получить детальный отчет и рекомендации как по мобильной, так и по десктопной версии вашего сайта. Теперь все ваши отговорки по поводу того, что вы не знаете, как сделать сайт быстрее, недействительны!



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



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



image



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



image



Попробуйте «отложенную загрузку»



Слышали когда-нибудь про отложенную загрузку (lazy loading)? Это принцип работы, согласно которому браузер отрисовывает элементы сайта только тогда, когда они необходимы. Например, находящиеся за пределами области просмотра объекты отрисовываются только тогда, когда попадают в область просмотра. Этот принцип «отрисуй только тогда, когда нужно» помогает разгрузить ваш сайт и позволяет ему работать быстрее.



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



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



Вот список неплохих:




  • Lazy Load Plugin for jQuery

  • Lazy Load WordPress Plugin

  • BJ Lazy Load

  • Unveil.js

  • bLazy.js

  • Angular Lazy IMG

  • ocLazyLoad

  • React-Lazy-Load

  • Jason Slyvia’s React-Lazyload



Страница продажи iPhone 6S – хороший пример длинной страницы. Это делает ее прекрасным претендентом на использование отложенной загрузки. Если посмотреть на данную страницу, можно увидеть много качественных изображений, и каждое из них нужно загрузить.



image



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



image


Оптимизируйте свой сервер



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



Обязательно обратите внимание на следующие моменты, чтобы убедиться, что ваш сервер отвечает быстро:




  • используйте меньше количество ресурсов для каждой страницы (откладывайте загрузку изображений, комбинируйте внешние CSS файлы, комбинируйте внешние JS файлы);

  • используйте Сеть доставки контента (CDN);

  • включите кэширование;

  • обновите конфигурацию вашего веб-сервера.



Быстрые сайты посещают больше пользователей, покупателей и читателей



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



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



Продолжайте экспериментировать с вашим сайтом и сами не заметите, как спроектируете свой самый быстрый сайт. И помните, что всегда можно найти какой-нибудь интересный способ увеличить скорость вашего сайта ещё чуть-чуть.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/311704/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
nueldarbey

Без заголовка

Понедельник, 22 Августа 2016 г. 17:04 (ссылка)

Всем советую! Довольно полезный сайт! Загляните, будет интересно! http://www.acrit-studio.ru/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
talbyx

Без заголовка

Понедельник, 22 Августа 2016 г. 17:00 (ссылка)

http://www.acrit-studio.ru/ Вот довольно полезный сайт! рекомендую! Заходите

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
roaqee2

Без заголовка

Понедельник, 22 Августа 2016 г. 13:56 (ссылка)

А вам было-бы интересно узнать про дизайн сайтов?

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
shbp567

Без заголовка

Понедельник, 22 Августа 2016 г. 13:38 (ссылка)

Вот довольно полезный сайт! советую! Загляните http://www.acrit-studio.ru/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
nodemmoo00

Без заголовка

Понедельник, 22 Августа 2016 г. 11:50 (ссылка)

Довольно интересный ресурс: http://www.acrit-studio.ru/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
nvsazhafa

Без заголовка

Понедельник, 22 Августа 2016 г. 11:10 (ссылка)

Всем советую! Довольно полезный сайт! Посмотрите http://www.acrit-studio.ru/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
nadhtybyg

Без заголовка

Понедельник, 22 Августа 2016 г. 09:17 (ссылка)

рекомендую! Довольно интересный сайт про дизайн сайтов!

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
propyundmentoo13

Без заголовка

Понедельник, 22 Августа 2016 г. 07:17 (ссылка)

рекомендую! хороший сайт про дизайн сайтов! Загляните http://www.acrit-studio.ru/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
sstaw076

Без заголовка

Понедельник, 22 Августа 2016 г. 06:45 (ссылка)

http://www.acrit-studio.ru/ Возможно будет интересно:

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
popa720

Без заголовка

Понедельник, 22 Августа 2016 г. 05:24 (ссылка)

советую! Довольно полезный сайт про дизайн сайтов! Посмотрите http://www.acrit-studio.ru/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
peshpg

Без заголовка

Воскресенье, 21 Августа 2016 г. 21:40 (ссылка)

Всем советую! Довольно полезный сайт! Загляните, будет интересно! http://www.acrit-studio.ru/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
prodicquec

Без заголовка

Воскресенье, 21 Августа 2016 г. 19:15 (ссылка)

Всем рекомендую! хороший сайт про дизайн сайтов! Заходите

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
jqarsyy82

Без заголовка

Воскресенье, 21 Августа 2016 г. 17:54 (ссылка)

http://www.acrit-studio.ru/ Всем рекомендую! Довольно интересный сайт!

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
pu211be

Без заголовка

Воскресенье, 21 Августа 2016 г. 17:38 (ссылка)

Рекомендую! Интересный сайт http://www.acrit-studio.ru/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество

Следующие 30  »

<дизайн сайтов - Самое интересное в блогах

Страницы: [1] 2 3 ..
.. 10

LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
О проекте: помощь|контакты|разместить рекламу|версия для pda