Eğitici

Tasarımcının Gözdesi: SKETCH!

Sketchwall

Merhaba,

Bir tasarımcı için kuşkusuz en önemli şeylerden birtaneside kullandığı program ve o programa ne denli hakim oluşudur. Hayalgücü tasarımcıyı oluşturan temel faktör olsa da elinizde ki programı kullanmayı bilmiyorsanız hayalgücünüzü yönlendirmeniz bir hayli zor oluyor.

Bu yazımızda tasarım dünyasında son zamanda geliştirilen en iyi programlardan birisi olan Sketch’i tanıyacağız.Bana kalırsa bu şekilde geliştirilmeye devam ettikçede uzun bir süre tahtından inmeyecek gibi duruyor.

Sketch’i diğer tasarım programlarından ayıran en büyük özellik olarak sadece “Arayüz” tasarlamak için yapılışı ve geliştirilişi sayılabilir. Eskiden arayüz tasarımı yaptığımız programlar (illustrator, photoshop vb.) aynı zamanda fotoğraf düzenlemeyi ve grafik tasarlamayı baz aldığı için arayüz konusunda epey yetersiz idiler. Sketch, global dünyada da Arayüz Tasarımı’nın tamamiyle ayrı bir sektör oluşunu göz önünde bulundurarak resmen bu sektöre özgü bir program haline gelmiş.

SAYFA VE ARTBOARD YAPISI

Sketch, sayfa ve artboard konusunda bizlere sınırsız bir canvas ile “sen yeter ki tasarla, alan yaratırız” dercesine imkanlar sunuyor. Çok pratik bir şekilde artboard oluşturmamıza ve sürekli olarak kullandığımız artboardları bir kenarı kaydetmemiz dışında bize hazır olarak bazı mobil ve ekran çözünürlükleriyle artboard sunuyor.

PİKSEL & VEKTÖR

Daha önce kullandığım hiçbir programda denk gelmediğim bi özellik olan hem vektör hem piksel çalışma mantığı açıkçası programın en can alıcı noktalarından birisi. Günümüz ekran çözünürlüklerinde vektörel çalışmak neredeyse zorunluluk haline gelirken; “vektörde tasarladık ama pikselde nasıl gözükecek” derdinede bir son bulan Sketch, tek tuş kombinasyonuyla yaptığımız tasarımın pikselize olarak nasıl gözükeceğinide bize lanse ediyor.

SEMBOLLER

Sembol özelliği yanlış hatırlamıyorsam 3.7 güncellemesiyle gelen bir özellik ve kuşkusuz aşırı derecede işimizi kolaylaştıran, tasarımın bütününe tek bir hamle ile müdahele edebildiğimiz bir olay. Sembolleri konusunu anlatabilmek için başlı başına bir yazı yazmam gerekebilir belki ama özet olarak anlatmak gerekirse diyelim ki; “20 sayfalık bir web arayüz tasarımınız var ve kullandığınız renk tonlarını değiştirmek istediniz. Bütün sayfalarda ki bütün materyalleri tek tek seçip aynı renk tonunu mu uygulayacaksınız? Değiştirmem daha iyi dediğinizi duyar gibiyim.”

İşte bu gibi sorunlara daha iyi bir çözüm bulunamazdı herhalde. Yaptığımız materyalleri sembol olarak çalıştığımızda bir tanesinin stil özelliklerini değiştirdiğimizde hepsine etki edebiliyoruz. Örnek vermek gerekirse; Tasarım genelinde çalıştığınız bir buton tipi var diyelim, bu butonu sembol olarak çalıştığınız taktirde sadece onun stili ile yaptığımız değişiklik tasarımın bütününde ki aynı butonlara etki edecektir. Harika değil mi!

GRID & LAYOUT DOSTU SKETCH!

Program bu kadar kullanışlığı yetmezmiş gibi birde bizlere içinde grid ve layout sistemi ile geliyor. CTRL + L ile Layout’ları, CTRL + G ile gridleri görüntüleyebiliriz. Tasarımlarımızı layout ve grid sistemine ne kadar uygun çalışırsak front end developerımızın işini bir hayli kolaylaştırıyoruz. Heleside CSS Framework’lerine uygun çalışırsak deyme keyfimize!

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 Sketcheklentisini 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. Sketch — Sketch Mirror — Yardım — Facebook 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

Bu yazının büyük bir kısmı kendim tarafından oluşturulmuş olup, videolar bana ait değildir.

Facebook: www.facebook.com/mrauxkein

Yazar Hakkında

mm

Enes USTA

Enes USTA, 1996 Yılında İstanbul’da doğmuş. Yazılım mühendisliği, grafik tasarım ve fotoğrafçılık öğrencisi. Araştırmayı ve öğrenmeyi seven, başarıyı arzulayan.

Facebook’ta Grafik Adam!