Розробити дизайн UI на чистому Semantic UI

[konfuciusu]

Дошка Conceptboard по обговоренню дизайну, щодо прикладів - наприклад цей коментар.

Gist поточного ескізу лого

[karmeljuk]

Я можу з цим допомогти Залишилося тільки вирішити, який фреймворк обрати

Як на мене, краще Bootstrap, але він йде в комплекті з великою кількістю не потрібних модулів, тому потрібно під себе налаштувати і підключати лише дійсно корисні частини

[konfuciusu]

Над UI працює vasilich__twitter, скоріш за все він також буде TL в UI/UX.

[Sensetivity]

@karmeljuk Так є ж конструктор: http://getbootstrap.com/customize/ ?

[karmeljuk]

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

[viksok]

@konfuciusu якщо збираєтесь використовувати Bootstrap то може зразу зробити RWD на Grid?

[konfuciusu]

Звичайно.

[yukoff]

Салют всім. Особисто я більше з бек-ендами працював/працюю, але як на мене - то я радше за SUI. Там теж багато може бути зайвого, тож мабуть краще одразу йти шляхом генерації потрібного CSS з LESS-ових сирців, хоча це ж можна й до BS застосувати (хоча там певно буде SCSS).

[Andriy-K]

Потрібно зважати на те, що Bootstrap 4 ще в версії v4.0.0-alpha.6. Можу взятися за компонування необхідних модулів за допомогою gulp.js.

[Kobzar09]

Хтось має вже якісь напрацювання?)

[yukoff]

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

[Kobzar09]

@yukoff так, підтримую Консептбоард, якщо там є безкоштовний доступ. Створюйте проект і будемо потихеньку обговорювати :)

[Andriy-K]

Стосовно Semantic UI, він звісно класно виглядає, але якщо порівняти з Bootstrap-4, то виявиться, що semantic.min.js -278кБ, semantic.min.css - 548кБ, в той час як, bootstrap.min.js 46кБ і bootstrap.min.css 151кБ. Помітна суттєва різниця, я звісно розумію, що деякі можулі можна відімкнути, але якщо ядро займає багато, то це не допоможе.

[Kobzar09]

Панове, не словом, а ділом :)

[Sensetivity]

Обирати UI-фреймвок дивлячись на розміри файлів... Ну я навіть не знаю... Одного разу файл закешувався та й усе.

[Andriy-K]

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

[konfuciusu]

Semantic має ~800 КБ, але це зі всіма модулями і без gzip.

Простий gzip зменшує розмір до ~200 КБ. Зібрати тільки з модулями, які ми будемо використовувати, і маєш десь 100-150 КБ. Як на мене, це зовсім не варте переживання.

[konfuciusu]

PS я теж за Semantic, і теж за те, щоб спершу були ескізи на Conceptboard або чомусь подібному

[Kobzar09]

Все), тоді робимо ескізи :)

[chief-j]

Semantic гарно і сучасно виглядає але сітка поступається сітці від bootstrap Що я зараз маю https://img.hurtom.com/i/2017/07/Untitled.png

[Kobzar09]

Виглядає акуратно

[yukoff]

@chief-j Сітка поступається в чому? Бо як на мене вони як мінімум ідентичні.

Щодо дизайну - акуратно, але не айс. Я пропоную не поспішати і підійти зважено - скажімо, почати з головної сторінки, потім до переліку тем, потім до вигляду теми і т.д. До того ж я не думаю, що просто копіювати наявне компонування гарна ідея - щодо тенденцій у спільнотах/форумах можна напр. глянути https://meta.discourse.org/, https://community.nodebb.org/, https://discuss.flarum.org/, або ж кіно-орієнтовані https://trakt.tv, https://www.themoviedb.org/, https://kitsu.io тощо.

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

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

[chief-j]

@yukoff Я підтримую вашу думку Повірте, сітки і близько не однакові. Сітка bootstrap набагато практичніша Я завжди починаю з статтей. Найлегше підбирати розміри і кольори, позиції і т.д.. Мені здається, що наслідувати теперішній дизайн - найкраща ідея. Всі вже звикли до теперішнього вигляду і не всі тепло приймуть новий, зовсім не схожий на старий, дизайн. Змінити оформлення кольорів не складе проблем Було б просто прекрасно, якби були хоча б якісь уточнення, настанови щодо дизайну але їх немає. Якщо треба щось переробити, я без проблем це зроблю.

[chief-j]

Треба визначитися з тонами і стилем. Все інше підлаштується до стилю і до тону

[Kobzar09]

@yukoff підтримую Вашу ініціативу, щодо стилю перших двох запропонованих сайтів, це був би кардинальний редизайн і потрібно над ним достойно попотіти, щоб впихнути весь старий функціонал туди, якщо Ви так замахнулися.

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

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

Щодо Quire +, уже зареєструвався.

[yukoff]

@chief-j Не сприйміть, як наїзд ;) Я не мав на увазі, що вони один-в-один, але компонування де-факто ідентичне.

Щодо кольорів - згоден, але хто б сказав, які побажання ;)

@Kobzar09

Я пропоную поєднати стиль двох категорій сайтів, що Ви вказали: форумний + кіношний.

Просто як з язика зняли ;)

теперішній дизайн Толоки доволі прісний для середньостатистичного користувача інтернету

Це, думаю, спадщина PhpBB, компонування "зроблено в 90-ті" =)

[Kobzar09]

Quire

Oops! You do not have permissions to access this page. Please contact your admin.

[Kobzar09]

Щодо кольорів - згоден, але хто б сказав, які побажання ;)

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

[yukoff]

@Kobzar09 Хм, схоже організацію без участі не дає переглядати - а проект (він публічний) дає відкрити?

[Kobzar09]

Не сприйміть, як наїзд ;) Я не мав на увазі, що вони один-в-один, але компонування де-факто ідентичне.

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

[Kobzar09]

@yukoff Це посилання відкривається https://quire.io/w/Quire_Feedbacks/, а це ні - https://quire.io/c/hurtom. Можливо потрібно в організацію додатися?

[yukoff]

@Kobzar09 Схоже - потрібнен е-мейл. Власне, сама сторінка організації не так важлива - проект відкривається?

[Kobzar09]

Так

[yukoff]

@Kobzar09 @chief-j @konfuciusu (для початку) - можу кинути інвайт, щоб ознайомитись з quire.

[chief-j]

Кидай

[yukoff]

@chief-j я в гіттері отписав в приватному чаті - мило треба ;) щоб тут в публічний доступ не світить

[chief-j]

Куди мені заходити?

[Kobzar09]

На гіттер

[yukoff]

@chief-j Не зовсім зрозумів, чого стосується питання ;) Ось сторінка організації, сам проект по оновленню ось - поки питання по використанню (чи ні) Quire не вирішено, я з цього обговорення створив задачу з підзадачами, ну як для прикладу.

[yukoff]

Цими днями буде трохи часу - спробую зробити ескіз головної та зроблю дошку на conceptboard.

P.S. Можна на COLOURlovers пошукати палітри, схожі з поточною гамою толоки.

[chief-j]

http://paletton.com/#uid=32Q0T0ksHdgirnCnyir-q8AMj4u Тут можна самому підбирати

[yukoff]

@chief-j О, дякую. До речі, в колорлаверз теж можна самому будувати.

[Kobzar09]

або на adobe --> https://color.adobe.com/ У вкладці explore навіть готові палітри є

[yukoff]

@Kobzar09 Так, adobe знаю, але раніше там здається не було discovery (він тоді Kuler ще був), хоча можу помилятись.

[chief-j]

Матеріал дизайн, без заокруглених углів? Ви ще пишіть, думайте. У понеділоч/вівторок почну робити за тим, що ви надумєте Яу вам ці тони http://paletton.com/#uid=7081c1krD8wjkgDnmcEx34TKQ1YknC9BeQgHjGcXsb6c-W35kyDaxmrkRs2fqJZ6gTU2Jk00Ho00KO00JB00Fe00E8 ?

[yukoff]

@chief-j

Яу вам ці тони

Щось мені вони надто похмурими здаються. Може поки нема рішенн по гамі в сірих полутонах робити?

[chief-j]

Треба шукати гарні рішення в інтернеті, скидати до купи і об'єднувати

[Kobzar09]

Як Вам такі варіанти? Доволі популярна кольорова гамма на адобе за запитом green - https://color.adobe.com/HURTOM-color-theme-9747211/

Та ось створив гамму на базі того, що зараз є на Толоці - https://color.adobe.com/This-Green-for-Hurtom-color-theme-9748477/ https://color.adobe.com/HURTOM2-color-theme-9747218/

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

[chief-j]

@Kobzar09 404. Такої сторінки не існує

[yukoff]

@chief-j Це до чого?

[chief-j]

до @Kobzar09