Share
Dat wordt vaak gedacht ontwerpen in de browser is een moderne benadering van webdesign. In feite was er voor de komst van tools zoals Photoshop weinig andere keuze. Pas in de laatste paar jaar, sinds de dageraad van responsief ontwerp, hebben ontwerpers terug naar hun roots gegaan en zijn ze begonnen met ontwerpen in de browser.
Ik zeg niet dat elke website het leven in de browser moet beginnen, maar omdat websites nu flexibeler moeten zijn dan ooit, lijkt het logischer om deze route te volgen. Ontwerpen in Photoshop (of een vergelijkbare toepassing) kan voordelen hebben, waar ik later naar zal kijken, maar het kan ook nadelen hebben. Laten we een paar hiervan eens bekijken.
Een vraag die ik veel krijg gesteld door UI-ontwerpers op het werk is: "Wat is de maximale breedte die het ontwerp nodig heeft?". Het antwoord dat ik altijd gaf op deze vragen was "Maak het ontwerp rond de 960px". Tegenwoordig wanneer ik dit wordt gevraagd, vertel ik hen dat er geen vaste breedte is en dat ze zich moeten voorstellen dat het ontwerp op elke breedte zou moeten werken.
Omdat responsiviteit in zo'n grote vraag is, is het belangrijk dat wanneer websites worden ontworpen, dit vanaf het begin in overweging wordt genomen, niet alleen als bijzaak wordt ingebracht. Toen smartphones voor het eerst op de scène verschenen, zouden veel ontwerpers een ontwerp met een vaste breedte maken in Photoshop voor desktops en vervolgens een ander voor smartphones (meestal rond de 960px breedte voor desktop en 320px voor mobiel). Hoewel deze aanpak een tijdje heeft gewerkt, is het niet meer plausibel vanwege de enorme reeks apparaatbreedten die toegang tot het web hebben. De enige manier om een goed beeld te krijgen van hoe responsieve websites zullen werken, kijken en functioneren, is door ze in de browser te ontwerpen.
Consistentie zal ook groot zijn. Ik hoop te denken in termen van herbruikbare onderdelen om dingen eenvoudig en consistent te houden - Chris Coyier over het herontwerp van CSS-tricks
Hoewel het waar kan zijn dat bezoekers (in de meeste gevallen) geen website bezoeken vanwege het ontwerp, maar in plaats daarvan de inhoud bezoeken, door in de browser te ontwerpen kunnen we ons richten op de inhoud van een website en het ontwerp daarop bouwen.
Bij het ontwerpen in Photoshop is het vaak zo dat het ontwerp als eerste wordt beschouwd en de inhoud als tweede. In sommige gevallen komt de inhoud helemaal niet in aanmerking. Hoe vaak heb je een ontwerp in Photoshop gemaakt en heb je de inhoud net gevuld met een lading Lorem Ipsum? We hebben het allemaal gedaan, maar het lijkt een vreemde benadering om te nemen wanneer de inhoud een van de hoogste overwegingen zou moeten zijn. Ontwerpen in de browser maakt dit mogelijk.
Wanneer u voor deze benadering kiest, is het belangrijk om een goed idee te hebben van welke elementen en componenten uw website zal bevatten, voordat u rechtstreeks in uw favoriete coderedacteur bent gesprongen. Op deze manier kunt u herbruikbare componenten maken met dezelfde HTML-markup en CSS. Alle wijzigingen die u aanbrengt, kunnen eenvoudig worden gewijzigd door slechts een paar regels code te wijzigen.
Een van de belangrijkste redenen waarom u in de browser wilt ontwerpen, is dat u kunt zien hoe een responsief ontwerp er in realtime uit kan zien. Voordat u hiermee begint, is het misschien een goed idee om een aantal vooraf gedefinieerde brainstelpunten voor mediaquery's op te stellen en vervolgens moet alles tussen deze breekpunten vloeiend zijn.
Denk na over de lay-out van uw site en pas de beste oplossing aan voor zijn behoeften. Als u bijvoorbeeld een 4x4-fotorastersysteem hebt, moet u plannen bij welk onderbrekingspunt het 4x4-raster niet in aanmerking komt voor kleinere resoluties en het raster wijzigen in iets gepaster, zoals een 2x8 rastersysteem.
Ok, dus je zou kunnen denken dat Photoshop nogal wat gehavend is geweest in dit artikel, maar Photoshop heeft nog steeds de tijd om te schitteren, zelfs wanneer je in de browser ontwerpt. Er zijn tijden dat CSS de styling niet zal knippen en voor meer decoratieve elementen moet je teruggaan naar Photoshop. U zou Photoshop naast uw code-editor moeten gebruiken.
Websites zoals die hierboven zijn moeilijk te ontwerpen in de browser omdat deze een sterk geïllustreerde stijl heeft. Ontwerpen in de browser zou niet de beste benadering zijn voor sites als deze.
Het is tegenwoordig niet ongebruikelijk dat UI-ontwerpers een moodboard van een websiteontwerp presenteren in plaats van een echte weergave ervan. Deze moodboards kunnen dingen bevatten zoals
Door dit te doen, wordt het ontwerp nog steeds goed overwogen, maar is niet zo beperkend als een traditioneel Photoshop-mockupontwerp.
Als je het ontwerpen in de browser nog niet hebt geprobeerd en je wilt vastlopen, zijn hier enkele handige hulpmiddelen die je kunnen helpen bij het kiezen voor deze aanpak.
Er zijn veel IDE's beschikbaar, maar hier is er een online, die het ontwerpen in de browser naar een geheel nieuw niveau tilt. De voordelen van het gebruik van een op de cloud gebaseerde IDE is dat u bestanden kunt delen met collega's of andere mensen die aan een project werken, allemaal met groot gemak.
Stijltegels kunnen beschreven worden als
een ontwerp deliverable bestaande uit lettertypen, kleuren en interface-elementen die de essentie van een visueel merk voor het web communiceren.
Ze laten je een merkidentiteit creëren voor een website die hem een bepaalde stijl kan geven zonder te beperkend te zijn voor hoe het afgewerkte ontwerp eruit zou moeten zien. Als je deze nog niet eerder hebt gebruikt, kun je hier een geweldige introductie vinden.
Live Reload ververst automatisch de browserpagina zodra u een HTML / CSS / javascript of een ander bestand opslaat. Hierdoor kunt u tijd besparen en hoeft u niet meer telkens op de F5-knop Vernieuwen te drukken.
Type cast is geweldig voor het ontwerpen van typografie in de browser. Hiermee kunt u snel een stijl typen in de browser en zoeken naar leesbaarheid en weergave terwijl u werkt.
Op het moment van schrijven heeft Adobe een klein hulpmiddel in de pijplijn dat er veelbelovend uitziet. Het heet 'Edge Reflow' en het stelt je in staat tegelijkertijd te ontwerpen voor alle schermformaten zonder in te boeten aan kwaliteit of functionaliteit. Het is geschreven als een zeer nuttige tool voor het ontwerpen van responsieve websites omdat het, in tegenstelling tot Photoshop, geen canvas met een vaste breedte gebruikt. Er is geen nieuws over wanneer het moet worden vrijgegeven, maar je kunt je aanmelden om op de hoogte te worden gesteld van de release.
Helaas kan het ontwerpen in de browser een negatief neveneffect hebben. Als webontwerpers en -ontwikkelaars zijn we altijd op zoek naar manieren om onze webontwerpworkflow te versnellen. Bij het ontwerpen in de browser kunnen we zo verstrikt raken in de functionaliteit dat het werkt bij elke resolutie die we soms kunnen vergeten om het ontwerp de liefde en aandacht te geven die het verdient. We nemen snelkoppelingen en proberen het leven gemakkelijk te maken voor onszelf, wat allemaal kan bijdragen aan verwaarlozing.
Leun niet achterover en neem de 'gemakkelijke uitweg'. Er zijn vele malen geweest dat ik een bestand voor een ontwerp heb ontvangen, het één blik gegeven heb en dacht 'niks, daar kan niet veel van gemaakt worden in CSS, het wordt een zware website voor alleen de layout'. We weten allemaal dat beelden een opgeblazen gevoel veroorzaken en probeer ze daarom zo min mogelijk te gebruiken. Soms is dit echter onvermijdelijk bij het werken aan sterk ontworpen merkgerelateerde inhoud. Het is hetzelfde met veel disciplines; je moet een verstandig compromis sluiten tussen vorm en functie. Te veel vorm en te weinig functie resulteert in een slechte website en omgekeerd.
Het is nog nooit zo belangrijk geweest om vloeiende, responsieve websites te ontwerpen die zich aanpassen aan verschillende resoluties. De behoefte aan deze vereisten maakt hulpmiddelen zoals Photoshop minder nuttig dan ze ooit waren voor webdesign.
Omdat een responsief ontwerp niet weg te denken is, kunnen we een verandering in de manier waarop websites esthetisch zijn ontworpen gaan zien en daarmee zullen nieuwe tools en oplossingen voor enkele van de hedendaagse problemen komen. Natuurlijk, als een website meer gericht is op branding en design, dan is Photoshop altijd uw belangrijkste hulpmiddel om naartoe te gaan; sommige sites zijn meer door design geleid dan content-led.
.
Accentsconagua