Z ostatniego filmu wiemy, że na początku projektowania tej witryny należy wziąć pod uwagę pięć głównych punktów. Będziemy mieć to na uwadze, gdy będziemy postępować naprzód.
Oczywiście zaczynamy „najpierw na urządzeniach mobilnych” i zamierzamy wymyślić projekt w Photoshopie. Nie będziemy się tam zatrzymywać, ale kreatywne narzędzia w Photoshopie są świetne do kreatywnego myślenia na początku projektu.
Otwieramy symulator iOS, który jest darmowy z XCode na Macu. Służy do testowania aplikacji internetowych i natywnych na komputerze stacjonarnym / laptopie. Chcemy tylko, aby było to szybkie, abyśmy mogli zrobić zrzut ekranu, aby uzyskać kontekstowe płótno w Photoshopie.
Dla przypomnienia, nie zaczynamy najpierw „iPhone'a”, to tylko mały ekran, który jest dla nas wygodny do projektowania. Nie będziemy projektować niczego, co byłoby zbyt specyficzne dla rozmiaru lub możliwości iPhone'a.
Aby zapewnić sobie wyższe płótno do pracy (nie ma potrzeby ograniczania witryny do miejsca powyżej „zagięcia”), odcinamy spód telefonu i przeciągamy go niżej. Następnie bierzemy cienki kawałek krawędzi iPhone'a i przeciągamy je w dół, więc w zasadzie mamy ten super wysoki (ale kompletny) iPhone.
W miejscu, gdzie kończył się oryginalny ekran, zostawiamy przewodnik, który przypomina nam, jak duży był. Tak, wszyscy się przewijają. Zwłaszcza na urządzeniach mobilnych. Ale nadal miło jest wiedzieć, jak wygląda ten pierwszy ekran.
Akta
- # 004 - Phone Canvas.psd.zip
- # 004 - Raw Photos.zip