Jump to content
Бизнес форум Эстонии
svetikpoet

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

Recommended Posts

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

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

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

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

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

mini.s%D0%B3-shot.ru_.jpg

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

mini.s%D0%BD-shot.ru_.jpg

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

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

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

mini.s-shot%D1%82%D0%BC.ru_.jpg

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

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

cvi.png

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

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

mini-s-shot-ru__1.jpg

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

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

mini.s-shot21.ru_3.jpg

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

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

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

 

Share this post


Link to post
Share on other sites

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

 

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

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

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

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

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

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

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

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

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

  • Upvote 2

Share this post


Link to post
Share on other sites

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/ - для инспираций и новых идей, и уж точно для того чтобы видеть какой дизайн является современным и востребованным, а не какой нравится мне.

  • Upvote 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

post-575-0-60803300-1375478543.png

Edited by tset

Share this post


Link to post
Share on other sites

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


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

Share this post


Link to post
Share on other sites

по теме
не стоит боятся новых решений, таких как 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 by alex-pro
  • Upvote 2

Share this post


Link to post
Share on other sites

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

 

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

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

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

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

...

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

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

Share this post


Link to post
Share on other sites

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

 

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

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


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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...