Gelişen ve değişen dünyaya ayak uydurmak adına bizlere düşen en zorlu görevlerden birisi de kuşkusuz silahımızı iyi seçmek ve verimli şekilde kullanmak. Bugün sizlerle birlikte güçlü özellikleri, kullanışlı arayüzü ile yeni nesil dijital dünya için grafik tasarım aracı olan Sketch uygulamasını inceliyor olacağız.


Arınma

Kağıt kesmek için testereyi mi tercih edersiniz yoksa makası mı?

Günümüzün popüler tasarım araçlarını incelediğimizde, arayüz tasarımcılarının kendileri için üretilmemiş olmasına karşın bu araçları ‘hackleyerek’ kullanıldıklarını ve önlerinde duran seçeneklere sırt döndüklerini görüyoruz. Birçok firmanın iş ilanlarında tasarım odaklı düşünme veya sonucu hedeflemekten öte kendileri için üretilmemiş bu araçları şart koyması ile durum daha da çıkmaza girmiş durumda.

Bugün ihtiyaçlarımızın karşılığı olmayan, hedeflenen ortamlarda kullanılamayacak özelliklere sahip, bu karmaşık ve ağır araçlara alternatif olarak yeni nesil fonksiyonlarıyla Sketch uygulamasını sizlere tanıtmak istiyorum.

Sketch

Sketch uygulaması Bohemian Coding tarafından geliştirilmekte. Google, Facebook, Interacthings, Etsy, Stripe, Twitter, Pinterest gibi firmalar tarafından hali hazırda kullanılmakta olan Sketch 3 sadece Mac OS işletim sisteminde çalışmakta ve lisanslı bir uygulama olup $99’a satın alınabiliyor.

Öne Çıkan Özellikleri

Sayfalama ve Artboard

Sketch’in ilk öne çıkan özelliği kuşkusuz sayfalama ve artboard yapısı.

Uygulamayı açtığınızda Sketch size sonsuz bir çalışma alanı (canvas) veriyor ve çeşitli ölçülerde, çözünürlük ayarlarında takılmak yerine tasarıma anında odaklanabilmenize imkan sağlıyor.

Eğer tasarımda hedeflediğiniz ortam belirliyse hazır artboardları kullanarak veya kendi artboardunuzu oluşturarak sınırlar içersinde de tasarlayabiliyorsunuz. İşte birkaç hazır artboard örneği: iPhone 6S Dik, Yatay, Responsive Web Design ölçüleri, A4 kağıt, iPhone App Icon…

Artboardların sunduğu bir diğer önemli avantaj ise mobil uygulama örneği için farklı ekranları için aynı sayfa üzerinde yanyana konumlandırarak çalışabilme ve layerlara rahatlıkla erişebilme özgürlüğü.

Sketch bununla da yetinmiyor, tek bir dökümanın farklı sayfalarını da oluşturmanıza imkan sağlıyor. Ben kişisel olarak wireframe, kurumsal kimlik, arayüz tasarımı gibi farklı adımları farklı sayfalarda görüntülemeyi tercih ediyorum. Kısaca tek bir dosya ile artboard ve sayfalama yapısıyla tüm tasarımı ortaya çıkartabiliyorsunuz.

Rakamlar ile Tasarım

Sketch’in benim için en önemli özelliği her türlü ögenin, stilin rakamlar ile yeniden düzenlenebiliyor olması.

Bu sayede elementlerin ölçülerini, düzlemdeki konumlarını, şeffaflıklarını ve hatta border-radius, border, shadow, inner shadow gibi özellikleri rahatlıkla CSS’ten alışkın olduğumuz mantıkta düzenleyebiliyoruz.

Ayrıca elementlerin birbirlerine olan konumlarını rahatlıkla inspector sayesinde ölçebiliyor ve elementleri konumlandırırken Sketch’in bizi cetvel ile uyarması sayesinde daha rahat bir tasarım ortamında çalışıyoruz.

Vector & Pixel

Pixel aslında orantılı bir kavram ve densitye bağlı olarak değişkenlik gösteriyor. Retina ile başlayan serüvene ilerleyen günlerde eklenmesi olası @3x, @4x…@Nx çözünürlükler nedeniyle vektörel bir çalışma ortamı dijital yaşamda neredeyse bir zorunluluk.

Bu noktada Sketch’i pixel-based Photoshop veya vector-based Illustrator ile karşılaştırmak elma ile armutu karşılaştırmak gibi olacaktır. Çünkü hepsinin temel kullanım amacı ve çalışma prensipleri farklı.

Fakat Sketch hem pixel hem de vektörel olarak çalışabilmesi öne çıkan özelliklerinden. Yani tüm elementleriniz vektör ve tek bir buton ile pixel görünümünü inceleyebiliyor, bu görünümdeki olası problemleri çözebiliyorsunuz.

Text-renderingten bahsetmeden de olmaz. Sharp, Crisp, Strong, Smooth gibi değişkenler yerine Sketch dijital dünya için çok daha anlamlı bir şekilde Sub-Pixel Antialias fonts seçeneğini sunuyor. Yani tasarım aracının içeresinde de doğru bir font görünümü üzerinde çalışıyorsunuz.

Stil Şablonları

İyi bir tasarımın en önemli özelliklerinden birisi de tutarlılıktır. Tutarlılığı sağlamak adına renk paletini, stil özelliklerini, tipografik ahengini veya tekrar eden birçok ögeyi farklı sayfalarda kullanıyoruz.

Peki header’daki küçük bir değişiklik için onlarca sayfa tasarımını tekrar elle düzenlediğinizi veya düzenlemediğinizde ortaya çıkan karmaşıklıkları, renk paletinizdeki bir tonun değişmesinin sizin için ne anlama geldiğini eminim biliyorsunuzdur.

Sketch tasarımcıların en önemli dertlerinden biri olan ortak stil konusunda çözüm sunuyor.

Bir elementte kullandığınız stilinizi kaydedip boyut gibi farkı özelliklere sahip diğer elementlerde de kullanabiliyorsunuz. Tipografi için de geçerli.

Ayrıca tekrar eden header, footer, liste ögeleri gibi çoklu layer içeren grupları de Symbols özelliği ile sonradan yapacağınız değişikliklerin tüm tasarıma aynı anda etki etmesini sağlıyabiliyorsunuz.

Peki uygulama iconu, mobil arayüz, responsive web sitesi tasarımları için de bir şeyler var mı? Elbette! Sketch hazır templateler ile sizlere mükemmel başlangıç kitleri sunuyor.

Grid & Grid Tool

Sketch alışık olduğumuz cetvel (ruler)’e ek olarak içersinde Grid özelliği ile birlikte geliyor. Dolayısıyla artık grid oluşturmak hiç olmadığı kadar kolay.

Unutmayın, kolon sayısı, toplam genişlik, kolan özellikleri gibi her türlü veri her an değiştirilebiliyor.

Ayrıca elementlerinizi grid bir yapı üzerinde arayüze serpiştirmek için de gerekli olan dokunuş unutulmamış.

Önizleme

Çözünürlük tek başına kesinlikle aldatıcı bir öge. Örneğin 50” HDTV (1080p) bir televizyon ile Samsung 5” Galaxy S4’ün ekran çözünürlükleri aynı(1920×1080). Fakat bu iki cihazın genel kullanımı incelendiğinde kullanıcıların TV’u birkaç metre ileride oturarak izlerken, akıllı telefonlarını ellerinde kendilerine oldukça yakın kullanıyor olduğu görüyoruz.

Dolayısıyla bu ortamları hedefleyen tasarımları oturduğumuz yerden, ekrana olan uzaklığımızı da düşündüğünüzde birebir deneyimlemeden tasarlıyor ve çeşitli hatalara davet çıkarıyor olabiliriz.

Bu duruma çözüm olarak Sketch Mirror uygulaması sayesinde yaptığınız tasarımların iPhone ve iPad üzerinde anlık önizlemesini görüntüleyebiliyoruz.

Export

Tasarımımızı tamamladık, şimdi sıra tasarımı hayata geçirmeye geldi ve dolayısıyla elementlerinizi export etmeniz gerekiyor, yani parçalar halinde geliştirme ortamına dökmemiz gerekmekte.

Öncelikle şunu belirtelim, hali hazırda Sketch’in sağladığı stil şablonlarını aktif olarak kullandıysanız geliştiricinin zaten favori tasarımcısı oldunuz bile.

Ardından geliştiriciye birkaç dakika içersinde @1X, @2X, @3X, PNG, JPG, SVG… gereksinimlere göre elementleri kestiğinizde yaşadığınız rahatlık ile Sketch favori tasarım aracınız konumunu daha da güçlendiriyor olacak.

Eğer tasarımınızın HTML, CSS dökümü gerçeleşecek ise geliştiriciye elementlere sağ tıklayarak CSS özelliklerini kopyalabildiğini gösterdiğinizde, Sketch onun da favori tasarımcı aracı olmuş olacak.

Peki ya geliştiriciniz Sketch kullanmamakta ısrar ediyorsa? Cevabı eklentiler bölümümüzde.

Eklentiler

Sketch API’nı eklenti geliştiricilere sunuyor. Yani sadece Sketch ekibi değil diğer geliştiriciler de özgürce Sketch’te kullanabileceğiniz yeni özellikler ekliyor ve işlerinizi hızlandırıyorlar.

‘Peki ya geliştiriciniz Sketch kullanmamakta ısrar ediyorsa?’ demiştik değil mi? Bu durumla diğer tasarım araçlarını kullanıyorken de karşılaşıyor olmanız mümkün ve en anlaşılır iletişim yöntemi specler hazırlamak, yani elementleri görsel olarak işaretleyerek bilgilerini sunmak. İşte Sketch Measure eklentisi tam size göre.

Veya tasarımlarınızda kullanmak üzere yasal bir şekilde dummy avatar, isim bilgilerine ihtiyaç duyuyor musunuz? Content Generator for Sketch eklentisini kullanabilirsiniz.

Diğer

Background Blur

iOS background-blur özelliğinin olduğunu da belirtmekte fayda var.

Rotate Copies

Kaynak Dosya

Birkaç özellik daha

Peki kod dostu, rakamların gücüne dayanan tasarımlarınızın otomatik olarak versiyonlanarak kaydedildiğini de söylesem, peki ya Bitmap düzenleme aracını?

Örnekleri çoğaltmak mümkün fakat dikkat edilmesi gereken nokta, henüz çok genç sayılabilecek bir tasarım aracının arkasında büyüyen bir topluluk var.

Kısaca Sketch gerçekten de dijital dünyanın gereksinimleri için gerekli ince ayrıntılara sahip olan Tasarımcı’nın El Çantası!

Kaynaklar

Kısa ve öz (!) bir yazıda Sketch’in ince derinliklerine inmek ne yazık ki mümkün değildi, fakat sizleri yarı yolda bırakmamak adına, bu yazının oluşumunda da önemli yeri olan, Sketch topluluğuyla etkileşimde olmanıza, uygulamayı daha iyi tanımanıza, eklentilere erişmenize ve en iyi pratikleri öğrenmenize olanak sağlayacak bir takım kaynak linkleri paylaşmak istedim.

  1. SketchSketch MirrorYardımFacebook Grubu
  2. Meng To’nun BloguMedium Koleksiyonu ve Design+code kitabı
  3. Sketch hakkındaki bir diğer Medium Koleksiyonu
  4. Sketch App Sources, ücretsiz kaynak dosyalar ve makaleler
  5. SketchMine, ücretsiz kaynak dosyalar
  6. sketchtips, ipuçları ve eğitimler

Bonus

Peki onca PSD arşiviniz? En azından iconları Sketch’te kullanabilmeniz için bir yol var mı? Evet var.

PSD’lerinizin içersinde olan shape elementleri videoda görebildiğiniz gibi Adobe Illustrator’e aktararak, ardından da SVG olarak kaydettiğimizde Sketch içersinde kullanabiliyoruz.

Geri kalan dosyalarınızı çevirmek için malesef bir method yok. Bu duruma kendinizi tekrar etmenizi engelleyecek bir gelişme imkanı olarak bakmak ya da Sketch halinesine dezavantaj olarak yazmak mümkün. Bunun kararını okuyucumuz vermeli elbette.


Ücretsiz Sketch Kaynak Dosyaları

Hızlı bir başlangıç yapmak için kullanabileceğiniz, ücretsiz kaynak dosyalar:

Kaynak
Kaynak

Bu içerik orijinal olarak 27 Nisan 2014 tarihinde WebMagazin.Co sitesinde yayınlanmıştır. Aradan geçen 2 yıl boyunca Sketch uygulamasında çeşitli geliştirmeler yapılmış olmasına rağmen, yazının temelindeki mesajların geçerliliğini koruması nedeniyle Medium’a taşınmıştır.

Bir sonraki içeriği 2 yıl sonra keşfetmemek için beni Twitter’dan takip edebilirsiniz veya retweet ederek daha fazla kişiye ulaşması sağlayabilirsiniz:

Teşekkürler.

WebMagazin Co

Daha iyi Türkçe web için!

Rıza Selçuk Saydam

Written by

Product Designer at Facebook

WebMagazin Co

Daha iyi Türkçe web için!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade