İçerik
- Kodla tasarım yapmanın faydaları
- Önce veri
- Ücretsiz mobil iyilik
- Ortak bir dil bulmak
- Daha hızlı öğrenin
- Hızlı yineleme
- Daha hızlı başlatma süresi
- Neden HTML5?
- Büyülü veri özniteliği
- CSS3 - bu yeni Photoshop
- Sass + Compass: sihirli derecede lezzetli
- jQuery: oh, evet yapabilirsin
- Çerçeveler
- Son düşünceler
Bu makale ilk olarak web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi olan .net dergisinin 235. sayısında yayınlandı.
Asla gereğinden fazla iş yapmanın büyük bir hayranı olmadım. Metotları ve araçları, beni veya ekibimi daha etkili kılma yeteneklerine göre değerlendirme eğilimindeyim. Bizi çalışan bir ürüne ne kadar çabuk götürürler? İletişimde ne kadar etkililer? Bizim yolumuzdan çekiliyorlar mı?
Yıllar içinde tasarım sürecimi ve araçlarımı yeniden düzenledim. Sanırım bunu yapmaya devam edeceğim. Teknoloji ve web için tasarım yapmanın doğası budur. Bu endüstri sürekli gelişiyor; bizim süreç ve araçlarımızın da gelişmesi gerekiyor.
HTML5 ve CSS3, daha fazla tasarım sürecini yukarı akışa - Photoshop'tan uzağa ve daha çok yaşayan, nefes alan bir tasarıma - geçişi kolaylaştırır. Foundation, Bootstrap ve jQuery gibi araçlar, tasarım sürecinizin çoğunu kodlamaya daha ulaşılabilir hale getirir.
Kodla tasarım yapmanın faydaları
İlk olarak, Photoshop'u veya başka herhangi bir görsel tasarım düzenleyicisini iş akışınızdan çıkarmanızı savunmuyorum. Bunun yerine, bu tasarımı daha sonra koda taşımanın faydalarına odaklanacağım.
Önce veri
HTML ile tasarım yapmaktan her zaman hoşlandığım şey, önce veri perspektifinden düşünmeyi teşvik etmesidir. Buna karşılık, Illustrator, OmniGraffle veya Balsamiq gibi çizim programlarını kullanarak, bir kutuyla başlar ve onu verilerle doldurursunuz.
HTML'de DOM'u (belge nesne modeli), bir tür içindekiler tablosu oluşturmak gibi oluşturursunuz. Anlamlı hiyerarşilerle gerçek bilgi tasarımına dönüş. HTML5, yeni anlamsal öğelerin eklenmesiyle bir adım daha ileri götürür: makale, bölüm, üstbilgi, kenara, altbilgi vb. Bu veri öncelikli yaklaşım, önce mobil, duyarlı tasarımlarla güzel bir şekilde harmanlanır.
Ücretsiz mobil iyilik
Bunu okuyorsanız, muhtemelen mobil cihazlar için tasarlıyorsunuzdur. Ve muhtemelen bir veya iki form tasarlamak zorunda kalacaksınız. HTML5 ile şanslısınız. HTML5'ten önce, girdi türleriniz hemen hemen bir metin veya şifre alanıydı. HTML5, aşağıdakiler de dahil olmak üzere bir dizi ek girdi türü sunmuştur:
giriş türü = "e-posta"> giriş türü = "tel"> giriş türü = "url"> giriş türü = "tarih"> giriş türü = "tarih-saat">
Bu ek, benzersiz giriş türleri hakkında gerçekten harika olan, iOS ve Android'deki mobil tarayıcıların bunları tanıması ve özel bir jQuery eklentisi veya hack gerektirmeden içeriğe duyarlı bir klavyeyi otomatik olarak değiştirmesidir. Oh, ve tarayıcınız ne olduğunu bilmiyorsa giriş türü = "e-posta"> , o zaman varsayılan olarak bir metin girişi olur.
Ortak bir dil bulmak
"Tasarımcılarımızın ve geliştiricilerimizin aynı dilde çalışması harika" - Inflection'ın uygulama geliştiricisi John Drago.
Bunun size tanıdık gelip gelmediğine bakın. Ruby, Python, Java veya .NET'te çevremdeki çemberleri kodlayabilen yarım düzine sunucu tarafı uygulama geliştiricisinin bulunduğu bir konferans odasındayım. Ben tek tasarımcıyım. Önerilerimden birkaçı başlangıçta uygulanamayacak kadar karmaşık olduğu için reddedildi. Beyaz tahtaya doğru yürüdüm ve tasarımın nasıl uygulanacağına dair tahtaya biraz HTML ve CSS yazmaya başladım. Aniden konuşma tonu değişir ve geliştiricilerden biri gönülsüzce "Evet, bu şekilde yaparsak işe yarayabilir" diyor.
Tasarım sürecimin daha fazlasını koda taşımak, geliştiricilerle görüşmeleri iyileştirdi. Tasarımlarınızı kodda nasıl işleyeceğinizi bilerek kazanılan ek bir saygı katmanı vardır. Bu saygıyı kazanmak için uzman olmanıza gerek yok. HTML ve CSS becerilerim çok sağlam olsa da, JavaScript becerilerim en iyi ihtimalle vasat. Ve bunu kabul etmekten çekinmiyorum. Yine de, ön uç veya sunucu tarafı geliştiricilerle çalışırken, ortak bir dilde konuşabilmemiz veya yarı yolda buluşabilmemiz büyük bir avantajdır.
Daha hızlı öğrenin
Tel kafesler ve görsel kompozitler planlamaya yardımcı olabilirken, bu statik yapılar teoriktir. Kaç kez birisine bir etkileşimi açıklamayı denediniz, sadece "Sanırım görmem gerekecek" şeklinde yanıt vermesini istediniz. Bir prototipe ne kadar çabuk ulaşırsanız, insanların etkileşime girebileceği bir şey, tasarımı o kadar çabuk deneyimleyebilir ve fikirlerin işe yarayıp yaramadığını görebilirsiniz.
Hızlı yineleme
Üretime gönderilen son tasarım en son ne zaman Photoshop kompozisyonunuzla tam olarak eşleşti? Neredeyse hiç. Dijital ürün tasarımı ile değişim sürekli gerçekleşir. Ayrıca, başlıklarınızın boyutunu birkaç düzine ekranda 22pt'den 24pt'e çıkarmak gibi değişiklikler Photoshop'ta saatler sürebilir. Akıllı Nesneler, Photoshop'ta size bir miktar nesne yönelimli tasarım sunar. Ne yazık ki, tanıdığım çoğu görsel tasarımcı Akıllı Nesneleri yeterince kullanmıyor. CSS ile, tasarıma daha sistematik bir yaklaşımı teşvik ettiği için tipografik değişiklikler saatler yerine dakikalar alır.
Tüm düğmelerinizdeki doğrusal renk geçişlerini değiştirmeye ne dersiniz? Veya bir sınırın boyutu? Kare köşelerden 2px yuvarlak köşelere geçmeye ne dersiniz? Photoshop'ta bu saatler sürebilir ve yine de kodlamanız gerekir. Kodda tasarım yapabilme yeteneği, görsel tasarımı yinelemek için Photoshop'a geri dönmenin gidişatını önlemeye yardımcı olur. CSS3 ve Sass (bu makalenin ilerleyen bölümlerinde ele alacağım) kullanarak bu değişiklikleri yukarı akış yönünde koda taşıdığınızda, bunlar gerçek zamanlı olarak gerçekleşebilir ve yalnızca birkaç dakika sürebilir.
Daha hızlı başlatma süresi
Yıllar içinde, tasarım iş akışımın çoğunu koda dönüştürdükçe, gerçek bir gelişme yaşadım - pazara sunma süresinde yaklaşık yüzde 20 ila 30 azalma. Bunu ne kadar çok yaparsam, çabaları çoğaltmak için o kadar az zaman harcıyorum. Photoshop veya Fireworks uygulamasına giderek daha az döngü harcıyorum ve ardından çalışmayı kodda tekrar ediyorum.
Bir noktada tasarımın, bir CMS, Rails uygulaması veya başka bir şey olsun, bir tür arka uçla arayüz oluşturması gerekir. Tasarım çalışmalarımın çoğu kodda olduğu için entegrasyon daha erken gerçekleşiyor. Birkaç yıl önce müşterilerimden biri olan PointRoll prototipten üretime beş günde geçti.
Neden HTML5?
HTML5, önceki HTML sürümlerinden daha kolaydır. Örneğin, belge türü bildirimini alın. HTML'nin önceki sürümlerinde, BELGE TÜRÜ şuna benzer bir şeye benziyordu:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Ve altı farklı versiyon vardı. Neyse ki HTML5 BELGE TÜRÜ buna benzer:
! DOCTYPE HTML>
Ciddi anlamda. Bu kadar. Şaşırtıcı derecede basit.
Standart bir HTML sayfası oluştururken, başlık, ana içerik alanı, kenar çubuğu ve altbilgi gibi bir dizi ortak öğe vardır. Eminim daha önce böyle bir şey görmüşsünüzdür:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Orada sıra dışı hiçbir şey yok. Ancak içerikle doldurulduktan sonra bu şablon div çorbasına dönüşür. Bunun aksine, HTML5’in yeni anlamsal öğeleriyle, çok daha basit ve taranması daha kolay bir şey elde edersiniz, örneğin:
üstbilgi> nav> / nav> / üstbilgi> makale> kenara> / kenara> / makale> altbilgi> / altbilgi>
Şuna bak. Mantıklı olan bir şey.
Büyülü veri özniteliği
HTML5, size kendi anlamsal anlamınızı oluşturma olanağı sağlayan başka bir harika kancayla birlikte gelir: veri-. Önceden, bir DOM öğesine anlamlı bir şey atamak istiyorsanız, kimlikler, sınıflar ve rollerle sınırlıydınız.
Maalesef kimlikler benzersiz olmalıdır. Sınıflar evrenseldir (yippee!), Ancak bunları kullanmak hızla bir karmaşaya dönüşebilir. Roller, ARIA için önemli bir anlam sağlayan, yeterince kullanılmamış bir varlıktır. Son zamanlarda Inflection'da geliştirdiğimiz bir olay izleme analiz platformu için verileri kullanıyorum.Tasarımlarımızı test etmenin büyük hayranıyız. Çok fazla etkileşime sahip uygulamalar veya sayfalar üzerinde çalışırken, sayfadaki müşteri etkileşimi hakkında daha ayrıntılı bilgiler elde etmek istiyoruz.
Giriş veri-. Bununla birlikte, bir "kendi anlam modelinizi tanımlayın" anlam modelini atayabilir, aktarabilir ve bu modele bağlanabilirsiniz. Yani, örneğin, bunu yapabilirsiniz:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "buton" data-id = "twitter" dataregion = "ana" data-event = "kayıt "> giriş türü =" düğme "data-id =" linkedin "dataregion =" ana "data-event =" kayıt ">
Sayfaya JavaScript içeren bir dinleyici ekleyebiliriz ve bir müşteri fareyle üzerine geldiğinde veya bu düğmeyi tıkladığında, bu etkinliği izleyebiliriz. Yalnızca OAuth aracılığıyla Twitter'a kaydolan birini izleyebilmek yerine, Facebook'un, ardından Twitter'ın, ardından LinkedIn'in üzerine geldiklerini ve sonunda OAuth modeli için Twitter'ı seçmeye karar verdiklerini görebiliyoruz.
Bunu Pinterest gibi bir siteye veya müşterilerin karoları ilgi alanlarına göre yeniden sıralamak için sürükleyip bıraktıkları yeni Myspace tasarımına genişlettiğinizi hayal edin. Ya da muhtemelen ilgilenmedikleri karoları saklıyorlar. veri- özellik, tanımlayabileceğiniz şeylere ek bir anlamsal anlam katmanı eklemenizi veya atamanızı sağlar. Ajax'a büyük ölçüde güvenen siteler ve uygulamalar için sınırsız fırsatlar sunar.
CSS3 - bu yeni Photoshop
CSS3, eskiden arka plan resimleri, dilimler ve kötü şöhretli 'sürgülü kapılar' tekniğini gerektiren yepyeni bir görünüm ve his tasarımı düzeyi getirdi. Neyse ki, bunların hepsi geçmişte kaldı.
Doğrusal gradyan, yuvarlatılmış köşeler, ona güzel bir harf basma efekti veren metin gölgesi ve fareyle üzerine gelindiğinde parıltıyla süslü bir düğme oluşturmaya bir göz atalım. Bu teknikleri öğrenmek uzun bir yol kat edecek. Her biri bağımsız olarak veya günümüzde web'de trend olan mevcut görsel sıcaklığın hemen hemen herhangi birini çekmek için çeşitli kombinasyonlarda kullanılabilir.
İlk olarak, varsayılan değerde birkaç ayarlama yapalım düğmesi> ve giriş türü = "gönder"> elementler. Standart CSS sıfırlamalarından birini kullandığınızı varsayarsak, biraz boyutlandırma ve nefes alma odası ekleyeceğiz.
/ * Düğmeleri olan düğmeler. ========================================= * * / button, input [type = "submit"] {yükseklik: 2,7em; dolgu: .4em .7em; satır yüksekliği: 1.9; }
Protip: Gönderilen düğmeler ve girişlerin yeniden biçimlendirilmesi zor olabilir. Satır yüksekliğini 1,6 veya daha büyük bir değere ayarlayarak, düğmesi> etiket.
Şimdi düğme sorunumuzu "düzelttik", bir .btn bize yuvarlatılmış köşeleri, doğrusal gradyan, anahat ve tipo görünümü ile güzel ve temiz bir düğme vermek için sınıf.
.btn {display: inline-block; border: 1px katı # d4d4cc; -moz sınır yarıçapı: 4px; -webkit-border-radius: 4px; kenarlık yarıçapı: 4px; dolgu: .4em .7em; arkaplan: # edeff2; arkaplan: -webkit-gradyan (doğrusal,% 0% 0,% 0% 100, from (#fefefe), color-stop (0.55, # edeff2), (# e4e6e9)); arkaplan: -moz-doğrusal-gradyan (orta üst, #fefefe, # edeff2% 55, # e4e6e9); -moz-kutu-gölge: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-gölge: rgba (160,172,187, .7) 0 0 .2em 0; kutu gölgesi: rgba (160,172,187, .7) 0 0 .2em 0; renk: # 6c7786; yazı tipi boyutu: 1.1em; metin gölgesi: #fefefe 1px 0 1px; satır yüksekliği: 1.375em; imleç: işaretçi; }
Ve sonra, ince bir parıltıyla hoş bir gezinme efekti kullanarak kutu gölgesi yöntem:
.btn: vurgulu, .btn: odak {-moz-kutu-gölge: # 129ceb 0px 0px 2px; -webkit-kutu-gölge: # 129ceb 0 0 2px; kutu gölgesi: # 129ceb 0 0 2px; arkaplan: # e6e9eb; arkaplan: -webkit-gradyan (doğrusal,% 0% 0,% 0% 100, from (# f7f7f7), color-stop (0.55, # f6f6f7), (# e6e9eb)); arkaplan: -moz-doğrusal gradyan (orta üst, # f7f7f7, # f6f6f7% 55, # e6e9eb); renk: # 45484b; metin gölgesi: rgb (255,255,255) 1px 1px 0; border-color: # c9c9c0; }
Şimdi, doğrusal gradyan kodunu yazmanın büyük bir hayranı değilim. Uzun ve kafa karıştırıcı. Görebileceğiniz gibi, yalnızca için sürümü ekledim -moz, -webkitve standart model. -O ve -ms sürümlerini dahil etmek istiyorsanız, kodu iki katına çıkarmanız gerekir.
İki seçenek daha var. Bunlardan biri CSS3 oluşturucusudur; ColorZilla dahil olmak üzere web'de birkaç tane mevcuttur. Ancak oyununuzu biraz ilerletmek istiyorsanız, Sass'a dalmayı düşünün: Compass ile birlikte, bu bir nimettir.
Sass + Compass: sihirli derecede lezzetli
CSS4 tek boynuzlu at baskısını ummayı bırakabilirsiniz. Burada ve adı Sass + Compass. Sass, Sözdizimsel Olarak Harika Stil Sayfalarının kısaltmasıdır: CSS3'ün tüm geleneksel faydalarını, değişkenlerin, karışımların, genişleticilerin ve diğer güzelliklerin ek sevinciyle miras alırsınız.
Yakın zamanda aynı mavi tonunda 30'dan fazla varyasyonu olan 5.000 satırlık bir CSS dosyasını yeniden düzenledim. Sass ile her varyasyonu şu kodla değiştirdim:
renk: mavi $;
Tanımlayarak $ mavi benim .. De _variables.scss dosyası, her CSS veya SCSS dosyasının başvurabileceği varsayılan bir renk oluşturabilirim. CSS yazan herkes kullanabilir $ mavi ve damlalık kullanma, onaltılık kod veya RGB, RGBA veya HSL rengi bulma konusunda endişelenmenize gerek yok.
Doğrusal gradyan kodunu hatırlıyor musunuz? Birkaç satır kod yazmak yerine şuna ne dersiniz?
@ arka plan dahil (doğrusal gradyan (# b1cfdc, # 7a9cac));
İşin zor kısmını Sass ve Compass'ın yapmasına ve sizin için doğru sözdizimini oluşturmasına izin verin: bitti. Bir rengin daha koyu veya daha açık bir versiyonunu istediğinizi varsayalım. Damlalığı Photoshop'ta hareket ettirebilir veya sadece Sass'taki açıklaştır / koyulaştır komutlarını kullanabilirsiniz:
@include arka plan (doğrusal gradyan (koyulaştır ($ litegray,% 2), koyulaştır ($ kirli beyaz,% 5));
Bu,% 2 koyulaştırılmış doğrusal bir gradyan oluşturacaktır. $ hafif gri ve% 5 koyulaşmış kırık beyaz. Voil! HEX veya RGB kodlarına bile ihtiyacınız yok.
jQuery: oh, evet yapabilirsin
Bir itirafım var. JavaScript beni korkuturdu. Sonra jQuery'yi buldum. Bir JavaScript gurusu olduğumu iddia etmeyeceğim, ancak jQuery'yi kullanarak ihtiyacım olan her türlü geçişi veya işlevi gerçekleştirebileceğime oldukça eminim.
Örneğin, Yeni numara Ekle bağlantısına tıklayarak ekranda ikincil bir telefon numarası girişi görüntüleme yeteneğini ele alalım. JQuery kullanarak şunu yazmanız yeterlidir:
// - Aşamalı açıklama - // $ (’. Yeni-numara’). Tıklayın (function () {$ (’. Alt-sayı’). FadeIn (’hızlı’);});
Daha gelişmiş bir şey mi arıyorsunuz? Muhtemelen bunun için bir eklenti vardır. Temel davranışlar kolay ve karmaşık olanlara jQuery ile ulaşılabilir.
Çerçeveler
Günümüzün en sağlam çerçevelerinden ikisi Foundation ve Bootstrap'tir. Şimdi, CSS çerçevelerini kaldırmadan önce, size bir şey sormama izin verin. JQuery kullanıyor musunuz? Raylar üzerinde yakut? Django? Tüm çerçeveler.
Tıpkı jQuery ve RoR gibi, Foundation ve Bootstrap de defalarca yaptığımız pek çok şeyin (sıfırlamalar, tipografi, ızgaralar, formlar, düğmeler, gezinme ve listeler gibi) olduğunun farkında olmaktan doğdu. Foundation ve Bootstrap, yardımcı sınıfların kullanımıyla duyarlı tasarımlar için destek sunar. Her ikisi de iyi belgelenmiştir ve yolda test edilmiştir, böylece güvenle kullanabilirsiniz.
İkisi arasındaki temel farklardan biri: Bootstrap, CSS ön işlemesi için LESS sistemine, Foundation ise Sass'a dayanmaktadır. Ek yeteneklerinden dolayı Sass'ı LESS'e tercih ediyorum, ancak hem Sass hem de LESS geleneksel CSS'yi parçalara ayırıyor.
Çerçeveler hakkında son bir düşünce. Başkasının yapısının fazladan şişkinliğini miras almak istemeyenler için, mevcut olanı seçip çıplak kemiklerine kadar sıyırmayı veya birkaçından kiraz toplayarak kendi iskeletinizi yuvarlamayı düşünün. Her iki durumda da, her seferinde sıfırdan başlamak için gerçekten bir neden yoktur.
Son düşünceler
Tasarımınızın nihayet nasıl sonuçlanacağı konusunda daha fazla kontrol mü istiyorsunuz? Daha fazla işlemi koda taşıyın. HTML5 nihayet DOM'a biraz anlam kattı. Saçmalamadan iyi kurtulma BELGE TÜRÜs ve divitis. CSS3, yeni Photoshop: doğrusal gradyanlar, borderradius ve box-shadows FTW! Bootstrap, Foundation, Sass ve jQuery gibi araçlarla, tasarımı koda taşımak hiç bu kadar kolay olmamıştı.
Creative Bloq'ta 55 harika HTML5 örneğini keşfedin.
