Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 30
×

Что веб-дизайнеру нужно знать о вёрстке (HTML+CSS)

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Приветствую всех. Я не веб-дизайнер и не разработчик. Вёрстку знаю довольно поверхностно, дизайном увлекаюсь, возможно, буду изучать.
Веб-дизайн — имею в виду картинки + UI.

Что уже успел заметить и осознать:

1) Чем легче сайт и меньше кода, тем лучше. Вроде очевидно, но можно писать тома.

2) .svg легче .jpg и .png, но стилизация в CSS ещё легче чем .svg. Лучше, если можно обойтись CSS, а что не получается или очень сложно — сначала в векторе и только потом в растре.

3) Геометрия в CSS. Что это, и что можно сделать без особого выворота мозга. Сюда же: тени, градиенты и проч.

4) Понимать структуру и архитектуре сайта (в HTML), иметь представление о БЭМ.

5) Семантические теги. Не могу объяснить кратко почему я их упоминаю, но считаю, что знать и понимать желательно.

6) Bootstrap, Flexbox, CSS Grid. До flexbox и grid я пока не добрался, поэтому на примере Bootstrap. Как минимум, знать его сетку, а также вид и принципы работы его основных стандартных компонентов и js-элементов: например, Navbar и Carousel.

7) При более концептуальной разработке, приблизительно понимать, что можно сделать без JS, а что нет или очень сложно. Это для того, чтобы минимизировать использование JS, но, конечно, не в ущерб функциональности.

Вопросов два:

Что не так?
и
Что ещё?

И ещё один: сейчас есть тенденция к full stack дизайнерам. Насколько она сильна? Кто что думает на этот счёт, особенно в аспекте фриланса?
Я отношусь скорее скептически, думаю, лучше разделять.

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Моя позиция такая что дизайн это уже рабочий прототип. Если это веб — то рабочий статик хтмл сайт на хостинге. Благо верстка это не сложно (реально за день научить, есть неоднократный опыт) а ценность уже появляется (как для заказчика так и самого дизайнера — он знает как и что рисовать и почему «это работать не будет»).

Кто умеет делать дизайн и желает наработать навык верстки (подготовки завершенного прототипа) — стучите ко мне в телеграмы/скайпы, на реальных проектах помимо самих навыков верстки можно получить и более ценный опыт командной работы ;)

Мой личный жизненный совет узать разные фреймворки, а также редакторы кода с разными плюшками, такими как подсветка синтаксиса, подсказки и прочие нужные функции которые заметно ускоряют процесс верстки, также посоветовал бы использовать редактор Adobe Brackets

Так как он позволяет сразу видеть результат, в одном окошке пишите код, в другом видите результат, очень удобно и практично

вебдизайнеру крайне желатьельно знать/уметь:
1. лучше изначально ориентироваться на прямоугольность элементов(да-да, есть CSS Shapes с потрясающе низким уровнем поддержки; многоколоночность с CSS regions тоже для маргиналов пока что);
2. можно генерировать сложные фоновые изображение наложением и повторением; об этом гораздо проще думать на этапе дизайна, чем потом над макета мучаться
3. учитывать и показывать адаптивность/резиновость. хуже нет, чем когда приходит макет с оптимизацией под 1280×1024, а варианты под мобильный тебе рассказывают на пальцах, а во время реализации вылезают всякие косяки, не учтенные ранее; zoom level тоже предусматривать или хотя бы озвучить
4. иметь четкую установку на самоповторение: одни и те же решения на разных страницах. если один и тот же компонент разительно отличается во внешнем виде или реакциях — это уже два разных компонента. верстать сложнее, поддержка и изменение — намного сложнее. не знаю, как именно это делать — guideline к конкретному дизайну, библиотека компонентов в программе прототипирования.

Спасибо за статью и рекомендации!

стилизация в CSS ещё легче чем .svg

Все равно что сказать «стилизация в CSS еще легче чем HTML».

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

Это всё философия. А веб-дизайнеру нужно другое. Совсем другое.

Коментар порушує правила спільноти і видалений модераторами.

Коментар порушує правила спільноти і видалений модераторами.

хорошая статья впринице, но совет: если задеваешь какие то темы больше раскрывать суть, и делать углубления

Я бы с удовольствием написал более развёрнуто, но, повторюсь, у меня нет опыта.
Мысль простая: если дизайнер будет разбираться в вёрстке, то будет хорошо всем, если не будет, то только ему и далеко не всегда.

Следует знать, что можно научить нейросеть делать вёрстку.

Підписатись на коментарі