6 manieren om het ontwerp van uw blog te verbeteren
Blogs kunnen vaak worden weggelaten in de kou als het gaat om ontwerp. Veel van ons geven de behoefte aan een intensief ontwerp af als het gaat om onze blogs, of het nu voor onze bedrijven is of voor onszelf.
Maar het is belangrijk dat we ons realiseren dat elk aspect van onze identiteit online moet worden ontworpen op een schone en intuïtieve manier met elke gewenste stijl. Dit ongrijpbare aspect van webwerk is iets waar we constant naar moeten streven. En ja, dat geldt ook voor de tijd die we besteden aan het werken met blogs.
Veel van de tijd gaan blogs verloren in de shuffle omdat we ze beschouwen als enorme 'text dumps' als het gaat om informatiearchitectuur, en dat is zeker een aspect van hun identiteit, maar ze hebben meer potentieel dan dat.
Sommige blogs zijn, mits op de juiste manier ontworpen, geweldig voor het weergeven van onze stroom van gedachten, evenals voor sommige portfolio-informatie, terwijl andere ideaal zijn voor het weergeven van zowel nieuws als fotografie.
Het punt is, een blog kan een geweldige opslagtank zijn voor een verscheidenheid aan onderwerpen en de weergave hiervan komt neer op de specifieke ontwerpkeuzes die je overal maakt. In de afgelopen vijf jaar zijn er veel dingen meegegaan om de wereld van bloggen veel eenvoudiger te maken dan vroeger. Bijvoorbeeld, WordPress is geweldig en thema's doen veel van het ontwerp voor ons, maar als je het leuker wilt maken, zijn er een paar dingen die je moet onthouden.
Evenzo, als u de navigatie of lay-out van het thema wilt bewerken, zijn er ook enkele dingen waarvan u op de hoogte wilt zijn. Dat geldt voor bijna elke bloggengine, of wanneer je alleen werkt. Hier zijn enkele van mijn gedachten over wat ik denk dat die belangrijke stukjes zijn.
Werken met schaduwgebaseerde teksteffecten
Teksteffecten zijn geweldige manieren om koptitels, navigatiebalken of inhoudsintroducties op je blog te presenteren op voorwaarde dat ze spaarzaam worden gebruikt. Laten we een paar van de meer algemene effecten bekijken die we te vaak op het web zien en hoe deze op de juiste manier te gebruiken.
Retro tekst
Het is vaak vervelend om mee te werken, maar ondanks dat feit lijkt het de afgelopen anderhalf jaar de ronde te zijn geweest. En met de komst van CSS3 is het veel gemakkelijker om te manipuleren en die perfecte arcering te vinden. Ik heb hier een voorbeeld om ons te helpen begrijpen hoe dit effect op de juiste manier kan worden aangemaakt. Daarna zal ik bespreken wanneer en wanneer ik het niet moet gebruiken. De naam van het spel met retro-effecten is geen vervagingsradius en dubbele schaduwen. Laten we zeggen dat we werken met een donker gekleurd lettertype (# 707070I), we willen een dubbele tekstschaduw gebruiken om dit te bereiken. Het ziet er ongeveer zo uit:
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
Dat zou je een leuk dubbel randeffect moeten geven, met een jaren 70 uitstraling. Natuurlijk, om die ware jaren 70-sfeer te krijgen, moet je misschien allerlei soorten kleurmanipulatie toevoegen, maar we hebben tenminste het basiseffect laag. Maar vergeet niet dat je niet te gek gaat doen met de inkleuring - en ga zeker niet te gek met de x en y offset voor de tekstschaduwen (omdat het erg snel onleesbaar zou kunnen worden). Als het gaat om het gebruik van een retro-effect, is het beste gebruik in koptitels. Dit is geen effect dat goed werkt bij kleine tekst of beschrijvende informatie. Het beste om het boven aan je blog te laten blijven en het met rust te laten.
Letterpress & inset tekst
Een andere populaire functie die CSS3 shadow's aanbieding is een inzet type styling, ook wel bekend als 'letterpress'. Dit is absoluut een hot topic in de wereld van CSS3-teksteffecten, dus laten we gaan kijken hoe we ze op de juiste manier kunnen doen. Een insteekstijl wordt meestal bereikt door de Y-as een klein beetje te verschuiven om de indruk te wekken van een subtiel hoogtepunt in de onmiddellijke achtergrond van de tekst. Vaak zie je dat het wordt gebruikt als tegengesteld aan het achtergrondcontrast (licht versus donker), zodat het effect meer impact heeft op de lezer. Laten we een voorbeeld nemen.
Lichte achtergrond, donkere tekst:
body { background-color: #888; text-shadow: 0px 2px 3px #666;}
Donkere achtergrond, lichte tekst
body {background-color: #666; text-shadow: 0px 2px 3px #888;}
Dat levert een heel mooi gelaagd / inzeteffect op dat gebruikt kan worden voor headers of blogtitels. Gebruik het echter spaarzaam op de hele site, want niets is erger dan dat iemand teveel teksteffecten gebruikt. In dit geval zou het goed zijn om te gebruiken in verschillende sub-headers of met verschillende sidebars of footer-elementen - maar zorg ervoor dat je dit niet gebruikt voor een beschrijvende informatie. Nogmaals, op schaduw gebaseerde teksteffecten mogen voor zoiets niet worden gebruikt.
Werken met afbeeldingen op je blog
Laten we eerlijk zijn, als webdesigners houden we ervan om te pronken met ons werk. We zijn er zo dol op dat zelfs onze persoonlijke blogs volgepropt kunnen raken met portfolio-afbeeldingen en ondertitels. Dus waarom zou je die twee niet consolideren? De beste manier om met bijschriftinformatie te werken, is door relevante informatie in de afbeelding zelf te plaatsen, en de beste manier om dat te doen is om een CSS3-effect rechtstreeks op de afbeelding te implementeren.
Als je nieuwsgierig bent naar waarom ik denk dat dit zo'n belangrijk aspect is van het werken met afbeeldingen, ga dan gewoon naar de Google Chrome-webwinkel (add-ons). Ze kunnen duizenden afbeeldingen weergeven zonder enige tekst eromheen, en toch geven ze ons genoeg informatie over die afbeelding om te weten of we erop willen klikken of niet. Dat is geweldig, en veel van ons zouden zo'n techniek moeten implementeren om niet alleen onnodige bijschrifttekst op te ruimen, maar ook om de gebruikerservaring een boost te geven.
Dus laten we dat opnieuw maken voor uw persoonlijke blog, maar met uw eigen aanraking, zodat u klantinformatie kunt weergeven voor website-afbeeldingen waaraan u hebt gewerkt:
Eerst moeten we een container voor de afbeelding maken, en daarbinnen moeten we nog een container maken voor de tekst die we willen gebruiken. In dit geval gebruiken we een subkop, een stukje tekst en een link. dan binnenin die een container voor de tekst creëren en links naar de website van de klant die we weergeven.
In deze sectie proberen we de daadwerkelijke afbeelding uit te laten schakelen en de tekst gereed te maken voor de overgang. We identificeren ook dat we willen dat de afbeelding langs de X-as en niet langs de Y-as weggaat, dus dat betekent we hebben een effecttype met een schuifdeur.
Nu gaan we het mouse-hover-over-effect instellen en de overgang krijgen om te beginnen bij deze gebeurtenis.
.image_container:hover .text_container { transform: translateX(0px);}.image_container:hover img { transform: translateX(300px);transition-delay: 0.1s;}.image_container:hover p { opacity: 1; transition-delay: 0.4s; }Zoals je hier kunt zien, was wat we deden vergelijkbaar met wat we hierboven deden voor het beeld. We hebben gewoon de tekst ingevoerd nadat de afbeelding was overgeslagen en gaven deze een vertraging van + 0,1 seconde om ervoor te zorgen dat deze soepel loopt. En dat is het zo'n beetje.
Er zijn een heleboel andere manieren om dit aan te passen, en zeker een hoop andere overgangseffecten die je kunt gebruiken. Maar onthoud dat als je met meer geavanceerde overgangen werkt, je ze niet op zo'n herhaalde manier gebruikt als met iets eenvoudigs als dit. Ze kunnen het beste spaarzaam worden gebruikt om belangrijke afbeeldingen te benadrukken.
Werken met creatieve lay-outs
Vaak zien we als webontwerpers de overdreven gebruikte trends die jaar in jaar uit worden misbruikt en willen een stem zijn voor verandering met betrekking tot hen. Maar tegen de stroom in gaan kan een riskante praktijk zijn, vooral als je het niet goed doet (als een notitie - ik zeg niet dat je op de 'goede manier' creatief moet zijn, want er is geen 'juiste manier' om wees creatief). Ik noemde dat omdat ik denk dat creatief zijn door de definitie ervan het losmaken van onszelf van beperkingen of creatieve normen is, en in feite zou ik dat aanmoedigen, maar ik denk ook dat we op onze hoede moeten zijn voor de reden dat dergelijke normen ingebakken zijn in ons web. designthema's en wat we kunnen doen om innovatief met hen te zijn, met dat in gedachten.
Unieke tekstuitlijning
Wanneer u op creatieve of unieke manieren met tekst werkt (dus niet 12pt Arial center-uitgelijnd), is het erg belangrijk om te onthouden dat uw tekst niet meer de hoofdinhoud op de pagina is. Het is degradeerd tot een ondersteunend element, zij het een belangrijke.
Een vraag die je jezelf altijd moet stellen als je met tekst werkt, is: "Is dit goed in balans met de rest van de pagina?" Het kan grenzen aan sommige portfoliowerken, een willekeurige afbeelding of misschien gewoon verschillende andere kolommen met tekst aan elke kant van de pagina. de pagina.
Maar ongeacht wat het naburig is of loodrecht op u moet proberen om het zo goed mogelijk in evenwicht te brengen. Denk aan rasterlijnen en bestudeer de rastersystemen die er zijn als u dat moet ( 960 rastersysteem is wat ik zou aanbevelen). Bestudeer waar ze de rasterlay-out op de pagina hebben geplaatst en vraag jezelf af waarom - en leid dan af of de jouwe even gebalanceerd is als dat. Stel je voor dat je je inhoud langs het rastersysteem zelf legt, en probeer te bedenken hoe het er in dat geval zou uitzien - repliceer dat dan in CSS.
Creatieve voetteksten
Creatieve voetteksten kunnen echt heel wat persoonlijkheid toevoegen aan een blog of website en het lijkt een beetje contra-intuïtief om dat te denken. Of we het nu hebben over scrollen met jQuery die ons landt in een prachtige footer met thema in een 'under-the-Earth'-stijl, of gewoon voor de onderkant van de website of blog van een bedrijf, het is een heel klein onderdeel van een website maar één die kan een zeer krachtige impact hebben. De meningen zijn verdeeld over in hoeverre dit het geval is en waarom. Ik heb mijn eigen theorie: wanneer we een webpagina lezen, beginnen we bovenaan en gaan we naar de bodem. Aan de voet van de pagina trekken we onze conclusies over wat we hebben gelezen.
Wanneer u met een creatief voettekst werkt, zijn er een paar dingen die u in gedachten moet houden en enkele praktische tips waarvan ik heb gemerkt dat ze worden gebruikt in de voetteksten die ik het meest waardeer. Voor mij is het belangrijkste onderdeel van het gebruik van een voettekst op deze manier hetzelfde kleurenschema te gebruiken als uw website, maar met een ander contrast. Dit is ongelooflijk belangrijk, en je kunt natuurlijk het contrast naar boven of beneden op de lettertypekleur tillen met betrekking tot het contrast waarmee je werkt, in de eerste plaats voor het algemene thema op de voetregel.
Het belangrijkste om te onthouden is dat je een mooie diepe stijlset voor dit gedeelte wilt hebben. Het geeft een goed gevoel van voltooiing aan de site. Wanneer u deze techniek gebruikt, kunt u de voettekst zo groot maken als u zou willen, in redelijkheid, want met het contrasterende kleurenschema is het duidelijk dat dit inderdaad een voettekstgedeelte is.
Wat de inhoud betreft, in de wereld van de nieuwe voettekst kan het passend zijn om uw logo-illustratie en blognaam, uw sociale netwerkafbeeldingen of links, uw laatste tweet en zelfs een mooi simplistisch contactformulier toe te voegen. Dit kan natuurlijk variëren op basis van je persoonlijke voorkeuren, maar mijn punt met het tonen van al die opties is om de evolutie van verleden tot heden te illustreren in wat gepast is om onderaan een website of blog te tonen.
jQuery scrollen
Dit is een van mijn favoriete manieren om navigatie op een website te doen en ik denk ook dat dit specifiek van toepassing is op het navigeren van berichten op een blog. Er zijn een paar verschillende manieren om met jQuery hiervoor te werken, dus hier zal ik bespreken wat een van mijn favoriete (en gemakkelijkste) manieren is om soepel te scrollen en vervolgens door te nemen wat er gebeurt en hoe het te implementeren.
Dit is een code voor verticaal scrollen, omdat horizontaal scrollen niet wenselijk is.
$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this);$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top} , 1000); event.preventDefault ();});});Wat hier aan de hand is, kan ingewikkeld lijken, maar het is eigenlijk vrij eenvoudig. We openen een functie op de ".class" van het navigatie-element waar we op zullen klikken (we noemen dit een click-event). Dus het belangrijkste onderdeel hier is om de klasse van de lijst (ul) te benoemen tot "nav". Of vervang de "nav" in de code door wat je die klasse hebt genoemd. En dat is het eigenlijk voor een functionerende jQuery-scroll, gooi die gewoon in je website en link naar de gebrande jQuery (bij voorkeur) en je bent er helemaal klaar voor.
Wat betreft het gebruik met een verticale scroll zoals deze, het is behoorlijk onbeperkt. Veel mensen vinden het prettig om niet handmatig naar beneden te hoeven scrollen, ze vinden het erg leuk dat de pagina het voor hen doet en het is ook een briljante manier om van post naar post op een website te gaan, vooral als die berichten groot zijn. Ik zal het vaak gebruiken om over te gaan naar verschillende portfoliosub-secties binnen mijn blogs of via categorieën op websites. Het is ook een perfecte techniek als u een thema als uw thema thematiseert, zoals een thema van dag tot nacht, of thema's voor uw categorieën of blogonderwerpen.
Ik hoop dat sommige van deze technieken nuttig waren voor jullie allemaal bij het proberen om verschillende ontwerpesthetica op je blog toe te passen. Denk eraan, gebruik ze spaarzaam en probeer er zeker van te zijn dat u naar eigen goeddunken handelt wanneer u flitsende effecten gebruikt. We hebben een verplichting om een internet te maken dat niet zo lelijk is als bepaalde aspecten van de buitenwereld zijn geworden. Hoewel het een grote en overweldigende taak is, is het een taak die we kunnen volbrengen als we het slechts één ontwerp per keer en één dag tegelijk nemen. Houd het simpel, houd het eerlijk, houd het echt, en leg altijd passie in wat je doet, want het zal er altijd doorheen schijnen.
Wat zijn je beste blogontwerptips? Wat zorgt voor een echt geweldig blogontwerp? Laat het ons weten in de reacties!
