Eski güzel günleri hatırlıyor musunuz? Hangi günlerde konuştuğumu biliyorsun; Web sitelerini sabit genişliklere göre tasarladığımız zamanlar çok uzun değildi. Geriye dönüp baktığımızda daha basit bir zamana benziyorlar; daha mutlu bir zaman; İkinci bir düşünce olmadan çevrimiçi olarak kullanılabilen her yazı tipini okuyabileceğim bir zaman. Gerçek şu ki, Duyarlı Web Tasarımı her şeyi değiştirdi. Dünya düz ve şimdi yuvarlak, ben körüm ve şimdi görüyorum, web piksel ve şimdi yüzde.
RWD'nin tanıtımıyla, tasarımcılar olarak yeni web'in taleplerine daha iyi uyum sağlamak için iş akışımızı geliştirmemiz hayati önem taşımaktadır. Birçoğumuz, Photoshop'un sabit piksel yaklaşımının, duyarlı bir web sitesi için gerekli olan akış şemasını tasarlamada uygun olmadığı, ancak yararlı alternatiflerin sunulmadığı konusundaki hayal kırıklığımızı dile getirdik. Web tasarım dünyası, RWD ile zeminden inşa edilen ısmarlama bir yazılım için umutsuzdur. Adobe Reflow gibi ürünler harika bir başlangıçtır, çünkü Adobe en azından bir çözüm üzerinde çalışmaktadır, ancak hafta sonu onunla birkaç saat geçirdikten sonra, hala bir iş akışım için yararlı bir ek. Tarih öncesi bir yazılım ile yarın geleceğine dair vaatler arasında olduğumuz için, mevcut “tasarım yazılımımızın” eksikliklerini gidermek için farklı iş akışları yaratarak alternatifleri oluşturmalıyız. sabit piksel ve sıvı duyarlılığı arasında.
Aşağıdakiler hiçbir şekilde RWD projelerine nasıl yaklaşılması gerektiğinin bir listesi değil, iş akışımı yeni manzaraya göre nasıl uyarladım.
Photoshop / Fireworks / Illustrator bölmeleri arasındaki sınırda durdum, çünkü her biri üstünlük için mücadele ediyor ve masum insanların pikselleri çapraz ateşlemesine yakalanmasına şahit oluyorlar. Tasarımcılar en sevdiklerine sahip olma eğilimindedirler ve başka bir yazılımın gerçekten isteyebilecekleri bir özelliği olduğunu kabul etmekten ziyade yavaş acılı bir ölümden ölürler. Benim düşüncem, Photoshop, Powerpoint veya Paint gibi, en verimli çalışmanızı ve fikirlerinizi hızlıca keşfetmenizi sağlayan herhangi bir yazılımda tasarlamanız gerektiğidir.
Farklı düzenlerle hızlı bir şekilde deneme yapmak için bir başlangıç noktası olması gerektiği için seçtiğiniz neredeyse alakasız. Şahsen, Fireworks'ü bir yazılımda istediğim kutuların daha fazlasını işaretlediğinden tercih ederim. Bu aşamada ayrıntılara sıkı sıkıya bağlı kalmamaya çalışıyorum ve gerçekten de birtakım pozlar gibi, düzen ve yapı üzerinde bazı ön kararlar vermeye çalışıyorum.
Site maketlerinde Lorem Ipsum'un kullanımı ile ilgili söylenmesi gereken her şey söylenmiştir, bu yüzden lütfen bana bu konuda güvenin ve mümkün olan yerlerde gerçek içeriklerden yararlanın. Mümkün olduğu yerde, son yıl içeriğini kullanın, kendi içeriğinizi yazın ya da 'Rüzgarda mumla' sözlerini kullanın ama Lorem ipsum'u kullanmayın. Gerçek içerik kullanmıyorsanız, belirli öğelerin ayarlanması gereken kırılma noktalarının görülmesi zor olacaktır.
Bu, küçük bir masaüstü deneyimine yakın olduğu için başlamayı sevdiğim genişlik, daha sonra büyük ekranlar için ölçeklendirmek ve tablet / mobil deneyimler için daha kolay. Bazı insanlar daha çok mobil cihazlara öncelik vermeyi tercih ederken bazıları da daha önce çalışmaya başlamayı tercih ediyor.
RWD, tarayıcının kullanılabilir alanını doldurmak ve büyütmek için kullanılan sıvı kapları ile ilgilidir. Bu nedenle piksellerden ziyade yüzdelerde tasarım yapmak, tasarımlarınızın tarayıcıyla orantılı olmasını ve eşdeğer piksel tabanlı tasarıma göre daha az kırılma noktası olmasını sağlar.
Arka planda In-Design açıklığına sahip olma eğilimindeyim, böylece piksel tabanlı bir öğenin yüzdesini kolayca ve kolayca bulabiliyorum. InDesign bu tür hesaplamaları işlemek için harikadır ve 428 piksel x 333 piksel boyutundaki bir öğenin, orijinal genişliğinin% 46'sında ne kadar büyüklükte olduğunu bulabilir veya orantıları koruyabilir veya saniyeler içinde 889 piksellik bir tarayıcı genişliğinin% 27'sini bulabilirsiniz. Sonuçlar yine de piksel cinsinden verilmiştir, böylece tasarladığınız yazılıma geri dönüp o kapsayıcıyı tanımladığınız çalışma alanının yüzdesiyle göreceli olarak bilerek piksel haline getirebilirsiniz.
Tasarımlarınızda gerçek içerik kullanmaktan sıkıldığımı düşünüyorsanız, devam etmelisiniz. Photoshop'ta tipografi stilleri tasarlama (veya esdeger). Tipografi, tarayıcıda, her zamanki Adobe paketlerinde göründüğünden çok daha farklı görünecek ve bu da, bir kez oluşturulduktan sonra tasarımı değiştirmenize yardımcı olacak.
Kendinizi baş ağrısından kurtarın ve benzeri uygulamaları kullanın typecast.com ile yazı tipi stillerini denemek ve oluşturmak. Tipografinizin düzeni ve stilinden memnun kaldığınızda, tüm çalışma alanlarınızı tasarım modelleriniz içine yerleştirmek için şeffaf bir PNG olarak dışa aktarabilirsiniz. Seçtiğiniz yazı tiplerinin sisteminizde yüklü olması gerekmeyecek, çünkü bu sadece bir resim olacak, ancak aynı zamanda yazmaya geri dönmeden de düzenleyemeyeceksiniz.
Şimdiye kadar, çeşitli içeriğinizi yüzde olarak tercüme eden kapların genişlikleri ile tamamlanmış 1000 piksel genişliğinde (veya başlangıçta hangi genişlikte seçtiyseniz) tasarımınıza sahip olmalısınız. Şimdi tasarımımda kullandığım konteyner genişliklerini taklit eden özel bir ızgara oluşturmaya başlayacağım. Yani% 30 genişliğinde bir kenar çubuğum varsa ve% 5 dolulukta tarayıcımın% 55'i olan bir içerik alanı varsa, ızgaram% 5,% 30,% 5,% 55,% 5 gibi bir görünüme sahip olabilir.
Gibi uygulamaları kullanabilirsiniz Gridset ısmarlama kılavuzunuzu oluşturmak için tekrar yapıyorum. InDesign'ı, öğeleri gruplandırabildiğiniz ve birbirleriyle orantılı olarak yeniden boyutlandırabildiğiniz için kullanmayı tercih ediyorum.
Şimdi InDesign'ı kullanarak oluşturduğum ve 1600px genişliğe (veya sitenizin olmasını istediğiniz maksimum genişliğe) sahip bir belgeye yapıştırdığım tabloyu alıyorum. Daha sonra, ızgaramı daha geniş ve daha da küçültmeye başlıyorum. 100px'lik artışlarla 300 piksele kadar genişler. Her bir artışta, her bir içerik kabının genişliğini kontrol ediyorum ve içeriğinin barındırılacağı kadar büyük olduğundan emin olun. Bir kabın çok küçük olduğunu düşündüğüm bir genişliğe ulaştığımda, sadece ızgarayı sığacak şekilde düzenlerim. Dolayısıyla, tarayıcı genişliğinin% 30'unda oluşturduğum kenar çubuğunun 800 piksel genişliğinde olması halinde, bu yüzden% 10'luk bir ek daha ekleyebilirim. Bu, tarayıcımın% 40'ını tarayıcımın% 40'ını oluşturacak ve hedeflenen içeriğe yetecek kadar geniş olacak. .
Unutulmaması gereken en önemli şey, eğer bir konteyner daha geniş yaparsanız, tüm genişliğin% 100'ünü muhafaza etmek için aynı miktarda daha dar bir kap daha yapmalısınız. Bu, yeni bir cihazın genişliği değil, içerik kırıldığında yalnızca başka bir kesme noktası ekledikçe, kırılma noktalarını (düzeninizin değişeceği nokta) tanımladığım en iyi yoldur. Bu prosedür, 300px ile 1600px genişliğinden büyüdükçe, ızgaranızın 14 farklı önizlemesi ile sonuçlanacağından zaman alıcı olabilir, ancak tasarımınızın farklı ekran genişliklerine bakmadan önce nasıl görüneceğini kontrol etmenin en iyi yoludur. gelişme.
Başka bir seçenek gibi bir araç kullanmaktır Adobe Reflow Ayrıca, kapsayıcılara içerik eklemenizi ve ardından çalışma alanınızı sürükleyip öğelerin ölçeğini görmenizi sağlar. Ayrıca, içerik kırılıncaya ve yalnızca bir medya sorgusu ekleyerek çalışma alanınızı yeniden boyutlandırarak kırılma noktalarınızı da belirleyebilirsiniz. Reflow hâlâ herkese açık Beta’dadır ve buradan indirilebilir. İşte .
Tasarımlarınızı her 100px'lik bir artışla ölçeklendirdikten sonra, içeriğin kırıldığı ve bir kesme noktası ekleyerek düzeltildiği birkaç genişlik tanımlayabilirsiniz. Artık orijinal tasarımları yarattığınız yazılıma geri dönüp tasarımınızın düzenini kırılma noktaları olarak belirlediğiniz genişliklerde değiştirebilirsiniz. Bu, 300px ile 1600px arasındaki tüm alanları kapsayacak şekilde yalnızca 2, 3 veya 4 farklı düzen (kılavuzunuzun karmaşıklığına ve ihtiyacınız olan kaç kesme noktasına bağlı olarak) tasarladığınız anlamına gelir.
Bu süreci izlemişseniz, artık kırılma noktalarınızla eşleşen bir dizi düzeniniz olmalıdır. Burada, tarayıcınızın tarayıcı genişliğinin yüzdesini ve daha küçük ekranlar için nasıl daraltıldığını gösteren bir belge vardır. Tipografi stilleri tarayıcıda zaten oluşturulmuş ve test edilmiştir. Bu, geliştiricilerin tasarımlarınızı doğru bir şekilde oluşturmaya başlaması ve daha sonra belirli genişliklerdeki içeriklerle uğraşmak zorunda kalmadan çok güçlü bir nokta olmalıdır.
Bu süreç çok uzun bir şekilde sarılmış gibi görünse de, tamamen RWD için özel bir araç olmaksızın, duyarlı olmayan yazılımları kullanarak duyarlı düzenimi kolayca test edebilmem ve fikirlerimi geliştiriciye açıkça iletmenin en iyi yoludur. Bu bir RWD projesine yaklaşmanın tek ve tek yolu değil, ama bulduğum en iyisi.
İş akışınız hakkında duyarlı tasarım neler değişti? Hangi ipuçlarını paylaşırdınız? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, akış görüntüsü Shutterstock üzerinden.