Bir veb saytın dizaynı və dizaynı (dizayn bilgisi olmadan)

Müştərilər üçün sərbəst veb saytlar yaratmağa və ya portfelinizi qurmağa çalışarkən aşağıdakı problemlə qarşılaşa bilərsiniz:

Veb dizaynı barədə heç bir məlumatınız yoxdursa necə bir veb sayt yaradırsınız?

Budur bəzi seçimlər:

  • Dizaynı sizin üçün etmək üçün bir veb dizayner işə götürə bilərsiniz - lakin (yaxşı) dizaynerlər ucuz gəlmir.
  • Fiverr və ya Upwork-da ucuz bir dizayner tapa bilərsiniz - ancaq bunun riskli ola biləcəyini bilirsiniz.
  • Ayrıca pulsuz və ya premium bir mövzu və ya şablon yükləyə bilərsiniz. Ancaq bəzən istədiyiniz hər şeyi etmirlər.

Sizin üçün başqa bir seçim də bəzi əsas veb düzeni və dizayn bacarıqlarını öyrənmək və özünüzün ön hissənizi yaratmaqdır.

(Spoiler: Keçid edib hazır məhsulu görmək istəyirsiniz? Buraya vurun.)

Bu yazını oxuduğunuz zaman əla dizayner olmayacaqsınız. Mürəkkəb veb saytlar peşəkar bir dizaynerlə işləməyinizi tələb edə bilər.

Lakin inanıram ki, əksər kiçik müəssisələr üçün uyğun olan sadə veb saytların planlaşdırılmasını və dizaynını öyrənə bilərsiniz.

Bu metod daxildir:

  • Vizual veb dizaynının əsaslarını öyrənin
  • Özünüz üçün ilham və fikir üçün mövcud veb dizaynları üzərində araşdırma aparın.

Bu, əslində öz veb saytımı yaratmaq üçün istifadə etdiyim strategiyadır! Düzdür, olduqca sadə bir dizayndır, xüsusi bir şey yoxdur. Ancaq bəzən yalnız ehtiyacınız budur.

Vebin necə tərtib ediləcəyini və dizaynının əsaslarını bildikdən sonra portfeliniz üçün və sərbəst müştərilər üçün istifadə edə biləcəyiniz xüsusi veb saytlar yarada bilərsiniz.

Əlbətdə ki, qurduğunuz hər veb sayt sizə təcrübə verir. Vaxt keçdikcə sənətkarlıqla məşğul olmağa davam etdikcə getdikcə daha mürəkkəb dizaynlar yarada biləcəksiniz.

Bu prosesdəki əsas addımlar:

  • Veb saytınızın əsaslarına qərar verin
  • Veb saytınızın tərtibini planlaşdırın
  • Dizaynı bir yerə yığın
  • Son məhsulu genişləndirin

Hər bir addım araşdırma ilə stimullaşdırılır: nə etdiklərini görmək üçün veb saytlarına baxın və veb saytınız üçün yenidən istifadə etmək istədiyiniz hissələri çəkin.

Bir vacib qeyd: Heç bir şəkildə CSS və ya sizin olmayan şəkillərin oğurlanmasını müdafiə etmirəm. (Birincisi, kopyalamaq və yapışdırmaq işindən bir şey öyrənə bilməzsən.)

Bu, yaradıcı fikirlər və konsepsiyalar əldə etmək və onlardan oxşar bir şey yaratmaqdır.

Veb saytınızın əsaslarına qərar verin

Rənglər və ya şriftlər seçməyə başlamazdan əvvəl bu veb saytla bağlı bəzi ümumi suallara cavab verək:

1. Veb sayt hansı işi təbliğ edəcəkdir?

Bir pizzacı, fotostudiya və ya kitab mağazası? Hər hansı bir iş növü bir veb saytdan faydalana bilər ki, bir şey seçə bilərsiniz.

Məqsədlərimiz üçün burada Central Coffee adlı qondarma bir kafe seçirik. Çünki hər kəs qəhvəni sevir, elədir?

2. Veb saytın hansı səhifələri olacaqdır?

Bəzi çox istifadə olunan səhifələr ana səhifə, səhifə məlumatları, əlaqə səhifələri və sənayeyə aid səhifələrdir.

Veb saytın səhifələrini və digər ümumi struktur cəhətlərini öyrənməyin ən yaxşı yolu sürətli bir onlayn araşdırma aparmaqdır.

Mövcud veb saytları araşdırın

Bənzər iş növləri üçün digər mövcud veb saytları yoxlayın. Bu veb saytlardan 3-4-nə baxın və hansı səhifələrə sahib olduqlarını görün.

Veb saytın necə tərtib edildiyini görməyə çalışın və bunlar barədə qeydlər aparın:

  • Veb saytın hansı səhifələri var,
  • Ümumi üslub nədir
  • Gəzib dolaşmaq və şey tapmaq nə qədər asandır
  • Və maraqlarınızı artıran başqa bir şey.

Nümunə veb saytları tapmaq üçün yaxşı bir yer Tema Meşəsidir. Tonlarla pulsuz və premium veb şablonu və WordPress temaları var. Və ən populyar mövzulara sadiq qalsanız, bunların ümumiyyətlə yaxşı dizayn nümunələri olduğunu bilirsiniz.

Budur tapdığım bir tema kafesinin nümunəsi.

The7

Səhifələr: Bölmələri olan bir səhifə veb səhifəsi: Ev, Haqqında, Yer, Təkliflər, Menyu, Xəbərlər, Mətbuat, Blog Yazıları

Stil: müasir və təmiz, yaxşı fotoları ilə

Naviqasiya: naviqasiya asandır

Budur "Chicagodakı bir çayxanada" tapdığım bəzi veb saytlar:

Qurd delikli qəhvə

Səhifələr: Ana səhifə, Blog, Yer / Əlaqə, İş təklifləri

Stil: bir az müasir; Mağazanın fotoları olduqca nostaljikdir

Naviqasiya: Bunun bir kafe olduğu dərhal bəlli deyil. Saytda gezinmek biraz çətindi.

Caffe küçələri

Səhifələr: Bir səhifəlik veb sayt, bölmələr bunlardır: Ev, Caffe (Haqqında), Menyu, Qızartma, Zaman Makinası (Şirələr), Əlaqə Forması

Stil: Sadə və Müasir (Squarespace köməyi)

Naviqasiya: gəzmək olduqca asandır. Sizi hər hissəyə aparan yapışqan üst menyu çubuğunu sevirəm.

Qəhvə hazırlamaq

Səhifələr: Bir səhifəlik veb sayt, bölmələr bunlardır: Ana Səhifə, Haqqında, Saatlar, Yer, Mağaza, İaşə, Tədbirlər, Əlaqə

Stil: Sadə Dizayn, ağ fon bölmələri və mətn arasında tam eni şəkillərin birləşməsidir.

Naviqasiya: gəzmək olduqca asandır

Sawada qəhvəsi

Səhifələr: Ana səhifə, Məlumat, Yemək və İçki, Mətbuat, Əlaqə və Açılış Saatları, Restoranlarımız, İşlərimiz

Stil: Dizayn əsasən fotoqrafiya ilə əlaqədardır və mətn demək olar ki, düşünülmüş kimi görünür

Naviqasiya: Naviqasiya biraz hiyləgərdir - sağ küncdə az qala hamburger menyusunu görmədim.

Öz veb saytınız üçün qeydləri qeyd edin

Artıq bir neçə kafe veb saytına baxdıqdan sonra hansı xüsusiyyətlərin ümumi olduğunu daha yaxşı bilirik. Düşündüyümüzün işlədiyi və işləmədiyi barədə bəzi fikirlərimiz var.

Araşdırmanıza əsasən, artıq öz saytınız üçün qeydlər hazırlamağa hazırsınız.

Düşünürəm ki, Central Coffee-də aşağıdakı bölmələrdən ibarət sadə, bir səhifəlik veb saytına sadiq qalacağıq:

  • Başlıq
  • Evdə
  • haqqında
  • Menyu
  • Yer / əlaqə quran şəxs
  • altbilgi

Veb saytınızın tərtibini planlaşdırın

Artıq veb saytın əsas quruluşunu müəyyənləşdirdikdən sonra hər səhifəni və ya bölməni hər birinə qoymaq istədiyimiz elementlərlə təchiz edəcəyik. Sonda yaratacağımız düzən, tel kafes kimi də bilinir.

Şəbəkədə hələ bir şey dizayn etmirik, yəni hələ heç bir şrift, rəng və ya fotoşəkil yoxdur. Sadəcə hansı məzmunu istədiyimizi və səhifədə təxminən harada olacağını bilirik. Bu nöqtədə daha çox bir plan və ya diaqramdır.

Başlıq

Seven Coffee demo səhifəsindəki və Caffe Streets veb saytındakı ən yaxşı naviqasiya çubuğunu sevirəm.

Hər iki tərəfdə də mərkəzləşmişdir və mən əvvəlcə loqotiplə və ondan sonrakı hissələrlə sola bəraət qazandırmaq istərdim.

Bu masa üstü versiyası üçündür. Tabletlər və mobil telefonlar üçün standart olaraq yalnız başlıqdakı logo və hamburger menyusu var.

Hamburgerin vurulması, bölmə naviqasiyasını göstərmək üçün sağdan açılan iş sahəsinin xaricində bir menyu açacaqdır.

Evdə

Bu bir səhifəlik veb sayt olduğundan veb saytı yüklədiyiniz zaman ekranda görəcəyiniz ilk şey "Ev" səhifəsidir. Yeddi Qəhvənin adının altında bir az şüarının necə olmasını sevirəm.

Düşünürəm ki, arxa planda bir şəkil var ("qəhvə hazırlamaq" kimi) üstündə mətni var. Bu həm masaüstündə, həm də mobil cihazda eynidir.

haqqında

Bütün veb saytlarda qısa bir məlumat bölməsi var, bəzilərində fotoşəkillər var. Kafe ilə bağlı bir bənd əlavə edəcəyəm və istifadəçiləri ziyarətə cəlb etmək üçün mağazanın içərisindən bir neçə fotoşəkil də əlavə edəcəyəm.

Menyu

Saytların hər biri menyulara fərqli baxır:

  • Seven Coffee-də qiymətləri əks olunan menyu elementləri var,
  • Caffe Streets-də yalnız əşyaların siyahısı var,
  • və menyunun PDF-lərinə Qur və Sawada bağlantısı.

Şəxsən telefonumda bir veb səhifəyə baxanda və PDF yükləməyim lazım olanda nifrət edirəm. Beləliklə, sadələşdirilmiş içki və ərzaq menyusuna sadiq qalaraq bir neçə foto əlavə edəcəyəm.

Yer / əlaqə quran şəxs

Veb saytın altındakı yeri, açılış vaxtlarını və əlaqə məlumatlarını doldurmaq istəyirəm. Şübhə edirəm ki, istifadəçilər saytın yuxarı hissəsindən başlayaraq aşağıya fırladınlar.

Əməliyyat çağırışını altına qoysanız, "İndi nədir?" Sualına cavab veriləcəkdir. Bu, qonaqlara kafeyə yol göstərərək hərəkətə keçmələrinə kömək edəcək və inşallah onlara ziyarət verəcəkdir.

altbilgi

Altbilgi olduqca minimal olacaq. Yalnız müəllif hüququ məlumatları olan kiçik bir bar olacaq.

Tam tel kafes

Burada veb saytın masa üstü və mobil versiyasının tam simli kadrlarını tapa bilərsiniz. Bunları Mockflow adlı pulsuz bir onlayn vasitə istifadə edərək yaratdım. Birdən çox layihə istəsəniz pulsuz bir layihə yarada və ödənişli planlarınız ola bilər.

İstifadəsi olduqca asandır və əyləncəli olduğu üçün eskizli stil seçimini sevirəm

Əsas dizayn xüsusiyyətlərinə qərar verin

Yenə də çox ətraflı və qəşəng üslublar yaratmayacağıq. Bununla birlikdə bəzi əsasları anlamalıyıq. Kimi şeylər:

Rəng sxemi

Rəng sxemi sadəcə veb saytda istifadə etdiyiniz müxtəlif rənglərə cavab verir. Təsəvvür edin ki, evinizi rəngləyir və bəzəyirsiniz. Tipik olaraq, əksər otaqlar üçün boz və ağ kimi neytral tonlardan istifadə etmək istəyəcəksiniz. Və vurğulamaq istədiyiniz vacib elementlər üçün parlaq vurğu rəngi və ya ikisi: B. Qısayollar və düymələr.

Bir az rəng ilhamı axtarırsınızsa, Canva'da sınamağınız üçün bir neçə rəng palitrası var.

Central Coffee veb səhifəsi üçün bu Canva linkindən payız kolleksiyasından istifadə edirəm - qəhvəyi çalarlara əsaslanan isti rəng palitrası.

Çayxanalarla birlikdə gələn bu nostalji, rahat hissi yaratmağa çalışıram.

Şriftlər

Veb saytlarında geri sürüşərkən, demək olar ki, hamısı bir sans serif şriftindən istifadə edir ("serifs" olmayan hərflər və ya daktilo mətni kimi son çubuqlar).

Mətninizin əksəriyyəti üçün sadə bir şrift seçərdim, sonra başlıqlar və başlıqlar üçün daha ağır bir şriftlə bir az həvəskar gedə bilərsiniz.

Veb saytınıza pulsuz yükləyə biləcəyiniz şriftləri axtarmaq üçün Google Fonts istifadə edə bilərsiniz. Sadəcə hər bir şrift ailəsi, çəkisi və tərzi sayta əlavə yük yüklədiyindən çoxunu almayın.

Şəkillər / fotoqrafiya

Veb sayt üçün nəzərdə tutulan iş növünə uyğun ümumi üslub və ya əhval-ruhiyyə seçin. Bir çayxanada, ümumiyyətlə yumşaq işıqlandırma, daxili çəkilişlər üçün rahat və ya nostalji hisslər, çayxanada söhbət edən və istirahət edən insanlar, yemək və içki şəkilləri ilə dəvət olunan şəkillər istəyərsiniz.

Şəkillər və loqotiplər üçün veb saytınızda istifadə edə biləcəyiniz şəkillərlə birlikdə bəzi pulsuz qrafik dizayn alətləri var. Bəzi nümunələr bunlardır:

  • Canva
  • Vectr
  • Snappa

Veb saytı genişləndirin

İndi ümumiyyətlə bizə hər şeyin necə qurulduğunu izah edən tel örgü var. Ön tərəfdəki üslublara rəhbərlik etmək üçün dizayn istinadlarımız var.

Ətraflı PSD-lər yaratmaq üçün bir dizaynerimiz olmadığından veb sayt yaratmağa yeni yaratdığımız tel çərçivədən başlayacağıq.

Ümumiyyətlə bir veb saytın ön hissəsini yaratmağa belə davam edirəm:

  1. Veb sayt sənədlərini qurun
  2. Qovluqları və sənədləri yaradın və təşkil edin.
  3. Task Runner-i işə salın. (Bu layihə üçün Gulp istifadə edirəm.)
  4. Hər şablon üçün ayrıca bir HTML faylı yaradın.

Sonra hər HTML şablonu üçün aşağıdakıları edin:

  1. Əsas HTML elementlərindən istifadə edərək skelet quruluşunu yaradın.
  2. Yan elementləri bir-bir düzəldin.
  3. Hər bir element üçün, əvvəlcə hər bölmənin düzgün yerləşdirildiyindən əmin olmaqla, CSS stillərini əlavə edin.
  4. İşləyərkən səhifənin brauzerdə necə göründüyünü yoxlayın və digər düzəlişlər edin.

Veb saytınızın cavab verdiyinə əmin olun

Ümumiyyətlə, bir veb sayt qurarkən üslublarınızın masaüstündə, tabletdə və telefonda qüsursuz görünəcəyini yoxlamalısınız.

Fərqli brauzerlərdən istifadə edərək öz kompüterinizdə masa üstü üslublarını asanlıqla yoxlaya bilərsiniz. Telefonlar üçün, müxtəlif mobil cihazlarda veb saytları təqlid etmək üçün istifadə olunan Chrome geliştirici alətlərindən istifadə edə bilərsiniz.

Hər hansı bir emulyasiya vasitəsinin, faktiki telefonda və ya tabletdə göstərilənlə 100% eyni olmayacağını unutmayın. Üslublarınızı test edərkən veb sayt internetdə olduqda onları real bir telefonda yoxlamaq istəyə bilərsiniz.

Veb saytların necə göstərildiyini yoxlamaq üçün istifadə edə biləcəyiniz bəzi cihaz emulyatorları:

  • Responsinator.com (pulsuz)
  • Quirkools tərəfindən hazırlanmış ekran (pulsuz)
  • Browserstack (pullu) - Browserstack, virtual maşınları həqiqi cihazlarda sınamağa imkan verir.

Hazır məhsul!

Bitmiş Central Coffee veb saytının ekran görüntüsü:

Github.io səhifəmdə özünüz üçün əsl səhifəyə baxa bilərsiniz.

Bir dizayner işə götürmədən bir veb sayt tərtib edib qurdum.

Bu yazını faydalı tapdığınızı ümid edirəm! Aşağıdakı şərhlərdə fikirlərinizi bildirin.

Bu məqaləni bəyəndiniz? Zəhmət olmasa alqış düyməsini press basın (və ya hold), belə ki digər insanlar da tapa bilər!

Kodlamağı öyrənmək istərdinizmi? Coder-coder.com veb saytımda veb inkişafını öyrənməyə dair təlimatlar və digər məqalələr yazıram.

Yeni məqalələr haqqında e-poçt almaq üçün burada qeydiyyatdan keçin.