Desde el último video, sabemos que tenemos cinco puntos principales a considerar al comenzar con el diseño de este sitio. Los mantendremos en la parte superior de nuestra mente a medida que avanzamos.
Por supuesto, estamos comenzando con "dispositivos móviles primero" y vamos a comenzar a descubrir el diseño en Photoshop. No nos quedaremos ahí, pero las herramientas creativas de Photoshop son excelentes para el pensamiento creativo al comienzo de un proyecto de diseño.
Abrimos el simulador de iOS que viene gratis con XCode en Mac. Es para probar la web y las aplicaciones nativas en una computadora de escritorio o portátil. Solo queremos que sea rápido para que podamos tomar una captura de pantalla para darnos un lienzo contextual en Photoshop.
Para que conste, no estamos comenzando con “iPhone” primero, es solo una pantalla pequeña que es conveniente para nosotros diseñar. No diseñaremos nada que sea demasiado específico para el tamaño o las capacidades del iPhone.
Para tener un lienzo más alto para trabajar (no es necesario limitar el sitio por encima del "pliegue"), cortamos la parte inferior del teléfono y lo arrastramos hacia abajo. Luego tomamos una fina rebanada de los bordes del iPhone y los arrastramos hacia abajo, por lo que esencialmente tenemos este iPhone súper alto (pero completo).
Dejamos una guía en el lugar donde terminaba la pantalla original para recordarnos lo grande que era. Sí, todo el mundo se desplaza. Especialmente en dispositivos móviles. Pero sigue siendo bueno saber cómo se ve esa primera pantalla.
Archivos
- # 004 - Phone Canvas.psd.zip
- # 004 - Fotos.zip sin procesar