Arayüz Tasarımcıları İçin Themeforest Deneyimi

Bu yazı ben de yapmak istiyorum ama bir türlü vakit ayıramıyorum diyen arayüz tasarımcısı arkadaşlarıma ithafen yazılmıştır. Yol göstermesi dileğiyle.

Projeyi tamamlamak ne kadar vaktimi aldı?

Tüm süreç yaklaşık 1,5 ay civarında sürdü. Bu süre boyunca her gün proje ile ilgilenemesem de her zaman aklımda projeyi bir an önce tamamlamak ve bir sonraki adıma geçmek vardı. Çalışabildiğim günlerde en az 2 saat, en fazla 3 saat kadar proje için vakit ayırdım.

Normal çalışma düzenimden farklı değişik bir çalışma sistemi uyguladım. Çalışma saatlerimi işten gedikten sonra akşam vakti değil de, sabah daha erken kalktığım bir vakide çektim. Benim için oldukça farklı bir deneyim oldu bu. Çünkü uzun zamandır (yıllardır) sabahları kalkıp direk olarak işe gidiyordum. Sonradan ferkettim ki bu beni oldukça monotonlaştırmıştı. Erken kalkmak tam bir işkence gibi gözüküyordu. Ama sabah saat 6 da kalkıp, her gün düzenli olarak işe oturdukça motivasyonum gün geçtikçe arttığını gördüm. Yaptıklarımın en önemli noktası bence burası oldu.

Peki zaman bu kadar az iken nasıl oldu da işime odaklandım ve verimimi nasıl yüksek tuttum?

Her gün sabah 6:00 da kalkıp 8:00’e kadar çalıştım ve bu 2 saati 4 eşit parçaya (4P) bölerek kullandım. 25dk çalışma için ve 5dk dinlenme olarak kullandım. Bu tekniğin adı "Pomodoro" tekniği. Faydası ise 25dk boyunca üzerinde çalıştığım konuya tam olarak odaklanabilmeyi sağlamasıydı. Çalışırken işi aksatacak, gerekli gereksiz aklıma gelen her şeyi bu süre boyunca görmezden geldim ve bunları küçük kağıtlara not etmeye başladım. Bu konulara ise sonra bakarak zamanımı sadece işe ayırmış oldum. Çoğu da zaman ayırmaya değmeyen şeylerdi tabiki.

Süreç boyunca sabahları zihnimi açık tutabilmek için bazen kitap okuyarak güne başladım. Bu sayede 2 tane de kitap bitirdim. Normalde iki üç ayda bir kitap bitirirsem benim için bu büyük bir başarıydı. Sabah okumanın faydalarını ayrı bir konu olabilir.

İlk hareket ve motivasyon sağlamak?

Motivasyonumu yüksek tutmak için kullandığım özel bir yöntemim olmadı. İlk hareketim sabahları erken kalkmaya başlamak oldu. Bu bir rutin haline geldikten sonra iş kendi kendine ilerlemeye başladı, otomatikleşti. Hiç bir şey üretmesem bile sabahın gücü beni hep ileri götürdü. Zamanla artık aklımdaki tek düşünce bir tasarım ile Envatoya, bu global markete zaman kaybetmeden girmek idi. Yapılacakları Evernote ile kaydettim. İşleri buradan takip ettim.

Projeyi çok daha kısa bir zamanda bitirebilirdim, ama kendime bu konuda baskı yapmadım.

İşin en güzel kısmı bence bu oldu. Kendime hiç baskı yapmadım. İşimi kendim için yapıyordum ve bu beni yaptığım işe daha çok bağlıyordu. Boş vakitlerimde Freelance olarak başkasına çalışmaktansa kendi adıma çalışmak, yaptığım tasarımın beğenilmeyecek korkusunu ya da diğer stres unsurlarını (işin iptal olması, yetiştirememe, söz verip tutamamayı) ortadan kaldırdı. Bazı insanlar üzerlerindeki bu baskıyı kendi verimliliklerini arttırmak için kullanırlar ama benimki öyle olmadı. İş daha çok benim oldukça yapmaktan o kadar fazla keyif aldım. Bu da üzerimde olumlu bir motivasyon oluşturdu. Sonuçta bence hiç de fena sayılmaz.

Gereksiz iş yapma.

Hayatımın her döneminde elimde freelance işler oldu. Bu süreçte odağımı dağıtmamak için gelen freelance işleri başka arkadaşlarıma pasladım. Bazen ücret almadan eşe dosta, bazen kendi fikir ve projelerime, bazen de gerçek müşterilerime işler yapıyordum. Bazı işler için isteksiz olsam da hayır diyemediğim için de yapmak zorunda kalıyordum. Açıkcası bugüne kadar yaptığım işlerden hatrı sayılır gelir de elde ettim. Ama işlerin sürdürülemez (yap/sat) gelir kaynakları olmasından dolayı sadece işi teslim ettiğim dönemi, yani günü kurtardılar. Müşteri bazlı yaptığım işleri, tam zamanlı çalıştığımdan ve maaşımdan olmamak için referanslarım arasında bile gösteremedim.

Başkalarına sırtımı yaslamalı mıyım?.

Öğrendiğim en önemli şey bu oldu. Birilerine güvenip de iş planınızı ona göre yapıyorsanız karşı tarafta bir aksilik çıktığı zaman sizin de iş planınız aksıyor. Böyle olunca hayallerinizi gerçekleştirmek için başkasına bağımlı hale geliyorsunuz. Benim kendime önerim artık mümkün olduğunca hayallerimin peşinden önce kendi başıma koşmam oldu. Bu ortak iş yapmayacağım anlamına gelmiyor, sadece her zaman bir B planı olmalı. 6 ay kadar bir arkadaşım ile yaptığımız projeler de ilerleyemezken bu tasarım 45 günde yayına girdi!

Şimdi biraz da iş süreci. Phione’ı yaparken şu aşamalardan geçtim.

Fikir?

Market için en uygun fikrin One Page (tek sayfa) tasarım olduğuna kanaat getirmem çok uzun sürmedi. İncelediğim bir çok ThemeForest profilinde ilk ürün olarak genellikle bu tarz sayfalar olduğunu gördüm. Markete alışmak için yapıldığı çok belliydi. Ben de aynı yolda ilerlemeye karar verdim. Maksadım zaten pas atmak ve bu işe bir yerden girmekti. Themeforest üzerindeki örnek one page tasarımları inceledim ve mevcut olan tüm başlıkları tek tek not aldım. Bu başlıklardan sadece yapmak istediklerimi seçtim. Elimde yapılabilecek bir çok fikir de birikmiş oldu. Tabi biraz kendime limit koymak zorunda kaldım bu başlıkları belirlerken, yoksa çok fazla yapılacak iş kalemi olacaktı elimde.

İsim?

Altın oranı bir çok tasarımcı biliyordur. Phi sayısı (1.618) Fibonacci serisindeki rakamların kendinden önceki rakam ile bölündüğünde ortaya çıkan orandır. Çok eski zamanlardan beri eserlerin yapımında kullanılan, günümüzde ürün tasarımları (iPod) logo tasarımları (Apple logosu) ya da film çekimleri gibi yerlerde de kullanılan, doğada da bir çok canlıda olan, insanın görsel açıdan güzel tanımlamasının ortak noktası sayılan (bununla ilgili bir makale okumuştum) bir orandır. (1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89).

http://en.wikipedia.org/wiki/Golden_ratio

Ben de buradan esinle Phi ve dizinin ilk serisinden 1 rakamını kullanarak "PhiOne" ismini çıkarttım. Kafamda zaten "One Page" (tek sayfa) yapmak olduğu için de uyumlu oldu. Fonetik olarak iphone olarak da okunduğunu sonradan fark ettim. Google otomatik tamamlama "phione" ın doğru olmadığını söylüyor 🙂 Çokta sorun etmedim ama. Tabiki phi’yi sadece isimde kullanmadım. Site tasarımının bir çok yerine uygulamaya çalıştım.

Kağıt çizimler:

Bir sayfada olması gerekenler ve isim çıktıktan sonra hepsinin nasıl olması gerektiğini kara kalem olarak sağa sola çizmeye başladım. Bu konuda çok dağınık gittim, nereye ne çizdiğim karıştı. Bir süre sonra bu sürecin işi biraz uzattığını düşündüm ve en mantıklısının Mockup kısmına geçmek olduğuna karar verdim.

Mockupların (taslak tasarımların) hazırlanması:

Mockuplar bir tasarımın temel taşıdır. Eğer işi düzgün bir şekilde tamamlamak, yaptıklarınızı sil baştan yapmamak ve vaktinizi verimli kullanmak istiyorsanız mutlaka projenizi görsel olarak canlandırmanız gerekli. Daha önceleri balsamic mockup ve pencil ile yaptığım çalışmaları bu sefer online tutabileceğim başka bir araç ile değiştirdim. Çünkü iş yerinde öğle aralarında da bu konudan uzak kalmak istemiyordum. Biraz internetten araştırma yaptım ve moqups’ı buldum.Online olarak mockupları tutabileceğim en kullanışlı site burasıydı. Diğer alternatifleri genellikle pahalı olduğu için burası daha cazip geldi. İşin en zorlu kısmını burada geçirdim. Çünkü elimde yapılacak öğeler (alanlar) vardı ama nerede ve nasıl durması gerektiği konusunda henüz karar verememiştim. Burada daha önce karaladığım çizimler ve dribbble, fikirleri bulmam açısından çok işime yaradı. Yapacağım tasarımın neye benzemesi gerektiği konusunda dribbble’dan oldukça beslendim. Her zaman bir tasarımcının zihinsel olarak yediği yemek kaliteli olduğu zaman yaptığı işlerinde kalitesi o oranda artıtığını düşünüyorum. Tabiki yakın arkadaşım Can’dan da bir çok geri bildirim aldım ve bunları mockup üzerinde düzelttim.

Görsel Tasarım:

Tasarımın temeline her zaman yapmak istediğim altın oranı koymak fikri aklımdan hiç çıkmadı yüzden tüm görselleri birbirine bu oranlarla hizlamaya çalıştım. Tasarım süreci normalde benim için zorlu geçiyordu, ama bu sefer daha kolay geçti. Çünkü mockup’ı yaparken nerede ne kullanacağıma dair bir öngörü oluşturmuştum. Renk paleti seçiminde biraz tembellik yaptığımı itiraf etmeliyim. Sevdiğim için direk flatuicolors u kullandım. Ama bir sonraki tasarıma kendi renk paledimi yapabilirim. Bununla ilgilide ufak bir yazı yazacağım.

Tasarımları tamamladığımda yakın arkadaşlarımdan geri bildirim almak istedim.Bu durumda Skype ya da Facebook’un iletişim için yetersiz geldiğini farkettim. Yaptığım araştırmalar sonucu redpen.io ‘yu buldum ve bu araç üzerinden geri bildirim almaya başladım. Tüm tasarımcı arkadaşlarım görsel açıdan kaçırdığım bir çok konuda bana değerli geri bildirimler verdiler. Tasarımcı oldukları için görsele bakış açılarına da güvendim. Mesela typography konusunda baya eksiğim olduğunu gördüm. Hepsini düzelttim.

HTML/CSS/JS:

Öncelikle HTML kısmını yapmakla işe koyuldum. Burada adım adım gitmenin işleri daha da kolaylaştırdığını düşündüm. Aynı bir kazak örmek gibi. yukarıdan aşağıya doğru. HTML yapısı sublime text’de eklenti olan emmet’in yardımı ile yaptım. En sıkıcı kısmı bence galeriyi yapmak oldu. Resimleri tek tek kesip biçip düzenlemek baya vakit alıyormuş. bu kısmı dribbble dan çekerek işimi kolaylaştırmaya karar verdim. Sonra sayfa içinde class isimlerini daha önce kendi yazdığım htmltocss ile HTML içinden hızlıca ve kolayca çıkarttım ce CSS kodlarını Stylizer’a aktardım.

CSS de görsel kısmını hazırlamaya başlamıştım artık. Bir süre sonra Stylizer da yetersiz gelmeye başladı (bazı CSS3 komutlarını için hatalar veriyordu) ben de tamamen Sublime Text e geçiş yaptım.

CSS ile animasyonlar kısmında animate.css den destek aldım, bazı yerde codrops‘dan da örnekler baktım.

Resim olarak yaptığım iconları font awesome ile yeniledim ve gerekli jQuery kütüphanelerini Google ve Stackoverflow.com dan yardım alarak aktif etmeye başladım.

Sayfam artık oluşmaya başlamıştı ve hareketlendikçe içim daha da bir heyecan olmaya başladı.

Testler:

Tamamlanan tasarımı daha küçük ekranlar ve IE için tekrar optimize ettim. responsive.css dosyası oluşturarak düzeltmeleri buraya yazdım. Yardımcı olsun diye de HTML5’i desteklemeyen bir js yi IE8 için sayfa içerisinde çağırdım. Responsive konusunda bana Resizer eklentisi çok yardımcı oldu. Tabiki yine bu aşamada da arkadaşlarımdan birçok geri bildirim aldım.

Logo

Yaptığın işin adını en baştan koymuştum. Ona uygun bir şeyler yapmak istedim. Açıkçası burada biraz basit olsun istedim. Tamamen altın oran olan bir dikdörtgen kullandım. Alt kısmına da ismini yazdım. İlk işim için idare eder diye düşündüm.

Banner

Banner’ı yapmak en keyifli süreçlerden bir tanesiydi. Tabi ki marketteki diğer banner’lara bakarak genel bir kanı oluşturdum. Solda ürün özellikleri, sağda ise ürünün farklı cihazlarda kullanılmış görselleri kullanmak ürünü daha iyi tanıtabilmem için en mantıklı seçenek gibi durdu. Banner’ı yaptıktan sonra yine arkadaşlarıma göstererek geri bildirim almaya devam ettim.

Açıklama yazısı

Proje ilerken aklıma gelen tüm özellikleri evernote ile kayıt ettim. Böylelikle hem site içerisinde kullanacağım şeyleri elde ettim hem de açıklama yazısı için bir taslak sahibi oldum. Zamanla örneklere bakarak daha da düzenledim. Yazıyı tamamladığımda son düzenlemeleri envatitor ile yaptım. Themeforest uygun bir kod yapısıyla HTML görüntüleyebiliyordu.

Ürünü gönderme vakti geldi (gibi sanki)

Siteyi online adrese aldım ve ThemeForest için gönderilecek olan tüm dosyaları “zip” formatında sıkıştırdım, yazımı yapıştırdım, logo mu ve banner’ı ekledim. Duamı ettim ve gönderdim.

Bekleme süreci oldukça heyecanlı geçti. Çünkü bir işi tamamlamış olmanın vermiş olduğu keyif apayrıydı. Sonra eğer ki Themeforest kabul etmezse başka bir satış kanalıyla yine satarım diye düşündüm.

Soft reject

Gelen bir mail ile hayallerim suya düşmüş gibi hissettim. Onca emek boşa mı gitmişti? Mailde açıklayıcı bir şekilde 3 madde den bahsedilmişti.

1- Javascript te “use strict” kullanmam gerektiği
2- Bir dökümantasyona sahip olması gerektiği (!)
3- Gönderdiğim görselleri kaldırıp onların yerine placeholder kullanarak boş resimler oluşturmam. (Lisans sorunu çözmek içim)

Tüm sorunların çözüm basitti tabi biraz vakit alacaktı.

Javascript de “use strict” yazdığımda bazı scriptler çalışmamaya ve hata vermeye başladı. Bende yenileriyle değiştirdim. Sorun çözülene kadar deneme yanılma yaptım.

Place holder konusu ise basitti. Resim adresleri yerine https://placehold.it/350×150 gibi bir adres girdim. Buradaki rakamlar görselin boyutu.

Dokümantasyon konusunda daha önce arkadaşlarım uyarmıştı ama nedense göz ardı ettim. Sonra yine kabak bana patladı. Saolsun SuitThemes de Uğur’dan bu konuda büyük destek aldım. İsteyenler içinde bu adresten dokümantasyon sürecinde destek alabilirsiniz.

Ve sona geliyoruz

Artık her şey hazırdı. Gönderilecek dosyaları son kez kontrol ettikten sonra gördüğüm bazı hatalarını giderdim ve onay için tekrar gönderdim.

Cumartesi akşam göndermeme rağmen yaklaşık 6-7 saat sonra (pazar sabah 9) ürünüm marketteydi.

Phione

İnanılmaz bir mutluluk. 🙂 Bu yolda giden herkesin bunu yaşamasını istiyorum. Başarmış olmanın verdiği keyif sizi hayata, mesleğinize daha çok bağlıyor. Burada önemli noktalardan birisi motivasyonun artık para ve maddi kazanç olmadığı öğrenmem oldu.

Sizi 3-5 dolar motive etmez ama bu dünyada birşeyler yaparak yol almak apayrı bir tat verir.

Unutmadan Yaptığınız işi kimseye gösteremiyorsanız yapmanızın ne anlamı var?

Sonraki projelerde görüşmek üzere.

https://lab.mustafasarac.com/phione/