Ozozo.com

Ozozo.com‘da tüm alışveriş sitelerindeki ürünleri karşılaştırmak için bir site yaptık. Front-end ve back-endci arkadaşlar siteyi baştan sonra büyük bir titizlikle planladılar. Her adımında kullanıcıların neyi nasıl görmek istediğini tartışarak geliştirdik ve ortaya çıkardık. Ellerimize sağlık gerçekten kullanışlı ve hızlı bir site oldu. Üretim aşamasında alt kategorilerin, detay sayfaların nasıl dizayn edileceğini ve sonra hangi sitelerden nasıl ürün çekeceğini birerbirer tasarladılar. Ozozo.com‘un genel karşılaştırma sitelerinden bir fazlası da hızıdır. Ozozo.com bir fiyat karşılaştırma sitesi Fiyat karşılaştırma sitesi Alt kategoriler Ürün karşılaştırma sistemi Ürün detay sayfası

Css3 UI Kit

Pure Css3 kodları ile güzel bir UI kit oluşturabilirsiniz. Css3 neye mi yarar? İşte bu kodlarla tüm web sayfanızdaki elementleri tek bir hamlede hem browserlara uygun, hem de güzel bir şekilde gösterebilirsiniz. (Not. Her browserda aynı şekilde görüntülenmez, güncel browserlarda daha çok verim alırsınız. Bu aklınızda bulunsun.) Sitenize girenler güzel bir arayüzle karşılaşırlar. Kaynak dosyanın kodlarını aşağıdan indirebilirsiniz, html dosyası ile güzel bir arayüze sahip olacaksınız. Tabi bu sadece html dosyası ile yeterli değildir. Css için style ve javascript için jquery’nin damarlarındaki kandan yararlanılmıştır. Dökümanın içinde html içinde verilen linkleri gözden geçirdiğinizde style.css ve jquery.min.js linkleriyle karşılaşacaksınız. Bilmiyorsanız panik yapmayın, kodlar zaten…

Login Box örneği

PSD’den html ve css kod örneğini bulabileceğiniz bu kullanıcı (giriş=login) formunu nasıl koda döktüğümü görebilirsiniz. Html, css’ini inceleyebilirsiniz. Artık sitelerde responsive formlar günümüzün teknolojisine uygun daha rahat ve akılcı kullanıma yönelik tasarımlar sunuluyor. Siteler bu hızlı gidişe uyamıyor. Bu form responsive özellikleri taşımıyor fakat kullanıcılarınızı güzel bir form’la karşılamak isterseniz istediğiniz gibi kullanabilirsiniz. PSD içinde renk değiştirdiğinizde HUE SATURATION katmanı göreceksiniz, o katmanı aktive ederek turuncu formu .png olarak background kaydedin. Formunuz turuncuya dönecektir, butonuda turuncu yapmayı unutmayın. login-box’ı indirin.  

Navigasyon ve Butonlar

Web araçları için çevre sitelerden yararlanmak size büyük kolaylık sağlayacaktır. Kullanmaktan çekinmeyin ama kendi özgün yaratımınızıda öldürmeyin. Navigasyon ve Butonlar için önemli kaynak oluşturabilecek ve indirilebilir önemli bir kaynağı buradan indirebilirsiniz. Bootstrap materyaller her zaman kullanışlı, bilgisayar, tabler ve mobil dostudur. Web sitesi yaparken responsive özellikte web siteleri yapmak size ve müşterinize büyük kolaylıklar sağlayacaktır.  

Futura ve Helvetica font ailesi

Grafik tasarımcılar için en önemli 2 font ailesi, Helvetica Neu LT ailesi ve Futura LT ailesi işte size tasarımcıların çantasında olması gereken fontlardan ikisi. Yaratıcı fikirler bulurken elinizin altında mutlaka bulunmalı. Yaratıcılık gerektiren işlerin başında fontu nasıl kullandığınız ve onunla ne yaptığınız (tipografi) çok önemli. Helvetica devletler arası bir font’tur ve yazışmalarda, anlaşmalarda, trafikte, uyarı levhalarında ve reklamlarda çokca rastlarsınız. Helvetica kısa hikayesi ise: İsviçreli yazıtipi tasarımcısı Max Miedinger ve Eduard Hoffmann tarafından İsviçreli yazıtipi şirketi Haas’sche Schriftgiesserei (Haas Type Foundry) için 1957 yılında İsviçre’nin Münchenstein şehrinde tasarlandı. İlk adı Helvetia konulacaktı fakat bu isviçre demek olduğu için Helvetica adı konuldu. Futura…

Web tasarımın olmazsa olmazları

Web sitesini nasıl yapmalı ve nereden başlamalı yazısına göz gezdirin, bu yeni başlayanlar için yararlı olacaktır. Tasarıma başlamadan önce sitenizin içine koyacağınız bilgileri toplayın, hakkımızda yazısını oluşturun, ürünlerinizi toplayın, bilgilerini bir text editöründe biraraya getirin koyacağınız fotoğrafları yazacağınız yazı ile aynı ad’la kaydedin iletişimi mutlaka planlayın, size e-mail göndereceklerse, harita koyacaksanız bunların linklerini biraraya getirin ürün detayları verilecekse detay sayfalarını planlayın ve bunları planlarken buradaki genel şablona bir göz gezdirin