Советы дизайнеру от Верстальщика

Советы Дизайнеру от Верстальщика

Приветствую, меня зовут Даниил Вершинин. Я — full-stack разработчик. Уже более 3 лет занимаюсь версткой сайтов. И мне хотелось бы дать несколько советов дизайнерам, которые занимаются разработкой макетов для сайтов. Перед тем, как начну сразу предупрежу, что я очень ценю труд дизайнеров, ибо понимаю насколько все это тяжело)

Самое главное, что должен понять дизайнер сайта, так это то, что над его макетом потом будут работать другие люди, и его главная задача — обеспечить удобную работу с макетом в дальнейшем.

Используйте сетку

Сейчас абсолютно любой верстальщик использует какой-либо фреймворк или заготовку, придерживаясь определенной разметки. Чаще всего — это 12-ти колоночная сетка Bootstrap:

12-ти колоночная сетка Bootstrap

12-ти колоночная сетка Bootstrap

Опыт показал, что практически все дизайнеры используют подобную разметку, но мало кто ее придерживается. Доходит до абсурда — сетка есть, но ни один блок ею не ограничивается (заходит за поля отступов или вообще выходит за границы container).

Подробнее про сетку Bootstrap можно почитать тут

Преобразовывайте картинки в смарт-объекты или присылайте отдельным архивом

На самом деле, работа с картинками занимает достаточно много времени. Что-бы не отнимать его у верстальщика — пришлите все исходные изображения отдельным архивом (они у вас и так есть, а ему будет приятно).

Был случай, когда дизайнер умудрился еще и наложить эффекты на фотографии прямо в макете. Приходилось вручную объединять слои, триммить и сохранять(

Присылайте шрифты отдельным файлом

Ситуация такая же, как и с картинками. Скорее всего у верстальщика нет тех шрифтов, которые вы используете в макете. «Но он может скачать шрифты из интернета», скажете вы и будите не правы, ибо в интернете, особенно в российском сегменте скачаешь либо вирус, либо какое-то подобие искомого шрифта. В конечном итоге, сверстанный сайт будет резать глаз.

Структурируйте слои

Как по мне, тут особых комментариев не нужно, но напомню, что названия как групп слоев, так и самих слоев должны нести смысловую нагрузку т четко разделятся на секции сайта (header, nav, main, breadcrumb, footer).

Используйте UI-kit

Точнее, присылайте данный файл верстальщику. В парадигме сайта в нем должны присутствовать:

  • Элементы, не присутствующие в макете. Например, в основном макете может не присутствовать кнопки с классом .danger, а вот в файле UI-kit она должна быть прорисована
  • hover-эффекты и другие элементы взаимодействия с пользователем
  • Палитра цветов, которые используются в макете

Пример хорошего UI-kit недавно сверстанного мною сайта:

UI-kit

UI-kit

Подробнее про UI-kit тут

Рисуйте несколько макетов

Тут я прекрасно понимаю, что лишнюю работу бесплатно делать никто не хочет, но, все-таки, постарайтесь убедить клиента или свою команду в том, чтобы получилась хорошая верстка, необходимо рисовать не менее 3 макетов:

  • Под мобильные устройства (телефоны)
  • Под таблетные устройства (планшеты)
  • Под десктоп (компьютер) и больше

    Дизайн нескольких макетов

    Дизайн нескольких макетов

Знать основы HTML&CSS, фремворков

Если вы планируете долго работать в сфере разработки дизайна сайтов, то рано или поздно вам придется столкнуться с изучением основ HTML&CSS и Фреймворков. Это необходимо для того, чтобы вы понимали базовые принципы верстки и не ставили перед верстальщиком невыполнимых задач (хотя, выполнить можно все что угодно, но, как правило, для этого приходится ставить костыли).

Вас никто не заставляет полностью изучать фреймворки, но тем не менее вы должны понимать различия между .container и .container-fluid.

Знать CMS на которую будет натягиваться верстка

Особенно это правило относится к CMS, разработанных по MVC. Например, Opencart — практически все сайты на этой системе похожи по структуре, так ка там изначально встроен Bootstrap. Если  об этом знать заранее, то вы выполните гораздо меньше работы (вам останется просто перестилизовать блоки — так как они уже стоят на своих местах) и не обречете верстальщика на вечные страдания.
К тому же, знать CMS полезно и для того, чтобы не забыть про все страницы, которые необходимо прорисовать)

Читайте свежие статьи про дизайн

Это необходимо не только для того, чтобы быть «в тренде». На самом деле, дизайн очень сильно влияет, например, на конверсию. С недавнего времени хорошо разработанный дизайн и взаимодействия с пользователем влияют и на SEO — подробнее об этом в статье Почему UX действительно важен для SEO.


Надеюсь, было интересно. Если не трудно, отпишитесь в комментариях чтобы вы еще добавили в этот список.

Спасибо за внимание)

Мета-теги для покраски верхней панели браузера

Не так давно в мобильных браузерах появилась новая фишка — покраска вкладки в уникальный цвет. В данной статье мы поговорим, для чего это нужно и как это реализовать с помощью мета-тегов.

Для чего это все?

В современном мире сайты уже трудно назвать обычными веб-страницами. Многие из них походят на полноценные веб-приложения. Многе мобильные браузеры поддерживают эту тенденцию, и, чтобы сайты стали чуть-больше похожими на приложения они и добавили такую интересную функцию.

Как сделать?

На самом деле, все просто! Добавив пару строчек в <head> Вашей страницы вы придадите уникальность Вашему сайту!

Вот пример для самых популярных браузеров:

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4" />

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4" />

<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-transcluent" />

<!-- Яндекс.Браузер -->
<meta name="viewport" content="ya-title=#000000,ya-dock=fade" />

 

Роторный телефон ретро-ввод номера для Вашего сайта

Роторный телефон: ретро-ввод номера для Вашего сайта

Статья «Плохие веб-формы» говорила об абсурдных формах для ввода телефонных номеров, таких как в том числе incrementer, бегунок, генератор случайных чисел, и очень большой выпадающий список.

Я хочу представить вам интересное решение на основе роторного телефона. Возможно не самый эффективный способ ввода, но довольно веселый. Попробуйте его, особенно те, кто не успел застать подобные телефоны в реальной жизни.

Демо: Смотреть
Исходники на GitHub
Оригинал статьи: Rotary: A Retro Web Input for Phone Numbers


Как думаете — как данный аппарат может повлиять на юзабилити Вашего сайта? Пишите в комментарии.

Три новых свойства CSS для изучения в 2017

Три новых CSS свойства для изучения в 2017

Несмотря на то, что к началу 2017 г. появилось множество новых свойств CSS, 3 из них представляют особый интерес.

1. Запросы свойств в CSS

Ранее отмечалось, что запросы свойств (Feature Queries) являются одним из наиболее желательных свойств (features) CSS.

Теперь они представлены в основных браузерах и поддерживаются в каждом из них (в т.ч. Opera Mini). Исключение составляет только Internet Explorer.

Запросы свойств, используя правило &supports, позволяют сформировать в CSS традиционный блок, который будет применяться только тогда, когда текущий агент пользователя будет поддерживать конкретную пару свойство-значение. Простейший пример этого – использование исключительно стилей Flexbox для браузеров с использованием display: flex:

@supports ( display: flex ) {
  .foo { display: flex; }
}

Кроме того, для создания более сложных запросов свойство можно использовать операторы and и not. Например, можно установить поддержку браузером только старого синтаксиса Flexbox:

@supports ( display: flexbox ) 
          and 
          ( not ( display: flex ) ) {
  .foo { display: flexbox; }
}

 

Поддержка в браузерах

Запросы свойств CSS позволяют пользователям определять правило на основании информации о том, поддерживаются ли конкретные объявления свойств в CSS при использовании в качестве правила &supports.

2. Положение сетки

Модуль Grid Layout CSS представляет собой систему для создания макетов, основанных на представлении контента в сетчатой структуре. Он имеет сходство с модулем Flexible Box Layout, но предназначен для более конкретного формирования макетов страниц.

Точное размещение элементов

Сетка состоит из контейнера сетки (Grid Container), созданного с помощью display: grid, и элементов сетки (Grid Items) (дочерних элементов контейнера). CSS позволяет легко и точно организовать расположение элементов в зависимости от их расположения в соответствии с разметкой документа.

Например, в статье «Создание макета Заветное желание» (Holy Grail)  с помощью сетки CSS» показан способ использования данного модуля для создания макета «Заветное желание».

Создание макета Заветное желание» (Holy Grail)  с помощью сетки CSS

Для реализации этого потребовалась всего 31 строка кода.

.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }

.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 100px 
                        1fr
                        30px;
    min-height: 100vh;
}

@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
        grid-template-columns: 100%;
        grid-template-rows: 100px 
                            50px 
                            1fr
                            50px 
                            30px;
    }
}

Адаптивная длина (Flexible Lengths)

Модуль сетки CSS (CSS Grid Module) содержит следующие элементы: новое значение длины, элемент fr, содержащий информацию о части свободного пространства, оставшейся в контейнере сетки.

Это дает возможность распределить элементы сетки по ширине и высоте в зависимости от наличия доступного пространства в контейнере. Например, в макете «Заветное желание» для того, чтобы обеспечить занятие основным разделом всего пространства, оставшегося после двух боковых колонок, используется код:

.hg {
    grid-template-columns: 150px 1fr 150px;
}

Межстолбцовые промежутки (Gutters)

Для определения межстолбцовых промежутков в макете используются свойства (properties) grid-gap grid-column-gap и grid-row-gap. Значения для этих свойств представляются с помощью типа данных <length-percentage>  и выражаются в процентах, соответствующих размерам области контента.

Для формирования межстолбцовых промежутков размером 5% используется код:

.hg {
    display: grid;
    grid-column-gap: 5%;
}

Поддержка в браузерах

Модуль CSS Grid будет доступен в браузерах уже в начале весны.

Способ использования сетчатой концепции для расположения контента обеспечивает пользователей механизмом разделения доступного пространства для размещения контента в столбцах и строках с помощью набора алгоритмов прогнозируемого изменения размеров.

Прим.: салатовый цвет – частичная поддержка.

3. «Нативные» переменные в CSS

«Нативные» переменные (Native Variables) – модуль установления обычных пользовательских свойств для переменных каскадирования (Custom Properties for Cascading Variables Module). Данный модуль представляет собой способ создания установленных пользователем переменных, которые могут быть определены как значения для свойств.

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

:root {
  --theme-colour: cornflowerblue;
}

h1 { color: var(--theme-colour); }  
a { color: var(--theme-colour); }  
strong { color: var(--theme-colour); }

Иногда имеется возможность выполнить это с помощью препроцессоров CSS, таких как SASS, но переменные CSS имеют преимущество перед ними, выраженное в существовании их в браузере. Это выражается в том, что их значения могут быть обновлены напрямую. Например, для изменения свойства —theme colour- можно использовать код:

const rootEl = document.documentElement;  
rootEl.style.setProperty('--theme-colour', 'plum');

Поддержка в браузерах

CSS переменные (пользовательские свойства допускают объявление и использование переменных каскадирования в таблицах стилей.

Оригинал статьи: 3 New CSS Features to Learn in 2017