Web sitesi

Kariyer Web Sitesi Tasarımı

Sekiz ay sahnesi üzerine kurulu bir Kimi kariyer çalışması; kaydırmayla bağlantılı geçişler ve illüstrasyonlu başvuru süreci.

OpenDesign HackathonTasarım ve üretim
Örnek
Kariyer Web Sitesi Tasarımı8 bölüm
Kimi Kariyer — İşe Alım Deneyimi: Moonshot tanıtımı
Moonshot Tanıtımı

Tasarım Fikirleri

  • Kariyer Açılış SayfalarıBaşvuru sürecini açıklamadan önce işvereni tanıtın.
  • İşe Alım Kampanyası Web SiteleriGörsel bir temayı katılım ve başvuru bilgileriyle ilişkilendirin.
  • Kaydırmalı Marka HikayeleriUzun bir anlatıyı belirgin görsel sahnelere bölün.

Kariyer Sayfası Öne Çıkanlar

  • Sekiz Kaydırmalı SahneKokpit tanıtımından başvuru sekansına uzanan bir akış.
  • Tek Bir Ay Görsel TemasıAylar, yörünge yolları ve piksel grafikler sahneleri birbirine bağlıyor.
  • Numaralı Bir Başvuru DiyagramıDört numaralı durak, süreci görsel bir güzergaha dönüştürüyor.

Sekiz Sahneyle Anlatılan Bir Kariyer Sayfası

Bu Kimi kariyer yeniden yapılandırması, bölümlerin yalnızca görüntü alanından geçtiği uzun bir sayfa değildir. Sekiz sahneyi tek bir görsel sahnede üst üste koyar ve bunların opaklığını, konumunu, ölçeğini ve bulanıklığını değiştirmek için kaydırma ilerlemesini kullanır. Etki, sıradan bir iş listesi sayfası okumaktan çok bir sunumun kareleri arasında geçişe benzer.

Bu ayrım, hem görsel çekiciliğini hem de kariyer web sitesi tasarımı olarak sınırlılıklarını açıklar. Sekans güçlü bir atmosfer kurabilir; ancak pratik bilgilerin geçişlerin dışında da erişilebilir kalması gerekir. Başvuru sürecini arayan bir ziyaretçinin görevi, marka hikayesini keşfeden birinin görevinden farklıdır.

Sahneler Boyunca İşe Alım Hikayesi
Sekans BölümüGörünen İçerikKorunması Gereken Bilgi
Giriş ve Ay SahneleriKuruluşun kimliği ve bir ay keşfi ortamı.Sayfanın kaydırma yapılmadan önce bile işe alım sayfası olarak tanımlanabilmesini sağlayın.
Katılım ve İnşaKatılım ve Kendi İşini Yarat davetleri.Mevcut sonraki adımı yalnızca görsel bir metaforla değil, kelimelerle de açıklayın.
Başvuru ve KapanışDört duraklı bir süreç diyagramı ve son bir davet.Hikaye sona erdiğinde başvuru rehberliğini ve gerçek bir hedefi erişilebilir tutun.

Kaydırma Konumu Nasıl Sahne Geçişine Dönüşür

Kaynak, sayfanın kaydırılabilir mesafesini sekiz sahneden her birine karşılık gelen 0'dan 7'ye kadar olan konumlarla eşleştirir. Bir sahne, bu konuma en yakın olduğunda geçerli sahne hâline gelir. Komşu sahneler geçiş sırasında kısmen görünür kalabilir; bu nedenle duraklar arasında alınan bir ekran görüntüsü yumuşak veya çift görüntülü görünebilir.

Aynı Kaydırma Geçişinde Üç An
Kaydırma KonumuKaynağın YaptığıOkuyucunun Gördüğü
Tam Bir SahnedeOpaklığı 1'e ulaşır, mesafeye dayalı bulanıklık 0'a iner.Okuma veya yakalamaya uygun, yerleşmiş bir kare.
Sonraki Sahnenin YarısındaHer iki komşu sahne de 0,5 opaklığa ve yaklaşık 1,3 piksel bulanıklığa sahiptir.Her iki bölümün de net bir ekran görüntüsü değil, karışık bir geçiş.
Sahnenin ÖtesindeOpaklığı 0'a düşer; daha yakın bir sahne geçerli hâle gelir.Önceki kompozisyon, normal bir belgenin aşağısına devam etmek yerine geri çekilir.

Yörüngesel Bir Başvuru Yolunda Dört Numaralı Durak

Başvuru sahnesi bir diziyi ay güzergahına dönüştürür. Bilgisayar simgesi ve Gönder etiketi ile işaretlenmiş 1. Durak alt orta kısımda yer alır; 2. Durak solundadır, 3. ve 4. Duraklar yörüngenin üst bölümünde devam eder. Geometri tanıdık bir soldan sağa zaman çizelgesi olmadığından okuma sırasını sayılar taşır.

Kaydırma bulanıklığı veya JPEG yeniden sıkıştırması olmadan orijinal 1470 piksel başvuru sahnesi PNG dosyası. Yerel pikselleri incelemek için görüntüyü açın.
Kaydırma bulanıklığı veya JPEG yeniden sıkıştırması olmadan orijinal 1470 piksel başvuru sahnesi PNG dosyası. Yerel pikselleri incelemek için görüntüyü açın.

Yol Bağlar, Sayılar Sıralar

Yörüngesel bir çizgi, dört durağın birbirine ait olduğunu gösterir. Ancak bu çizgi başlangıç noktasını veya hangi yönde ilerleneceğini tek başına söylemez. Büyük boyutlu numara rozetleri eksik olan sırayı sağlar. Aynı ayrım, kıvrımlı bir işe alıştırma akışında veya illüstrasyonlu bir süreç diyagramında da geçerlidir.

İllüstrasyon Tam Talimat Değildir

Sahne bir başvuru sürecini adlandırır; ancak sağlanan yeniden yapılandırma bunu bir görüntü olarak işler. Çalışan bir sayfa yine de gerçek adım adlarını, gereksinimleri ve hedefleri metin olarak içermelidir. Bu ayrıntılar, diyagram telefonda dikey olarak istiflediğinde okunabilir kalmalıdır.

Görsel Yeniden Yapılandırmanın Gerçek HTML'e İhtiyaç Duyduğu Yerler

OpenDesign bunu komisyonla hazırlanmış bir Moonshot projesi olarak değil, resmi bir hackathon örneği ve görsel çalışma olarak hazırladı. Bu ayrım uygulamada görünürdür: 2–8. sahneler sağlanan referans görüntülerdir ve bu görüntüler aria-hidden olarak işaretlenmiştir. Geçerli sahneyi değiştirmek, görüntünün içindeki etiketleri metin olarak erişilebilir kılmaz.

  1. Başlıkları Arka Plan Görüntüsünün Dışında Tutun

    Çalışan bir sürümde sahnenin başlığı ve açıklaması seçilebilir metin olarak kalmalıdır. Arka plan kokpit, yıldızlar veya ayı taşıyabilir; ancak bir başvuru talimatının tek konumu olmamalıdır.

  2. Hareketi Bilgiye Erişimden Ayırın

    Hareket azaltıldığında yerleşmiş ve okunabilir bir düzen ile sürece doğrudan bir yol sağlayın. Bu, önerilen bir iyileştirmedir; sağlanan yeniden yapılandırmada doğrulanmış bir özellik değildir. Bir ziyaretçinin sonraki adımı bulmak için kaydırma animasyonunda ustalaşması gerekmemelidir.

Bu Kariyer Web Sitesi Tasarımının Ortaya Koyduğu

Bu vaka çalışması, mevcut açık pozisyonları veya çalışan bir başvuru arka ucunu değil, sahne kompozisyonunu ve kaydırmayla bağlantılı hareketi göstermektedir. Kasıtlı olarak pikselleştirilmiş referans çizimi vektör çizim değildir; yerel çözünürlükte dışa aktarma bu stilistik sınırı ortadan kaldırmaz. Bunu anlatı ve geçiş mekaniğini incelemek için kullanın; gerçek işe alım bilgileri için işverenin resmi kanallarına başvurun.

OpenDesign'da Kariyer Web Sitesi Tasarımı Nasıl Oluşturulur

  1. OpenDesign'ı İndirin ve Kurun

    Masaüstü uygulamasını indirin, kurun ve kurulumu tamamlayın. Tasarımınız için bir proje oluşturun.

    OpenDesign'ı İndir
  2. Hikayeyi ve Pratik Bilgileri Tanımlayın

    Kendi kuruluşunuzun tanıtımıyla, katılım seçenekleriyle ve başvuru adımlarıyla başlayın. Görsel tema istemeden önce hangi bilgilerin onaylandığını, hangilerinin yer tutucu olduğunu belirtin.

    Önerilen Prompt

    Kurgusal bir araştırma stüdyosu için kariyer web sitesi tasarımı oluştur. Giriş, katılım seçenekleri, ekip hikayesi, başvuru süreci ve kapanış daveti genelinde ay keşfi teması kullan. İşe alım gezinmesini lafzî ve okunabilir tut. Başlıkları ve numaralı süreci tek bir görüntü yerine anlamsal metin olarak oluştur. Etiketli yer tutucu roller ve devre dışı bırakılmış yer tutucu başvuru eylemleri kullan; canlı bir işe alım arka ucunu ima etme. Okunabilir, hareketi azaltılmış bir düzen ekle.

  3. Önce Tek Bir Sahne Geçişini İnceleyin

    OpenDesign'dan giriş ile sonraki sahneyi, okunabilir bir statik durum koruyarak birleştirmesini isteyin. Geçişin işe alım amacını gizlemediğini veya etkiyi sayfanın geneline yaymadan önce katılım bilgilerine erişimi geciktirmediğini kontrol edin.

  4. Süreci Görsel Metafor Olmadan Test Edin

    Başvuru adımlarını düz metin olarak okuyun ve mobilde sıralarını kontrol edin. Gerçek bağlantıların gerçek hedeflere sahip olduğunu ve yer tutucuların açıkça belirlendiğini doğrulayın. Yalnızca bundan sonra yörünge yolunu veya diğer dekoratif işlemi bilginin çevresine ekleyin.

  5. Dışa Aktarın ve Paylaşım Bağlantısı Alın

    Bitmiş tasarımınızı dışa aktarın, ardından bir paylaşım bağlantısı almak için OpenDesign'daki Paylaş seçeneğini kullanın. Bağlantıyı göndermeden önce ayrı bir tarayıcı penceresinde açarak amaçlanan sürümün ve bileşenlerinin erişilebilir olduğunu doğrulayın.

OpenDesign Masaüstü

Tek tasarım sistemi. Her çıktıda tutarlı bir marka

Tam Vibe Design Workspace içinde aynı marka kurallarını web sitelerine, sunumlara, etkileşimli prototiplere, panolara, görsellere ve HTML videolara uygulayın. Yerel Codex, Claude Code, Cursor ve diğer kodlama ajanlarını bağlayıp ücretsiz üretin.

  • Web, sunum, prototip, pano, görsel ve video
  • 140+ tasarım sistemi ve eksiksiz şablon ile beceri kitaplığı
  • Yerel Codex ve 21+ kodlama ajanını bağlayın · Ücretsiz
Ücretsiz indir

macOS ve Windows için