Современный дизайн - что это?

Я работаю над редизайном своего веб-сайта и повторением пятисекундных тестов.

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

Что такое «современные шрифты»? Технически Calibri, Cambria и т. д. — это «современные шрифты», но я почти никогда не вижу их в Интернете. Какие шрифты считаются «современными» в контексте веб-дизайна?

Каковы характеристики «современного дизайна»? И наоборот, каковы явные признаки «устаревшего» дизайна?

Для справки, вот последняя итерация моего дизайна. Он все еще выглядит «устаревшим»? Если да, то какие элементы создают такое впечатление?

Последняя версия

Я думаю, что начинаю лучше понимать, что такое «современный веб-дизайн»:

  1. Нет или легкие градиенты
  2. Шрифты без засечек
  3. Легкие падающие тени
  4. Хорошая иерархия страниц / направление внимания посетителя

Есть ли что-то еще, что делает дизайн «современным»?

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

«Модернизированная» версия

Я все еще застрял в прошлом? Или я наконец куда-то попал?

Выполняя все рекомендации, вот что у меня получается:Все рекомендации выполнены

Это, очевидно, намного лучше, но соответствует ли оно современным стандартам? Если нет, то может ли он попасть туда без значительного изменения макета?

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

Новейшая итерация

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

Большое спасибо всем вам. Я впечатлен качеством рекомендаций и тем, насколько конкретными и действенными были большинство рекомендаций.

Он действительно чувствует себя немного устаревшим примерно в начале 2000-х годов. Я бы приглушил трехмерные эффекты, тени, большие градиенты, трехмерный логотип и т. д.
Во-вторых, удаление градиента и 3D-эффектов. Мне нравятся тонкие тени, чтобы сайт не казался плоским, но и не огромные возвышающиеся тени.
Я примерно на 50% уверен, что это шутка — или, по крайней мере, что это не реальная попытка дизайна, и вы намеренно показываете плохой дизайн, чтобы бросить вызов сообществу и исследовать, что делает его плохим. Если второе, то молодец - хорошо потренировался.
@thomasrutter Нет, это была настоящая попытка дизайна, и даже не первая попытка (если вы думаете, что это было плохо, вам следует увидеть более ранние). Тем не менее, я рад, что вы нашли это занятие интересным. Одна вещь, которую я заметил, однако, состоит в том, что, когда их показывают обычным людям, реакции в некоторой степени положительны (они оценивают это 6-7 из 10), в то время как некоторые дизайнеры склонны реагировать так, как будто это был худший дизайн, который они когда-либо видели (1-3 из 10). из 10). Конечно, это не здорово, но не преувеличиваете ли вы немного?
Это неплохо , но выглядит очень-очень 2001 год, что для дизайнера выглядит плохо. Тогда «современный» означал броский со стеклянными эффектами, в 2012 году «современный» означал чистый, простой, сдержанный, иногда слегка тактильный. Чтобы добавить некоторые «устаревшие» особенности: кривые вокруг «логина» и панели ссылок — это шум, а отступы вокруг этих ссылок очень плотные, кажутся занятыми, а не воздушными. Оба логотипа чрезмерно сложны, тяжелые черные линии новой версии утяжеляют их. Стиль кнопок громче, чем то, что они делают. Проблема «современных веб-шрифтов» означает более открытый, более высокий x размер.
@ user568458 Когда вы говорите «совсем 2001 год», вы имеете в виду первый или оба? Если последний все еще датирован, что делает его таким?
Оригинал выглядит очень 2001 годом, вторая версия больше похожа на 2005-06 (с логотипом, который выглядит как 1996 год...). Это улучшение. Я бы посоветовал сосредоточиться на логотипе, кнопках (они должны быть простыми — то, что они делают, должно выделяться) и большем количестве отступов вокруг меню вверху.
@user568458 4-5 лет прогресса, 7-8 лет впереди. Помимо логотипа и кнопок, есть ли что-то еще, что вызывает это ощущение старомодности? Или это все? (к вопросу о логотипе, я пока просто откажусь от него и закажу его позже. Что касается кнопок, они пройдут тестирование AB для преобразования, поэтому я посмотрю, что будет работать лучше всего).
исправьте шрифты кнопок на третьей итерации, и вы будете намного ближе, чем меньше разных шрифтов, тем лучше, зайдите на www.apple.com и посчитайте количество используемых шрифтов... :)
Определенное улучшение, хотя растянутый шрифт на кнопках выглядит действительно неуместно. Это должно дополнять все остальное, но странно широкий текст выглядит так, как будто он был вставлен с другого сайта. (также исправьте недостающее место в «|Контакте» вверху, это сводит меня с ума! :-))

Ответы (7)

Ваши стили кнопок очень стары. Попробуйте кнопку только с CSS, чтобы упростить обслуживание и избежать ненужных эффектов на стороне презентации.

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

Трехмерные стрелки, которые вы используете для пуль, выглядят странно. Попробуйте просто использовать старый добрый <ul>и избегайте графики.

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

  • Левая и правая стороны функциональной области конкурируют друг с другом. Решите, что важнее для самой большой/самой прибыльной группы посетителей, и сделайте это центром внимания.
  • Заголовок под функциональной областью («Языки…») использует более крупный шрифт, чем те, что выше, что наводит меня на мысль, что это действительно самое важное для просмотра.
  • У вас есть равнозначная навигация/ссылки в двух местах: вверху и посередине страницы. О каком наборе ссылок я должен заботиться?

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

Отдельное замечание по брендингу. Если вы хотите что-то большее, чем простой шрифт для своего знака, но у вас крошечный бюджет, есть множество сайтов по выгодным ценам для фрилансеров. Вы не получите лучшую работу. С другой стороны, эти сообщества посредственных дизайнеров, борющихся студентов и дизайнеров, у которых есть немного свободного времени, вероятно, создадут лучший дизайн, чем ваши усилия. Разместите предложение и посмотрите, что вы получите. Вот несколько недорогих сайтов, на которые стоит обратить внимание: 99designs.com / guru.com / elance.com / sortfolio.com
Не используйте дерьмо вроде 99designs. Это плохо для заказчика и плохо для дизайнера.
@plainclothes Спасибо за эти очень действенные комментарии.
@ DA01 99Designs не даст вам блестящих результатов. Предприниматели, разработчики и другие лица, не являющиеся дизайнерами, которые сами разрабатывают визуальную айдентику или пользовательский интерфейс, также выбирают неоптимальный путь. Если у вас просто нет бюджета, чтобы сделать это правильно, вы идете на компромиссы. 99Designs — это компромисс. Это по-прежнему законный способ получить работу дешево — никто не заставляет этих дизайнеров работать за гроши.
99 Designs — действительно плохой компромисс. Я утверждаю, что логотип, сделанный своими руками, хотя, возможно, и уродливый, будет иметь больше индивидуальности, чем любая обычная хрень, которую можно получить от 99Designs.
И я также утверждаю, что это незаконный способ получить профессиональную работу. Люди на 99 проектах не профессионалы. Они работают за копейки и, очевидно, не инвестируют в законное программное обеспечение, шрифты или прагматичные методы работы.
В 99Designs много студентов: минимальная подготовка и стремление к опыту. Минимум обучения, но больше, чем у большинства владельцев бизнеса. Я бы предположил, что отсутствие индивидуальности происходит из-за аспекта сайта, связанного с отзывами клиентов / диктовками. В этой модели нет доверия, если клиент не строит ее. Согласен не согласиться, я полагаю.
:) 99Designs -- Нарисуйте какой-нибудь двусмысленный, неконкретный символ, состоящий из рудиментарных форм и градиентов..... установите стандартный текст по центру под ним или справа от вашего символа - ГОТОВО!

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

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

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

  • типографика - предпочитаю шрифты без засечек
  • шрифты - шрифты Google - хороший источник
  • цвета - хороший источник - colorhunt, также dribbble.com/colors/
  • изображения - от края до края
  • изображения — unsplash / pexels — хороший источник
  • иллюстрации - undraw - хороший источник
  • spacing — щедрое негативное пространство, избегайте блоков/разделителей

Я приложил сравнение с тем, что я считаю более «современным» дизайном пользовательского интерфейса — обратите внимание, как многие элементы УДАЛЕНЫ и лишены своей сути.

сравнение посмотреть увеличенную версию

Спасибо, это потрясающий ответ. Очень ценится.

Вы в основном спрашиваете, как проектировать, что является невероятно широким вопросом.

По сути, есть два типа людей, которые создают веб-сайты:

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

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

Всего 3 вещи, которые выглядят «устаревшими» и «старомодными» в вашем примере:

  • Блестящие, отражающие, изогнутые кнопки с тенью. Серьезно, никто не проектировал так уже лет 10. Вот один из примеров того, как кнопки делаются в наши дни.
  • Те самые градиенты. Люди больше не делают такие градиенты, и не делали уже какое-то время. Люди либо не используют градиенты, либо экономно используют очень тонкие градиенты или тонкие эффекты теней .
  • Меню, подобные этому вверху, хороши, но люди, как правило, больше стараются сделать меню похожими на меню, а не на старый метод «Текстовые ссылки | Разделенные | С | Вертикальными полосами».

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

Спасибо за предложения. Что такое «меню-подобное меню»? (В вашем примере Evernote также используется одна из этих старых «Текстовые ссылки | Разделенные | С | Вертикальными полосами»)
См. стрелку вниз в меню примера Evernote. Это означает, что когда я наведу на него курсор, появится раскрывающееся меню. См. мой ответ ниже, который подробно описывает этот момент.

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

Отбросьте маленькие летающие стрелки и пунктирные линейки на заднем плане. Они просто отвлекают от все более сфокусированного макета.

Не растягивайте шрифт на кнопках.

Примите решение в верхней половине страницы. У вас все еще есть два конкурирующих блока информации. Вот что я бы сделал:

  • Сделайте заголовок «Профессиональные переводческие услуги».

  • Переместите маркированный список влево.

  • Удалить "Нужны переводы?" Заголовок.

  • Сократите поле с девушкой из колл-центра примерно до высоты вашего маркированного списка (уменьшите отступы примерно вдвое).

  • Поместите кнопки в центре страницы под всей этой информацией.

Учитывая все это, я бы сказал, что вы готовы к прайм-тайму. После того, как вы заработаете на этом свои первые 100 тысяч долларов, наймите дизайнера пользовательского интерфейса, чтобы вывести его на новый уровень;)

Большое спасибо. Вы правы, так гораздо более целенаправленно.

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

при проектировании учитывайте следующее:

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

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

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

http://quelleworks.com/quelle-works-the-content-and-translation-company-in-hinejwadi-pune/

http://www.easyling.com/владельцы веб-сайтов/

http://www.englishtospanishraleigh.com/

Спасибо

Не вдаваясь в подробности, потому что это никому не принесет такой пользы:

Современный дизайн в целом означает эффективное использование инструментов, доступных в настоящее время. Как говорили другие, и вы в конечном итоге изменили логотип на текст, а прайс-лист / начало работы на текст. В прошлом все делалось с изображениями и сложными таблицами, потому что это была единственная доступная технология. Теперь CSS3/HTML5 и такие инструменты, как JQuery и Ajax, позволяют делать намного больше без лишней графики повсюду. Теперь даже тени можно добавить с помощью CSS, что, вероятно, поможет вашему дизайну.

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

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

Вы также обычно больше не видите «изображение для наушников», поскольку исследования показали, что они неэффективны.

Еще одна вещь, которая диктует современный дизайн, — это SEO и социальные сети. Вот почему контент и описания важнее стоковой графики или всплывающих кнопок. В вашем дизайне также не учитываются функции обмена (G+, FB, Twitter и т. д.), что само по себе создает иллюзию более современного дизайна.

Я просто работаю над общим видом Inkscape. Интерактивность и эффекты появятся позже. CSS3 поддерживается не полностью (даже близко), и я не хочу вникать во все проблемы с запасными вариантами и полифиллами, когда маленькое изображение может обеспечить одинаковый эффект во всех браузерах (или я упускаю преимущество наличия отбрасывания CSS? тень?). Для девушки в наушниках, можете ли вы предоставить ссылку на некоторые исследования? Я помню, читал противоположное, но не могу найти.
Преимущество CSS заключается в том, что он адаптивный, поэтому зритель на смартфоне и на компьютере с Windows XP или iPad получают положительный опыт. Это также позволяет гораздо проще вносить изменения на всем веб-сайте. Что касается девушки в наушниках и общих изображений в целом: (1) useit.com/alertbox/photo-content.html (2) inboundmarketingagents.com/inbound-marketing-agents-blog/bid/…

Насколько я понимаю, о чем вы спрашиваете, очень субъективно оценивать дизайн как «современный». Однако дизайн многих веб-сайтов можно считать «современным» из-за их представления, внешнего вида, включения интерактивной графики (html 5, JavaScript, flash) и красивых иллюстраций на веб-сайте. Некоторые могут посчитать ваш веб-сайт старым, потому что он визуально выглядит как... старый веб-сайт :( (до drupal, wordpress, даже до flash)
Ваш веб-сайт выглядит очень просто, очень упрощенный дизайн (что хорошо), но визуально он не привлекателен Вы должны попробовать изменить свой макет, лучше интегрировать свой логотип на свой сайт, а также попытаться добавить анимированный баннер. Кроме того, "большое спасибо" немного старомодно.
Вы действительно не

Большинство сегодняшних веб-сайтов, которые можно считать современными, сделаны с использованием Drupal , Wordpress , Joomla или другой CMS (но эти 3 очень хорошо известны. с открытым исходным кодом, и вы можете скачать их бесплатно)

Вот базовый макет для Drupal и то, что вы можете сделать:
Действительный Xhtml

  • Несколько крутых кнопок смотрите здесь
  • Для строки меню, которая перемещается при прокрутке страницы, вы можете увидеть это
  • Для выпадающего меню вы можете увидеть это
  • Вы можете сделать слайдер/слайд-шоу самостоятельно или использовать для этого программное обеспечение, такое как SlideShowPro , или бесплатное - WOW Slider . ваша строка меню. (см. здесь для вдохновения )
  • Для плавной прокрутки см. это

Остальное действительно зависит от вас. Эффективно используйте часть Triptych... она может превратить ваш сайт из классного в потрясающий (опять же обратите внимание на плавную прокрутку - это очень удобно). Используйте AJAX, чтобы сделать ваш сайт более динамичным (поскольку современный дизайн будет касаться не только визуальной привлекательности вашего сайта, но и взаимодействия вашего сайта со зрителем) ( jQuery упрощает жизнь здесь).

Вот в чем дело, приятель: ты можешь пропустить все это и просто заниматься своими делами. То, как вы проектируете, по сути исходит от вас. Это твой взгляд на вещи. Wordpress, Joomla и Drupal широко используются на современных веб-сайтах — от крупных компаний до обычных пользователей. Теперь, чтобы вернуться к вашему заглавному вопросу о «современном» дизайне — извините меня, но я не знаю, какова цель вашего веб-сайта, ваших сроков или клиента — Но последним в веб-дизайне является HTML5. Посмотрите Chrome Experiments , которые действительно заставляют эти дизайны выглядеть устаревшими, и несколько крутых сайтов, созданных с использованием HTML5 и JavaScript.

Не могли бы вы отредактировать это до фактической рекомендации?
То есть, по сути, вы говорите, сделать логотип более заметным и добавить анимированный баннер?
@thomasrutter не совсем так. я прошу его использовать css, javascript и flash, чтобы сделать сайт более интерактивным и визуально привлекательным для посетителя
Должен ли он добавить мигающий текст и выделение? Советовать ему улучшить дизайн своего веб-сайта, добавив Flash или другие вещи, которые анимируются или двигаются, кажется немного ошибочным, и это тоже было десять лет назад...
@thomasrutter Я просил его использовать Flash, но не ограничиваться им. Я также попросил его использовать HTML5 и javaScript (которые вы считаете «другими вещами») для создания крутых интерактивных элементов сайта. И некоторые из лучших сайтов в Интернете сегодня созданы с использованием этих «других вещей». Я попросил его добавить классные иллюстрации и анимацию — не мигающий текст и выделения. Взгляните на проекты Chrome или просто погуглите HTML5-сайты — я думаю, они просто меняют представление людей о том, что такое «современный» дизайн, это то, с чего он просил начать… это все, что я говорил, приятель.
Да, может быть, с редактированием я бы изменил свой ответ, но я должен пометить этот ответ стрелкой вниз. Звучит так, как будто вы говорите сделать «анимированный баннер», и под этим я подразумеваю, что вы говорите сделать «анимированный баннер».
Современный дизайн - что это?
СпросиСетьПолитика конфиденциальности1y, 0v