Почему люди постоянно говорят мне, что мой сайт выглядит ужасно?

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

Вот как это выглядит сейчас:

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

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

Дополнительное примечание: Функциональность: если это имеет значение, вот что сайт стремится достичь (очень кратко): пользователи могут добавлять темы, а для каждой темы добавлять вопросы вместе со своими ответами . На сайте создаются «тесты» и «викторины», чтобы пользователи могли сравнивать свои результаты.

Редактировать 2 : Вот еще один принтскрин:

Изменить 3 : Просто чтобы быть ясно, ни один из этих скриншотов не является моей целевой страницей. Это тематические страницы контента.

Прежде всего я хочу подчеркнуть, что все в этом ответе просто MHO, а не какая-то универсальная правда;).

Как инженер-программист, вы знаете, как важно в каждом проекте иметь четкую и четко определенную структуру - порядок. То же самое относится и к «визуальному» искусству и дизайну. Я склонен рассматривать дизайн как «визуальную инкапсуляцию». Дизайнер знает структуру информации, которую он / она хочет передать своей целевой аудитории. Например: он создает книгу. Он знает, что эта книга разделена на главы, а каждая глава - на несколько глав. Он знает, что основной вопрос аннотирован некоторыми заметками (заметки на полях, сноски, примечания). Теперь он должен использовать свой «арсенал», чтобы сделать эту структуру «видимой». Он может использовать один размер и форму шрифта и заполнять все последовательные страницы большим количеством глифов, но это будет означать, что читателю придется читать, интерпретировать и понимать все, чтобы знать структуру содержащейся информации. Дизайнер также может «предложить» читателю важность / уровень различной информации. Одним из приемов является использование размера шрифта для отображения градации представленных «данных». Если это будет сделано, читателю не придется читать (не говоря уже о том, чтобы интерпретировать) текст, чтобы различать основной материал и, например, сноски. Важность и взаимная «позиция» информации «описывается» визуально. Читатель может легко «декапсулировать» информацию. Можно также рассматривать его как своего рода процесс сериализации / десериализации, происходящий в визуальной области (абстрактная информация приводится в «визуальное» пространство). Это упрощение, но я думаю, что для начала достаточно. Если это будет сделано, читателю не придется читать (не говоря уже о том, чтобы интерпретировать) текст, чтобы различать основной материал и, например, сноски. Важность и взаимная «позиция» информации «описывается» визуально. Читатель может легко «декапсулировать» информацию. Можно также рассматривать его как своего рода процесс сериализации / десериализации, происходящий в визуальной области (абстрактная информация приводится в «визуальное» пространство). Это упрощение, но я думаю, что для начала достаточно. Если это будет сделано, читателю не придется читать (не говоря уже о том, чтобы интерпретировать) текст, чтобы различать основной материал и, например, сноски. Важность и взаимная «позиция» информации «описывается» визуально. Читатель может легко «декапсулировать» информацию. Можно также рассматривать его как своего рода процесс сериализации / десериализации, происходящий в визуальной области (абстрактная информация приводится в «визуальное» пространство). Это упрощение, но я думаю, что для начала достаточно. Можно также рассматривать его как своего рода процесс сериализации / десериализации, происходящий в визуальной области (абстрактная информация приводится в «визуальное» пространство). Это упрощение, но я думаю, что для начала достаточно. Можно также рассматривать его как своего рода процесс сериализации / десериализации, происходящий в визуальной области (абстрактная информация приводится в «визуальное» пространство). Это упрощение, но я думаю, что для начала достаточно.

Теперь что касается вашего дизайна. Лично я не знаю, с чего начать. Я должен все это прочитать, понять все, подумать обо всем, а затем привести все в порядок, который я считаю правильным. Это большая работа для меня, как для читателя. Трудно определить, что является самым важным и что наименее важным здесь одним взглядом. Даже когда я найду время, чтобы познакомиться с контентом, все еще не так много визуальных «ориентиров», помогающих мне найти путь к некоторым конкретным данным. Подумайте: когда вы оставляете свою машину на участке, вы ищете какой-то «ориентир», который поможет вам вспомнитьгде твоя машина Попробуйте на минуту подумать о том, как вы используете веб-сайты, как вы можете вспомнить, какие варианты / ссылки вы используете чаще всего. Разве вы не ищете ссылку в виде «второго квадрата справа от этого красного логотипа в верхней части сайта»? Нет чтения - просто запоминается изображение / местоположение.

Я думаю, что самая большая проблема здесь не в «уродстве», а в отсутствии градации важности. Попробуйте «провести» вашего посетителя сайта через ваши данные. Что вы хотите, чтобы он увидел первым? Куда пойти оттуда? Таким образом, вы создаете «поток чтения» / «рабочий процесс». Вы индуцируете (возможно, не так?) Конкретный путь, по которому будут следовать ваши читатели. Если есть несколько маршрутов, попробуйте сделать их как можно более отдельными (например, «путь» через меню - что-то вроде оглавления / основного обзора / описания структуры, «пути» через форму входа в систему и т. Д.). ). Я думаю, что если вы это исправите, ваш дизайн обязательно улучшится. Может быть, он не станет «красивым» сразу, но, по крайней мере, он будет более доступным и понятным, и, как побочный эффект, более приятным с эстетической точки зрения.

Я надеюсь, что это имеет какой-то смысл для вас :).

Несколько вещей, которые я заметил, которые мне не особенно нравятся:

• Это больше похоже на «back-end» или «admin» часть веб-сайта, в частности, некоторую форму системы управления контентом, а не на «front-end» или то, что люди видят. В частности, всплывает PhpMyAdmin.
• Несоответствие используемых цветов. У логотипа (который я считаю слишком тесным) уже есть некоторые цвета, поэтому эти цвета могут быть использованы для разработки цветовой схемы для сайта. Эта цветовая схема должна применяться к таким вещам, как полосы для таблиц, цвет для ссылок и так далее.
• Слишком много контрастных изображений. Я обычно сторонник большей простоты и стандартизации в дизайне. Однако на этом скриншоте мы видим:
  • Коробка "Все" - это жесткая прямоугольная коробка.
  • Боковая панель навигации использует закругленные углы.
  • В подтемах используется радиальный градиент.
  • Ни в одном из блоков нет достаточного «отступа»: обратите внимание, как тесны слова в ссылках «подтемы»; они бы выглядели намного лучше, если бы вокруг них было место.

Затем обязательно внимательно прочитайте ответ от @thebodzio , поскольку он очень точный: новому посетителю сайта будет трудно узнать, где искать в первую очередь, и это, как правило, признак «плохого» дизайна.

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

Сказав это, относительная важность "Sub Topics" кажется странной:

• Должно ли название быть чем-то вроде «подтемы»?

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

• Вес заголовка «Подзаголовки» делает его более тяжелым (более важным), чем «сухари».

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

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

• Повторение : Designs только хорошо выглядеть , если вещи , которые являются таким же видом , как он. Другими словами, стремитесь к последовательности. Это может принять форму всех ваших фонов, имеющих одинаковую насыщенность и яркость, но различающихся по оттенку или использующих градиенты для всех заголовков (или не использующих градиенты). Например:

  • фон «Sub Topics» - единственный фон с градиентом (кнопка - это совсем другое, поэтому наличие градиента на нем делает его другим, привнося контраст в игру)

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

  • цвет для «Тестовых предпочтений» (пишется неправильно) не отображается в логотипе, к которому вы в противном случае пробовали свои цвета; попытаться получить тот же оттенок для элементов страницы, что и цвета в книге

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

• Выравнивание : Выравнивания делают элементы, соединенные в единое целое, а не выглядят разбросанными и несвязными. Например:

  • поле «Запомнить меня» ниже, чем другой текст рядом с ним

  • «Предпочтения в викторине» дальше справа, чем тема крошек выше

  • предпочтения центрированы, в то время как большая часть основного текста выравнивается по левому краю

• Близость : сближение объектов делает их сгруппированными в уме вашего пользователя, хотя оставление слишком малого пространства вокруг объектов делает их тесными и их трудно увидеть как отдельные предметы. Например:

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

  • интервал между вашими абзацами под заголовком основного тела не соответствует

В Интернете есть еще много идей о дизайне, но это четыре из самых важных.

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

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

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

ОК, давайте немного конкретнее. Мой первый совет будет: упростить! Возможно, вы захотите черпать вдохновение из оригинального дизайна главной страницы Google , который в основном состоит из трех элементов: логотипа, поля поиска и двух кнопок (и одна из них может утверждать, что вторая кнопка была ненужным беспорядком). Да, и несколько ссылок на другие страницы с большим количеством материала - которые были четко обозначены как второстепенные, из-за того, что они написаны более мелким шрифтом и / или серым цветом, - и уведомление об авторском праве, по- видимому, добавлено как тонкий намек на пользователи, что страница действительно закончилась там.

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

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

Глядя на их титульный лист, особенно без моих каракулей, очевидно, что на нем мало вещей, особенно не относящихся к делу. Конечно, в нижней части страницы есть целая куча маленьких заметок и ссылок, но это все «ниже сгиба», и новые пользователи просто проигнорируют. Вторая наиболее заметная вещь, написанная большими дружескими буквами в том месте, где пользователь, скорее всего, будет искать в первую очередь, представляет собой объявление из восьми (!) Слов, объясняющее, о чем сайт. Наиболее видно , что это большой графический показ, в простых изображений, основные этапы рабочего процесса, что делает все это выглядеть легко и привлекательно. И прямо между ними есть большая кнопка, предлагающая пользователю нажать на нее и начать работу.

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

А как насчет вашего сайта? Первая вещь на вашем скриншоте, которая может показаться мне интересной, это зеленые заголовки, которые, по крайней мере, короткие, крупным шрифтом и в середине того, что выглядит как «область содержимого». Увы, там нет особого интереса - в разделе «Информация о теме» просто есть тривиальные метаданные, которые должны быть напечатаны мелким шрифтом в каком-то углу, в разделе «Подзаголовки» есть пара ссылок (на другие похожие страницы?), Которые появляются дублировать их в правом верхнем углу, а раздел «Ресурсы» просто пуст. И, кроме того, даже прочитав все это, я до сих пор не представляю, о чем сайт и что я могу с ним сделать.

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

Или, глядя на это с другой стороны, что вы можете позволить себе потерять с вашей текущей страницы? Ну, я бы на самом деле сказал «большая часть», но очевидная вещь, которая выскакивает (помимо дампа метаданных) - это форма входа в систему вверху. Конечно, хорошо, чтобы предоставить зарегистрированным пользователям простой способ входа в систему, но это не значит, что вам нужно отображать форму входа на каждой странице. Вместо этого делайте это так, как это делает Doodle, и просто используйте всплывающую форму входа, доступную по ссылке. (Для пользователей с отключенным JavaScript полезно иметь отдельную страницу входа в качестве резервной цели для ссылки.)

Вы также можете потерять кучу других вещей: например, как новый и незарегистрированный пользователь, почему я вижу то, что похоже на ссылку «удалить»? Могу ли я действительно удалить страницу? Если да, то почему ? Если нет, почему ссылка там?

Точно так же примечание «(703 Доступные вопросы)» является бессмысленным отвлечением, поскольку оно выглядит как элемент интерфейса. Если вы хотите поразить посетителей глубиной вашего сайта, поместите его туда, где он должен быть: в подходящем впечатляюще выглядящем пятне в области контента. (« У нас уже есть 703 вопроса, и их будет еще больше! »)

Наконец, я должен отметить, что все относительно. Например, TV Tropes имеет ужасный пользовательский интерфейс (очень похожий на ваш, на самом деле), но это не имеет значения, потому что они компенсируют это множеством отличного и тесно связанного контента, так что большинство новых пользователей выиграло ' не нужно трогать интерфейс навигации вообще. На самом деле, это довольно часто встречается на вики-сайтах; Википедия не намного лучше. Однако выгода заключается в том, что вам нужно уже иметь этот груз контента (или базу пользователей, готовую его создать), чтобы этот эффект мог начать работать на вас.

Ваш "дизайн" был бы хорош ... в 1995 году. На самом деле он устарел. Это дизайн, который инженеры всегда придумывают :-) Самое простое, что вы можете сделать, это использовать какую-то среду CSS, например Twitter Bootstrap , Zurb , что угодно . Фреймворк поможет вам защитить вас от собственного "творчества" ;-)

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

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

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

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

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

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

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

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

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

Вот почему я думаю, что люди негативно реагируют на ваш сайт: он вызывает слишком много вопросов!

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

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

Итак, во-первых, вы должны ответить «о чем этот сайт?». Например, с заявлением о миссии. Это может быть очевидно для вас, но не для всех остальных в Интернете. Какова основная цель? Пройдите тесты или создайте тесты? Каково первое, что вы хотите, чтобы люди делали? Авторизоваться? Ответить на викторину? Создай? Это то, на что вы должны ответить, если хотите, чтобы люди оставались на вашей странице.

Тогда вы должны организовать свою информацию. Что такое контент, что такое мета (логотип, навигация, логин). Посмотрите на stackexchange. Содержимое (светлое) четко отличается от мета (темного).

Сгруппируйте вещи, которые идут вместе. У вас есть сухари, которые отключены от навигации. Визуально так же как формулировка. Я не нахожу "Все" в основной навигации. Как я могу попасть туда?

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

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

Некоторые первые советы / советы / рекомендации: сделайте шрифты h-тегов (Заголовки) больше, чем теги p, намного больше (что-то в диапазоне размеров шрифта заголовка 30-48 и абзаца (11-макс. 13). 20 пикселей поля или отступы между блоками контента (например, maring-bottom: 20px; для панели входа в систему она будет более отдельной и удобной для чтения.

Заставить кого-то придумать вам подходящий логотип, тот, который у вас сейчас есть ... не очень хорош. Попробуйте использовать другие шрифты, например, шрифт без засечек (например, Open Sans, бесплатно для шрифтов Google или просто Arial-Helvetica).

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

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

Рекомендация книги: Smashing Book [первая и вторая книга] и веб-сайт:

http://smashingmagazine.com

и еще один: http://www.bamagazine.com/

Вот Это Да! Вы действительно сгенерировали ответ! По крайней мере, вы знаете, что ваш дизайн не останется незамеченным;)

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

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

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

1. Цвет фона страницы белый, а заголовки разделов / Блики в оттенки желтого или белого цвета, вы можете попробовать немного контрастные цвета , вы можете разработать уровень контрастности , чтобы соответствовать иерархии элементов (более высокий уровень заголовка = более контрастность) или фиксированная цветовая схема содержимого заголовка (например, глубокий оранжевый, как на второй странице книги, показанной в логотипе для заголовка, белый для текста заголовка и темно-серый для содержимого текста).
2. Слишком много свободного места на вашей странице, свободное место хорошо, чтобы дать пользователям возможность дышать, но слишком много свободного места делает вашу страницу похожей на бэк-офис / недостаточное обслуживание. например, раздел «Подтемы» на первом экране мог занимать все пространство в разделе «Все». Кроме того, почему два лишних раздела подтем?
3. Распределение контента ИМО должно подчиняться иерархии . Если вы возьмете в качестве примера какой-либо из сайтов, например, кодовые страницы Google (которые очень похожи на ваш сайт), Википедию или этот сайт, все они тратят значительное количество места на заголовок сайта , а затем идет контент. Также в наши дни на многих страницах используется панель инструментов, такая как заголовок, которая имеет отдельный цвет, общие меню и встроенный логотип сайта, но вы можете сказать, что ваш логотип слишком велик для этого.
   Возьмите подтему раздел в крайней правой части страницы, например, действительно ли они похожи на дальнюю специализацию текущего контента? Скорее они выглядят как случайные теги или связанные темы. Вы можете отразить их иерархию, сделавдревовидная структура, как на различных страницах документации, это также сделает ненужными хлебные крошки. Также IMO правильное место для этого дерева (навигация) будет в левой боковой панели, а остальные действия будут идти в месте панировочных сухарей.
4. Однородность так же важна, как и распределение. Ваши кнопки могут иметь разные цвета в зависимости от их назначения / важности. Но их структура должна оставаться такой же. У вашей кнопки «Войти» острый край, а у «Взять викторину сейчас» закругленный угол. Вы можете хотеть избавиться от любого из тех подходов.
5. Ссылки и действия не совпадают , вы должны также назвать их соответственно. Подобно тому, как меню «Удалить» слева отражает удаленные элементы или действие удаления, нельзя сказать. Дайте пользователям кнопку удаления и удаленный элемент меню / вкладку, как в GMail.
6. Шрифты очень важны для отражения цели. Если вы создаете художественную страницу или какое-либо семейство литературных засечек, это хорошо для этого, но чтобы создать сайт для электронного обучения, вы должны выбрать шрифт, который удобен для просмотра в разных размерах и имеет меньшее увеличение (например, удлиненные края), Санс хорош в этом. Википедия использует это, например. Выбор размера и веса также важен. Там, где статистика важна (и меняется), выделите цифры жирным шрифтом (например, 703 доступных вопроса). Как вы сделали для выбора количества вопросов на втором экране. Курсив в заголовках IMO не выглядит хорошо, почему бы не использовать жирный шрифт вместо этого?
7. Это очень похоже на мое личное мнение, но я думаю, что некоторые более закругленные углы избавят пользователей от ощущений, похожих на коробки.

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

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

Если вы хотите сделать быстрое решение, я постараюсь дать некоторые подробности, чтобы вы начали. Ответы здесь хорошие, но они не очень конкретные. Я попытаюсь.

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

Вот что я бы сделал (это заняло бы меньше дня):

1. Начните с логотипа. Это выглядит очень занятым -> попробуйте сделать это проще. Используйте более яркие цвета; желтый выглядит грязно. Попробуйте более простой шрифт.
   • Сделав логотип, вы можете подобрать цвета сайта к нему
2. Все на сайте должно быть "воздушным". Так что не стесняйся.
   • левая колонка должна быть намного шире. В 1,5 раза больше текущей ширины
   • вершина должна иметь больший интервал вокруг полей логина
   • право должно иметь подтемы каждый на новой строке. Заставьте их иметь больший интервал вокруг них, чтобы они не сжимались друг в друга
   • вложенная таблица может использовать тонны для заполнения ячеек, div для заголовка может быть дополнена и т.д.
3. Весь контент должен течь, а не быть изменчивым. Это означает, что выровняйте как можно больше, используйте одинаковые шрифты и правильные размеры.
   • Центральная колонка «Все знания в мире» выглядит неуместно с остальным содержанием. Возможно, поместите его влево, удалите подчеркивание и, конечно, сделайте его меньше заголовка.
   • Содержимое страницы не выровнено. Это выглядело бы лучше, если бы вы выровняли под-содержание с подзаголовками.
4. Поля входа сверху можно сделать лучше.
   • Вы можете поместить метки в поля ввода текста (выделены серым цветом). Это сделало бы это чище.
   • Вы можете сделать флажок запомнить меня / шрифт намного меньше. Это не самая важная функция, поэтому она не должна быть такой большой, как важная часть.

Это не сделает ваш сайт самым удивительным сайтом в интернете, но, надеюсь, отработает его настолько, что пройдет проверку. :)

вау ... это довольно плохо лол.

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

Но если этого не сделать, вот несколько моих предложений. Индексная / целевая страница, несмотря на свое название, должна функционировать больше как рекламный щит или реклама в журнале. Он должен передать свое сообщение БЫСТРО, через несколько секунд. Обратите внимание, что я сказал «сообщение», а не информация. Информация должна быть там, где ее ищет зритель, но не обязательно, чтобы она была выложена как слегка зашифрованное оглавление.

Итак, что касается сообщения ... первое, о чем нужно подумать, это ЧТО они смотрят ... веб-страница, да, но веб-страница чего? Даже читая ваши категории, мне не понятно, что это за страница.

«Что» это будет передано с помощью цветовой схемы, общего макета, а также заголовков.

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

Я предполагаю, что ваша самая важная вещь - «Все знания в мире», потому что вы центрировали это (плохая идея), выделили курсивом (плохая идея!) И дали ему много места вокруг себя (хорошая идея). Но за исключением сами слова ... не понятно, что это ЕСТЬ или делает, попробуйте что-нибудь более описательное и менее глупое.

Попробуйте разбить целевую страницу на 3 элемента дизайна и 3 уровня важности информации. Спросите себя, что ПЕРВОЕ, что они должны увидеть, ПЕРВОЕ, что они должны сделать? что такое второй, третий? и попытаться изменить дизайн соответственно.

Используйте меньше цветов и имейте смысл ... почему 3 разных блюзовых блюда случайно разбросаны по тексту ??? Используйте больший размер шрифта (!), Снова разбив его на 3 с, это хорошее начало, БОЛЬШОЙ шрифт для наиболее важного, средний для вторичного и т. Д.

Мое последнее предложение - ПЕРВАЯ разработка вашего проекта и заблаговременно до написания кода. Я предлагаю начать с БУМАГИ и ручек или карандаша, чтобы заблокировать страницу. Просто быстрые наброски, НЕ пишите реальные слова, когда вы делаете это, просто блокируйте области, когда вы пытаетесь решить, насколько большой должна быть область содержимого по сравнению с заголовком. насколько велика боковая панель и так далее.

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

И начать искать в и для дизайна. Взгляни. не оценивайте содержание, вместо этого СМОТРИТЕ, какие сообщения передаются веб-страницами. Как они используют расстояние, цвет, размер шрифта? Попробуйте подражать хорошему дизайну. удачи

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

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

До тех пор, пока вы не согласитесь с тем, что сосете в UX, у вас останется эта проблема. Как сказано выше, графический дизайн - это ощущение. Графический дизайн не равен инженерному проектированию. Вы не можете математически построить что-то, интегрировать это с другими «математически правильными» вещами и ожидать хорошего результата. Вы никогда не будете хороши в UX (вероятно), потому что вы просто не смотрите на мир так, как его видит дизайнер. Но если прекратить измерять свою страницу и сравнивать ее с чем-то другим - полностью открыть себя для изучения, понимая, что вы ничего не знаете о графическом дизайне, то вы можете начать получать его ...