Loading ...

Responses by Vladimir Zholud, art director, Brander; and Igor Borozniak, UI and graphic designer, Ezlo Innovation.

Background: This site acts as both a promo and event hub for the Piano Trio Fest in St. Petersburg. The main idea was to put the schedule on the first page while letting people get familiar with the artists. For now, the Piano Trio Fest collective has only one event that took place on December 12th, but they plan to make more.

Design core: Bold design, for sure. The color choice was based on the flags of countries from which musicians came: Switzerland, France and Russia. So a tricolor red, white and blue forms the core, plus black as the background.

Favorite detail: The first screen with an interactive logo. The idea of a generative logo came to us during the branding stage and was the first thing we implemented on the web.

Challenges: In development, the challenge was to mix different scroll behaviors depending on device and screen-orientation change. There are three scroll mechanics on the site: native browser scroll for portrait orientation, over-scrolled blocks on landscape touch devices and custom scroll based on CSS transforms on desktops to work with mice and trackpads. In content, it was all the process of structuring and approval, editing, text formatting with nonbreaking spaces and hyphens.

Navigational structure: The site’s navigation is derived from the design idea that keeps gaps in blocks, letting users interact with letters beneath. The next step was to avoid splitting content onto multiple pages; we’ve put all the artists’ information on the same page right above the main content. This enabled us to make smooth transitions, clicking artists’ names with no extra HTTP requests.

New lessons: After creating the Piano Trio Fest site, we understood one essential idea: the first thing to make on every project is a strong and solid visual structure that can be represented with CSS grids in the development stage. This approach saved us a lot of time.

Technology: The site is pure HTML, CSS and JavaScript. No CMS. No frameworks. The only library Body-Scroll-Lock is used for helping to display artists’ information as dialogs on mobile devices.

The most interesting technical feature is the way we describe the shapes of letters. Besides SVG path notation, we indicate a reference point from which the site calculates segments’ sizes. It could be any corner or midpoint. The shape can be easily drawn inside a container of any given size. This lets us make experiments with interactivity, because the interactions are fully detached from the letter graphics.

pianotriofest.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In