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

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

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

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

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

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

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

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

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

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

Сказав это, относительная важность «Подтем» кажется странной:

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

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

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

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

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

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

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

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

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

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

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

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

  • «Настройки викторины» находятся правее навигационных цепочек темы выше.

  • настройки выравниваются по центру, а основной текст выравнивается по левому краю.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Затем вы должны систематизировать информацию. Что такое контент, что такое мета (логотип, навигация, логин). Взгляните на стековый обмен. Контент (светлый) четко отличается от мета (темного).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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