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