Inhoud
- Voordelen van ontwerpen met code
- Gegevens eerst
- Mobiele goedheid gratis
- Een gemeenschappelijke taal vinden
- Leer sneller
- Snelle iteratie
- Snellere starttijd
- Waarom HTML5?
- Het magische data-attribuut
- CSS3 - het is de nieuwe Photoshop
- Sass + Compass: magisch heerlijk
- jQuery: oh, ja dat kan
- Kaders
- Laatste gedachten
Dit artikel verscheen voor het eerst in nummer 235 van .net magazine - 's werelds best verkochte tijdschrift voor webdesigners en -ontwikkelaars.
Ik ben nooit een grote fan geweest van meer werk dan nodig was. Ik heb de neiging om methoden en tools te evalueren op basis van hun vermogen om mij, of mijn team, effectiever te maken. Hoe snel brengen ze ons tot een werkend product? Hoe effectief communiceren ze? Blijven ze uit de buurt?
In de loop der jaren heb ik mijn ontwerpproces en tools aangepast. Ik kan me voorstellen dat ik dat zal blijven doen. Dat is de aard van ontwerpen voor technologie en internet. Deze branche evolueert voortdurend; ons proces en onze tools moeten ook evolueren.
HTML5 en CSS3 maken het gemakkelijker om meer van het ontwerpproces stroomopwaarts over te zetten - weg van Photoshop en meer naar een levend, ademend ontwerp. Tools zoals Foundation, Bootstrap en jQuery maken het verplaatsen van meer van uw ontwerpproces naar code toegankelijker.
Voordelen van ontwerpen met code
Ten eerste pleit ik er niet voor om Photoshop of een andere visuele ontwerpeditor uit uw workflow te laten vallen. In plaats daarvan zal ik me concentreren op de voordelen van het vroeg of laat omzetten van dat ontwerp in code.
Gegevens eerst
Wat ik altijd leuk vond aan ontwerpen met HTML, is dat het het denken vanuit een data-first-perspectief aanmoedigt. Als u daarentegen tekenprogramma's zoals Illustrator, OmniGraffle of Balsamiq gebruikt, begint u met een kader en vult u deze met gegevens.
In HTML construeer je het DOM (document object model), vergelijkbaar met het bouwen van een inhoudsopgave. Het is een terugkeer naar echt informatieontwerp met zinvolle hiërarchieën. HTML5 gaat nog een stap verder met de toevoeging van nieuwe semantische elementen: artikel, sectie, koptekst, opzij, voettekst enzovoort. Deze data-first-benadering past goed bij mobile first, responsieve ontwerpen.
Mobiele goedheid gratis
Als u dit leest, ontwerpt u waarschijnlijk voor mobiel. En de kans is groot dat je een of twee formulieren moet ontwerpen. Met HTML5 heb je geluk. Vóór HTML5 waren uw invoertypen vrijwel een tekst- of wachtwoordveld. HTML5 introduceerde een aantal extra invoertypen, waaronder:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Wat echt geweldig is aan deze extra, unieke invoertypen, is dat mobiele browsers op iOS en Android ze herkennen en automatisch een contextueel toetsenbord verwisselen - zonder dat speciale jQuery-plug-ins of hacks nodig zijn. Oh, en als uw browser niet weet wat een input type = "email"> is, dan is het gewoon standaard een tekstinvoer.
Een gemeenschappelijke taal vinden
"Het is geweldig hoe onze ontwerpers en ontwikkelaars in dezelfde taal kunnen werken" - John Drago, applicatieontwikkelaar bij Inflection.
Kijk of dit bekend klinkt. Ik zit in een vergaderruimte met een half dozijn server-side applicatie-ontwikkelaars die cirkels om me heen kunnen coderen in Ruby, Python, Java of .NET. Ik ben de enige ontwerper. Een paar van mijn suggesties worden in eerste instantie afgedaan als te ingewikkeld om te implementeren. Ik loop naar het whiteboard en begin wat HTML en CSS op het bord te schrijven voor hoe het ontwerp kan worden geïmplementeerd. Plots verandert de toon van het gesprek en een van de ontwikkelaars zegt met tegenzin: "Nou ja, als we het op die manier doen, zou het kunnen werken."
Door meer van mijn ontwerpproces naar code te verplaatsen, zijn de gesprekken met ontwikkelaars verbeterd. Er is een extra laag respect verdiend door te weten hoe u uw ontwerpen in code kunt maken. U hoeft geen expert te zijn om dat respect te verdienen. Hoewel mijn HTML- en CSS-vaardigheden zeer solide zijn, zijn mijn JavaScript-vaardigheden op zijn best middelmatig. En ik ben niet verlegen om dat toe te geven. Toch is het feit dat we in een gemeenschappelijke taal kunnen spreken, of elkaar halverwege kunnen ontmoeten, een enorm voordeel wanneer we werken met frontend- of server-side-ontwikkelaars.
Leer sneller
Hoewel wireframes en visuele composieten kunnen helpen bij het plannen, zijn deze statische artefacten theoretisch. Hoe vaak heb je geprobeerd een interactie aan iemand uit te leggen, alleen om ze te laten antwoorden: "Ik denk dat ik het moet zien." Hoe eerder je bij een prototype komt, iets waar mensen mee kunnen communiceren, hoe eerder je het ontwerp kunt ervaren en kunt zien of ideeën werken.
Snelle iteratie
Wanneer was de laatste keer dat een definitief ontwerp dat naar de productie werd verzonden precies overeenkwam met uw Photoshop-ontwerp? Bijna nooit. Met digitaal productontwerp gebeurt er constant verandering. Bovendien kunnen wijzigingen, zoals het vergroten van de grootte van uw koppen van 22pt naar 24pt over een paar dozijn schermen, uren duren in Photoshop. Slimme objecten bieden u een bepaald niveau van objectgeoriënteerd ontwerp in Photoshop. Helaas gebruiken de meeste visuele ontwerpers die ik ken, slimme objecten niet genoeg. Met CSS, omdat het een meer systematische benadering van ontwerp aanmoedigt, duren typografische wijzigingen minuten in plaats van uren.
Hoe zit het met het wijzigen van de lineaire verlopen op al uw knoppen? Of de grootte van een rand? Hoe zit het met het veranderen van vierkante hoeken naar 2px afgeronde hoeken? In Photoshop kan dit uren duren en moet je het nog coderen. De mogelijkheid om in code te ontwerpen, helpt voorkomen dat u terugkeert naar Photoshop om het visuele ontwerp te herhalen. Wanneer u die wijzigingen stroomopwaarts naar code verplaatst, met behulp van CSS3 en Sass (die ik later in dit artikel zal behandelen), kunnen ze in realtime plaatsvinden en duurt het maar een paar minuten.
Snellere starttijd
In de loop van de jaren, toen ik meer van mijn ontwerpworkflow upstream in code veranderde, ervoer ik een echte verbetering - ongeveer 20 tot 30 procent verkorting van de time-to-market. Hoe meer ik dit doe, hoe minder tijd ik dubbel werk. Ik besteed minder cycli om naar Photoshop of Fireworks te gaan en het werk vervolgens in code te herhalen.
Op een gegeven moment moet het ontwerp communiceren met een soort backend, of dat nu een CMS, Rails-app of iets anders is. Omdat het meeste van mijn ontwerpwerk in code is, vindt integratie eerder dan later plaats. Een paar jaar geleden ging een van mijn klanten, PointRoll, in vijf dagen van prototype naar productie.
Waarom HTML5?
HTML5 is eenvoudiger dan eerdere versies van HTML. Neem bijvoorbeeld de declaratie van het documenttype. In eerdere versies van HTML, de DOCTYPE zag er ongeveer zo uit:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
En er waren zes verschillende versies. Gelukkig is de HTML5 DOCTYPE het lijkt op dit:
! DOCTYPE HTML>
Ernstig. Dat is het. Schokkend eenvoudig.
Bij het maken van een standaard HTML-pagina zijn er een aantal gemeenschappelijke elementen, zoals een koptekst, hoofdinhoudsgebied, zijbalk en voettekst. Ik weet zeker dat je zoiets eerder hebt gezien:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" zijbalk "> / div> / div> div id =" footer "> / div>
Niets bijzonders daar. Maar eenmaal ingevuld met inhoud, verandert dit sjabloon in div-soep. Met de nieuwe semantische elementen van HTML5 krijgt u daarentegen iets veel eenvoudiger en gemakkelijker te scannen, zoals dit:
koptekst> nav> / nav> / koptekst> artikel> opzij> / opzij> / artikel> voettekst> / voettekst>
Moet je zien. Iets dat logisch is.
Het magische data-attribuut
HTML5 wordt geleverd met nog een geweldige hook waarmee je je eigen semantische betekenis kunt creëren: de gegevens-. Als u voorheen iets zinvols aan een DOM-element wilde toewijzen, was u beperkt tot ID's, klassen en rollen.
Helaas moeten ID's uniek zijn. De lessen zijn universeel (jippie!), Maar het gebruik ervan kan snel een puinhoop worden. Rollen zijn onderbenutte activa die een aanzienlijke betekenis hebben voor ARIA. Onlangs heb ik gegevens gebruikt voor een analyseplatform voor het bijhouden van gebeurtenissen dat we bij Inflection ontwikkelen.We zijn grote fans van het testen van onze ontwerpen. Wanneer we aan applicaties of pagina's werken die veel interactiviteit hebben, willen we graag een gedetailleerder inzicht hebben in de klantbetrokkenheid binnen de pagina.
Voer het gegevens-. Hiermee kun je een 'definieer je eigen' betekenismodel toewijzen, doorgeven en inhaken. U kunt dit bijvoorbeeld doen:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "registreren "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" registreren ">
We kunnen een luisteraar met JavaScript aan de pagina koppelen en elke keer dat een klant met de muis over de knop zweeft of op deze knop klikt, kunnen we die activiteit volgen. In plaats van alleen te kunnen volgen dat iemand zich via OAuth heeft geregistreerd met Twitter, kunnen we zien dat ze de muisaanwijzer over Facebook, vervolgens Twitter en vervolgens op LinkedIn zweefden en uiteindelijk besloten om Twitter te kiezen als hun OAuth-model.
Stel je voor dat je dit uitbreidt naar een site als Pinterest, of het nieuwe Myspace-ontwerp waar klanten tegels slepen en neerzetten om ze opnieuw te ordenen op basis van interesse. Of mogelijk tegels verbergen waarin ze niet geïnteresseerd zijn. De gegevens- attribuut stelt u in staat om een extra laag met semantische betekenis toe te kennen aan dingen die u kunt definiëren. Voor sites en apps die sterk afhankelijk zijn van Ajax, biedt het grenzeloze mogelijkheden.
CSS3 - het is de nieuwe Photoshop
CSS3 bracht een geheel nieuw niveau van ontwerp-look-and-feel, waarvoor vroeger achtergrondafbeeldingen, coupes en de beruchte ‘schuifdeuren’ -techniek nodig waren. Gelukkig behoort dat allemaal tot het verleden.
Laten we eens kijken naar het maken van een mooie knop met een lineair verloop, afgeronde hoeken, tekstschaduw die het een mooi letterperseffect geeft en een gloed bij zweven. Het leren van deze technieken zal een lange weg gaan. Elk van hen kan onafhankelijk of in verschillende combinaties worden gebruikt om zo ongeveer alle visuele hotness die tegenwoordig op het web trotseert, uit te voeren.
Laten we eerst een paar aanpassingen maken aan de standaardinstelling knop> en input type = "submit"> elementen. Ervan uitgaande dat u een van de standaard CSS-resets gebruikt, voegen we een beetje maat- en ademruimte toe.
/ * Knoppen knoppen, waarvan de knoppen hebben. ========================================= * * / button, input [type = "submit"] {hoogte: 2.7em; opvulling: .4em .7em; lijnhoogte: 1,9; }
Protip: Knoppen en ingangen die worden ingediend, kunnen lastig zijn om te restylen. Ik heb ontdekt dat door de lijnhoogte in te stellen op 1,6 of hoger, je kunt voorkomen dat je een extra div of span nodig hebt in de knop> label.
Nu we ons probleem met de knop hebben 'opgelost', kunnen we een .btn klasse om ons een mooie schone knop te geven met afgeronde hoeken, een lineair verloop, omtrek en die boekdruk-look.
.btn {display: inline-block; rand: 1px solid # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; grensradius: 4px; opvulling: .4em .7em; achtergrond: # edeff2; achtergrond: -webkit-verloop (lineair, 0% 0%, 0% 100%, van (#fefefe), kleurstop (0,55, # edeff2), tot (# e4e6e9)); achtergrond: -moz-lineair-verloop (midden boven, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160.172.187, .7) 0 0 .2em 0; doos-schaduw: rgba (160,172,187, .7) 0 0 .2em 0; kleur: # 6c7786; lettergrootte: 1.1em; tekstschaduw: #fefefe 1px 0 1px; lijnhoogte: 1.375em; cursor: aanwijzer; }
En dan een mooi hover effect met een subtiele glow met de doos-schaduw methode:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; doosschaduw: # 129ceb 0 0 2px; achtergrond: # e6e9eb; achtergrond: -webkit-verloop (lineair, 0% 0%, 0% 100%, van (# f7f7f7), kleurstop (0,55, # f6f6f7), tot (# e6e9eb)); achtergrond: -moz-lineargradient (midden boven, # f7f7f7, # f6f6f7 55%, # e6e9eb); kleur: # 45484b; tekstschaduw: rgb (255,255,255) 1px 1px 0; border-kleur: # c9c9c0; }
Nu ben ik geen grote fan van het schrijven van de lineaire verloopcode. Het is lang en verwarrend. Zoals je kunt zien, heb ik alleen de versie voor opgenomen -moz, -webkit, en het standaardmodel. Als u de versies -o en -ms wilt opnemen, moet u de code verdubbelen.
Er zijn nog twee andere mogelijkheden. Een daarvan is een CSS3-generator; er zijn er verschillende beschikbaar op internet, waaronder ColorZilla. Maar als je je spel een beetje wilt verbeteren, overweeg dan om in Sass te duiken: in combinatie met Compass is het een uitkomst.
Sass + Compass: magisch heerlijk
U kunt stoppen met hopen op CSS4 eenhoorneditie. Het is hier en het heet Sass + Compass. Sass staat voor Syntactically Awesome Stylesheets: je ervaart alle traditionele voordelen van CSS3 met de toegevoegde geneugten van variabelen, mixins, extenders en andere goodies.
Ik heb onlangs een CSS-bestand met 5.000 regels opnieuw ontworpen met meer dan 30 variaties op dezelfde blauwtint. Met Sass heb ik elke variatie vervangen door deze code:
kleur: $ blauw;
Door te definiëren $ blauw in mijn _variables.scss bestand, kan ik een standaardkleur maken waarnaar elk CSS- of SCSS-bestand kan verwijzen. Iedereen die CSS schrijft, kan $ blauw en u hoeft zich geen zorgen te maken over het gebruik van een pipet, het vinden van een hexadecimale code of RGB-, RGBA- of HSL-kleur.
Herinner je je die lineaire verloopcode nog? In plaats van meerdere regels code te schrijven, hoe zit dit dan:
@ achtergrond opnemen (lineair verloop (# b1cfdc, # 7a9cac));
Laat Sass en Compass het zware werk doen en genereer de juiste syntaxis voor u: klaar. Stel dat u een donkerdere of lichtere versie van een kleur wilt. U kunt de pipet verplaatsen in Photoshop of gewoon de opdrachten voor lichter / donkerder maken in Sass:
@inclusief achtergrond (lineair verloop (donkerder ($ litegray, 2%), donkerder ($ gebroken wit, 5%)));
Dat zorgt voor een lineair verloop met een verduistering van 2% $ lite-grijs en 5% verduisterd gebroken wit. Voil! Je hebt zelfs de HEX- of RGB-codes niet nodig.
jQuery: oh, ja dat kan
Ik moet een bekentenis afleggen. JavaScript intimideerde me vroeger. Toen vond ik jQuery. Ik zal niet beweren een JavaScript-goeroe te zijn, maar ik ben er vrij zeker van dat ik vrijwel elke transitie of functie kan uitvoeren die ik nodig heb om jQuery te gebruiken.
Neem bijvoorbeeld de mogelijkheid om een secundair telefoonnummer op het scherm weer te geven door op de link Nieuw nummer toevoegen te klikken. Met behulp van jQuery schrijft u eenvoudig dit:
// - Progressieve onthulling - // $ (’. Nieuw-nummer’). Click (functie () {$ (’. Alt-nummer’). FadeIn (’snel’);});
Op zoek naar iets geavanceerder? Er is waarschijnlijk een plug-in voor. Basisgedrag is eenvoudig en complexe zijn benaderbaar met jQuery.
Kaders
Twee van de meest robuuste frameworks van vandaag zijn Foundation en Bootstrap. Voordat u CSS-frameworks verwerpt, wil ik u iets vragen. Gebruik je jQuery? Ruby on Rails? Django? Alle kaders.
Net als jQuery en RoR, zijn Foundation en Bootstrap ontstaan uit het besef dat er een behoorlijk aantal dingen zijn die we keer op keer doen (zoals resets, typografie, rasters, formulieren, knoppen, nav en lijsten). Foundation en Bootstrap bieden beide ondersteuning voor responsieve ontwerpen door het gebruik van helperklassen. Beide zijn goed gedocumenteerd en op de weg getest, dus u kunt ze met een gerust hart gebruiken.
Een belangrijk verschil tussen de twee: Bootstrap is gebaseerd op het LESS-systeem voor CSS-voorverwerking, terwijl Foundation is gebaseerd op Sass. Ik geef de voorkeur aan Sass boven LESS vanwege de extra mogelijkheden, maar zowel Sass als LESS verpletteren traditionele CSS in stukken.
Een laatste gedachte over kaders. Voor degenen die niet de extra opgeblazenheid van andermans skelet willen erven, overweeg om een bestaande te kiezen en deze tot op het bot te strippen, of kies een kers uit een paar om die van jezelf te rollen. Hoe dan ook, er is echt geen reden om elke keer helemaal opnieuw te beginnen.
Laatste gedachten
Wilt u meer controle over hoe uw ontwerp uiteindelijk uitpakt? Verplaats meer processen stroomopwaarts naar code. HTML5 geeft eindelijk wat betekenis aan de DOM. Goed verholpen tot onzinnig DOCTYPEs en divitis. CSS3 is de nieuwe Photoshop: lineaire verlopen, borderradius en box-shadows FTW! En met tools zoals Bootstrap, Foundation, Sass en jQuery, is het stroomopwaarts verplaatsen van ontwerp naar code nog nooit zo eenvoudig geweest.
Ontdek 55 geweldige voorbeelden van HTML5 op Creative Bloq.
