Från den senaste videon vet vi att vi har fem viktiga punkter att tänka på när vi börjar med utformningen av denna webbplats. Vi håller dem högst upp när vi går framåt.
Vi startar naturligtvis "mobil först" och vi kommer att börja räkna ut designen i Photoshop. Vi dröjer inte kvar där, men de kreativa verktygen i Photoshop är bra för kreativt tänkande i början av ett designprojekt.
Vi öppnar iOS-simulatorn som levereras gratis med XCode på Mac. Det är för att testa webben och inbyggda appar på en stationär / bärbar dator. Vi vill bara ha det snabbt så att vi kan ta en skärmdump av det för att ge oss en kontextuell duk i Photoshop.
För rekordet, vi startar inte "iPhone" först, det är bara en liten skärm som är bekvämt för oss att utforma runt. Vi kommer inte att utforma något som är alltför specifikt för iPhones storlek eller kapacitet.
För att ge oss en högre duk att arbeta från (inget behov av att begränsa webbplatsen till ovanför "vikningen") skär vi av botten på telefonen och drar den nedåt. Sedan tar vi en tunn skiva av iPhone-kanterna och drar ner dem, så i princip har vi den här superhöga (men kompletta) iPhone.
Vi lämnar en guide på plats där originalskärmen slutade för att påminna oss om hur stor den var. Ja, alla rullar. Speciellt på mobil. Men det är fortfarande trevligt att veta hur den första skärmen ser ut.
Filer
- # 004 - Telefon Canvas.psd.zip
- # 004 - Raw Photos.zip