Ekran görüntüsünü doğru al
Tarayıcıda tam sayfa ekran görüntüsü almak cazip ama mockup için çoğu zaman yanlış. Cihazın ekranı yalnızca ilk görünen kısmı gösteriyor; 8000 piksellik bir sayfa telefonun içinde okunmaz bir şerit haline geliyor.
- Dizüstü için tarayıcı penceresini 1440 × 900 civarına getir ve ilk ekranı al. Retina ekranlarda görüntü iki katı çözünürlükte çıkıyor, bu iyi.
- Telefon için tarayıcının geliştirici araçlarındaki cihaz görünümünü kullan, iPhone ölçüsünü seç ve ekran görüntüsünü oradan al.
- Çerez uyarılarını, sohbet balonlarını ve tanıtım pencerelerini kapat. Mockup'ta en çok göze batan şey bunlar.
Tam sayfayı göstermek istiyorsan görsel yerine kaydırma videosu yap; aşağıda anlatıyoruz.
Cihazı seç
- MacBook: portfolyoların ve SaaS sitelerinin en sık kullandığı cihaz. Hafif açılı bir MacBook, siteyi hem gerçekçi hem okunur gösteriyor.
- iMac ya da harici ekran: büyük, ferah sayfalar ve panel arayüzleri için.
- Tarayıcı penceresi: cihaz olmadan, yalnızca pencere çerçevesi. Belgelerde ve blog yazılarında temiz duruyor.
- Telefon: sitenin mobil hali. Bugün ziyaretçilerin büyük kısmı siteyi telefondan açıyor; mobil görünümü göstermemek eksik kalıyor.
Responsive bir siteyi göstermenin en bilinen yolu üçünü yan yana koymak: dizüstü, tablet ve telefon aynı sahnede.
Kaydırma videosu
Uzun bir sayfayı göstermenin en iyi yolu, cihazın ekranında sayfanın yavaşça aşağı kaydığı kısa bir video. İki yolu var:
- Tarayıcıda ekran kaydı alıp sayfayı elle kaydırmak. Kolay, ama hız düzensiz olabiliyor.
- Tam sayfa ekran görüntüsünü cihazın ekranına koyup ekran içinde yukarıdan aşağı kaydırmak. Hareket pürüzsüz oluyor.
Kaydırmayı yavaş tut; izleyen başlıkları okuyabilmeli. 10–15 saniyede bir sayfanın üç dört bölümünü göstermek yeterli.
Arka plan ve açı
Web sitesi mockup'larında arka plan sitenin kendi renklerinden birinin açık tonu olunca bütünlük sağlanıyor. Çok renkli ya da fotoğraflı arka planlar ekranla yarışıyor.
Açıda abartma. Hafif bir eğim cihazı canlı gösteriyor ama ekran fazla döndükçe yazılar okunmaz hale geliyor. Sitenin kendisini göstermek istediğin görsellerde cihaz neredeyse karşıdan dursun, açılı sahneleri giriş görseli için sakla.
Portfolyo için ipuçları
- Her projede bir dizüstü, bir telefon görseli ve kısa bir kaydırma videosu iyi bir set oluşturuyor.
- Behance ve Dribbble için ilk görsel kapak oluyor; en çarpıcı sahne o olsun.
- Görsellerin hepsinde aynı cihazı, aynı ışığı ve aynı arka plan tonunu kullan. Portfolyo dağınık görünmüyor.
