6 způsobů, jak zlepšit návrh vašeho blogu

Blogy mohou být často vynechány v chladu, pokud jde o design. Mnoho z nás odmítá potřebu intenzivního designu, pokud jde o naše blogy - ať už pro naše společnosti, nebo pro sebe.

Je však důležité, abychom si uvědomili, že každý aspekt naší identity online by měl být navržen čistým a intuitivním způsobem s jakýmkoli stylem, který upřednostňujete. Tento nepolapitelný aspekt webových prací je něco, na co bychom se měli neustále snažit. A ano, to zahrnuje i čas strávený při práci s blogy.

Hodně časových blogů se ztrácí ve shuffle, protože o nich považujeme masivní "textové skládky", pokud jde o informační architekturu, a to je jistě jeden aspekt jejich identity, ale mají větší potenciál než to.

Některé blogy, když jsou navrženy správně, jsou skvělé pro zobrazování našeho streamu myšlenek i některých informací o portfoliu, zatímco jiné jsou skvělé pro zobrazování jak zpráv, tak i fotografií.

Hlavním důvodem je, že blog může být skvělým tankem pro různé témata a zobrazení, které se shoduje s konkrétními možnostmi designu, které děláte v celém. Za posledních pět let přišlo mnoho věcí, aby svět blogů mnohem jednodušší, než tomu bylo dříve. Například WordPress je skvělý a témata dělají spoustu designových prací pro nás, ale pokud byste chtěli okořenit to pak je pár věcí, které musíte mít na paměti.

Stejně tak, pokud chcete upravit navigaci nebo rozvržení tématu, pak jsou také některé věci, které si chcete být vědomi. To platí téměř pro jakýkoli blogovací stroj, nebo když pracujete samostatně. Zde je několik z mých myšlenek o tom, co si myslím, že ty důležité drobnosti jsou.

Práce se stínovými textovými efekty

Textové efekty jsou skvělé způsoby, jak prezentovat hlavičky hlaviček, navigační lišty nebo úvodní obsahy na vašem blogu za předpokladu, že jsou používány pomalu. Pojďme se podívat na některé z běžnějších účinků, které vidíme nadužívaně na webu, a jak je správně používat.

Retro text

Je to často bolest, s nímž pracujeme, ale zdá se, že i přes tuto skutečnost dělají poslední a půl roku. A s příchodem CSS3 je mnohem jednodušší manipulovat a najít ten dokonalý stín. Mám zde příklad, abychom nám pomohli pochopit, jak tento efekt správně vzniknout, pak budu jít, kdy a kdy nepoužívat. Název hry s retro efekty není poloměr rozostření a použití dvou stínů. Řekněme, že pracujeme s tmavým písmem (# 707070I), chceme pro dosažení tohoto cíle použít dvojí textový stín. Bylo by to vypadat takto:

To by mělo dát pěkný efekt s dvojitým ohraničením, s výrazem 70. let. Samozřejmě, abyste získali atmosféru skutečného 70. let, možná budete muset přidat všechny druhy barevné manipulace, ale přinejmenším máme základní efekt dolů. Nezapomeňte však, že s barvivem nezlobte příliš bláznivě - a rozhodně nezjistěte příliš bláznivě s odsazením x a y pro textové stíny (protože by se to mohlo ukázat jako nečitelné velmi rychle). Pokud jde o použití retro efektu, nejlepší využití je v hlavičkách titulků. To není efekt, který by fungoval dobře s malým rozměrem textu nebo popisnými informacemi. Nejlepší je nechat ji držet v horní části vašeho blogu a nechat ho na pokoji.

Letterpress & vložený text

Další oblíbená vlastnost, že nabídka stínů CSS3 je vloženým typem stylingu, jinak známým jako "knihtisk". To je určitě horké téma ve světě textových efektů CSS3, takže se podívejme, jak je správně provádět. Inzertní styling je typicky dosažen vyvážením osy Y malým množstvím, které dává dojem jemného zvýraznění v bezprostředním pozadí textu. Často uvidíte, že se používá jako protiklad kontrastu pozadí (světlo vs. tmavý), takže efekt má větší dopad na čtečku. Ukážeme si příklad.

To bude vyzařovat opravdu pěkný vrstvený / vložený efekt, který lze použít pro záhlaví nebo blogy. Použijte to šetrně po celém webu, protože nic není horší než někdo přežívající textové efekty. V tomto případě by bylo vhodné používat v různých záhlavích nebo s různými bočními lištami nebo páteřními prvky - ale ujistěte se, že nepoužíváte to na popisné informace. Opět platí, že pro takovou věc by se neměly používat žádné stínové textové efekty.

Práce s obrázky na vašem blogu

Podívejme se na to, jako weboví designéři, kteří rádi předvedeme naši práci. Milujeme to tolik, že i naše osobní blogy se mohou stát plné obrazů portfolia a titulků roztřesených. Tak proč neskončit tyto dva? Nejlepší způsob, jak pracovat s informacemi o titulcích, je, že obsahují relevantní informace v samotném obrázku a nejlepší způsob, jak to udělat, je implementovat efekt CSS3 přímo na obrázek.

Pokud jste zvědaví, proč si myslím, že je to tak důležitý aspekt práce s obrázky, stačí přejít na webový obchod Google Chrome (doplňky). Mohou zobrazovat tisíce obrázků bez jakéhokoli textu kolem nich a přesto nám stále poskytují dostatek informací o uvedeném obrázku, aby věděli, zda chceme kliknout na ně nebo ne. To je skvělé a mnohem více z nás by mělo zavádět takovou techniku, aby nejen vyčistil zbytečný text titulků, ale také podpořil uživatelské zkušenosti.

Takže znovu vytvořte, že pro svůj osobní blog, ale s vlastním dotykem, abyste mohli zobrazit informace o klientech pro obrázky webových stránek, na kterých jste pracovali:

Nejprve musíme vytvořit kontejner pro obrázek a pak uvnitř toho musíme vytvořit další kontejner pro text, který chceme použít. V tomto případě budeme používat podkapitola, trochu textu a odkaz. pak uvnitř vytváří kontejner pro text a odkazy na webové stránky klienta, který zobrazujeme.

V této části děláme to, že se skutečný obraz převede na výstup a připravíme se, aby text přešel. Rovněž identifikujeme, že chceme, aby obraz opustil podél osy X a ne osy Y, takže to znamená budeme mít efekt posuvných dveří.

Nyní nastavíme efekt přesunu myši a přechod na tuto událost zahájíme.

Jak vidíte zde, to, co jsme udělali, bylo podobné tomu, co jsme udělali výše. Jednoduše jsme přinesli text poté, co snímek odešel, a dal mu zpoždění + 0,1s, aby se ujistil, že jde hladce. A to je o tom.

Existuje spousta dalších způsobů, které můžete přizpůsobit, a určitě mnoho jiných přechodových efektů, které můžete použít. Nezapomeňte však, že pokud budete pracovat s pokročilejšími přechody, nepoužívejte je opakovaně tak, jak byste s něčím tak jednoduchým. Nejlépe se používají s důrazem na zdůraznění klíčových obrazů.

Práce s rozloženími kreativ

Často, jako weboví designéři, uvidíme příliš používané trendy, které byly zneužívány rok a rok a chtějí být hlasem o změně, pokud jde o ně. Ale jít proti obilí může být riskantní praxe, zvláště pokud to neuděláte správně (jako poznámka - neříkám, že musíte být kreativní "správným způsobem", protože neexistuje žádná "správná cesta" k být kreativní). Zmínil jsem se o tom, protože jsem si myslel, že je kreativní, je svou samotnou definicí nezavazující se od omezení nebo tvůrčích norem a ve skutečnosti bych to povzbudil, ale také si myslím, že bychom měli být opatrní z důvodu, že takové normy byly na našem webu navrhnout témata a co můžeme dělat, abychom byli s nimi inovativní, s tím v mysli.

Jedinečné zarovnání textu

Při práci s textem kreativním nebo jedinečným způsobem (tj. Ne 12pt Arial uprostřed) je opravdu důležité mít na paměti, že váš text již není hlavní obsah na stránce. Byla přemístěna na podpůrný prvek, i když důležitý.

Jedna otázka, na kterou se vždycky ptáte, když pracujete s textem, je: "Má tato rovnováha dobře se zbytkem stránky?" Může být sousedí s nějakou portfoliovou prací, nějakým náhodným obrázkem nebo snad jen různými dalšími sloupci textu na obou stranách strana.

Ale bez ohledu na to, co je sousední nebo kolmé k vám je třeba se pokusit vyvážit to, jak nejlépe můžete. Přemýšlejte o liniích mřížky a studujte systémy mřížky tam, pokud musíte ( 960 mřížkový systém je to, co bych doporučil). Přečtěte si, kde umístí rozvržení mřížky na stránku, a pak se zeptejte, proč - a pak zjistěte, zda je vaše stejně vyvážené. Představte si, že položíte svůj obsah na samotný systém mřížky a pokuste se přemýšlet o tom, co by v tomto případě vypadalo - a pak jej zopakujte v CSS.

Zápatí kreativy

Pětice kreativy mohou do blogu nebo webové stránky skutečně přidávat spoustu osobností a zdá se, že je to trochu intuitívní. Ať už hovoříme o rolování jQuery, které nás přitahuje v krásném zápatí, které je tematizováno ve stylu "pod zemí", nebo jen pro dno webové stránky nebo blogu společnosti, je to velmi nepatrná část webové stránky, může mít velmi silný dopad. Názory jsou rozděleny na to, do jaké míry je to tak a proč by to mohlo být. Mám svou vlastní teorii: když čteme webovou stránku, začínáme nahoře a pohybujeme se dolů, a to je na úpatí stránky, že vyvozujeme závěry o tom, co jsme si přečetli.

Když pracujete s tvůrčími zápatí, máte pár věcí, které chcete mít na paměti, a pár osvědčených postupů, které jsem si všiml, že jsem byl používán v zápatí, které nejvíc miluji. Pro mě je nejdůležitější součástí používání zápatí tímto způsobem použít stejnou barevnou schématu jako vaše webové stránky, ale s jiným kontrastem. To je neuvěřitelně důležité a samozřejmě můžete čerpat kontrast nahoru nebo dolů na barvu písma, pokud jde o kontrast, s nímž pracujete, na prvním místě.

Důležitá věc, kterou si musíte pamatovat, je, že chcete mít pro tuto sekci pěkný hluboký stylový set. To dává příjemný pocit dokončení na místě. Když používáte tuto techniku, můžete vytvořit pózu tak vysokou, jakou byste chtěli, v rozumu, protože s kontrastní barevnou schémou je zřejmé, že je to opravdu zápatí.

Co se týče obsahu, ve světě nového zápatí může být vhodné přidat vaše logo a název blogu, obrázky nebo odkazy v sociální síti, nejnovější tweet a dokonce i pěkný zjednodušený kontaktní formulář. To se samozřejmě může lišit podle vašich osobních preferencí, ale můj bod, který ukazuje všechny tyto možnosti, je ilustrovat vývoj z minulosti na současnost v tom, co je vhodné zobrazovat v dolní části webové stránky nebo blogu.

jQuery rolování

Jedná se o jeden z mých nejoblíbenějších způsobů navigace na webových stránkách a myslím si, že je zvlášť vhodný pro navigaci příspěvků na blogu. Existuje několik různých způsobů, jak s tím jQuery pracovat, takže tady projdu to, co je jedním z mých nejoblíbenějších (a nejjednodušších) způsobů, jak udělat nějaké hladké posouvání, a pak projít tím, co se děje a jak jej provádět.

Co se zde děje, může vypadat komplikovaně, ale je to docela jednoduché. Otevřeme funkci na ".class" navigačního prvku, na který budeme klikat (nazýváme to klikací událost). Nejdůležitější částí je titulek třídy seznamu (ul) na "nav". Nebo nahradit "nav" v kódu s tím, co jste pojmenovali tuto třídu. A to je do značné míry pro fungující jQuery scroll, stačí to hodit na vaše webové stránky a odkaz na vylepšený jQuery (nejlépe) a vy jste všichni připraveni jít.

Co se týče použití s ​​vertikálním svitek, je to docela neomezené. Spousta lidí si nemusí užívat ruční posunování dolů, opravdu si užívá stránku, kterou pro ně dělají, a je také skvělým způsobem, jak se přesunout z příspěvku na příspěvek na webové stránky, zejména pokud jsou tyto příspěvky velké. Často ji využiji k přesunu do různých podřízených sekcí v rámci svých blogů nebo prostřednictvím kategorií na webových stránkách. Je to také perfektní technika, pokud jste na svých stránkách, jako je dělat denní-noční téma, nebo témata pro vaše kategorie nebo blogu témata.

Doufám, že některé z těchto technik vám pomohou všem při prosazování různých estetických návrhů na vašem blogu. Nezapomeňte, že je používejte šetrně a snažte se ujistit se, že budete jednat s vaším nejlepším úsudkem při použití efektů. Máme povinnost vytvořit internet, který není tak ošklivý, jak se staly některé aspekty vnějšího světa. Ačkoli to je velký a ohromující úkol, je to jedna, kterou můžeme dosáhnout, kdybychom si ji vzali jen jeden design v době a jeden den po druhém. Udržujte je jednoduchý, udržujte si ho upřímný, udržujte si ho v reálném životě a vždy se vkusujte do toho, co děláte - jak to bude vždycky lesknout.

Jaké jsou nejlepší tipy pro tvorbu blogů? Co dělá pro opravdu skvělý design blogu? Dejte nám vědět v komentářích!