Из последнего видео мы знаем, что у нас есть пять основных моментов, которые следует учитывать при создании дизайна этого сайта. Мы будем держать их в голове по мере продвижения вперед.
Конечно, мы начинаем «сначала мобильные», и мы собираемся приступить к разработке дизайна в Photoshop. Не будем на этом останавливаться, но инструменты для творчества в Photoshop отлично подходят для творческого мышления в начале дизайн-проекта.
Мы открываем симулятор iOS, который поставляется бесплатно с XCode на Mac. Он предназначен для тестирования веб-приложений и собственных приложений на настольном / портативном компьютере. Мы просто хотим, чтобы это было быстро, чтобы мы могли сделать снимок экрана, чтобы получить контекстный холст в Photoshop.
Для справки, мы не запускаем «iPhone» первыми, это просто маленький экран, который нам удобно использовать. Мы не будем разрабатывать ничего, что слишком зависит от размера или возможностей iPhone.
Чтобы получить более высокий холст для работы (не нужно ограничивать сайт выше «сгиба»), мы отрезаем нижнюю часть телефона и перетаскиваем его ниже. Затем мы берем тонкий срез краев iPhone и перетаскиваем их вниз, так что, по сути, у нас есть супервысокий (но законченный) iPhone.
Мы оставляем направляющую на том месте, где заканчивался исходный экран, чтобы напомнить нам, насколько он был большим. Да, все прокручивают. Особенно на мобильном телефоне. Но все же приятно знать, как выглядит этот первый экран.
Файлы
- # 004 - Телефон Canvas.psd.zip
- # 004 - Raw Photos.zip