Ochi Design: How Obys Agency Crafted a Slide-Driven Web System

Ochi Design: A Slide-Driven Web System by Obys Agency Obys Agency just dropped a presentation-infused web design system for Ochi—a presentation strategy agency based in Lviv, Ukraine, and Vancouver, Canada. In Ukrainian, “ochi” means “eyes,” perfectly capturing the brand’s core belief: complex ideas are always easier to digest visually than through dense blocks of text. Recognizing that slides are the first thing that pops into mind when thinking of a presentation, Art Director Viacheslav Olianishyn and UI/UX Designer Roman Salo built the entire site architecture around a slide-stacking mechanism. From the percentage preloader to page transitions, all five core templates—Main, Services, About Us, Portfolio, and Contacts—behave like numbered slide decks.

The typographic hierarchy serves as the visual anchor for the site, featuring massive, tightly-tracked, condensed grotesque all-caps headlines like “WE CREATE EYE-OPENING PRESENTATIONS” and “READY TO START THE PROJECT?” These bold titles contrast beautifully with sleek, minimalist neo-grotesque body text, inline underlined links, and rounded pill tags for service categories like BRANDED TEMPLATE, INVESTOR DECK, SALES DECK, and STARTUP PITCH. The color palette revolves around four primary shades: off-white #F1F1F1, charcoal black #212121, deep forest green #004D43, and a vibrant electric chartreuse #CDEA68. Oversized black-and-white graphic eyes peek out at the WORK page header and CTA banners, playfully tracking cursor movement across the screen to double down on the brand name’s origin.

Further down the page, a clean 12-column grid neatly organizes expandable accordion review boxes from partners like Planetly, Workiz Easy, Officevibe, Orderlion, and Black Book. Alongside these sits a horizontal partner carousel navigated via a punchy chartreuse DRAG cursor badge. Three rounded testimonial badges feature the forest green Ochi logo paired with a 5.0 rating on Clutch and a “The Futur Business Bootcamp Alumni” tag. Over on the Contacts template, Obys Agency swapped out traditional stacked form fields for a natural fill-in-the-blank paragraph—allowing clients to seamlessly type in their name, company, goal, deadline, and budget while keeping the layout editorially sleek across desktop and tablet.

Explore more project details on www.behance.net/gallery/145487469/Ochi-Design.

Ochi Design: Thiết kế website đậm chất slide từ Obys Agency

Obys Agency vừa trình làng một hệ thống thiết kế web tràn ngập tinh thần presentation cho Ochi – một agency chuyên về chiến lược thuyết trình có trụ sở tại Lviv (Ukraine) và Vancouver (Canada). Trong tiếng Ukraine, từ “ochi” có nghĩa là “đôi mắt”, thể hiện đúng tinh thần cốt lõi của thương hiệu: những ý tưởng phức tạp luôn dễ hiểu hơn khi được truyền tải qua thị giác thay vì các đoạn văn bản dày đặc. Nhận thấy hình ảnh đầu tiên mọi người liên tưởng về một bài thuyết trình là chuỗi các slide nối tiếp, Art Director Viacheslav Olianishyn cùng UI/UX Designer Roman Salo đã xây dựng toàn bộ kiến trúc web dựa trên cơ chế xếp chồng các slide. Từ màn hình chờ hiển thị phần trăm (preloader) cho đến các hiệu ứng chuyển trang, cả 5 template chính gồm Main, Services, About Us, Portfolio và Contacts đều hoạt động như những bộ slide được đánh số.

Hệ thống phân cấp typography tạo nên điểm tựa thị giác cho website với các dòng tiêu đề hiển thị cỡ lớn dạng chữ in hoa condensed grotesque được căn chỉnh khoảng cách chữ rất sát – nổi bật như “WE CREATE EYE-OPENING PRESENTATIONS” hay “READY TO START THE PROJECT?”. Dàn tiêu đề này tương phản hoàn toàn với phần nội dung neo-grotesque tối giản, các đường link gạch chân inline và các thẻ pill nhãn tròn cho danh mục năng lực như BRANDED TEMPLATE, INVESTOR DECK, SALES DECK hay STARTUP PITCH. Bảng màu của dự án được tổ chức theo cấu trúc 4 tông chủ đạo: trắng ngà #F1F1F1, đen charcoal #212121, xanh rừng sâu #004D43 và xanh chanh nổi bật (electric chartreuse) #CDEA68. Đôi mắt đốm đen trắng kích thước lớn xuất hiện ở phần header trang WORK và các banner CTA, có khả năng tương tác di chuyển theo con trỏ chuột trên màn hình để nhấn mạnh ý nghĩa tên gọi Ochi.

Ở nửa dưới website, hệ thống lưới 12 cột (12-column grid) giúp tổ chức gọn gàng các khung thông tin đánh giá dạng accordion có thể mở rộng từ các đối tác như Planetly, Workiz Easy, Officevibe, Orderlion và Black Book. Đi kèm với đó là carousel đối tác dạng ngang được điều hướng bằng huy hiệu con trỏ DRAG màu xanh chanh. Ba thẻ chứng nhận góc tròn kết hợp logo Ochi màu xanh rừng với điểm đánh giá 5.0 trên Clutch và nhãn The Futur Business Bootcamp Alumni. Đặc biệt trên template Contacts, Obys Agency thay thế các ô nhập liệu dạng form xếp chồng bằng một đoạn văn điền vào chỗ trống tự nhiên, cho phép khách hàng gõ trực tiếp tên, công ty, mục tiêu, thời hạn và ngân sách, giữ được sự rõ ràng về mặt biên tập trên cả màn hình máy tính lẫn tablet.

Xem thêm thông tin dự án từ www.behance.net/gallery/145487469/Ochi-Design trên Behance.

Ochi Design: How Obys Agency Crafted a Slide-Driven Web System

Img01 - Ochi Design: How Obys Agency Crafted a Slide-Driven Web System

Posted

in

by

Tags: