Web Development Concepten die alle webdesigners moeten begrijpen

Er valt veel over te zeggen de kloof tussen ontwerpers en ontwikkelaars. Toegegeven, er zijn veel ontwerper / ontwikkelaar-hybriden die dit kunnen begrijp beide zijden van de medaille, maar ze zijn er maar heel weinig tussen.

Creatieve projecten doen het goed goede communicatie. Dit kan echter moeilijk zijn wanneer ontwerpers en ontwikkelaars niet zeker weten hoe dit moet met elkaar praten. Ik denk niet dat ontwerpers moeten weten hoe ze correct JavaScript moeten schrijven, en ontwikkelaars moeten ook niet de typografische selectie beheersen. Maar er zijn er een paar fundamentele onderwerpen waarvan ik denk dat ze beide kanten op gaan.

De volgende onderwerpen zijn mijn eigen persoonlijke kijk op vitale ideeën voor webontwikkeling die alle ontwerpers moeten begrijpen. Als ontwerper / ontwikkelaar weet ik zelf hoe verwarrend het is om beide gebieden te bestuderen. Maar het is altijd de moeite waard om te leren, omdat een duidelijk begrip de communicatie verbetert en een ontwerper veel waardevoller maakt voor een creatief team.

Frontend gedragscode

Van webontwerpers wordt vaak gedacht dat zij frontend-vaardigheden hebben, samen met hun ontwerptalenten. Dit is een fel bediscussieerd onderwerp, vooral omdat het er is geen goed antwoord.

Ontwerpers zouden moeten doen wat zij zijn comfortabel met. Als dat betekent dat je alleen visueel ontwerpwerk doet, dan is het zo. Een kort begrip van frontend-technologieën kan echter dezelfde ontwerper maken intuïtiever bij het creëren van assets voor ontwikkelaars.

Ik geloof dat elke ontwerper op zijn minst de drie fundamentele talen van frontend-ontwikkeling (HTML, CSS en JS) samen met hoe ze worden gebruikt. De meeste vervolgkeuzemenu's zijn bijvoorbeeld afhankelijk van JavaScript, maar er zijn ook alternatieve CSS-alternatieven.

Wanneer een ontwerper een vervolgkeuzemenu maakt, kunnen ze nadenken over de ingewikkeldheid om het via code te implementeren. Een ontwerper die begrijpt welke elementen JavaScript vereisen, kan beter voorbereid zijn om te begrijpen wat ze ontwikkelaars vragen te bouwen.

Dit is mogelijk zonder te leren een enkele regel code te schrijven.

CSS is gemaakt naar style de website. Het is voornamelijk statisch afgezien van CSS-animaties en CSS creëert de meerderheid van de beelden op een pagina. Meest dynamische functies zijn gemaakt met JavaScript.

Als je deze kloof kunt begrijpen, zal het een bewuste poging doen om het ontwerpwerk uit te voeren. Het zal ook UX-bewegingsontwerpers dwingen na te gaan hoeveel werk gaat in het animeren van een interface.

Responsieve technieken

Elke webontwerper moet op zijn minst de term kennen reagerend ontwerp. Hierdoor kunnen websites aanpassen aan verschillende schermformaten, naar elk waarvan een andere lay-out thuishoort. Apparaatafmetingen wanneer een nieuwe lay-out wordt toegepast, zijn gedefinieerd door breekpunten, toegevoegd in (een van) de CSS-bestand (en).

Breekpunten worden gespecificeerd door a bepaalde pixelbreedte (en / of soms hoogte), ofwel minimum of maximum, waarbij de lay-out wordt aangepast aan die schermgrootte. Dus een responsieve lay-out ziet er anders uit op een 1080px-monitor dan op een 320px-smartphone.

Om te zien hoe breekpunten werken op echte sites, kijk op de Media Queries-website.

Jouw taak als ontwerper is om te overwegen hoe elk breekpunt zou kunnen zijn invloed hebben op de mockup. U kunt worden belast met het ontwerpen van verschillende comps, elk passend in verschillende schermafmetingen.

Als je eenmaal hebt begrepen dat een CSS-breekpunt de voorwaarden definieert wanneer de lay-out verandert, heb je een veel gemakkelijkere tijd om deze items aan het ontwikkelteam te leveren.

Denk modulair met ontwerpen

Ontwikkelaars willen dat altijd hergebruik code zoveel mogelijk, aangezien deze aanpak ontwikkeling mogelijk maakt minder breedsprakig en verkleint bestandsgroottes - in feite is het een belangrijke code-optimalisatietechniek.

Modulair ontwerp beschrijft een methode om websites te maken van “modules” dat kan zo zijn hergebruikt na verloop van tijd. Denk aan knoppen, formulierinvoeringen, kopstijlen of blockquotes met fancy stylings.

als jij ontwerpelementen modulair, het wordt gemakkelijker voor ontwikkelaars om de lay-out te coderen herbruikbare CSS-klassen. Het is altijd een goed idee om na te denken over waar je kunt redelijk hergebruik dezelfde kleuren, texturen en pagina-elementen, maar daar moet je slim over zijn om de algehele esthetiek niet te schaden.

Het is zelfs beter als jij annoteren welke elementen je hebt gekopieerd over verschillende mockups, zodat ontwikkelaars dat kunnen markeer deze delen van de site met herhalingscode - ontwikkeling sneller en eenvoudiger maken.

Modulair ontwerp heeft betrekking op atomisch ontwerp, beide benaderingen zijn eerder gericht op ontwikkelaars. Echter visualisatie kan je helpen te begrijpen hoe de code werkt, dus als je het moeilijk hebt visualiseren modulair ontwerp bekijk dit bericht om een ​​paar voorbeelden te zien.

Inzicht in Retina-afbeeldingen en SVG

Meestal is het de taak van de ontwerper om foto's voor te bereiden, noodzakelijke foto's vast te leggen en pictogrammen helemaal opnieuw te ontwerpen. Dit betekent dat ontwerpers alleen verantwoordelijk zijn voor het leveren van de visuele activa dat ontwikkelaars uiteindelijk coderen in de lay-out. Dit is waarom het belangrijk is om te begrijpen Retina-maten en naar pass retina-ondersteunde activa aan de ontwikkelaars samen met de laatste mockup (s).

Ik zou dit Smashing Magazine-bericht ten zeerste aanbevelen als je meer wilt weten over retina-ontwerpworkflows. Retinize It is een gratis verzameling Photoshop-acties die dit kunnen maak automatisch retina-versies van uw vermogen.

De meeste ontwerpers weten het al te ondersteunen @ 2x afbeeldingen, maar de nieuwere iPhone 6+ apparaten hebben @ 3x resoluties. Sommige projecten maken zich echter niet druk om de @ 3x-beeldformaten, dus praat met uw projectleider voordat u de activa finaliseert.

Een laatste ding om te overwegen is het vooruitgang van SVG op internet. Alle moderne browsers ondersteunen SVG, dat is een vector-gebaseerd beeldformaat. Dit betekent dat SVG-pictogrammen dat zullen doen automatisch schalen zonder kwaliteitsverlies, U hebt dus geen retina-items nodig voor SVG-afbeeldingen.

Niet alle creatieve teams zijn echter bereid om met SVG's te werken voor webdesign. Ze worden zeker ondersteund door browsers, maar in sommige gevallen kunnen ze ook lastig zijn om te implementeren. Daarom is communicatie van vitaal belang voor een succesvolle ontwerper / ontwikkelaarrelatie.

Bespreek de voor- en nadelen van het gebruik van vectorafbeeldingen en beslis wat het beste werkt voor elk project. Door alleen deze functies te begrijpen, kunt u duidelijk communiceren met ontwikkelaars en zelfs helpen de code te coderen voor retina-ondersteuning.

Begrijp toegankelijkheid

Progressieve verbetering en sierlijke degradatie zijn twee verschillende manieren om hetzelfde probleem aan te pakken: toegankelijkheid. Niet alle gebruikers staan ​​op apparaten of gebruiken browsers die 100% van de dynamische functies van een website ondersteunen.

Deze gebruikers moeten nog steeds een ervaring die werkt, en dit moet met de juiste codering worden behandeld. Sommige schermlezers negeren mogelijk alle JavaScript- en CSS-code, maar de website moet nog steeds functioneren.

Ik heb onlangs een bericht behandeld progressieve verbetering in detail, omdat dit mijn voorkeursmethode voor ontwikkeling is. Progressieve verbetering begint met heel eenvoudige functies, werkt dan tot meer “gevorderd” Kenmerken.

Sierlijke degradatie is de tegenovergestelde benadering waar alle hoofdfuncties zijn eerst ontworpen, dan beslist de ontwikkelaar hoe deze functies moeten worden gebruikt als de gebruiker geen JavaScript of CSS ondersteunt.

Het is onwaarschijnlijk dat een ontwerper wordt gevraagd om mockups te doen voor elk van deze situaties. Maar het is belangrijk dat ontwerpers deze termen begrijpen en wat ze betekenen, omdat ze invloed hebben op het ontwikkelingsproces. Dit geldt met name voor projecten waar toegankelijkheid een grote zorg is.

In Closing

Er zijn een aantal onderwerpen die ik heb overgeslagen omdat ik ze als optioneel beschouw. Versiebeheer, foutafhandeling en JavaScript-animaties zijn een paar meer complexe onderwerpen waar ontwerpers zich misschien over willen verdiepen.

Maar naar waarheid zullen de punten die in dit bericht worden behandeld, de ontwerpers meer dan helpen de vereisten van een ontwikkelingsteam te begrijpen. Door gewoon het oppervlak van webontwikkeling af te skimming krijg inzicht dat zal je helpen ideeën over te brengen en sympathiseren met problemen die zich voordoen tijdens de productie.

Als u op zoek bent naar meer verwante inhoud, bekijkt u deze berichten:

• Effectief communiceren met ontwikkelaars (Smashingmagazine.com)
• Help ontwerpers en ontwikkelaars elkaar te leren kennen (Uie.com)
• Leren programmeren geeft je voordelen als een UX-ontwerper (Jessicaivins.net)