background design element dropbackground design element dropbackground design element drop

Webové stránky pro prodejce aut v JavaScriptu, Vue.js a Strapi

Úvod

Naším úkolem bylo vytvoření responzivních webových stránek pro prodejce sportovních a luxusních vozů. Tyto internetové stránky měli mít redakční systém.

Hlavním požadavkem bylo vytvořit unikátní, moderní a přitom jednoduchý design.

Tvorba webových stránek nám zabrala 3 měsíce a vývoj probíhal od dubna 2019 do června 2019.

Klient je italský podnikatel z Milána a nové webové stránky naleznete zde: https://www.evomsport.com

Car dealer website redesign preview
Ukázka nových webových stránek pro prodejce aut

Hlavní úkol - redesign stávajících webových stránek

Předchozí webové stránky byly pouze dočasným řešením. Obsahovaly základní, defaultní grafickou šablonu. Design nebyl přizpůsobený na míru potřebám klienta.

HTML a CSS kódování grafické šablony bylo na velmi špatné úrovni. Administrace internetových stránek nebyla postačující.

Požadavky na nové stránky:

  1. navrhnout nový moderní a unikátní design pro internetové stránky,
  2. nakódovat HTML a CSS nových webových stránek,
  3. přidat redakční systém a administraci www stránek,
  4. zlepšit SEO,
  5. a optimalizovat rychlost načítání webu.

Popis procesu vývoje webu

  1. Nejprve jsme udělali průzkum, zjistili jsme potřeby a stanovili hlavní cíle pro nové webové stránky.
  2. Následně jsme provedli design proces, prototypování a wireframe nebo-li drátěné schema internetových stránek.
  3. Po odsouhlasení klientem následovalo kódování a implementace stránek.
  4. Poté jsme web otestovali. Testovali jsme jak podporu v různých typech prohlížečů, tak i rychlost načítání.
  5. Nakonec jsme nastavili doménu, hosting a celý web spustili. 

Výsledek - redesign webu s redakčním systémem a administrací

Klient má nyní nový, krásný a moderní web s přehledem aut, značek a podstatných informacích o jeho společnosti. Web má nově redakční systém, kde může klient administrovat všechny potřebné informace a obsah webu.

Nový web má nově popis služeb, seznam značek a automovilů k prodeji, kontaktní formulář a to celé v novém, krásném designu na míru.

Jako výsledek jsme klientovi doručili:

  • nový, krásný a moderní web design na míru,
  • nakódování HTML šablony pro všechny stránky a podstránky,
  • optimalizaci rychlosti načítání webu,
  • vylepšené a optimalizoavné SEO,
  • a redakční systém a možnost administrace webu, hlavně přidávání a editace vozů a značek automobilů.

Použité technologie pro tvorbu webu - JavaScript, Vue.js a Strapi.io

Pro tento web jsme vybrali JavaScript framework Vue.js za pomocí knihovny Nuxt.js a se Strapi.io jako redakční systém pro administraci. 

Vue.js je open-source JavaScript framework pro vývoj a tvorbu uživatelských rozhraní a tzv. single-page aplikací (SPA).
https://vuejs.org

Strapi.io je open source redakční systém, tzv. headless CMS, specializovaný pro frontend vývojáře. Dovoluje uživateli správu obsahu internetových stránek a následnou distribuci tohoto obsahu kamkoli dále.
https://strapi.io

Nuxt.js je knihovna nad Vue.js, která umožňuje snadnější vývoj frontend webů a aplikací.
https://nuxtjs.org

Některé další zajímavé knihovny, které jsme na webu použili:

  • Vue-video-player - Vue.js komponenta pro video.js přehrávač,
  • Vue-i18n - umožnuje překlad a vícejazyčnost webu,
  • Vee-validate - slouží pro validování formulářů na webu.

Náš tým, který na vývoji pracoval

Rascasone tým pro vývoj frontendu webu ve Vue.js a Strapi.io:

  • projektová manažerka Štěpánka,
  • senior JavaScript, Vue.js a Strapi.io vývojář Dominik,
  • Vue.js frontend vývojář Šimon,
  • a tester a QA inženýr Jakub.

Nový web popsaný ve větším detailu

  1. Úvodní stránka webu
  2. JavaScript slider na míru
  3. Speciální animace a efekt s červenou tečkou
  4. Kontaktní formulář s validací
  5. Responzivní design a optimalizace pro mobily
  6. Speciální design menu
  7. Redakční systém a administrace webu
  8. Vícejazyčná podpora
  9. Optimalizace rychlosti načítání a SEO
  10. Napojení na backend serveru přes REST API

1. Úvodní stránka webu

Hlavním požadavkem bylo mít senzační a unikátní úvodní stránku webu.

Úvodní stránka webu na míru
Úvodní stránka webu na míru

2. JavaScript slider na míru

JavaScript slider na míru se speciální animací a efektem s červenou tečkou má čtyři polohy a automatický mění obsah. Případně po najetí tlačítkem myši se také obrázek mění.

JavaScrip slider na míru
JavaScrip slider na míru

3. Speciální animace a efekt s červenou tečkou

Efekt s červenou tečkou je designový prvek, který je přítomen na celém webu. Dodává webu exkluzivitu a designový nadstandard přesně jak klient požadoval.

Speciální animace a efekt s červenou tečkou
Speciální animace a efekt s červenou tečkou

4. Kontaktní formulář s validací

Kontaktní formulář je jednoduchý, ale použili jsme několik lehkých designových vylepšení. Formulář má také validace vstupů jako je email a jméno. Pokud validace neprochází není možné formulář odeslat.

Kontaktní formulář s validací
Kontaktní formulář s validací

5. Responzivní design a optimalizace pro mobily

Responzivní design a optimalizace pro mobily je základ každého nového webu v roce 2019, tudíž i tyto webové stránky jsou plně responzivní pro různé typy zařízení a různé velikosti obrazovek.

Responzivní design a optimalizace pro mobily
Responzivní design a optimalizace pro mobily

6. Design menu navigace

Pro navigaci a menu jsme použili speciální design, který je uživatel vidí přes celou obrazovku.

Design menu navigace
Design menu navigace

7. Redakční systém a administrace webu

Administrace dat a redakční systém je postaven na open source frameworku Strapi. Strapi nám umožnil namodelovat veškerá data a obsah, tak jak jsme potřebovali, snadno a rychle.

Redakční systém a administrace webu
Redakční systém a administrace webu
Redakční systém a administrace webu
Redakční systém a administrace webu

8. Vícejazyčná podpora

Vícejazyčná podpora na webových stránkách byla jedním z hlavním požadavků klienta. Plánuje také přidat i jazyk s potřebou RTL nebo-li right-to-left zobrazení.

Vícejazyčná podpora
Vícejazyčná podpora

9. Optimalizace rychlosti načítání webu a SEO

Rychlost načítání je v roce 2019 důležitým faktorem pro SEO a pro přívětivost webu. Uživatelé nechtějí čekat na dlouhé načítání obsahu. Na obrázku je vidět, že výkonová optimalizace a optimalizace rychlosti se nám povedla na 100%.

Optimalizace rychlosti načítání webu a SEO
Optimalizace rychlosti načítání webu a SEO

10. Napojení na backend serveru přes REST API

Frontend webu je implementován pomocí Nuxt.js a připojen k databázi MongoDB přes REST API.

Napojení na backend serveru přes REST API
Napojení na backend serveru přes REST API

Potřebujete vytvořit podobný web nebo webové stránky?

Pokud ano, tak nás kontaktujte a my Vám rádi pomůžeme, ať už s úvodní analýzou nebo dokončením celého webu.





  • Vue.js