[01]
[Project 01]
Design + development on Tilda by Elena Kostyakova
Minimalist design highlighting the atmosphere of light and space
Website for a photo studio
Vizion —
About
the project
the project
[02]
[Project 01]
Vizion is a modern photo studio website that emphasizes simplicity and visual clarity.
The goal was to reflect the studio"s aesthetics through layout, light, and typography.
The goal was to reflect the studio"s aesthetics through layout, light, and typography.
Combine minimalism with warm tones to convey atmosphere
Visual balance
Keep navigation simple and content easy to follow
Clear structure
Smooth flow
Use wide margins and rhythm for a calm layout
[02]
[Project 01]
Highlight the client’s works through large, immersive visuals
Photography first
Design goals
[02]
[Project 01]
Each detail was aligned to emphasize the visual rhythm of the photography
Attention to detail
Then, design refinement and final development on Tilda
Design & build
The work began with a prototype in Figma
Prototype stage
Process
Что реализовано:
Минималистичный, современный дизайн, подчеркивающий визуальную экспертизу студии.
Простая, эффективная структура, которая ведёт пользователя к целевому действию.
Анимации, которые делают сайт более живым и вовлекающим.
Визуальный акцент на примерах работ — чтобы клиент «влюбился» в стиль ещё до первого контакта.
Минималистичный, современный дизайн, подчеркивающий визуальную экспертизу студии.
Простая, эффективная структура, которая ведёт пользователя к целевому действию.
Анимации, которые делают сайт более живым и вовлекающим.
Визуальный акцент на примерах работ — чтобы клиент «влюбился» в стиль ещё до первого контакта.
Результат:
Получился сайт, который не просто рассказывает о студии, а продаёт услуги через качественную подачу и сильные визуальные образы.
Получился сайт, который не просто рассказывает о студии, а продаёт услуги через качественную подачу и сильные визуальные образы.
.flip-menu-wrapper {
perspective: 1000px;
position: fixed;
top: 20px; right: 20px;
z-index: 10005;
}
.menu-button {
width: 40px; height: 30px;
cursor: pointer;
z-index: 10006;
position: relative;
}
.ham span {
display: block;
height: 4px;
background: #000;
margin: 5px 0;
transition: all .3s ease;
}
/* Кнопка превращается в крестик */
.menu-button.active .ham span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.menu-button.active .ham span:nth-child(2) {
opacity: 0;
}
.menu-button.active .ham span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* Меню-карты */
.flip-menu {
list-style: none;
padding: 0;
margin: 0;
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
transform: rotateX(-90deg);
transition: transform .6s ease;
background: #fff;
z-index: 10004;
}
.flip-menu.open {
transform: rotateX(0);
}
.flip-menu li {
margin: 15px 0;
transform: translateZ(-200px) rotateX(-90deg);
transition: transform .4s ease, opacity .4s ease;
opacity: 0;
}
.flip-menu.open li {
transform: translateZ(0) rotateX(0);
opacity: 1;
}
.flip-menu li:nth-child(1) { transition-delay: .1s; }
.flip-menu li:nth-child(2) { transition-delay: .2s; }
.flip-menu li:nth-child(3) { transition-delay: .3s; }
.flip-menu li:nth-child(4) { transition-delay: .4s; }
.flip-menu a {
text-decoration: none;
font-size: 32px;
color: #000;
}
@media (max-width: 768px) {
.flip-menu a { font-size: 24px; }
}
