Web tasarım araçları

Bu yazımda web tasarım meraklıları için bu süreçte sizlere yardımcı olacak ücretli ve ücretsiz web tasarım araçları hakkında bilgiler vermeye çalışacağım. Başlangıç olarak bir web siteye ihtiyacınız olduğunu ancak web tasarım sürecini bireysel olarak gerçekleştirmek veya süreç hakkında bilgi edinmek amacında olduğunuzu varsayalım.

Öncelikle her işte olduğu gibi sizin de bir kimliğe ihtiyacınız olacak. Peki nedir bu kimlik? Web dünyasında siz temsil edecek olan isminiz; alan adı (Domain)’dır.  

 

Alan Adı

Kısaca anlatmak gerekirse alan adı (Domain) sizin markanızı veya kimliğinizi temsil etmeye yarayan bir araçtır. Alan adı için yapılabilecek en doğru tanımlardan biri de “sitenizin adı ve adresi” şeklinde yapılan tanımdır çünkü kullanıcılar sitenize domain adınızı kullanarak ulaşır. 1 ve birkaç yıllık olarak satın almanız mümkün olup, bazı ücretsiz alan adlarından da faydalanabileceğinizi hatırlatmak isterim. 2022 yılı domain fiyatları değişkenlik göstermekle birlikte ortalama olarak 10$-15$ dolar arası fiyatlandırılmaktadır. Aşağıda ücretli ve ücretsiz alan adı alabileceğiniz adresleri paylaşıyorum.

 

Ücretli alan adı alabileceğiniz adresler;

• Godaddy
• İsimtescil
• Natro
• İhs
• Guzelnet vb…

Ücretsiz alan adı alabileceğiniz adresler;

• Dot.TK
• Dot.ML
• Dot.GA
• Dot.CF

 

Yazının devamında ilk aşama olan domain kaydını gerçekleştirdiğinizi ve artık bir web siteye ihtiyacınız olduğunu düşünerek web tasarım araçları hakkında bilgi vermeye devam ediyorum.

 

Web Tasarım Araçları

“Tasarım her şeyden önce gelir”

Kendinizi yansıtacak bir alan adı buldunuz ve satın alarak artık web sitenizin tasarım aşamasına geçtiğiniz varsayalım. Bu aşamada en önemli madde tasarımınız sizi yansıtacak kimliğiniz olduğu için üzerine oldukça düşünerek profesyonel bir çalışma ile hazırlanmış olması gerekmektedir. Örnek vermek gerekirse dünyanın en lezzetli pastasını ürettiğinizi ancak bu pastayı paramparça veya bozuk şekillerle servis ettiğinizi düşünelim. Sanırım sizede çok iştah açıcı gelmedi değilmi. Bu noktada önemli olan her fikrinizi ve ürününüzü oldukça iyi anlatarak iştah açıcı ve doğru bilgilendirmeyle sunmanız gerektiğidir. Öncelikle benimde kullandığım bazı yöntemlerden bahsetmek istiyorum. 3 kategoride bunu sıralayabiliriz. Fikir, materyal ve tasarım.

 

1) Web tasarım fikrini yansıtmak;

Bu aşamada 2 adet boş sayfaya ihtiyacınız olacak. Birinci sayfaya sizi en iyi yansıtacak olan fikirleri ve özellikleri sırasıyla yazınız. İkinci sayfaya ise yerleşimi belirleyebilmek adına sırasıyla bu listeyi kutucuklar halinde yerleştiriniz. Örnek vermek gerekirse (Çarpıcı bir slogan + avantajlarınız + deneyim ve tecrübeleriniz)

 

2) Materyal kullanımı

Bir önceki aşamada belirlemiş olduğunuz tasarım yapısını materyaller kullanarak eskiz halinde tasarlamaya geçiyoruz. Bu sürecin adına wireframe hazırlamak diyoruz. Wireframe oluşturmak için birçok web tasarım aracını ücretli ve ücretsiz olarak kullanabilirsiniz. 

Ancak benim kullandığım yöntem oldukça basit. İhtiyacınız olan bir adet kağıt ve kalem. Bu kağıda kendinizi ve fikirlerinizi yansıtacak alanları materyaller kullanarak çizebilirsiniz. Örnek vermek gerekirse çarpıcı bir slogan için slider materyali, hemen altına sizi kısaca anlatabilmek için bir görsel ve bir içerik metni olarak yer verebilirsiniz. 

Wireframe’de hazır olduğuna göre üçüncü ve son tasarım aşamasına geçerek tasarım sürecini tamamlayabiliriz.

 

3) Web site tasarımının hazırlanması

En önemli noktalardan birine gelmiş bulunuyoruz. Bu süreçte artık fikirlerimizi en doğru şekilde yansıtmaya geçiyoruz. Önceki aşamalarda hazırlamış olduğumuz wireframe şablonunu karşımıza alarak, şimdi bu şablonu nasıl iştah açıcı hale getirebiliriz bunu düşünmemiz gerekiyor. Dilerseniz bu aşamada örnek olarak öncesinde hazırlanmış bir kaç web siteyi inceleyerek tasarımınız hakkında fikir sahibi olabilirsiniz. Ancak sadece fikir sahibi olmanız gerektiğini unutmayalım. Çünkü Tasarım + Özgünlük = Başarı prensibine sadık kalmalıyız.

Hazırsak web tasarımda kullanılacak tasarım araçları listesine kısaca bir bakalım;

Ücretli ve ücretsiz olarak benimde kullanmakta olduğum, bir çok web tasarım aracı hakkında bilgi alabileceğiniz bir listeyle başlayım.

 

Ücretli web tasarım araçları;

• Adobe Photoshop
• Adobe XD
• Sketch

 

Ücretsiz Web Tasarım Araçları

• Marvel
• Figma
• Justinmind

 

Şimdi sırasıyla ücretli ve ücretsiz web tasarım araçlarını inceleyelim.

 

Ücretli Web Tasarım Araçları;

 1) Adobe Photoshop web tasarım aracı;

Benimde yıllardır kullandığım web tasarım denince aklıma ilk gelen ve alışkanlıklarımın başında yer alan programdır kendileri. Üzerine birçok web tasarım aracı geliştirilmesine rağmen gerek profesyonelliği gerekse yapabileceklerinizin sınırı olmaması nedeniyle en çok tercih edilen web tasarım araçlarının başında Adobe photoshop gelmekte. Kısaca bahsetmek gerekirse;

Adobe Photoshop, adobe ekosistemini göz bebeklerinden olup, web tasarım ve grafik tasarım konusunda yapabileceklerinizin limitleri olmayan bir tasarım programıdır. Web tasarım mesleğinde bulunan herkesin kullandığı programların başına gelmekle birlikte, Grafik tasarımcılar tarafından da sıklıkla tercih edilen Adobe Photoshop yardımıyla harika tasarımlar hazırlayabilirsiniz.

 

2) Adobe XD web tasarım programı

Adobe XD, diğer Adobe ürünleri kullanmış olan herkesin alışık olduğu bir yapıya sahip. Prototipler ve modeller oluşturmak için vektör tabanlı kullanıcı arabirimi araçları sunar. Ayrıca günümüzde Adobe XD bir çok web tasarımcının odak noktası haline geldi. Adobe XD, Adobe Photoshop ve Illustrator ile eş zamanlı çalışabilmektedir. Bu sayede diğer iki programda yaptığınız tasarımları kolaylıkla Adobe XD’ye taşıyabilirsiniz.

 

3) Sketch web tasarım programı

Web tasarım araçlarında öne çıkan programlardan biride Sketch. Bu program Mac OS işletim sistemli bilgisayarla kullanılabilen bir dijital tasarım uygulamasıdır. Sketch programını kullanıcı arayüzü, mobil, web ve hatta simge tasarımı için kullanabilirsiniz. 

Web tasarım işlerinizde Photoshop’u tercih edenlerden misiniz? Alternatif olarak Sketch’in oldukça yetenekli, sade ve hızlı bir program olduğunu söyleyebilirim. Ücretli bir web tasarım aracı olan Sketch uygulaması için bir kez ödeme yaparsınız ve istediğiniz kadar kullanabilirsiniz. Satın aldığınız lisans bir yıl sürer ve o yıl içinde tüm güncellemelere sahip olursunuz.

Lisansınızın süresi dolduktan sonra uygulamayı kullanmaya devam edebilirsiniz, ancak herhangi bir yeni güncelleme alamazsınız. Bunun için yeni bir lisans satın almanız gerekir. 

 

Ücretsiz Web Tasarım Araçları

1) Marvel

Web sitesi tasarımından, wireframe tasarımına vb. yetenekleri olan çok sayıda web tasarım araçlarından biride Marvel. Birden çok kullanıcının eş zamanlı olarak çalışabilmesine imkan sağlayan Marvel, sade ve kolay arayüzü ile kullanıcıların deneyimlerini en üst düzeyde tutmayı hedefliyor.

Marvel uygulamasıyla herhangi bir dijital platform için bir prototip oluşturabilirsiniz. Web siteleri, uygulamalar, wireframeler veya tasarımla ilgili herhangi bir konuya ilgileniyorsanız, Marvel uygulamasını incelemenizi tavsiye ederim.

Bu uygulama kullanıcı arayüzü uyumluluğu (UX) ve kullanıcı deneyimini (UI) çalışmalarınızda size oldukça kolaylık ve hız kazandıracaktır. Uygulama kısmen ücretsiz olmakla birlikte , Ücretsiz sürümde 1 kullanıcı, 1 test ve 1 proje oluşturma imkanı bulunmaktadır.

 

2) Figma

Figma, işlevsellik ve özellikler açısından Sketch’e benzeyen, ancak birden çok kullanıcı ile birlikte işbirliği içinde çalışabileceğiniz, bulut tabanlı bir tasarım aracıdır .Figmaya çekimser yaklaşanlar için, tasarım sürecini basitleştirdiğini ve tasarımcıların ve ekiplerin birlikte verimli çalışmasına yardımcı olmada diğer programlardan daha etkili olduğunu vurgulamak isterim.

Figma, web tarayıcılarında  çalışabilen online bir web tasarım aracıdır. Bu nedenle tüm işletim sistemlerinde sorunsuzca çalışır. Mac’ler, Windows PC’ler, Linux makineleri ve hatta Chromebook’lar da Figma’yı kullanabilirsiniz. 

Figma tarayıcı tabanlı olduğundan, ekipler Google Dokümanlar’da olduğu gibi işbirliği yapabilir . Bir dosyayı görüntüleyen ve düzenleyen kişiler, uygulamanın üst kısmında dairesel avatarlar olarak gösterilir. Her kişinin ayrıca adlandırılmış bir imleci vardır, bu nedenle kimin ne yaptığını takip etmek kolaydır.

 

3) Justinmind

Justinmind, web tasarımcıların farklı ekran boyutları ve cihazlarla uyumlu tasarımlar oluşturmasına imkan sağlayan bir uygulama geliştirme platformudur. Görsel tasarımlar, web etkileşimleri ve mobil tasarım özellikleriyle kullanıcı deneyimini iyileştirmeyi kolaylaştırır.

Justinmind’in özellikleri arasında önceden yüklenmiş kullanıcı arayüzü tasarımları, eskiz entegrasyonu, animasyonlar, geçişler, efektler, şablonlar, formlar ve veri listeleri, ortak çalışma, uygulama testi, akış senaryosu yönetimi ve daha fazlası bulunur. 

Dışa aktarma ve belgeleme araçları, kullanıcıların standart belgeler oluşturmasına ve HTML’ye dışa aktarmasına olanak tanır. Ayrıca bu uygulama, tasarımcıların bir tıklamayla kullanıcı arayüzü tasarımını yayınlamasına ve ortak çalışan tasarımcılara geri bildirim göndermesine imkan sunar.

 

Yukarıda listesini vermiş olduğum web tasarım araçlarını kullanarak bir web site tasarımı oluşturduğunu varsayalım.  Şimdi bir sonraki süreç olan “Front end kodlama” aşamasına geçiyoruz.

 

Front End Kodlama

Bir önceki aşamada bahsettiğim web tasarım araçlarından sonra sıra geldi Front end kodlama araçlarına. Peki Front end kodlama nedir.

Front end kodlama nedir?

Front end kelimesinin türkçe karşılığı “Önyüz” dür. Kısaca bahsetmek gerekirse Front end kodlama HTML + CSS + JS dillerini kullanarak kodladığımız, bir web sitesini ziyaret ettiğinizde karşınıza çıkan sonuçtur. Bir diğer anlatımda ise, web sitesini kullanırken gördüğünüz her şey; HTML, CSS ve JavaScript’in, kodlarının web tarayıcı tarafından işlenerek ekranınıza yansıyan bütüne Front end denebilir.

Front end kodlaması yaparken kullandığım ücretli ve ücretsiz web tasarım araçları listesini aşağıda paylaşıyorum.

 

Ücretli Front end web tasarım araçları;

• Adobe Dreamweaver
• MS Visual Studio Code

 

Ücretli Front end web tasarım araçları;

• Sublime Text
• Notepad+

 

Bu web tasarım araçlarının genel çalışma mantığı aynı olup benim sıklıkla kullandığım gerek hız ve gerek eklentileri ile birlikte fark yaratan Sublime Text’tir.

Sublime text ücretsiz olmakla birlikte bilgisayarınızda çok fazla yer işgal etmez aynı zamanda işlerinizi kolaylaştıracak olan onlarca eklenti kurulumuna imkan sunar. 

 

Front end kodlama konusunda gerekli ders ve eğitimleri internet üzerinden kısa bir araştırmayla rahatlıkla bulabilirsiniz. Örnek vermek gerekirse içeriklerini oldukça beğendiğim Tayfun Erbilen’in youtube üzerinde eğitim videoları yayınladığı “Prototurk” kanalını ziyaret edebilirsiniz. Linki buraya bırakıyorum.

 

Bahsetmek istediğim önemli bir konu ise Backend kodlama. Bir web sitesinin Front end kodlanmış halini statik bir web site olarak kabul edelim. Bu web sitenin yönetilebilir yani dinamik olması için Backend kodlamasının da yapılması gerekmektedir. Fakat bu üzerine düşülmesi gereken bir konu olduğu için şimdilik bunu pas geçiyor ve bir sonraki Backend kodlama yazımda bunun üzerinde durmak istiyorum.

 

Front end kodlama kısmınıda hallettiğimizi düşünerek, bir sonraki aşama olan web sitemizi yayına almaya geçebiliriz. 

 

Hosting (Web Site Barındırma)

Hosting Nedir?

Bir web sitesi, web uygulaması veya hazırlamış olduğunuz çalışmayı yayınlamak için ihtiyaç duyduğunuz alana hosting denir. Örnek vermek gerekirse bunu bilgisayarınızdaki diske veya cloud uygulamalarına benzetebiliriz. Hosting hizmeti temelde internete bağlı bir sunucu bilgisayarının üzerindeki depolama diskini kiralayarak içeriklerinizi internet ortamında barındırmanıza imkan sunan hizmet türüdür.

Aşağıda hosting hizmeti sunan türkiye lokasyonlu firmaların bir listesini paylaşıyorum.

1. Güzelnet
2. İxirhost
3. Turhost
4. Natro vb…

Bu hosting firmaları inceleyerek, size uygun olan paketi seçebilir ve web sitenizi bu firma üzerinde barındırmaya başlayabilirsiniz. Paketler aylık ve yıllık olarak değişmekle birlikte fiyatlar genel olarak dolar kuru üzerinden fiyatlandırıldığı için değişiklik göstermektedir.

 

Genel olarak web tasarım sürecinde kullanacağınız web tasarım araçları hakkında oldukça sade bilgiler vermeye çalıştım. Bu süreçte profesyonel bir destek almak isterseniz “Web Tasarım Fiyat Teklifi” alabilir veya benimle İletişime geçebilirsiniz.

 

Umarım sizler için faydalı olmuştur. Kalın sağlıcakla.