A partir do último vídeo, sabemos que temos cinco pontos principais a considerar ao iniciar o design deste site. Vamos mantê-los em primeiro lugar à medida que avançamos.
Estamos começando “primeiro o celular”, é claro, e vamos começar a descobrir o design no Photoshop. Não vamos demorar muito, mas as ferramentas criativas do Photoshop são ótimas para o pensamento criativo no início de um projeto de design.
Abrimos o simulador iOS que vem gratuitamente com o XCode no Mac. É para testar a web e aplicativos nativos em um computador desktop / laptop. Queremos apenas rápido para que possamos fazer uma captura de tela para nos dar uma tela contextual no Photoshop.
Para o registro, não estamos iniciando o “iPhone” primeiro, é apenas uma pequena tela que é conveniente para nós projetarmos. Não iremos projetar nada que seja excessivamente específico para o tamanho ou capacidades do iPhone.
Para nos dar uma tela mais alta para trabalhar (não há necessidade de confinar o site acima da "dobra"), cortamos a parte inferior do telefone e o arrastamos para baixo. Em seguida, pegamos uma fatia fina das bordas do iPhone e arrastamos para baixo, portanto, basicamente, temos este iPhone super alto (mas completo).
Deixamos um guia no local onde a tela original terminava para nos lembrar o quão grande ela era. Sim, todo mundo rola. Especialmente no celular. Mas ainda é bom saber como é a primeira tela.
arquivos
- # 004 - Phone Canvas.psd.zip
- # 004 - Raw Photos.zip