Bir web sitesi tasarlamadaki adımlar nelerdir?

Tüm Web Tasarımcılarını Aramak :)

Memleketimdeki küçük işletmeler için bir web sitesi yapmaya başladım ve bu benim ilk uygun projem olacak. Geçmişte boş zamanlar için yaptığım siteler yaptım. HTML ve CSS'de akıcıyım. Müşterilerimin gereksinimleri ve web sitesinde ne istediği var. Web'i aradım ve bilgilerim eski olduğundan, sorularımla alakalı hiçbir şey bulamadım.

Benim sorularım:

2014 yılında web tasarımcılarının iş akışı nedir? (Çünkü her şey çok hızlı değişiyor.) Sitenin tel kafeslerini oluşturup sonra photoshopta tasarlayıp sonra kodları değiştiriyorum?

Ben sadece "tasarım" işlemlerinin nasıl yürüdüğünü bilmek istiyorum, web sitesi yapmak için hangi adımları atmam gerekiyor?

Şimdiden teşekkürler.

Keşif ve Kapsam

Hedefleri, amacı ve ihtiyaçları belirlemek için müşteriyle oturun. Amaçlanan yer için bir teklif hazırlamış ve ayrıca geri dönüş süresini tartışmalıydınız. Sağlayamadığınız bir şeyde yazılı olduğundan emin olun. Sitenin nasıl yapılandırılacağını bulmanız gerekir. Duyarlı, yalnızca tablet ve telefon, yalnızca masaüstü, yalnızca masaüstü ve tablet gibi. Tasarımın çok aşamalı bir tasarım hedefi olup olmadığını belirlemeniz gerekir; örneğin, istemci bir masaüstü sürümü yayınlamak isteyecek ve daha sonra tam bir mobil uygulama isteyecektir.

İçerik Eşleme

Umarım, site için istenen tüm içeriği verilmiştir. Siteyi ve işlevselliğini eşleştirmelisiniz. Ölçeklenebilirliğin gelecekteki değişiklikler için nasıl olduğuna karar verin, eğer bir CMS veya uygulama içinse, kodun nasıl yapılandırılabileceğine karar verin.

Örnek:

Model

"Ağacı" veya "haritanızı" müşterinin onayı ile tamamladıktan sonra, el çizimi veya mockup aracı üzerinde çalışacağım. Sağ üstte arama yaparsanız, bu konuda çok fazla soru var.

Örnek:

Stil kiremit

Photoshop'ta web tasarımı için tasarım yapmak, günümüzün amacını yendi. Hala Photoshop kullanan pek çok insan tanımıyorum, çünkü fantezi bir düğme yapmak için harcadığınız süreyi aynı miktarda harcayabileceğiniz ve tarayıcıda kodlayabileceğiniz bir süre. Özel bir istek için bir uygulama kullanmak zorunda kalırsam, uygulamayı Illustrator veya InDesign uygulamasında dağıtırım. Gibi bir stil döşemesi tasarlamak için göç tavsiye ederim:

Karo amacı ile bir müşteriye bir tasarım vermediniz ve “bu bana verdiğiniz tasarıma benzemiyor” köşesine oturtun. Ayrıca, bir siteyi planlıyorsanız, yanıt vermek için Photoshop'ta düzenleyerek zaman harcamak için hiçbir neden yoktur, çünkü belirli aygıtlar, vb. İçin çok fazla zaman harcayacaksınız. Tüm siteyi tasarlamak zorunda kalırsanız Illustrator'ı, belirtildiği gibi, SVG'si ve siteniz için Photoshop'a kıyasla öğeleri dışa aktarma yeteneği için göz önünde bulundurun. Bir dereceye kadar, içeriği biçimlendirmek için InDesign'ı bile kullanabilirsiniz, ancak yalnızca görüntü işleme için Photoshop'u kullanırdım ve eğer bunu yaparsam muhtemelen ImageMagick ile yuvarlanırdım. Stil Döşemesini diğerlerinden daha ileri bir seviyeye alıyorum ve tek bir sayfaya kodluyorum, böylece ustamın ön görevini yaptım.css dosya.

Tel Çerçeve

Fark etmediysen tasarımı tarayıcıya yerleştirmeyi tercih ederim. Şimdi bu günlerde Illustrator'ı sitenin bir taslağı veya sitenin maketi için kullanabilirim, ancak genellikle .cssgri renkte en fazla 6 renk içeren varsayılan bir şablon dosyası dağıtırım ve çoğu kişi yapamadığından sitenin yapısı için her şeyi kodlarım Bir tasarım anlayışı edinin ve oynayacak bir şey olsun. Bazen devam ediyorum ve bunu PHP'de yapıyorum çünkü bir CMS için konuşlandırmak daha kolay. Daha sonra, müşterinin SAĞLANAN yazı tiplerini siyah ve beyaz bir şekilde basit bir alt etki alanı geliştireceğim, böylece tüm sitenin işlevselliği mevcut olacak ve üzerinden geçebilecekler. Tüm içeriği veya renkleri eklemeye zamanım olmadığından (kukla metin referansı kullandığım için: "Web siteleri için Lorem Ipsum'a alternatif (kukla metin)") Bir cihaza dayalı belirli bir elemanı sevmiyorsa, mevcut değişiklikleri kolayca değiştirebilirim.

Renklendir ve içerik

Müşteri sitenin yapısını ve işlevselliğini imzaladıktan sonra, CSS'nin geri kalanını yazacağım ve istenen animasyonları veya JavaScript özelliklerini ekleyeceğim. Stil döşemesini onayladığımdan ve doğru geliştirdiysem CSS'yi kopyalayıp ayarlayabilirim.

Hata ayıklama, hata ayıklama, hata ayıklama

Müşteri oturumunu kapatmadan önceki son adım hata ayıklamadır ve kodumun hatasız olduğundan emin olun. Her şey doğruysa, pürüzsüz bir sürüm bırakmalıyım. Bu adım aynı zamanda, teklif ettiğiniz ve teklif ettiğiniz şey ise, servis testi ve yük testi de içerir. Şahsen ben, herhangi bir tasarımcının, sizin gibi, sizin için geliştirdikleri şeylerin farkında olması gerektiğine, umarım, bir baskı tasarımına geldiğinde yapmaları gerektiğine inanan bir firmayım. Eğer müşteri gerçek bir barındırma sağlayıcısına sahip olamazsa, sitenin performansını sınırlayabilir ve hepsi sizin suçunuz olduğunu ve yanlış bir şey yaptığını söyleyeceklerdir.

Eğitim

Genelde CMS sitelerinde kısa teklif / teklif eğitimimde teklif veriyorum. Bazı kullanıcıların ne yaptıkları hakkında hiçbir ipucu yok, bu yüzden bir şeyden geçtikten veya tasarımımı en üst düzey yeteneklere kadar kullandıklarından emin olmak için sorulardan sonra bir saat boyunca bir öğleden sonra için teklif vereceğim.

Temel bir soru sorduğunuzdan beri yardımcı olabilecek diğer bazı konular:

• Wireframe'ler ve örnekler arasındaki fark nedir?
• Bir müşteriye web tasarımı örnekler nasıl sunulur?
• Web tasarımında bazı iyi “taklit” uygulamaları nelerdir?

Aynı zamanda bu alana daha yeni başlamış bir web tasarımcısıyım. Yine de birkaç proje yaptım. Benim için iş akışım şöyle gider:

1. İlk Tasarım ve Geliştirme Toplantısı
   Bu, beklenen bitiş tarihi de dahil olmak üzere tüm ilgili bilgileri topladığımda, müşterimden ihtiyaç duyduğum ürünlerin bir listesini yapar.
   
2. PhotoShop Örnekleri
   Şu anda müşterime uygun bir tasarım ya da iki ya da üç tane buldum ve Photoshop'ta markalarını, renklerini, stillerini vb. Kullanarak maketlerini hazırladım. sonra müşterinin hangi tasarımı en çok sevdiğine karar vermesine izin verin.
   NOT: Oluşturmak için WordPress kullanıyorsanız, http://themeforest.com adresine gidebilirsiniz.ve tonlarca temayı inceleyin. Oradan ekran görüntülerini alabilir ve makbuzlarınızı yapabilir, ardından canlı bir demo da sağlayabilirsiniz (müşterinin özelleştirmeleri olmadan). Müşteriniz bu maketlerden birini seviyorsa, o zaman temayı satın alırsınız ve ihtiyaç duyduğunuz şekilde değiştirebilirsiniz. Yapma eğilimim budur. Uygun kredi / ödeme / etc vermeden asla bir tema (veya bu konuda başka bir şey) kullanmam. orijinal yaratıcısına :)
   
3. Gelişim
   Sonunda siteyi gerçekten bir geliştirme ortamında geliştirmeye başlıyorum (istemcinin canlı web sitesi değil, eğer mümkünse bir alt etki alanı - IE dev.clienturl.com) Bir sayfanın yaklaştığını her hissettiğimde müşterime güncellemeler gönderirim tamamlamak için, bu şekilde sorun varsa hemen düzeltebiliriz.
4. HER ZAMAN TAKİP EDİN
   Müşterinizin web sitesi yayına girdikten ve memnun göründükten ve daha fazla değişiklik istememiş olsalar bile, takip ettiğinizden emin olun. Sadece her şeyin beklentilerine göre olması gerektiği gibi çalıştığından emin olun. Ayrıca, web sitesi bir hafta kadar yayına girdiğinde, her müşterinin bitirmesi için küçük bir anket yazmanızı da öneririm. Buradan, web sitenizdeki yorumları referans olarak kullanabilirsiniz.

Herhangi bir konuda yardıma ihtiyacınız olursa, web sitemden bana ulaşın. Sözleşmeler, üretim sonrası anketler, ilk anketler vb. Konularda sizinle paylaşabileceğim tonlarca kaynağım var. Http://anchorsawaydesigns.com/

en başından mümkün olduğunca fazla bilgi edinmeye çalışın ve ardından aşağıdakine benzer bir şey uygulayın. Müvekkilinizi mümkün olduğu kadar bilgilendirmeye çalışın; yalnızca daha sonra beklentilerini karşılamadığını anlamak için yalıtılmış bir şey geliştirmek istemeyeceksiniz. İyi bir tel kafesleme aracına yatırım yaparsanız (balsamiq kullanırım), o zaman işin yarısı sizin için yapılır.

1. Gereksinimler toplanıyor
2. Wireframing
3. Tasarım örnekler
4. Tasarım sonuçlandı
5. gelişme
6. Barındırma

İyi şanslar.

Merhaba dostum güzel yeni bir projeye başlıyorsunuz.

İhtiyacınız için Adımlar:

1. ilk önce projeniz için hangi teknolojiyi kullanmak istediğinize karar verin, yani tek sayfa kaydırma, çoklu sayfa vb.

2. Ardından düzeniniz ve iş akışınız için taslak hazırlayın.

3. Şimdi düzeninizi photoshop ile yaptığım gibi istediğiniz araçta tasarlamaya başlayın ancak beğeninizi kullanabilirsiniz.

4. Bundan sonra herhangi bir değişiklik için müşteriye ur düzeni göstermeniz iyi olur. renk, yazı tipi vb. Böylece html anında baş ağrısı çekmezsiniz.

5. Şimdi, müşterilerin onayından sonra. Html ve Css ile kodlamaya başlama zamanı.

6. Bundan sonra, Gelişmiş Dil temel kodlama için Geliştirici'ye geçme zamanı. PHP, .NET vb.

Keyfini çıkarın............

Web endüstrisinde, geliştirme sürecinizi kolaylaştırmak için, Tasarım yapılır ve son tasarım daha da geliştirilmek veya test edilmek üzere sunulmadan önce, diğer bazı orta adımlar yer alır:

1. Adım: İlham Almak:

Diğer tasarımcıların veya sitelerin tel kafesleri için neler yaptığını sürekli gözlemlerseniz, tel kafesin ekran için bilgileri düzenlemeye nasıl yardımcı olduğunu aklınızdan çıkarmadan bir resim çekeceksiniz.

ve bunun için "Wirify" Wireframing aracını kullanabilirsiniz, sadece yer işaretinize büyük bir link ekleyin ve istediğiniz herhangi bir web sitesine girin, yer işaretini tıklayın, web sitesinin tel kafes içine döndüğünü göreceksiniz.

Adım 2: İşleminizi Tasarlamak:

Farklı tasarımcıların tel kafeslemeye ve görsellere veya koda farklı şekillerde çevirisine yaklaşmaları,

Burada izlenmesi gereken yolu seçmek sadece tasarımcı değil, bazen müşteriler doğrudan maket yapmayı tercih ediyor, bazıları ise daha sistematik olarak tercih ediyor.

Sketch => Wireframe => Mockup => Kod

Adım 3: Eskiz:

Şimdi, ilham aldığınızda bazı kaba fikirlere ve bir yaklaşım planlamasına sahip olun, eskiz ile başlamak her zaman iyidir, farenizi / kaleminizi kontrol etmekte ne kadar iyi olduğunuzu veya ne kullanırsanız kullanın, kağıt, kalem basitlik.

Kağıt üzerine elle çizim yapmak , her tasarımcı için her zaman iyi bir başlangıç ​​noktasıdır. Odaklanma ve düzenleme için hızlı ve kolay bir yol sağlar. Çizim konusunda çok hassas iseniz, bunu son tel kafesiniz olarak bile kullanabilirsiniz.

Adım 4: Tel kafesleme:

Bir tel kafes oluşturmak , tasarlamadan önce atmanız gereken ilk adımlardan biridir.

Tel kafes , bir web sitesi içindeki öğeleri ve içeriği düzenlemenize ve basitleştirmenize yardımcı olur ve geliştirme sürecinde önemli bir araçtır.

Bir tel kafes temel olarak bir tasarımdaki içerik düzeninin görsel bir temsilidir .

Bir binanın temeli gibi, pahalı bir boya katmanı yapıp yapmamaya karar vermeden önce temel olarak güçlü olması gerekir.

Araçlarınızı Seçin

Tasarımcılar için Mashable'nin 10 Ücretsiz Wireframing aracı listesi

Izgara Ayarlama

Simetrik ve paralel bir tasarım elde etmek için ızgaralar çok gereklidir.

İyi tasarlanmış bir web sitesine ne zaman bakarsanız bakın içeriğinin belirli bir noktadan başladığını ve bire bir sona erdiğini görürsünüz, bunlar ızgaralar kullanılarak yönetilir.

Kutularla Mizanpajı Belirle

Tipografi ile Bilgi Hiyerarşisini Tanımlayın

Tel kafesleme yaparken nelerden kaçınmalı:

• Sayfada çok fazla şey oluyor.
• Renk ve tasarıma vurgu
• Çok fazla detay

Bir tel kafes oluşturmak, müşteriye, geliştiriciye ve tasarımcıya, web sitesinin yapısına eleştirel bir bakış atma fırsatı verir ve işlemin başlarında kolayca revizyon yapmalarını sağlar.

Wireframing, aşağıdaki kilit avantajları sunar:

Adım 5: Örnekler / Görsel:

Artık son Wireframe, son Mockup'lara veya Visual'e dönüştürülebilir:

Mockuos için kullanılan bazı genel araçlar Adobe photoshop, Corel Draw ve çok yeni ama zaten popüler Sketch.

Bilgi Hiyerarşisi

Neyin vurgulanacağını ve neyin yan bilgi olduğunu ve renk şemasını, yeniden konumlandırmayı ve tipografiye karar vermeyi düşünmeniz gerekebilir.

matbaacılık

Alternatiflerin doğru kombinasyonuyla web sitesi için görsel olarak çekici ve okunabilir tipografi seçin. Yazı tipi boyutu, ağırlık ve renkler okunabilirlikte çok önemli bir rol oynar.

Renk şemaları

Marka Kimliğini ve psikolojik renkleri tehlike için Kırmızı, Başarı için yeşil vb. Olarak temsil eden bir Renk şeması.

Adım 6: Prototipler :

Bir prototip , bir kavramı veya süreci test etmek veya çoğaltılması veya öğrenilmesi gereken bir şey olarak davranması için oluşturulmuş bir ürünün erken bir örneği, modeli veya serbest bırakılmasıdır.

Wireframe'ler yapıyı ele alır, örnekler görselleri ele alır ve prototipler kullanılabilirliği (web / app ürünlerinde) kullanır.

Bir prototip ürün yapılır ve daha sonra bu test edilir ve POC (Konsept Prof.) Yapılır, Şimdi Real ürününe gidebiliriz (belli ki herhangi bir değişiklik gerekmiyorsa)

Resimler ve diğer linklerle orijinal makaleye bağlantı