Případ pro kódování vašich drátěných rámů

Práce jako návrhář den za dnem může být namáhavé. Naštěstí se toto pole rozšířilo a proces se stal jednodušším. Existuje mnoho bezplatných nástrojů a zdrojů.

Drátěné rámy přinášejí eleganci designovým maketám. Jedná se o základní strukturu webové stránky s odstraněnými barvami a vylepšeními.

Jsou používány k zobrazení designových konceptů pouze s holými základy a mohou poskytnout užitečný pohled na jakýkoli projekt.

Většina drátových rámů je vytvořena v softwarových sadách, jako jsou například Adobe Photoshop a Fireworks, ale některé webové stránky umožňují vytvářet snímky v drátěném rámečku přímo v prohlížeči.

V tomto příspěvku přecházíme kódováním základního obrazu drátěného rámečku v HTML a CSS a uvidíme, jak může prospěch kreativnímu procesu.

Proč se obtěžovat?

Proč trávíte čas načrtnutím struktury webových stránek? V některých případech by to mohlo být zbytečné, ale může vám to pomoci, když se uvíznete v koleji nebo se snažíte vidět velký obrázek.

To může být prospěšné jak pro návrháře, tak pro klienty. V placené práci jste zodpovědní za spokojenost klienta. Zobrazování základní struktury jejich webových stránek, které se brzy připraví, může klientům poskytnout úlevu a pocit kontroly nad celým procesem.

Ale pokud je design velmi jednoduchý nebo má jednoduchou strukturu, pak by to nemělo cenu stát za vytvoření drátu; vymalování celé věci ve Photoshopu, s tlačítky a barvou, může být stejně rychlé.

Rozhodování o tom, jaké kroky je třeba udělat, vyžaduje čas a kritické myšlení. Koneckonců, drátěný rám je jen nástroj. To je podceňováno mnoha webových designérů, ale překvapivě užitečné, jakmile pochopíte.

Prototypování drátěných rámů v kódu

Již řadu let byl návrhářský software Adobe přední sada pro tvorbu drátových rámů, ale web prošel značnými změnami a stále se vyvíjí.

Vzestup standardů kódování a nárůst Dokumentaci HTML5 jsou velké kroky směrem ke společnému webu. Nyní kódování základního wireframe v HTML a CSS není nic víc práce než řešení práce v ohňostrojů.

Pomocí drátových rámů můžete útočit na projekt z různých úhlů. Můžete dokonce vyzkoušet kompatibilitu s technikami a prohlížeči CSS2 a CSS3. Věci nemusí být na začátku složité; drátový rám jednoduše slouží jako pevný základ pro začátek kódování.

Sdílení obsahu je také snazší s drátovým rámem. Můžete mít všechny potřebné soubory hostitele na libovolném webovém serveru a můžete nastavit demo adresář a předat živé aktualizace klientům a dozorcům vašeho projektu. Provádění změn, například rychlé vylepšení okrajů a šířky v CSS dokumentu, je také jednoduché.

Standardizovat kód pro dlouhou trasu

Drátěné rámy šetří čas v procesu vývoje. Pokud jsou styly CSS pro vaše základní prvky již napsané, pak zbytek je jen výplň (důležité plnidlo, myslíte si).

Začněte správně se správným typem dokumentu HTML a adresářovou strukturou. Typy dokumentů se od sebe navzájem příliš neliší. Můžete o nich číst na stránce Stránka specifikací W3C . Na starém modelu World Wide Web nezáleží moc, ale HTML5 je důkladný a umožňuje růst vašeho webu.

Musíte také testovat kompatibilitu na co nejvíce operačních systémech a prohlížečích a fáze prototypů drátěných rámů je pro vás ideální čas, protože jste již soustředěni na uspořádání rozvržení.

To je také vhodný čas pro práci na šabloně pro mobilní zařízení. Jak se změní struktura, měli byste mít možnost začlenit nápady a manipulovat s kódem dokumentu. Vývoj se stává jednodušším, protože existuje méně kódu, který může způsobit nepořádek vašich mobilních a uživatelských stylů.

Začátek struktury dokumentového drátěného rámu

Nejlepší způsob, jak začít, je s prázdnou břidlicí, protože vám nabízí nejvíce kreativity. Zjevné prvky, které je třeba zahrnout do kódu (jako v jakémkoli jiném dokumentu), jsou html , head a body .

To je kostra. Budete potřebovat několik dalších prvků pro drátěný rám, aby vypadali dobře. The div (nebo dělení). Jedná se o prvek použitý k umístění určitých oblastí stránky, jako je logo nebo vyhledávací pole.

Divs jsou stavebními kameny prototypů wireframe HTML5. Cokoliv a vše může být obaleno a div , a styling je vítr, když používáte třídy a ID na prvky. Hodně z vašeho hlavního kódu se rozdělí divs protože jsou základními prvky bloku.

S novými specifikacemi HTML5 je prvek nazýván nav byla zavedena. To může být kombinováno s neuspořádaným seznamem a několika vlastnostmi CSS pro vytvoření a definování hlavní navigační oblasti vašeho webu. Níže je jednoduchý příklad toho, jak byste mohla strukturu vašeho nav :

Práce s header a footer Prvky

Ve výše uvedeném příkladu si všimnete, že jsem použil a div s identifikačním číslem header oddělit navigaci titulků. To je zcela přijatelné a s výše uvedeným kódem není nic špatného. HTML5 nám však nabízí další možnosti.

The header element v nových specifikacích HTML5 vám umožňuje dále definovat strukturu, což je užitečné především pro prolézací nástroje pro webové stránky a čtečky obrazovky, které oddělují část "obsahu". Nemělo by to mít žádný vliv na vaše uživatele a udržuje kód vašeho lodi a ukáže, že skutečně rozumíte tomu, o čem mluvíte.

Další zajímavý prvek, který byl přidán, je footer . Stejný nápad: použijte tento prvek namísto a div oddělit obsah zápatí. Obecně platí, že zápatí jsou mimo provoz a obsahují základní informace o webu nebo společnosti.

Do zápatí můžete přidat odkazy a použít a nav aby definovali některé z nich, ale to by bylo špatně doporučeno. The nav element určuje hlavní navigační oblast, takže přidání do zápatí nebo kdekoli jinde by bylo nadbytečné.

V tomto scénáři pomocí příkazu footer prvku a oddělení navigačních odkazů jako neřízeného seznamu je nejlepší. Mohli byste použít sloupcovou zápatí s několika sloupci odkazů. Mohly by být oddělené div prvky vedle sebe, všechny zabalené v hlavním zápatí.

Techniky CSS pro styling drátěných rámů

Pokud chápete HTML a pracujete s webem na chvíli, pravděpodobně znáte některé základní CSS. Mnoho nových vlastností CSS3 slouží k přidání ozdobných zaoblených rohů a stínů do textu.

Nechci navrhnout, že styl CSS není důležitý, ale rozložení a umístění jádra je to, co nakonec dělá strukturu vašeho webu. Pomocí služby CSS definujete šířku, okraj a mezery. Toto jsou základní vlastnosti většiny webových prvků a jsou posledním krokem při vytváření skutečně vynikajícího drátového rámce.

Pokud vás zaujmou nové vlastnosti a selektory CSS3, podívejte se na Webdesigner Depot sbírka vylepšení . Obsahuje průvodce po celém webu o nových funkcích v CSS3.

Přidání clearfix do stylu

Pokud nejste obeznámeni s technikou clearfix, udělejte nějaký výzkum . Je to populární třída, kterou byste přidali k a div kontejner, který drží dva nebo více pohyblivých bloků.

Pokud jste nikdy neslyšeli o jasné opravě, může se to zdát zmatené, ale koncept je jednoduchý. Přemýšlejte o kontejneru div to má dvě div je uvnitř, oba levé. Ve výchozím nastavení většina prohlížečů způsobí, že se tyto dva sloupce vzájemně dotýkají a obsahují div rozšíří stránku dolů tak, aby se vešla na nejdelší sloupec.

Přidáním a clearfix třída do kontejneru, oba sloupce se vejdou do kontejneru div , která se rozšiřuje dostatečně daleko, aby se vešly oběma elementům. To řeší mnoho problémů v prototypování drátových rámů, zvláště s rozložením dvou sloupců (tj. Hlavní obsah a postranní panel). Tato metoda bude pracovat také pro rozložení tří a dokonce čtyř sloupců, každý sloupec by se jen musel přizpůsobit menšímu prostoru.

Zobrazení CSS: Udržování stylu externí

Co dělat s umístěním CSS je další důležité rozhodnutí. Profesionální weboví návrháři a vývojáři jednoduše navrhují, aby byli nezávislí .css soubor, oddělený od kódu HTML.

Tímto způsobem je struktura v jednom dokumentu a rozvržení a návrh je v jiném. Oba jsou stejně důležité pro drátové rámy, ale vykonávají různé úkoly.

Veškerý kód HTML je přísně strukturální. Odkazy uvnitř odstavců můžete umístit uvnitř kontejneru div s jinými kontejnery a tak dále. Styling řídí velikost, mezery, okraje a písmena odstavců a odkazů a drátěný rám definuje šířku kontejnerů a jejich umístění na stránce.

Prvky stránky poskytují další příklady. Budete kódovat div kontejnery pro obsah a postranní lišty, ale styl a umístění je pomocí CSS. Pro návrháře je pochopení, jak oddělit obsah a styl, klíčem k zvládnutí drátových rámů.

Implementujte zástupné prvky dynamického prvku stránky

Fancy jQuery efekty a Ajax-ified web prvky vypadají jako všechny vztek. Trendy rostou a téměř všechny populární webové stránky obsahují nějaký dynamický obsah. Je důležité zvážit. Pokud doplní návrh, proč ne objekty bloky v wireframe?

Vytvoření celého systému back-end pro dynamické přihlašovací pole nemusí být praktické, ale poznamenat, že knihovny JavaScript, které budete potřebovat, je skvělý start. Můžete také kódovat styly, které strukturou tohoto pole a nastavit věci na místě pro pozdější, kdy byste přidali barvu a detaily.

Tyto motivy lze aplikovat na mnoho prvků rozhraní. Mohli byste použít návrhy vyhledávání podobně jako Google nebo nechat poznámky ve svém kódu implementovat dynamickou novinu nebo Twitter-feed box, z nichž jeden by dělal vaše wireframe dynamický a poskytnout elegantní způsob, jak představovat solid-state objekt namísto dynamického obsahu . Během fáze prototypování je to vše, co potřebujete.

Chyby při vývoji běžných drátových rámů

Je obtížné se pokazit, když právě začínáte kódovat základní strukturu webové stránky, ale pamatujte si na určité detaily.

Nezapomeňte, že účelem drátu je prezentovat rámec bez podrobností. Je užitečné během počátečních fází plánování prvků stránky; můžete se ponořit hluboko do svého webu a podívat se na velký obrázek.

Udržujte věci jednoduché a v pořádku. S výhledem na to je běžná chyba a ochromí vaši schopnost dodržovat lhůty. Drátěný rám nemusí být nikde blízko dokonalý; to má být hrubý nástin webových stránek. Dokonce i přísně HTML a CSS wireframe by měly obsahovat pouze obrysy prvků stránky.

Vyhněte se objížďkám se zaměřením na vaše hlavní cíle. Nezapomeňte, proč jste začali proces s wireframe na prvním místě!

Drátěné rámy mohou také vyřešit mnoho problémů, které jsou spojeny s procesem návrhu. Kódování prototypu ve formátu HTML a CSS je nejlepší způsob, jak získat velký start na webovém projektu, velký nebo malý. Je to jednoduchý a účinný způsob, jak dát svým představám nápad.

A tunu článků na webu se vztahují k procesu skenování. Pokryl jsem kódovací a vývojovou stránku věcí, ale dozvědět se více o wireframingu, pokračujte v čtení. Konstrukční tipy jsou venku; stačí je najít!

Tento příspěvek byl napsán výhradně pro Webdesigner Depot od Jake Rocheleau , vášnivý webový designér a nadšenec sociálních médií. Jake miluje čtení a psaní o nejnovějších trendech digitálního internetu a vytváření sítí v komunitě návrhářů. Vyzkoušejte ho na Twitteru @jakerocheleau více o své práci.

Jaké jsou vaše zkušenosti s procesem wireframe? Pracujete nejprve v kódu nebo v jiném druhu softwaru? Co si myslíte, že jsou nejprve užitečné prototypování v kódu?