General Information
The website for which a component needs to be developed is an online diary/photo album.
The main unit of content is an event, which has mandatory fields for title and date, and may also contain any number of photos and/or videos (YouTube).
Task
It is necessary to develop a UI concept for one information block that represents one calendar year on a page with a list of years.
There can be from one to many such blocks on the page.
Additional Materials
Link to the test site with a working concept (without final design) to better understand the context:
https://dev.d2t9399masopce.amplifyapp.com/demo
I am also attaching an image of the current design — only as a reference material. You can refer to it, but it is preferable to propose your own vision for this block.
Design Style
No strict limitations — at the designer's discretion.
Overall mood: warm and/or minimalist (as a guideline, not a requirement).
I am open to unconventional ideas and personal vision.
Block Components
Mandatory Elements
- Year (for example: 2023)
- Event Counter. Value format: 1–4 characters (from 1 to 999+).
If there are no events in the year — that year simply does not appear on the page.
Optional Elements
- Cover Photo
The user of the site selects a cover from their photos. In some years, the cover may be absent — then a default image is displayed.
For the contest work, any stock, personal photo, or placeholder image can be used.
For this task, different aspect ratios of photos can be ignored, and the image format that best suits your solution can be used. - Photo Counter (0–999+)
- Video Counter (YouTube) (0–999+)
In a specific year, there may be no photos and/or videos.
In the contest work, it is desirable to show a variant with all three counters (events, photos, videos), but the design should remain harmonious in case a certain counter is absent or has a value of 0.
Counter Presentation
Counters can be:
- displayed as text and/or icons;
- combined with each other;
- placed in any order and in any part of the block.
If text is used — it should be in English (events, photos, videos, etc.).
Devices and Sizes
Full adaptation for mobile devices is not required.
It is only important that the block itself has an adequate width and can be used in a mobile interface without a complete redesign.
Fonts and Colors
Any fonts and colors available for the web can be used.
The use of paid fonts is allowed.
Submission Format
Figma (preferred) or image
Evaluation Criteria (approximate)
- overall visual impression and integrity;
- readability and clarity of the block;
- applicability of the solution in a real product.
Further Collaboration
This contest is used to find a design approach.
In case of mutual interest, further collaboration on the website design may be possible in the format of a separate project.
