İçerik
- Duyarlı bir metodoloji
- İlk önce içeriği nasıl koruyabilirim?
- Neden?
- 01. İşletmenizi ve kullanıcı hedeflerinizi tanımlayın
- 02. Elde ettiğiniz her fırsatta onlara referans verin
- 03. Geri itmekten korkmayın
- 04. Kendi takımınızı da itin
- 05. Tüm içerik ihtiyaçlarınızı önceden tanımlayın
- Sunumdan içeriği nasıl soyutlarım?
- İçeriği düzen açısından düşünmeyi bırakmalıyız
- Müşterilerinizi içeriklerini tasarımdan bağımsız planlamaya zorlayın
- İçeriğinizi tasarımdan önce tamamlayın
- Her seferinde gerçek içerik kullanın
- Peki, duyarlı tasarım projeleri için tel kafesler nasıl çalışır?
- Eskiz
- Tarayıcı içi çerçeve
- Ek açıklamalar
- Tel çerçevelerde gerçek içeriği kullanın
- Önce küçük ekranlar için nasıl tasarım yaparım?
- Başlangıçta cihazlardan soyut tasarımlar
- Stil Döşemelerini Kullan
- Arayüz uyumu yaratın
- Tarayıcıdaki her şeyi görüntüleyin
- Statik programlarla denge kurun
- Sonuç
Açık konuşalım: Tasarım ancak eldeki daha derin konulara, her şeyin arkasındaki nedene odaklanırsa çözümdür. Sağlam bir süreç her zaman işimize rehberlik etmelidir, ancak daha esnek bir şeyi benimsememiz gerekir. Medyumumuz nihayet akıcı olduğunu kanıtladı, bu yüzden sürecimiz olmamalı mı? Sistem tasarımını düşünün: Hem resmin tamamını hem de küçük ayrıntıları görmeniz gerekir. İmkansız mı? Ne münasebet!
Frank Chimero, The Shape of Design adlı kitabında bunu çok güzel bir şekilde ifade ediyor: “Sanatçının işe yeni bir bakış açısı kazanmak için şövale dışına çıktığı bir bölüm var. Resim yakın ve uzak eşit parçalardır: yakın olduğunda sanatçı izini sürmek için çok çalışır; uzaktaysa, niteliklerini analiz etmek için işi değerlendirir. İşin onunla konuşmasına izin vermek için geri adım atıyor. "
Çalışmamızın, aracımızın bizimle konuşmasına izin vermeliyiz. Duyarlı tasarımın yükselişiyle, nihayet ortamımızı olması gerektiği gibi kucaklıyoruz: akışkan. Geri çekilip çalışmayı değerlendirmek, analiz etmek ve işleri yeni bir şekilde yapmanın yeni bir yolunu, yeni bir süreci benimsemek için harika bir zaman. Kodu anlamayan statik modellerin ve web tasarımcılarının günleri geride kaldı. Duyarlı bir sürecin zamanı geldi.
Duyarlı bir metodoloji
Sağlam bir sürecin büyük sırrını bu makalenin hemen başında vereceğiz. Çünkü biz böyle deliyiz. Hazır? Duyarlı bir süreç, sorumlu bir süreçtir. Belirsiz mi? Olabilir. Aptalca mı? Hayır. Kendisinden önceki web standartları hareketi gibi, duyarlı tasarım da web'i geleceğe uygun yöntemlerle ileriye taşıyor.
Herhangi bir tasarım süreci gibi, her şeyin arkasındaki "neden" e odaklanmalıdır. Öyleyse neden web siteleri var? İçerik sunmak için. Bu, göreve dayalı, sosyal, bilgilendirici olabilir… önemli değil. Her şey şuna bağlı: neden, iyi yapılandırılmış içerik ve önemli olan etkileşimlerle başlayın.
Duyarlı tasarım sürecimiz hakkında en sık duyduğumuz sorular.
İlk önce içeriği nasıl koruyabilirim?
Bir projenin başlangıcında hepimiz çok iyimseriz. "Önce içerik!" diyoruz. "Kullanıcı hedefleri! Neyin önemli olduğunu unutma! " Bu doğru. Ama bu ne demektir? Önce içerik sürecini nasıl uygularsınız?
Bilseniz (veya bildiğinizi düşünseniz) bile, proje ilerledikçe unutmak kolaydır. Uzun vadeli projeler uzayıp gidiyor (ve devam ediyor… ve devam ediyor…). Nedenini düşünmeyi bırakıp nasıl olduğuna odaklanmaya başlarız. Projelerimizin bağımsız olarak var olabilecek ayrı "keşif" ve "geliştirme" aşamalarına ayrılabileceğini düşünerek kendimizi kandırıyoruz.
Gerçek şu ki, her zaman neden diye sormaya devam etmeliyiz. Ne kadar bildiğinizi düşündüğünüz önemli değil, ne kadar planlama yapmış olursanız olun - her karar verdiğinizde, her bir düğme tasarladığınızda veya bir başlık yazdığınızda, şunu sormalısınız…
Neden?
Bunu neden yapıyorum? Kimin için? Müşterimin hangi iş hedefine ulaşmasına yardımcı olacak? Kullanıcılarımın adreslemesine yardımcı olacak neye ihtiyaç var? Önce içeriği saklamayın. Önce nedenini saklayın.
Bu kulağa kolay geliyor. Ama bunu iyi yapmak için zorlaman gerekecek. Müşterilerinizi ve ekibinizi önce nedenlerini tanımlamaları için zorlayın. Lorem Ipsum yok, "buna daha sonra ulaşacağız". Ödevini yap! Tüm nasıl işlerinizin sağlam bir nedenle başlaması gerekir. Yellow Pencil'da bu, projeleri belirleme, tahmin etme, bütçeleme ve planlama şeklimizde büyük değişiklikler anlamına geliyor. Sağlam araştırma, strateji ve planlama yapmak için bütçe ve zaman ayırmak zorunda kaldık. Sen de yapabilirsin. Ancak müşterileriniz ve ekipleriniz, içerik ihtiyaçlarını önceden tanımlamanın muazzam faydalarını gördüklerinde asla geriye dönmeyecekler.
Ve onları eğitmek bizim işimiz. (Müşterilerle başa çıkma hakkında daha fazla bilgi edinmek istiyorsanız, Mike Monteiro’nun mükemmel kitabı Tasarım İştir'i okuyun.) Müşteriler, tüm bu araştırmayı yapmanın ve önden çalışmanın değerini anlamakta zorlanabilir. Ve neden yapmalılar? Sonunda 'bitmiş' hiçbir şey yoktur ve çoğu zaman sadece bir fatura ve büyük bir Word belgesi alırlar.
Bu onların suçu değil - bu bizim hatamız. Bu değeri göstermek için daha iyi bir iş yapmak bizim sorumluluğumuzdur. Yolun her adımında, hepsini çok önemli nedene geri getirmeliyiz.
Bu özellikle duyarlı tasarım için önemlidir. Duyarlı bir web sitesi çok daha fazla geliştirme çabası gerektirmez, ancak çok daha fazla planlama anlamına gelir. Gerçekten de, başından beri yapıyor olmamız gereken bir planlama. Her üç yılda bir proje döngüsünün yeniden tasarlanmasına tanık olun. Bunu yapmaya devam etmek istiyor musun? Kesinlikle yapmayız.
İşte proje sürecinizde içeriği ilk sırada tutmanın üç adımı.
01. İşletmenizi ve kullanıcı hedeflerinizi tanımlayın
Projeniz için öncelikli bir iş ve kullanıcı hedefleri listesi oluşturun. Kullanıcılarınız en çok ne bilmek istiyor veya ne yapmak istiyor? Araştırmanı yap. Tahminler yerine bilgiye dayalı çıkarımlar yapın. Tüm paydaşlarınızın anlaşmasını sağlayın.
02. Elde ettiğiniz her fırsatta onlara referans verin
Her karar verdiğinizde, birisi yeni bir özellik veya tasarım öğesi veya içerik sayfası önerdiğinde, bu kişinin isteği bir işletme ve kullanıcı hedefiyle eşleştirmesini sağlayın. Bu özellik hangi gerçek ihtiyacı karşılayacak? Gerçek sebep nedir? (İpucu: "Çünkü istiyorum" veya "Maviyi gerçekten seviyorum" veya "Herkes Facebook'ta" sayılmaz.)
03. Geri itmekten korkmayın
Bu zor olabilir. Müşteri ilişkileri hassas olabilir ve savaşı kazanmak için savaştan vazgeçmek cazip olabilir. Ama unutmayın, hepimiz bu işin içindeyiz! Kullanıcıya karşı iş değildir; bize karşı onlara.
Kullanıcı ihtiyaçlarını karşılamak, iş ihtiyaçlarını karşılamanın en iyi yoludur. Çünkü kullanıcılarımız olmadan bir işimiz olmaz! Müşteriler (iyi müşteriler) sizi her şeye "evet" demeniz için işe almıyor. Dolayısıyla, müşteriniz hedeflerini veya kullanıcılarının ihtiyaçlarını karşılamayan bir şey isterse, onlara meydan okumaktan korkmayın. Ego ile ilgili değil. Mümkün olan en iyi çözümü yaratmakla ilgilidir.
04. Kendi takımınızı da itin
Bu, yaratıcı bir ekip içinde çalışırken de zor olabilir. Rollerin ayrılması - görsel tasarım, kullanıcı deneyimi, bilgi mimarisi, içerik stratejisi, içerik üretimi - iletişimsizliğe yol açabilir. Meşgul oluruz, e-postalara boğuluruz. Baştan sona bir projede kalmak zordur, özellikle de "işiniz" bittiğinde.
Ekibinizin ilişkisi en az müşteri ilişkiniz kadar önemlidir. Müşterilerimize yaptığımız gibi nedenini kendimize hatırlatmalıyız. İşbirliği anahtardır. Bir içerik planını, taslakları veya tasarımları basitçe "devredemezsiniz". Mümkün olduğunca el ele çalışmalıyız. Bir çıktıyı "bitirmek" ve başka bir şeye geçmek kolaydır. İşler zorlaştığında bir projede kalmak çok daha zordur.
Yaratıcı çalışmalara şelale yaklaşımı işe yaramıyor. Ekip üyeleri arasında çevik, işbirliğine dayalı çalışma daha iyi sonuçlar sağlar.
05. Tüm içerik ihtiyaçlarınızı önceden tanımlayın
Sorun şu: duyarlı web sitelerinin planlanması daha uzun sürer. Artık sadece tek bir bağlam için plan yapmıyoruz. Şu anda bildiğimiz ve henüz var olmayan tüm bağlamları planlıyoruz.
Ancak tüm bu karmaşıklıkları önceden planlamak, geri dönüp hesaba katmadığınız özellikleri ve işlevleri iyileştirmekten çok daha az zaman alır. Öyleyse zamanı / çabayı / bütçeyi harcayın. Siz tasarıma başlamadan önce müşterilerinizi ve ekibinizi tüm içeriklerini tanımlamaya (ve taahhüt etmeye!) Zorlayın. Sayfa tablolarını kullanın. Yapılandırılmış içerik kullanın. İçeriğinizi şimdi geleceğe hazırlayın! Ya da daha sonra ağla.
Sunumdan içeriği nasıl soyutlarım?
Bunu internet-o-küresinde çok duyarsınız. Ama bekle, ne? Ve bekleyin - neden?
Çünkü sunum değişebilir (ve değişecektir). 15 yıl önce web sitelerini tasarlama şeklimiz, onları şu anda sunduğumuz şekilde neredeyse tanınmıyor. Ama neyin değişmediğini biliyor musun? Kelimeler. Hala kullanıyoruz. İnternet öncelikle (metin tabanlı) içerik içindir. Hala bilgi problemlerini çözmek için kullanıyoruz; görevleri yerine getirmek için. Ancak içeriğiniz bir sunum aracına bağlıysa (Flash giriş sayfaları, herhangi biri?), Birkaç yıl içinde kullanılamayacak kadar büyük bir olasılık vardır. Ve bu berbat.
İçeriği düzen açısından düşünmeyi bırakmalıyız
Biz (bir sektör olarak) müşterilerimizi içeriği düzen açısından düşünmeleri için eğittik. "Kenar çubuğuna koyun" diyoruz. "Bu, altbilgiye girmeli." Dur! Yapma. Dur. Konumla ilgili değil. Öncelikle ilgili. Kullanıcılarınız için en önemli içerik nedir? Tahmin edin ne oldu: düzen bağlamlar arasında değişir. Küçük ekran tasarımınızda (muhtemelen) bir kenar çubuğu olmayacak.
Müşterinizin istediği dev süper menü? İPhone ile uçmayacağım.
Müşterilerinizi içeriklerini tasarımdan bağımsız planlamaya zorlayın
Tamam, onları zorlamana gerek yok. Onları cesaretlendirin. Kesinlikle teşvik edin. Sayfa tabloları bunun için harikadır. Henüz okumadıysanız, bunları nasıl oluşturacağınızla ilgili daha fazla bilgi için hemen Kristina Halvorson ve Melissa Rach’in Web için İçerik Stratejisi’ne gidin. Bunları öncelik sırasına göre düzenleyin. Konum veya yerleşim planına atıfta bulunmayın. Bu, müşterilerinizin içeriklerini daha verimli bir şekilde düşünmelerine yardımcı olacak ve ayrıca son halini almış tel kafeslerden veya tasarımdan önce içerik oluşturma sürecini ilerletecektir.
İçeriğinizi tasarımdan önce tamamlayın
Tamam, bu her zaman mümkün değildir. Ancak tasarlamaya başlamadan önce belirsizliği ne kadar çok ortadan kaldırırsanız, daha sonra geri dönüp bir şeyleri değiştirmeniz o kadar az olur.
Her seferinde gerçek içerik kullanın
Mümkünse, uç durum içeriğini kullanın - müşterilerinize en karmaşık sayfaları, resimleri ve menüleri gösterin. Bu, bitmiş üründe en dağınık içeriğini gördüklerinde, sürecin ilerleyen bölümlerinde sürprizleri önleyecektir.
İşlevsel, tarayıcı içi tel kafesler bir dünya fark yaratır. Müşterilerinizin çeşitli ekran boyutlarında hareket eden ve değişen içeriklerini gözlemlemelerine izin verin. Tel çerçevelerinizi sunarken işaret edin (yüz yüze sunum yapıyorsunuz, değil mi?) Onlara, düzen değişirken bilgilerinin önceliğinin ekran boyutlarında nasıl aynı kaldığını gösterin.
Peki, duyarlı tasarım projeleri için tel kafesler nasıl çalışır?
DWT için etkileşim tasarımının hızlı ve sık bir şekilde tarayıcıya girmesi gerektiğine inanıyoruz. Her şeyi açıklayacak statik bir belge oluşturmak hemen hemen imkansızdır. Elbette, üç, dört veya beş kırılma noktası gösteren bir belge oluşturabilirdik, ancak bu hikayenin sadece bir kısmı. Ayrılma noktaları arasındaki tüm anlar ne olacak? Bu tarayıcıda olur.
Eskiz
Yine de, fikirlerinizi işbirliği içinde hızlı bir şekilde çizebilmek iyidir. Bunun belirli bir ortamda olması gerekmez, ancak kağıt üzerinde kalemle ilgili bir şeyler vardır. Buradaki bütün mesele, hızlı ve yinelemeli olarak fikir üretmektir. Mümkün olduğunca eskiz tahtasını seviyoruz ve bunun için bir uygulama bile var: UI Sketcher.
Tarayıcı içi çerçeve
İşte bizim için gerçek bilet. Tarayıcıda DWT'yi gösterirken kalıpları ve sistemleri yeniden kullanmayı seviyoruz. Elbette, her seferinde kendi sistemimizi sıfırdan oluşturabilirdik, ancak bu bize veya müşterilerimize yardımcı olmuyor.
Ayrıca Twitter’ın Bootstrap veya Zurb’s Foundation gibi hızlı yanıt veren prototip oluşturma çerçevelerini kullanmayı seviyoruz. Kişisel olarak Foundation'a eğiliyoruz çünkü iş akışımıza uyuyor. Her ikisinin de küçük ekran, düşük bant genişliği öncelikli yaklaşımını benimsemesi harika olurdu, ama biz böyle yürüyoruz.
Ek açıklamalar
DWT tel kafesleri için ek açıklamalar önemlidir, ancak çoğu zaman göz ardı edildiğini gördük. Yüksek sesle söyleyin: dokümantasyon, dokümantasyon, dokümantasyon! Bunun birkaç örneğini arkadaşlarımızdan gördük ve jürinin, tarayıcı içi duyarlı tel çerçevelere düzgün şekilde açıklama eklemek için hâlâ "en iyi" yolda olduğunu düşünüyoruz. Yukarıda belirtildiği gibi, Foundation by Zurb'u düzenli olarak kullanıyoruz ve ek açıklamalarımızı görüntülemek için Reveal eklentisini kullanmayı seviyoruz. Bu açıklamalar yalnızca daha büyük ekranlar için görünür ve ideal olarak açılıp kapatılabilir.
Tel çerçevelerde gerçek içeriği kullanın
Lorem Ipsum hakkında tel çerçevelerde ve tasarım modellerinde çok fazla tartışma oldu, ancak tel çerçevelerinizde gerçek içerik yoksa, yanlış yapıyorsunuz demektir. İçerik, etkileşim kararlarını bildirir ve bir tasarımın ne zaman bozulacağını size söyler. Lorem Ipsum bunu nasıl yapabilir?
Önce küçük ekranlar için nasıl tasarım yaparım?
Yıllardır belirli bir çözünürlüğü göz önünde bulundurarak tasarladık. Varsayılan bir ayardı. Defterlerde çizim yapmak, OmniGraffle'da tel çerçeve oluşturmak, Photoshop'ta çalışmak veya tarayıcıda tasarım yapmak olsun, tuval boyutumuzun ne olacağını biliyorduk. O günler geçti. Önce küçük ekran için tasarım yapmaya ve aşamalı olarak geliştirmeye büyük inanıyoruz. Peki bir tasarımcı, iş akışını sabit bir tuval boyutundan akışkan bir boyuta nasıl değiştirir?
Başlangıçta cihazlardan soyut tasarımlar
Belirli bir cihaz için tasarım yapmıyorsak, cihazlar hakkında düşünmeyi bırakıp deneyimler hakkında düşünmeye başlamamız çok önemlidir. Aşağıdaki tekniklerin tümü, tasarımcıların deneyimlerini oluştururken cihazdan bağımsız kalmalarına yardımcı olur (bir noktaya kadar).
Stil Döşemelerini Kullan
Yön belirlemek ve hızla yineleme yapmak için Stil Döşemelerini kullanın. Stil Döşemeleri, bir tasarımcının çok spesifik olmadan bir tasarım sisteminin yönünü belirlemesini sağlar. Yaratıcıları Samantha Warren, onları şu şekilde tanımlıyor:
"Stil Döşemeleri, bir duygudurum panosunun çok belirsiz olduğu ve bir kompozisyonun çok gerçek olduğu durumlar içindir. Stil Döşemeleri, düzeni tanımlamadan gerçek arayüz öğeleriyle doğrudan bağlantı kurar. "
Arayüz uyumu yaratın
Tüm görsel ve etkileşimli öğelerin bir araya getirildiği bir tuval hayal edin. Belirli bir UI düzenini görmek için değil, tüm öğelerin birlikte nasıl çalıştığını görmek için. Bu bir arayüz uyum tuvalidir. Bir arayüz uyum tuvali, bir tasarımcının fikirleri bir arada tutmasına, ancak herhangi bir ekran boyutuna odaklanmamasına olanak tanır. Ayrıca, tam bir stil kılavuzu oluşturmak yerine tasarlanan öğeleri verimli bir şekilde iletmenin ve belgelemenin harika bir yoludur.
Daha fazla okumak isterseniz, arayüz uyumu konusunda iki mükemmel makaleyi burada ve burada bulabilirsiniz.
Tarayıcıdaki her şeyi görüntüleyin
Tarayıcıda her şeyin bir araya getirilmesi gerekiyor. UI tasarımının gerçekten hayat bulduğu yer burasıdır. Gerçek içeriğin görsel öğelerle nasıl etkileşime girdiğini görmek çok önemlidir. Statik bir ortamda bunu düzgün bir şekilde yapmanın bir yolu yoktur. Yerel ortamda nasıl tepki vereceğini görmeniz gerekir.
Statik programlarla denge kurun
Tarayıcı ile Photoshop gibi statik programlar arasında bir akış vardır. Tasarım sisteminin akıcı ve doğal bir şekilde oluşturulmasına imkan veren bir denge olmalıdır. Elbette, bu Photoshop'ta gerçekleşecek, ancak duyarlı bir şekilde tasarım yapan bir tasarımcının, tarayıcıda da yaratıcı düşünmeyi öğrenmesi gerekiyor.
Sonuç
Bir kez daha hissederek: iyi yapılandırılmış içerik ve önemli etkileşimlerle neden ile başlayın. Önce küçük ekrana ve düşük bant genişliğine odaklanın ve duyarlı konseptlerinizi aşamalı olarak geliştirin. Medyumumuz yaşlanıyor. Her seferinde bir web projesi ile işleri doğru yapma ve dünyayı değiştirme şansına sahibiz.
Tasarımcılar için en iyi 20 tel çerçeve oluşturma aracını keşfedin
Steve Fisher, Kanada'daki Yellow Pencil'da araştırma, analiz, tasarım ve stratejiyi koordine ediyor ve RWD, UX ve açık kaynak gibi konularda konuşuyor. Alaine Mackenzie, Yellow Pencil'da içerik stratejisti.
