Каким Должен Быть Современный Дизайн Сайта?

[svetikpoet 41]

Каким должен быть современный дизайн? Какие параметры говорят о его современности ? Какие требования предъявляются к  современному сайту?

 Адаптивный дизайн:

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

Основное меню сайта как вверху так и внизу.

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

Полно размерные фоновые изображения.

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

Минимализм и посадочная страница.

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

Использование кнопок социальных сетей.

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

Использование красочных иллюстраций:

Для привлечения внимания пользователей. Такой дизайн запоминается надолго.

 Большие кнопки.

Использование  больших кнопок привлекает внимание посетителей к самому главному и упрощает процесс навигации по сайту.

Простая регистрация.

Упрощенная регистрация  гарантирует, что у  потенциального клиента хватит терпения заполнить все поля и пройти процесс регистрации до конца.

Хотелось бы услышать ваше мнение и дополнения.

 

[Roman1 46]

Хотелось бы услышать ваше мнение и дополнения.

 

Главное это удобное и понятное юзабилити сайта (то что вы не отметили в своем повествовании).

Приятный и непринужденный дизайн.

По вашим скринам:

1. Ненужный большой баннер из за которого я не вижу основные товары.

2. Широкая шапка с отсутствием информации глупое распределение пространства.

3. Фоновая картинка раздражает глаз и отвлекает от основного текста

4. Социальные кнопки должны быть внизу сайта что бы не соблазнять посетителя перейти в соц.сети сразу после захода на сайт

5. Большие кнопки "купить" приветствую.

6. Регистрация, согласен должна быть быстрая и простая.

[alex-pro 110]

Svetikpoet, в тексте вы красиво все расписали, однако по картинкам, если примеры 1,2,3,5,6,7 сайты ваши, то посоветую вам поучится современному дизайну либо буквально либо смотреть как делают другие.

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

2. социальные кнопки вверху да еще и с левой стороны? на месте предпологаемого расположения логотипа? Да и на информационном сайте услуги/фирмы ненужны блоки (Свежие, Архив,Рубрики) это лишнее

3. 6 пример - ненужно использовать широкие рамки, да еще и с узорами(?? :(  ), а фон?? он вообще не в тематику и никак не смотрится, в итоге сайт пестрый, цветовая стабильность 0, а где логотип, почему он ниже меню и выравнен непонятным образом.
4. 7 пример -  более приличиный дизайн но явно угрюмый - что с логотипом? никогда не используйте "страшные"-стандартные стили-заливки в фотошопе, выходит сайт более менее в минималистичном дизайне а логотип все портит своим железно-выпуклым видом, кнопки выбора языка, выровнять от правого края на 10-30 пикслей, или они должны быть слипнуты с краем?

 

я не критикую а просто сделал резко заметные замечания.
современный дизайн также включает:

• дизайн нужно прорабатывать в мелочах - perfect pixel(идеальный пиксель) - что означает следить за каждым пикселем, именно в мелочях кроется секрет хорошего и качественного современного дизайна. (как у вас, угрюмые бордюры с узорами(6), флаги языков прилипли(7), логотип из другого пространственно временного измерения(7),)
• web-fonts например от Гугла, либо свои подгружаемые - они добавляют сайту свою изюминку.
• соблюдать цветовые правила, пользуясь допустим программами подбора и сочетания цветов.
• и многое другое.

могу посоветовать посмотреть как делают другие - 

http://thedesigninspiration.com/category/websites/  - для инспирации и новых идей, и подтягивания своих знаний и умений.

http://tympanus.net/codrops/category/articles/ - еще чтото интересное

http://habrahabr.ru/post/168901/ 8 типов сайтов, которые делать не стоит, так на память.

http://ui-cloud.com/browse/ - также для инспирации и новых идей.

http://www.templatemonster.com/ - для инспираций и новых идей, и уж точно для того чтобы видеть какой дизайн является современным и востребованным, а не какой нравится мне.

[Aloru 287]

Одно и то же разными словами, погнали!!)

[tset 21]

Каким должен быть современный дизайн?

Мне кажется, самое важное, сочетаются ли цвета, выбранные для дизайна сайта?

Оптимальное количество цветов - три, причем один из них используется для акцента, цветового пятна.

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

 

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

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

 

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

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

 

Like button - ставится в верхний правый угол, это счетчик, на котором отображается число поклонников страницы. Человек кликает на нее, становится поклонником, но со страницы сайта на фейсбук по ней он не переходит. Нет такой функции у этой кнопки.

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

 

"Учитывается желание пользователей к быстрому обмену информацией через социальные сети."

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

Итог. Кнопки на внутренних страницах, под товарами и постами нужны, остальные по желанию.

И последнее, простите, не удержалась :)

Edited August 2, 2013 by tset

[svetikpoet 41]

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

TSET , перечислены практически все цвета :biggrin: 

[alex-pro 110]

по теме
не стоит боятся новых решений, таких как CSS3 и анимации, в большинстве случаев в районе 70-80% браузеры пользователей уже поддерживают html5 и css3, с мобильными ситуация чуть похуже но и там дело не стоит на месте.

простые эффекты, как: тень текста,  плавная анимация наведений делают сайт менее скудным и более интересным.
 

некоторые полезные ссылки:
http://habrahabr.ru/post/187368/ Effeckt.css: избранные эффекты и переходы на CSS с 100% поддержкой мобильных устроиств

http://daneden.me/animate/ Animate.css
http://css-tricks.com/

Edited August 3, 2013 by alex-pro

[tset 21]

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

 

TSET , перечислены практически все цвета :biggrin:

Простите, с какой целью Вы сделали выделение в тексте?))

TSET , перечислены практически все цвета :biggrin:

Это хорошая шутка :)

...

http://www.templatemonster.com/ - для инспираций и новых идей, и уж точно для того чтобы видеть какой дизайн является современным и востребованным, а не какой нравится мне.

Cпасибо! Все советы очень полезные и важные. Дай бог, чтоб на пользу!)

[svetikpoet 41]

...............Простите, с какой целью Вы сделали выделение в тексте?))

 

C целью зацепить и обидеть :tongue:

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

Да, ссылки полезные, спасибо

[tset 21]

Да, ссылки полезные, спасибо

А то, что я писала в ночи сваими кривыми ручками Вам совсем не полезно, раз выделение текста поставили?) Можно поконкретнее, с чем согласны, с чем не согласны? Хотелось бы получить обратную связь по теме кнопок в социальных сетях. Это относится к веб дизайну. Заранее спасибо)))