Fra den siste videoen vet vi at vi har fem viktige punkter å vurdere når vi begynner med utformingen av dette nettstedet. Vi vil holde dem øverst i tankene når vi går videre.
Vi starter selvfølgelig "mobil først", og vi begynner å finne ut av designet i Photoshop. Vi vil ikke somle der, men de kreative verktøyene i Photoshop er gode for kreativ tenkning i starten av et designprosjekt.
Vi åpner iOS-simulatoren som kommer gratis med XCode på Mac. Det er for å teste nettet og native apps på en stasjonær / bærbar datamaskin. Vi vil bare ha det raskt, slik at vi kan ta et skjermbilde av det for å gi oss et kontekstuelt lerret i Photoshop.
For ordens skyld starter vi ikke "iPhone" først, det er bare en liten skjerm som er praktisk for oss å designe rundt. Vi vil ikke designe noe som er altfor spesifikt for iPhones størrelse eller evner.
For å gi oss selv et høyere lerret å jobbe fra (ingen grunn til å begrense nettstedet til over "brettet"), kutter vi bunnen av telefonen og drar den ned. Så tar vi et tynt stykke av kantene på iPhone og drar dem ned, så egentlig har vi denne superhøye (men komplette) iPhone.
Vi legger igjen en guide der den originale skjermen endte for å minne oss på hvor stor den var. Ja, alle ruller. Spesielt på mobil. Men det er fortsatt hyggelig å vite hvordan den første skjermen ser ut.
Filer
- # 004 - Phone Canvas.psd.zip
- # 004 - Raw Photos.zip