Veb İnkişafı və Dizayn 101

veb_köçürmə_101Veb İnkişafı və Dizaynının əsaslarını bilmək istəyirsiniz? Zəhmli…


Ancaq bu düşüncə xətti və ya əslində bir sıra problemlər var …

  • Veb saytın olmasının məqsədi nədir? Həqiqətən hamıya ehtiyacı varmı??
  • Əgər belədirsə, keyfiyyətli bir veb saytı necə qurursunuz? Və ya başqa sözlə, keyfiyyətli veb saytını özünüz yaratmağa imkan verən əsas veb inkişafını və dizaynını necə öyrənirsiniz?
  • Daha əhəmiyyətlisi, ilk cəhdlərinizdə keyfiyyətli bir veb sayt qura bilərsiniz? Yoxsa qorxunc yuxarıdakı hər hansı bir nəticəyə ümid etmədən əvvəl arxanızdakı illərə ehtiyacınız var?

Bütün bunlara cavab verək veb inkişafına və dizaynına yeni başlayan bələdçi.

[Spoyler xəbərdarlığı. Bəli, ilk cəhdinizdə keyfiyyətli bir veb sayt qura bilərsiniz.]

Bu Təlimatda nə əhatə olunur?

Əvvəlcə ilk növbədə, oxumağa davam etdiyinizə və veb inkişafını sınamağa qərar verdiyinizə görə şadıq! Budur necə oynayacağınız:

Fəsillər çox sadə şəkildə təqdim olunur, solda əsas məzmun, sağda isə hərəkətli maddələr. Kimi:

Bələdçinin təqdimatı: 1-ci fəsil

İndi necə davam etməli:

  • 1ci oxuyanda: Hamısını yuxarıdan aşağıya oxumağı məsləhət görürük. Bu, mövzuya 10,000 fut yaxşı bir görünüş verəcək və bunun ən vacib hissələrini anlamağınıza kömək edəcəkdir. Ayrıca fərdi tapşırıqların necə yerinə yetirilməsinin əsas vasitələri və metodları ilə təmin edəcəkdir.
  • 2-ci oxunuşda və daha sonra: TOC-dan istifadə edin və sizi ən çox maraqlandıran hissəyə hopun. Ayrıca, hər fəslin yanındakı paylaşma düymələrindən istifadə etməkdən çəkin və ya bağlantıları özünüzə və ya maraqlana biləcək dostlarınıza / ardıcıllarınıza göndərin..

Hazırsınız? Gəlin 1-ci fəsildə gedək.

Bu Bələdçi kimdir?

Əsas veb inkişafı və dizaynını öyrənmək istəyirsinizsə, bu təlimat sizin üçündür. Nə motivasiya ola bilər.

Ayrıca, işə başlamaq üçün əvvəlcədən texniki biliyə ehtiyacınız yoxdur (əsas “veb bacarıqları” xaricində). Bu təlimatın bütün məqamları veb saytlar yaratmaq və veb inkişafını öyrənmək istəyən hər kəs üçün bir növ “101” kursu olmaqdır.

Maraqlı ola biləcəyiniz bəzi ümumi səbəblər:

  • 1. İşiniz üçün veb sayt lazımdır (və özünüzü qura biləcəyinizi görmək istəyirsiniz).
  • 2. Veb inkişafını ehtirasdan və ya müvəqqəti marağından kənar öyrənmək istəyirsən (bu barədə pis bir şey yoxdur).
  • 3. Məktəb üçün bir veb saytına ehtiyacınız var.
  • 4. Veb saytlarını onlayn əldə etmək üçün bir dostunuza və ya ailə üzvünüzə kömək edirsiniz.

Bizə rəhbərlik etmək üçün gedən əsas fikir

Bu vacibdir! Zəhmət olmasa, bunu oxuyan bir inkişaf etmiş bir veb tərtibatçısı olsanız, bizə əsəbləşməyin, amma bütün bu veb inkişaf və dizayn 101 resursunda bizə rəhbərlik edəcək əsas fikir budur:

“Ən aşağı müqavimət yanaşması”

Ən az müqavimət yanaşmasının üç prinsipi budur:

  • Biz molekulyar səviyyədə parçalanmayan şeylər. I.e. proqramlaşdırma dillərinin necə işlədiyinin və ya veb serverin necə işlədiyinin altına gəlmək fikrində deyilik.
  • Biz təkər ixtira etmir. I.e. əgər kimsə verilmiş problemi həll edib həllini təqdim edibsə, bundan istifadə edəcəyik.
  • Biz sadə bir həll zəhmli edir, daha mürəkkəb və zahirən daha işlək bir həll buggy və başa düşülən deyil.

Fəsil 1: Plan

Fikiriniz, veb sayt növü, domen adı və hosting.

Veb sayt qurmadan əvvəl bir plan lazımdır

Göründüyü qədər istehza – 80-ci illərin hit “A-Team” bizə öyrətdi, yaxşı bir plan uğurun açarı.

Bir müddət əvvəl bir veb saytınız var idisə, şübhəsiz ki, başqalarının oxumaq və gözdən keçirmək üçün nəhayət onu çıxartmağın yeganə fikri sizi həyəcanlandırır.

Veb saytınızın zəhmli olmasını istəyirsiniz. Yəqin ki, hansısa dərəcədə görünəcəyini bilirsiniz. Və ya bəlkə də mükəmməl loqonunuz hazırdır.

Amma…

Başlamaq lazım olan yer heç də belə deyil. Əvvəlcədən qurulmuş gözləntilərlə başlasanız, bu, yalnız yol boyu çox qarışıqlığa və sonunda alt nəticə əldə edəcəkdir.

Bunun əvəzinə aşağıdakıları düşünün.

  1. Özünüzü ola biləcək hər hansı bir texniki məqsəddən ayırın. Məsələn, veb sayt texnologiyaları və ya müəyyən veb proqram təminatını öyrənmək məqsədi.
  2. Özünüzə bir əsas sual verin: “Sayt nəyə lazımdır?”

Bu sizin haqqınızda deyil, saytın məqsədi haqqında.

Veb saytınızı qurmadan əvvəl özünüzə sual verməlisiniz

  1. Saytın nəyi əldə etməsi nəzərdə tutulur?
  2. Sayt vasitəsilə təqdim olunan əsas “şey” nələr olacaq? (məsələn, işiniz, məhsul, blog yazılarınız və s.)
  3. Veb saytın xüsusi bir məqsədi olacaqmı? (e-ticarət mağazası, fotoqraf portfeli və s.)
  4. Hədəf auditoriyası kimdir?
  5. Niyə saytın mövzusu ilə maraqlanırlar??
  6. Sayt fərdi auditoriya üzvləri üçün hansı ağrıları həll edir?

Bu son 3 sual haqqında, bir dəqiqə tamaşaçılarla görüşək …

Veb saytın qurulması üçün 2 əsas qayda var. Budur №1 qayda:

 Əvvəlcə oxucu / qonaq gəlir. Onlar veb saytınızı sevindirəcək əsas şəxsdir.

Bir şəkildə veb saytınız sizə aid deyil. Bunlardır.

(Bir neçə dəqiqə müzakirə edəcəyik # 2 qayda.)

Bu sadə təlimatı unutmağınız tamamilə yanlış bir yola yol aça bilər, hətta ətrafındakıların hamısını çaşdıran bir veb sayt tapdığınıza qədər..

“Ugh! İnsanlar bu saytın nə olduğunu başa düşmürlər. Bunlar necə cahil ola bilərlər ?! ” – düşünməyə son verərsən. Ancaq göründüyü kimi, cahil sən idin.

Bunun qarşısını almağın yeganə yolu veb saytınızı oxuyanlarınızla tanış olmaqdan əvvəl qurmaqdır.

Beləliklə … həmin kağızı götürün və yuxarıdakı sualların hamısına cavab verin.

Bitirdikdən sonra veb saytınızda işləyərkən tətbiq edəcəyiniz ən vacib qaydalarınız var.

Bu cavablar davam edərkən olduqca güclü bir vasitə olacaqdır. Veb saytınızla bağlı qərarla qarşılaşdığınız zaman onlara qayıda bilərsiniz.

* Bu * ya da * ki * etməlisən? Cavab vərəqinə gedin və tapın. Geniş və ya dar bir yan çubuğu istifadə etməlisiniz? Cavablara gedin, hədəf oxucu ilə daha çox rezonans verə biləcəyinizi tapın. Və s.

Domain Adları və Veb Hosting

Bir veb sayt sahibi olmaq istəyirsinizsə, bir domen adı və bir veb host lazımdır.

Yaxşı, texniki olaraq danışan bir kompüter veb saytını hamısını öz kompüterinizdə qura bilərsiniz və sonra yerli bir brauzerdən (kompüterinizdə proqram olaraq quraşdırılmış) istifadə edə bilərsiniz, lakin bu 99% üçün yararlı bir həll olmaz hallarda, buna görə də keçək.

Beləliklə, bir ana və bir domen…

Buradakı pis xəbər, hər ikisinin pula başa gəlməsidir.

Yaxşı xəbər … işlərin böyük sxemində o qədər də çox pul deyil. Üstəlik, öyrəndiyiniz zaman bir domen adında və bir veb hostun altında çox sayda kiçik veb sayt da aça bilərsiniz.

Amma əvvəldən başlayaq.

Veb aparıcıları:

  • Sadə dillə desək, veb host – veb saytınızın yerləşdiyi və ziyarətçilərinizin tapa biləcəyi yerdir. Bir şəkildə veb saytlar üçün veb hostlar insanlar üçün mənzillər kimidir. Başlıq altında veb hostlar pul qarşılığında serverlərini icarəyə götürən şirkətlərdir (… veb saytlarınız üçün kiçik mənzillər).
  • Başlamaq üçün standart ortaq bir hosting planı edəcəkdir. Hər ay üçün $ 3 qədər başlayan hər şeyi əldə edə bilərsiniz. Məşhur veb hostların gözəl bir müqayisəsi. Bunu yoxlayın və həmin şirkətlərdən hansınınız sizin üçün uyğun göründüyünə qərar verin. Bununla birlikdə, tövsiyələrimiz SiteGround, A2 Hosting və Dreamhost üçün gedir.

Domenlər:

  • Bir veb ev sahibi bir mənzildirsə, onda bir domen bu mənzilin ünvanıdır. Məsələn, bu veb saytın domeni hostingfacts.com.
  • İşə başlamağın yolu istədiyiniz domen adınızı seçmək və sonra qeydiyyatdan almaqdır. Bir domen adını necə satın alacağınıza dair ətraflı təlimat və burada domen adı generatorlarının siyahısı verilmişdir.

 

Bir Domain Adını seçmək üçün təkliflər və tövsiyələr

Tamam, buna görə bəzi domen qeydiyyata alıcısına getmək və əslində domeni satın almaq bir şeydir, amma necə düzgün domen adını seçirsiniz?

Bir neçə məktəb var:

  • Markalı domen adları. Bunlar mövcud olmayan sözlərdən ibarət olan sahələrdir. Düşünün, Google.com və ya Yahoo.com kimi şeylər. Bu şirkətlər birlikdə gəlməzdən əvvəl bu sözlər heç bir məna daşımırdı. Markalı bir domen adının üstün tərəfi budur ki … yaxşı, yüksək markalı, yadda qalan və saytınızı digərlərindən fərqləndirmək asandır.
  • Açar sözlərə əsaslanan adlar. Bunlar saytın məqsədini izah edən bir ardıcıllıqla qoyulmuş mövcud sözlərdən ibarətdir. Düşünün, Pizza.com və ya StartBloggingOnline.com kimi şeylər. Bu kimi bir domen adı ilə ziyarətçiləriniz, ziyarət etmək istədikləri veb saytın növlərini dəqiq təxmin edə biləcəklər. İşin mənfi tərəfi odur ki, həmin domenlər ümumiyyətlə markalı deyildir.
  • Qarışıq adlar. Bunlar markalı sahələr və sözə əsaslanan domenlərdir. Düşünün, Facebook.com və ya Copyblogger.com. Bu cür adlar veb saytın təbiətinin “bəzi” hissəsini ziyarətçi üçün təklif edir, lakin yenə də yüksək markadır.

Seçdiyiniz domen növündən asılı olmayaraq bəzi ümumi qaydalar:

  • Domen yadda saxlamağı asanlaşdırın.
  • Qısa və sadə olun. Domen nə qədər uzun olarsa, bir o qədər qarışıqdır.
  • .Com əldə edin (mümkündürsə). .Com mövcud əsas “yuxarı səviyyəli” domendir. Başqa bir şey üçün həll etməyin.
  • Difen almamağa çalışın. Adınızı “tort-recipes.com” əvəzinə “cakerecipes.com” kimi tək şəkilli formada alın

Bu fəsildən sonra hazır olacaq şeylər:

  • Bir domen adı.
  • Veb aparıcı.
  • Cavab vərəqiniz – saytınızın məqsədləri və izləyicilərə necə xidmət göstərəcəyi.

Daha çox kömək lazımdır? Budur sizin üçün əlavə oxu:

  • Niyə ortaq hostinq? Müqayisə olunan əsas növlər
  • Bir veb sahibi yaxşı edən 10 şey
  • Doğru domen adını seçmək üçün 12 qayda
  • Hərtərəfli veb planlaşdırma təlimatı

Fəsil 2: Layihə və teleframlama

Veb saytınızın quruluşu ilə birlikdə bir kağız və qələm və cızıq alın

Tamam dizayn mərhələsinə daxil olaq.

Əvvəlcə əvvəlcə, burada işləmək üçün getdiyimiz iş etikası:

  • Bacardığımız qədər qələm və kağızdan istifadə edirik və yalnız sonra kompüterə keçirik. İnanın, kağız üzərində dizayn üzərində işləməyinizə sərf olunan hər dəqiqə, kompüterdə şeylər düzəltməyə başladıqdan sonra bir saat qənaət olunur.
  • Biz iterativ iş görürük … Nəticələri yoxlayırıq »nəticələrini yoxlayın» edilənə qədər təkrarlayın.

1-ci fəsildə veb saytın qurulması qaydası adlandırdığımız bir şeyi qeyd etdik. İndi # 2 qayda üçün vaxt gəldi:

Veb saytın qurulmasının 2 nömrəli qaydası:

Əvvəlcə məzmunu düşünün.

Məzmun veb saytında vacib olan şeydir. Dizayn deyil. Məzmun.

İnsanlar məzmun üçün gəlirlər. Dizayn üçün gəlmirlər. Dizayn yalnız məzmunu çatdırmaq üçün bir vasitədir.

Heç vaxt veb saytınızın necə görünməsindən başlamayın. Məzmundan başlayın. Məzmun. Məzmun. Məzmun.

Bəs “məzmun” dedikdə nə deməkdir? Bir sözlə, veb saytınızdan insanların əldə etmək istədiyi şeydir. Blog yazıları, mağazadakı məhsullar, bir forum qurursanız, forum məqalələri, iş təklifiniz və s.

“Həqiqətən? Görünüşün əsla əhəmiyyəti yoxdur? ” – soruşursan.

Bunu məğlub etmək əvəzinə, bu səhifəyə baxın:

Sadə veb sayt

Bu sadə veb səhifə dizaynın nə olduğunu və onlayn olaraq hansı məqsədlə xidmət etdiyini ən yaxşı izah edir.

Buna görə əvvəlcə məzmunu xatırlayın!

Veb saytın məzmunu və quruluşu

Tamam, buna görə məzmun ən vacib şey olduğundan əvvəlcədən hazır olmalısınız (çoxu). Və ya heç olmasa, nə qədər məzmunun olacağını və hansı formada olacağını yaxşı bilmək lazımdır.

Qeyd. Bu hissənin çətin ola biləcəyini bilirik. Məzmundan başlayaraq veb dizaynı üçün olduqca qeyri-adi görünür, amma həqiqətən sonunda əla nəticə əldə etmək üçün ən yaxşı yoldur. Buna görə oxucu ilə bölüşmək istədiyiniz məzmun və necə təqdim etmək istədiyiniz barədə düşünün.

Növbəti addım ehtiyac duyacağınız fərdi səhifələrin növlərini (ana səhifə, məhsul səhifəsi, kateqoriya səhifəsi, təxminən səhifə, əlaqə səhifəsi, əsas satış səhifəsi, bəzi bülleten abunə açılış səhifəsi, əsas blog siyahısı, fərdi ismarıclar, bəlkə də bir mağaza və başqa hər şey lazım görünsə).

Düşünün, veb saytdakı məzmununuzu təşkil etməyin ən təsirli yolu nədir?

Bütün bunları kağız üzərində edin. Çox güman ki, yerində bir şəkil çəkmə proqramını öyrənməkdən daha asan və daha sürətli olacaq.

Misal:

məzmun-quruluş

Bir tel arkasını bir-birinə vurun

Veb dizaynındakı bir tel şifrə sadəcə bir səhifə sxematik və ya planıdır – veb saytın çərçivəsini təmsil edən vizual bələdçi (Vikipediya bizə deyir).

Sim kartaları zəhmlidir! Onları internetdə görünmək üçün etdiyimiz çox şey üçün istifadə edirik. Məsələn, burada bu bələdçi üçün bir sim kartı var:

Bir tel telini bir yerə yığın

Gördüyünüz kimi, yenə də kağızdadır. Bu cür iş üçün çox sayda tətbiq olsa da, onlardan istifadə etməyi məsləhət görmürük. Onlar pro dizaynerlər üçün əla ola bilər, ancaq bir başlanğıc və ya araçı bir insan yalnız bunları öyrənmək üçün vaxt itirəcək və nəticədə qələm və kağız vasitəsilə əldə etdikləri şeylərdən çox yaxşılaşmayacaqlar..

Beləliklə, tel tellərini necə düzəltmək olar?

Başlayarsanız, iki yanaşma var:

  • Güclü hiss edirsinizsə, axınla gedin və yalnız çəkin (həmişə mükəmməl bir həll deyil).
  • Şəbəkə qurğusunun düzgün şəkildə necə qurulması barədə tez bir məlumat əldə edin (adətən daha yaxşıdır).

Sonuncular üçün buraya gedin – əla bir bələdçi.

(Əvvəlki addımda sadaladığınız hər bir vacib səhifənin növündən bir sim kartı yaratdığınızdan əmin olun.)

Bu fəsildən sonra hazır olacaq şeylər:

  • Saytdakı məzmunun çox hissəsi və ya heç olmasa çoxu proqnozlaşdırılır (məsələn, istifadəçi tərəfindən yaradılan məzmuna etibar edirsinizsə, əvvəlcədən bunu etmək çətindir).
  • Veb saytınızın məzmun quruluşu bir qrafik şəklində hazırlanmışdır.
  • Ayrı-ayrı səhifələrin ehtiyac duyduğunuz bir sim kartı.

Əlavə oxu:

  • Veb sayt məzmununu planlaşdırmaq üçün 9 addım
  • Veb dizaynı üçün yeni? Buradan başlayın.

Fəsil 3: UX və UI

İstifadəçi təcrübəsinin və istifadəçi interfeysinin əhəmiyyətini əsla qiymətləndirməyin

İstifadəçi Təcrübəsi və İstifadəçi İnterfeysi kimi.

WebDesignerDepot bizə ikisinin kifayət qədər poetik tərifini verir:

UI, yəhər, qarışqalar və hökmlərdir.

UX, ata minmək və mal-qara sürmək iqtidarındadır.

Daha praktik tərif üçün:

  • UI istifadəçi saytınıza baxdıqda gördüyü şeydir.
  • UX bu barədə necə düşünürlər.

Cütlük və necə yaxşı yerinə yetirildiyi, əsasən veb saytınızın son istifadəçi / qonaq üçün faydalılığını müəyyənləşdirir.

Həm UX, həm də UI dizaynı özlərində böyük mövzudur və son nəticədə rol oynayan çox sayda kiçik element var.

Bir sözlə, yalnız səyahətə başlamısınızsa öyrənə biləcəyiniz çox şey var.

Beləliklə, burada bir UX və UI dizayn kursunu sındırmaq əvəzinə, bir neçə vacib elementi qeyd edək və daha sonra oxumaq üçün başqa yerə göndərək..

İstifadəçi Məqsədləri

UX istifadəçi məqsədləri haqqında … Hədəflərinizin çoxu deyil … İstifadəçi hədəfləri.

Tamam, bu nə deməkdir? Əvvəlcə veb saytınızın məqsədinə – əvvəlki fəsillərdə işlədiyiniz şeyə qayıdın. Veb saytınızı yaratmağınızın səbəbi və istifadəçi / qonaq üçün necə kömək etməsi.

Ziyarətçinin hədəfinə necə çevrilir? … Qonaq saytınıza gəldikdə əldə etmək və ya əldə etmək istədiyi bir şey nədir? Məqsədləri budur.

Bu Məqsədlərə çatmaq nə qədər asandır?

Daha sonra aşağıdakı suala diqqət yetirin.

  • Ziyarətçi öz məqsədlərinə asanlıqla nail ola bilərmi? – Sadə bir şəkildə gəldikləri dəqiq məlumatı əldə edə bilirlərmi??

Buna cavab vermək üçün tel siminizə, məzmun quruluşunuza və iki şeyi yoxlamaq lazımdır.

Məzmun quruluşunun və düşündüyünüz səhifələrin istifadəçi nöqteyi-nəzərindən mənalı olduğundan əmin olun. Əhəmiyyətli səhifələr arasında sərbəst və qarışıq olmayan bir şəkildə gedə biləcəyinə əmin olun.

Əslində, burada veb saytın ziyarətçilərə dəyər verdiyinə əminik.

Bütün bunları özünüz müəyyənləşdirmək çətin deyil, elə deyilmi??

Bu fəslin “sonrakı oxu” bölməsində sadalanan mənbələri nəzərdən keçirməyiniz tövsiyə olunur … amma danışmaq üçün “hack” də cəhd edə bilərsiniz.

Məhz, qurmaq istədiyiniz saytlara bənzər veb saytlara baş çəkdiyiniz zaman nəyi əsəbləşdirdiyinizi düşünün? Bəlkə əldə etmək həqiqətən çətin olan bəzi məlumatlar və ya saytı çaşdıran bir interfeys elementi var.

Qeydlər edin, nəticə çıxarın, veb saytınızla eyni səhvlərə yol verməyin.

Emosiya vasitəsi kimi istifadə

Saytınızın UI və UX-lərində işləyərkən, əsasən məqsədiniz ziyarətçinizdə müəyyən bir duyğu yaratmaqdır.

Onları müəyyən bir şəkildə hiss etmələrini istəyirsən, bu da onları müəyyən bir şəkildə hərəkət etmələrinə inandıracaqdır. Beləliklə, veb saytınızı həqiqətən faydalı edir.

İşin emosional hissəsində işləmək üçün ən yaxşı vasitələrdən biri rəngdir.

Rənglərin fərqli mədəniyyətlərdə fərqli mənaları var. Bu fərqləri anlamaq işinizi çox asanlaşdıra bilər. Budur gözəl fırıldaqçı vərəq.

İstədiyiniz rəngləri (bəlkə də) istifadə etmək istədikdə, rənglə işləyərkən bir neçə ümumi qaydalar var:

  • Bir-birinə yaxşı gedən bir neçə rəngdən ibarət əsas rəng sxemini seçin. Budur əla rəng sxemi generatoru.
  • Vurğu rənginizə çevriləcək bir rəng seçin – hərəkət düymələri, düymələr almaq və s. İstifadə ediləcək rəng. Əsasən istifadəçinin diqqətini tələb edən hər şeyi seçin..

Tipoqrafiya

Bir çox hallarda mətbəə veb saytın quruluş oyununu qazandığınız (və ya itirdiyiniz) yerdir.

Tipoqrafiyanı tamamilə unutmaq və yalnız Arial üçün hər şeyi istifadə etmək çox asandır.

Məsləhət deyil.

Bu günlərdə, xüsusi şriftlərlə işləmək asandır və saytınızdakı xüsusi şriftləri işə salmaq üçün texniki bir şey etməyə ehtiyacınız yoxdur..

Bu günlərdə böyük, möhtəşəm mətbəə çox dəbdədir və bu da dizaynerin işini – xüsusən yeni başlayan dizaynerin işini çox asanlaşdırır.

Bu saytı yoxlayın, məsələn:

bonobos

Heç nə hiss etmədin? Bəli, şriftlər böyükdür və əla görünürlər!

Bunun üzərində necə işləmək olar:

  • Ümumiyyətlə, hər veb dizaynın iki növ mətnə ​​ehtiyacı var: başlıqlar və paraqraflar. Əksər hallarda hər birinə bir şrift edəcəkdir.
  • Google Şriftlərə gedin – veb saytınızda istifadə edə biləcəyiniz Google-un pulsuz şriftlər kitabxanası – və həqiqətən xoşladığınız başlıq şriftini axtarın.
  • Sonra, bu şriftin adını götürün və Font Pair-də axtarın – əvvəlcədən hazırlanmış şifrə birləşmələrinin kitabxanasıdır..
  • Zəhmli görünən cütləşmə seçin.
  • Hər iki şriftin adlarını yazın, sonra sizə lazım olacaq.

Bunu bu şəkildə etmək, prosesinizi sürətləndirəcək və yenə də əla nəticə verəcəkdir.

Misal üçün, Google Fonts-da Bree Serif adlı bir şrift tapdıq.

Bree-Serif

Sonra Font Pair’ə apardıq və sayt Bree Serif’in Açıq Sans ilə yaxşı getdiyini təklif etdi. Mükəmməl:

Bree-Serif-açıq-sans

Son quruluş

Nəhayət, son addım!

Bu fəslin bütün məqamı saytınız üçün istifadə edəcəyiniz son bir plan / quruluşa enməkdir. Bu anda, dizaynı və UI ilə etmək istədiyiniz işlərlə bağlı əmin olmalısınız.

Bu fəsildən sonra hazır olacaq şeylər:

  • İstifadəçi hədəfləriniz dəqiq göstərilmişdir.
  • Simli telləriniz bu məqsədlərin çaşdırıcı olmadığından əmin olmaq üçün iki dəfə yoxlanıldı.
  • Rəng sxemi seçildi.
  • Tipoqrafiya başa düşdü.
  • Veb saytın bütün quruluşu / quruluşu / təşkili.

Əlavə oxu: 

  • UX Jurnalı
  • UX Booth
  • Veb dizaynında rəngin arxasında duran psixologiya və duyğu
  • İstifadəçi təcrübəsi dizaynı nədir? Baxış, alətlər və mənbələr
  • Bir veb sayt üçün ağıllı iş məqsədlərini təyin etmək
  • Effektiv mətbəə yaratmaq üçün 8 qayda

Fəsil 4: WordPress, HTML və ya şablonlar?

Hansı marşruta getməyə qərar verin – məzmun idarəetmə sistemləri və ya sıfırdan kodlaşdırın

İşdə əsl, əllər çirkli, başlıq altındakı iş başlayır!

Bu da yəqin ki, prosesin qorxulu hissəsidir (etiraf edin!).

Bir dəfə, qələm və kağızı bir kənara qoyub, bəzi proqramlarla işləməyə başlamaq üçün ən uyğun vaxtdır.

Və qapıdan dərhal sonra bir çox sual var …

  • HTML öyrənməliyəm?
  • Nə CSS haqqında?
  • Hazır HTML veb sayt şablonları mənim üçün hiylə edər?
  • Mənə PHP kimi bir proqramlaşdırma dilini öyrənmək lazımdırmı??
  • Eşitdim ki, WordPress bu günlərdə bir sayt qurmağın yoludur.
  • Mən Squarespace Super Bowl reklamı gördüm. Bununla nə var?
  • Bu şey Joomla nədir? Və ya Drupal?
  • və davam edir.

Bunların hamısının cavabı bəli.

Bəli, olduğu kimi bu işlərin hamısını və ya hamısını edə bilərsiniz və hansı yolu seçməyiniz yalnız sizin ixtiyarınızdadır.

Dediyimiz şey budur ki, burada # 1 yaxşı yanaşma yoxdur. Bütün bunlar veb inkişafı ilə necə əlaqəli olmağınızdan, veb sayt qurma əsaslarının nə qədərini öyrənmək istədiyinizdən, keyfiyyətli bir saytın nə qədər tez qurulmasına ehtiyacınız olduğundan və sonradan necə özelleştirilebilirinizdən asılıdır..

Beləliklə, bu fəsildən irəli necə davam edəcəyik. Birincisi, ən yaxşısını təyin edən şəxsi seçin:

  • a) Veb inkişafının nə olduğunu, bütün əsasları, veb saytın bütün işlərini və veb saytın işini təmin edən bütün mexanizmləri öyrənmək istəyirəm..
  • b) Mənim üçün ağır atletikanın çox hissəsini idarə edəcək etibarlı veb sayt qurucusundan necə istifadə etməyi öyrənmək istəyirəm.
  • c) Nə edəcəyimi bilmirəm. Mən yalnız özümü qura biləcəyim və düzgün işləyəcək bir veb sayt istəyirəm.

Cavab verdi a)? 5-ci bölməyə keçin.

Cavab verildi b)? 6-cı bölməyə keçin.

Cavab verildi c)? Bu yazını nəzərdən keçirin və sonra geri qayıdın (bu, mükəmməl yolu seçməyinizə kömək etməlidir):

  • 8 ən yaxşı blog və veb bina platforması nəzərdən keçirildi … Hər platform öz üstünlükləri və eksiklikləri ilə birlikdə təsvir edilir və resurs ayrıca ehtiyaclarınız üçün ən yaxşı seçim (Wix və ya SB) təklif edir..

Oxumusunuz? Əla! Yuxarıdakı şəxslərdən hansını səni daha yaxşı təsvir edir – a) və ya b)?

Yolda lazımlı ola biləcək vasitələr:

  • Qrafika: Paint.NET, Gimp, Pixlr.
  • Kod yazma: Notepad ++, TextWrangler, SublimeText.
  • İşin idarə edilməsi: Trello.
  • Dizayn: rəng sxemləri, Google şriftləri, buradakı alətlər.
  • Fotoqrafiya: Unsplash, AllTheFreeStock

Fəsil 5: HTML, CSS-ə giriş & Javascript

Veb saytlar necə qurulmuş bir reallıqdır

Bu fəsildə veb inkişafının çılpaq əsaslarını göstərəcəyik, ən vacib şərtləri izah edəcəyik və sonra bilik və bacarıqlarınızı artıra biləcəyiniz bəzi xüsusi mənbələrə göndərəcəyik..

HTML

HTML veb saytların dilidir. Hər bir veb səhifə bir anda tikilir və ya HTML-yə çevrilir.

Məsələn, burada oxuduğunuz bu təlimatın HTML quruluşunu görmək üçün klaviaturanızdan “Ctrl + U” düyməsini basın.

HTML veb səhifədə gördüyünüz hər bloku müəyyənləşdirir. Günün sonunda bir veb səhifədə bir şey göstərmək üçün onu HTML-yə çevirmək lazımdır.

HTML’i effektiv şəkildə öyrənmək üçün internetdə mövcud olan (pulsuz və ya pullu) kurslardan birinə yazılmağı məsləhət görürük. Ən yaxşıların bəzilərini Codeacademy və ya Treehouse saytında tapa bilərsiniz.

Məsələn, burada HTML və CSS haqqında Codeacademy-də xüsusi bir bölmə var.

CodeCademy ana səhifəsi

Beləliklə HTML-yə hərtərəfli yanaşma.

CSS

CSS – cansıxıcı texniki detalları atlamaq – veb səhifədə görünən hər şeyi tərtib etmək üçün cavabdehdir.

CSS HTML etiketlərini və sonra strukturları götürür və onlara styling əlavə edir. Bənzər şeylər: qalın mətn, rəng tənzimləmələri, kölgələr, planlar, hətta animasiyalar, indi əsasən CSS ilə aparılır.

Bunun tam olaraq necə işlədiyini daha yaxşı başa düşmək üçün Codeacademy-də bu sürətli kursa keçin.

Daha dərindən öyrənmək üçün həm Kodakademiya, həm də Treehouse-da CSS hissələrini yoxlayın.

JavaScript, jQuery, Bootstrap və s.

JavaScript veb saytınıza bəzi dinamik hərəkətləri təqdim etməyə imkan verən bir proqramlaşdırma dilidir. Məsələn, veb formaları doğrulamaq kimi şeyləri edə bilərsiniz və ya istifadəçi ilə əlaqəli səhifəni yenidən yükləmədən daha sadə bir şəkildə qarşılıqlı əlaqə qura bilərsiniz. Budur w3 məktəbləri tərəfindən gözəl bir dərs.

Bunu nəzərə alaraq, jQuery daha az kodlaşdırma ilə qabaqcıl şeylər yaratmağa imkan verən JavaScript kitabxanasıdır. Bir veb geliştiricisi üçün çox lazımlıdır. Daha çox məlumat burada.

Nəhayət, Bootstrap çox maraqlı bir ixtiradır. Əvvəlcə Twitter tərəfindən təqdim edilmiş, bu, əvvəlcədən qurulmuş ümumi sayt elementlərinin əksəriyyətini çatdıraraq veb saytın qurulması prosesini sürətləndirən bir ön mühitdir. Mürəkkəb səslənir, elə deyil?

Ancaq belə deyil. Bu başlanğıc kursunu Codeacademy-də yoxlayın (yeri gəlmişkən, əvvəlcə Bootstrap’ı necə öyrəndik).

Bu fəsildən sonra hazır olacaq şeylər:

  • Əsasən, HTML / CSS veb saytınızın ilk layihəsi. Oradan, son nəticəni təkrarlamağa və inkişaf etdirməyə başlaya bilərsiniz.

Fəsil 6: Veb sayt qurma platformaları

İlk saytınızı qurursunuz? WordPress, Joomla və ya Drupal kimi pulsuz veb platformalarını sınayın

Fəsil 6: Veb sayt qurma platformaları

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Bir çubuq silkələyə biləcəyinizdən daha çox veb qurucusu var. (Əgər şeyləri sarsıdan bir adam olsanız.)

Tamam zarafatlar kənara.

Şübhəsiz ki, şeyləri əl ilə necə kodlaşdırmağı öyrənmək istəyiniz yoxdursa, şübhəsiz ki, sizə kömək edə biləcək çoxsaylı həll yollarıdır..

Qeyd. Unutmayın ki, 1-4-cü fəsillərdə müzakirə etdiyimiz hər şey yenə də burada tətbiq olunur. Əlinizə xas olmayan bir sayt qurma həlli ilə müraciət etsəniz də, son məhsulu istifadəçilərə dost etmək və hər kəsin hədəflərini uyğunlaşdırmaq üçün diqqətli olmalısınız. Sayt qurma vasitələri məhz budur … alətlər.

Ən asan başa düşülənlərdən başlayaraq:

SquareSpace

Super Bowl zamanı reklam verən yeganə veb platformadır.

Bir sözlə, hər kəs tərəfindən istifadə edilə bilən çox lazımlı bir həll. Əvvəlcədən bacarıq tələb olunmur.

Klassik veb saytlar, bloglar, hətta e-ticarət mağazalarını yaratmağa imkan verir, hətta onlar haqqında bir araşdırma yazdıq. İnterfeys və istifadə prosesini başa düşmək olduqca asandır, üstəlik, Squarespace uşaqlar çox maraqlı dərslər verirlər. Bunları burada yoxlayın.

WordPress

Sözün düzü, biz WordPress-i sevirik.

Çox vaxt, veb sayt qurmaq üçün mükəmməl bir platformadır. Mürəkkəblik və istifadə rahatlığı arasında mükəmməl bir tarazlığa malikdir və əsasən sonsuz olaraq özelleştirilebilir.

WordPress animasiya

Həm də hal hazırda hamısının ən populyar veb sayt platformasıdır. WordPress yaradıcısı tərəfindən paylaşıldığı kimi – Matt Mullenweg – WordPress indi bütün internetin 25% -nə sahibdir. O insanların hamısı səhv ola bilərmi??

Tamam, buna görə WordPress ilə başlamaq üçün əsasən domeninizə və hostinqə ehtiyacınız var. WordPress proqramının özü tamamilə pulsuzdur.

Başlamaq üçün bu yollardan birini izləməkdə çekinmeyin:

a) “Tez başlanğıc yolu”

  • WordPress-in qurulmasının və günortadan sonra saytınızı işə salmağın sadələşdirilmiş yolunu öyrənmək üçün buraya gedin.
  • Rəsmi qovluqdan pulsuz bir mövzu seçin – saytınızın məqsədlərinə uyğun olduğuna və düzeni / dizaynınızın istədiyiniz quruluşdan uzaq olmadığına əmin olun (biraz düzəldəcəksiniz).
    • Mövcud bir mövzunu necə düzəldəcəyinizi öyrənmək üçün bu iki mənbəyi yoxlayın.
    • Alternativ olaraq, lazımlı bir istifadəçi interfeysi ilə tənzimlənə biləcək çox məqsədli bir mükafat mövzusunu seçə bilərsiniz (heç bir kodlaşdırma yoxdur). X mövzusu belə bir şeyin yaxşı bir nümunəsidir.
  • Əlavə xüsusiyyətlər əldə etmək üçün ən populyar və ən yaxşı pluginləri quraşdırın.

b) “Dərin yol”

  • Bir onlayn kurs vasitəsilə WordPress öyrənməyə başlayın. Treehouse zəhmli birini təklif edir.
  • Yuxarıdakı kimi mövzu və plaginləri seçin. Alternativ olaraq, öz mövzunu yerdən düzəldin.

Sonda, WordPress, ehtimal ki, bazarın ən çox yönlü veb platformasıdır. Bununla, yalnız bloglar və ya sadə biznes saytları deyil, demək olar ki, hər hansı bir veb sayt qura bilərsiniz. Budur, düşünməyə vadar etmək üçün, WordPress-dən istifadə etmək üçün 47 (!) Fərqli yolun siyahısı.

Joomla və Drupal

Bir-birindən bir az fərqli olmasına baxmayaraq, Joomla və Drupal, daha inkişaf etmiş veb layihələr üçün əla məzmun idarəetmə sistemləridir.

Onlar o qədər də güclü dizayn müdrik deyillər, lakin yüksək səviyyədə özelleştirilebilir və planınızda ola biləcəyiniz hər hansı bir veb saytı idarə edə bilirlər..

Bəzən, layihənizin mürəkkəbliyindən asılı olaraq, mənimsəmək üçün daha çox vaxt və daha çox səy tələb edə bilər.

Daha dərin təlim üçün, həm Joomla, həm də Drupal üçün Lynda.com’da zəhmli kurslar var.

Bu fəsildən sonra hazır olacaq şeylər:

  • WordPress və ya başqa bir platformadan istifadə etmək qərarına gəlməyinizdən asılı olmayaraq veb saytınızın ilk layihəsi tamamilə qurulmuşdur.
  • Bunun ilkin hədəflərinizə, hədəf auditoriyanıza uyğun olduğundan və yaxşı UX təmin etdiyindən əmin olun.

FƏSİL 7: Mobil cavab verici dizayn

İnternetə baxmaq üçün insanların 60% -dən çoxu mobil telefon və tabletlərdən istifadə edir

Mobil cavabdehlik indi veb saytın qurulmasında çox vacib bir cəhətdir, ehtimal ki, əvvəlkindən daha çoxdur.

Budur, bütün məsələ budur:

Əsasən, bu anda, əvvəllər olduğundan internetə girmək üçün mobil cihazlardan istifadə edənlər daha çoxdur. Əslində, masaüstü internet istifadəçilərindən daha çox mobil internet istifadəçilərinin daha çox olduğu təxmin edilir (75,1% və 52.7%).

Ancaq problem var.

Hər veb sayt dizaynı mobil cihazlarda dar qapıdan görünmək üçün optimallaşdırılmır.

Bəzi ümumi problemlərə aşağıdakılar daxildir:

  • şriftlər çox kiçikdir,
  • nizamın özü ümumiyyətlə kiçik bir ekrana uyğunlaşmır,
  • və ya saytın mobil telefonlarda mövcud olmaması üçün istifadə olunan texnologiya.

Bu yerdə mobil cavab vermə düşüncəsi meydana çıxır.

Cavab verən bir veb, baxıldığı mühitə cavab verir. Bir masaüstü kompüterdirsə veb sayt müəyyən bir şəkildə təqdim edir. Mobil olsa, başqa bir şəkildə təqdim edir.

Budur daha yaxşı bir izahat: Heck-in Veb Dizaynına Nəzarət?

Beləliklə, hazırda görüləsi şey veb saytınızın mobil cihazlarda işlədiyini yoxlamaq və əmin olmaqdır. Bunu yoxlamaq üçün öz cihazlarınızdan istifadə edin, eyni zamanda Google’un mobil testini sınayın və ya Cavablı Dizayn Testeri kimi bir alətə müraciət edin.

Problemlər varsa, onları düzəltməlisiniz.

Bəzi həllər:

  • Məsul veb dizaynı – necə ediləcəyi
  • Təxminən 15 dəqiqə ərzində veb saytı necə cavablandırmaq olar

FƏSİL 8: hamısını bir yerə gətirmək

Əsasları bilirsiniz, indi növbəniz var

Tutun, biz yaxınlaşırıq!

Bu, olduqca uzun səyahətimizdəki son fəsildir.

Bu nöqtədə ilk veb saytınızı düzəltməlisiniz … WordPress, əl ilə qurulmuş HTML / CSS, bəzi veb sayt qurucusu və ya iş üçün seçdiyiniz digər vasitələrlə olun..

Bir sözlə, təbrik edirəm! Ancaq hələ görüləsi bir neçə şey var:

  • 1 və 2-ci fəsillərdə müzakirə etdiklərimizi iki dəfə yoxlayın. Məqsədlərin həqiqətən son istifadəçi üçün işlədiyinə və veb saytın qarışıq olmadığına əmin olun..
  • Kod quruluşunuzu W3C-nin işarələmə yoxlama xidməti vasitəsilə yoxlayın.
  • Saytda heç bir təhlükəsizlik problemi olmadığını yoxlayın. Bunun üçün Sucuri tərəfindən skanerdən istifadə edin.
  • Cəmiyyətdən rəy alın. Başqalarının sizin işiniz barədə nə düşündüyünü yoxlayın. Sitepoint-də keçirilən forumlar bunun üçün yaxşı ola bilər.

Bu mənbəyi ilk oxuduğunuz təqdirdə sizə bir neçə dəfə geri qayıtmağı və gələcək təhsiliniz üçün istinad sənədi kimi baxmanızı məsləhət görürük..

Əvvəldə dediyimiz kimi, TOC-dan istifadə etməkdən çekinməyin və fəsildən fəsildə və mənbəyə uyğun gördüyünüz kimi mənbəyə keçin.

Nəhayət, maraqlanırıq … veb saytın yaradılması, veb inkişafı və ya dizaynı ilə bağlı ən böyük probleminiz nədir? Zəhmət olmasa şərhlərdə və ya Twitter vasitəsilə paylaşın. Hamımız qulaqdayıq!

Oxuduğunuz üçün təşəkkürlər, siz zəhmlisiniz!

  • Cəmi116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector