Share
Det är ofta tänkt att utforma i webbläsaren är ett modernt tillvägagångssätt för webbdesign. Faktum är att före tillkomsten av verktyg som Photoshop var det lite annat val. Bara under de senaste åren har designersna gått tillbaka till sina rötter från början av sin responsiva design och började designa i webbläsaren.
Jag säger inte att varje webbplats ska börja livet i webbläsaren, men eftersom webbplatser nu behöver vara mer anpassningsbara än någonsin, verkar det vara mer meningsfullt att ta den här vägen. Att utforma i Photoshop (eller en liknande applikation) kan ha fördelar, som jag kommer att titta på senare, men det kan också ha dess nackdelar. Låt oss ta en titt på några av dessa.
En fråga som jag får frågade mycket av UI-designers på jobbet är "Vad är den maximala bredden som designen behöver vara?". Svaret som jag alltid gav till dessa frågor var "Skapa designen runt omkring 960px". Nuförtiden när jag blir frågad här säger jag till dem att det inte finns en fast bredd och att de bör föreställa sig att designen ska fungera i vilken bredd som helst.
Med responsen att vara i så stor efterfrågan är det viktigt att när webbplatser utformas att detta beaktas från början, inte bara infört som en eftertanke. När smarta telefoner först kom till scenen skulle många designers skapa en fast bredddesign i Photoshop för skrivbord och sedan en annan för smarta telefoner (vanligtvis runt 960px bredd för skrivbord och 320px för mobil). Även om detta tillvägagångssätt kan ha fungerat ett tag, är det inte längre troligt på grund av det stora utbudet av enhetsbredder som kommer åt banan. Det enda sättet att få en sann känsla för hur lyhörda webbplatser kommer att fungera, utseende och funktion är att designa dem i webbläsaren.
Konsistens kommer också att vara stor. Jag hoppas att tänka när det gäller återanvändbara delar för att hålla sakerna enkla och konsekventa - Chris Coyier om redesignen av CSS-tricks
Även om det kanske är sant att besökare (i de flesta fall) inte besöker en webbplats för sin design, utan istället besöker den för innehållet, genom att utforma i webbläsaren kan vi fokusera på webbplatsens innehåll och bygga designen kring det.
Vid design i Photoshop är det ofta så att designen anses vara först och innehållet andra. I vissa fall övervägs inte ens innehållet alls. Hur många gånger har du skapat en design i Photoshop och bara fyllt innehållet med en last av Lorem Ipsum? Vi har alla gjort det, men det verkar vara konstigt att ta när innehållet borde vara en av de högsta övervägandena. Utformning i webbläsaren möjliggör detta.
När du väljer detta tillvägagångssätt, innan du hoppar rakt in i din favorit kodredigerare är det viktigt att du har en stark uppfattning om vilka element och komponenter din webbplats kommer att omfatta. Genom att göra det kommer du att kunna göra återanvändbara komponenter, med samma HTML-markup och CSS. Alla ändringar som du gör kan enkelt ändras genom att bara ändra några rader kod.
En av de främsta orsakerna du kanske vill utforma i webbläsaren är att du kan se hur en lyhörd design kan se ut i realtid. Innan du lägger ut med det här kan det vara en bra idé att definiera några fördefinierade frågeställningar för mediafrågor och då ska allt mellan dessa brytpunkter vara flytande.
Tänk på din webbplats layout och anpassa den bästa lösningen för sina behov. Om du till exempel har ett 4x4-bildgalleri, planera vid vilken brytpunkt kommer 4x4-gallret att bli inkompetent för mindre upplösningar och byta rutnätet till något mer lämpligt, till exempel ett 2x8 rutsystem.
Okej, så du kanske tror Photoshop har tagit en hel del av en misshandel i den här artikeln, men Photoshop har fortfarande sin tid att lysa även när du utformar i webbläsaren. Det finns tillfällen då CSS inte bara kommer att klippa stylingen och för mer dekorativa element måste du tillgripa tillbaka till Photoshop. Du ska använda Photoshop tillsammans med din kodredigerare.
Webbplatser som ovanstående skulle vara svåra att designa i webbläsaren, eftersom det har en starkt illustrerad stil. Att utforma i webbläsaren skulle inte vara det bästa sättet för webbplatser som detta.
Det är inte ovanligt idag för UI-designers att presentera ett stämningsbräde för en webbdesign i stället för en faktisk representation av den. Dessa stämningsbrädor kan innehålla saker som
Genom att göra detta är designen fortfarande väl övervägd, men är inte lika restriktiv som en traditionell Photoshop mockup-design.
Om du ännu inte har försökt att designa i webbläsaren och du vill fastna i, här är några användbara verktyg som hjälper dig att välja detta tillvägagångssätt.
Det finns många IDE-er tillgängliga, men här är en online, som tar utformning i webbläsaren till en helt ny nivå. Fördelarna med att använda ett molnbaserat IDE är att du kan dela filer med kollegor eller andra som arbetar med ett projekt, alla med stor lätthet.
Styles kakel kan beskrivas som
en designlevererbar bestående av teckensnitt, färger och gränssnittselement som kommunicerar kärnan i ett visuellt varumärke för webben.
De låter dig skapa en varumärkesidentitet för en webbplats som kan ge den lite stil utan att vara för restriktiv för hur den färdiga designen ska se ut. Om du inte har använt dessa tidigare kan du hitta en bra introduktion till det här.
Live Reload uppdaterar automatiskt webbläsarens sida så snart du sparar en HTML / CSS / javascript eller någon annan fil. Detta kan spara tid och tar bort behovet att ständigt trycka på F5-uppdateringsknappen.
Typgjutning är utmärkt för att utforma typografi i webbläsaren. Det låter dig snabbt stila typ i webbläsaren och kontrollera läsbarhet och rendering när du arbetar.
I skrivande stund har Adobe ett litet verktyg i rörledningen som ser ganska lovande ut. Det kallas 'Edge Reflow' och det gör att du kan designa samtidigt för alla skärmstorlekar utan att påverka kvalitet eller kapacitet. Det är skrivet som ett mycket användbart verktyg för att designa snabba webbplatser eftersom, till skillnad från Photoshop, det inte använder en fast breddduk. Det finns inga nyheter om när det kommer att släppas, men du kan anmäla dig för att bli underrättad om att den släppts.
Tyvärr kan det finnas en negativ bieffekt för att designa i webbläsaren. Som webbdesigners och utvecklare letar vi alltid efter sätt att påskynda vårt webbdesign arbetsflöde. När du utformar i webbläsaren kan vi bli så fastna i funktionaliteten, se till att det fungerar vid varje upplösning som vi ibland kan glömma att ge designen den kärlek och uppmärksamhet som den förtjänar. Vi tar genvägar och försöker göra livet enkelt för oss själva, som alla kan bidra till försummelse.
Luta dig inte bara tillbaka och ta den "enkla vägen". Det har varit många gånger när jag har tagit emot en fil för en design, med tanke på att den är en titt och trodde, kan inte mycket av detta skapas i CSS, det kommer att bli en bildhård plats bara för layouten. Vi vet alla att bilder orsakar uppblåsthet och så försök att använda dem så lite som möjligt. Ibland kan det dock vara oundvikligt, till exempel när man arbetar med starkt utformat varumärkesinnehåll. Det är detsamma med många discipliner; du måste göra en förnuftig kompromiss mellan form och funktion. För mycket form och för liten funktion kommer att resultera i en dålig webbplats och vice versa.
Det har aldrig varit viktigare att kunna designa flytande och lyhörda webbplatser som anpassar sig till olika upplösningar. Behovet av dessa krav gör verktyg som Photoshop mindre användbara än de en gång var för webbdesign.
Eftersom den lyhörda designen är här för att stanna, kan vi börja se några förändringar i hur webbsidor är estetiskt utformade och med detta kommer nya verktyg och lösningar att komma in på några av dagens problem. Naturligtvis, om en webbplats är mer fokuserad på varumärke och design, kommer Photoshop alltid vara ditt nummer ett verktyg för att gå till; vissa webbplatser är mer designledda än innehållsledda.
.
Accentsconagua