Een zaak voor het coderen van uw wireframes

Dag in dag uit werken als ontwerper kan arbeidsintensief zijn. Gelukkig is het veld uitgebreid en is het proces eenvoudiger geworden. Veel gratis tools en bronnen zijn beschikbaar.

Wireframes brengen elegantie naar ontwerpmodellen. Ze zijn de basisstructuur van een website, waarbij kleuren en toebehoren zijn verwijderd.

Ze worden gebruikt om ontwerpconcepten te bekijken met alleen de essentiële dingen, en ze kunnen een nuttig perspectief bieden op elk project.

De meeste wireframes worden gemaakt in softwarepakketten zoals Adobe Photoshop en Fireworks, maar sommige websites stellen u in staat om wireframe-afbeeldingen rechtstreeks in de browser te maken.

In dit bericht bespreken we de codering van een standaard draadframe in HTML en CSS en bekijken we hoe dit het creatieve proces ten goede kan komen.

Waarom zou je je drukmaken?

Waarom tijd besteden aan het schetsen van de structuur van een website? In sommige gevallen is het misschien overbodig, maar het kan helpen als je vastzit in een sleur of worstelt om de grote foto te zien.

Het kan zowel ontwerpers als klanten ten goede komen. Bij betaald werk bent u verantwoordelijk voor het behagen van de klant. Het tonen van de basisstructuur van hun binnenkort te ontwerpen website kan klanten verlichting en een gevoel van controle geven over het hele proces.

Maar als het ontwerp erg eenvoudig is of een eenvoudige structuur heeft, is het misschien niet de moeite waard om een ​​draadmodel te maken; de hele zaak in Photoshop bespotten, met knoppen en kleur, is misschien net zo snel.

Beslissen welke stappen moeten worden ondernomen vereist tijd en kritisch denken. Een draadframe is immers slechts een hulpmiddel. Het wordt onderschat door veel webontwerpers, maar verrassend nuttig als het eenmaal begrepen is.

Prototyping van wireframes in code

Al jarenlang is de Adobe-ontwerpsoftware de beste suite voor het maken van draadframes, maar het web heeft een aanzienlijke verandering ondergaan en is nog steeds aan het evolueren.

De opkomst van coderingsstandaarden en de toename in HTML5-documentatie zijn grote stappen op weg naar een gemeenschappelijk web. Nu is het coderen van een standaard draadframe in HTML en CSS geen werk meer dan het aanpakken van de taak in Fireworks.

Met wireframes kunt u een project vanuit meerdere hoeken recht van voren aanvallen. U kunt zelfs testen op compatibiliteit met CSS2- en CSS3-technieken en browsers. Dingen hoeven in het begin niet ingewikkeld te zijn; een draadframe dient gewoon als een solide basis om met coderen te beginnen.

Het delen van inhoud wordt ook gemakkelijker met een draadframe. U kunt op een webserver alle bestanden hosten die u nodig hebt en u kunt een demomap instellen en live updates doorsturen naar klanten en toezichthouders van uw project. Het aanbrengen van wijzigingen, zoals snelle aanpassingen aan marges en breedten in de CSS van het document, is ook eenvoudig.

Standaardiseer de code voor de lange termijn

Wireframes besparen tijd in het ontwikkelingsproces. Als de CSS-stijlen voor uw basiselementen al zijn geschreven, is de rest gewoon een opvuller (belangrijk vulmiddel, let wel).

Begin goed, met het juiste HTML-documenttype en de mappenstructuur. Documenttypen verschillen niet veel van elkaar. Je kunt erover lezen op de W3C Specs-pagina . Ze doen er niet zoveel toe in het oude World Wide Web-model, maar HTML5 is grondig en laat je website groeien.

Je moet de compatibiliteit toch op zoveel mogelijk besturingssystemen en browsers testen, en de prototypingfase met draadframes is het perfecte moment om dit te doen, omdat je al gefocust bent op het indelen van de lay-out.

Dit is ook een goed moment om te werken aan een sjabloon dat geschikt is voor mobiele apparaten. Naarmate de structuur verandert, zou u in staat moeten zijn om ideeën op te nemen en de code van het document te manipuleren. Ontwikkeling wordt eenvoudiger omdat er minder code is om uw mobiele en aangepaste stijlen overzichtelijk te maken.

Beginnen met de structuur van het document draadframe

De beste manier om te beginnen is met een schone lei, omdat het u de meeste creativiteit biedt. De voor de hand liggende elementen om in de code op te nemen (zoals in elk ander webdocument) zijn html , head en body .

Dit is het skelet. Je hebt nog een paar elementen nodig om het draadframe er goed uit te laten zien. De div (of divisie) is opmerkelijk. Dit is het element dat wordt gebruikt om bepaalde delen van de pagina in te vullen, zoals het logo of het zoekvak.

Divs zijn de bouwstenen van HTML5 wireframe prototypes. Alles en alles kan worden omhuld door a div en stileren is een koud kunstje wanneer u klassen en ID's toepast op elementen. Veel van je hoofdcode wordt opgesplitst divs omdat ze de basisblokkeringselementen zijn.

Met de nieuwe HTML5-specificaties, een element genaamd nav is geïntroduceerd. Dit kan worden gecombineerd met een ongeordende lijst en enkele CSS-eigenschappen om het belangrijkste navigatiegebied van uw website te maken en te definiëren. Hieronder ziet u een eenvoudig voorbeeld van hoe u uw kunt structureren nav :

Werken met header en footer Elements

In het bovenstaande voorbeeld merk je dat ik een div met een ID van header om mijn kopnavigatie te scheiden. Dit is perfect acceptabel en er is niets mis met de bovenstaande code. HTML5 geeft ons echter andere opties.

De header Met het element in de nieuwe HTML5-specificaties kunt u uw structuur verder definiëren, wat vooral handig is voor webcrawlers en schermlezers, die een 'koptekstgedeelte' van de inhoud scheiden. Het zou geen enkel verschil moeten maken voor uw gebruikers, en het zorgt ervoor dat uw code blijft werken en laat zien dat u echt begrijpt waar u het over hebt.

Een ander interessant element dat is toegevoegd, is footer . Hetzelfde idee: gebruik dit element in plaats van een div om uw voettekstinhoud te scheiden. Over het algemeen zijn voetteksten uit de weg en bevatten ze basisinformatie over de website of het bedrijf.

U zou links naar de voettekst kunnen toevoegen en een a kunnen gebruiken nav element om sommige te definiëren, maar dat zou niet verstandig zijn. De nav element specificeert het hoofdnavigatie gebied, dus het toevoegen van het footer of ergens anders zou overbodig zijn.

In dit scenario gebruikt u de footer element en het scheiden van de navigatielinks als een ongeordende lijst is het beste. Je zou een columned footer kunnen gebruiken, met een aantal kolommen met links. Deze kunnen afzonderlijk zijn div elementen naast elkaar weergegeven, allemaal ingepakt in de hoofdfooter.

CSS-technieken voor het stylen van wireframes

Als je HTML begrijpt en een tijdje met internet hebt gewerkt, dan ken je waarschijnlijk wat standaard CSS. Veel van de nieuwe functies van CSS3 zijn voor het toevoegen van fraaie afgeronde hoeken en slagschaduwen aan tekst.

Ik wil niet suggereren dat CSS-styling niet belangrijk is, maar de indeling en positionering van de kern vormen uiteindelijk de structuur van uw website. Met CSS definieert u de breedte, marge en spatiëring. Dit zijn de basiseigenschappen van de meeste webelementen en ze zijn de laatste stap bij het maken van een echt uitstekend draadframe.

Als je geïntrigeerd bent door CSS3's nieuwe eigenschappen en selectors, kijk dan eens bij Webdesigner Depot's verzameling van verbeteringen . Het bevat handleidingen over het hele web over de nieuwe functies in CSS3.

Het toevoegen clearfix naar stijlen

Als u niet bekend bent met de clearfix-techniek, doe dan wat onderzoek . Het is een populaire les die je zou toevoegen aan een div container die twee of meer zwevende blokken bevat.

Als je nog nooit van clearfix hebt gehoord, lijkt het misschien verwarrend, maar het concept is eenvoudig. Denk aan een container div dat heeft er twee div s erin, beide zweefden naar links. Standaard zouden de meeste browsers de twee kolommen weergeven als direct contact met elkaar, en de bevattende div zou onderaan de pagina uitvouwen om te passen in welke kolom het langst is.

Door een toe te voegen clearfix klasse aan uw container, beide kolommen passen gelukkig in de container div , die ver genoeg uitzet zodat beide elementen passen. Dit lost veel problemen op in prototypen van draadframes, met name met layouts met twee kolommen (dwz de hoofdinhoud en de zijbalk). Deze methode werkt ook voor indelingen met drie of zelfs vier kolommen, elke kolom hoeft maar in een kleinere ruimte te passen.

CSS weergeven: stijlen extern houden

Wat te doen met CSS-plaatsing is een andere belangrijke beslissing. Professionele webontwerpers en -ontwikkelaars suggereren eenvoudigweg om een ​​onafhankelijke te houden .css bestand, los van uw HTML-code.

Op deze manier is de structuur in één document en liggen de lay-out en het ontwerp in een ander document. Beide zijn even belangrijk voor wireframes, maar ze voeren verschillende taken uit.

Al je HTML-code is strikt structureel. U kunt links in alinea's in de container plaatsen div s in andere containers, enzovoort. Styling bepaalt de grootte, spatiëring, marges en belettering van alinea's en links, en het draadframe bepaalt de breedte van containers en hun plaatsing op de pagina.

Pagina-elementen bieden nog meer voorbeelden. Je zou de code coderen div containers voor inhoud en sidebars, maar je zou ze stijlen en positioneren met behulp van CSS. Voor een ontwerper is het begrijpen van hoe je inhoud en stijl kunt scheiden de sleutel tot het beheersen van wireframes.

Implementeer dynamische pagina-element tijdelijke aanduidingen

Fancy jQuery-effecten en Ajax-gejureerde webelementen lijken een ware rage. Trends groeien en bijna alle populaire websites bevatten een aantal dynamische inhoud. Het is belangrijk om te overwegen. Als ze het ontwerp aanvullen, waarom dan geen blokken in uw draadframe?

Het ontwikkelen van een volledig back-endsysteem voor een dynamisch inlogvenster is misschien niet praktisch, maar het is een goed begin om de JavaScript-bibliotheken die u nodig hebt op te merken. U kunt ook coderen voor stijlen die dit kader structureren en dingen op hun plaats zetten voor later, wanneer u kleur en details zou toevoegen.

Deze thema's kunnen worden toegepast op vele interface-elementen. U kunt zoeksuggesties gebruiken die vergelijkbaar is met Google's of notities achterlaten in uw code om een ​​dynamisch nieuws- of Twitter-feedvak te implementeren. Beide kunnen uw wireframe dynamisch maken en een elegante manier bieden om een ​​solid-state-object te vertegenwoordigen in plaats van dynamische content. . Tijdens de prototypefase is dit alles wat je sowieso nodig hebt.

Common Wireframe Development Mistakes

Het is moeilijk om fout te gaan als je net begint met het coderen van de basisstructuur van een website, maar houd rekening met bepaalde details.

Vergeet niet dat het doel van een wireframe is om een ​​raamwerk te presenteren zonder veel details. Het is handig tijdens de eerste fasen van het plannen van de pagina-elementen; je kunt diep in je website duiken en de grote afbeelding zien.

Houd de dingen eenvoudig en in orde. Dit is een veel voorkomende fout en dit verlamt je vermogen om deadlines te halen. Een draadframe hoeft niet overal in de buurt van perfect te zijn; het zou een ruwe schets van de website moeten zijn. Zelfs een strikt HTML- en CSS-wireframe mag alleen uit contouren van pagina-elementen bestaan.

Vermijd omwegen door je te concentreren op je belangrijkste doelen. Vergeet niet waarom je het proces begon met een wireframe in de eerste plaats!

Wireframes kunnen ook veel problemen oplossen die het ontwerpproces omzeilen. Het coderen van een prototype in HTML en CSS is de beste manier om een ​​voorsprong te krijgen op een groot of klein webproject. Het is een eenvoudige, efficiënte manier om uw ideeën vorm te geven.

EEN veel artikelen op het web hebben betrekking op het wireframing-proces. Ik heb de codeer- en ontwikkelkant van dingen behandeld, maar lees meer over wireframing. De ontwerptips zijn er; je moet ze gewoon vinden!

Dit bericht is exclusief geschreven voor Webdesigner Depot door Jake Rocheleau , een gepassioneerde webontwerper en liefhebber van sociale media. Jake houdt van lezen en schrijven over de nieuwste digitale internettrends en netwerken in de ontwerpgemeenschap. Bekijk hem op Twitter @jakerocheleau voor meer informatie over zijn werk.

Wat zijn je ervaringen met het wireframe-proces? Werkt u eerst in de code of in een ander type software? Wat zijn volgens jou de voordelen van prototyping in de code?