Develop the website interface design

Website: https://ico.dropthebomb.io

Project Description:  a set of microtasks and the ability to perform them for participants.

Task: based on the example page in the application, develop a responsive intuitive design for users.

For evaluation, you can provide an image file in good quality. After selecting the winner, it is necessary to provide the final result in Zeplin, prepared for layout.

The color scheme should be similar to that shown in the screenshot (tones may vary slightly). It is possible to add 1-2 new colors (without gaudiness and color excesses) and use colors differently.  The logo can be adjusted to fit the overall style.

Pay special attention to fonts; currently, the fonts vary greatly and are not always readable.

Points that need to be emphasized and highlighted:

1) The username and its ID should be displayed on all pages. 

2) When hovering over the username, a menu should drop down - it needs to show that there is a menu and display the popup menu itself (3 items).

3) When a new user logs in, they should see a call-to-action link "Complete the 1st quest" (can be replaced with a similar meaning phrase), designed in a way that draws the user's attention.

4) Occasionally, in the Feed section (the first menu item under the logo), new messages for the user appear; it is necessary to show that new messages have arrived (with an icon/animation/in some other way).

5)  Participant/Current/Upcoming - these are filters based on which information is displayed below them. By default, Current.  They need to be designed in a way that makes it clear that they affect the information below, and of course, displaying which filter is selected. It may be designed in the form of tabs (like Excel, Google Sheets).

6) When hovering over a project row, the row should be highlighted. For example, the highlighted and clicked project is DropTheBomb.

7) All buttons should be clearly recognizable as buttons. They should respond when hovered over.

8) Social links (in circles on the left) should be designed in the corresponding color scheme (not as shown in the screenshot).

9) Dropdown menus should be harmonious.

10) On the Projects page itself, at the top (in the screenshot before the filters Participant/Current/Upcoming), there should be a description of the section in one phrase. For example, "Here you can view your current projects, as well as consider and join new ones."

11) The bottom of the page should be narrower than it is, so it doesn't stand out.

12) The task list in a specific project should be closer to the project row that was clicked. It is currently positioned too low.

13) In the fifth column, there should be an icon that, when clicked, opens a window with an explanation of the task. The icon should be designed to indicate that it is an explanation, and this window should display a hint text. Example of the explanation:

"To complete the task, you need to:

• - click execute
• - join the group
• - click check"

14) An icon/button should be displayed to close the task list for the current project and return to the general project list.

15) The text "Remaining spots 803" under the login can be removed.

16) All logical alignments should be maintained.

17) The rounding of buttons, fields, text lines (where necessary) should be implemented.

18) All menus, links, buttons should be clear and change on hover, to emphasize this field.

Сайт: 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) Все меню, ссылки, кнопки должны быть понятны и при наведении меняться, для акцента на этом поле.