Šablóna nového webu ako uchopiť vizuál vášho · krok 3 tvorba dizajnu krok 4 programovanie...

Ako uchopiť vizuál vášho nového webu

Šablóna alebo dizajn na mieru?

Michal Fehér, Studio TEM

DISCLAIMER

Obsah

02

Ako obsah súvisí s vizuálom a prečo je jeho správa dôležitá?

05

03

Na aké kompromisy sa treba pripraviť?

06RÝCHLOSŤ DODANIA

Kedy bude váš web online?

KVALITA

TERMINOLÓGIAČo znamená šablóna a z čoho

sa šablóna skladá

01

CENAAký budget si treba pripraviť v

závislosti od vizuálu

04PROCES

Ako prebieha vývoj webu v jednotlivých prípadoch

SPRÁVA OBSAHU

TERMINOLÓGIA01Čo znamená šablóna a z čoho sa šablóna skladá

DIZAJN NA MIERUKreslí dizajnér “na zelenej lúke”.

Výsledok presne podľa gusta klienta.Unikátny dizajn, použitý iba raz.

Dizajn, ktorý sa prepoužíva.Dedikované firmy.Zlomok ceny.Multipurpose.

ŠABLÓNA

6

ZÁKLADNÝ ROZDIEL

HTML ŠABLÓNANaprogramovaný čisto vizuál.

Dá sa použiť na akýkoľvek CMS systém.Bez žiadnej logiky / funkčnosti.

HTML šablóna môže byť CMS šablónou.19 $.

Na konkrétny systém.Funkčné.59 $.

WORDPRESS ŠABLÓNA

15

ROZDELENIE ŠABLÓN

PROCES02Ako prebieha vývoj webu v jednotlivých prípadoch

POSTUP TVORBY WEBU - DIZAJN NA MIERU

KROK 5Napojenie vizuálu na WP

KROK 2Vytvorenie Wireframe

KROK 3Tvorba dizajnu

KROK 4Programovanie vizuálu

KROK 1Zadefinovanie informačnej

architektúry

INFORMAČNÁ ARCHITEKTÚRA

- najvyšší level abstrakcie- akým spôsobom sa prezentujú informácie návštevníkovi- slovne zadefinovaná štruktúra stránky

- “Stránka bude mať horizontálne menu, veľkú úvodnú fotku s názvom spoločnosti, galériou, predstavenie nášho teamu a v dolnej časti sa budú zbierať e-mailové adresy do newslettera”

- podklady:- cieľová skupina- konverzie a CTA- analýza konkurencie

- RD







architektúry

WIREFRAME

- ako majú konkrétne elementy vyzerať- bez farieb, obrázkov, fontov- definícia typov stránok (layout)- ideálne aj s finálnymi textami







architektúry

DIZAJN

- farbičkovanie- fonty, farby, rozostupy, pozadia, obrázky, …- výsledkom je hotový vizuál stránky- posledný rozumný krok na feedback







architektúry

PROGRAMOVANIE VIZUÁLU

- HTML- klikateľný prototyp (nefunkčný)- výsledkom je šablóna







architektúry

NAPOJENIE VIZUÁLU NA WP

- funkčnosť a logika

POSTUP TVORBY WEBU - HTML ŠABLÓNA

KROK 4Napojenie vizuálu na CMS


KROK 3Výber elementov(možná editácia)


architektúry

POSTUP TVORBY WEBU - WORDPRESS ŠABLÓNA

KROK 2Výber elementov


architektúry

PROCES ZHRNUTIE

INFORMAČNÁ ARCHITEKTÚRA

WIREFRAME

VÝBER ELEMENTOV

DIZAJN

PROGRAMOVANIE VIZUÁLU

NAPOJENIE VIZUÁLU NA CMS

Na mieru HTML WP

RÝCHLOSŤ DODANIA

Kedy bude váš web online?

03

RÝCHLOSŤ DODANIA

DIZAJN NA MIERU- dizajn 5 - 13 MD- FE vývoj 5 - 10 MD- BE vývoj 2 - 15 MD- klient - intenzívny

feedback HTML ŠABLÓNA

WP ŠABLÓNA

- odpadá dizajn- z veľkej miery odpadá

FE vývoj- klient - menšia

kolaborácia

- odpadá aj BE vývoj- “klikačka”

1,5 - 2 mesiace

3 týždne

1 týždeň

CENA04Aký budget si treba pripraviť v závislosti od vizuálu

CENA

DIZAJN NA MIERU- agentúra (full service vs.

outsource)- väčšia “vata”- väčšinou sa rozdeľuje na

2 celky - IA + WF, zvyšok HTML ŠABLÓNA

WP ŠABLÓNA

- agentúra alebo freelancer- najväčšía úspora - dizajn a

FE- treba rátať s úpravami

- freelancer

180 hodín

80 hodín

30 hodín

CENA

750 €

9 000 €4 000 €

DIZAJN NA MIERU

HTML ŠABLÓNA

WORDPRESS ŠABLÓNA

“If you think it's expensive to hire a professional to do the job, wait until you hire

an amateur.”

—RED ADAIR

SPRÁVAOBSAHU05Ako to súvisí s vizuálom a prečo na tom záleží?

SPRAVOVANIE OBSAHU

DIZAJN NA MIERU- admin na mieru

HTML ŠABLÓNA

WP ŠABLÓNA

- admin na mieru

- generický admin

Admin na mieru

KVALITA 06Na aké kompromisy sa treba

pripraviť?

DEFINÍCIA KVALITY

RýchlosťResponzivita

UXSEO

Funkčnosť

KVALITA

DIZAJN NA MIERU- funkčnosť- rýchlosť- UX- responzivita- SEO HTML ŠABLÓNA

WP ŠABLÓNA

- funkčnosť - rýchlosť- UX- responzivita- SEO

- funkčnosť- rýchlosť- UX- responzivita- SEO

Tak kvalitné ako dodávateľ

Dodávateľ + autor témy

ZHRNUTIE

DIZAJN NA MIERU

Žiadna slepá uličkaCelý proces plne pod kontrolou

Unikátny dizajnŽiadne kompromisy

● Výstredné značky a firmy● Potreba odlíšíť sa● Ak existuje konkrétna predstava

Vyžaduje sa intenzívnejšia spoluprácaNáročnejšie na predstavivosť

VÝHODY NEVÝHODY

PRE KOHO JE VHODNÉRýchlosť dodania

Cena

Spravovanie obsahu

Kvalita

HTML ŠABLÓNA

Kľúčové fázy pod kontrolouJednoduché prispôsobenie a úpravy

Pomer cena/kvalita/rýchlosť dodania

● Pre firmy, ktoré sa potrebujú vizuálne inšpirovať

● Ako prvý web● Prezentačné weby

Môžu sa spáliť hodinyNáročnejšie odhady

VÝHODY NEVÝHODY


Cena

Spravovanie obsahu

Kvalita

WORDPRESS ŠABLÓNA

Veľa dodávateľov

● Prototyp, MVP● “Len aby sme mali web”● Stránky, kde sa neplánuje pridávať

obsah

Neskúsení dodávateliaNedá sa na tom stavať

VÝHODY NEVÝHODY


Cena

Spravovanie obsahu

Kvalita

SITUÁCIA U NÁS

70%30% 0%

ZÁVEREČNÉ RADY

Neriešte web po večeroch a cez víkendy

Vyberte si vhodného dodávateľa pre veľkosť vašej firmy

Identifikujte stránky, ktoré sa vám páčia a prečo

Vizuál feedbackujte vo fáze dizajnu

ĎAKUJEMMichal Fehér

[email protected] www.studiotem.com

@fehermichal

Michal Fehér

Šablóna nového webu ako uchopiť vizuál vášho · krok 3 tvorba dizajnu krok 4 programovanie...

Documents