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

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

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

(Сейчас максимально черпаю информацию из открытых источников, но к сожалению информация везде разная) 

 Если вы занимались разработкой прототипов, то вы (по идее) должны понимать, что такое сетка.  
  

Макеты в 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. Так же, как правильно сказали другие люди, не стоит забывать про ширину контейнера с контентом, обычно он имеет фиксированную максимальную ширину, но это тоже зависит от дизайна. 

 Макет (!!!) всегда 1920 по ширине.   
  

Лучше сразу учиться использовать бутстрап-сетку (погуглите), сэкономите себе пару лет.   

Сетки готовые есть в интернете, можете мне написать, дам свою сетку, которую часто использую. За ее правильное использование вас будут воспевать от Калининграда до Хабаровска все, и верстальщики, и менеджеры проектов, и клиенты.  
![5c10d5fbe2e0a507683185.png](https://habrastorage.org/webt/5c/10/d5/5c10d5fbe2e0a507683185.png)  
  

Размер шрифтов - для заголовков от 20 до 35 пикселей.  

Для текста - от 14 до 16 (не больше!) 

 Странные вопросы от человека который занимался ДИЗАЙНОМ... Спрашивать про размеры, сетку.... Как вы работали вообще? Или поди верстальщики от вас стрелялись?  

> Есть хорошие понимание usability интерфейсов программ, приложений и веб-сайтов.

  

да?