http://mis.martin-simunek.cz/index.php?action=history&feed=atom&title=Wireframe 2026-04-18T20:06:59Z Historie editací této stránky MediaWiki 1.17.0 http://mis.martin-simunek.cz/index.php?title=Wireframe&diff=4324&oldid=prev 2021-02-25T10:27:51Z

<p>Doplnění o NinjaMock.com a komentáře.</p> <table style="background-color: white; color:black;"> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Starší verze</td> <td colspan='2' style="background-color: white; color:black;">Verze z 25. 2. 2021, 10:27</td> </tr><tr><td colspan="2" class="diff-lineno">Řádka 5:</td> <td colspan="2" class="diff-lineno">Řádka 5:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Lze kreslit na papír nebo v&amp;nbsp;softwarových nástrojích.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Lze kreslit na papír nebo v&amp;nbsp;softwarových nástrojích.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Slouží k&amp;nbsp;rychlému ověření základního návrhu uživatelského rozhraní.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Slouží k&amp;nbsp;rychlému ověření základního návrhu uživatelského rozhraní.</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">* Po schválení uživatelem je podkladem pro:</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">** Grafiky, kteří vymyslí vizuální podobu prvků (musí vědět, jak velké prvky jsou, kolik textu na nich je,...).</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">** Programátory, kteří musí navržený vzhled realizovat (programátor musí dodržet to, co je ve wireframe, nemůže dělat další úpravy).</ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>== Proč? ==</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>== Proč? ==</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Snížit čas (a&amp;nbsp;tedy i&amp;nbsp;cenu) prvního návrhu.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Snížit čas (a&amp;nbsp;tedy i&amp;nbsp;cenu) prvního návrhu.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div>== <del class="diffchange diffchange-inline">Řešíme </del>==</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>== <ins class="diffchange diffchange-inline">Co zobrazuje? </ins>==</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">; Musí zachytit</ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Jak budou prvky rozmístěny na stránce/obrazovce.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Jak budou prvky rozmístěny na stránce/obrazovce.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Jaký typ prvku to je: obrázek, nadpis, článek textu.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Jaký typ prvku to je: obrázek, nadpis, článek textu.</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">* Typickou velikost prvku na obrazovce.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">** Bude to jeden řáden textu, nebo článek o&amp;nbsp;5&amp;nbsp;odstavcích. (Není důležité, jestli 4&amp;nbsp;nebo 6&amp;nbsp;odstavců, ale je rozdíl, jestli dva řádky, nebo 3&amp;nbsp;stránky textu.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">** Jak veliký obrázek bude.</ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">== </del>Neřešíme <del class="diffchange diffchange-inline">==</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">; </ins>Neřešíme</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Grafický vzhled prvků &amp;mdash; ten řeší až v&amp;nbsp;další fázi grafik.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Grafický vzhled prvků &amp;mdash; ten řeší až v&amp;nbsp;další fázi grafik.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Konkrétní obsah &amp;mdash; ten řeší až v dalších fázích copywriter.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>* Konkrétní obsah &amp;mdash; ten řeší až v dalších fázích copywriter.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div>== <del class="diffchange diffchange-inline">Nástroje </del>==</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>== <ins class="diffchange diffchange-inline">Kreslení na papír </ins>==</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline"># Papír</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>* V&amp;nbsp;prvních fázích je nejrychlejší a&amp;nbsp;vždy po ruce.</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">#</del>* V&amp;nbsp;prvních fázích je nejrychlejší a&amp;nbsp;vždy po ruce.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline"># Jednoduché </del>nástroje</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">== Rychlé on-line </ins>nástroje <ins class="diffchange diffchange-inline">==</ins></div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">#</del>* Rychlý náčrt, snadné sdílení</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>* Rychlý náčrt, snadné sdílení<ins class="diffchange diffchange-inline">.</ins></div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">#</del>* Příklad: [https://wireframe.cc/ Wireframe.cc] &amp;mdash; náčrtky se snadno sdílí, ale kdokoli má odkaz, může i&amp;nbsp;upravovat!</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>* Příklad: [https://wireframe.cc/ Wireframe.cc] &amp;mdash; náčrtky se snadno sdílí, ale kdokoli má odkaz, může i&amp;nbsp;upravovat!</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline"># </del>Komplexnější nástroje</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">#</del>* <del class="diffchange diffchange-inline">Často placené</del>.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">== </ins>Komplexnější <ins class="diffchange diffchange-inline">on-line </ins>nástroje <ins class="diffchange diffchange-inline">==</ins></div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">#</del>* Vytvoření modelu již zabere značné množství času.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>* <ins class="diffchange diffchange-inline">Obvykle zdarma pouze v&amp;nbsp;omezené verzi.</ins></div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">#</del>* Umí sledovat vazby mezi stránkami.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">* Díky on-line podobě snadná spolupráce více uživatelů</ins>.</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">#</del>* Příklad: [https://moqups.com/ Moqups.com] &amp;mdash; Zdarma jen jeden projekt (v&amp;nbsp;něm libovolné množství stránek, ale max. 200 objektů celkem)</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>* Vytvoření modelu již zabere značné množství času.</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">#</del>* Příklad: [https://webflow.com/ Webflow.com]</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>* Umí sledovat vazby mezi stránkami.</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">#</del>* Příklad: [https://www.axure.com Axure]</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>* Příklad: [https://moqups.com/ Moqups.com] &amp;mdash; Zdarma jen jeden projekt (v&amp;nbsp;něm libovolné množství stránek, ale max. 200 objektů celkem)</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">#* Desktopová </del>aplikace<del class="diffchange diffchange-inline">: </del>[https://www.justinmind.com/ JustInMind]</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">* Příklad: [https://ninjamock.com/ NinjaMock.com] &amp;mdash; Zdarma do 200 objektů, nelze exportovat.</ins></div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div>#<del class="diffchange diffchange-inline">*</del>* Návrh od wireframe až po prototyp webu či mobilní aplikace.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>* Příklad: [https://webflow.com/ Webflow.com]</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div>#<del class="diffchange diffchange-inline">*</del>* Umožňuje vazbu mezi obrazovkami.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>* Příklad: [https://www.axure.com Axure]</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div>#<del class="diffchange diffchange-inline">*</del>* Výsledkem je jednoduchý HTML náhled výsledné aplikace.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div>#<del class="diffchange diffchange-inline">* Desktopová aplikace: </del>[https://www.adobe.com/cz/products/xd.html Adobe XD] &#160;</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">== Desktopové </ins>aplikace <ins class="diffchange diffchange-inline">==</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">* Nepotřebují výpočetní výkon provozovatele, větší šance, že budou zdarma.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">* Komplikovanější spolupráce více návrhářů na jednom projektu.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline"># </ins>[https://www.justinmind.com/ JustInMind]</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>#* Návrh od wireframe až po prototyp webu či mobilní aplikace.</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>#* Umožňuje vazbu mezi obrazovkami.</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>#* Výsledkem je jednoduchý HTML náhled výsledné aplikace.</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div># [https://www.adobe.com/cz/products/xd.html Adobe XD] &#160;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># [https://pencil.evolus.vn/ Pencil.Evolus.vn]</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># [https://pencil.evolus.vn/ Pencil.Evolus.vn]</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Svobodná alternativa</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Svobodná alternativa</div></td></tr> <tr><td colspan="2" class="diff-lineno">Řádka 42:</td> <td colspan="2" class="diff-lineno">Řádka 56:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># Musí být jasné, co wireframe popisuje:</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># Musí být jasné, co wireframe popisuje:</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Nadpisu uveďte konkrétní.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Nadpisu uveďte konkrétní.</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div>#* Obsah odstavců textu obvykle stačí jen „šedé čáry“ nebo „Lorem ipsum“.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>#* Obsah odstavců textu obvykle stačí jen „šedé čáry“ nebo „Lorem ipsum“. <ins class="diffchange diffchange-inline">(Ale musí být jasná typická velikost odstavce.)</ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Dopište k&amp;nbsp;wireframe popis &amp;mdash; o&amp;nbsp;jakou obrazovku se jedná, který případ použití řeší, co jednotlivé prvky znamenají.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Dopište k&amp;nbsp;wireframe popis &amp;mdash; o&amp;nbsp;jakou obrazovku se jedná, který případ použití řeší, co jednotlivé prvky znamenají.</div></td></tr> </table>

Spravce http://mis.martin-simunek.cz/index.php?title=Wireframe&diff=4046&oldid=prev 2020-12-01T21:22:34Z

<p><span class="autocomment">Nástroje: </span> Přidán JustInMind.</p> <table style="background-color: white; color:black;"> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Starší verze</td> <td colspan='2' style="background-color: white; color:black;">Verze z 1. 12. 2020, 21:22</td> </tr><tr><td colspan="2" class="diff-lineno">Řádka 30:</td> <td colspan="2" class="diff-lineno">Řádka 30:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://webflow.com/ Webflow.com]</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://webflow.com/ Webflow.com]</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://www.axure.com Axure]</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://www.axure.com Axure]</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">#* Desktopová aplikace: [https://www.justinmind.com/ JustInMind]</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">#** Návrh od wireframe až po prototyp webu či mobilní aplikace.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">#** Umožňuje vazbu mezi obrazovkami.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">#** Výsledkem je jednoduchý HTML náhled výsledné aplikace.</ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Desktopová aplikace: [https://www.adobe.com/cz/products/xd.html Adobe XD] &#160;</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Desktopová aplikace: [https://www.adobe.com/cz/products/xd.html Adobe XD] &#160;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># [https://pencil.evolus.vn/ Pencil.Evolus.vn]</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># [https://pencil.evolus.vn/ Pencil.Evolus.vn]</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Svobodná alternativa</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Svobodná alternativa</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Desktopová aplikace, instalujete lokálně (stačí zkopírovat nainstalovanou verzi)</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Desktopová aplikace, instalujete lokálně (stačí zkopírovat nainstalovanou verzi)</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>== Doporučení a&amp;nbsp;časté chyby při tvorbě wireframe ==</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>== Doporučení a&amp;nbsp;časté chyby při tvorbě wireframe ==</div></td></tr> </table>

Spravce http://mis.martin-simunek.cz/index.php?title=Wireframe&diff=3956&oldid=prev 2020-10-27T10:51:22Z

<p>Doplněno varování na možnost upravovat náčrty ve wireframe.cc</p> <table style="background-color: white; color:black;"> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Starší verze</td> <td colspan='2' style="background-color: white; color:black;">Verze z 27. 10. 2020, 10:51</td> </tr><tr><td colspan="2" class="diff-lineno">Řádka 22:</td> <td colspan="2" class="diff-lineno">Řádka 22:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># Jednoduché nástroje</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># Jednoduché nástroje</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Rychlý náčrt, snadné sdílení</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Rychlý náčrt, snadné sdílení</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div>#* Příklad: [https://wireframe.cc/ Wireframe.cc]</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>#* Příklad: [https://wireframe.cc/ Wireframe.cc] <ins class="diffchange diffchange-inline">&amp;mdash; náčrtky se snadno sdílí, ale kdokoli má odkaz, může i&amp;nbsp;upravovat!</ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># Komplexnější nástroje</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># Komplexnější nástroje</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Často placené.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Často placené.</div></td></tr> </table>

Spravce http://mis.martin-simunek.cz/index.php?title=Wireframe&diff=3954&oldid=prev 2020-10-22T09:17:43Z

<p>Doplnění kapitoly „Doporučení“.</p> <table style="background-color: white; color:black;"> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Starší verze</td> <td colspan='2' style="background-color: white; color:black;">Verze z 22. 10. 2020, 09:17</td> </tr><tr><td colspan="2" class="diff-lineno">Řádka 34:</td> <td colspan="2" class="diff-lineno">Řádka 34:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Svobodná alternativa</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Svobodná alternativa</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Desktopová aplikace, instalujete lokálně (stačí zkopírovat nainstalovanou verzi)</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Desktopová aplikace, instalujete lokálně (stačí zkopírovat nainstalovanou verzi)</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">== Doporučení a&amp;nbsp;časté chyby při tvorbě wireframe ==</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"># Musí být jasné, co wireframe popisuje:</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">#* Nadpisu uveďte konkrétní.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">#* Obsah odstavců textu obvykle stačí jen „šedé čáry“ nebo „Lorem ipsum“.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">#* Dopište k&amp;nbsp;wireframe popis &amp;mdash; o&amp;nbsp;jakou obrazovku se jedná, který případ použití řeší, co jednotlivé prvky znamenají.</ins></div></td></tr> </table>

Spravce http://mis.martin-simunek.cz/index.php?title=Wireframe&diff=3943&oldid=prev 2020-10-13T08:54:40Z

<p>Doplnění podmínek free verze u Moqups.com.</p> <table style="background-color: white; color:black;"> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Starší verze</td> <td colspan='2' style="background-color: white; color:black;">Verze z 13. 10. 2020, 08:54</td> </tr><tr><td colspan="2" class="diff-lineno">Řádka 27:</td> <td colspan="2" class="diff-lineno">Řádka 27:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Vytvoření modelu již zabere značné množství času.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Vytvoření modelu již zabere značné množství času.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Umí sledovat vazby mezi stránkami.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Umí sledovat vazby mezi stránkami.</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div>#* Příklad: [https://moqups.com/ Moqups.com] &amp;mdash; Zdarma jen jeden projekt (<del class="diffchange diffchange-inline">ale </del>libovolné množství stránek)</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>#* Příklad: [https://moqups.com/ Moqups.com] &amp;mdash; Zdarma jen jeden projekt (<ins class="diffchange diffchange-inline">v&amp;nbsp;něm </ins>libovolné množství stránek<ins class="diffchange diffchange-inline">, ale max. 200 objektů celkem</ins>)</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://webflow.com/ Webflow.com]</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://webflow.com/ Webflow.com]</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://www.axure.com Axure]</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://www.axure.com Axure]</div></td></tr> </table>

Spravce http://mis.martin-simunek.cz/index.php?title=Wireframe&diff=3899&oldid=prev 2020-09-24T08:54:25Z

<p><span class="autocomment">Nástroje: </span> Přidáno Adobe XD</p> <table style="background-color: white; color:black;"> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Starší verze</td> <td colspan='2' style="background-color: white; color:black;">Verze z 24. 9. 2020, 08:54</td> </tr><tr><td colspan="2" class="diff-lineno">Řádka 30:</td> <td colspan="2" class="diff-lineno">Řádka 30:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://webflow.com/ Webflow.com]</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://webflow.com/ Webflow.com]</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://www.axure.com Axure]</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://www.axure.com Axure]</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">#* Desktopová aplikace: [https://www.adobe.com/cz/products/xd.html Adobe XD] </ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># [https://pencil.evolus.vn/ Pencil.Evolus.vn]</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># [https://pencil.evolus.vn/ Pencil.Evolus.vn]</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Svobodná alternativa</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Svobodná alternativa</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Desktopová aplikace, instalujete lokálně (stačí zkopírovat nainstalovanou verzi)</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Desktopová aplikace, instalujete lokálně (stačí zkopírovat nainstalovanou verzi)</div></td></tr> </table>

Spravce http://mis.martin-simunek.cz/index.php?title=Wireframe&diff=3898&oldid=prev 2020-09-23T09:38:02Z

<p><span class="autocomment">Nástroje: </span> Přidána desktopová aplikace Pencil.</p> <table style="background-color: white; color:black;"> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Starší verze</td> <td colspan='2' style="background-color: white; color:black;">Verze z 23. 9. 2020, 09:38</td> </tr><tr><td colspan="2" class="diff-lineno">Řádka 30:</td> <td colspan="2" class="diff-lineno">Řádka 30:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://webflow.com/ Webflow.com]</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://webflow.com/ Webflow.com]</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://www.axure.com Axure]</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Příklad: [https://www.axure.com Axure]</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"># [https://pencil.evolus.vn/ Pencil.Evolus.vn]</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">#* Svobodná alternativa</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">#* Desktopová aplikace, instalujete lokálně (stačí zkopírovat nainstalovanou verzi)</ins></div></td></tr> </table>

Spravce http://mis.martin-simunek.cz/index.php?title=Wireframe&diff=3897&oldid=prev 2020-09-23T09:03:48Z

<p>Oprava odkazu na Wireframe.cc</p> <table style="background-color: white; color:black;"> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Starší verze</td> <td colspan='2' style="background-color: white; color:black;">Verze z 23. 9. 2020, 09:03</td> </tr><tr><td colspan="2" class="diff-lineno">Řádka 22:</td> <td colspan="2" class="diff-lineno">Řádka 22:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># Jednoduché nástroje</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># Jednoduché nástroje</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Rychlý náčrt, snadné sdílení</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Rychlý náčrt, snadné sdílení</div></td></tr> <tr><td class='diff-marker'>&minus;</td><td style="background: #ffa; color:black; font-size: smaller;"><div>#* Příklad: [<del class="diffchange diffchange-inline">http</del>://<del class="diffchange diffchange-inline">www.</del>wireframe.cc Wireframe.cc]</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>#* Příklad: [<ins class="diffchange diffchange-inline">https</ins>://wireframe.cc<ins class="diffchange diffchange-inline">/ </ins>Wireframe.cc]</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># Komplexnější nástroje</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div># Komplexnější nástroje</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Často placené.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>#* Často placené.</div></td></tr> </table>

Spravce http://mis.martin-simunek.cz/index.php?title=Wireframe&diff=3896&oldid=prev 2020-09-23T06:43:32Z

<p>Vytvoření základu stránky.</p> <p><b>Nová stránka</b></p><div>[[Category:VSE]][[Category:Informatika]][[Category:Softwarové inženýrství]][[Category:UI_UX]]<br /> <br /> == Co je to? ==<br /> * Zjednodušený návrh rozložení prvků uživatelského rozhraní.<br /> * Lze kreslit na papír nebo v&amp;nbsp;softwarových nástrojích.<br /> * Slouží k&amp;nbsp;rychlému ověření základního návrhu uživatelského rozhraní.<br /> <br /> == Proč? ==<br /> * Snížit čas (a&amp;nbsp;tedy i&amp;nbsp;cenu) prvního návrhu.<br /> <br /> == Řešíme ==<br /> * Jak budou prvky rozmístěny na stránce/obrazovce.<br /> * Jaký typ prvku to je: obrázek, nadpis, článek textu.<br /> <br /> == Neřešíme ==<br /> * Grafický vzhled prvků &amp;mdash; ten řeší až v&amp;nbsp;další fázi grafik.<br /> * Konkrétní obsah &amp;mdash; ten řeší až v dalších fázích copywriter.<br /> <br /> == Nástroje ==<br /> # Papír<br /> #* V&amp;nbsp;prvních fázích je nejrychlejší a&amp;nbsp;vždy po ruce.<br /> # Jednoduché nástroje<br /> #* Rychlý náčrt, snadné sdílení<br /> #* Příklad: [http://www.wireframe.cc Wireframe.cc]<br /> # Komplexnější nástroje<br /> #* Často placené.<br /> #* Vytvoření modelu již zabere značné množství času.<br /> #* Umí sledovat vazby mezi stránkami.<br /> #* Příklad: [https://moqups.com/ Moqups.com] &amp;mdash; Zdarma jen jeden projekt (ale libovolné množství stránek)<br /> #* Příklad: [https://webflow.com/ Webflow.com]<br /> #* Příklad: [https://www.axure.com Axure]</div>

Spravce