Yaratıcı Portföy Web Sitesi Tasarımı

Projelerinden Fazlasını Açıklayan Bir Portföy

Maya Rowan'ın portföyü belirli bir tercih yapar: proje adlarına, pek çok portföyün ekran görüntülerine verdiği görsel ağırlığı verir. "Fikirleri görünür kılıyorum" açılış cümlesi, cihaz maketlerinden oluşan bir duvara değil, tipografik proje kartlarından oluşan bir ızgaraya yönlendirir. Bu nedenle sayfa, çalışmanın ne olduğunu açıklamak için açıklamalarına dayanır.

Aynı editoryal yapı üç ölçekte tekrar eder: numaralı bölümler sayfayı organize eder, büyük adlar projeleri birbirinden ayırır ve küçük etiketler çalışma notlarını tanımlar. Bu, kurgusal kişiliği değiştirmeden önce bile siteyi bir yaratıcı portföy tasarım referansı olarak kullanışlı kılar. Önemli olan, o katmanların birlikte nasıl çalıştığıdır; belirli kırmızı veya mavi değil.

Proje Kartları Neden Poster Gibi Okunuyor

Masaüstü proje ızgarası kasıtlı olarak eşitsizdir: sütunları 1,2:0,8 oranını kullanır, bu nedenle sol kart mevcut genişliğin yaklaşık %60'ını alır. Her kart en az 420 piksel yüksekliğindedir. Bu, üstte sıkıca sarılmış bir başlık ve altta ayrı bir açıklayıcı cümle için alan yaratır.

01

Sekiz Karakterlik Bir Başlık Genişliği Ritmi Değiştirir

Kaynak, proje başlıklarını 8ch ile sınırlar ve 0,92'lik bir satır yüksekliği kullanır. "Field Notes for Better Cities" tek bir satır yerine uzun bir blok haline gelir. Dar ölçü başlığa poster benzeri ritmini kazandırır; küçük bir ekran görüntüsünün neden olduğu tesadüfi bir kaydırma değildir.

02

Açıklama Somut Anlamı Taşır

İlk kart, katılımcı bir haritayı adlandırır ve küçük gözlemlerin kentsel sinyallere dönüştüğünü açıklar. Bu, "yenilikçi bir haritalama deneyimi"nden çok daha bilgilendiricidir. Açıklama, alt kenarın 24 piksel yukarısında yer alır; bu sayede okuyucu, farklı renkli kartlarda açıklamayı tutarlı bir yerde bulur.

Seçilmiş Çalışmalardan Tekrarlanabilir Bir Yaklaşıma

Yaklaşım bölümü, proje ızgarasının vurgusunu tersine çevirir. Büyük bir alıntı daha küçük sütunu kaplar; üç numaralı açıklama daha geniş olanı kaplar. Her açıklamanın kendi üst çizgisi ve sabit bir numara sütunu vardır. Etki, bireysel fikirlere göz atmaktan bir eylem dizisini okumaya geçiştir.

1. Sinyali Bul, Girdileri Adlandırır

   İlk satır açıkça insanları, kısıtlamaları, dili ve davranışı listeler. Bunu, konusu kentler hakkındaki gözlemler olan Field Notes ile karşılaştırın: proje açıklaması malzemeyi adlandırırken, yaklaşım satırı tasarımcının o malzemede ne arayacağını açıklar. Sayfa bu ilişkiyi önerir; tamamlanmış bir araştırma çalışmasını belgelemez.

2. Öğrenmek İçin İnşa Et, Prototip Gerekçesini Adlandırır

   İkinci satır, çalışan bir prototipi soruları yanıtlamanın bir yolu olarak konumlandırır. Bu, parlak bir nihai arayüz üretmekten farklı bir iddiadır. Ortam YZ'si, editoryal sistemler ve grup karar araçlarının karıştığı portföyün yapısına uygundur; burada davranışı keşfetmek tasarım sorusunun bir parçasıdır.

3. Bir Sistem Bırak, Teslim Sürecini Adlandırır

   Son satır, "lansman" ile bitirmek yerine bileşenleri, token'ları ve rehberliği adlandırır. Bu, önerilen çıktıyı daha somut kılar: başka bir kişi kararların olduğu yerden devam edebilmelidir. Gerçek bir vaka çalışması için, bir bileşen örneği veya kısa bir kullanım kuralı bu ifadeyi destekleyeceği yer burasıdır.

Hackathon Projeleri İçin Bir Portföy Referansı

OpenDesign, bu kurgusal portföyü resmi bir hackathon örneği olarak oluşturdu. Katılımcının kendi başvurusu için en güçlü yeniden kullanılabilir fikir, bir projenin amacı, arkasındaki kararlar ve açık kalan sorular arasındaki ayrımdır. Bir proje kartı bir başvuruyu tanıtırken, bağlantılı bir hesap gerçek kanıtı sağlayabilir.

Portföy Konseptinin Sınırları

Kaynak, proje ızgarasını ve Yaklaşım bölümünü 760 pikselin altında tek sütuna geçirir; ancak gezinme bağlantılarını da gizler. Bu, gerçek bir portföyde ele alınması gereken belirli bir sınırlamadır: ziyaretçilerin İletişim bölümüne ulaşmak için tüm projeler arasında kaydırmasını sağlamak yerine kompakt bir bölüm menüsünü koruyun.

Kurgusal projeler belgelenmiş müşteri çalışmaları değildir. Notlar, doldurulmuş bir yayın sistemi yerine başlıklardır ve İletişim bölümü [email protected] adresine işaret etmektedir. Gerçek bir portföyü paylaşmadan önce bu yer tutucuları değiştirin ve hedefleri doğrulayın.