С чего начать веб-дизайн?

С чего начать веб-дизайн начинающему?
Есть хорошие понимание usability интерфейсов программ, приложений и веб-сайтов. Занимался разработкой прототипов в спец. софте, НО появилось желание вырасти, и сосредоточиться только на веб-дизайне. И да, я хорошо владею Photoshopом. Ранее я никогда не реализовывал готовый макет веб-сайта предназначенный для передачи верстальщику для вёрстки, это делал веб-дизайнер по моим прототипам. Соответственно о технической части создания веб-дизайна я мало что знаю.

Поэтому, у меня появилась гора вопросов связанных с веб-дизайном. Одни из них:
Где получить актуальную информацию по рекомендованным стандартам макетов для сайтов, интересует ширина, длина самого сайта, а ширина области контента. Размеры шрифтов и т.д. Что такое сетка, и как её настраивать?

(Сейчас максимально черпаю информацию из открытых источников, но к сожалению информация везде разная)
  • Вопрос задан
  • 2366 просмотров
Пригласить эксперта
Ответы на вопрос 3
SmthTo
@SmthTo Куратор тега Вёрстка
Все перепёлки мира будут оплакивать мою смерть.
Если вы занимались разработкой прототипов, то вы (по идее) должны понимать, что такое сетка.

Макеты в Photoshop делать неудобно, для этого сейчас есть специальное ПО типа Figma, Sketch. В них есть инструменты для реализации 90% процентов потребностей современных сайтов. В плане дизайна, конечно же. Отдельные элементы (типа сложных иконок, SVG-масок, графических элементов) уже нужно делать в других программах (Illustrator, Photoshop и т. п.).

Более того, вам нужно иметь понимание о вёрстке (HTML, CSS) — и чем глубже, тем лучше. Иначе вы можете «надизайнить» те вещи, которые реализовать либо технически невозможно, либо архисложно.

Экраны (типичные по ширине; без промежуточных значений):
· 1920 — большинство «больших» мониторов имеют данное разрешение, но за стандарт я бы его не брал. Но желательно учитывать данное разрешение тоже.
· 1300 — условный некий стандарт (ноутбуки).
· 1024 — планшеты (iPad 9.7" в альбомной ориентации).
· 768 — планшеты (iPad 9.7" в портретной ориентации).
· до 767px — смартфоны.

Я для себя выбрал такие экраны, с которых начинаю:
1. от 0 до 767
2. от 768 до 1023
3. от 1024 до 1199
4. от 1200 до 1300
5. от 1301 до 1900
6. от 1900 до 2500

Но опять же — на конкретном проекте указанные выше диапазоны значений могут меняться или вовсе объединяться, могут добавляться промежуточные и т. д. К примеру, если у вас основное разрешение 1360 пикселей (ноутбуки), но т. н. boxed-layout, то вам надо делать макет шириной меньше, чтобы были видны границы по бокам + учитывайте ширину скроллбара Windows (16–17px).

Update. Так же, как правильно сказали другие люди, не стоит забывать про ширину контейнера с контентом, обычно он имеет фиксированную максимальную ширину, но это тоже зависит от дизайна.
Ответ написан
Комментировать
pospelov
@pospelov
Руководитель веб-студии
Макет (!!!) всегда 1920 по ширине.

Лучше сразу учиться использовать бутстрап-сетку (погуглите), сэкономите себе пару лет.
Сетки готовые есть в интернете, можете мне написать, дам свою сетку, которую часто использую. За ее правильное использование вас будут воспевать от Калининграда до Хабаровска все, и верстальщики, и менеджеры проектов, и клиенты.
5c10d5fbe2e0a507683185.png

Размер шрифтов - для заголовков от 20 до 35 пикселей.
Для текста - от 14 до 16 (не больше!)
Ответ написан
@Dasha_2017
Странные вопросы от человека который занимался ДИЗАЙНОМ... Спрашивать про размеры, сетку.... Как вы работали вообще? Или поди верстальщики от вас стрелялись?
Есть хорошие понимание usability интерфейсов программ, приложений и веб-сайтов.

да?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы