Ön Uç Geliştiriciler için Uygulama Projeleri

Diğer beceriler gibi ön uç geliştirme, çok fazla çalışma gerektirir. Bu büyük görevin üstesinden gelmenin çeşitli yolları vardır, bunlardan bazıları:

1. Bir ajansta front-end geliştirici olarak çalışın.
2. Evinizde çalışın ve yan tarafta projeler inşa edin.
3. Müşteriler için serbest çalışan olarak çalışın.

Her birinin kendi pozitif ve negatif yönleri vardır, ancak bir şey sabit kalır - ne kadar çeşitli görevler alırsanız, o kadar hızlı ilerlersiniz.

Bu makalede, yanınızda ve kendi başınıza üzerinde çalışabileceğiniz, yeni teknolojileri, yaklaşımları ve potansiyel olarak biraz “Aha!” Öğrenebileceğiniz birkaç potansiyel projeye bakacağız. ön uç kariyerinizdeki anlar.

Aşağıdaki tüm görevler, özellikle bir ön uç pozisyonu için başvurmaya karar verdiğinizde, GitHub profilinizde olması için oldukça iyi havuzlardır.

Bir not! Aşağıdaki tüm örnekler tasarımcılar tarafından gerçek ürünler için yapılmıştır. Size onları yakalamanızı, kodlamanızı ve istediğinizi yapmanızı önermiyoruz. Bunların tümü, daha sonra dağıtmadan veya satmadan üzerinde çalışabileceğiniz UI öğelerine bir örnektir.

1 - Bileşen UI Kitaplığı

Zorluk: Kolay-Orta.

Yine de "kolay" tarafından yanlış yönlendirilmeyin, çünkü buradaki herhangi bir projede olduğu gibi, hem genç hem de kıdemli bir geliştirici, çözdükleri sorunlara bağlı olarak mücadele edebilir. Bunu kolay ölçeğe yerleştirdik çünkü karmaşık UI öğelerinden oluşmayacak ve her şey kapsüllenebilir.

Açılır menülere / düğmelere odaklanan bunun gibi mevcut bir tasarım seçebilirsiniz:

Kaynak

Ya da Bootstrap ve Foundation gibi daha genel bir programla gidebilirsiniz. Dikkat edilecek noktalar:

• İyi tanımlanmış adlandırma kuralı.
• Bileşenlerin sunumu.
• Değiştiriciler - Çoğu insan küçük unsurları değiştirmeyi sever, bu yüzden bunu nasıl uygulayacağınızı düşünün. Örnek - birincil, ikincil renkler istiyorsunuz; başarı, hata durumları vb.
• "Tak ve çalıştır" olarak kalsın. Amacınız, başka bir geliştiricinin herhangi bir CSS yazmak zorunda kalmadan kodunuzu kullanmasına izin vermektir. Bunu temel bir ızgara sistemiyle de birleştirebilirsiniz.

Böyle bir kütüphanenin iyi bir mimarisi önemsiz bir mesele değildir. Bu aynı görevi kariyerinizin başında ve hatta birkaç yıl sonra deneyebilir ve öğrendiklerinizi karşılaştırabilirsiniz.

2 - Karmaşık Animasyonlar Kullanıcı Arayüzünü Uygulayın

Zorluk: Zor

Bu görev tamamen şık animasyonlar ve performansla ilgili. Ancak bunun yanında, çok genel olmayan bazı görselleri de yazmanız gerekir. Aşağıdaki örneğe bakın:

Tam animasyonu burada görebilirsiniz. Kullanıcı arayüzünü kapattıktan sonra, etkileşimi eklemenin zamanı geldi. Tüm animasyonlar, bir tarayıcıda değil başka bir araçta yapıldığı için tasarıma benzemeyecektir, ancak bu, orijinaline gerçekten yaklaşamayacağınız anlamına gelmez. Elbette, herhangi bir hareket bulanıklığı efektini ve garip şekil deformasyonlarını atlayacağız, ancak geri kalanların çoğu yapabileceğiniz şeylerdir. Ayrıca, her şeyin anahtar karesini oluşturmanıza yardımcı olacak JS kitaplıkları da vardır.

Bu görev, biraz daha kısa tutmak için yalnızca iki ekran geçişi alabilir. Enerjiniz yoksa burada mobil görünümler üzerinde çalışmaya gerek yok.

3 - Bir Oyun Arayüzü

Zorluk: Zor

Başka bir zor görev! Çoğu oyunda, web'de kolayca çevrilemeyen çok benzersiz bir sanat stili vardır. İşleri zorlaştırmak için burada başka bir kural daha var - Kullanıcı arayüzündeki şekilleri elde etmek için herhangi bir resim / svgs kullanmayın.

Kaynak: StarCraft II

Bu amaçla StarCraft 2'yi seçtik. Gördüğünüz gibi, uygulamanızda dikkate almanız gereken bir sürü küçük detay var burada. Nitekim, burada bunu zorlaştıran "varlık yok" kuralıdır. Şekiller, kırpma, gölge büyüsü, degradeler, sınırlar ve daha fazlasıyla çalışmanız gerekecek. Elbette sağdaki portreler ve denizci için resimlere ihtiyaç var.

İşleri daha gerçekçi hale getirmek için, sağ üst dikey kenarlık bir sonraki görüntüdeki en üst satırdan biriyle değiştirilebilir:

Kaynak: StarCraft II

Küçük ekranlarda ve mobil cihazlarda da güzel görünmesini sağlamayı başardıysanız, ekstra puan kazanırsınız! Bu çok "Vay canına!" CV'nize etki projesi.

4 - Bilgi Yarışması Oyunu

Zorluk: Orta

Bilgi yarışması oyunları, yukarıdaki tasarımlardan bazılarına kıyasla oluşturmak çok zor değildir, ancak çalışmaları için bazı JS yazılmasını gerektirirler. Evet, şimdiye kadar sadece CSS tabanlı projelerimiz vardı, bunun için etkileşimli hale getirmeniz gerekir, böylece insanlar tıklayabilir, doğru / yanlış cevapları görebilir ve daha fazlasını yapabilir.

Dribbble'da "Quiz" için bir arama yaparsanız, tonlarca örnek bulabilirsiniz, ancak birini seçmekte zorlanıyorsanız, o zaman şunu yapabilirsiniz:

Kaynak

Gördüğünüz gibi, sadece iki ekran var, bu da geri kalanını yukarıdaki tasarıma göre bulmanız gerektiği anlamına geliyor.

Testin özellikleri:

• Doğru cevapları say
• N seçeneklerinden yanıt
• Tıkladıktan sonra doğru / yanlış cevapları göster
• Soru açılır penceresini bildir
• Tüm testlere geri dönün, bir test seçin
• Sınav bittikten sonra nihai puanı göster

İsterseniz yukarıda bahsedilenlerden çok daha fazlasını yapabilirsiniz. Bu genellikle "bir öğleden sonra" türü bir projedir.

5 - Rastgele Bir Site Seçin ve Yazıcıya Uygun Hale Getirin

Zorluk: Kolay

Baskı için optimize etmenin tuhaf yönleri vardır. Özellikle sitedeki mevcut öğeleri gizlediğinizde, arka planları temizlediğinizde, tipografiyi geliştirdiğinizde, sayfa sonlarıyla çalıştığınızda ve sayfaları biçimlendirdiğinizde.

Bu görev için web'den bir site seçebilir, bir makale sayfası seçebilir ve baskı stilleri üzerinde çalışmaya başlayabilirsiniz. Konuyla ilgili yazılmış uzun makaleler var, bu yüzden size yardımcı olacak çok şey var.

Kullanabileceğiniz örnek web siteleri:

• Bir Amazon satış sayfası - Yalnızca önemli bilgilere odaklanın.
• Kurs satış sayfası - SitePoint'ten.
• Başka bir kurs sayfası

İstediğiniz başka bir siteyi seçmekten çekinmeyin, bunu kendiniz için kolay veya zor hale getirebilirsiniz. İyi bir baskı stili örneği görmek istiyorsanız, https://www.smashingmagazine.com/ adresine bir göz atın, gerçekten başardılar.

6 - Karmaşık Dergi Stili Düzeni

Zorluk: Deli

Bu, zor olmasının yanı sıra aynı zamanda karmaşıktır. Ve yukarıda belirtilen diğer görevlerden herhangi birine kıyasla daha fazla zaman alır, bu nedenle bunun için 20-30 saatten fazla yer ayırmanız gerekebilir.

Kaynak

Yukarıdaki tasarım, Slava Kornilov tarafından The New York Times'ın yeniden tasarımıdır. Bağlantıda, ana sayfanın tamamını sergileyen büyük ekranlar da dahil olmak üzere yaptığı tüm tasarımları göreceksiniz.

Bu projede, bileşenler açısından düşünmeniz, görüntü alanının dışına çıkan video (duyarlı olmaya devam etmesi gereken), tipografi ayarları, üst üste binen öğeler ve daha fazlası gibi bazı karmaşık UI öğelerini biçimlendirmeniz gerekecek.

Üstteki büyük başlığın arkasındaki arka plana bakmak bile, uygulamasının birkaç zor parçasını gizler.

Bir ton öğe tasarladı, böylece isterseniz burada bir veya iki aydan fazla zaman geçirebilirsiniz ve öğrenecek çok şey olur. Belki aşağıda gösterildiği gibi arka planda bir video bile yapabilirsiniz:

Kaynak

Bunun için, uygulanabilecek farklı haber makaleleri için de animasyonlar var. Burada ayrıca mobil görünümleri de düşünmelisiniz.

7 - Gösterge Tablosu ve Grafikleri

Zorluk: Orta-Sert

Gösterge tabloları her yerde. Tasarımcılar akşamları ne yapacaklarını bilmediklerinde, bazen sadece başka bir tane tasarlarlar. Sadece çünkü.
Ve bu sayede seçim yapabileceğiniz çok şey var. Bir noktada muhtemelen gerçek bir ürün için gerçek bir tane oluşturmanız gerekecektir. Ve bu "harika görünümlü" arayüzlerden birini yüklerken hiçbir anlam ifade etmeyen milyonlarca animasyona sahip olacak kadar şanssız olabilirsiniz.

Böyle bir güne hazırlanmak için işte size bir meydan okuma:

Aşağıdaki tasarımı uygulayın:

Kaynak

Burada düşünmeniz gerekenler - Grafikler gerçek olmalı. Gerçek verileri kullanmaları gerekir ve onları en üstte gördüğünüz gibi göstermeye çalışmalısınız. Kullanabileceğiniz birçok kitaplık vardır ve büyük olasılıkla çok fazla genişletmeniz / değiştirmeniz gerekecektir.

İçine bazı animasyonlar eklemeye karar verirseniz, daha da iyi olabilir. Bu bir CV'de çok güzel görünür, değil mi?

Sonunda:

Öğrenmenin ve daha iyi bir geliştirici olmanın en iyi yollarından biri, kod yazmaya ve siteler oluşturmaya başlamaktır. Günlük olarak yapın, sadece bir ton kodlayın! Bu, özellikle kariyerinizin ilk 3-4 yılında faydalıdır.

Arkanızdaki bu deneyimle, daha kıdemli bir rolü kolayca doldurabilirsiniz. Orada tüm bu projelerden edindiğiniz deneyimleri ve bulduğunuz ve üstesinden geldiğiniz sorunları ve sorunları yol boyunca kullanarak kararlar alabilir ve kendi ekibinize etkin bir şekilde liderlik edebilirsiniz.