Tek Bir Ön Uç Mühendisi İki Kişilik Bir Ekibi Nasıl Değiştirebilir?

İki Akılla Düşünmek

Web tasarımı sahnesindeki talep son birkaç yılda değişti: ön uç becerilerine sahip tasarımcılar ve tasarım becerilerine sahip ön uç geliştiriciler giderek daha fazla talep görüyor. Evet, işlerin tamamen farklı olduğunu iddia edebilirsiniz - ve belki de bunlardan birini sevmiyorsunuzdur - ama doğruyu söylemek gerekirse, serbest web geliştiricisi olarak altı yıl ve tasarımcı olarak on iki yıl boyunca, Her iki rolü de bilen bir ön uç mühendisi olmaktansa, yalnızca bir web tasarımcısı veya yalnızca bir ön uç geliştirici olarak geçinmenin çok daha zor olduğunu öğrendi.

Her iki şapkayı da takmanın birçok avantajı vardır: Yalnızca profesyonel bir bakış açısıyla, daha kolay iş bulabilir ve masaya daha fazlasını getirdiğiniz için daha yüksek ücret talep edebilirsiniz.

Ancak hibrit bir ön uç mühendisi olarak çalışmanın, bilmeniz gereken birkaç dezavantajı ve bunların nasıl aşılacağını da bilmeniz gerekir. Yaratıcı bir tasarımcı olarak, görsel, uzamsal ve algısal bilgilerden, diğer bir deyişle web tasarımında güzel olan her şeyden sorumlu olan “sağ beyninizi” kullanacaksınız. Teknik bir ön uç geliştirici olarak, sağdaki çılgın sanatçınızın mantıklı ve analitik ortağı olan “sol beyninizi” kullanacaksınız.

Ve sadece bir kişi olduğunuz için, bu aynı beyinle aynı anda tamamen farklı iki işte çalıştığınız anlamına gelir ve bu beyniniz için düpedüz kafa karıştırıcı olabilir. Başa çıkamazsanız kaliteli iş çıkaramaz veya tam potansiyelinize ulaşamazsınız. Ayrıca, hibrit bir ön uç mühendislik iş tanımına uymaya çalışan bir serbest çalışansanız, muhtemelen iki kişilik bir takıma (geliştirici ve tasarımcı) karşı rekabet ediyorsunuzdur, bu nedenle aynı zaman diliminde çalışmak zorunda kalacaksınız. kaliteyi korumak. (Tabii ki iki kişilik bir ekip gibi ödeme de alabilirsiniz!)

Beyninizin hangi bölümünü kullanacağınızı ve ne zaman kullanacağınızı bilmek, süreçlerinizi düzene sokmanın ve sıfır hayal kırıklığı ile en iyi sonuçları üretmenin ve son teslim tarihine bol bol zaman ayırmanın anahtarıdır. Sağda veya solda nerede eksik olursanız olun, bu gönderi, ihtiyacınız olan becerileri ve bunları nasıl elde edebileceğinizi anlamanıza yardımcı olacaktır.

Projenizle Tek Gecelik İlişki

Tamam hazır? Harika! Diyelim ki, siteyi özel VPS çözümleri sunan tomurcuklanan bir başlangıç ​​olan miniCloud için tasarlamanız istendi. Nereden başlarsın?

Bir proje üzerinde herhangi bir “gerçek” çalışmaya başlamadan önce, onunla yatmayı severim. Bu, müşterinizin ürünü, hizmetleri, rekabeti vb. hakkında kapsamlı bir araştırma yapmak anlamına gelir. Kısacası, Google'ın canı cehenneme. Bundan sonra, bütün gün projeyi düşünün: Onunla işiniz bittiğinde nasıl görünecek? Akşam yemeğine götürün ve yeni, seksi tasarımınızı göz önünde bulundurarak uykuya dalın. Bu aşamada, size gelen fikirleri yazmak için her zaman hazır bir kalem (veya cep telefonu) bulundurun. Bu tür bir zihin çalışması genellikle sürecinizin temel yönlerini tanımlamaya yardımcı olur.

Yaratıcı Meyve Sularınızın Akışına Bırakın: Tasarım Süreci

Artık oluşturabileceğiniz bazı fikirleriniz olduğuna göre, gerçek tasarım sürecine başlama zamanı. Bu üç adımdan oluşur: 1) taslak, 2) tel kafes ve 3) grafikler. Bu, beynin sanatsal yarısının işini yapmasına ve kalem, kağıt ve Photoshop ile delirmesine izin verdiğiniz kısımdır.

Bu tasarım aşamasında, web sitesinin HTML, CSS ve jQuery kullanarak hızlı bir şekilde yeniden oluşturulması neredeyse imkansız olan bazı yönleriyle delirmemeniz için "geliştirici" tarafınızın sizi kontrol altında tutmasına izin vermeniz çok önemlidir. Tarayıcıyı yeniden icat etmeye çalışırsanız, ön uç geliştiriciniz bunun için sizden nefret edecektir. Ve ön uç geliştiriciniz sizsiniz — hatırladınız mı?

Bu nedenle, web tasarımının en iyi uygulamalarına (ve bazı sağduyulu) rehberlik edin, çünkü arkadaşınızın gelinlik web sitesini yeniden tasarlayarak yeni bir çığır açmanız pek olası değildir. Bu, fantastik ve etkileyici bir tasarım yaratmayı hedeflememeniz gerektiği anlamına gelmez. Ama bunun yerine, mümkün olduğunu bildiğiniz bir şey bulun. Web'i yeniden icat eden projeler genellikle boş zamanlarınızda yapılır ve hiçbir son teslim tarihi kafanızda asılı kalmaz.

1. Kroki : Kare bir kağıt defter ve birkaç kurşun kalemle başlıyorum. Kareli kağıt özellikle harika çünkü onu ızgara tabanlı tasarımlar için kullanabilirsiniz. Daha sonra çiziminizi tel çerçevelere ve en sonunda ızgara tabanlı bir web sitesine çevirdiğinizde hiçbir sorun yaşamayacaksınız. miniCloud için çizimimiz şöyle görünebilir:

Kar, kuşlar ve bulutlar gibi taslaktaki ek detayların benim ertelememin ürünü olduğunu ve tasarım sürecinizin herhangi bir bölümünde zorunlu olmadığını, ancak güzel göründüklerini lütfen unutmayın.

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. Wireframe : Artık sitemizin nasıl görüneceğine dair temel bir fikrimiz olduğuna göre, müşteriye gösterebileceğimiz tel kafesler yaratmanın zamanı geldi. Bunu yapmanın birçok yolu var. Bazı durumlarda, gerek olmadığını düşünüyorsanız, adımı tamamen atlayabilirsiniz. Şahsen, en aşina olduğum araç olduğu için Photoshop'u fikrimi çerçevelemek için kullanıyorum. .EPS veya .PSD'de saniyeler içinde başlamanızı sağlayan birçok ücretsiz tel kafes kiti vardır, bu nedenle tüm öğelerinizi sıfırdan oluşturup çizmenize gerek yoktur. Photoshop'tan kaçınmak istiyorsanız birkaç çevrimiçi çözüm de var, ancak ben daha çok çevrimdışı bir adamım. Her neyse, taslağımızı genişleterek web sitemizi şu şekilde tel çerçeveleyebiliriz:

1. Grafikler : Bu benim en sevdiğim kısım: tel çerçevemizi güzel bir web sitesine dönüştürmek. Ama herkes ben değilim. Öncelikle bir geliştiriciyseniz ve tasarım, renkler, tipografi vb. konusunda neredeyse hiç yeteneğiniz yoksa, tasarım ilhamı için diğer web siteleriyle başlamanızı öneririm. Birçoğu var ve harika fikirlerle kaplılar - kim bilir, belki de ortaya çıkmayı bekleyen bir tasarımcı var? Özellikle iyi görünümlü veya iyi tasarlanmış bulduğum web sitelerinin yer imleri klasörünü tutmayı faydalı buluyorum. Picasso (?) "İyi sanatçılar kopyalar ama büyük sanatçılar çalar" demişti - bu, başka birinin tasarımını alıp üzerine çıkartmanızı yapıştırdığınız anlamına gelmez. Bunun yerine, başka birinin çalışmasından ilham alın ve ona kendi dönüşünüzü ve yaklaşımınızı ekleyin.

Tüm tasarımlarımı Photoshop'ta yapıyorum. İdeal olarak, müşteriniz size yer tutucular yerine kullanabileceğiniz fotoğraflar ve kopya metinler gibi üzerinde çalışabileceğiniz ham maddeler sağlayacaktır. Revizyonlara gönderdiğinizde çok daha iyi görünüyor.

 So, for step three, we take our wireframe and bring it to life: 

Bu arada: Photoshop'u kullanmayı bırakırsanız, eklentiler ve stiller gibi işleminizi çok daha hızlı hale getirecek pek çok harika kaynak var. Sadece onlar hakkında bütün bir yazı yazabilirim, bu yüzden sık kullandığım birkaç tanesine işaret edeceğim.

1. CSS3Ps : Katmanlarınızı CSS3'e dönüştüren ücretsiz bulut tabanlı Photoshop eklentisi.
2. Divine Elemente : Doğrudan PSD'lerinizden WordPress temaları oluşturur. WordPress projenize hızlı bir şekilde başlamak için harikadır. “HTML Becerisi Gerekmiyor” demelerine rağmen, harika sonuçlar elde etmek istiyorsanız aslında bazılarına ihtiyacınız olacak.
3. İnce Desenler : Tasarımlarınızda, genellikle arka plan olarak kullanmak için ücretsiz desenler koleksiyonu. Tasarımlarınızı iyiden harikaya taşımaya çalışırken, bunun gibi ayrıntılar tüm farkı yaratır.

“Dilimleyin”: Ön Uç Süreci

Tasarım aşamasını bitirdikten ve mutlu müşteriden bir OK aldıktan sonra, statik resimlerimi canlı web sitelerine dönüştürmeye hazırım. Unutmayın, bu noktada tasarımımız hala sadece şudur: bir tasarım. Web için hazır olmadan önce gitmemiz gereken bir yol var.

Bu aşamada, beyninizin sol, daha analitik yarısını kullanmanın zamanı geldi.

Web tasarım dünyasında bu işleme “dilimleme” diyoruz. Terim bir süre önce daha doğru olsa da, CSS web'in ana görsel yapı taşı haline gelmeden ve PSD veya PNG'nizin her küçük parçasını kesip korkunç küçük tablolara koymanız gerekmeden önce, etrafta takılıp kalıyordu.

Bir web tasarımcısıysanız ve henüz nasıl 'ön uç' yapacağınızı bilmiyorsanız, şanslısınız çünkü kodlama öğrenilebilir (tasarım için doğal bir ustalığa sahip olmanın aksine). Lynda.com gibi bazı çevrimiçi video eğitimlerine yatırım yapmanızı ve ön uç geliştirme temellerini gözden geçirmenizi tavsiye ederim. (Daha kesin bir kaynak listesi burada bulunabilir.) Birkaç saat içinde, sıfırdan kodu okumaya gideceksiniz. Ve birkaç gün içinde, kendin yazacaksın. Ve birkaç ay içinde HTML ve CSS ustası olacaksınız - o zaman iş ön uç mühendislik işlerine geldiğinde sizi durduracak bir şey yok.

Şimdi, rahat edeceğiniz bazı ızgaralara göre bazı harika tel çerçeveler (önceki aşamada) oluşturduysanız, sitenizin nasıl kodlanmasını istediğinizi tam olarak bileceksiniz. En hızlı yol, Bootstrap gibi bir tür ön uç çerçeve kullanmaktır.

Izgara tabanlı tasarıma alıştıktan sonra, web sitenizin her bölümünü bir dizi satır ve sütun olarak görmeye başlayacaksınız. HTML yapımı ayarlarken, herhangi bir gerçek içerik veya CSS eklemeden önce yaptığım ilk şey, satırlara, ardından sütunlara, ardından gezinme gibi temel şeyler, ardından metin ve görüntü yer tutucuları yazmaktır. Bu, önce temel yapıyı indirmenize ve oradan inşa etmenize olanak tanır. Bu tel kafese baktığımızda altı sıra görebiliriz:

1. Logo / Navigasyon
2. Görüntü kaydırıcı
3. giriş metni
4. Kategori resimleri
5. En son haberler / teklifler
6. altbilgi

Bunları Bootstrap'ın HTML yapısına yerleştirdikten sonra şöyle bir şey elde ederiz:

Birçok temel web sitesi aynı (veya benzer) kodu kullanır ve gittikçe daha fazla proje üzerinde çalışırken, web sitesi geliştirmenin büyük ölçüde yinelemeli bir süreç olduğunu ve her yinelemede aynı kodu yazmanın bir anlamı olmadığını göreceksiniz. . Bu yüzden çerçeveler yararlıdır! Kendinizinkini oluşturmuş veya Bootstrap veya Foundation kullanmaya karar vermiş olmanız fark etmez. Önemli olan, daha sonra koruyabilmeniz ve gerekirse genişletebilmenizdir.

Bir proje için ihtiyacınız olan hemen hemen her şey daha önce yapılmış ve daha sonra birkaç kez yeniden yapılmıştır. Bu nedenle, herhangi bir önemli görev için, bir duvardan karşıya geçmeden önce etrafı araştırın ve başkalarına önerileri olup olmadığını sorun. Büyük çerçevelerin çoğu, işinizi kolaylaştırmak için ek kodlar ve eklentiler oluşturan çok aktif topluluklara sahiptir. Bu yüzden çok değil akıllıca çalışın ve her gün öğrenin. Ve daha önce kimsenin inşa etmediği bir şeye ihtiyacınız varsa, o zaman yeni bir çığır açıyorsunuz! Bu konuda yazın ve toplulukla paylaşın; bir tasarımcı ve geliştirici olarak büyümenize yardımcı olacaktır.

CMS seçme

Bazı ön uç mühendislik projeleri için, tasarımınız canlı bir web sayfasında var olur olmaz işiniz tamamlanmış olacaktır. Bunlar genellikle daha küçük sitelerdir (örneğin, küçük işletmeler, avukatlar, diş hekimleri vb. için). Ancak çoğu zaman siz veya müşteriniz web sitesinin içeriği üzerinde kontrol sahibi olmak isteyeceksiniz. Bu durumda, bir İçerik Yönetim Sistemine (CMS) ihtiyacınız var. Bir CMS'nin amacı, her yeni ayrıntıyı elle kodlamak, hatta kodlamak zorunda kalmadan bir web sayfasında içeriği düzenlemenize ve yayınlamanıza izin vermektir.

Tüm büyük CMS'ler arasında kendime bir WordPress Evangelisti diyebilirim: Çok yönlülüğü, kullanım kolaylığı, geliştirme için kapsamlı belgeler, geniş topluluk, çok sayıda ücretsiz eklenti nedeniyle diğer geliştiricilere, özellikle yeni başlayanlara övgüler yağdırıyorum. ve saire, ve saire…

Birisi size Joomla! özellikle daha küçük projeler için daha iyidir - o zaman ne hakkında konuştuklarını bilmezler. Her neyse, sadece benim sözüme güvenmeyin: WordPress ve Joomla'yı indirin! başlangıç ​​temaları, her klasöre bir göz atın ve ardından kendinize sorun: yeni ön uç rolünüzde hangisini keşfetmek istersiniz?

Bu konu hakkında yazmak için koca bir makaleye ihtiyacım var ama bu konuda bana güneş kremi konusunda Baz Luhrmann'a güvendiğiniz gibi güvenin.

Projeniz özellikle küçükse ve herhangi bir kodlama becerisi olmadan uygulanabilecek basit bir CMS'ye ihtiyacınız varsa, CouchCMS kullanmanızı tavsiye ederim. Sadece birkaç XHTML etiketi ile dakikalar içinde çalışır duruma getirebilirsiniz ve büyükanneniz bile nasıl kullanılacağını bilir.

Web Sitenizin Bakımı

Web sitenizi teslim ettikten ve memnun bir müşteriniz daha olduktan sonra, yapmanız gereken tek şey siteyi korumaktır. Yeni içeriği olmayan basit bir HTML sitesi oluşturduysanız, muhtemelen işiniz bitmiştir.

Bir CMS kullandıysanız, herhangi bir güvenlik ihlalinden kaçınmak için teknolojinin her zaman güncel olduğundan emin olmanız gerekir. Buna, CMS'nin kendisi ve kullandığınız tüm eklentiler dahildir. Tavsiyeme uyup WordPress kullandıysanız, mevcut her güncelleme için e-posta ile bilgilendirileceksiniz.

Bu benim sürecimin basketbol sahası. Elbette bu herkes için geçerli olmayacak ve kesinlikle her proje için geçerli olmayacak. Ama umarım bu, siz tasarımcıların harika ön uç mühendisleri olmak için ihtiyaç duyduğunuz becerileri kazanmanıza yardımcı olur ve tam tersi, böylece ön uç geliştiriciler olarak yeteneklerimizi geliştirmeye devam edebiliriz.

Sana sadece kapıyı gösterebilirim. İçinden geçmesi gereken kişi sensin. - Morpheus, Matrix

Not: Yukarıdaki şablonun bir PSD'sini ve diğer harika tasarımları dribbble portföyümde bulabilirsiniz.