Hur gör du mockup en webbplats?
Det typiska arbetsflödet startar i Photoshop och övergår sedan till HTML och CSS för att mimicera original PSD så bra som möjligt. Det finns emellertid en växande trend i webbdesign för att skrapa Photoshop-steget till förmån för att skapa den första kompisen direkt i webbläsaren med din favoritredigerare. Jag är säker på att just nu är ditt huvud surrande med anledningar till varför detta tillvägagångssätt skulle begränsa din design, men det finns faktiskt mycket mer du kan göra rätt i webbläsaren än du kanske tror. Denna artikel kommer att ge dig de verktyg och trick du behöver för att skapa lysande, fungerande mockups som ditt allra första steg i designprocessen.
Argumentet
Meagan Fisher av 24ways.org gör ett övertygande argument för att utforma i webbläsaren. Medan jag inte delar hennes förakt för Photoshop (jag älskar Photoshop mer än någon annan mjukvara på planeten), håller jag med några av hennes andra punkter. Fisher hävdar att en statisk bild inte verkligen ger dig den sanna känslan av en webbplats som en levande sida gör och det som utformas i webbläsaren tvingar dig att fokusera på innehållsorganisation före design som kan bidra till att säkerställa bättre tillgänglighet och lämplig hierarki av information.
Vi använder Fishers artikel som ett dykbräda för våra tips om hur man blir en proffs för att skapa fantastiska in-browser mock ups som är nästan redo att gå när (och om) klienten ger dig det gröna ljuset.
Tips 1: Starta Basic och använd ett rutnät
Som jag nämnde ovan kan du lägga in och organisera allt innehåll som är ostylat, så att du kan skapa en design som passar ditt innehåll snarare än vice versa. Att använda en rutnätbaserad ram kan radikalt minska utvecklings tiden och hjälper till att säkerställa att din layout är stabil.
Medel:
För mer information om nätbaserad webbdesign, kolla in vår artikel om CSS-ramverk.
Tips 2: Få en bra redaktör
Om du kodar webbplatser för hand, är en professionell webredaktör hörnstenen i ditt arbetsflöde. Jag använder (och absolut kärlek) espresso från MacRabbit. Det har alla de lilla funktionerna som jag vill ha som utdrag och auto-complete samt de stora funktionerna som jag behöver som att kunna se levande ändringar i en förhandsgranskning av webbläsaren när jag skriver in kod. Du bör handla och hitta den applikation som passar dina behov bäst. Här är en snabb lista med redaktörer för att komma igång:
- Aptana: Mac, Windows Linux (överlägset min favoritfria alternativ)
- Komodo IDE: Mac, Windows, Linux
- NetBeans: Mac, Windows, Linux
- Coda: Mac (ett värdigt Espresso-alternativ)
- Text Wrangler & BBEdit: Mac
Tips 3: Placera en skugga på ett element
Photoshop är inte längre det enda sättet att få en anständig skugga på webben. Många (men inte alla) stora webbläsare stöder nu CSS3 och med det stödet finns flera nya funktioner för att skapa avancerade mönster. En av de mest användbara funktionerna är box-shadow, som låter dig lägga till skuggor till vissa objekt med endast CSS. Boxskuggans format är boxskugga: 5px 5px 20px # 000000. Dessa värden låter dig justera skuggans bredd och längd, liksom dess oskarpa radie och färg.
Medel:
Kolla in CSS.flepstudios artikel om boxskuggningseffekten för mer om hur du använder den här funktionen.
Tips 4: Skuggtext
Om du vill placera en skugga på text använder du text-shadow funktion som visat på denna Kremalicious handledning. Formatet för text-shadow är textskugga: 1px 1px 1px # 000. De två första värdena bestämmer skuggans förskjutning (x respektive y), det tredje värdet bestämmer suddradien och slutvärdet gör att du kan ändra skuggans färg.
Den här funktionen kan användas för att skapa mer än bara skuggor. Handledningen ovan visar hur du använder text-shadow för att skapa en brevpresseffekt, en glödseffekt och till och med en eldig texteffekt.
Tips 5: Avrunda hörn
Avrundade hörn är en annan funktion som äntligen har antagits i modern CSS. Du kan uppnå CSS-rundade hörn i både Safari och Firefox med hjälp av border-radius fungera. Ställ bara in -moz-border-radius och / eller -webkit-border-radius till ett givet värde i pixlar för att justera rundigheten av gräns på ett visst föremål.
Medel:
För mer avrundade hörnstudier än vad du kan skaka en pinne på, kolla CSS Juice's raundup av 25 rundade hörntekniker med CSS.
Tips 6: Bygga ett färgschema
Photoshop ger ett bra sätt att visualisera och experimentera med olika färger, men det finns också en mängd gratis färgresursresurser på webben. Enligt min åsikt är det bästa av dessa Adobe Kuler. Kuler ger inte bara det bästa gränssnittet för att skapa vackra färgscheman på flugan, det ger dig också tillgång till ett stort bibliotek av färdiga, sökbara färgscheman. Vill du ge din webbplats en höstlook? Skriv bara in? Fall? och du har över 2600 system att välja mellan. Kuler gör det super lätt att skapa ett fantastiskt färgschema som du kan släppa direkt in i din CSS (vilket gör det enkelt att byta och experimentera med att flyga).
Medel:
För mer snygga färgverktyg, kolla in vår artikel om 25 Awesome Tools för att välja ett webbsidor färgschema.
Tips 7: Textgradienter
Om du är snygg kan du faktiskt tillämpa en lutning för att leva text i webbläsaren. Vad märkligt voodoo är det här du frågar? Kryssning till WebDesignerWall för att kolla in deras handledning om ämnet. I huvudsak lägger du en spänning runt texten som du vill tillämpa gradienten på och sedan ställa in bakgrunden för spänningen till en upprepad PNG av gradienten. Självklart, för att göra PNG måste du använda en bildredigerare (du visste att du måste ta till bra gamla Photoshop då och då).
Tips 8: Använda RGBA till skärmfärger
CSS3 implementerar en ny funktion som heter RGBA (? A? Betyder alfa). Använda A? värde, kan du ställa opacitet för en fyllning. Den här praktiska funktionen låter dig inte enkelt skapa färgscheman med en enda färg med olika alfavärden, men låter dig faktiskt skapa transparenta objekt som avslöjar konstverket bakom dem, vilket liknar att minska opaciteten hos ett lager i Photoshop.
Medel:
Kolla in Oncemades artikel på rätt sätt att förklara RGBA-färger.
Tips 9: Känn dina webbfonter
Falla inte i fällan med att använda samma två teckensnitt på varje enskild webbplats du designar. Ändra saker genom att utnyttja hela webbsäkerhetsfonter. Typetester är ett bra verktyg för att göra just det. Det låter dig förhandsgranska textblock i olika teckensnitt och inställningar (storlek, anpassning, spårning, etc.) direkt i din webbläsare. Det bästa är att när du hittar de inställningar som du vill, kommer Typetester att exportera CSS till dig.
Tips 10: Få ännu bättre typsnitt
Skapa text som en bild i Photoshop ger dig friheten att använda vilken typsnitt du vill utan att oroa dig för kompatibilitet. Tyvärr resulterar denna metod i text som inte kan väljas eller sökas. Men det är inte så svårt att komma runt detta problem. Idag finns det flera lösningar för att installera anpassade teckensnitt med live, valbar text på din webbplats med kommandot @ font-face.
Medel:
Få fantastiska teckensnitt på din webbplats på några minuter med vår steg-för-steg-typkit-handledning.
Tips 11: Stock Art är din vän
Det är ofta fallet, speciellt med inledande mockups, att du behöver en snabb knapp, ikon eller annan grafik som du inte nödvändigtvis vill bygga från början. Lager konst webbplatser som GraphicRiver spricker med webbelement som är redo att släppa in på en webbplats, många utan några Photoshop ändringar krävs! Även om du enkelt kan bygga objekten själv på en timme, släppa en buck på en bra konst och ha det klart att gå på 2-3 minuter, är det ganska lockande.
Tips 12: Använd Browser Testing Tools
Jag vet att många av er helt enkelt inte kan vänta med att skriva en skurande kommentar om hur flera av teknikerna ovan (skuggor, avrundade hörn, etc.) bara fungerar i vissa webbläsare och är därför oanvändbara. Det är precis därför jag alltid försöker presentera båda sidor av ett argument. De som arbetar för att utveckla i webbläsaren presenterar dessa tekniker som bevis för att du kan uppnå mycket utanför Photoshop, men kanske är lite för ivrig att avvisa det faktum att flera webbläsare får en drastiskt annorlunda upplevelse på grund av brist på stöd.
Poängen är, oavsett hur du går till att utveckla en webbplats, bör du alltid veta exakt hur stora webbläsare kommer att göra din webbplats. Då kan du fatta ett välgrundat beslut om vilka webbläsare som är acceptabla att lämna bakom sig. För att uppnå denna prestation, kolla in Adobe Browserlab. Det här fantastiskt användbara verktyget låter dig förhandsgranska en webbplats på flera webbläsare ett operativsystem i realtid. Den enda nackdelen är att du faktiskt kan inser hur dålig dina webbplatser gör i vissa webbläsare, vilket oundvikligen leder till att banor och huvud skrapar.
Slutsats
Tja, vad tycker du? Är du redo att korsa över och börja skapa comps endast beväpnade med en textredigerare och webbläsare? Eller är du som jag, säker på att en förseare måste pryva en Photoshop-programvarukassa ur dina kalla döda fingrar innan du släpper? Självklart finns det inga absolutes här. Få professionella designers skapar mockups utan någon hjälp alls från en bildredigerare. Frågan blir då, på det ursprungliga utkastet, var tycker du att den mesta tiden är bäst? Vi skulle gärna veta. Använd gärna kommentarerna för att ta ställning och försvara din position till döden. När det gäller mig verkar denna slutsats bli mer och mer makaber så jag skulle hellre stanna här.