Как правильно сделать дизайн на 3 разные устройствах?
День добрый. Подскажите пожалуйста как правильно сделать дизайн на 3 разные устройствах (мобильный 800, планшетный 1024, десктопный 1280)?
Сделал сайт в фотошопе 1024, клиенту понравилось и просит мобильный и более большего разрешения.
При создании использовал сетку 940 (12ст. 60/20).
Нужен не адаптивный, а просто в 3х исполнениях.
Интересуют тонкости, нужно ли увеличивать (уменьшать) шрифты, картинки, блоки... или просто добавить (убрать) столбы с сетки и под имеющиеся распределить контент?
Выручите. Подскажите где можно посмотреть, почитать. Буду очень-очень благодарен. п.с. Статейки на хабре некоторые читал, смотрел видосы... но в основном приводят примеры с адаптивным дизайном... есть ли отличия?
По-моему, проблема надуманная. Рисовать для разных разрешений суть следующее:
1) берем энное количество контента
2) пытаемся красиво и в едином стиле запихнуть этот контент в три разных разрешения
Как именно это сделать - зависит от тебя, дизайнера. Можно просто по-ленивому сделать - пропорционально отмасштабить. Можно пожонглировать интерфейсом, переместить его элементы. Можно поменять интерфейс (на десктопе видим навигацию - на мобильнике видим гамбургер).
Спасибо. Подскажите пожалуйста хорошую статейку, гайдик по созданию сайтов для мобильных? Т.е. интересует конкретика, размер иконок (44х44, 57х57), какие менюшки можно вставлять (гамбургер) и тд и тп...
Дмитрий Бойко: ну, навскидку и весьма будет полезно - https://www.google.com/design/spec/material-design... (еще порекомендую гайд по метро-дизайну от микрософта, он на порядок проще, но не так популярен). Там есть рекомендации вообще для всего - даже для десктопных приложений. И все-все мелочи прописаны - настолько тщательно, что можно сидеть и вкуривать до посинения. В отрыве от конкретного гайда (будь то чужой гайд или собственноручно разработанный гайдлайн/брендбук) гадать о размерах иконок и прочей конкретике - бессмысленно, нужно смотреть на твой контент и просто красиво его оформлять.
Дмитрий Бойко: да, инфы там масса, но придется как следует посидеть за ней - гайдом по материалке очень сложно пользоваться, на мой взгляд, информация по одной теме может быть раскидана по разным местам (например стили шрифтов - инфа по кеглю, трекингу и интерлиньяжу раскидана, хотя казалось бы - должна быть в одном месте). Но если посидишь над ним терпеливо - начнешь видеть систему (она кстати еще и не особо очевидная, частенько кажется нелогичной). Так что иногда проще всё-таки делать по-своему и следить, чтоб всё было аккуратно и красиво)
Liquidos: Если бы еще анг получше поднатягать, хотя там прилично все и в картинках отображено... Такой момент, сейчас приступаю к дизайну сайта чисто для телефона, выбрал разрешение айфона 640. Всели я правильно сделал или уже актуальны более большие разрешения?
Дмитрий Бойко: Вот тут вроде как пытаются его перевести: awdee.ru/material-design-full-guide Насчет разрешения - зависит от того, на кого нацелен продукт. У какого-то там айфона ширина экрана всего 320 пикселей - смотри подробные спеки вот тут: https://design.google.com/devices/ . Я бы это учитывал. То есть, безопасней всего рисовать для самого худшего варианта, чтоб не сесть в лужу; но опять таки - выбор минимального разрешения зависит от целей и задач.
Дмитрий Бойко: ну так теперь понятно. Если вам сказали делать 3, то и платить будут за 3. Тогда смысл был задавать вопрос, если четко поставлена задача.
P.S. я думал вы верстать в коде собираетесь )
Дмитрий Бойко: Самый очевидный способ понять как делать варианты адаптивного дизайна для верстки - это попробовать поверстать адаптивный дизайн самому. Обычно для верстальщика сполна хватает одного дизайна, например для 1024. Дальше уже не проблема все порастягивать и посужать (в разумных пределах конечно же). Если у вас есть какое то нестандартное решение - то можете подготовить и этот вариант дизайн для какого либо разрешения. В любом случаю если есть возможность поговорить с верстальщиком на стадии разработки фотошоп шаблона, то сделайте это, он вам сообщит нужен ли ему дополнительный дизайн, или же его не затруднит адаптировать самому на основе одного дизайна.
Для адаптации используйте Css медиазапросы для необходимых разрешений. Для 1280 - растягивайте, для 800 сужайте. Шрифты не обязательно трогать, просто ширины блоков. Если верстка адекватная, то все само собой нормально растянется и сузится.
Спасибо. С версткой не имею никакого отношения... чисто рисую псд. Таких видосов кучу пересмотрел. Вот про шрифты уже заполнил, что вы написали. Хотелось бы увидеть более разборчивую статью что-ли...
Средний
