Son zamanlarda web tasarımlarında en çok kullanılan separator çeşidi, shape divider’lar.

Bu makalede kolayca shape divider ekleyebilmenize olanak tanıyan shapedivider.app‘den bahsedeceğim ve bu uygulama hayatımızda yokken yaşadığımız sorunlardan bahsedeceğim. 🥲

❓Separator / Divider Nedir ?

Websitesi tasarımlarında iki section’ı birbirinden ayırmak için kullanılan yapılara, separator veya divider denir.

🤨 Yaşadığımız Problemler Nelerdi ?

UI tasarımlarda çokça gördüğümüz shape divider’ları tasarım dosyasından kesip PNG formatında, kullanıyorduk.

• Resim PNG olduğu için farklı ekran çözünürlüklerinde (responsive) bozulmalar oluyordu.
• PNG resimlerin pixel pixel gözükmesi divider’ın görüntüsünü bozuyordu.

🤓 shapedivider.app Problemlere Çözüm Üretebildi mi ?

• Artık UI tasarımlarda gördüğümüz shape divider vb. divider yapılarını PNG olarak kaydedip işlem yapmamıza gerek kalmadı. Şekli oluşturduktan sonra SVG olarak kaydedip kullanabiliyoruz.
• Resim SVG olduğu için görüntünün pixel pixel gözükmesi sorunu ve farklı ekran çözünürlüklerinde (responsive) yaşadığımız problemlere elveda demiş oluyoruz.

📚 Uygulamanın Kullanımı

• https://www.shapedivider.app/ adresine gidilir.
• Oluşturmak istediğiniz şekil ile alakalı detaylar seçilir ardından arayüz üzerindeki Download ikonuna tıklanır.
• Açılan pencerede SVG ve CSS kodları verilmiş, bir de önemli bir not var; SVG elementini bir wrapper (kapsayıcı) içerisine almamız ve

position: relative;

niteliğini eklememiz gerektiği yazıyor.

🎥 Video Eğitim

Bu makalenin video eğitimine Didem’in YouTube Kanalı üzerinden ulaşabilirsiniz;

https://medium.com/media/36dcf142ce5b3a6af0f04e7dbe73361e/href

Sonuç

shapedivider.app uygulaması UI tasarımı frontend’e kodlarken hayatımızı kolaylaştıran ve en önemlisi de tasarım programlarında şekli tasarım dosyasından çıkarmak için harcadığımız zamanı bize geri veren, zaman tasarrufu yapmamızı sağlayan güzel uygulamalardan bir tanesi.

📬 Geri bildirim

Yazı ile ilgili tavsiye, öneri, eleştiri ve düzeltmeleri dikkate alıyorum. İletişime geçmek isterseniz bana Linkedin üzerinden ulaşabilirsiniz.

Sevgiyle kalın, Yasin 🤗