• Какая оптимальная максимальная ширина контента для адаптивного сайта?

    pozZzitiv
    @pozZzitiv Автор вопроса
    Дизайнер и перфекционист
    Я считаю оптимальными размеры в районе от 1440 до 1600рх при условии наличия сайдбаров или иных колонок (если колонка всего одна, то не должна быть широкой иначе текст читать будет невозможно). Статистика популярных разрешений это подтверждает
    f0e4a184338d43debec2ed2980c9e651.png
    За примерами далеко ходить не надо: Тостер имеет ширину контента 1440рх и это удобно. Контент занимает большую часть экрана и навигация осуществляется посредством сайдбаров. Причём, сделать в подобном ключе можно не только информационный сервис или новостной сайт, но и коммерческий сайт или магазин.
    Ответ написан
    Комментировать
  • Что добавить или убрать на продающем сайте, советы по сайту и какие основные ошибки?

    indrigor
    @indrigor
    web designer
    Первое впечатление - что в дизайне сайта задействованы методы из дизайна полиграфии (разнообразия шрифтов, цветов и прочее), что пагубно отражается на юзабилити, слишком сложный для восприятия. Дизайн сайта значительно отличается от дизайна полиграфии. Пользователь должен как можно больше находится на этом сайте, ничто не должно его отвлекать. Если все будет разного размера, в разных шрифтах, в разных цветах - пользователь просто уйдет из сайта, ему будет не интересно. Другими словами сайт не будет работать.

    По Главной:
    1. Шапка сайта: Социконки нужно переместить в другое место, не нужно лепить их к логотипу, логотип должен выделяться, а социконки над ним только отвлекают внимание от него (логотипа).
    - Телефон нужно выделить, он не заметен (или сделать крупнее или выделить к примеру белым цветом )
    - Меню. Эффекты при наведении немного непривычны :), но корзину нужно сделать крупнее и возможно как-то выделить, она теряется

    2. Слайдер: Не понятно что иконка со стрелкой это просмотр Видео. ВОзможно стоило выделить ему отдельное место на слайдере или сделать типо такого www.soft.se
    С типографикой на баннере слайдера нужно поработать. Здесь методы, которые применяются в дизайне печатных продукции работать не будут. Желательно для сайта использовать два (максимум три) шрифта.
    "Или" не нужно делать косым, выглядит чужеродно.
    Ссылка "заполнить форму" нужно показать, как она будет выглядеть при наведении, чтобы пользователь визуально понял, что он навел на эту ссылку.

    3. Три блока под слайдером. Нужно сделать эффекты при наведении (рамка появляется, картинка затемняется или наоборот - становится светлой, тут на свое усмотрение:)). Главное чтобы пользователь понял на что он наводит. Возможно типографику на этих блоках нужно сделать цельной, подписи под этим блоками стоит убрать, их все равно никто читать не будут и так понятно, о чем они (блоки).

    4. Заголовки. Первое впечатление, которое возникнет у пользователя - что это большие кнопки. Если выделять заголовки, то точно не так. Слишком много они отвлекают на себя внимания, а это плохо ).

    5. "Почему выбирают именно нас". Яркий желтый блок заголовка отвлекает внимание от описания этого блока.
    Заголовки "Мы любим...", "Обработка..." и "Материалы..." лучше не центрировать, теряется целостность.

    6. "Узнать о нас". Не понятно, что это ссылка.
    Блоки "Доступные цены" и "Премиум качество" нужно выравнить, такое ощущение, что слетела верстка )).
    Описание этих блоков не делать заглавными буквами, плохо читается и теряются на фоне Заголовков и кнопок, где шрифт сделан заглавными.

    7. Примеры работ. Нужны эффекты при наведении на работы. Поискать эффекты можно здесь tympanus.net/codrops/category/playground или просто хоть как-то дать понять пользователю, на что он наводит )

    8. Как заказать печать. Сделать такой же размер, как остальные заголовки. Вначале принял за кнопку ))
    Блок в целом выглядит инородным. Другие иконки, другие цвета.
    В плане иконок лучше сделать их цветными, а цифры монотонными, уменьшить или вообще их убрать (они отвлекают на себе ненужное внимание). Возможно иконки немного уменьшить. Заголовки иконок отцентрировать, чтобы было гармонично. Возможно, иконки выделить каким-нибудь одним ярким цветом, но это мое личное мнение )

    9. Блок "Ты нам нравишься" лучше не стоит делать таким высоким и не делать социконки вразброс (делать на одном уровне, визуально так удобнее кликать).

    10. Заполнить форму. Принял это за кнопку )). Зеленая кнопка выпадает из стиля. Для всех кнопок я бы сделал высоту побольше, они должно выделяться.

    11. Рассылка. Поле выбивается из стиля. В дизайне элементы с острыми углами, а тут с закругленными. Возможно стоит тогда делать и кнопки с закругленными углами, тогда возможно поле для ввода впишется в общий стиль дизайна.

    Сделал описание только Главной страницы, так как в основном она задает общий стиль сайта.
    Еще один момент который сразу бросается в глаза - бредкрамс (хлебные крошки) абсолютно незаметны, это есть нехорошо. Не думаю что кидать их вправо это хороший вариант. Нужно размещать там, где их легко можно будет заметить.
    Ответ написан
    4 комментария
  • Это адаптивный дизайн?

    goandkill
    @goandkill
    live slow — die old
    По сути технически разница не велика.
    Руками придется делать ровно всё то же самое. Но во втором случае, описание дизайна будет длиннее и подробнее. Еще лучше с прототипом.
    Эти примеры как небо и земля. Тут вообще не должно быть такого, чтоб верстальщик плевался.
    Работа дизайнера не в том чтобы отдать картинки и забыть. Это должна быть связка понимающих и уважающих друг друга специалистов (или в лице одного человека, что реже).

    Сетка это частный случай. Какую придумаете - такая и будет. Но велосипед уже изобретен.
    Ответ написан
    4 комментария
  • Это адаптивный дизайн?

    Как правильно "рисовать", чтобы не плевался верстальщик?

    Вот так: https://github.com/andrey-hohlov/psd-templates-req...
    Ответ написан
    2 комментария
  • Какие размеры дизайнов нужны под адаптивную верстку интернет магазина?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Не обращайте внимание на конечные размеры. Рассуждайте устройствами.
    1. Смартфоны, которые держат вертикально (не важно айфон 4 это или айфон 6 плюс или может галакси ейдж) (обычно 300-450)
    2. Смартфоны, которые держат горизонтально (опять же любые) (обычно 450-600)
    3. Планшеты в вертикальном положении (обычно 600-800)
    4. Планшеты в горизонтальном положении (обычно 900-1024)
    5. Десктопные экраны (1024+)
    6. Очень большие экраны (1600+)

    Так что, как видите, конечные размеры могут прыгать в зависимости от вида смартфона, так что дизайн должен быть немного резиновым в рамках каждого шага.
    Ответ написан
    Комментировать
  • Адаптивная верстка, сколько должно быть макетов?

    bootd
    @bootd Куратор тега HTML
    Гугли и ты откроешь врата знаний!
    Зачем столько макетов?
    Если шаблон адаптивный, то он сразу должен быть резиновым и тянуться.
    К примеру, возьмите свой шаблон и начните уменьшать окно браузера, как только появляется полоса прокрутки(снизу) или верстка начинает ползти, вот там первый размер для @media запроса и так далее (в хроме консоль показывает ширину окна при его уменьшении. Ну или плагины для браузера). Ваш шаблон сам скажет вам, когда нужно перестраивать блоки. Вам лишь нужно смотреть, на какой ширине экрана нужно писать @media запрос.

    Пользуясь этим правилом, вам может понадобиться всего лишь 3 макета, а то и вообще обойтись без них.
    1) Основной(большой для PC) - 1280 px
    2) Средний(для планшета) - 1024 px
    3) Маленький(для смартфона) - 480 px
    Ответ написан
    Комментировать