Contest translated automatically. Log in or register, to view the original

Task: Develop the design of the main page of the website (Figma)

Current website: asnu.net

General requirements: 

  • All pages of the public part must display correctly on different devices and screens (desktops, tablets, smartphones) with support for modern browsers.
  • Clear and understandable structure of the menu, sections, and subsections that provides easy access to key pages.
  • Compliance with corporate style in all interface elements (https://www.asnu.net/pages/237/).

Based on the requirements listed below, as well as the existing main page (https://www.asnu.net), create the design of the main page (own suggestions for page elements are encouraged).

 

Header

Logo:

Must support responsive scaling (especially for mobile devices).

Main menu:

Include menu items: Home, About AFNU, Learning Platform, Discussions, Consultations, Knowledge Base, Blog).

Must be convenient and accessible for navigation.

For the menu item "About AFNU," implement a dropdown menu that contains items: Management, Structure, AFNU Documents)

Search form:

Should include a text field for entering the search query and a search button.

The search form must be accessible on all screen sizes and, if necessary, expand to full-screen mode on mobile devices.

Language panel:

Should contain flags or language indicators for selection (Ukrainian and English).

The language panel should be intuitive and easy to use on all screen sizes.

Links to registration and authorization pages:

Should contain two buttons or links: "Registration" and "Authorization."

Can be displayed as icons or buttons for convenience.

After authorization, these buttons should change to links to the user profile and log out of the account.

Links to social media pages:

Icons with links to social media profiles (Facebook, Instagram, etc.).

Icons should be bright and easily recognizable.

Responsiveness:

The header must display correctly on all devices and be easy to navigate.

Elements should scale or change position to maintain usability on mobile devices.

 

Footer

Contact information:

Must include basic contact information such as address, phone, email.

Contact details should be clickable (e.g., for phones and email) for the convenience of mobile users.

Optionally add a map with the location of the office or other locations.

Useful links:

Should include links to important pages such as:

Terms of use – rules for using the platform.

Privacy policy – details regarding the processing of user data.

Frequently asked questions (FAQ) – answers to popular questions.

Partner programs – information for partners or loyalty programs.

Useful links should be structured, for example, in columns, for easy viewing.

Subscription form:

A form for entering an email to subscribe to news or newsletters.

Links to social networks:

Icons with links to social media profiles (Facebook, Instagram, etc.).

Icons should be bright and easily recognizable.

Copyright and other important information:

Text with copyright information, for example, "© 2024. AFNU. All rights reserved."

Responsiveness:

The footer must display correctly on mobile devices, maintaining structure and usability.

All footer elements must be easily accessible and readable on small screens.

 

AI Assistant

Widget for opening the AI assistant

The widget should be placed in the corner of the screen (in the bottom right corner) and remain visible while scrolling the page.

The widget should display an icon or button with the label and text "AI Assistant."

Must support animation or activity indicators that indicate readiness for interaction or the presence of new information.

 

Body

Block "Mission, Vision, and Values of AFNU"

  • Location: The block should be placed at the top of the page as it is meant to make the first impression about the association.
  • Content: Must contain a brief text description of the mission, vision, and values of AFNU.
  • Design: The content should be presented as an attractive graphic element, which may include images or icons to highlight key values.
  • CTA: A button with a link to the page with detailed information about the association.

Announcement slider

  • Location: After the block with the mission of AFNU or at the top of the page.
  • Functionality: A slider with tabs to display announcements:
    1. AFNU (main events of the association);
    2. Regional branches (events related to regional branches);
    3. Committees (announcements of committee events);
    4. Learning platform (announcements of educational events).
  • Display: Only announcements of events that have not yet occurred are shown.
  • Archive: There should be a link to the archive page of announcements for viewing past events.

News slider

  • Functionality: A slider with tabs for different categories of news:
    1. AFNU;
    2. Regional branches;
    3. Committees;
    4. Learning platform.
  • Content: Displays up to 5 latest news in each tab.
  • Links: There should be a link to go to the general news page where all news can be viewed.

Block "Pulse of AFNU"

  • Content: Must contain general statistical information about the activities of the association (number of members, regional branches, events held, etc.).
  • CTA: A button or link to the page with extended analytics.

Group of tabs

  • Structure: Should be presented as a group of tabs, each containing brief information and the number of records with the possibility of quick transition to the corresponding page.
  • Tabs:
    1. Registers (Register of AFNU members, Register of awardees of the "Gold Sign of AFNU," Register of Certified Property Managers (CPM) in Ukraine, etc.).
    2. Events (congresses, councils, conferences).
    3. Documents.

Block "Learning Platform"

  • Content: Must display key information about the learning platform (for example, description of available courses, certification programs).
  • CTA: A button with a link to a separate page of the learning platform for viewing complete information.

Block "Certification"

  • Content: Must contain a brief description of the certification programs offered by the association.
  • CTA: A button with a link to the page with detailed information about certification.

Block "Our Partners"

  • Structure: A slider with the logos of the association's partners.
  • Functionality: When hovering over, it should display basic information about the partner (for example, a brief description or specialization).
  • Links: Logos should be clickable with the possibility of going to the partner's website.

Block "Popular Materials"

  • Content: Displays publications that are leaders in views and ratings.
  • Maximum number of materials: No more than 5.
  • CTA: A button to go to the page with all popular materials or the full list of publications.

Interactive map

  • Functionality: An interactive map of Ukraine that displays statistical information about the association by regions.
  • Tabs: Tabs for switching between types of information (for example, AFNU members, branches, training centers).
  • Interactivity: When hovering over a certain region, detailed information about the statistics in that region should be displayed.
  • Scaling and navigation: Ability to zoom in on the map for a more detailed view of the regions.


Other details and texts

  • Specialists wishing to participate in the competition will receive answers to questions in correspondence.