Я — начинающий web-дизайнер. Сегодня, моим руководством, мне была поставлена задача нарисовать мобильную версию сайта. Но я даже не знаю, с чего начинать. Я набросал на бумаге, что я хочу видеть там, но как это реализовать в photoshope — я понятия не имею. Мне хочется попросить вашей помощи и совета.
1. С какой шириной создавать макет для мобильных устройств.
2. С какой шириной рисовать, если я хочу, чтобы сайт хорошо смотрелся и на ретина экранах.
3. Может ли кто-то поделиться PSD макетом версии сайта для мобильных устройств, чтобы я на него ориентировался.
В интернете много информации о мобильных версиях сайта для верстальщиков и программистов. Но подробных рекомендаций по отрисовки макета для веб-дизайнеров я так и не нашел.
Выскажу свои пять копеек…
Начинайте не от разрешения целевого экрана- определитесь какой примерно экран у вашей будущей аудитории (можно например считать 3.5" и выше). Дальше подберите такой размер на вашем мониторе (чтобы 1:1 соответствовало физическому экрану). Дальше рисуйте учитывая что пропорции экранов могу меняться, т.е. сразу расчитывайте какие блоки будут «тянуться» а какие нет. Размеры привязывайте к процентам а не к пикселам (половина экрана и на планшете останется половиной а вот 320 px на ретина дисплее могут стать ооочень маленькими).
в общем…
1. Делайте обычный сайт считая что монитор очень маленький
2. Не пользуйтесь пикселами (заменяя их соотношениями, процентами и т.д.)
3. Учитывайте что кликают пальцем а не мышкой (почитайте по физическую область нажатия для пальца)
4. Не используйте плавных градиентов и слишком близких цветов (градиент скорее всего «заполосит», а гамма выполненная в сине, чуть синее будет плохо читаться при разном освещении)
5. Очень хорошо продумайте навигацию (красивое меню на пол экрана вряди кого то порадует).
Все ИМХО :)
p.s. Можно посмотреть примеры дизайна на различного рода сайтах продающих шаблоны, уже везде представлены как мобильные так и обычные версии.
Какая техническая сторона вопроса? Как мышко водить по холсту? Вроде всё расписал человек внятно. Еще раз, вам нужно сделать такой дизайн, поведение которого будет нормальным на всех устройствах, которые вы хотите охватить (не важно PDA оно или не PDA). Берете и начинаете рисовать, возьмите 2 крайних варианта — 320х480 и 2048х1536 (+ ландшафтное/портретное ориентирование), представляя как будет выглядеть тот или иной элемент при этих разрешениях/состояниях. Если вы никогда такого не делали, работайте совместно с верстальщиком, который это будет верстать.
А доступ к статистике посещений у Вас есть? Тот же GA хотя бы — посмотреть с каким разрешением заходят чаще всего с мобильных устройств и, исходя уже из этого, начинать рисовать основной дизайн. Скорее всего это будут разрешения шириной 320px или около того.
Зайти на шаблоны бутстрап, и сжимать окно любого шаблона - когда оно достаточно узкое, получается мобильная версия ) я по этому принципу нарисовала свой первый мобильный макет.
