Uw Hersenen aan de Front-End Ontwikkeling

0
19

Een deel van de taak van een front-end developer is het toepassen van verschillende technieken en technologieën te trekken van de gewenste UI en UX. Misschien werk je met een team van ontwerp en uitvoering van hun ontwerpen. Ik weet dat als ik kijk naar een ontwerp (heck, zelfs als ik weet dat ik ben niet van plan te zijn het gebouw), mijn front-end hersenen begint het triggeren van allerlei dingen die ik weet dat het in verband met de taak.

Laten we een kijkje nemen op wat ik bedoel.

Bekijk deze mooie Dribbble schot voor een Voedsel Recept van de Website van Riko Sapto Dimo.

Het is een heel aantrekkelijk design, en er is heel er over te denken van een front-end web design en ontwikkeling standpunt.

We gaan meestal over ontwerp patroon van keuzes en HTML/CSS-tech keuzes. Er is veel meer aan de vacature van front-end development. Toegankelijkheid! Prestatie! Semantiek! Design systems! Alle belangrijke spullen zo goed.

Multi-line gevoerde tekst

Ah ja, die kijken waar de tekst heeft een achtergrond die volgt op de lengte van de lijnen van de tekst. Hebben We de naam van de Multi-Line Gevoerde Tekst in de verleden en keek naar een aantal manieren om het te doen. De gemakkelijkste en meest moderne manier om het te behandelen is met vak-decoratie-break.

Zie de Pen Multiline Voering met vak-decoratie-breken van Chris Coyier (@chriscoyier) op CodePen.

Flexbox kop

Dat gebied voor koptekst is gewoon bedelen voor flexbox. Het is een één-richting lay-out elementen van verschillende groottes en met verschillende ruimte tussen hen. Het uiten van die in flexbox gaat gemakkelijker dan enige andere methode en vereist geen vaste sizing of magic numbers — niet te vergeten flexibel!

Grid lay-out

De algemene pagina lay-out. hier kan worden uitgedrukt mooi met CSS grid. Vergeet niet dat flexbox en het raster niet op gespannen voet. Een element geplaatst in een grid-cel kan worden flexbox! Zoals de kop boven, dat is volkomen logisch. De belangrijkste inhoud gebied en voettekst, als grid cellen, waarschijnlijk kan gaan in beide richtingen.

Verticale schrijven

Niet de meest voor de hand liggende zaak om af te trekken! Uw beste inzet is met het schrijven van vormen. Jen Simmons heeft geschreven over deze, en hier is een demo:

Zie de Pen Schrijven Demo-Modus — Kop door Jen Simmons (@jensimmons) op CodePen.

Lijn klemmen

Het lijkt erop dat we een aantal afkappen van de hand hier. Algemene performance-wise, zouden we waarschijnlijk willen de gegevens die worden verzonden slechts een paar regels lang. Maar de front-end kan helpen met dit, als het moet. Drie regels tekst worden hier weergegeven met beletselteken aan het einde. Misschien is het ontwerp moet echt het kopiëren altijd een maximum van drie lijnen. Dat heet de lijn vast te klemmen.

Zie de Pen-Lijn Clampin’ van Chris Coyier (@chriscoyier) op CodePen.

Aangepaste lettertypen

Zoals de meeste sites deze dagen, dit ontwerp is gecoat in aangepaste web fonts. Met een design van deze opvallende, ik zou heel voorzichtig zijn over mijn lettertype laden techniek. Mijn gevoel zegt me dat ik het zou meer in FOIT dan FOUT hier, en het liefst zou ik cache lettertype bestand zo hard als ik kon, dus dat hadden we ook niet zo vaak als mogelijk.

Tekst over afbeeldingen

Die tekst “Diner” is een vierkant over een aantal drukke fotografische beelden hieronder. Het is nog steeds leesbaar is echter grotendeels als gevolg van het felle wit van de tekst op een donkere beeld. We hebben al te denken dat dit in het verleden tot in detail. Witte tekst op een donkere beeld is over het algemeen de weg te gaan, en verduisterd genoeg zoals dat zowat elke afbeelding zal op OK. Er zijn andere mogelijkheden, zoals gradiënten en vervagen (dat is ook hier in de voettekst)

Zie de Pen ByKwaq door Chris Coyier (@chriscoyier) op CodePen.

SVG icons / Ster ratings

Er zijn een aantal eenvoudige, vector iconen verspreid over het ontwerp. Die zijn een sure-bet voor een SVG-pictogram systeem. Dit is mijn huidige aanbeveling voor het naderen van een SVG-pictogram systeem. Inline-de SVG. Eenvoudig en krachtig.

Die sterren zijn waarschijnlijk SVG-gebied. Hier is een goede verzameling van opties. Geleidelijk verbeteren van de radio knoppen, die altijd lijkt een slimme manier om te gaan:

Zie de Pen CSS: Radio-Ingang Sterren door Jake Albaugh (@jakealbaugh) op CodePen.

Hamburgers

Het lijkt misschien een beetje overbodig op een groot scherm ontwerp als dit, vooral als er navigatie al zichtbaar. Maar hey, het is moeilijk om te voorkomen dat deze dagen en er is iets te zeggen over de opleiding van de gebruikers waar de site navigatie kan gebeuren, onafhankelijk van waar u kijkt op de site.

Hier is een collectie van deze soort van menu ‘ s.

Zie de Pen Hamburger menu flip met tekst wijzigen door Eric Grucza (@egrucza) op CodePen.

Iets anders in het ontwerp dat ik heb niet gezegd dat je geest gaat naar de juiste weg?

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!