15 pravidel webové grafiky - PORTA DESIGN
1. Style guide · Logo –⁠ musí být vektorové, potřebujeme i čtvercové logo pro faviconu · Font – všechny řezy písma a zdroj (preferujeme fonty ...
webové grafiky
Asi nebude žádné překvapení, že se nám nejvíc osvědčilo mít vlastní webové grafiky. Sehraný tým šetří čas, a s tím i rozpočty. Ne vždy je to ale možné, a proto vznikl tento blog. Připravili jsme seznam 15 nezbytných pravidel, jejichž dodržování vyžadujeme u každé <anchor>webové grafiky</anchor> a může ušetřit trápení i vám.
Web development | PORTA DESIGN
Web development \| PORTA DESIGN

play

stop

kuk

[![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/6317007e7ce29868efcf0109_logo-porta.svg)](/)

[Naše práce](/nase-prace) [Co umíme](/co-umime) [Kdo jsme](/kdo-jsme) [Proč my](/proc-my) [Kontakt](/kontakt)

[Co umíme](/co-umime)

[UX & Design](/ux-design) [Web development](/web-development) [Webové aplikace](/webove-aplikace) [Product information management](/pimcore) [E-shopy](/e-shopy) [Tiskoviny](/tiskoviny)

# Od microsite po rozsáhlé portály

Funkční a pěkné webové prezentace, které naprogramujeme na míru vašemu byznysu. Všechno vzniká přímo u nás s promyšleným UX a moderním designem.

potřebuji web

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/6504a202cbe527a1d4b8a2e1_andy_web.webp)

Postup návrhu webu

[01  Seznámení](#seznameni) [02  Návrh](#navrh) [03  Frontend](#frontend) [04  Backend](#backend) [05  Dotažení](#dotazeni)

## Jak postupujeme při návrhu webu

###### 01

## Poznávací fáze

Na začátku s vámi probereme, co od webu očekáváte a jaké cíle by měl pro vás plnit. Zajímá nás úplně všechno – váš obchodní model, konkurence, a hlavně zákazníci. [Uživatelskou zkušenost (UX)](https://www.portadesign.cz/ux-design) umíme rozpitvat na atomy.

###### 02

## Prototyp, obsah  a konečně design

Jakmile se naladíme na stejnou vlnu a sebereme data z výzkumu, vytvoříme spolu s vámi prototyp - maketu budoucího produktu. Už ten vzniká ve spolupráci s copywritery a, protože o obsah jde přece až v první řadě. Pak teprve bereme do rukou barvy a pokračujeme designem. Web děláme jenom pro vás - čirá kreativa, žádná šablona.

###### 03

## Umění frontendu

Kódování šablon je čím dál víc tvůrčí a přitom musí zůstat nohama na zemi. Oboje umíme. Náš kód je jednoduchý, udržitelný, prostě takový brněnský funkcionalismus. Ale když to není na překážku, umí být i hravý a zapojit do hry efekty.

###### 04

## Řemeslo backendu

Náš DEV tým je tu od toho, aby vše bylo plně funkční. Mluví plynně několika jazyky (ehm, programovacími), denně šermují s frameworky, operují v repozitářích a noří se do hlubin černé obrazovky. Umíme Pimcore, Drupal i Wordpress.

###### 05

## Dotažení do konce

Spuštění vašeho webu - konečný cíl dějin. Víme o tom, a proto nepolevujeme. Všechno vyladíme, zkontrolujeme, přesměrujeme, nastavíme měření, nasadíme cookie věc a spustíme.

###### Používané technologie

## Náš denní chleba

###### Používané technologie

## Náš denní chleba

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/638dd72c4f9b6d1038f54763_axure.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/638dd72c365b133e04a6e4fe_figma.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/638dd72c0d5f3126b8cc1ef9_uxtweak.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/638dd72cfbd74d2e5b933821_clarity.svg)

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/638dd72cba38ef62b5dfa4a7_hotjar.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/638dd72b75c3ef0242a126d9_miro.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/638dd72c4f9b6d1038f54763_axure.svg)

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c5cef6e054465d81f8_webflow.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c5a8b748e7175c6623_wordpress.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c5d848aefd15681029_drupal.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c563fe4ef34e2d0c0d_graphql.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c519651fc4e9931673_nuxt.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c5f312e5350abc1217_docker.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c54e145c2a9a2f45bd_symfony.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c5eb74df80560c0795_pimcore.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c555e4df9860fec229_elasticsearch.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c595c79cb9e3a2a2a1_mysql.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c564dd027e691caae9_php.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c5cef6e054465d81f8_webflow.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c5a8b748e7175c6623_wordpress.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c5d848aefd15681029_drupal.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c563fe4ef34e2d0c0d_graphql.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c519651fc4e9931673_nuxt.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c5f312e5350abc1217_docker.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c54e145c2a9a2f45bd_symfony.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c5eb74df80560c0795_pimcore.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c555e4df9860fec229_elasticsearch.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c595c79cb9e3a2a2a1_mysql.svg)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/650966c564dd027e691caae9_php.svg)

###### Naše práce

## Jak jsme pomohli našim klientům

[![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cb9f5b398af70205f141a5_spo_6.webp)\
\
![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cb9f5b398af70205f141cd_spo_5.webp)\
\
![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cb9f5b93daf9d34191362c_spo_4.webp)\
\
![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cb9f5b34a90442bd1f0148_spo_3.webp)\
\
![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cb9f5bea43d08fe31590c9_spo_2.webp)\
\
![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cb9f5b5630fcc809ddccb2_spo_1.webp)\
\
![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cb9f5c6ee854edc54ad3c2_spo_h.webp)\
\
**Od kartáčku po štětec**  **Spokar **/  Branding  •  UX  •  Webdesign  •  Copy****](/spokar) [![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cbd6c39b62051ccb25ae6e_nfa6.webp)\
\
![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cbd6c3885c08449157b714_nfa5.webp)\
\
![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cbd6c2461b5b59b27124a6_nfa4.webp)\
\
![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cbd6c32dfc8495d5b1d6f7_nfa3.webp)\
\
![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cbe8d0fa5ccd44969dde8c_naf2.webp)\
\
![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cbd6c378b11f7ce57f2e63_nfa1.webp)\
\
![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64cbd6bae1e61b2fc0bf9bf2_nfa_hl.webp)\
\
**Jednou je málo \#archivujeme**  **Národní filmový archiv **/  UX  •  Webdesign  •  SEO****](/nfa)

[Je toho víc](/nase-prace)

###### Klient říká

Webové stránky Národního filmového archivu slouží nejen široké veřejnosti, ale i expertům z oboru. Bylo tedy třeba najít řešení, které nabídne přehlednou a vizuálně zajímavou formou ucelené informace o naší činnosti, sbírce, službách, které poskytujeme, a také o aktualitách z oblasti audiovizuálního archivnictví. Myslím, že s PORTOU se nám to podařilo, a navíc šlo o velmi příjemnou spolupráci.

###### Jana Lohrová **/  vedoucí oddělení PR NFA**

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/6504a3ab3cd9a2c6ebf9bb6e_pari_web.webp)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/6504a34546513ad92e048e90_design.webp)

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/6511361e4b12e0b03a89cccd_tomica.webp)

###### Na co si v Portě potrpíme

## Proč jít do webu s námi?

###### 01

#### Plníme cíle a pracujeme systematicky

Dostáváme takovou míru svobody, kterou sami uneseme. Někdo si rád přivstane, jinému to jde líp po večerech. Pokud dodržujeme slovo, kvalitu a deadliny, máme ve všem plnou důvěru.

###### 02

#### Umíme prvotřídní design

Pěstujeme hlubokou odpovědnost za práci, protože ve svobodném prostředí je to naše přirozená potřeba. Jsme samostatní, charakterní a je na nás spoleh – na schůzkách, poradách, online i offline.

###### 03

#### Jsme systematičtí, ale ne pedantští

Je z nás cítit drive, rozumíme si a nejsme v křeči: na chodbách, v zasedačce i při callech je slyšet smích. Můžeme si dovolit být sami sebou a to je naše firemní kultura.

###### 04

#### Máme perfektní SEO i marketing

Klienti spoléhají na naše znalosti, a tak je neustále prohlubujeme. Přednášíme laikům i odborné veřejnosti, sdílíme know-how a propojujeme obory. Neustále se ptáme, v čem můžeme být lepší, a to nás žene vpřed už od roku 2007.

[Důvodů je víc](/proc-my)

## S Ondrou můžete probrat vše, co vás zajímá.

ozvěte se
[Umíme toho více](/co-umime)

#### Ondřej Janus

###### Managing Director

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/655b997ff5480f8bae508339_ondra.webp)

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a43d13c335ac7ead3_ln.svg)[**Linkedin**](https://www.linkedin.com/company/porta-design-s-r-o-/)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a94d7eff7dc2658ab_fb.svg) [**Facebook**](https://www.facebook.com/portadesign.cz)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a9e7350e2cc24b9ef_in.svg) [**Instagram**](https://www.instagram.com/portadesign.cz/)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a94d7ef02192658ac_be.svg)**Behance**![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a43d13c335ac7ead3_ln.svg) [**Linkedin**](https://www.linkedin.com/company/porta-design-s-r-o-/)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a94d7eff7dc2658ab_fb.svg) [**Facebook**](https://www.facebook.com/portadesign.cz)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a9e7350e2cc24b9ef_in.svg) [**Instagram**](https://www.instagram.com/portadesign.cz/)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a94d7ef02192658ac_be.svg)**Behance**![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a43d13c335ac7ead3_ln.svg) [**Linkedin**](https://www.linkedin.com/company/porta-design-s-r-o-/)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a94d7eff7dc2658ab_fb.svg) [**Facebook**](https://www.facebook.com/portadesign.cz)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a9e7350e2cc24b9ef_in.svg) [**Instagram**](https://www.instagram.com/portadesign.cz/)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a43d13c335ac7ead3_ln.svg) [**Linkedin**](https://www.linkedin.com/company/porta-design-s-r-o-/)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a94d7eff7dc2658ab_fb.svg) [**Facebook**](https://www.facebook.com/portadesign.cz)![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/631e471a9e7350e2cc24b9ef_in.svg) [**Instagram**](https://www.instagram.com/portadesign.cz/)

☺ 2024 Porta Design - Brno, Česká republika  /  [Ochrana osobních údajů & Cookies](/ochrana-osobnich-udaju-cookies)

Jsme součástí skupiny

[![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/64f881ac1bc15de9f555de7b_proficio-logo-2.svg)](https://proficio.cz)

[Speak English?](/en)

[Úvod](/) [Proč my](/proc-my) [Naše práce](/nase-prace) [Blog](/blog) [Co umíme](/co-umime) [Kariéra](/kariera) [Kdo jsme](/kdo-jsme) [Kontakt](/kontakt)

[LinkedIn](https://www.linkedin.com/company/porta-design-s-r-o-/) [Facebook](https://www.facebook.com/portadesign.cz) [Instagram](https://www.instagram.com/portadesign.cz/)
Behance

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/63281e30830ae4f250fc2692_close.svg)

[Speak English?](/en)

[Úvod](/) [Naše práce](/nase-prace) [Co umíme](/co-umime) [Kdo jsme](/kdo-jsme) [Proč my](/proc-my) [Blog](/blog) [Kariéra](/kariera) [Kontakt](/kontakt)

[LinkedIn](https://www.linkedin.com/company/porta-design-s-r-o-/) [Facebook](https://www.facebook.com/portadesign.cz) [Instagram](https://www.instagram.com/portadesign.cz/)
Behance

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/63281e30830ae4f250fc2692_close.svg)

## Slíbený kontakt

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/63281e30830ae4f250fc2692_close.svg)

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/65085391efbeb282d460b021_ondra_p.webp)

##### Sledujte nás

[FB](https://www.facebook.com/portadesign.cz) [IG](https://www.instagram.com/portadesign.cz/) [in](https://www.linkedin.com/company/porta-design-s-r-o-/)
Be

[Kompletní kontakty](/kontakt)

##### Ondřej Janus

###### Managing Director

[in](https://www.linkedin.com/in/ondrejjanus/)

[+420 774 926 069](tel:+420774926069) [ondrej.janus@portadesign.cz](mailto:ondrej.janus@portadesign.cz)

##### Pro milovníky formulářů

Jméno

Telefon

E-mail

A teď nám to napište

Odesláním formuláře souhlasíte se [zpracováním osobních údajů](/ochrana-osobnich-udaju-cookies).

![](https://cdn.prod.website-files.com/6316f0f948d6c45065e306d1/6508429a9c2bcc25efccc811_giphy-2.gif)

Zpráva zachycena!

Pokusíme se odpovědět co nejdříve.

Ajéje, něco zlobí a formulář ne a ne odletět. Zkuste to prosím za chvíli, nebo nám brkněte.