Fra den sidste video ved vi, at vi har fem vigtige punkter at overveje, når vi starter med designet af dette websted. Vi holder dem øverst i tankerne, når vi bevæger os fremad.
Vi starter selvfølgelig "mobil først", og vi begynder at finde ud af designet i Photoshop. Vi vil ikke blive der, men de kreative værktøjer i Photoshop er gode til kreativ tænkning i starten af et designprojekt.
Vi åbner iOS-simulatoren, der følger gratis med XCode på Mac. Det er til test af internettet og native apps på en stationær / bærbar computer. Vi vil bare have det hurtigt, så vi kan tage et skærmbillede af det for at give os et kontekstuelt lærred i Photoshop.
For ordens skyld starter vi ikke "iPhone" først, det er bare en lille skærm, der er praktisk for os at designe rundt. Vi designer ikke noget, der er alt for specifikt for iPhones størrelse eller kapacitet.
For at give os selv et højere lærred at arbejde fra (ingen grund til at begrænse webstedet til over "folden") skærer vi bunden af telefonen af og trækker den ned. Så tager vi et tyndt stykke af kanterne på iPhone og trækker dem ned, så i det væsentlige har vi denne superhøje (men komplette) iPhone.
Vi efterlader en guide på plads, hvor den originale skærm sluttede for at minde os om, hvor stor den var. Ja, alle ruller. Især på mobil. Men det er stadig rart at vide, hvordan den første skærm ser ud.
Filer
- # 004 - Telefon Canvas.psd.zip
- # 004 - Raw Photos.zip