Web Tasarım

Markanızı dijitalde hatırlanan bir deneyime dönüştürüyoruz.

Strateji, içerik, kullanıcı deneyimi ve modern arayüz tasarımını bir araya getirerek markanıza özel web deneyimleri tasarlıyoruz.

Strategy · UX · UI · Design System · Responsive · Motion

Homepage / Desktop1440 × 900
AURELIA
KoleksiyonAtölyeHikâye
İletişim

KOLEKSIYON / 2026

Mekânın
sessiz lüksü.

Atölyeden mekâna uzanan koleksiyon. Malzeme, oran ve ışık.

Koleksiyonu GörAtölyeyi keşfet →
01 / Lounge
AURELIA

2026

Sessiz lüks.

Koleksiyon

Yaklaşım

Görsel tasarım, işlevden ayrı değildir.

  1. 01

    Netlik

    Kullanıcı ne yapacağını düşünmek zorunda kalmamalı.

  2. 02

    Karakter

    Tasarım markayı diğerlerinden ayırmalı.

  3. 03

    Sistem

    Her ekran aynı tasarım dilinin parçası olmalı.

Marka → Arayüz

Marka dilini dijital arayüze taşıyoruz.

Brand Ingredients

BR-01
  • Typography01
  • Color02
  • Tone03
  • Imagery04
  • Iconography05
  • Motion06

AURELIA · Geist · Ink / Paper / Clay / Accent

→ Design tokens →

Digital Interface

UI-01
AURELIA
KoleksiyonAtölyeHikâye
İletişim

Lounge 01

Koleksiyon

Mekânın sessiz lüksü.

İncele
Form / E-posta
  • Navbar
  • Buttons
  • Cards
  • Forms
  • Content blocks
  • Responsive patterns

DENEYİM TÜRLERİ

Farklı hedefler için farklı web deneyimleri.

Markanın, ürünün ve dönüşüm hedefinin ihtiyacına göre farklı dijital deneyim sistemleri tasarlıyoruz.

TEVQONExplore

CORPORATE

Building digital systems for ambitious companies.

Strategy, design and engineering in one coherent brand surface.

Strategy — Design — EngineeringKeşfet →
P.01CORPORATE

Kurumsal Web Siteleri

Güven, içerik ve marka algısını birlikte kuran kurumsal deneyimler.

Brand System · Content · Corporate UX

TEVQON
Sign in

ONE MESSAGE. ONE ACTION.

Launch faster.

A focused page that turns attention into a single clear next step.

Get startedSee demo

Trusted by product teams · 2.4k launches

P.02LANDING

Landing Page

Tek hedefe odaklanan, yüksek dönüşüm odaklı lansman sayfaları.

Campaign · Conversion · Launch

Workspace

tevqon / product

New

PROJECTS

12

ACTIVE

08

Activity

Latest release v2.4
P.03PRODUCT

Product / SaaS Website

Ürünü açık ve ikna edici biçimde anlatan ürün deneyimleri.

SaaS · Product UI · Design System

Vitrin

Tek bir ekran değil, bütün bir dijital deneyim.

AURELIA · Homepage1440 — Desktop
AURELIA
KoleksiyonAtölyeHikâye
İletişim

KOLEKSIYON / 2026

Mekânın
sessiz lüksü.

Atölyeden mekâna uzanan koleksiyon. Malzeme, oran ve ışık.

Koleksiyonu GörAtölyeyi keşfet →
01 / Lounge
AURELIA

2026

Sessiz lüks.

Koleksiyon

Tipografi

Doğru tipografi, markanın sesidir.

Aa

Geist Sans

AURELIA Display

Display56

Aurelia

Heading32

Koleksiyon 2026

Body18

Malzeme, oran ve ışık. Atölyeden mekâna.

Label14

WEB TASARIM · A1

Spec · 04

  • Hierarchy

    Başlık, alt başlık ve gövde aynı anda okunur; göz nereye bakacağını bilir.

  • Readability

    Satır uzunluğu, satır aralığı ve ölçü, içerik nefes alsın diye ayarlanır.

  • Contrast

    Metin zeminle ilişkisinde kaybolmaz. Vurgu, bağırarak değil ayrışarak yapılır.

  • Rhythm

    Boşluk bir süs değil; tipografinin temposudur. Sayfa bir ritimle akar.

Grid & Layout

Her ekranın arkasında görünmeyen bir sistem var.

Desktop · 1440

12 col

Hero

Mekânın sessiz lüksü.

Görsel

Koleksiyon
Atölye
Hikâye
İletişim

Tablet · 768

8 col

Hero

Mekânın sessiz lüksü.

Görsel

Koleksiyon
Atölye
Hikâye
İletişim

Mobile · 390

4 col

Hero

Mekânın sessiz lüksü.

Görsel

Koleksiyon
Atölye
Hikâye
İletişim
  • Consistent alignment

    Her blok aynı omurgaya oturur.

  • Responsive spacing

    Boşluk ekranla birlikte ölçeklenir.

  • Content hierarchy

    Öncelik grid’in içinde görünür.

  • Visual rhythm

    Tekrar ve ara, sayfayı taşır.

  • Scalable sections

    Yeni bölümler sistemi bozmaz.

1440Desktop
AURELIA
KoleksiyonAtölyeHikâye
İletişim

KOLEKSIYON / 2026

Mekânın
sessiz lüksü.

Atölyeden mekâna uzanan koleksiyon. Malzeme, oran ve ışık.

Koleksiyonu GörAtölyeyi keşfet →
01 / Lounge
AURELIA

Mekânın sessiz lüksü.

Luna

Koleksiyon

Gör
AURELIA

2026

Sessiz lüks.

Koleksiyon

Responsive

Her ekran için yeniden düşünülmüş deneyim.

Masaüstü tasarımını küçültmek yerine, her breakpoint’te içerik önceliğini ve etkileşimi yeniden düzenliyoruz.

  • Desktop

    Geniş grid, yan yana içerik, tam navigasyon.

  • Tablet

    Orta kolon, sadeleşen menü, dokunma alanları.

  • Mobile

    Tek kolon, öncelikli mesaj, alt CTA.

  • Navigation adaptation

    Menü ekrana göre yeniden kurgulanır.

  • Content reflow

    Bloklar küçülmez; sıra ve ağırlık değişir.

  • Touch interactions

    Hover’a bağlı kararlar dokunmaya çevrilir.

UX Design

Kullanıcıyı tasarımın içinde kaybetmiyoruz.

User Journey

FLOW · 05

  1. 01

    Discover

    Markayı ve teklifi ilk bakışta anlar.

  2. 02

    Understand

    İçerik ve yapı güven oluşturur.

  3. 03

    Compare

    Seçenekler net, gürültü azdır.

  4. 04

    Decide

    Karar anı görünür ve sakin tutulur.

  5. 05

    Convert

    CTA yolu kısa, dil tutarlıdır.

  • Information architecture

    Sayfalar ve ilişkiler, kullanıcının zihnindeki modele oturur.

  • User flow

    Her adım bir sonrakini hazırlar; çıkmaz sokak bırakılmaz.

  • Navigation

    Menü, yol tarifi verir; vitrin değildir.

  • Content hierarchy

    Önce mesaj, sonra kanıt, en sonda eylem.

  • CTA placement

    Düğme, bakışın doğal durakladığı yerde durur.

  • Conversion paths

    Tek bir birincil yol; ikincil yollar onu gölgelemez.

Süreç görseli

Fikirden bitmiş arayüze.

01

Wireframe

Yapı, hiyerarşi, boşluk.

02

Prototype

Akış, durum, etkileşim.

AURELIA
KoleksiyonAtölye
İletişim

Mekânın sessiz lüksü.

Koleksiyon 2026

Koleksiyonu Gör
Görsel

03

Hi-fi UI

Tipografi, renk, karakter.

AURELIA
KoleksiyonAtölyeHikâye
İletişim

2026

Mekânın sessiz lüksü.

Koleksiyonu Gör

Design System

Her sayfada yeniden karar vermek yerine sistem kuruyoruz.

  • Consistency

    Aynı karar her ekranda yeniden alınmaz.

  • Ölçeklenebilirlik

    Yeni sayfa, mevcut dile eklenir.

  • Faster development

    Bileşenler hazır olduğu için kod hızlanır.

  • Easier maintenance

    Değişiklik tek kaynaktan yayılır.

Component library · AURELIA

DS / SHEET

Buttons

PrimaryGhostDisabled

Inputs

E-posta
Focus

Navigation

AURELIAKoleksiyon · Atölye

Cards

Luna

Atelier

Tags

NewStudio2026

Tabs

OverviewSpecsStory

Modals

Koleksiyonu kaydet

Listeye ekle veya paylaş.

Kaydet

Typography

Aa

56 / 32 / 18 / 14

Spacing

Colors

States

DefaultHoverFocus

Etkileşim

Hareket, dikkat çekmek için değil yönlendirmek için.

Navbar transition

nav

Button hover

btn

Menu reveal

menu
Koleksiyon
Atölye
Hikâye

Card hover

card

Lounge 01

Koleksiyon

Image transition

image

01

Scroll reveal

scroll

Section reveal · 62%

Form feedback

form

İçerik

İyi tasarım, doğru içerik olmadan çalışmaz.

Raw content

merhaba sitemizi yenilemek istiyoruz aslında mobilya satıyoruz ama biraz da atölye hikayesi var müşteriler genelde mimar iletişim formundan yazıyor kampanya da olacak belki...

Structured page

H1

Mekânın sessiz lüksü.

Section

Koleksiyon · Atölye · Hikâye

CTA

Koleksiyonu Gör

  • Message hierarchy

    Önce ne söylendiği, sonra nasıl kanıtlandığı.

  • Section structure

    Her bölümün bir işi vardır; dolgu paragrafı yoktur.

  • CTA language

    Düğme metni eylem söyler, slogan tekrar etmez.

  • Product positioning

    Sayfa, markanın pazardaki yerini netleştirir.

  • Readability

    Cümleler kısa, bloklar taranabilir.

  • SEO-aware structure

    Başlıklar, semantik sıra ve içerik omurgası arama için de okunur.

Erişilebilirlik

Herkes için kullanılabilir dijital deneyimler.

Erişilebilirliği son sprint süsü olarak değil, tasarım kararının parçası olarak ele alıyoruz. Hedefimiz sertifika iddiası değil; kullanılabilir, okunabilir ve odaklı arayüzler.

  • Contrast

    Metin ve arayüz öğeleri zeminden ayrışır; vurgu okunabilirlikten ödün vermez.

  • Typography

    Ölçü, satır aralığı ve hiyerarşi tarama ve okumayı birlikte taşır.

  • Keyboard

    Dolaşım yalnızca fareye bağlı değildir; sıra ve atlama mantıklıdır.

  • Focus states

    Odak halkası görünür ve tutarlıdır; “nerede olduğum” kaybolmaz.

  • Semantic hierarchy

    Başlıklar ve bölgeler, ekran okuyucunun da anlayacağı bir yapıdadır.

  • Readable content

    Dil sade, bloklar kısa; anlam görsele hapsolmaz.

Tasarımdan koda

Tasarladığımız sistemi geliştirilebilir düşünürüz.

Design

  • Figma01
  • Components02
  • Tokens03
  • Responsive rules04

Design System

Production UI

Production UI

  • React01
  • Next.js02
  • Reusable components03
  • Responsive implementation04
Web Yazılım Geliştirme

Süreç

Web tasarım sürecimiz.

  1. 01

    Keşif

    Hedefleri, kitleyi ve mevcut dijital varlığı netleştiririz.

  2. 02

    Marka & İçerik

    Dijital dil, mesaj hiyerarşisi ve içerik omurgasını kurarız.

  3. 03

    UX Architecture

    Sayfa mimarisi, akışlar ve karar anlarını haritalarız.

  4. 04

    Wireframe

    Yapıyı görsel stilden önce doğrularız.

  5. 05

    Visual Direction

    Tipografi, renk ve atmosferi kilitleriz.

  6. 06

    UI Design

    Ekranları yüksek sadakatle tasarlarız.

  7. 07

    Prototype

    Etkileşimleri gerçek kullanıma yakın test ederiz.

  8. 08

    Development Handoff

    Bileşenler, token’lar ve kurallar geliştirme için hazırlanır.

  9. 09

    QA

    Tasarım, responsive ve erişilebilirlik tutarlılığını kontrol ederiz.

Teslimat

Proje sonunda ne teslim ediyoruz?

Tek bir görsel dosya değil; geliştirilebilir bir tasarım paketi. Mimari, ekranlar, sistem ve handoff birlikte gider.

Teslim paketi

HANDOFF.spec

  1. 01Page architecture
  2. 02UX flows
  3. 03Wireframes
  4. 04High fidelity desktop screens
  5. 05Tablet / mobile layouts
  6. 06Design system
  7. 07Component library
  8. 08Interaction specifications
  9. 09Prototype
  10. 10Assets
  11. 11Development handoff

Araçlar

Tasarım stüdyosundan production’a aynı omurga.

Tasarım

  • Figma

Prototype

  • Figma Prototype

Development Handoff

  • React
  • Next.js
  • Storybook

Motion

  • Framer Motion

Tasarım ile geliştirmeyi ayrı dünyalar olarak görmüyoruz.

01

Stratejiden arayüze

Görsel kararlar, iş hedefi ve içerik omurgasından kopmadan alınır.

02

UX + UI birlikte

Akış ve yüzey aynı elde tasarlanır; biri diğerine sonradan giydirilmez.

03

Gerçek responsive tasarım

Her breakpoint’te öncelik yeniden kurulur; masaüstü küçültülmez.

04

Component-first yaklaşım

Ekranlar tek seferlik kompozisyon değil, tekrar kullanılabilir dil.

05

Development-aware design

Token, durum ve kırılım, kodlanabilir gerçeklikle tasarlanır.

06

İçerik ve dönüşüm odağı

Güzel durmak yetmez; mesaj ve CTA yolu çalışır.

07

Erişilebilirlik yaklaşımı

Kontrast, odak, klavye ve semantik yapı tasarımın parçasıdır.

08

Tasarımdan production’a devam eden ekip

Handoff bir dosya atışı değil; aynı ekip geliştirme tarafına taşır.

Web tasarım hakkında merak edilenler.

Keşif, marka ve içerik yönü, UX mimarisi, wireframe, görsel yön, UI tasarımı, prototip, design system ve geliştirme handoff’unu kapsar. Kodlama, web yazılımı hizmetiyle birlikte veya ayrı yürüyebilir.

Hazır tema genel bir kalıptır. Kurumsal tasarım markanıza, içeriğinize ve dönüşüm hedeflerinize göre kurgulanır; her ekran sizin dilinizle konuşur.

Kapsam, sayfa sayısı ve design system derinliğine göre değişir. Keşif sonrası net bir takvim paylaşırız.

Sayfa mimarisi, özel bileşenler, responsive derinlik, prototip ve design system ihtiyacına göre belirlenir. Keşif sonrası şeffaf bir teklif sunarız.

Evet. Figma dosyası, bileşen kütüphanesi ve teslim notlarıyla birlikte teslim edilir.

Evet. Mobil, masaüstünün küçültülmüş hali değildir. Her breakpoint için içerik önceliği ve etkileşim yeniden düzenlenir.

Aynı deneyimin masaüstü, tablet ve telefonda tutarlı ama her ekrana uygun biçimde çalışmasıdır. Navigasyon, içerik ve etkileşim kırılıma göre uyarlanır.

UX, kullanıcının yolu ve karar anlarıdır. UI, o yolun görsel ve etkileşim dilidir. İkisini birlikte tasarlarız.

İçerik yapısını, hiyerarşiyi ve CTA dilini kurgularız. Metin üretimi proje kapsamına göre dahil edilir veya sizin içerik ekibinizle birlikte yürür.

Evet. Mevcut logo, renk, tipografi ve görsel dili dijital arayüze taşırız.

Evet. Dijital için yeterli bir görsel dil — tipografi, renk, ton ve bileşen kuralları — proje içinde kurulabilir.

Evet, yönlendirici ve ölçülü etkileşimler tasarlanır. Aşırı motion kullanılmaz; prefers-reduced-motion dikkate alınır.

Evet, web yazılımı hizmetimizle birlikte kodlanabilir. Yalnızca tasarım da teslim edilebilir.

Evet. Tasarım, prototip ve handoff paketi olarak teslim edilebilir; geliştirmeyi sizin ekibiniz veya TEVQON yürütebilir.

Evet. Mevcut siteyi, içeriği ve hedefleri inceleyip yeniden yapılandırırız.

Evet. Başlık hiyerarşisi, semantik yapı, okunabilirlik ve sayfa mimarisi SEO-aware kurgulanır. Teknik SEO uygulama geliştirme aşamasındadır.

Evet. Kontrast, tipografi, odak halleri, klavye ve semantik hiyerarşi tasarım kararlarının parçasıdır. Kesin uyumluluk iddiası yerine accessible-by-design yaklaşımı izleriz.

Evet. Dil genişlemesi, metin uzunlukları ve yön dikkate alınarak layout kurgulanır.

Evet. Ürün keşfi, listing, detay ve checkout deneyimini satış odaklı tasarlarız.

Evet. Renk, tipografi, boşluk, bileşenler ve durumlar tek bir sistem olarak kurulur.

Yeni bir web deneyimi

Markanızı dijitalde sıradan göstermeyin.

İşinizi, hedef kitlenizi ve markanızı anlayarak size özel bir web deneyimi tasarlayalım.