Opracować projekt interfejsu strony internetowej

Strona: https://ico.dropthebomb.io

Opis projektu:  zestaw mikrozadań i możliwość ich wykonywania dla uczestników.

Zadanie: na przykładzie strony w aplikacji opracować responsywny, intuicyjny design dla użytkowników.

Do oceny można dostarczyć plik graficzny w dobrej jakości. Po wyborze zwycięzcy należy dostarczyć wynik w Zeplin, wykonany pod układ.

Paleta kolorów, podobna do tej na zrzucie ekranu (mogą się nieco różnić odcienie). Możliwe dodanie 1-2 nowych (bez jaskrawości i kolorowych przesadności) oraz inne wykorzystanie kolorów.  Logo można dostosować do ogólnego stylu.

Specjalną uwagę należy zwrócić na czcionki, obecnie czcionki znacznie się różnią i nie zawsze są czytelne.

Elementy, które należy podkreślić i wyróżnić:

1) Na wszystkich stronach powinno być wyświetlane imię użytkownika i jego ID. 

2) Po najechaniu na imię użytkownika rozwija się menu - należy pokazać, że tam jest menu i wyświetlić samo rozwijane menu (3 punkty).

3) Po wejściu nowego użytkownika powinien widzieć link-zachętę "Przejdź do 1. zadania" (można zastąpić podobnym znaczeniem napisem),  wykonanym tak, aby użytkownik zwrócił na to uwagę.

4) Czasami w  dziale Strumień (pierwszy punkt menu pod logo) pojawiają się nowe wiadomości dla użytkownika,  należy pokazać, że przyszły nowe wiadomości (znakiem/animacją/w inny sposób)

5)  Uczestnik/Bieżące/Nadchodzące - to filtry, na podstawie których wyświetlane są informacje poniżej. Domyślnie Bieżące.  Należy je zaprojektować tak, aby było jasne, że wpływają na informacje poniżej, a także oczywiście wyświetlając, który z filtrów jest wybrany. Możliwe zaprojektowanie w formie zakładek (a la Excel, Google sheets)

6) Po najechaniu na wiersz - projekt, wiersz powinien być wyróżniony. Na przykład wyróżniony i kliknięty projekt DropTheBomb.

7) Wszystkie przyciski powinny być zrozumiałe jako przyciski. Po najechaniu powinny reagować.

8) Linki społecznościowe (w kółkach po lewej) powinny być wykonane w odpowiedniej palecie kolorów (a nie jak na zrzucie ekranu)

9) Rozwijane menu powinny być harmonijne.

10) Na samej stronie Projekty u góry (na zrzucie ekranu przed filtrami Uczestnik/Bieżące/Nadchodzące) powinno być opisane sekcję jednym zdaniem. Na przykład, "Tutaj możesz przeglądać swoje bieżące projekty, a także rozważać i dołączać do nowych."

11) Dół strony powinien być węższy niż jest, aby nie rzucał się w oczy.

12) Lista zadań w konkretnym projekcie powinna być bliżej samego wiersza projektu, na który kliknięto. Obecnie znajduje się bardzo nisko.

13) W piątej kolumnie powinien być wyświetlany ikonka, po naciśnięciu na którą pojawia się okno z wyjaśnieniem zadania. Należy zaprojektować ikonę tak, aby było jasne, że to wyjaśnienie i wyświetlić to okno z tekstem podpowiedzi. Przykład wyjaśnienia:

"Aby wykonać zadanie, należy:

• - kliknąć wykonaj
• - dołączyć do grupy
• - kliknąć sprawdź"

14) Należy wyświetlić ikonę/przycisk do zamknięcia listy zadań dla bieżącego projektu i powrotu do ogólnej listy projektów.

15) Napis "Pozostało miejsc 803" pod logowaniem można usunąć.

16) Wszystkie logiczne wyrównania powinny być przestrzegane.

17) Zaokrąglenia przycisków, pól, linii tekstowych (gdzie to konieczne) powinny być wykonane.

18) Wszystkie menu, linki, przyciski powinny być zrozumiałe i po najechaniu zmieniać się, aby podkreślić to pole.

Сайт: https://ico.dropthebomb.io

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

Задача: на примере страницы в приложении разработать адаптивный интуитивный дизайн для пользователей.

Для оценки можно предоставить image файл в хорошем качестве. После выбора победителя необходимо предоставить итог в Zeplin, выполненный под верстку.

Цветовая гамма, схожая с данной на скриншоте(могут немного разнится тона). Возможно добавление 1-2 новых(без пестроты и цветовых излишеств) и иное использование цветов.  Логотип возможно подстроить под общий стиль.

Особое внимание уделить шрифтам, сейчас шрифты сильно разнятся и не всегда читаемы.

Моменты которые нужно подчеркнуть и выделить:

1) На всех страницах должно отображаться имя пользователя и его ID. 

2) при наведении на имя пользователя выпадает меню - нужно показать, что там есть меню и отобразить само всплывающее меню(3 пункта).

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

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

5)  Участник/Текущие/Предстоящие - это фильтры на основании которых выводится информация под ними. По-умолчанию Текущие. Нужно оформить их так, чтобы было ясно что они влияют на ифнормацию внизу, ну и конечно отображая какой из фильтров выбран. Возможно оформить в виде табов (а-ля Excel, Google sheets)

6) При наведении на строчку- проект, стрчока должна выделятся. На примере выделен и нажат проект DropTheBomb.

7) Все кнопки должны быть понятны, как кнопки. При наведении должны реагировать.

8) социальные ссылки(в кружках слева) должны быть выполнены в соответствующей цветовой гамме(а не как на скриншоте)

9) выпадающие меню должны быть гармоничны.

10) на самой странице Проекты сверху(на скриншоте до фильтров Участник/Текущие/Предстоящие) должно быть описание раздела одной фразой. Например, "Здесь вы можете просматривать свои текущие проекты, а также рассматривать и присоединяться к новым."

11) Bottom страницы должен быть уже чем есть, чтобы не бросаться в глаза.

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

13) В пятой колонке должен отображаться значок, по нажатию на который всплывает окно с пояснением к задаче. Нужно значок сделать под дизайн, так чтобы было понятно что это пояснение и отобразить это окно с текстом подсказкой. Пример пояснения:

"Для выполнения задания нужно:

• - нажать выполнить
• - вступить в группу
• - нажать проверить"

14) Нужно отобразить значок/иконку/кнопку для закрытия списка задач по текущему проекту и возвращениию к общему списку проектов.

15) Надпись "Остлось мест 803" под логином можно убрать.

16) Все логичные выравнивания должны быть соблюдены.

17) закругления кнопок, полей, текстовых строк(где необходимо) должны быть выполнены.

18) Все меню, ссылки, кнопки должны быть понятны и при наведении меняться, для акцента на этом поле.