Ürün Tasarımı
Military Mechanics
Interesting Engineering ile aynı ailede, tek bir konuya odaklanan niş bir medya platformu: askeri araçlar, ekipmanlar ve mekanik sistemler. Hâlâ geliştirme aşamasında, ama okuma deneyimi çoktan şekillenmeye başladı.
Siteye Göz At
Ürün
Hakkında
Military Mechanics, Interesting Engineering'in bir yan projesi; askeri araçlar, ekipmanlar ve mekanik sistemler hakkında daha derinlemesine içerik isteyen daha dar bir kitleye hitap ediyor. IE'nin editöryal karakterini taşıyor ama konu çok daha spesifik olduğu için yapının kullanıcıyı ilgilendiği içeriğe daha hızlı götürmesi, okurken dikkatini daha az dağıtması gerekiyor.
Ürün henüz erken aşamada olduğu için sadece bugün var olan ekranları tasarlamadım. Aynı zamanda içerik hiyerarşisinin, okuma deneyiminin, görsel dilin ve ileride büyüyebilecek component yapısının da temelini attım.
UX, UI ve sitedeki her görseli kendim tasarladım; ana sayfadan makale okuma deneyimine kadar.
Rol: Ürün Tasarımcısı (UX, UI & Görsel Tasarım)
Neler
Yaptım
Military Mechanics'te çalışırken sadece birkaç ekran tasarlamadım. Yeni bir medya ürünü olduğu için ana sayfanın nasıl organize edileceğini, insanların bir makaleyi nasıl okuyacağını, görsellerin nasıl kullanılacağını ve bütün bunların küçük ekranda nasıl davranacağını birlikte düşündüm.
Homepage
Ana sayfada farklı içeriklerin nasıl organize edileceğini ve kullanıcının ilk fark etmesi gerekeni tasarladım.
Article Experience
Okuyucunun en fazla zaman geçirdiği makale sayfasını sade, odaklı ve kolay taranabilir bir hale getirdim.
Editorial Design
Teknik ve editöryal içeriklerin aynı içerik hiyerarşisi ve sayfa yapısı içinde tutarlı hissettirmesini sağladım.
Visual Design
Sitedeki görselleri ve görsel dili, Military Mechanics'in daha teknik ve mekanik karakterine göre şekillendirdim.
Responsive Design
Masaüstü tasarımı küçültmek yerine, mobilde içerik hiyerarşisini ve okuma rahatlığını yeniden düşündüm.
Ana Sayfayı
Organize Etmek
Military Mechanics tek bir konuya odaklanıyor ama bu ana sayfanın basit olduğu anlamına gelmiyor. Askeri araçlar, mekanik sistemler, savunma teknolojileri ve farklı editöryal formatlar aynı sayfada bir arada yaşıyor. Bu yüzden problem mümkün olduğunca fazla içerik göstermek değil, kullanıcının ilgisini çeken içeriği hızlıca bulmasını sağlamak. Hiyerarşiyi, öne çıkan hikaye gözden kaçmayacak, son haberler ve en popüler içerikler de sayfa kaydırıldıkça kolayca bulunabilecek şekilde kurguladım.
İlk Bakışta
Ne okuyorum?
Askeri teknoloji, araçlar ve mekanik sistemler.
Neye odaklanıyor?
Daha niş ve daha teknik bir okuma deneyimine.
İlk olarak neyi fark etmeliyim?
İlgimi en çok çekebilecek, öne çıkan içeriği.
Sonra ne yapabilirim?
Siteyi keşfetmeye ve bir makaleyi okumaya devam edebilirim.
İçerik Hiyerarşisini
Kurmak
Bir medya ana sayfasında her içerik aynı ağırlığa sahip değil. Bazı hikayeler günün ana haberi olurken bazıları daha dar bir teknik ilgiye hitap ediyor. Military Mechanics'in ana sayfasında bu farkı kart boyutu, görsel ağırlığı ve yerleşimle okunur hale getirdim; öne çıkan hikaye tam merkezde dururken son haberler ve en popüler içerikler de bir bakış uzaklıkta kalıyor.
Primary
Kullanıcının ilk fark etmesini istediğim hikaye.
Secondary
Keşfi doğal hissettirmek için yakında tutulan son haberler.
Supporting
Daha derin keşif isteyenler için en popüler içerikler.
Makale Sayfasını
Tasarlamak
Okuyucuların en çok zaman geçirdiği yer makale sayfası, bu yüzden amacım sayfaya bir şeyler eklemek değil, okuyucuyla içerik arasındaki mesafeyi azaltmaktı. Başlığın, görselin, yazar bilgisinin, metnin ve etraflarındaki her şeyin birbiriyle ilişkisini düşündüm; öyle ki kullanıcı sayfaya geldiğinde ne okuduğunu hemen anlasın ve okumaya sürtünmeden başlayabilsin.
Okuma
Deneyimi
Makale sayfasında özellikle odak, hiyerarşi ve taranabilirlik üzerinde durdum. Uzun bir içerikte, kullanıcı başlıktan gövde metnine geçtiğinde arayüzün dikkat için yarışmasını istemedim. Başlığa, metadataya, görsele ve metne yeterince alan bırakmak içeriğin kendi ritmini kurmasını sağladı; makalenin sonundaki ilgili içerikleri de aynı deneyimin doğal bir parçası olarak ele aldım, sonradan eklenmiş bir şey gibi değil.
Odak
İçeriğin önüne geçen gereksiz arayüz öğelerini azaltmak.
Hiyerarşi
Başlık, metadata, görsel ve metnin birbirinden net şekilde ayrılması.
Tarama
Uzun makalelerin bir bakışta kolayca taranabilmesi.
Devamlılık
Bir makaleyi bitirdiğinde bir sonrakine doğal bir geçiş sağlamak.
Tipografi ve
Okuma Genişliği
Teknik ve editöryal içeriklerde tipografi sadece görsel bir tercih değil, okuma deneyiminin kendisinin bir parçası. Yazı boyutunu, satır yüksekliğini, paragraf genişliğini ve başlıkların gövde metniyle ilişkisini birlikte düşündüm. Masaüstünde gereğinden fazla genişleyen bir makale okumayı zorlaştırırken çok dar bir kolon da sayfayı gereksiz uzatıyor, bu yüzden okuma genişliğini, tipografi ölçeğini ve boşlukları uzun okumayı destekleyecek şekilde dengede tuttum.
Görsel
Tasarım
Military Mechanics, Interesting Engineering ile aynı ailede yer alıyor ve bu önemli, ama birebir aynı görünmesini istemedim. Konu daha niş, daha teknik, daha mekanik, ben de görsel dilin bunu hissettirmesini istedim. Bu yüzden görsellerde araçlar, mekanik sistemler ve teknik detaylar öne çıkıyor; metnin yanını dolduran bir öğe değil, hikayenin kendisinin bir parçası olarak ele alınıyor.
Görsel Dil
Technical
Mekanik ve mühendislik detaylarının öne çıkmasını sağlayan görsel yaklaşım.
Editorial
İçeriğin haber ve medya karakterini koruyan düzen.
Focused
Görselleri sadece dekorasyon değil, içeriğin bir parçası olarak ele almak.
Consistent
Aynı görsel sistemin farklı içerikler boyunca devam etmesi.
Responsive
Deneyim
Masaüstü tasarımını sadece küçültmedim. Okuma genişliği, görsel boyutları ve içerik kartlarının davranışı küçük ekran için yeniden düşünülmesi gereken şeylerdi. Özellikle uzun makaleler mobilde daha yoğun hissettirdiği için boşlukları, tipografiyi ve görsel oranlarını orada daha kontrollü tuttum. Amaç masaüstü tasarımını mobile taşımak değil, aynı okuma deneyimini küçük ekranda yeniden kurmaktı.
Desktop
Geniş ekranın sunduğu alanı içerik keşfi ve daha büyük görseller için kullanmak.
Mobile
Tek kolonlu, daha odaklı ve kolay taranabilen bir deneyim.
Navigation ve
Keşif
Military Mechanics'te kullanıcı sadece ana sayfaya gelip bir makale okuyup çıkmamalı. Bir içeriği bitirdiğinde başka bir konuya geçebilmeli ve ilgisini çeken şeyleri keşfetmeye devam edebilmeli. Bu yüzden navigasyonu sadece bir menü değil, içerik keşfinin bir parçası olarak ele aldım; ana sayfa, kategoriler, makaleler ve ilgili içerikler birlikte çalışarak kullanıcıya doğal bir yol sunuyor.
Discover
Design
System
Military Mechanics yeni bir ürün olduğu için tasarım sistemini en baştan düşünmek önemliydi. Ürün büyüdükçe yeni içerik formatlarının, kategorilerin veya sayfaların tasarımı dağıtmasını istemedim. Bu yüzden typography, spacing, cards, buttons, navigation, article components ve responsive davranışları tek bir ortak sistem altında tuttum; böylece yeni ekranlar sıfırdan başlamak yerine mevcut yapının üzerine eklenebiliyor.
UX'in Buradaki
Rolü
Military Mechanics'te benim için temel soru şuydu: askeri teknoloji gibi spesifik bir konuya gelen biri, aradığı içeriğe ne kadar hızlı ulaşabilir ve okumaya başladığında ne kadar rahat devam edebilir? Bu yüzden ana sayfa keşfe odaklanıyor, makale sayfası okumaya odaklanıyor, görsel sistem konunun daha teknik karakterini taşıyor, responsive yapı bu deneyimin farklı ekranlarda çalışmasını sağlıyor ve design system ürün büyüdükçe hepsinin bir arada durmasına yardımcı oluyor.
Sonuçta ortaya çıkan şey, Interesting Engineering'in başka bir versiyonu değil; belirli bir konuya ve o konuyla gerçekten ilgilenen kitleye göre yeniden kurulmuş, çok daha odaklı bir medya deneyimi.