Чому люди продовжують говорити, що мій сайт виглядає жахливо?

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

Ось як це виглядає зараз:

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

Редагувати 1 : Як я вже говорив, люди, як правило, мають погане враження про це, просто переглянувши його, ще до того, як я введу функціональність. Це змушує мене думати, що щось не так з кольорами, які я вибрав, або з макетом. І я думав, що конкретний дизайн сайту може бути корисним для дизайнерів там, як конкретна історія є навчальною для студентів літератури, а конкретні алгоритми корисні для студентів із програмним забезпеченням. Дякую.

Побічна примітка: Функціональність: Якщо це має значення, ось що має на меті веб-сайт (дуже коротко): Користувачі можуть додавати теми, а до кожної теми додавати питання разом зі своїми відповідями . Сайт створює "тести" та "вікторини" для користувачів, щоб взяти та порівняти їх результати

Редагувати 2 : Ось ще один друкований екран:

Редагування 3 : Щоб зрозуміти, не ці скріншоти - це моя цільова сторінка. Вони - це тематичні змістові сторінки.

Перш за все хочу наголосити, що все у цій відповіді - це лише MHO, а не якась універсальна істина;).

Як інженер програмного забезпечення, ви знаєте, що важливим у кожному проекті є наявність чіткої та чітко визначеної структури - порядку. Приблизно те саме стосується "візуальних" мистецтв та дизайну. Я схильний розглядати дизайн як "візуальну інкапсуляцію". Дизайнер знає структуру інформації, яку він хоче передати цільовій аудиторії. Наприклад: він розробляє книгу. Він знає, що ця книга розділена на глави та кожна глава на підрозділи. Він знає, що основна справа позначена деякими нотатками (нотатки з поля, виноски, сторонні позначки). Тепер він повинен використовувати свій "арсенал", щоб зробити цю структуру "видимою". Він може використовувати один розмір і форму шрифту і заповнювати всі послідовні сторінки плямою гліфів, але це означатиме, що читачеві доведеться читати, інтерпретувати та розуміти все, щоб знати структуру інформації, що міститься. Дизайнер також може «підказати» читачеві важливість / рівень різних відомостей. Один з прийомів - використовувати розмір шрифту для показу градації представлених “даних”. Якщо це зроблено, читачеві не доведеться читати (не кажучи вже про інтерпретацію) тексту, щоб розмежувати основні питання та, наприклад, виноски. Важливість та взаємна “позиція” інформації “описується” візуально. Читач може легко «декапсулювати» інформацію. Можна також сприймати це як певний процес серіалізації / десеріалізації, що відбувається у візуальній області (абстрактна інформація відкидається на «візуальний» простір). Це спрощення грейпи, але я думаю, що для початку це досить добре. Якщо це зроблено, читачеві не доведеться читати (не кажучи вже про інтерпретацію) тексту, щоб розмежувати основні питання та, наприклад, виноски. Важливість та взаємна “позиція” інформації “описується” візуально. Читач може легко «декапсулювати» інформацію. Можна також сприймати це як певний процес серіалізації / десеріалізації, що відбувається у візуальній області (абстрактна інформація відкидається на «візуальний» простір). Це спрощення грейпи, але я думаю, що для початку це досить добре. Якщо це зроблено, читачеві не доведеться читати (не кажучи вже про інтерпретацію) тексту, щоб розмежувати основні питання та, наприклад, виноски. Важливість та взаємна “позиція” інформації “описується” візуально. Читач може легко «декапсулювати» інформацію. Можна також сприймати це як певний процес серіалізації / десеріалізації, що відбувається у візуальній області (абстрактна інформація відкидається на «візуальний» простір). Це спрощення грейпи, але я думаю, що для початку це досить добре. Можна також сприймати це як певний процес серіалізації / десеріалізації, що відбувається у візуальній області (абстрактна інформація відкидається на «візуальний» простір). Це спрощення грейпи, але я думаю, що для початку це досить добре. Можна також сприймати це як певний процес серіалізації / десеріалізації, що відбувається у візуальній області (абстрактна інформація відкидається на «візуальний» простір). Це спрощення грейпи, але я думаю, що для початку це досить добре.

Тепер, що стосується вашого дизайну. Я особисто не знаю, з чого почати на це дивитися. Я мушу все це прочитати, все зрозуміти, все подумати, а потім повернути речі в той порядок, який я вважаю правильним. Це дуже багато роботи для мене як для читача. Важко визначити, що найбільше і що найменш важливе тут за один погляд. Навіть коли я знайду свій час, щоб познайомитись із вмістом, все ще не так багато візуальних «орієнтирів», які допомагають мені знайти шлях до якихось конкретних даних. Подумайте: коли ви залишаєте машину на партії, ви шукаєте якусь «орієнтир», яка допоможе вам запам'ятатиде ваша машина. Спробуйте на мить подумати, як ви використовуєте веб-сайти, як ви можете запам’ятати, де є варіанти / посилання, якими ви користуєтесь найчастіше. Чи не ви шукаєте посилання як "другий квадрат праворуч від цього червоного логотипу у верхній частині сайту"? Немає читання - просто запам'ятовується зображення / місцезнаходження.

Я думаю, що найбільша проблема тут не в «потворності» - я думаю, що це недостатня градація важливості. Спробуйте "повести" відвідувача свого веб-сайту через ваші дані. Що ти хочеш, щоб він побачив першим? Куди піти звідти? Таким чином ви створюєте "readflow" / "workflow". Ви спонукаєте (крім можливо?;)) Певного шляху, який пройдуть ваші читачі. Якщо є кілька маршрутів, спробуйте зробити їх максимально відокремленими (наприклад, "шлях" через меню - щось на зразок змісту / основного огляду / опису структури, "шлях" через форму входу тощо. ). Я думаю, що якщо ви виправите це, ваш дизайн точно покращиться. Можливо, вона не стане «красивою» одразу, але, принаймні, вона буде більш доступною і зрозумілою і тим самим, як побічний ефект, більш естетично приємною.

Я сподіваюся, що це має сенс для вас :).

Кілька речей, які я помічаю, що мені особливо не подобається, це:

• Це більше схоже на "бек-енд" або "адмін" частину веб-сайту, особливо якусь форму системи управління вмістом, а не "передню" або те, що бачать люди. Зокрема, PhpMyAdmin спливає на розум.
• Невідповідність використовуваних кольорів. Логотип (який я вважаю трохи затиснутим) вже має деякі кольори, тому ці кольори можна використовувати для розробки кольорової схеми для сайту. Ця колірна гамма повинна застосовуватися до таких речей, як смуга для таблиць, колір для посилань тощо.
• Занадто багато контрастних візуальних засобів. Зазвичай я виступаю за більшу простоту та стандартизацію в дизайні. Однак на цьому скріншоті ми бачимо:
  • Поле "Все" - це твердий правий кутовий ящик.
  • Навігація на бічній панелі використовує закруглені кути.
  • У підтемі використовується радіальний градієнт.
  • Жоден з полів не має достатньої кількості "прокладки": зверніть увагу на те, як відображаються тісні слова у посиланнях "підтеми"; вони виглядали б набагато краще, якби навколо них було простір.

Тоді, безумовно, уважно прочитайте відповідь від @thebodzio , оскільки вона дуже точна: Новому відвідувачеві сайту важко буде знати, де шукати спочатку, і це, як правило, ознака "поганого" дизайну.

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

Сказавши це, відносна важливість "Підтеми" видається дивною:

• Чи повинен заголовок бути чимось на кшталт "Підтеми"?

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

• Вага рубрики "Підтеми" робить її важчою (важливішою), ніж тематичні сухарі.

Для графічного дизайну ви можете запитати себе про основні принципи кожного елемента сторінки:

• Контраст : Елементи, що не однакові, повинні виглядати настільки різними, що ваші користувачі можуть негайно розрізнити їх.

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

  • фон "Sub Topics" - єдиний з градієнтом (кнопка - це різна річ, тому наявність градієнта на ній робить його виглядати по-іншому, вводячи контраст у гру)

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

  • колір логотипу "Налаштування вікторини" (написано неправильно) не відображається в логотипі, до якого ви в іншому випадку намагалися використовувати свої кольори; спробуйте отримати такий же відтінок для елементів сторінки, як і кольори в книзі

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

• Вирівнювання : Вирівнювання робить елементи з'єднані в ціле, а не виглядають розсіяними і непоєдними. Наприклад:

  • поле "Запам'ятати мене" нижче, ніж інший текст поруч

  • "Налаштування вікторини" знаходиться праворуч, ніж тематичні сухарі вгорі

  • налаштування в центрі, тоді як більшість інших текстів тексту вирівнюється ліворуч

• Близькість : зближення об'єктів робить їх згрупованими в думці користувача, хоча залишаючи занадто мало місця навколо об’єктів, вони стають тісними і важко сприйматися як окремі предмети. Наприклад:

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

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

В Інтернеті є багато іншого про принципи дизайну, але це чотири найважливіші.

Я думаю, що головна проблема дизайну вашого сайту полягає не стільки з графічним дизайном, скільки з дизайном інтерфейсу користувача . Зокрема, коли я переглядаю ваші скріншоти вище, питання, яке я задаю собі, - це не " Круто, що я повинен спробувати спершу? ", А " Що за чорт це, і що я маю з цим робити? "

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

Графічний дизайн має певний ефект тут, оскільки поганий графічний дизайн може зробити будь-який користувальницький інтерфейс заплутаним, тоді як хороша графіка може покращити користувальницький інтерфейс, зробивши зрозумілі значення та зв’язки різних елементів інтерфейсу та звернувши погляд користувача на найважливіші елементи. Але в принципі проблема полягає більше в тому, що подати користувачеві та як його структурувати, ніж у тому, як зробити його красивим.

Гаразд, давайте трохи детальніше. Моя перша порада була б: спростіть! Можливо, ви захочете взяти натхнення від оригінального дизайну титульної сторінки Google , який в основному містив три елементи: логотип, поле пошуку та дві кнопки (і одна може стверджувати, що друга кнопка була непотрібною безладністю). О, і кілька посилань на інші сторінки з більшою кількістю матеріалів - які були чітко позначені як другорядне значення, якщо вони знижуються, невеликим шрифтом та / або сірим кольором - та повідомлення про авторські права, очевидно, додані як тонкий натяк на користувачів, які на цій сторінці дійсно закінчилися.

Або погляньте на Doodle , іншу компанію з приємною назвою та простим, але ефективним дизайном титульної сторінки. Для зручності я зробив скріншот їх головної сторінки та додав червоні писанки вгорі:

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

Дивлячись на їхню титульну сторінку, особливо без моїх писанок, очевидна річ у тому, як на ній є мало речей - особливо невідповідних речей. Звичайно, внизу сторінки є маса невеликих приміток та посилань, але це все "внизу сторінки", і щось нове користувач просто ігнорує. Друга найпомітніша річ, великими дружніми літерами прямо там, де користувач, швидше за все, подивиться перший, - це восьми (!) Розмиття слів, що пояснюють, про що йдеться на сайті. Найбільш видно , що це великий графічний показ, в простих зображень, основні етапи робочого процесу, що робить все це виглядатиме легко і привабливо. А прямо між ними велика кнопка, яка пропонує користувачеві натиснути на неї та розпочати роботу.

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

То як щодо вашого сайту таким, яким він є? Перше , на скріншоті , який вискакує для мене як - то , що могло б бути варто подивитися є зелені заголовки, по крайней мере , короткі, великим шрифтом і в середині , що виглядає як «області контенту». На жаль, там немає нічого особливого інтересу - у розділі "Інформація про теми" є лише тривіальні метадані, які мають бути невеликим шрифтом у якомусь куті, розділ "Підтем" має кілька посилань (на інші подібні сторінки?), Які з'являються дублювати їх у правому верхньому куті, а розділ "Ресурси" просто порожній. І до того ж, навіть прочитавши все це, я досі не маю уявлення про те, про що йдеться, або що я можу з ним зробити.

Отже, що я можу зробити з вашим сайтом? Ну, ви кажете, що я можу створювати та приймати вікторини, а як щодо розміщення на першій сторінці великих та привабливо виглядаючих посилань / кнопок, на яких написано « Зробіть вікторину » та « Створіть вікторину »? (Перший повинен бути більш помітним, оскільки, мабуть, новий користувач вірогідніше буде взяти вікторину, ніж створити його, але включення другого на першій сторінці принаймні дає змогу користувачам знати, що вони теж можуть це зробити.) Також коротке пояснення - від кількох слів до короткого абзацу - про те, що йдеться про ваш сайт, також було б добре. (Це також може бути хорошим місцем для посилання на посилання "читати більше".)

Або, дивлячись на це з іншого боку, що ви можете дозволити собі втратити зі своєї поточної сторінки? Ну, я б справді сказав "більшість цього", але очевидно, що підскакує (окрім скидання метаданих) - це форма входу вгорі. Звичайно, добре надати зареєстрованим користувачам простий спосіб входу, але це не означає, що вам потрібно показувати форму входу на кожній сторінці. Натомість зробіть це так, як робить Doodle і просто мати форму спливаючого входу, доступну за посиланням. (Для користувачів, які вимкнено JavaScript, добре також мати окрему сторінку входу як резервну ціль для посилання.)

Ви можете втратити ще багато речей: наприклад, як новий і незареєстрований користувач, чому я бачу те, що схоже на посилання "видалити"? Чи можна дійсно видалити сторінку? Якщо так, то чому ? Якщо ні, то чому там посилання?

Аналогічно, примітка "(703 доступних запитань)" - це безглузде відволікання, де воно є, як виглядає як елемент інтерфейсу. Якщо ви хочете вразити відвідувачів глибиною вашого веб-сайту, покладіть його там, де він належить: у відповідному вражаючому погляді в області вмісту. (" У нас уже доступно 703 запитання, і ще більше надходить! ")

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

Ваш "дизайн" був би гарним ... в 1995 році. Насправді він застарів. Це дизайн, який інженери завжди придумують :-) Найпростіше, що ви можете зробити, - це використовувати якийсь фреймворк css, тобто Twitter Bootstrap , Zurb , що завгодно . Рамка допомагає захистити вас від власної "творчості" ;-)

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

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

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

Сказавши, що ваш макет по суті чудово, але ваш дизайн проблематичний, на жаль, важче вирішити ситуацію. Якби ваш макет був проблемою, ми могли б дати конкретніші поради, наприклад, "перемістіть ваші пошукові поля сюди" або "розмістіть там свій логотип". Макет - це реально реалізація зручності використання .

Дизайн, однак, стосується відчуття та стилю, що, звичайно, набагато складніше коментувати. Хоча я можу сказати, що ви просто залишили багато варіантів кольорів за замовчуванням (фон білий, посилання сині, дуже мало зображень інтерфейсу), набагато складніше сказати, які кольори та графіка повинні бути там . Багато що залежить від того, якого почуття ти хочеш. Нудні та безпечні блюзові та сірі кольори для корпоративного почуття, штрихи та жовтіння для невинного та дитячого почуття, гарячі червоні та чорні кольори для захоплюючого почуття нічного клубу ... І навіть тоді, лише використовуючи ці приклади кольорів, не обов'язково призведе до відчуває, що я прив’язався до них. Чорт у деталях.

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

Однак я боюся, що якщо ваша мета - не співпрацювати з дизайнером, а навчитися застосовувати переконливий дизайн сайту, ви не просто отримуєте відповідь, ви їдете в подорож. Існує приблизно стільки ж маршрутів, щоб стати хорошим дизайнером, як і дизайнерів, і багато ресурсів там, тому можливостей для навчання не бракує.

Щодо найкоротшого шляху до набуття певного дизайнерського сенсу для цього конкретного веб-сайту, я би роздивився інші сайти, які вам подобаються, та інші сайти, які пропонують подібну послугу до тієї, яку ви робите, і почати порівнювати та протиставляти те, що вам подобається та про що ті, що відсутні на вашому сайті.

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

Ось чому я думаю, що люди негативно реагують на ваш сайт: це викликає занадто багато питань!

Як ви вже говорили, перед тим , як ввести функціонал. Що говорить мені, що люди не розуміють, про що йдеться. Яким має бути перший відповідь на веб-сайт. Тому що якщо це в Інтернеті, ви не можете стояти поруч із ними та пояснювати це.

"Всі знання у світі" не точно повідомляють про те, що ви можете знайти на сайті (або не дуже правдоподібно з цього приводу) або чому ви повинні увійти в систему. Отже, ваш дизайн сприймається погано, оскільки він не підтримує відповіді на ці запитання.

Отже, по-перше, вам потрібно відповісти "про що цей сайт?". Наприклад, із заявою про місію. Це може бути очевидним для вас, але не для всіх інших в Інтернеті. Яка головна мета? Взяти вікторини чи створити вікторини? Що перше, що ти хочеш зробити від людей? Вхід? Відповісти на вікторину? Створити його? Це те, на що слід відповісти, якщо ви хочете, щоб люди залишалися на вашій сторінці.

Тоді вам слід організувати свою інформацію. Що таке вміст, що таке мета (логотип, навігація, вхід). Погляньте на stackexchange. Зміст (світлий) чітко відрізняється від мета (темний).

Згрупуйте речі, які йдуть разом. У вас є сухарі, які не пов'язані з навігацією. Візуально, а також формулювання. Я не знаходжу "Все" в головній навігації. Як я можу потрапити?

Чому все це? Чим швидше люди зрозуміють подану їм інформацію, тим більше шансів залишитися та взаємодіяти. Якщо їх плутають і стикаються з питаннями, на які вони не можуть відповісти, вони негативно відреагують.

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

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

Запропонуйте комусь розробити вам належний логотип, той, який у вас зараз є, - це не добре. Спробуйте різні шрифти, можливо, шрифт sans-serif (наприклад, Open Sans, безкоштовний на шрифтах google, або .. просто Arial-Helvetica).

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

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

Рекомендація книг: Розгромна книга [перша та друга книги] та веб-сайт:

http://smashingmagazine.com

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

Оце Так! Ви справді створили відповідь! Принаймні, ви знаєте, що ваш дизайн не залишається непоміченим;)

Ось коротка відповідь на ваше запитання: Сайт виглядає так, як його розробив програмний інженер. Це те, що ти робиш, і я впевнений, що ти це добре робиш. Тепер вам потрібен хтось, хто робить дизайн інтерфейсу, щоб зробити вашу ідею доступною. Навколо цього немає способу. Ви не збираєтеся вивчати дизайн у вихідні та вирішувати проблему.

Знайдіть студента чи молодого дизайнера, який хоче заповнити своє портфоліо і дати їм трохи свободи. Ви хочете, щоб хтось, хто працює, був чистим та незайманим для цього проекту. Подивіться, чи зможете ви знайти дизайнера, який підтримує мінімалізм.

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

1. Колір фону сторінки білий, а заголовки розділів / Відблиски в відтінки жовтого або білого кольору, ви можете спробувати трохи контрастні кольори , ви можете розробити рівень контрастності , щоб відповідати ієрархії елементів (більш високий рівень заголовка = більше контраст) або фіксовану колірну схему вмісту заголовка (наприклад, глибокий помаранчевий, як на другій сторінці книги, показаний на логотипі для заголовка, білий для тексту заголовка та темно-сірий для тексту-тексту).
2. Занадто багато вільного місця на вашій сторінці, вільний простір корисний для надання користувачам місця для дихання, але занадто багато вільного місця робить вашу сторінку схожою на бек-офіс / недостатнє обслуговування. наприклад, розділ "Підтеми" на першому екрані міг би охопити весь простір у розділі "Все". Крім того, чому два зайвих підтеми?
3. Розподіл вмісту IMO має підходити до ієрархії . Якщо ви берете будь-який із сайтів, таких як кодові сторінки Google (який дуже схожий на ваш сайт), Вікіпедію або цей сайт, наприклад, вони витрачають значну кількість місця для заголовка сайту , а потім надходить вміст. Також зараз на багатьох сторінках багато панелей інструментів, таких як заголовок, має чітке забарвлення, загальні меню та вбудований в нього логотип сайту, але ви можете сказати, що ваш логотип занадто великий, щоб це зробити. Наприклад,
   візьміть до розділу підтеми в крайній правій частині сторінки, чи справді вони схожі на більш далеку спеціалізацію поточного вмісту? Вони скоріше виглядають як випадкові теги або споріднені теми. Ви можете відобразити їх ієрархію, зробивши адеревоподібна структура,як і на різних сторінках документації, це також зробить сухарі непотрібними. Крім того, IMO правильне місце для цього дерева (навігація) було б у лівій бічній панелі, а решта дій піде на місце сухарів.
4. Уніфікованість так само важлива, як і розподіл. Ваші кнопки можуть мати різні кольори відповідно до їх призначення / значення. Але їх структура повинна залишатися однаковою. Ваша кнопка "Увійти" має гострий край, тоді як "Візьміть вікторину зараз" закругленим. Можливо, ви захочете позбутися будь-якого з цих підходів.
5. Посилання та дії не однакові , і їх слід відповідно назвати. Як і меню "Видалити" зліва відображає видалені елементи або дію видалення, сказати не можна. Надайте користувачам кнопку видалення та меню / вкладку видалених елементів, як у GMail.
6. Шрифти дуже важливі для відображення мети. Якщо ви створюєте арт-сторінку або будь-яку сімейну серіал літератури для цього, це добре, але щоб створити веб-сайт для електронного навчання, ви повинні вибрати шрифт, який зручно слідкувати за різними розмірами і має менше збільшення (наприклад, подовжені краї), Sans добре в цьому. Вікіпедія використовує його, наприклад. Вибір розміру і ваги також важливий. Там, де важлива (та змінюється) статистика, цифри слід вказувати жирним шрифтом (наприклад, 703 наявних питань). Як і ви зробили для вибору кількості запитань на другому екрані. Курсиви в заголовках IMO не виглядають добре, чому б замість цього не використовувати жирний шрифт?
7. Це дуже подобається моїй особистої думки, але я думаю, що деякі більш закруглені куточки позбавлять користувачів від коробчастого почуття.

Я професійний дизайнер і розробник. Я думаю, що найважливіше, що потрібно зробити з дизайном, - це використовувати графічну програму - наприклад, Fireworks - для створення дизайну, перш ніж реалізувати його. Це полегшує змінити речі та експериментувати легко. Виходячи з передумови розвитку, я знаю важливість цього.

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

Якщо ви хочете зробити швидке виправлення, я спробую надати деякі особливості, щоб почати вас. Відповіді тут хороші - але вони не дуже конкретні. Я спробую.

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

Ось що я б робив (це, мабуть, зайняло б менше дня):

1. Почніть з логотипу. Це виглядає дуже зайнято -> спробуйте зробити це простіше. Використовуйте більш яскраві кольори; жовтий брудний на вигляд. Спробуйте простіший шрифт.
   • Зробивши логотип, ви можете зіставити кольори сайту з ним
2. Все про веб-сайт має бути "повітряним". Тому не робіть тісно.
   • лівий стовпчик повинен бути значно ширшим. В 1,5 рази це ширина струму
   • у верхній частині повинно бути більше пробілів навколо полів для входу
   • Право повинно мати підтемати, кожна в новому рядку. Зробіть, щоб вони мали більший простір навколо себе, щоб вони не стискалися один з одним
   • підтаблиця може використовувати багато додаткових набивок на клітинках, заголовки дівок можуть бути прокладені більше тощо.
3. Весь вміст повинен надходити замість того, щоб бути хрустким. Це означає максимально вирівняти, використовувати рівномірні шрифти та належні розміри.
   • Центральний стовпчик "Усі знання у світі" виглядає поза місцем із рештою вмісту. Можливо, пливіть його ліворуч, видаліть підкреслення і напевно зробіть його меншим за заголовок.
   • Вміст сторінки не вирівняний. Було б краще, якщо ви залишили вирівняти вміст підзаголовків до підзаголовків.
4. Поля для входу вгорі можна зробити приємніше.
   • Ви можете помістити мітки всередину полів для введення тексту (сірим). Це зробило б її чистішою.
   • Ви можете зробити прапорці / запам'ятати мене набагато меншими. Це не найважливіша особливість, тому вона не повинна бути такою великою, як важлива частина.

Це не зробить ваш сайт найдивовижнішим веб-сайтом в Інтернеті, але, сподіваємось, його досить відполірувати, він пройде перевірки. :)

Ух ... це дуже погано хаха.

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

Але якщо цього не зробити, ось кілька моїх пропозицій. Незважаючи на назву, покажчик / цільова сторінка має функціонувати більше, як рекламний щит або оголошення журналу. Потрібно передати своє повідомлення Швидко за кілька секунд. Зауважте, що я сказав "повідомлення" не інформація. Інформація повинна бути там, коли глядач шукає її, але вона не повинна бути викладена як злегка зашифрована зміст.

Отже, що стосується повідомлення ... Перше, про що слід подумати - це на що вони дивляться .. веб-сторінка, так, але веб-сторінка що? Навіть читаючи ваші категорії, мені незрозуміло, що це за сторінка.

"Що" це буде передано кольоровою схемою, загальним макетом, а також заголовками заголовків.

Після того як ви вирішили, що це за питання, вирішіть, що ви хочете, щоб вони бачили першими. Моїм вибором буде, якщо практика робить логотип Perfect, і я збільшив би розмір цього і вискочив із заголовка. Але у вас можуть бути причини змусити їх зосередитись на чомусь іншому або на заклик до дії.

Я здогадуюсь, що ваше найважливіше - "Все знання у світі", тому що ви зосередили його (погана ідея), зробили його курсивом (погана ідея!) Та надали йому багато місця навколо себе (гарна ідея). Але за винятком слова самі ... не зрозуміло, що це таке чи що робиться, спробуйте щось більш описовий і менш тупий.

Спробуйте розбити загальну цільову сторінку на 3 елементи дизайну І 3 рівні важливості інформації. Запитайте себе, що це ПЕРШЕ, що вони повинні бачити, ПЕРШЕ, що вони повинні робити? що друге, третє? і спробуйте змінити дизайн відповідно.

Використовуйте менше кольорів, і вони мають сенс .. чому 3 різних незграбних блюзу розсипаються випадковим чином навколо тексту ??? Використовуйте більше розмірів шрифту (!), Знову розбивши це на 3, це хороший початок, ВЕЛИКИЙ шрифт для найважливішого, середній для другорядного тощо.

Моя остання пропозиція - зробити ваш дизайн ПЕРШИМ і заздалегідь перед написанням коду. Я пропоную почати з PAPER і ручок або олівця, щоб заблокувати сторінку .. просто швидкі ескізи, НЕ пишіть фактичні слова, коли ви це робите, просто блокуйте в областях, коли ви намагаєтеся вирішити, наскільки великою повинна бути область вмісту проти заголовка , наскільки велика бічна панель тощо.

Потім зробіть більш доопрацьований дизайн у графічній програмі. ПОВЕРНУЙТЕ речі та експериментуйте з розміщенням. Пам'ятайте, що ви створюєте сторінку, яка повинна функціонувати як сторінка журналу. Зробіть глядача паузу, спробуйте показати їм те, що ви хочете, щоб вони бачили, спробуйте спонукати їх робити те, що ви хочете від них.

І починайте дивитись на та дизайн. Просто ПОГЛЯД. не оцінюйте вміст, натомість СПОМОЖАЙТЕ, які повідомлення передаються веб-сторінками. Як вони використовують інтервал, колір, розмір шрифту? Спробуйте наслідувати хороший дизайн. Щасти

і розглянути пропозицію школи мистецтв. Програми графічного дизайну часто шукають для своїх студентів реальні проекти з переробки дизайну.

Основна проблема, яку я відчуваю з цієї теми, полягає в тому, що ви більше зацікавлені в обговоренні та відстоюванні свого "дизайну", ніж вам цікаво навчитися створювати щось, що приваблює. Типовий для програмного інженера. Ви думаєте, що можете розбити сторінку вниз на складові елементи, протестувати і перевірити ці елементи, а потім, інтегруючи компоненти, ви вважаєте, що елементи повинні математично перераховувати хороший дизайн. Тоді ви думаєте, що, опублікувавши це запитання, ви знову можете подрібнити сторінку до компонентів і аргументувати достоїнства кожного з них та аргументувати, як це відбувається за тим, що сказав постачальник відповідей.

Поки ви не захочете прийняти, що ви смоктали на UX, у вас буде проблема. Як було сказано вище, графічний дизайн - це відчуття. Графічний дизайн не дорівнює інженерному проектуванню. Ви не можете щось математично побудувати, інтегрувати це з іншими "математично правильними" речами і очікувати хорошого результату. Ви ніколи не будете добрі в UX (мабуть), тому що просто не дивитесь на світ так, як його бачить дизайнер. Але якщо перестати вимірювати свою сторінку і порівнювати її з чимось іншим - відкрийте себе повністю, щоб навчитися зрозуміти, що нічого не знаєте про графічний дизайн, то ви можете почати його отримувати ...